默认头像设计(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

相关推荐

  • 消灭空状态

    设计师在做设计的时候,常常会忽略的一个页面状态就是空状态。空状态,顾名思义就是空白的状态,比如说:一个新闻的列表中没有新闻,这个时候列表就是空的,用户打开之后看到的就是白惨惨的一片。空状态的用户体验…

    2016-01-29
  • UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31
  • 帮你梳理:卡片式UI的设计最佳实践

    卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。

    2017-05-13
  • 用户体验七境界

    外观重不重要?当然重要。无论是工业产品设计还是用户界面设计,视觉表现直接传递给用户对产品的第一感受,而这种感受贯穿用户在整个产品的使用周期中,间接影响了最终的用户体验。

    2017-05-29
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 新手转向资深的必经之路——交互文件命名的最详细规范(下)

    接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。Sophia的tips:真正的高手,细节都做的很好!

    2017-05-01
  • 不会Sketch的设计师将要被淘汰!

    这  是 一 本 让 我 废 寝 忘 食 的 书前几天小花闲来无事逛知乎被一篇名为《写一本书出版是怎样一种体验?》的问答吸引了目光,里面有一位作者黄方闻详细的介绍了他的第一本书《动静之美——Sketch移动UI与交互动效设计详解》筹备历程。Sketch这款软件在UI设计上确实有着无可比拟的优势,很多大公司都在用sketch工作,再不会Sketch会被淘汰掉。目前用sketch跟ps的人数比越来越接近了。Sketch因其强大的功能以及极低...

    2018-03-02
  • 产品信息架构的思考

    这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了(链接阅读:怎么理解信息架构,什么是信息架构?)。 今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。…

    2015-11-18
  • 阿里设计师的思考总结:用户体验设计的进阶修炼之路

    从方法、标准、协同、软技能和创新五个方面说说我对用户体验设计进阶修炼的思考与实践。

    2017-05-17
  • 实战分享:核桃App界面设计及视觉规范

    因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

    2017-05-13