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

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

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

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

微云文件图标的四个阶段

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

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

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

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

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

3. 背景异化：底层背景根据属性做了异化，如压缩包文件和文件夹 。

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

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

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

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

1. 原本的三种结构分类被弱化，所有图标拥有相似的视觉效果，图标分类扁平化。

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

3. 每个图标都是没有质感的单色，设计风格扁平化。

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

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

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

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

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

到了微云6.0发布的时候，我们更新了品牌系统，更换了Logo、品牌色以及全新的界面UI。

文件图标作为视觉体系很重要的一部分，自然也要升级。接下来我们会对当前版本的图标设计过程进行详细的阐述。

在改版之前，我们需要梳理出现阶段文件图标的问题和优化空间。

通过数据了解用户的使用习惯

文件图标是服务于用户内容的图标，一千个用户就有一千种文件列表，不同文件图标出现的频率、数量我们无法控制，但是我们可以借助大数据来了解这些文件类型的数量和分布。

我们从后台系统跑取了一段时间内微云中各种文件类型的数据，并按照上传的文件数量对它们进行了排序。（由于图片和视频文件的图标会显示内容缩略图，其文件图标出现的概率非常低，我们对其数据进行了排除。文件夹由于来源多样也未列入其中）我们截取了前24种文件类型格式，并绘制了饼图：

从结果以看出，微云内的文档类文件数量占比非常高。在新版本中，微云的移动端和WEB端全部支持了Office系列文件的在线编辑能力。这也使得部分微云用户对文档类文件的关注有所提高，一定程度上也改变了用户的工作方式。因此，保证用户快速辨识文档文件变得尤为重要。而上一版的Office系列图标仅仅是由一个彩色字母表示，在辨识度上有很大的提升空间。

用户习惯为设计改版带来挑战

设计改版意味着用户体验的变化，这就带来一个无法回避的挑战：用户对现有设计已经形成一定的认知模型，设计改版势必会在一定程度上伤害这种认知模型。这也是为什么我们无数次看到某些产品在发布全新设计之初会有大量的负面评价。文件图标做为微云中直接表达用户内容的重要元素，掌握好改版的度就显得尤为重要。

我们可以从收益和风险的角度将图标分为两类：如果重新设计某个图标从长远角度能够从体验上带来明显收益，我们愿意短期的承担风险。对于已经足够成熟的图标，我们可以聚焦到更为细节的优化或不作出改变。

好的设计也要为开发流程节省成本

从资源输出角度看，在以往的微云版本中，我们的图标资源一直是以位图格式进行输出的，根据使用场景的不同，每种文件图标我们需要输出超过7种尺寸，且每种尺寸还要根据不同的文件格式子集输出数量庞大的资源。而如果使用矢量格式，这个数量可以减少到3种。

针对前期调研发现的问题和优化空间，我们从图标构成、图标颜色、图形符号三个方面对现有的图标进行了优化。

在上一版图标中我们为了强化轮廓识别去掉了图标的彩色边框，图标的识别性虽然有所提高，但是辨识度却下降了，我们发现部分图标因为丧失了其表达“文件”的部分，用户会一时认不出这个文件类型。文件图标所表达的首先是一个文件，其次才是类型。我们不该省略本身作为文件的部分。因此，在最新一版中我们重新设计了更具有文件感的浅灰背景。

与早期图标的不同在于，这一次的图标仅有前景图形符号和背景纸两部分组成，根据格式塔组织原则中的图形与背景关系原则，由于新的设计方案有了较为明显的前景与背景关系。用户在观察图标整体时，依然会先关注到前景的图形符号，轮廓识别的特性并没有因此丧失。

鉴于Office文件在微云中可以在线协同编辑，且存储数量和操作频率占比都非常高，我们对其进行了形式上的异化处理，强化了其原有的品牌特征，接近原生图标的结构让用户第一眼就能辨别其文件类型。

作为图标中最为重要的识别特征，颜色是用户最容易观察和产生联觉的部分。因此，保证图标颜色与原始应用程序品牌色的关联是文件图标色彩选择的重要原则。在那些拥有强烈色彩认知的图标中，我们尽可能地在微云的色彩体系下使其贴近原始的色彩感觉。

任何的规范都应该是提升设计效率和可用性的工具，而不是成为设计的限制。鉴于Office系列文件在微云中的重要性，我们让其突破了微云的色彩规范，单独选取了3个新的颜色。

文件是用户上传和备份到微云中的内容，我们无法控制其类型和数量，想要让这些内容从色彩比例上贴近我们的规范，看似并不现实。但利用我们调研获得的数据，我们仍然可以让其在一定范围内变得可控。

为空页，简单理解就是当前页面内容为空白，分别会在初次使用、完成或清空内容、出错的情况下出现。本文将简要阐述关于「腾讯微云」6.1版本所更新的为空页（内容为空）设计背后的故事，以及探索创新思维的过程与价值。

随着腾讯微云6.0版本全新品牌形象升级的发布，6.1的更新将致力于提升品牌的体验。项目成员细致入微地考虑着如何优化整体品牌体验的同时，也不忘将每个模块细节都统一化、精品化。其中的为空页面也在规划当中。 以下将分别从「体验 – 创新 – 设计」3大纬度对为空页设计进行全面剖析。

一、体 验——极 简 易 懂

为并不是时刻都存在的，并没有多少用户能够看到它们。但为空页的设计是必要的，意义在于为用户解释说明当前页状态，用户需要第一时间知道自己现所处位置、环境、情况，再而判断自己接下来的行为。以最基本的功能角度来分析，为空页应告诉用户：此页是什么内容？为何内容为空？怎样获取内容？

由于腾讯微云的功能和场景都较为丰富，APP 内也相对应存在着不少的空页面。为了提升为空页在整个 APP 的良好体验，前期我们将微云内所有为空场景重新做了搜集整合，同时也根据场景对用户的行为进行分析，把为空页类型精简为三种：

• 提示性图文+操作按钮引导；

流程上希望尽可能去引导用户快捷地完成操作，减轻用户的认知负担。

文案方面也进行优化，从原来的「XXX空空如也」调整为「没有XXX」，目的一是为了更快速直白地告知用户此页「无」的状态，其二是希望能设计一系列有创意的插图与之配合，简洁的文案更能辅助烘托插图的精彩。

二、创 新——耐 人 寻 味

要想创造出具有创新意义的为空页设计，并不是一件容易的事情，尤其为空页原本就是一个比较常态和无聊的环节……当然，首先分析用户心理是关键。我们把用户分为两大类别：新用户&老用户。

新用户正在探索产品，任何操作体验都会影响他们会否想留下，或许他不清楚这里的功能是什么，为什么会跳转到这里，该怎么使用这里的功能等一系列未知项；

老用户则对于功能、内容、操作等都相对熟悉，在某种意义上为空页对于他们来讲仅仅就是一个条件反射型提示，根本不会去留意画面内容，甚至有的老用户几乎不会存在有为空场景的时候。

但无论是哪种类型用户，都一定会有同种共性——好奇心。好奇心足以牵引着一个人对所产生事物的关注程度和好感度，从而使得他由被动接受信息直接转型为主动了解信息。

我们以「好奇心」为出发点思考，提炼出设计关键词——「耐人寻味」。也把为空页的设计目标定位「为空彩蛋页」。希望用户在无趣中能够找到一些小惊喜，会心一笑。

根据腾讯微云「智能融入情感」的品牌宗旨，在设计脑爆环节中我们不断联想生活中的事物与各为空页出现场景的共性之处，并把它们都收集了起来（以下均为为空状态表示）。当画面与之文案相联系一起阅读的时候，所产生的幽默感和画面感还是十分有意思的，简单的图文更能加大想象空间。

创意构思&草图

• a.文件-时间：魔术帽内的兔子（随时备份，随拿随到）
• b.笔记：正在削铅笔（等着你新建笔记）
• c.共享组：满是笑脸的插排（随时共享，满心欢喜）
• d.新建文件夹：没有水的泳池（此处空间没东西）
• e.文件-根目录：已漏完了的沙漏（很长时间未动过）
• f.分享链接：未折好的纸飞机（未完成内容所以纸飞机无法成型和起飞-无法分享）
• g.搜索：孤独的灯塔（附近什么都搜不到）
• h.视频：未打板的场记板（等你来开拍）
• i.回收站：空牛奶箱（回收箱里没有奶瓶）
• j.照片-相册：叠成塔的照片堆（还没整理成册）
• k.地点-城市：乐高积木模拟建筑（你来到了假的城市吧）
• l.照片-地点：在迷宫中探索（毫无地点信息）
• m.收藏夹：空白邮票（没有收藏意义）
• n.搜索-图片：展览内的空画框（没内容展示）
• o.相册-人物：稻草人（假人-没有人物信息）
• p.搜索-音乐：断弦的吉他（没法产生音乐）
• q.搜索-文档：打印出来还是白纸的打印机（没内容可打印）
• r.已下载文件：空鸡蛋盒（下载-下蛋）
• s.文件保险箱：层层包装的纸箱（多重保护）
• t.任务列表：天文望远镜内空空如也（没有目标）
• u.相册-智能分类：无法完成的魔方（难以识别完整样貌）
• v.搜索-其他：就差一块拼图即可完成（结果只剩一块明显是对不上的）

当然在脑爆过程中，因为持续的创意思维发散，中间也关联出许多其他有趣的关联物体，而最终选定的物体也是精心挑选出来的，都是相对好理解的代表物体。

三、设 计——精 益 求 精

创意过后，该如何选择适合的设计风格去搭配才能既凸显效果同时也不至于抢眼跳脱？ 经过几轮绘图尝试后，团队果断选择了能代表「极客」属性的单线极简风格作为主视觉风格（表面工整冷淡，内心情感丰富）。以下为重新绘制的插图样式。

总览插图，虽然画风一致，但会发现其产生了两种不太一样的视觉角度（正视+平行透视）。为了加强整体画风的统一度和满足所有元素角度的兼容性，我们把角度统一定为「平行透视」，且仅由一特定角度作为绘图标准，在细节的体现上更胜一筹。

颜色搭配上，结合新品牌专属品牌色（蓝、绿、紫），将插图中的最关键联想区域加入品牌色进行点缀和视觉中心提示，弱化插图描边的分量感。同时为了避免枯燥，品牌色的选用也经过分析和精心搭配（并非平均分配，主要以品牌蓝为主，强化品牌关联性），希望给用户展现最清新极致的插图风格。

四、总 结——秉 持 创 新

本篇文章着重介绍设计中的创新理念，项目虽小，但创意满满。当然也许还会有更棒的创意点子或者视觉呈现，但根本目的还是希望设计师能够用创新的思维去探索设计方式，时刻秉持创新的出发点，以诞生更多有趣、特别、巧妙的设计作品。创新的维度也不要仅仅局限于视觉呈现和插画风格，花点时间在思维上、细节上，或许会有令人意想不到的小点子或者玩法可以打破常规呢。

想了解更多页面效果请下载最新腾讯微云 app 体验。

（当然不提倡把文件全删了冒风险来看彩蛋，或许给自己再开个新户也是不错的选择）

优优教程网： 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：