作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀,并着重介绍了当前这套图标的设计由来。
在过去的一年中腾讯微云为大家带来了很多新特性,比如创建和在线编辑Office文档、语音速记、文件收集,微云超级会员的基础存储空间从4TB提升到了6TB,此外还有多项特权升级。
就在最近,我们还在灰度接入腾讯文档,以后会有更紧密合作。微云除了不断完善基础的存储功能,也一直致力于全方位的满足用户各种场景下的需求。即便是文件图标的设计和扩展,我们也没有轻视,帮助用户快速辨识和定位自己的文件,是微云用户体验非常重要的环节。
文件图标是什么
由特定应用程序创建的特定文件,我们称之为文件类型,例如Word文档的.doc,Photoshop的.psd。
文件图标根据这些文件类型的特征提供图形化的表达,帮助用户辩识文件。当界面完全由文本构成时,读取和识别每个文字所花费的时间和精力会超过认知过载点。图标所提供的这种“ 视觉速记 ” 形式,降低了认知负荷并能够更好利用熟悉的形状和隐喻以简单的图形形式传达概念。
微云作为一款云盘产品,支持用户上传各种类型的文件,这意味着我们的图标必须尽可能地覆盖常见的文件类型。
微云文件图标的四个阶段
回首微云各个版本的文件图标,大致可以划分为四个阶段:PC主导阶段、扁平潮流阶段、极简主义阶段以及从微云6.0上线至今的理性回归阶段。
1. 设计风格受到PC操作系统影响
在早期,微云的文件图标设计源自PC客户端,很大程度上受到桌面操作系统的设计风格影响。
这一阶段的图标从结构上可以分成三类:
- 常规结构:由纸片背景、彩色横幅、文件后缀、图形符号四层组成,这种结构通常用于拥有多种后缀的文件类型或带有明显色彩属性的常见文件类型,如Word文档、音频文件、PDF文档等。
- 特征弱化:只有白色背景和图形符号两层,通常用于只有一种后缀且不常见的文件或通用文件,如iwork系列(当时被认为用户较少)、系统文件、未知文件等。
- 背景异化:底层背景根据属性做了异化,如压缩包文件和文件夹 。
从视觉焦点可以看出,色彩识别 文字识别被作为最主要的识别特征,浅灰色的图形符号则被有意的弱化了。
这一阶段的图标结构相对复杂,识别特征较多且分散,用户视线难以聚焦。提高了用户辨识的门槛。对图标结构的主观分类导致对用户习惯多样性的包容降低,并且由于图标中包含了具体的文件类型后缀,导致设计师要针对每一个独立的文件格式输出数量庞大的设计资源。无形中增加了设计师的工作量。但这一阶段的图标文件感很强,设计也符合当时的用户预期。