汪方进，阿里巴巴B2B事业群-用户体验设计部负责人。拥有多年设计行业从业经验和深厚专业背景，2003年—2011年间任职于网易公司，期间曾担任网易用户体验设计中心总监，亲历或主导网易邮箱、门户、LOFTER、新闻客户端、网易首页等诸多海量级用户产品的重大改版和体验升级。2012年加盟阿里巴巴集团B2B事业群，负责阿里系内贸B2B平台1688.com、村淘、零售通等业务的全站体验设计工作，带领团队完成1688首页、我的阿里、手机1688、1688行业频道群、村淘网站等网站核心产品的重大改版和新突破。 长期致力于UED团队“道—术—器”的思考与实践，沉淀了从设计观到方法论、从文化土壤到专业能力提升等整套UED团队的发展思路和管理心法，为设计团队带来了新的思考视角和价值延伸。

在G20之后，我们有幸邀请了G20 logo的主创——浙江工业大学艺术学院的方宏章老师，来为我们做了一次关于字体设计的分享。

方宏章老师任教于浙江工业大学艺术学院，同时也是杭州九月九号工作室合伙人。作为一名平面设计师、策展人，方老师曾策划2010纽约字体艺术指导俱乐部获奖作品中国巡回展在杭州的展出，也曾策划2012企鹅图书设计艺术亚洲巡展，作品应邀参加宁波国际平面设计双年展,亚洲平面设计双年展等展览。

在产品插画中合理使用比喻既不是在插画中使用比喻的修辞方式，也不是在把比喻内容用插画表现出来这么简单。

最近我被问到蛮多的一个问题是：在招聘插画师时你主要考核什么方面？

既不是拥有独特的个人特质，也不是深谙多种风格，更不是曾服务过的知名客户列表或者作品出展过的地方，当然拥有这些资质也挺不错的。我的答案是：设计师对比喻的使用程度。为团队招聘插画师的时候，我最想了解候选人是否理解如何通过愉悦轻松易懂的方式，借助比喻来传递复杂的想法。

第1件事是体验。其实体验VR的成本很低，你只需要一台屏幕尺寸在4.7寸以上的手机和一副VR眼镜就可以了。VR眼镜最便宜的可以在淘宝上买谷歌的Cardboard，十几块钱，效果也很好。内容上不要满足于那种虚拟电影院看3D电影的，那种不能算VR。请先翻墙（很重要），谷歌一下VR类的app，这里推荐几个：Google Cardboard，VRSE，Discovery VR，InMind VR等。

众所周知，我们的感知系统主要分为五觉，分别为视觉、听觉、触觉、嗅觉、味觉，而根据分析，其中90%的感知是来源于视觉系统。而为界面产品增加有趣的UI动效，便是利用了视觉刺激思维和人机交互细处理，来营造出更为有趣的人机互动模式，从而达到传递或获取信息的结果。

下划线 一般在文档中常被用作增强注意，在过去打字机时代，下划线成为了唯一的一种文字强调方式，具体的操作方法是在已经打出来的文字上面退格，再在同样的地方打出下划线。

而在网页中，可以链接的文字（超链接）下面一般都有下划线。在制作页面的时候，当链接需要下划线的时候，UI开发很自然的会想到使用text-decoration属性来显示，例如这样：

以上显示的是设计稿和浏览器渲染的实际效果，我们会发现浏览器渲染的效果和设计稿有出入，主要表现在下划线的位置，这时候细心的设计师会要求你想办法实现他们本来想要实现的效果。可惜的是，在这几年的网页排版技术发展中，并没有更好的css属性出现来支持下划线的个性化设置，所以这个问题常常会被忽略。

这个一般在UI开发看来，可能觉得并没有什么问题，难道说不应该使用text-decoration这个属性吗？

以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写 media
query，然后看效果再微调。开发过程中视觉稿要是做了修改，修改的地方就得再走一遍分辨率测试和微调，这时想屎的心都有了。而且这些适配都是建立在已
知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，呵呵，又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面
这些烦恼，且开发效率快和维护成本会降低很多。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

近期，我们对微云WEB端进行了一次“简单”的改版。这篇文章简要记录了改版过程中的一些思考。

为什么要改版

微云WEB端与移动端体验不一致。移动互联网背景下，项目团队把多数资源都分配给了移动端的研发，桌面端的功能和体验得不到及时的跟进，导致用户在两个平台上的体验存在很大的落差。

微云WEB端的设计较为陈旧。苹果iOS的快速发展使得整个UI设计行业日新月异，设计理念不断进化向前，微云WEB端的设计已经多年未更新，早已经不起当下设计原则的检验。

改版前的思考

两端的体验对齐需要解决很多矛盾。想要将WEB端的体验与移动端统一，并没有想象中的那么简单。听起来好像只要把交互框架和视觉风格直接照搬过来就好了。但实际上要对齐的是两种使用场景的体验，这中间要调和的是小屏幕和大屏幕的矛盾，触摸操作和键鼠操作的矛盾，两种不同概念模式和心智模型的矛盾。

新的设计除了符合潮流，还要更具前瞻性 。想要做出可持续的设计，首先要明确设计潮流的走向，从拟物到扁平，从形式到内容，从工具化到情感化，设计潮流的走向一直没有变，在以人为中心的前提下，越来越注重用户更深层的需求。

项目团队在WEB端的资源投入注定了设计更新迭代的频率会很低。想要改版后的设计能够长久地支撑产品的发展，需要设计师把眼光放远，通过了解产品未来发展方向，做出更有前瞻性的设计。

求同存异的两端统一

品牌统一性

在设计一款产品不同平台客户端的时候，首先要保证品牌的统一性。Logo、字体、品牌色、品牌调性甚至是文案的措辞规范都是需要严格保持一致的。保证品牌的统一性，有助于塑造品牌形象，增强用户对产品的信任。

交互框架的对齐

我们先来对比一下移动端和WEB端的主界面，单纯从视觉上，已经很难看出这是同一款产品。虽然在页面结构上两端并不一致，但各自也都符合所在平台用户的操作习惯。

旧版WEB端虽然在视觉风格上是扁平的，但是在信息层级上却并不扁平，仅仅顶部的信息就有三层，过度的结构化使整体页面看起来过于复杂，用户很难将注意力集中到内容上。我们对WEB端顶部元素重新归类整合，主要功能入口的布局和移动端进行了统一，通过引入移动端的编辑态逻辑，常态下隐藏了所有的操作按钮，将顶部区域的三层信息减少为一层，使其看起来更加清爽。

正如上面所说，虽然我们追求多端统一的用户体验，但手机和电脑的操作场景差别很大，用户在不同的平台已经形成了不同的操作习惯。移动端的多级导航设计是针对小屏幕局限性做出的一种妥协。在空间足够大的WEB端，所有的二级导航都可以平铺出来，这样可以减少一个层级，因此，我们保留了原有的左导航结构。通过对导航项归类的方式与移动端统一。

品牌调性和视觉风格的对齐

在视觉风格上，微云移动端最具代表性的就是蓝色的品牌色和线型的图标， 在尝试设计方案的过程中我们发现，由于WEB端尺寸比较大，大面积使用蓝色会加重用户的视觉负担，分散用户对内容信息的注意力，因此，在色彩方案上最终选择了纯白浅灰作为主色，蓝色作为局部点缀，以下是改版后的一些核心页面。

秉承着简洁、自然、易识别的原则，我们对所有的小图标进行了优化。简化了旧版本中的复杂表达，并对默认态、hover态和选中态进行了规范。

文档类型图标也和手机端进行了对齐，将文件格式进行分类整合，同类型的格式采用同一个图标，将格式后缀在文件名中显示出来。在不影响识别的前提下大大降低了设计成本。

内容至上的前瞻性设计

全新的缩略图模式

内容至上是当今设计的发展趋势之一，结合微云未来的重点方向——办公体验，我们进行了一些对内容的深入思考。

在网盘的使用场景中，什么才是用户关注的内容？早期的文件管理产品把文件图标、文件名定义为内容，文件被包装成一个个方块，或是一行行的列表，文件间的差异只靠文字来体现。面对这样的界面，用户对文件的识别是十分低效的。这也是为什么在如今的网盘场景中，图片是最容易识别的，因为它做到了文件本身内容的外显。

在面对一个一个被包装的文件时，用户容易被触发的行为局限于整理、删除等基础操作，只有在能够看到文件本身内容的时候，才更容易触发编辑、分享、共享协作等更加沉浸式和更具社交性的操作。这就好比你走进一个仓库看到货架上的一个个箱子，你会想要把他们分类、摆放得更整齐。但是当你走进一家商店，看到货架上琳琅满目的商品时，你才会有挑选、对比和购买的冲动。

秉承着这个理念，我们反观图片之外的其他文件类型，道理是相同的；因此，我们在改版中引入了全新的缩略图模式，在新的缩略图模式下，单个文件的可视区域被放大，用来承载文件本身的内容。虽然一屏可以展示的文件数减少了，但展示出的有效信息是大大增加的，除了让每个文件在视觉上有了独特性，提高了检索效率，也更容易触发用户更多的后续行为。这对于产品本身的价值相信大家都懂。

技术过渡时期的体验补偿

理想很丰满，现实很骨感，让更多的文件内容外显在技术上必然要走一段路。在技术问题解决的过程中需要设计对体验进行一些弥补，在缩略图的文档图标的设计中，我们尽可能的把文件的内容样式图形化；同时，为了保证识别性，那些图标比内容形式更具特征的文件，保留了图标设计的形式。

写在最后

微云一直致力于为用户提供更更自然的使用体验，无论在功能上还是在设计上，我们都秉承着以用户为中心的原则，不断打磨每个细节。WEB改版也是如此，这一期改版我们对WEB端的框架和方向进行了调整，在接下来的二期、三期.....我们会不断深入到各个模块，进一步提升WEB端的用户体验。在这个对于个人网盘来说最坏的时期，微云会长久的发展下去，我们不会停止前进的脚步，更多酷炫的新功能新体验已经在路上。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编者按：卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前，但是它同样有无法满足用户需求的时候，今天的文章我们就在实战中聊聊这件事~

Material Design的流行让卡片式设计走上神坛，卡片式设计在如今的网页设计中更是随处可见。尤其是那些偏向于大量信息汇总的页面，卡片式设计几乎是不二的选择。

卡片常常被用作信息详情的进入入口。

我们的用户体验团队近期负责了好几个重设计的项目。毫无疑问，其中有不少就是借用卡片式设计来实现的。而有意思的地方在于，我们通过这些项目实践发现一些有意思的情况：卡片式设计在一些新闻类的网站，尤其是首页和归档页面，并不是那么适用。

聆澜子：遥想新版本表情上线，已经过去了许久。随着开发哥们不辞辛苦的版本优化，我们终于如约迎来了QQ新表情的加入（撒花）。今天这篇为你揭秘这些表情是如何设计出来的！

寻找中国茶

茶表情的加入源于我们对于表情中华元素缺失的反思。不同于emoji表情，作为中国人独有的表情包，QQ表情有义务更主动地去传播中国自己的文化。茶表情，将是我们的开端。

茶文化博大精深，世界各地已经形成了许多独特的饮茶文化和风格，但我们需要做的是中国人的茶。那么，如何让我们的茶表情能够一眼分辨出是“中国茶”，是设计上遇到的最大难题。

本着考据党死磕到底的精神（微笑），我们地毯式地搜集了各种画风的茶文化。