1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

高手实战案例!腾讯微云文件图标设计探索全方位复盘--九分科技

时间:2020-06-27   分类:设计管理    作者:网络   来源:网络整理   点击:155

高手实战案例!腾讯微云文件图标设计探索全方位复盘

九分网络

本文来自九分网络

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

高手实战案例!腾讯微云文件图标设计探索全方位复盘

本文来自九分网络

copyright 9fen.net

在过去的一年中腾讯微云为大家带来了很多新特性,比如创建和在线编辑Office文档、语音速记、文件收集,微云超级会员的基础存储空间从4TB提升到了6TB,此外还有多项特权升级。就在最近,我们还在灰度接入腾讯文档,以后会有更紧密合作。微云除了不断完善基础的存储功能,也一直致力于全方位的满足用户各种场景下的需求。即便是文件图标的设计和扩展,我们也没有轻视,帮助用户快速辨识和定位自己的文件,是微云用户体验非常重要的环节。 www.9fen.net

文件图标是什么

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

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

www.9fen.net

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

内容采集来自9fen.net

微云文件图标的四个阶段

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

www.9fen.net

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

www.9fen.net

高手实战案例!腾讯微云文件图标设计探索全方位复盘

www.9fen.net

www.9fen.net

在早期,微云的文件图标设计源自PC客户端,很大程度上受到桌面操作系统的设计风格影响。这一阶段的图标从结构上可以分成三类: www.9fen.net

常规结构:由纸片背景、彩色横幅、文件后缀、图形符号四层组成,这种结构通常用于拥有多种后缀的文件类型或带有明显色彩属性的常见文件类型,如Word文档、音频文件、PDF文档等。

内容采集来自9fen.net

特征弱化:只有白色背景和图形符号两层,通常用于只有一种后缀且不常见的文件或通用文件,如iwork系列(当时被认为用户较少)、系统文件、未知文件等。

内容采集来自9fen.net

背景异化:底层背景根据属性做了异化,如压缩包文件和文件夹。

九分网络

高手实战案例!腾讯微云文件图标设计探索全方位复盘

九分网络

九分网络

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

copyright 9fen.net

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

九分网络

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

www.9fen.net

高手实战案例!腾讯微云文件图标设计探索全方位复盘 本文来自九分网络

www.9fen.net

从微云3.2版本开始,扁平化的设计风格已经席卷整个互联网,细线风格的图标十分流行。微云文件图标也进入了真正的扁平时期:

本文来自九分网络

高手实战案例!腾讯微云文件图标设计探索全方位复盘 copyright 9fen.net

copyright 9fen.net

原本的三种结构分类被弱化,所有图标拥有相似的视觉效果,图标分类扁平化。 本文来自九分网络

文件后缀名从图标里移到了文件名的末尾,原本的卡片变成了线框,和图形符号一起填充了相同的颜色。图形识别和色彩识别相结合,识别特征扁平化。 www.9fen.net

每个图标都是没有质感的单色,设计风格扁平化。 九分网络

3. 设计倡导「少即是多」

本文来自九分网络

高手实战案例!腾讯微云文件图标设计探索全方位复盘

内容采集来自9fen.net

本文来自九分网络

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

内容采集来自9fen.net

文件图标的线框被省去,强化了图形符号的轮廓识别性。

copyright 9fen.net

图形符号也进行了几何化和减法,整体看上去更加简洁规整。

九分网络

由于第一次采用全白的界面UI,我们在图标上也增加了蓝色的占比。

本文来自九分网络

标签: 优设 腾讯设计 图标设计 腾讯ISUX 微云 文件图标

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----