谈「用户头像」

用户头像
苏州/UI设计师/10年前/4420浏览
谈「用户头像」
用户头像
YujunZhu

分享一些关于用户头像相关的见解与观点

今天在我们的各类APP中,用户头像已是习以为常,几乎在绝大部分互联网产品中都可以找到用户头像的身影。

用户使用照片作为头像信息可以快速准确的识别用户信息,且有效的加强记忆。在界面中巧妙合理的使用头像元素亦能达到提升界面阅读体验。


下文分享一些关于用户头像相关的见解与观点:


#1. 重新设计头像的外形

在头像的外形中,圆形最为普遍和常见,用户最容易理解。圆形头像十分巧妙的避开了与照片/图片的区别,并且在各种矩形设备、矩形界面中起到了强调作用。如下图:


0b05577f85a40000018c1bec2575.jpg

上图注:孤立中心点位置,强调“个人”、“这是我”的概念。保持界面清晰。


但是在复杂的界面元素/使用场景中,圆形未必能完全适用。设计不恰当还会带来负面影响。如下图:


d35a577f85dc0000018c1b7aca56.jpg

上图注:圆形头像具有很强焦点作用,出现在内容信息复杂的界面中,显得冗余。造成较强的视觉干扰,影响阅读体验。



#2. 引导用户维护头像照片

我猜测各位的iPhone应该和下图差不多。


401d577f862d0000012e7e9e5adb.jpg



国产ROM用了一种取巧的方式,见图。实际使用的体验还不错,iOS 10也用了这种方式。


a5a9577f863a0000012e7e4abfc1.jpg


这种方式并未解决根本问题,一般常见如下解决方法:

a. 交互引导设置用户头像

b. 通过绑定社交账户或使用社交账户登录

c. 对于强调真实社交/看脸社交产品可辅助使用云端人脸识别引导用户调整头像

d. 通过奖励任务引导用户维护头像

e. 设计一个让人看了会有“冲动”去更改的默认头像



#3. 确保头像的出现是最佳的方式、位置和大小

表示用户信息的方式有很多种,头像的出现会带来视觉重点的牵引和记忆强化。界面交互、视觉层次处理的不合理反而会带来理解困难及内容信息主次不分等问题。


644e577f864c0000018c1baa93f3.jpg

上图注:这是Uber看似很正常的一个候车页面。很棒的解决了叫的车在哪,什么到达我身边,是哪位司机师傅来接我的问题。但是在很多次使用中,司机师傅长什么样对我来说是相对较弱的信息,反而“车辆颜色”、“车牌号”是关键点信息,可减少与司机师傅电话中反复询问确认。



用户头像只是展现用户信息的其中一种方式,在设计过程中需要顾及到使用场景、信息主次、使用目的。



Yujun@AEC

本文同样发表在知乎:https://zhuanlan.zhihu.com/p/21535039


856b577f86ad0000012e7e107cb9.jpg


46
举报
|
35
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
牛奶乳液层次平面平铺平面
金色颗粒质地的平面
城市园林平面布局航拍
倒计时,海报,平面
平面花卉图案扁平简约无缝拼接插画
平面书法字手写
平面插画情侣/矢量
平面设计 吊牌设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
城阙凡花
平面男孩喝咖啡插画设计
城市园林平面布局航拍
水蜜桃和李子的平面水果图案
平面人物插画
中国传统纹样创新图案设计
空的平台平面和自然景观
空的平台平面和自然景观
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
学习,优惠券,平面,海报
金色颗粒质地的平面
牛奶乳液层次梯田平铺平面
金色颗粒质地的平面
课程海报,平面素材
平面插画设计女孩喝咖啡
金色颗粒质地的平面
你可能喜欢
大家都在看
登录注册