第2章 有源设计
◎李伟巍
有源设计是让设计有据可依，而不是让设计者天马行空。设计中的点、线、面、色块、交互、动效等每个元素都凝聚着设计师的心血，每一处设计细节都有其依据。有源设计中的“源”就是指设计语言，代表设计师思考的维度，可能是产品需求、框架逻辑、数据分析、用户反馈、设计思想、习惯的力量等，这些都可以是设计语言的基础。
2.1 设计语言的概念
语言是用来对话的，设计语言的价值体现在产品中，就是让产品可以说话，即用户同产品对话。设计语言会在无形中传递给用户成熟的操作方式及整体形象。既然把设计语言称为一种语言，那么它势必要具备语言的特点。我们把它分解为三个层级：设计理念、设计框架、设计表达，在语言中的对应关系分别如下：
（1）设计理念
设计的原则，就是语言中的语法，也是设计中的地基，比如：我们要在设计中打造一种“?自然?”理念的设计原则。
（2）设计框架
设计的元素，就是语言中的词典，也是沟通的主要工具，比如：控件、列表、布局、导航、排列等。
（3）设计表达
设计的视觉，就是语言的沟通，也是设计展现出来的形象，比如：字体、色彩、间距、栅格、情感等。
2.2 设计语言带来的好处
为什么要提出设计语言的概念呢？
设计语言是设计的基础，是为设计的想象力打好一个地基。设计语言的建立，能在设计层面创建一个全面的视角，帮助整个设计团队遵循相同的方法和模式，确保公司平台产品设计的统一。这就是为什么要建立设计语言的概念。
建立好设计语言有什么好处呢？
对企业而言，可以塑造统一的品牌形象、确保产品线的体验设计一致、让对外传播的语言具有互通性。好的设计语言可以直接影响企业的生死存亡，可见其影响力有多大。
比如：无印良品最早的设计语言是提倡节约、朴素、舒适的生活，拒绝盲目的品牌崇拜，直抵生活本质。无印良品的衣物没有标签，不离黑、白、灰、蓝等天然色系，吊牌用未漂白的本色纸片。省略一切过剩装饰，挑战商品的真正价值。这一与众不同的设计语言还原了商品追求自然的本质，以一种日常、低调的姿态根植人心，关心消费者的饮食冷暖，贴近消费者呼吸的节奏，赋予了产品独特的文化。无印良品的资深设计师深泽直人强调，物品的最高境界是追求自然，朴素、简单，还原产品的本质，处处暗示着朴实无华的设计理念。
对设计师而言，统一的设计语言可以创造平台的一致性、系统性，同时效率也会有所提升，还能帮助业务更进一步。从设计层面分析，具体可以带来以下几点好处：
- 专注：设计师更专注在项目上，不被其他细碎工作所干扰。
- 清晰：设计师更清楚地思考设计理念，及整个形象的传播思想。
- 一致：设计师更系统地保持整个产品线的一致性，给用户传递一致的体验。
- 高效：设计师更高效理解整个产品的设计思路，减少很多不必要的沟通。
比如Android 5.0系统引用了Material Design全新设计语言，新增了Ripple类型的波纹动效，上线后就有用户表示触发控件后呈现出了波纹的动效，却没有进入下一层级交互，是不是应该算是系统的Bug？Material Design设计语言强调根据用户行为突显核心功能，进而为用户提供操作指引。动画效果（简称动效）可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。应当在独立的场景呈现，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。
动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。所以只要用户触碰了控件，就应该予以触碰后的反馈，不能因为没有事件就不给触发反馈，如果那样的话，用户根本就不知道自己到底有没有完成触发，可能会不断地去触发好多次，很影响用户体验。
2.3 制定设计语言需要遵循6个设计原则
有源设计在信息化时代变得愈发重要，对设计师也提出了更高的要求，设计师的风格不尽相同，每个人都在表达自己的想法，这才使我们眼中的世界丰富多彩。但不能全靠大数据来告诉我们怎么设计，我们应该有一套自己的设计规则，所以有的设计可以打动人心，有的却平淡无奇。那到底怎么做才能有自己的设计语言呢？我们总结了6个制定设计语言的设计原则。
1.遵循用户的真实需求
任何设计都要建立在用户的真实需求之上，我们可以通过多种方式获取用户需求。现在用得比较多的是线下调研、网上问卷、数据分析、场景分析等。当然不可能每次都会有机会去做调研，最直接的方式就是去了解业务，从而来理解整个产品的逻辑。不同领域间的业务逻辑是存在很多相似之处的。转换到设计层面，即都需要先考虑到用户的需求，然后再结合我们自身的经验积累做权衡，这对于喜欢思考的设计师还是比较容易达成的。
我们曾经做一个产品的视觉呈现时，负责人对首页的要求是采用全屏滚动的切换方式，理由是这样显得上档次、酷炫。但从用户需求层面考虑，产品本身就可以一页呈现全部内容，为什么要人为分割出很多块来呢？这不符合我们定义产品“?轻?”的设计语言。需求方遵循我们的设计语言，最终产品上线后，通过数据统计发现，用户都是通过渠道直接进入详情页，直接访问首页再进入详情页的流量很少，首页存在的意义并不大。所以，设计师如果不是正确地运用设计语言来做设计，可能就要花上几倍的工作量，却得不到成效。
2.遵循产品的设计初衷
设计语言是围绕产品的设计初衷制定的。产品的发展和外界的改变有时会影响我们的设计初衷，忘记最初为什么出发。设计初衷是产品发展的主旋律，市场中不断会有新东西出来，不能什么火就跟风做什么，不停地改变自己的产品需求，这样到最后可能连自己都不知道在做什么，更何谈用户的忠诚度呢？设计语言定义的也要遵循产品的某些特性，如果产品的方向都改变了，设计语言的使用场景也会随之变化。
比如我们之前做过一个好久没迭代的产品，其运营数据一直稳定在一个区间。开评审会的时候，产品经理就想重新定一个方向，最终确定为资讯类型的属性，愣是把一个工具型产品转变成了一个资讯为导向的媒体产品，这就违背了我们设计产品的初衷。产品在特定的阶段可能会摸索前行，但产品本身就有其特定的标签属性，定位于有需求的用户群体，如果我们把这个方向改变了，势必会影响到产品的各方数据。设计语言适合工具型产品的高效，不一定适用阅读场景下的产品。
3.遵循成熟的用户体验习惯
体验设计是产品设计中最最重要的一环，也已形成了一套标准的设计体系。用户在使用各种产品的过程中，慢慢形成了一套熟悉的体验习惯，这种习惯就是设计语言需要遵循的体验方向。
比如，饮水机、冷热水龙头都是左边为热水，右边为冷水，这已经是形成了国际通用标准的设计，如果某产品特立独行改变这样的习惯，很可能要发生烫伤类的事故。产品可以与众不同，但调整用户已经习惯的体验，结果可想而知了。用户为什么要忍受你的改变而做出体验上的让步呢？我们看到齿轮图标就知道这是设置，看到左箭头就知道这是返回，把这种已经形成观念的视觉体验改为另类一点的设计，势必会给用户带来不必要的困扰。改变体验设计不仅仅是改变用户的习惯，还涉及用户的学习成本。所以设计语言不是要打破用户熟悉的习惯，而是在用户习惯的基础上更加高效。
4.设计语言的误解
设计语言不是简单学习竞品的设计，将其引用到自己的产品中，还标榜这是自己的创新。我们来举个例子说明这种理解的误区。
比如《刀塔传奇》出来后，游戏的设计风格、交互体验、游戏策略逻辑，被各大游戏公司争相学习。这反倒给玩家带来了福利，玩过刀塔传奇再去玩这些游戏，很容易就上手了。这也使玩家培养了一套熟悉的体验习惯，很多游戏在抄袭这种模式，可是对玩家来说我已经在“?刀塔?”中发展得很好了，为什么要切换到一个从零开始的类似游戏上呢？这样的话，抄袭的游戏很难能异军突起。设计语言不是一味地去借鉴，而是在产品中创新，利用好产品间的场景差异，转变为自己在市场竞争中的利器。比如《王者荣耀》就是以这样的模式出现的，完全形成了自己的设计语言体系。
5.有选择地接受用户反馈
设计语言的好坏也需要通过用户反馈来评判。产品基本都有用户反馈的入口，这样可以有效地帮助用户解决问题并改进产品中的不足。针对产品类型的不同，可以采用不同的反馈形式。产品开发出的模型基本都要经历压力测试、场景测试、灰度测试等。一遍遍测试都是为了得到用户的反馈，各方都没问题了才会推向市场，同时也是为了验证设计语言的方向。
比如我们在设计搜狐门户网站的大改版时，就采用了A/B Test来看数据反馈，反复经历了好几轮迭代。当时99%的用户应该都察觉不到，因为我们只随机选择了1%的用户，分析这部分用户的数据反馈，这足够帮助我们统计到新版数据可能带来的变化，及时调整设计语言的方向，做出有效的调整和优化。
6.工作中高效沟通的语言
设计师在很多时候都想把设计思路清楚地传达给他人，但这似乎并不是件很容易的事情。你认为自己的设计意图完全符合用户的需求，别人可能并不这么认为，甚至用自身感受作为用户的感受来举证没有这样的需求，虽然我们可以反驳他不能代表用户，但这样很可能就没法再沟通下去了。
就沟通而言，说不出理由的设计可能是设计者考虑得不够全面，这会让设计师在沟通中缺少底气。这在产品的沟通中是最常见的场景，经常会听到有人问“你为什么要这么设计”，当你的设计意图不能传达出设计语言，将很难得到项目组的认可。试想一下别人可以对你的设计方案提出异议，如果你觉得自己的方案没有问题，那你是不是就要拿出具说服力的举证呢？如果我们的方案经过深思熟虑，如果我们在设计中定好设计语言体系，是不是会让沟通变得更加顺畅呢？可见，设计语言可以让沟通更加高效，变成工作中的产品语言，带动整个工作流程的高效。
2.4 设计语言推动评审案例
设计评审，就是讨论设计方案的沟通会。对设计师来说可能会有点小压力，因为每个人对设计的理解层次不同，可能会出现吐槽设计作品的现象，这往往是因为他们没理解设计意图。当设计师表达自己的设计思路后，如果还是不能被接受，很有可能是设计真的有问题，需要设计师换位思考，想想大家为什么会觉得不好。很多人可能都不懂设计，不会设计技法，更不可能有针对你的嫌疑，所以这种声音恰恰可能代表部分用户群体的声音，设计问题反映的是设计语言体系的不完善或者压根就没有仔细地思考过。
比如我们有个频道主站的改版项目，涉及的业务部门比较多，所以设计方案需要得到所有业务部门的确认才行。方案经过几轮修改最终出炉，我们召集业务部门来评审。各业务部门的意见众说纷纭：字体太大、颜色太单一、整体太简单、缺乏设计感、没有视觉冲击力、图意表达不清、模块分割不清、没有框线等。设计师听到这些建议后，开始阐述自己的设计理念完全迎合了设计的主流趋势，遵循体现品牌、轻量化、去除装饰、弱化表现等设计原则，在阅读体验上更直接地给用户呈现内容。但这种阐述在评审会上显得徒劳，没有任何成效。
项目负责人并没有反驳别人的观点，而是直接展示了我们线上的设计规范，传达了我们设计遵循的准则，然后与竞品的设计语言进行对比，体现了整个产品线体验设计的统一性，强化了品牌形象的一致性。之后大家好像恍然大悟，只提了涉及自身利益的一些问题，而不再纠结设计本身的问题。设计语言胜过诠释若干别人听不懂的专业术语，别人并非设计专业出身，对这套设计理念又怎么会有感觉呢？设计语言就是高效沟通的简单方式，不仅很好地传达了产品的设计理念，还减少了沟通不畅带来的负面影响。
2.5 数据验证设计语言的方向
我们移动端的WAP页面，在首屏最重要的区域，每天都能有几百万的流量。想在体验上优化可不是那么容易的事情，因为改变用户的浏览习惯，很可能会得不偿失。首屏的流量很大，可进入筛选入口的流量却并不多，通过筛选入口来找到合适的车型又是用户的刚需，这就需要我们找到一些提高筛选入口流量的方法。
下图黄色界面是旧版的首屏，有个快速找车的入口，产品设计了几种分类区间，用Tab的体验形式呈现，依次按品牌、价格、级别、车型四个维度分类。这几个分类对快速找车而言都非常重要，第二、三、四的Tab在设计上被弱化，提示性很弱，很容易被用户忽略，所以通过这几个Tab找车也就变得没那么快速。
我们梳理产品时发现这非常不符合我们定义的高效为用户解决问题的设计语言，目前的设计显现出了一种违和感，于是想从体验设计上优化一下，更加符合我们设计语言的基调。我们做了如下体验上的优化，将多个Tab整合成一个，这样就不需要用户去切换多个Tab分类，所有重要的标签一目了然。
我们将新版设计方案（图中蓝色的）拿过去与项目负责人沟通，没想到负责人并不认可这个方案，他认为新设计方案并不能解决之前页面的筛选入口流量小的问题，还认为目前的（黄色版）分类很合理，通过分类呈现很多复杂的选项，化繁为简，很有条理性，并给我们找了一些竞品的例子做举证，说大家都是通过旧版的分类标签的方案来处理很多选项。这样的沟通结果，我想很多人都遭遇过，而且大概率的结果就是要把新方案搁浅了。
突然想起迈克尔·杰克逊在歌曲《Scream》里的一句歌词：“You tell me I’m wrong.Then you’d better prove you’re right.（你说我是错的，那你最好证明你是对的。）”于是我们就想了一个办法，请技术人员帮忙导出这几个模块某一时段的数据。数据统计显示默认（即第一个）标签访问量16万多，第二个标签就降到了7千多，第三个降到4千多，第四个只有300多，如上图。
看到这样的数据结果，我们确实没想到数据差距这么大，我想目前的设计不符合设计语言的规则，很可能就是导致转化率低的原因之一。这促使我们对设计方案做一次灰度测试，在强有力的数据源举证面前，大家都选择接受我们对设计语言的理解。最终我们将前三块Tab里的标签有选择性地整合到了一起，优化后比对数据发现，转化率提升了近3倍之多。这次利用数据优化了产品体验上的不足，直接验证了我们的设计语言方向的准确性，关键是这种方法可以引领我们更好地做体验设计。我们把这个案例分享出来，希望大家利用数据验证设计语言，而不是简单地通过合理性来解释。
设计任何东西都需要设计师认真地去思考，产品经理给我们需求，也不希望看到我们不假思索地照着UE图去默默做完，这样的设计态度显得很不专业。整理出设计的思考逻辑、系统性的设计语言显得尤为重要，这是作为优秀设计师的基本职业素养。
设计语言归根结底就是设计师的“意识”。每设计一步可以多问几个为什么，想想这么设计在用户需求或整个产品策略逻辑上有没有不违和的地方。如果自己都说不出来，那还真得要好好完善一下自己的设计思路。普通设计师与优秀设计师的一个重要区别就在于，后者懂得从“?为什么?”这个角度拓开思路，当你运用好设计语言的设计原则后，在表现层的设计就水到渠成了。
设计师的成长需要积累，更需要个人的思考和领悟，理解产品的需求逻辑至关重要，独特的体验设计也会影响到产品的整体形象，要学会利用设计语言来提高工作效率。