案例分析 | 腾讯微云文件图标的设计探索

2019-04-17

作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀,并着重介绍了当前这套图标的设计由来。

在过去的一年中腾讯微云为大家带来了很多新特性,比如创建和在线编辑Office文档、语音速记、文件收集,微云超级会员的基础存储空间从4TB提升到了6TB,此外还有多项特权升级。

就在最近,我们还在灰度接入腾讯文档,以后会有更紧密合作。微云除了不断完善基础的存储功能,也一直致力于全方位的满足用户各种场景下的需求。即便是文件图标的设计和扩展,我们也没有轻视,帮助用户快速辨识和定位自己的文件,是微云用户体验非常重要的环节。

文件图标是什么

由特定应用程序创建的特定文件,我们称之为文件类型,例如Word文档的.doc,Photoshop的.psd。

文件图标根据这些文件类型的特征提供图形化的表达,帮助用户辩识文件。当界面完全由文本构成时,读取和识别每个文字所花费的时间和精力会超过认知过载点。图标所提供的这种“ 视觉速记 ” 形式,降低了认知负荷并能够更好利用熟悉的形状和隐喻以简单的图形形式传达概念。

微云作为一款云盘产品,支持用户上传各种类型的文件,这意味着我们的图标必须尽可能地覆盖常见的文件类型。

微云文件图标的四个阶段

回首微云各个版本的文件图标,大致可以划分为四个阶段:PC主导阶段、扁平潮流阶段、极简主义阶段以及从微云6.0上线至今的理性回归阶段。

1. 设计风格受到PC操作系统影响

腾讯微云文件图标的设计探索

在早期,微云的文件图标设计源自PC客户端,很大程度上受到桌面操作系统的设计风格影响。

这一阶段的图标从结构上可以分成三类:

  1. 常规结构:由纸片背景、彩色横幅、文件后缀、图形符号四层组成,这种结构通常用于拥有多种后缀的文件类型或带有明显色彩属性的常见文件类型,如Word文档、音频文件、PDF文档等。
  2. 特征弱化:只有白色背景和图形符号两层,通常用于只有一种后缀且不常见的文件或通用文件,如iwork系列(当时被认为用户较少)、系统文件、未知文件等。
  3. 背景异化:底层背景根据属性做了异化,如压缩包文件和文件夹 。

腾讯微云文件图标的设计探索

从视觉焦点可以看出,色彩识别+文字识别被作为最主要的识别特征,浅灰色的图形符号则被有意的弱化了。

这一阶段的图标结构相对复杂,识别特征较多且分散,用户视线难以聚焦。提高了用户辨识的门槛。对图标结构的主观分类导致对用户习惯多样性的包容降低,并且由于图标中包含了具体的文件类型后缀,导致设计师要针对每一个独立的文件格式输出数量庞大的设计资源。无形中增加了设计师的工作量。但这一阶段的图标文件感很强,设计也符合当时的用户预期。

2. iOS7掀起的扁平潮流席卷互联网

腾讯微云文件图标的设计探索

从微云3.2版本开始,设计风格的扁平化已经席卷整个互联网,细线风格的图标十分流行。

微云文件图标也进入了真正的扁平时期:

腾讯微云文件图标的设计探索

  1. 原本的三种结构分类被弱化,所有图标拥有相似的视觉效果,图标分类扁平化。
  2. 文件后缀名从图标里移到了文件名的末尾,原本的卡片变成了线框,和图形符号一起填充了相同的颜色。图形识别和色彩识别相结合,识别特征扁平化。
  3. 每个图标都是没有质感的单色,设计风格扁平化。

3. 设计倡导”少即是多”

腾讯微云文件图标的设计探索

随着扁平化的潮流不断推进,做减法俨然成了所有设计改版的必经流程,微云5.2版本的文件图标也是历史上最简洁的时期:

  1. 文件图标的线框被省去,强化了图形符号的轮廓识别性。
  2. 图形符号也进行了几何化和减法,整体看上去更加简洁规整。
  3. 由于第一次采用全白的界面UI,我们在图标上也增加了蓝色的占比。

腾讯微云文件图标的设计探索

但是,一味的追求做减法,最终会走向它的反面,过分的简单反而会增加用户辨识的难度。就好像国际主义时期的西格莱姆大厦,过分的追求形式上的简洁,而丧失了易用性。