UI 组件类型 · 单一组件 / Avatar
Avatar
Avatar 如何在界面中被理解、操作或组合？
关键字段
Identity · 身份
- 子类型
- 单一组件
- 父级类目
- 媒体与身份
What · 是什么
- 组成与状态
- Avatar 的语义角色、视觉容器、内容区域和交互反馈。
Where · 在哪里
- 适用场景
- Web 界面设计
How · 怎么做
- 检查清单
- 语义正确；键盘可用；焦点可见；状态可感知；响应式可用。
Lifecycle · 生命周期
- 状态
- 启用
所属组件分类、组件部件与横向适用关系
关系来自本地关系表，并包含反向关联。
- Author BioAuthor Bio反向 · 应用于
说明作者身份、专业背景、联系方式和相关文章，建立内容责任主体。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Comments / DiscussionComments / Discussion反向 · 应用于
允许用户在内容对象下阅读、发表和回复讨论，并处理审核和空状态。
- Community / Activity FeedCommunity / Activity Feed反向 · 应用于
连续呈现社区成员、产品活动或协作事件，支持参与、筛选和回到对象。
- Social ProofSocial Proof反向 · 应用于
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Team GridTeam Grid反向 · 应用于
以成员卡片展示团队角色、专长、身份和联系/了解更多入口。
- Testimonial BlockTestimonial Block反向 · 应用于
以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。
- UGC GalleryUGC Gallery反向 · 应用于
以用户生成图片、视频或帖子形成参与感、真实感和社区证明。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 媒体与身份Media & Identity属于
用于表达人物、对象、图片、视频、文件和品牌身份的组件。
- Avatar ImageAvatar Image反向 · 属于
呈现用户或实体头像图片的区域
- FallbackFallback反向 · 属于
无法获取身份图片时的替代内容
- InitialsInitials反向 · 属于
没有图片时显示的姓名首字母
- Presence IndicatorPresence Indicator反向 · 属于
表达在线、离开或忙碌状态的标记