为何重要
面孔瞬间形成印象（Willis & Todorov, 2006），照片未必真实（Hancock & Toma, 2009），按视觉层级设定尺寸。
没有照片时
用首字母或图案默认图（Gravatar, n.d.；MDN, n.d.），保证色彩对比。
状态与无障碍
勿只靠颜色，恰当设置替代文本（W3C, n.d.；WCAG 2.2），并扩大点击区域（Parhi et al., 2006）。
常见问题
- 首字母颜色怎么定？
- 由名字计算以保持一致。
- 需要alt吗？
- 名字相邻时用空alt。
来源核查日期：2026-10-27
参考文献
- World Wide Web Consortium. (n.d.). Images tutorial. Web Accessibility Initiative. 替代文本的区分。
- MDN Web Docs. (n.d.). <img>: The Image Embed element. 加载失败与尺寸。
- Gravatar. (n.d.). Gravatar developer documentation. 默认头像选项。
- Willis, J., & Todorov, A. (2006). First impressions: Making up your mind after a 100-ms exposure to a face. Psychological Science, 17(7), 592–598. 面孔第一印象。
- Hancock, J. T., & Toma, C. L. (2009). Putting your best face forward: The accuracy of online dating photographs. Journal of Communication, 59(2), 367–386. 照片真实性与信任。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 小头像点击区域。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.1.1与1.4.3标准。