福州腮红价格联盟

UI设计中为什么将用户的个人头像设计成圆形的

创享UI微课堂2018-06-19 16:20:31

       大家还记不记的你的扣扣头像和微信头像,甚至很多贴吧论坛头像或手机里面的APP头像,是什么时候不知不觉的变成圆形的呢?是因为近期的设计风潮如此?还是UI设计师们最近都喜欢圆形的设计?更或者还有其他特殊的原因呢?

 


个人头像的定义与发展:

 

        随着网络用户族群快速增加,他们对于藉由平台与其他用户互动的需求就越高,也因此发展出许多可互动的平台类型,例如论坛、信箱、聊天室、部落格到社群等。其中每个用户都代表着一个独特个体,这些个体会有相对应的资讯,以及代表个体的个人头像。而个人头像通常是具个性化的标志,大多以平面或3D图像的方式呈现。

 


 

 

以下是网友们对个人头像形状选择的观点:

 

       其实,选择何种形状作为头像的论战已不是新闻了,有众多业内人事在相关论坛中也发表了意见与讨论。小编整理他们在Quora与Stack Exchange平台上讨论与发表的论述,并简单的分类如下。需要申明的是,以下内容的排序并无经过提及次数统计(仅随机排列),且多数回应也无相关验证或研究资料,所以大家可当成不同“观点"参考就好。



1、感受与认知层面

 

1、方形太无趣了。

2、大脑可较轻易的处理圆形内的讯息,减少认知的压力。

3、相较于方形,圆形更柔性、有机、安全、顺眼、现代与友善,也更能与他人情感交流。

4、更有关注的感觉,例如想到望远镜或放大镜的视野。

5、大多照片的四周都是无意义的背景或讯息,圆形可以将其切除。

6、通常拍照会把"人"摆在中心,而圆形中心到四周距离都一致,可让脸更突出。

 

2、视觉层面

1、视线在方形的焦点有5个(四个角+中心),而圆形只有一个(中心)。

2、圆润的线条或角度,可让视线自然的追随与运动,不会像看到90度角而停顿下来,更详尽的内容可参考这篇。

3、在扫视的情况下,使用圆形可协助使用者辨识或区分是否为内容,因为内容通常会置于用方型容器,例如文字、照片或专辑等。

 

3、其他层面

1、行动装置普及后,因圆形与手指按压在萤幕上的形状类似,而被广泛的使用。

2、其实人类早就有这样的应用,例如将人物应用于圆形硬币与圆形艺术画中。

3、只是一个设计的风潮,刚好流行到"圆形"这个周期。

4、很多准则或模板都只提供圆形版本。

5、现在的CSS3技术让圆角(圆形)轻易实现且各浏览器也几乎都有支援。

 

       在UX movement中,作者Anthony也提出了一些有别于上述的观点,简单整理如下:

1、角度的边缘,看起来较明显

       通常方形的锐利四角,因为对比(颜色或形状)的关系,在视觉上会更明显,造成干扰。使用圆形并无此问题,所以更可强调重点– “脸部"。




2、方形对角线较长

       方形的对角线比边缘还长,用户目光易延伸出去;圆形半径长皆一致,用户可花更少时间在理解内容,眼球也较不需要移动。




3、圆型用于非人物图片,效果也是一样的吗?

       虽然使用圆形的个人头像可排除不相关的背景,更聚焦于人脸上,但非人物的图片(风景或食物等)也有同样效果吗?Anthony认为不一定,因为可能因此失去了该图片要传达的资讯,如景深或细节等。




4、高度亲和力



       就如同人与人的交际,在初次见面时,会认为带有严肃表情的人较难相处,而微笑满面的人可马上聊起来。为什么会有这种先入为主的观念呢?这就是“亲和力"高低层度的差异所致。而曲线与圆在人们的印象中,就是亲和力的象征。若介面上使用圆形的元素(个人头像等),使用者可能会产生,此产品学习曲线较低的印象。

 

 

5、较强的设计感



       个人认为圆形的个人头像,能让介面传递较强的设计感。不过这点会受设计师应用的手法,或使用者的主观感受影响。此外,平台无法限制使用者上传图片的品质,若上传图片的品质、构图或美感较差,将其套用在圆形的遮罩里,介面的设计感会比方形的好。

 

6、给予使用者上传图片的建议



       不知道大家有没有这样的经验,就是当你挑好图片并上传后,发现圆形的形状外框遮住了许多重点(例如脸的一角),效果不如预期。其实,设计师可以在上传图片的介面上,提供给使用者一些建议。例如,画出一个人脸可在圆形里完整呈现的区域,这样使用者就会比对自己的图片,并挑选较符合者;或是提醒图片上有字的话,建议的大小为何(可看的清楚);提示不能使用非法图片等。


7、提供多种预设图片,及更完善的图片编辑器

       有些使用者手上刚好没有适合的图片,或认为不重要,可能就不会设定个人头像了。不过,平台若是希望呈现出多种角色互动的氛围(如社群网站),或有协作辨识的需求(如trello)。设计师可在设定流程的页面上,提供多种预设个人头像供使用者快速选择(如多款颜色或企业识别的变形应用),或设计某种自动机制(如帐号的第一个字母)。另外,利用第三方社群登入方式,也能自动载入在该平台上传的头像,是个对使用者较便捷的方式。

 

       再者,若能提供完善的图片编辑器,也能吸引使用者做出更符合自我形象与品质更好的头像,例如挑选滤镜、色相与明度调整等。不过,图片编辑器的有无,应该要取决于平台服务的本质。

 

8、 使用 gif



       有越来越多的平台允许使用者放上gif 档作为个人头像,以呈现动态效果,这让使用者更可彰显其特色或品味


更多精彩文章

手机APP华丽入口,极简登陆界面设计

20个旅游APP界面UI设计欣赏

移动体验设计6大禁