默认头像设计(1) —— 统一与丰富间的平衡

头像设计,“统一”与“丰富”间的平衡。


头像设计,“统一”与“丰富”间的平衡。

默认头像设计(1) —— 统一与丰富间的平衡

头像又叫Avatar,有虚拟化身的意思,最早出现在1979年的一个电脑游戏里,用来代表玩家的身份。前几年流行的阿凡达的英文也是Avatar,也是有虚拟世界化身的含义。现在除了游戏,头像也是媒体或者虚拟平台上重要的一部分了。Avatar不是真实的头像,它更像是一个占位符,在人们上传头像之前暂时代替着。

头像设计,我理解,是一个在固定模式中寻求随机变化的过程。而延展开来,这种“随机中寻求变化”的方式,也是我有时会在设计中遇到的问题。

设计一个卡片式的页面的低保真,设定好每个卡片都有一个自己的banner。然而事实却是?以千为计量单位的卡片,不可能有一一对应的banner。

例如像是IBM的这种页面,因为卡片的条目很多,达到以“千”为单位的级别,而每一个卡片又不能保证一定有对应的图片,所以,这个时候就会需要用到默认的图片。

默认头像设计(1) —— 统一与丰富间的平衡

(IBM相关网站)

而默认的图片如果只有一种,就会显得太单调,图片一多,又会太杂乱。

所以在“统一”与“丰富”之中找到平衡,是我个人认为的一个难点,而默认头像设计,就带有这种丰富与平衡的属性,因此我也希望通过一些资料的查找来深入了解一下这个领域。

因此我问自己一个问题,什么样的默认头像才算是处于“平衡”的头像呢?

当前默认头像的类别总结

一位产品设计师Michelle在她的文章里提到了当前默认头像的几种类别,我总结有这么几种:

1. 普通人物头像

这是最常见的类别。例如说常用的社交网站Fackbook,就是使用的普通人物头像。而他们之前也在考虑普通人物头像的男女平等问题。这一类的头像很简单易懂,也普遍使用得很多,所以也为大众认可。

默认头像设计(1) —— 统一与丰富间的平衡

(Facebook的默认人物头像)

2. 生物头像

注意到简书使用的就是生物类型的头像。我刚刚注册的时候出现的是一个小鹿的头像,似乎是有一系列的动物头像可以默认随机出现。不仅仅是地球上的生物,还有一些外星来的生物也被人类使用。

默认头像设计(1) —— 统一与丰富间的平衡

(生物类型的头像)

3. 字母头像

google登录之后,使用与名字相关的字母作为头像。通过颜色与字母,达到变化的效果。

默认头像设计(1) —— 统一与丰富间的平衡

(Google的名字首字母头像)

4. 形状图像

通过形状进行抽象随机的变化。例如说Slack,使用了格子条纹,通过颜色与位置的调整达到变化。而github则是用过一些格子与颜色的排列,形成像素样式的头像。

默认头像设计(1) —— 统一与丰富间的平衡

(Slack的默认头像)

默认头像设计(1) —— 统一与丰富间的平衡

(Github的默认头像)

分析点1:当前各种类型头像的使用情况

而从这些头像的特征出发,可以发现他们有的“拟人”,有的”拟物”,有的“具象”,有的“抽象”,例如说普通人像头像,就偏向于“拟人”与“具象”的维度,而形状图像则处于“拟人”与“拟物”之间,接近“抽象”的元素。

我重新历览了一下手机内的app头像,也对这些头像归了一下类,我发现对于抽象化形式的头像,目前还是使用得比较少,坐标轴右边的图标还是占大部分。而这一类型的头像,不得不说,对于我个人来看是比较特别的,随机变化中又突显了自己品牌的特征。

默认头像设计(1) —— 统一与丰富间的平衡

(app的默认头像例子)

默认头像设计(1) —— 统一与丰富间的平衡

(默认头像维度对比图)

分析点2:关于丰富与统一的含义挖掘

“丰富”再往深挖掘,它有着某些特性,我这边列举出来的,有图标的多样性,日后的可延展性,而“统一”,包括视觉上的统一,还有与整个品牌的统一。我想随着维度的变化,我之后会不断调整细化这个图,但大方向保持一致。

默认头像设计(1) —— 统一与丰富间的平衡

(关于不同类型头像的特征对比)

人物头像虽然认可度比较高,视觉上也统一,但是多样性和延展性就比较弱,也比较难体现某个品牌的特征。生物头像看着很活泼,视觉上是一整个系列,也可以延展出不同的生物类型,但对于品牌的体现,就不一定是都适用,毕竟不是所有的品牌都以动物为主题。相比之下,抽象一点的图标在“延展”与“品牌”方向就比较占优势,像github的图标,如果有5*5的格子,格子随机填满或者不填满,就会出现不同的图案(5*5的平方),加上颜色的变换,就可能会有上百种变换方式,而这种二进制式的感觉,也跟github的主题贴近,因为它相当于是一个代码存储的网站。slack的头像也使用颜色和格子很个性地展现了自己。

结合两个分析点,我开始感觉,要在“统一”与“丰富”之间寻求平衡,也许抽象,变换的元素会是一个新的角度呢?至于实际用到设计上的时候,怎么做,怎么实践呢?其实我也还没想好,最近在看一些随机生成图案的网站,希望有些启发。

那就暂且为标题加个“(1)”吧,继续找找答案。

Ps:自己的怪兽头像,其实也是拟人和拟物结合着画了一下。

参考资料

 

本文由 @交互小怪兽 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Pixabay,基于 CC0 协议

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20262/

(0)
CatherineCatherine
上一篇 2017-08-04 07:23
下一篇 2017-08-04 08:15

相关推荐

  • 细数那些精彩纷呈的引导页

    随着苹果ios8的发布,可以看到货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师、市场宣传相继关注的焦点,产品宣传的下一轮引爆点。 作为能在App store上先发触达地形成前期推广的视频预…

    2014-12-18
  • 小白菜们:别再用“好的文案”YY了,该醒醒了!

    不知何时起,文案写的好,竟然成了众多互联网小白追捧的热点,各种文案大师,文案叫兽,传道受业解惑,登台演讲,大讲文案的力量,貌似文案写的好,就练成了盖世神功,天下无敌了。

    2017-05-26
  • BAT名师访谈,阿里交互设计专家的成长之路

    编者按:优设访谈第四期!今天这位设计师也是老朋友了,作为网易电子商务部UED团队的创建者,阿里现任交互设计专家,以及业内人士鼎力推荐的《破茧成蝶:用户体验设计师的成长之路》联合出版人,@刘津legene 老师的…

    2015-11-19
  • 输出专业交互设计文档清单

    原文转自:http://www.uisdc.com/export-professional-interactive-documents在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 ...

    2018-03-25
  • App界面设计风格 | App界面交互设计规范

    App界面设计风格 APP设计风格是指APP通过主要的几种颜色搭配、页面布局和NPC等给用户呈现出的整体视觉感受。 一个APP开始启动设计时,第一步应该用主要页面定下整个APP的设计风格,然后其他页面按着统一的设计风格…

    交互设计 2015-08-26
  • 【交互设计面试经验】2015年1月20日-交互设计师面试问题分享

    面试时间 2015年1月20日 阿西导读: 今天起我们给交互设计行业的朋友们开一个福利栏目:交互设计师面试分享我们在分类里叫交互设计面试,无论你是新手交互还是UI转UE 或是PM转UE又或者PM兼职UE。 不论怎样你都需要知…

    2015-01-21
  • Icon 改版:对于细节的把控才是关键

    在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。

    2017-05-04
  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 经典必备知识!什么是交互设计的三大法则?

    @十萬個為什麽 :本文提到的三大铁律在交互设计中的地位接近圣经。细细品读,你会发现现代最流行的用户界面,都采用了这本里程碑式的著作中的概念与技巧,其中也包括微软和苹果的设备 >>>科幻作家艾萨克·…

    2017-08-01
  • 决战双11,哪些技巧可以让你的专题页设计脱颖而出?

    这是小编见过讲双十一专题设计的最完整最有帮助的文章,我只是看了十遍而已。“以前有个同事她说要减肥要健身
    我说好啊看你能坚持多久
    因为我也好几次喊过这种话
    最后却都不了了之了
    可是几个月后再看到他
    细腰美臀大长腿
    显得更加自信了
    是啊她总可以做到付诸行动
    而我只会给自己找借口
    也许再这样下去
    我都配不上和她做朋友了吧”全场5折起/全场买三免一/1元秒杀0元抢购/周年钜惠等等

    争做行业领跑者/先赚它1个亿/上天猫就购了/好物低价上京东等等热烈庆祝XXX成立几周年/欢迎XXX领导莅临我司/恭喜XXX荣获XXX称号乘年轻,住好点/Just Do It/我的青春我做主/你值得拥有bigger than bigger/again and again/more and more(完全不知所云但是看起来很厉害的样子的文案,超级大牌都爱用。。)老板跑路了/美工甩手不干了等(歪瓜出品,我后面会再提到,因为它简直是电商设计界的一股泥石流。。)改变食界,条条是道-卫龙买了就是朋友-故宫淘宝“那么,我去当香葱烤鸡肉串去了”“啊!要是把早上下的蛋也带来就好了”“我可不能在这种地方被吃掉”“您好,您的食材到了”保湿护肤一步到位/棉柔舒适超强吸附力/轻松舒适不变形等等,常用于详情页里

    2017-05-16