交互设计--用户头像的设计以及点击操作习惯

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

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

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

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

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

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

交互设计--用户头像的设计以及点击操作习惯相关推荐

用户用户头像数据库设计
具体要求是这样的:用户可以有多个用户头像,但是每次可用的只有一个. 我有两个设计方案一:在用户头像表里加一个IsActivity标记哪个头像是可用的: 二:在用户表里加一个记录可用头像ID的字段. ...
figma设计用户头像效果
效果图首先这里可以绘制想要的图形,也有对应的快捷键比如⚪的快捷键是o 往图形里插入图片要下载插件User Profile 在图形处鼠标右击,点击Plugins 再点击 User Profile
电子产品设计流程_产品设计“学习、就业、留学”全攻略
近年来,产品设计一直是艺术留学的热门专业,而且这个专业也深受艺术留学生的欢迎,不管是本专业的继续深造还是跨专业的申请,许多小伙伴都对这个专业充满着兴趣和热爱,那什么是产品设计,都需要学习什么内容,如何 ...
《UCD火花集2：有效的互联网产品设计交互/信息设计用户研究讨论》一2.3 交互设计师容易犯的错误：把自己禁锢在解决方案之中...
本节书摘来自异步社区<UCD火花集2:有效的互联网产品设计交互/信息设计用户研究讨论>一书中的第2章,第2.3节,作者 UCDChina,更多章节内容可以访问云栖社区"异步社 ...
《UCD火花集2：有效的互联网产品设计交互/信息设计用户研究讨论》一2.4 UI和IxD...
本节书摘来自异步社区<UCD火花集2:有效的互联网产品设计交互/信息设计用户研究讨论>一书中的第2章,第2.4节,作者 UCDChina,更多章节内容可以访问云栖社区"异步社 ...
交互设计 - 用户体验【摘】
熟记在心: 用户体验的原则 https://www.google.com.hk/search?q=%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E7%9A%84%E5%8E ...
微信小程序(1)-用户头像-昵称的获取及其UI设计
要做出来的样式如下 1-用户-User设计 user.js(该处代码为小程序的逻辑页面,就是说我们所编写的处理问题的函数就写在这里) userinfo:我们命名对的自变量,代表用户信息. onShow ...
《UCD火花集2：有效的互联网产品设计交互/信息设计用户研究讨论》一17.6 提一个懒人需求—找遥控器的电视...
本节书摘来自异步社区<UCD火花集2:有效的互联网产品设计交互/信息设计用户研究讨论>一书中的第17章,第17.6节,作者 UCDChina,更多章节内容可以访问云栖社区"异 ...
《UCD火花集2：有效的互联网产品设计交互/信息设计用户研究讨论》一1.3 数据—判断淘宝店铺页面设计优劣的显微镜...
本节书摘来自异步社区<UCD火花集2:有效的互联网产品设计交互/信息设计用户研究讨论>一书中的第1章,第1.3节,作者 UCDChina,更多章节内容可以访问云栖社区"异步社 ...

交互设计--用户头像的设计以及点击操作习惯

交互设计--用户头像的设计以及点击操作习惯相关推荐

最新文章

热门文章