到了微云6.0发布的时候,我们更新了品牌系统,更换了Logo、品牌色以及全新的界面UI。
文件图标作为视觉体系很重要的一部分,自然也要升级。接下来我们会对当前版本的图标设计过程进行详细的阐述。
前期调研
在改版之前,我们需要梳理出现阶段文件图标的问题和优化空间。
1. 通过数据了解用户的使用习惯
文件图标是服务于用户内容的图标,一千个用户就有一千种文件列表,不同文件图标出现的频率、数量我们无法控制,但是我们可以借助大数据来了解这些文件类型的数量和分布。
我们从后台系统跑取了一段时间内微云中各种文件类型的数据,并按照上传的文件数量对它们进行了排序。(由于图片和视频文件的图标会显示内容缩略图,其文件图标出现的概率非常低,我们对其数据进行了排除。文件夹由于来源多样也未列入其中)我们截取了前24种文件类型格式,并绘制了饼图:
从结果可以看出,微云内的文档类文件数量占比非常高。在新版本中,微云的移动端和WEB端全部支持了Office系列文件的在线编辑能力。这也使得部分微云用户对文档类文件的关注有所提高,一定程度上也改变了用户的工作方式。
因此,保证用户快速辨识文档文件变得尤为重要。而上一版的Office系列图标仅仅是由一个彩色字母表示,在辨识度上有很大的提升空间。
2. 用户习惯为设计改版带来挑战
设计改版意味着用户体验的变化,这就带来一个无法回避的挑战:用户对现有设计已经形成一定的认知模型,设计改版势必会在一定程度上伤害这种认知模型。这也是为什么我们无数次看到某些产品在发布全新设计之初会有大量的负面评价。文件图标做为微云中直接表达用户内容的重要元素,掌握好改版的度就显得尤为重要。
我们可以从收益和风险的角度将图标分为两类:如果重新设计某个图标从长远角度能够从体验上带来明显收益,我们愿意短期的承担风险。对于已经足够成熟的图标,我们可以聚焦到更为细节的优化或不作出改变。
3. 好的设计也要为开发流程节省成本
从资源输出角度看,在以往的微云版本中,我们的图标资源一直是以位图格式进行输出的,根据使用场景的不同,每种文件图标我们需要输出超过7种尺寸,且每种尺寸还要根据不同的文件格式子集输出数量庞大的资源。而如果使用矢量格式,这个数量可以减少到3种。
设计执行
针对前期调研发现的问题和优化空间,我们从图标构成、图标颜色、图形符号三个方面对现有的图标进行了优化。
1. 图标构成
在上一版图标中我们为了强化了轮廓识别去掉了图标的彩色边框,图标的识别性虽然有所提高,但是辨识度却下降了,我们发现部分图标因为丧失了其表达“文件”的部分,用户会一时认不出这个文件类型。文件图标所表达的首先是一个文件,其次才是类型。我们不该省略本身作为文件的部分。因此,在最新一版中我们重新设计了更具有文件感的浅灰背景。
与早期图标的不同在于,这一次的图标仅有前景图形符号和背景纸两部分组成,根据格式塔组织原则中的图形与背景关系原则,由于新的设计方案有了较为明显的前景与背景关系。用户在观察图标整体时,依然会先关注到前景的图形符号,轮廓识别的特性并没有因此丧失。
鉴于Office文件在微云中可以在线协同编辑,且存储数量和操作频率占比都非常高,我们对其进行了形式上的异化处理,强化了其原有的品牌特征,接近原生图标的结构让用户第一眼就能辨别其文件类型。