头像设计,“统一”与“丰富”间的平衡。
头像又叫Avatar,有虚拟化身的意思,最早出现在1979年的一个电脑游戏里,用来代表玩家的身份。前几年流行的阿凡达的英文也是Avatar,也是有虚拟世界化身的含义。现在除了游戏,头像也是媒体或者虚拟平台上重要的一部分了。Avatar不是真实的头像,它更像是一个占位符,在人们上传头像之前暂时代替着。
头像设计,我理解,是一个在固定模式中寻求随机变化的过程。而延展开来,这种“随机中寻求变化”的方式,也是我有时会在设计中遇到的问题。
设计一个卡片式的页面的低保真,设定好每个卡片都有一个自己的banner。然而事实却是?以千为计量单位的卡片,不可能有一一对应的banner。
例如像是IBM的这种页面,因为卡片的条目很多,达到以“千”为单位的级别,而每一个卡片又不能保证一定有对应的图片,所以,这个时候就会需要用到默认的图片。
(IBM相关网站)
而默认的图片如果只有一种,就会显得太单调,图片一多,又会太杂乱。
所以在“统一”与“丰富”之中找到平衡,是我个人认为的一个难点,而默认头像设计,就带有这种丰富与平衡的属性,因此我也希望通过一些资料的查找来深入了解一下这个领域。
因此我问自己一个问题,什么样的默认头像才算是处于“平衡”的头像呢?
当前默认头像的类别总结
一位产品设计师Michelle在她的文章里提到了当前默认头像的几种类别,我总结有这么几种:
1. 普通人物头像
这是最常见的类别。例如说常用的社交网站Fackbook,就是使用的普通人物头像。而他们之前也在考虑普通人物头像的男女平等问题。这一类的头像很简单易懂,也普遍使用得很多,所以也为大众认可。
(Facebook的默认人物头像)
2. 生物头像
注意到简书使用的就是生物类型的头像。我刚刚注册的时候出现的是一个小鹿的头像,似乎是有一系列的动物头像可以默认随机出现。不仅仅是地球上的生物,还有一些外星来的生物也被人类使用。
(生物类型的头像)
3. 字母头像
google登录之后,使用与名字相关的字母作为头像。通过颜色与字母,达到变化的效果。
(Google的名字首字母头像)
4. 形状图像
通过形状进行抽象随机的变化。例如说Slack,使用了格子条纹,通过颜色与位置的调整达到变化。而github则是用过一些格子与颜色的排列,形成像素样式的头像。
(Slack的默认头像)
(Github的默认头像)
分析点1:当前各种类型头像的使用情况
而从这些头像的特征出发,可以发现他们有的“拟人”,有的”拟物”,有的“具象”,有的“抽象”,例如说普通人像头像,就偏向于“拟人”与“具象”的维度,而形状图像则处于“拟人”与“拟物”之间,接近“抽象”的元素。
我重新历览了一下手机内的app头像,也对这些头像归了一下类,我发现对于抽象化形式的头像,目前还是使用得比较少,坐标轴右边的图标还是占大部分。而这一类型的头像,不得不说,对于我个人来看是比较特别的,随机变化中又突显了自己品牌的特征。
(app的默认头像例子)
(默认头像维度对比图)
分析点2:关于丰富与统一的含义挖掘
“丰富”再往深挖掘,它有着某些特性,我这边列举出来的,有图标的多样性,日后的可延展性,而“统一”,包括视觉上的统一,还有与整个品牌的统一。我想随着维度的变化,我之后会不断调整细化这个图,但大方向保持一致。
(关于不同类型头像的特征对比)
人物头像虽然认可度比较高,视觉上也统一,但是多样性和延展性就比较弱,也比较难体现某个品牌的特征。生物头像看着很活泼,视觉上是一整个系列,也可以延展出不同的生物类型,但对于品牌的体现,就不一定是都适用,毕竟不是所有的品牌都以动物为主题。相比之下,抽象一点的图标在“延展”与“品牌”方向就比较占优势,像github的图标,如果有5*5的格子,格子随机填满或者不填满,就会出现不同的图案(5*5的平方),加上颜色的变换,就可能会有上百种变换方式,而这种二进制式的感觉,也跟github的主题贴近,因为它相当于是一个代码存储的网站。slack的头像也使用颜色和格子很个性地展现了自己。
结合两个分析点,我开始感觉,要在“统一”与“丰富”之间寻求平衡,也许抽象,变换的元素会是一个新的角度呢?至于实际用到设计上的时候,怎么做,怎么实践呢?其实我也还没想好,最近在看一些随机生成图案的网站,希望有些启发。
那就暂且为标题加个“(1)”吧,继续找找答案。
Ps:自己的怪兽头像,其实也是拟人和拟物结合着画了一下。
参考资料
- http://www.hongkiat.com/blog/free-pattern-generators/
- https://scratch.mit.edu/projects/2693313/
- https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6
- https://slackmojis.com
本文由 @交互小怪兽 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自 Pixabay,基于 CC0 协议
原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20262/