关于用户头像的设计思考

对于有用户体系的产品来说,用户的缺省头像如何设计,是一个普遍存在的难题。

你的设计稿常常会因为使用了洋气的歪果仁作头像,而使它们看起来很棒。但回到现实中,绝大多数用户上传的头像要么质量很差,要么就干脆没有。

有头像和没有头像的对比。作者Olia Gozha.

现在有两个问题,第一个是关于头像显示的——若没人上传头像,你的设计稿看起来会怎样?第二个问题是如何鼓励用户上传头像,这个我将在下一篇文章里再说。

通用头像

Facebook 解决问题的方式是,使用一组通用的人物剪影来作为默认的用户头像。它会根据你设置的性别来决定到底展示男性还是女性。

Facebook 的通用头像

但我并不认为这是一个好办法,理由如下。

若有两个性别一样的用户,那他们的默认头像就是一样的。其次,如果只有一小部分用户会上传头像,那界面看起来又是非常同质化并且令人困惑的。

若你的用户还没有设置过性别,你就还得再设置一个缺省选项。这个缺省选项应该对应什么默认值呢?男性?女性?还是隔壁老王?

有些产品(例如 OKCupid,译注:歪果仁的珍爱网,在线交友网站),设计了一系列其他性别(译注:例如双性人和变性人等),这使得通用头像这种设计方案变的更加复杂。

不过话说回来,Facebook 的设计方案并不会引起什么问题,因为几乎每一个 Facebook 的用户都上传了头像,所以通用的缺省头像很少能见到。

有趣的艺术图案

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

没有头像的 Slack 看起来也很漂亮。作者Slack

假如每一个缺省头像都是独特的话,那这个解决方案会很棒。然而,在 Slack 里,每一个缺省头像看起来都只有一点微妙的变化。这使得很难从一堆默认头像里去辨别某个人。不过如果有一部分用户修改了头像的话,这个方案还是能够提供一部分识别作用的。

首字母

Gmail,Dropbox 和 Apple 采用了第三种方案(也是我个人最喜欢的)——使用用户名字的首字母大写作为默认头像。有些使用了姓和名一起(Apple),有些则只使用了名字(Gmail)。

iOS 的默认头像

Gmail 和 Dropbox 做了更多尝试——给每一个用户头像增加了一种独特的颜色。例如,罗辑的头像是红色的 LJ,汪淼的头像就是绿色的 WM。这个设计方案既能够彼此区别,还具有上下文的语意。值得注意的是,这个解决方案对于非英语母语国家来说,他们的用户的名字可能不止是两个大写字母简写。

Dropbox 的默认头像

那么,我们该怎么做呢?你肯定不想从16777216种颜色里挑选一个随机值,因为随机颜色很有可能看起来很糟糕。所以我们需要挑选一些适合设计的颜色——不要超过 10 种。

接下来,我们需要去给每一位用户分配一种颜色。用户头像颜色不能是随机出现的,因为罗辑就必须一直就是红色的 LJ。如果你刷新页面,罗辑的头像变成了绿色,那就出大事了。

我们可以使用哈希值来解决这个问题。我们能够通过用户姓名计算出一个保持不变的哈希值,所以我们不需要新建一个数据库字段去存储每一位用户的颜色……
译注:文章最后,原作者开始在程序开发的角度讲解如何实现姓名转译到哈希值的具体做法了,对于设计来说,并没有什么卵用,故不再翻译,有兴趣的同学可以自己去看原文。

Placeholder Avatars

译文地址:简书

作者:Morgan Carter

译者:@设计译言

(0)

相关推荐

  • 关于Dashboard(仪表盘)设计思考(上篇)

    前言 @文刀 在企业类应用服务(SaaS).检测工具(手机安全助手).量化自我工具(智能手环)等后台管理系统中,使用Dashboard可以帮助用户监控和分析数据,快速获取重要信息.但如果对Dashbo ...

  • 【虚拟To B支付设计研究】(二)设计思考篇

    前言 这是虚拟to B支付专题研究的第二篇:虚拟to B支付设计思考.本篇是在第一篇<基础知识科普篇>基础上,对虚拟to B支付相关设计知识进行更深入研究,更侧重于设计思考. 1.< ...

  • 网易设计师:C端&B端产品的差异及设计思考

    虽然to B的产品越来越多,但市场上仍然是to C产品更普遍.更大行其道.毕竟C端产品面向的人群更广泛,受众面更大.而当下的设计师也多是从C端流动转向去做B端产品的,所以今天,我想和大家聊一聊B端产品 ...

  • 按钮系统的设计思考模型

    通过模型的方式呈现出按钮系统设计思考过程,从忙碌的工作生活中抽出时间分享自己关于按钮系统设计的思考. 我们都知道各种各样不同名称的按钮,比如行为召唤按钮,灵魂按钮等这些按钮对于大家理解按钮设计很有帮助 ...

  • Win8怎么更改用户头像以及Win8动态头像设置教程

    Win8系统相比Win7要改进不少,比如在头像方面Win8将可以更加个性化,不仅可以使用传统的图片头像,甚至还可以使用动态视频作为头像,下面本文就与大家分享下Win8头像相关技巧,分别会介绍下Win8 ...

  • 个性win8用户头像定制具体步骤

    当我们揭开Windows 8的锁屏界面准备登录系统时,首先看到的就是用户头像。在这个崇尚个性的时代,选用各种独具特色的图片作为自己的头像已经不是什么新鲜事,怎样才能让自己的 Win8用户头像更酷一些呢 ...

  • 更改Windows10用户头像将其改为自己喜欢的

    升级了Win10系统后,有些用户发现原始的用户头像并不好看,那么该怎么做,才能将用户头像换成自己喜欢的呢?别着急,现在小编就来告诉你们如何更换Win10用户头像的方法。 Win10更换用户头像的操作方 ...

  • 定制个性Win8用户头像

    当我们揭开Windows 8的锁屏界面准备登录系统时,首先看到的就是用户头像。在这个崇尚个性的时代,选用各种独具特色的图片作为自己的头像已经不是什么新鲜事,怎样才能让自己的 Win8用户头像更酷一些呢 ...

  • 如何一键获取QQ用户头像并保存

    看到一些用户好看、新奇的QQ头像是不是很心动,心动不如行动。或许可以通过其他方式获取QQ用户头像,但是为了简单一些,本人做了一个简单的小程序,可以一键获取QQ用户的头像,只要输入QQ号即可。 工具/原 ...