在去年的博客《写给应届生的职业规划建议》里，提及了“作为一个前端，最该学习的两个方面是 产品 和 设计”的观点，而在这篇博客中，笔者就来谈一谈设计，谈一谈偏重逻辑思维的工程师怎么有效地学习和运用设计。
笔者所在的团队从去年系半年开始，成立设计小组，逐步开始负责团队产品的 UI/UE 设计，以求让团队产品更为 易用。
前言到此为止，接下来要进入正题，而正题的第一点，就是—— 互联网产品中设计的重要性。
α. 设计之重
从苹果的崛起，大家充分认识到设计的重要性 —— 拥有优秀设计的产品，是不需要说明书的。不管从工业设计还是视觉设计上，苹果都给人一种美轮美奂的感觉。虽然如此，但是很多人仍旧认为设计是锦上添花的事情，只要产品功能完善，一切就无可阻挡。可是，虽然从巴莱特定律（80/20法则）来看，设计很有可能在产品的20%部分，但是殊不知，在大家都能完成了 80% 时，这 20% 仍会轻于鸿毛吗？
年初蚂蚁金服的 See Conf 中，蚂蚁的演讲人提出一个非常新颖的观点 —— 互联网逐步会“消失” 。当然这里的“消失”并不是“灭亡”的意思，而是 互联网将和我们的世界充分融合，人们将从 Connect the Internet 到 Use the Internet，再在 Enjoy the Internet，而现在所处的阶段就是从 Use the Internet 到 Enjoy the Internet 的过程中，让用户更容易、更便捷地使用，从而享受互联网带来的一切。进一步，从用户的视角来看，人机交互 将是实现这个目标的重中之重，而 设计 则是 人机交互 的重中之重。
不管观点如何，历史总可以给我们答案。当一个事物从胜到极胜的过程中，细节绝对是决定成败的最关键因素，而 设计才能将产品细节体现得更为突出 。互联网发展到现在，甚至有人说“互联网已经是传统行业”的时候，要更进一步的发展，忠于用户体验的设计绝对是必不可少的。
β. 无设计的开发过程
着眼现在，在很多前端需求的开发过程中，是 无设计的，主要的是以下两种情况：
- 没有 UI/UE 图，工程师自己对着需求撸代码，设计随遇而安。
- 有 UI/UE 图，但是由于工程师对设计不理解，还原得很“糟糕”。
其中，第二种情况尤其突出。这里的“糟糕”是带双引号的，并不是指工程师还原 UI/UE 图还原得不到位，而更多的是说当工程师将 UI/UE 图还原至很高的程度以后，实际效果并不像设计图上所展现的那样美观。这里往往是因为工程师对设计不理解，从而带来一些实现上的细节差异，造成了实际效果差别巨大。
虽然，这两种情况，可以通过规范相关的开发、评审流程来避免，但是有些时候，不可避免因为业务、产品变更频繁、页面复杂或者人力问题，造成此类情况。因此，如果工程师懂一些设计，那么这些问题，虽然可能不会完全避免，但是也足以让影响尽可能地变小。
但是，对一个理科出身、擅长逻辑思维、平时天天撸代码的、甚至毫无审美可言的工程师来说，如何 理解设计，学习设计，并在实际中 运用所学的设计知识，看起来是一项 不可能完成的任务。但是事实真的如此吗？
γ. 审美 VS 科学
什么是 审美？欣赏、品味或领会事物及艺术品的美。每个人都有审美的，虽然有差别，但是很多时候，例如去景区旅游、去博物馆欣赏艺术品，大家对美的评判其实是很相近的。但是为什么有很多工程师，硬要说自己没有审美呢？
其实，没有审美 并不是 没有评判美的能力，更多的是 他们找不到不美的原因，找不到原因，就不能修复缺陷，就不能让产品变得更美。
什么是 科学？科学是一个建立在可检验的解释和对客观事物的形式、组织等进行预测的有序的知识的系统。而最基础的自然科学，则是工程师心里“最高的信仰”，就像“给我一个支点，我能撬动地球”一样，给工程师一个规则，什么事都可以做到最好。
这就好办了，用科学的方法定义一下“美”，把提炼出来的“公式”给工程师，工程师就能让产品“美美哒”了。那么科学和审美碰撞的效果究竟是什么？
团队内，一些人参加了年初的 See Conf，有一位小伙伴听完以后，竟然有“朝闻道，夕死可矣”的感受。原因是在《Ant Design 3.0 背后的故事》里，他看到了身为一个不是科班出身却非常喜欢设计的技术工程师的价值。
“Ant Design 认为，一切看似自然的事物在背后都是有数学/物理规律可循的。映射到我们的设计中，从自然的数理规律中寻找启发，理性的看待我们设计决策的过程，将设计结果、影响结果的变量、以及他们之间的规律发掘出来，就是我们的方向。而这个理性思考，感性表达的过程和我们团队的技术基因也是非常匹配的。”
这句话，是笔者非常赞同的，并深深被其打动。人类一贯是用科学来定义方法，然后按方法来执行具体的行动，而按照所谓的“感觉”来行事的，一贯被认为是“不靠谱”的。当然，笔者不是指设计师做设计都是靠感觉的，他们有一套设计科学，包括配色、沟通等很多专业性的理论基础，但是，对于一个没有设计基础的工程师来讲，他的感觉很大概率是偏离方向的。
同时，科学也让设计理论更为确定，更容易被人接受。就像中医，笔者相信中医是一门确定性非常强的医学，否则中国古代不可能出现那么多像贞观之治一般的鼎盛时代，但是由于中医的很多理论都没有科学基础，所以才被大众所质疑。设计也一样，“因为这个规则，所以这样做更好”肯定比“我觉得这样比较好”要更有说服力。
Ant Design 3.0 的设计价值观是“确定”和“自然”，从自然中提取出“美”，然后用确定的科学规则来描述它，最终形成一套准确的设计规范，这样才更有价值。下面是个很“自然”的例子。
什么样的字号，用户看得最舒服？从图中可以看到，在人和屏幕距离一定的时候，人观看文字的视线角度（a），决定了人的舒适程度。有机构和团队做过研究，当大于 0.3 度时的阅读效率是最好的。同时我们在操作电脑时，一般来说眼睛距离电脑屏幕的平均值大概会在 50 厘米(2.45 inch)左右。这就算出来，字体应有的高度大于 12 px，再根据屏幕的 PPI，可以算出字号为 14px 时，77% 的用户最为舒服，而这个字号，就成为 Ant Design 3.0 的主字号。
当你有一个主字号的时候，其他字号又怎么算出来的呢？
14是主字号，而 2.71828 和 5 又是怎么来的？
- 2.71828 其实是就数学课中学到的自然常数，也可以称她为欧拉数，是一个超越数（无限不循环小数），和 π 称兄道弟。
- 5 的来源更为神奇。有国外大神建议，参考音律的规则，令字阶呈现出一种自然的节奏感。最终通过实验验证出来的最合适的数值是 5，而 5 声音阶是很多古典乐遵循的规律，比如宫、商、角、徵、羽。
Amazing！ 你有没有感受到自然之美，一个追寻着科学的真理，让处女座都生不出丝毫厌恶之心的规则，对于工程师来说，是多么美妙啊。
不仅仅是字号，包括行高，包括字间距，包括排版，包括颜色，都可以用很自然的规则去定义它们。同时也不仅仅是蚂蚁金服，苹果的设计一直很自然，从拟物到偏平，虽然每次升级是都会被人吐槽，但是用习惯了都会觉得很舒服。从 Google 的新 Logo，到腾信的独创字体，都很自然，同时也都很确定。
给你一个支点，你能撬动地球；给你一个确定的科学规则，你是否能产出足够美的产品呢？
δ. 设计不只是美
设计不只是美，美只是设计的第一步，它让用户在使用时，尤其是第一次使用时，至少可以有个好的印象。而设计的最终目的其实是为了更好地、更准确地传达信息，让用户更方便、更容易的接受信息，从而让产品能解决用户的问题。
因此，设计追求的是卓越的用户体验，不仅仅是感官的体验还有使用的体验。使用的体验或许更为重要，但是它要在感觉体验的基础上完成，才能让体验相辅相成，让设计更为完整。
用户体验的核心是 研究用户在特定产品的场景下的思维和行为模式，然后利用研究的结论，创造出适应用户、让用户感觉舒服的产品。一个优秀的用户体验，会将产品设计成符合用户的思维行为习惯；而一个卓越的用户体验，会基于用户本身的思维行为习惯创造出符合产品特性的设计，并引导用户进行使用。
因此，理解产品，才能做出好的设计；理解产品并理解好的设计，工程师才能更好地对产品进行开发。但是工程师如何去学习设计呢？上文说过，设计是一个门包含众多的理论，不可能面面俱到地去学。这时，我们应该选取比较容易但效果足够好的东西去学，那就是设计的基本原则。
ε. 无原则，不科学
既然谈到了科学，那么就应该谈一谈规则、原则。所有科学，基本上都是建立在确定的规则上的，而设计也一样。
左侧是一个让处女座发狂的“放荡不羁”的设计，而右侧则是符合设计原则的。或许有人会觉得左侧的设计体现的是自由、奔放，体现出舞蹈的多样性，但是不管如何自由，让用户不能快速地获取信息，这就是个坏的设计。那么，到底什么是设计的原则呢？
在《写给大家看的设计书》中，Robin 提出了设计的四大基本原则：对齐、重复、对比、亲密性。每一个优秀的设计作品通常都遵守这四大基本原则，互联网设计也不例外。
- 亲密性：彼此相关的应当靠近，归组在一起。 如果多个项目相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个独立的元素，这有助于信息组织，减少混乱，为读者提供清晰的结构。
- 对齐：任何东西都不能在页面上随意安放。 每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。
- 重复：让设计中的视觉要素在整个作品中重复出现。 可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，技能增加条理性，还可以加强统一性。
- 对比：避免页面上的元素太过相似。 如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。
这四项基本原则非常基础，就像数学中的加减乘除一般，对于一个工程师，这些很容易学会并理解。
可是，作为工程师，为什么要学呢？学这么点又有什么用呢？很简单的原因，虽然学习这些很基本的东西，并不能让你真正可以进行设计，但是它能在你无设计的开发过程中，不再用感觉来尝试修复“审美的不足”，而用科学的方法去发现并解决问题。虽然它也许只能做巴莱特定律中 80% 里的东西，但它可以以很小的成本，规避一些很常见的错误，让工程师少走几次弯路，少改几次代码。笔者觉得这样就足够了。
如果作为工程师的你，真的下定决心学习设计，那么阅读《写给大家看的设计书》是个不错的选择。
ζ. 写在最后
其实设计小组的成员并不是纯粹的设计师，他们更像 体验工程师，把优秀的体验真正实现在项目中。最后还是那句话：
作为一个前端，最该学习的两个方面是 产品 和 设计 。学习产品思维，会帮助你从用户的角度审查你开发的产品，找出用户体验不优、交互不好的地方；而学习设计，则帮助你分析不优的地方的原因，并找出解决方案。
对于团队的交互设计发展，我们准备像成熟的设计团队一般，并模仿他们，构建自己的设计体系 —— Youth Design。我们要不断地 拥抱未来，不断探索未来的交互形式，吸收前沿的设计理念的同时，对科学保持保持敬畏，用科学的态度保持设计产品的确定性。当然，身为 Qunar 人，我们必须要 立足青春，让我们的设计真正被年轻人喜欢。
最后，感谢董文博、张文杰、田琦、侯情缘这些 YMFE 交互设计小组的成员们给这篇文章提供了这么多很有价值的内容。
