其他
工作多年才发现,原来头像这么小的设计细节,也有这么多知识点
这是彩云的第192篇分享
Hi,我是彩云。用户头像是我们在做UI时经常会用到的设计元素,但想要设计好它也是有很多需要注意的细节知识的,今天这篇文章将深入到头像设计的方方面面,不同的事件、状态、操作、配色等等一系列UI设计的最佳实践。这篇文章准备了很多实例,或许可以给你一些启发。
近年来,我几乎每天都在浏览数以万计的UI组件、界面、不同的网站和app,研究它们的结构、布局和配色方式。我的目标是创建一个全面的UI指南,设计应用及其组件、模板等。
今天这部分讲的就是关于用户头像的UI组件探索。用户头像是一个组件元素,用户通过它来标识自己。
用户头像有哪些类型?
基本上有以下三种类型可以用来代表用户头像
空状态 名字的首字母 用户照片或者图片
颜色和尺寸
为了更好的识别,不同用户配色可以多样化一些 页眉、导航栏中一般用24-40dp宽度为主 40-48dp的头像大小通常用在内容块或列表中 如果你想在更大的页面中使用头像,比如个人中心、设置中心等时,推荐使用56+dp
事件和通知
指示灯标识用户是在线还是不在线 通过带有编号的标签通知提供信息 可以在用户头像上增加额外的图标提供用户行为操作
用户的不同状态
绿色的代表在线,灰色代表不在线 填充图形代表用户在线状态,而空心形态用户不在线的状态(并且是可以操作的)
通知标签
对于高优先级的提示,可以使用高亮的底色+反白的文字 对于其他情况,使用浅色背景,形式上做一些弱化
操作按钮
将图标更改为符合用户期望的结果 颜色的使用要合理,需要强调事件或动作的含义
包含文字的头像
单边文本
较大的标题用于表示用户的名称 额外信息的文字是可选的(例如:状态、职业、上次访问、关注者数量等)
底部文本
头像的用户体验模式
事件
进度
选择
用户头像群组
带一个按钮
标记
带有悬浮状态的标记
具有悬停状态的头像
页面模板
原文:https://blog.prototypr.io/designing-the-avatar-all-you-need-to-know-a22af3daa1f2
作者:Roman Kamushken
译者:彩云Sky
本文翻译已获得作者的正式授权(授权截图如下)
经常有设计师找彩云聊,说做设计很多年,职业发展遇到了瓶颈,感觉很迷茫,找不到方向。到底要怎样努力?怎样找到合适自己的职业方向?欢迎加入彩云的知识星球,或许能帮到你。最近的一篇关于职业发展的思考,也推荐阅读《工作8年后才懂得这些职场道理,原来要这样才能打破35岁的困局》
扫码即可加入我的知识社群,与我一起扩展思维的边界!
最近彩云还建立了一个新公众号,专门记录一些我的日常思考,分享的内容将不再局限于设计。因为我平时喜欢写作和学习,涉猎的面也比较广,经济、科技、政治、保险、健身、设计、开发、心理学、阅读等等各种不同领域,我希望能通过这个账号,一起扩展眼界,横向发展。期待大家的关注订阅!
近期必读热门文章
来腾讯的第三年,我的13条职业思考,关于那些被最常问到的话题
鹅厂设计师力荐,B站最好的3D教程,是我快速掌握3D技能的秘诀