上面的技术都讲完了，前端还有一个很重要的事就是设计。作为前端人员，我们有必要了解现在的一些知名且流行的设计语言或是一些设计规范或是设计方法，学习它们的设计思想和方法，有助于我们拓宽眼界、与时俱进。我并不觉得这些内容是设计师要学习的，如果你要成为一个前端程序员，那么学习这些设计上的东西可以让你有更好的成长空间。 对于学习设计的新手来说，推荐看看 [7 steps to become a UI/UX designer](https://blog.nicolesaidy.com/7-steps-to-become-a-ui-ux-designer-8beed7639a95) ，这是一篇很不错的让新手入门的文章，非常具有指导性。首先，你得开始学习设计的一些原则和套路，如配色、平衡、排版、一致性等。还有用户体验的4D步骤——Discover、Define、Develop 和 Delivery。然后，开始到一些网站上找灵感。接下来，是到不同的网站上读各种文章和资源，开始学习使用设计工具，最后是找人拜师。此外，其中还链接了其它一些不错的文章、网站、博客和工具。我认为，这篇文章是一篇很不错的设计师从入门到精通的练级攻略。 虽然有这么一个速成的教程，但我觉得还是应该系统地学习一下，所以有了下面这些推荐。 # 图书和文章推荐 先推荐几本书。
  • [Don’t Make Me Think](https://book.douban.com/subject/1827702/) ，这是我看的第一本和设计相关的书。这本书对我的影响也比较深远。这本书践行了自己的理论，整本书短小精悍，语言轻松诙谐，书中穿插大量色彩丰富的屏幕截图、趣味丛生的卡通插图以及包含大量信息的图表，使枯燥的设计原理变得平易近人。
  • [Simple and Usable Web,Mobile,and Interaction Design](https://book.douban.com/subject/5394309/) ，中文版译名为《简约至上》。本书作者贾尔斯（Giles）有20多年交互式设计的探索与实践。提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约至上的终极策略，讲述了为什么应该站在主流用户一边，以及如何从他们的真实需求和期望出发，简化设计，提升易用性。
  • [Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules](https://book.douban.com/subject/6792322/) ，中文版译名为《认知与设计：理解UI设计准则》。这本书语言清晰明了，将设计准则与其核心的认知学和感知科学高度统一起来，使得设计准则更容易在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面，为交互系统设计提供了支持工程方法。不仅如此，这也是一本人类行为原理的入门书。
  • [Designing Interfaces: Patterns for Effective Interaction Design](https://book.douban.com/subject/25716088/) ，中文版译名为《界面设计模式》。这本书开篇即总结了“与人有关”的各类问题，为读者提供了界面设计总体思路上的指引，帮助读者举一反三。然后，收集并分析了很多常用的界面设计模式，帮助读者理解在实现级别的各种常用解决方案，将它们灵活地运用到自己的设计中。
    • 除了上面的这几本书，还有下面的这几篇文章也是很不错的，推荐一读。
  • [The Psychology Principles Every UI/UX Designer Needs to Know](https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778) ，这篇文章讲述了6大用户界面用户体验设计的心理学原则。
  • [18 designers predict UI/UX trends for 2018](https://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6)， 我倒不觉得这篇文章中所说的UI/UX是在2018年的趋势，我反而觉得，这18条原则是指导性的思想。
  • [The Evolution of UI/UX Designers Into Product Designers](https://medium.com/thinking-design/the-evolution-of-ui-ux-designers-into-product-designers-623e4e7eaab3) ，这篇文章是Adobe公司的一篇博客，其在回顾整个产品设计的演化过程中有一些不错的思考和想法，并提供了一些方法论。
    • # 原子设计（Atomic Design） 在2013年网页设计师布拉德·弗罗斯特（Brad Frost）从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecules），进一步结合形成生物体（Organisms）。布拉德将这个概念应用在界面设计中，我们的界面就是由一些基本的元素组成的。 乔希·杜克（Josh Duck）的“HTML元素周期表”完美阐述了我们所有的网站、App、企业内部网、hoobadyboops等是如何由相同的HTML元素组成的。通过在大层面（页）和小层面（原子）同时思考界面，布拉德认为，可以利用原子设计建立一个适应组件的动态系统。 为什么要玩原子设计，我认为，这对程序员来说是非常好理解的，因为这就是代码模块化重用化的体现。于是，你就是要像搭积木一样开发和设计网页，当你把其模块化组件化了，也更容易规范整体的风格，而且容易维护……这些都意味着你可以更容易地维护你的代码。所以，这个方法论导致了Web组件化的玩法。这是设计中非常重要的方法论。 关于这个设计方法论，你可以阅读一下下面这几篇文章。 - [Atomic Design原子设计┃构建科学规范的设计系统](https://www.jianshu.com/p/13e87bf4f857) - [网页设计：Atomic Design简介及工作实例](https://medium.com/uxeastmeetswest/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-atomic-design%E7%B0%A1%E4%BB%8B%E5%8F%8A%E5%B7%A5%E4%BD%9C%E5%AF%A6%E4%BE%8B-42e666358d52) 但是，真正权威的地方还是布拉德·弗罗斯特的电子书、博客和实验室，可以从中获取更多的信息。 - [电子书：Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com) 是布拉德·弗罗斯特写的一本书。 - [博　客：Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) 是布拉德·弗罗斯特的博客。 - [实验室：Pattern lab](http://patternlab.io) 是布拉德·弗罗斯特依照这个设计系统所建立的一套工具，可以前往Pattern Lab的 [GitHub](https://github.com/bradfrost/patternlab) 来试试Atomic design。 接下来是关于这个设计方法和React.js框架的几篇文章。 - [Atomic Design with React](https://codeburst.io/atomic-design-with-react-e7aea8152957) - [Atomic Components: Managing Dynamic React Components using Atomic Design](https://medium.com/@yejodido/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f) # 设计语言和设计系统 下面来介绍一下设计语言和设计系统。 ## Fluent Design System [**Fluent Design System**](https://fluent.microsoft.com) 中文翻译为流畅设计体系，是微软于2017年开发的设计语言。流畅设计是Microsoft Design Language 2的改版，其中包含为所有面向Windows 10设备和平台设计的软件中的设计和交互的指导原则。 该体系基于五个关键元素：光感、深度、动效、材质和缩放。新的设计语言包括更多对动效、深度及半透明效果的使用。过渡到流畅设计体系是一个长期项目，没有具体的完成目标，但是从创作者更新以来，新设计语言的元素已被融入到个别应用程序中。它将在未来的Windows 10秋季创作者更新中更广泛地使用，但微软也表示，该设计体系不会在秋季创作者更新内完成。 微软于2017年5月11日的Microsoft Build 2017开发者大会上公开了该设计体系。
  • [What’s new and coming for Windows UI: XAML and composition](https://channel9.msdn.com/Events/Build/2017/B8100) ，从概念上讲了一下Fluent Design System的各个部分。
  • [Introducing Fluent Design](https://channel9.msdn.com/Events/Build/2017/B8066) ，介绍了Fluent Design System的各个部分。
    • 还有Build 2018上的一些微软的YouTube分享。 - [Fluent Design: Evolving our Design System : Build 2018](https://www.youtube.com/watch?v=AnqwdPgVXAI) - [Microsoft Build 2018 - Fluent Design System Demo](https://www.youtube.com/watch?v=dMq8CMIE1xU) - [Microsoft Build 2018 - Fluent Design System Evolution](https://www.youtube.com/watch?v=pUuHSuCnDGE) - [Fluent Design System inside of Microsoft: Office : Build 2018](https://www.youtube.com/watch?v=DKvkRfQD8Yg) ## Material Design [**Material Design**](https://material.io) 中文翻译为质感设计，或是材质设计、材料设计。这是由Google开发的设计语言。扩展于 [Google Now](https://en.wikipedia.org/wiki/Google_Now) 的“卡片”设计，Material Design基于网格的布局、响应动画与过渡、填充、深度效果（如光线和阴影）。设计师马蒂亚斯·杜阿尔特（Matías Duarte）解释说：“与真正的纸张不同，我们的数字材质可以智能地扩大和变形。材质具有实体的表面和边缘。接缝和阴影表明组件的含义。”Google指出他们的新设计语言基于纸张和油墨。 Material Design于2014年的Google I/O大会上发布（参看 [Google I/O 2014 - Material witness: How Android material applications work](https://www.youtube.com/watch?v=97SWYiRtF0Y&feature=youtu.be)）。其可借助v7 appcompat库用于Android 2.1及以上版本，几乎支持所有2009年以后制造的Android设备。随后，Material Design扩展到Google的网络和移动产品阵列，提供一致的跨平台和应用程序体验。Google还为第三方开发人员发布了API，开发人员可将质感设计应用到他们的应用程序中。 除了到 [官网](https://material.io) 学习 Material Design，你还可以访问 [Material Design 中文版](http://design.1sters.com/) 来学习。 另外，Wikipedia 上有一张 [Material Design 实现的比较表](https://en.wikipedia.org/wiki/Comparison_of_Material_Design_implementations)，供你参考。 下面是几个可供你使用的Material UI的工程实现。
  • [Material Design Lite](https://www.getmdl.io/) ，这是 Google 官方的框架，简单易用。
  • [Materialize](https://materializecss.com/) ，一组类似于Bootstrap的前端UI框架。
  • [Material-UI](https://material-ui.com/) 是基于Google Material Design的React组件实现。
  • [MUI](https://www.muicss.com/) 是一个轻量级的CSS框架，遵循Google的Material Design设计方针。
    • ## 其它公司 接下来再来推荐其它几家公司的设计语言。
  • [苹果公司的设计指南](https://developer.apple.com/design/)，在这个网站有苹果的各种设备的设计规范和指导，一方面可以让你的App能和苹果的UI融合在一起，另一方面，你也可以从中看到苹果的审美和思维方式。
  • [IBM公司的设计语言](https://www.ibm.com/design/language/) ，我们总觉得IBM公司是一家比较传统的没有新意的公司，但是并不是这样的。IBM公司的这个设计语言的确比较出众。所以，在这里推荐一下。
  • [Salesforce公司的Lightning Design System](https://www.lightningdesignsystem.com/) ，是在Salesforce生态系统中用于创建统一UI的设计模式、组件和指南的集合，是一个企业级的产品。
  • [Facebook Design - What’s on our mind?](http://facebook.design/) ，Facebook的设计师们收集的一系列的文章、视频和资源。很不错哦。
    • ## 动画效果设计 我认为，要了解Web动画效果设计的第一步，最好的地方是 [CodePen](https://codepen.io/)。这个网站不只是让人分享HTML、CSS和JavaScript代码的网站。其中也有很多分享样例都和动画效果有关。这个网站可以让你对动画效果有一些感性认识，当然还有代码供你参考。 接下来，我们要了解动画效果设计的一些方法。基本上来说，动画设计都会受 “[动画的12项基本法则](https://en.wikipedia.org/wiki/12_basic_principles_of_animation) ”的影响，这个方法论源自于迪士尼动画师奥利·约翰斯顿（Ollie Johnston）和弗兰克·托马斯（Frank Thomas）在1981年所出的《The Illusion of Life: Disney Animation》一书。这些法则已被普遍采用，至今仍与制作3D动画法则有关联。这里还有一篇文章 “[Understand the 12 principles of animation](https://www.creativebloq.com/advice/understand-the-12-principles-of-animation)” 是对这个法则的解读和理解。 除此之外，还有几个动画设计指南和相关文章供你参考和学习。
  • [6 Animation Guidelines for UX Design](https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a)。这是Prototypr公司的一个指南，其中主要指出，动画效果不是为了炫配，而是能让你的UI/UX能活起来，自然，不消耗时间，并且是生动故事型的动画效果。其中还推荐了如下几篇很不错的文章。