用户头像是我们在做UI时经常会用到的设计元素,但想要设计好它也是有很多需要注意的细节知识的。
今天这篇文章将深入到头像设计的方方面面,不同的事件、状态、操作、配色等等一系列UI设计的最佳实践。这篇文章准备了很多实例,或许可以给你一些启发。
用户头像有哪些类型?
-
空状态 -
名字的首字母 -
用户照片或者图片
颜色和尺寸
-
为了更好的识别,不同用户配色可以多样化一些 -
页眉、导航栏中一般用24-40dp宽度为主 -
40-48dp的头像大小通常用在内容块或列表中 -
如果你想在更大的页面中使用头像,比如个人中心、设置中心等时,推荐使用56+dp
事件和通知
-
指示灯标识用户是在线还是不在线 -
通过带有编号的标签通知提供信息 -
可以在用户头像上增加额外的图标提供用户行为操作
用户的不同状态
-
绿色的代表在线,灰色代表不在线 -
填充图形代表用户在线状态,而空心形态用户不在线的状态(并且是可以操作的)
通知标签
-
对于高优先级的提示,可以使用高亮的底色+反白的文字 -
对于其他情况,使用浅色背景,形式上做一些弱化
操作按钮
-
将图标更改为符合用户期望的结果 -
颜色的使用要合理,需要强调事件或动作的含义
包含文字的头像
单边文本
-
较大的标题用于表示用户的名称 -
额外信息的文字是可选的(例如:状态、职业、上次访问、关注者数量等)
底部文本
头像的用户体验模式
事件
进度
选择
用户头像群组
带一个按钮
标记
带有悬浮状态的标记
具有悬停状态的头像
页面模板
本篇文章来源于微信公众号: 体验进阶