交互设计教程 用户头像的设计以及点击操作习惯浅析
关关 2018-06-29 来源 : 阅读 785 评论 0

摘要:在移动端网站的设计过程中,头像的设置主要存在两个问题,第一个是关于头像显示的——若没人上传头像,你的设计稿看起来会怎样?第二个问题是头像的点击事件是什么?即用户的操作。希望阅读本篇文章以后大家有所收获,帮助大家对交互设计的理解更加深入。

 在移动端网站的设计过程中,头像的设置主要存在两个问题,第一个是关于头像显示的——若没人上传头像,你的设计稿看起来会怎样?第二个问题是头像的点击事件是什么?即用户的操作。目前,在各个社交网站中,或者app中,头像的设置基本是有的,简单的看看微信,QQ,微博等社交APP,都有个人头像的栏目,在不同的页面,头像的点击操作也是不一样的。

       最近在设计和思考用户个人头像的一个操作。在不同的页面,用户的操作习惯不一样,比如说在个人资料中,如果点击头像,那么接下来的操作就是更换头像;如果是在其他的展示,接下来的操作可能是跳转到个人资料比如微博,或者跳跳转到动态页面,比如微信,所以头像的点击事件对于用户的操作习惯有着很大的影响。

       谈到头像的设计,就会想到头像的形状设计,当前流行的一般是圆形或者矩形,但是圆形看起来会跟好看一些,首先是空间看起来小一些,移动端的屏幕小,批量显示用户时,如果用小圆头像,可以考虑弱化方形外廓,避免视觉冲突。我个人也觉得通常方形的锐利四角,因为对比(颜色或形状)的关系,在视觉上会更明显,造成干扰。使用圆形并无此问题,所以更可强调重点– “脸部"。接下来是网友的一些看法。

1、网友对个人头像形状选择的观点:
      其实,选择何种形状的论战已不是新闻了,有众多专家在相关论坛中发表意见与讨论。大舌头撷取与整理他们在Quora与Stack Exchange平台上讨论与发表的论述,并简单的分类如下。不过,大舌头先申明,以下内容的排序并无经过提及次数统计(仅随机排列),且多数回应也无相关验证或研究资料,所以大家可当成不同“观点"参考就好。
2、感受与认知
    1)方形太无趣了。
    2)大脑可较轻易的处理圆形内的讯息,减少认知的压力。
    3)相较于方形,圆形更柔性、有机、安全、顺眼、现代与友善,也更能与他人情感交流。
    4)更有关注的感觉,例如想到望远镜或放大镜的视野。
    5)大多照片的四周都是无意义的背景或讯息,圆形可以将其切除。
    6)通常拍照会把"人"摆在中心,而圆形中心到四周距离都一致,可让脸更突出。
3、视觉
     视线在方形的焦点有5个(四个角+中心),而圆形只有一个(中心)。
圆润的线条或角度,可让视线自然的追随与运动,不会像看到90度角而停顿下来,更详尽的内容可参考这篇。
在扫视的情况下,使用圆形可协助使用者辨识或区分是否为内容,因为内容通常会置于用方型容器,例如文字、照片或专辑等。
4、其他
     行动装置普及后,因圆形与手指按压在萤幕上的形状类似,而被广泛的使用。其实人类早就有这样的应用,例如将人物应用于圆形硬币与圆形艺术画中。只是一个设计的风潮,刚好流行到"圆形"这个周期。很多准则或模板都只提供圆形版本。现在的CSS3技术让圆角(圆形)轻易实现且各浏览器也几乎都有支援 。

     在目前的各种社交网站中,头像的默认图片的选择也是各异。比如说Twitter,Slack,Tumblr 等网站使用了艺术图案作为用户的默认头像。这个方案有一个很大的好处就是强化了品牌感。例如 Slack,使用了它的 logo 的变形图案作为缺省头像。当没人上传头像时,界面看起来也是完整的,诱人的,并且有品牌感的。

     所以进行头像的设计对于一个网站起着非常重要的作用,不仅是代表一个品牌,甚至可以说是一个文化的象征,如何吸引用户,这些细节的设计也是相当重要。

 

本文由职坐标整理发布,学习更多的交互设计相关知识,请关注职坐标设计创作交互设计频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计