摘要：前端還有一個很重要的事就是設計。，中文版譯名為認知與設計理解設計準則。實驗室是布拉德弗羅斯特依照這個設計系統所建立的一套工具，可以前往的來試試。中文翻譯為流暢設計體系，是微軟于年開發的設計語言。微軟于年月日的開發者大會上公開了該設計體系。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》,我整理出來是為了自己方便學習，同時也分享給你們一起學習，當然如果有興趣，可以去訂閱，為了避免廣告嫌疑，我這就不多說了！以下第一人稱是指陳皓老師。

前端還有一個很重要的事就是設計。作為前端人員，我們有必要了解現在的一些知名且流行的設計語言或是一些設計規范或是設計方法，學習它們的設計思想和方法，有助于我們拓寬眼界、與時俱進。我并不覺得這些內容是設計師要學習的，如果你要成為一個前端程序員，那么學習這些設計上的東西可以讓你有更好的成長空間。

對于學習設計的新手來說，推薦看看 7 steps to become a UI/UX designer ，這是一篇很不錯的讓新手入門的文章，非常具有指導性。首先，你得開始學習設計的一些原則和套路，如配色、平衡、排版、一致性等。還有用戶體驗的 4D 步驟——Discover、Define、Develop 和 Delivery。然后，開始到一些網站上找靈感。接下來，是到不同的網站上讀各種文章和資源，開始學習使用設計工具，最后是找人拜師。此外，其中還鏈接了其它一些不錯的文章、網站、博客和工具。我認為，這篇文章是一篇很不錯的設計師從入門到精通的練級攻略。

雖然有這么一個速成的教程，但我覺得還是應該系統地學習一下，所以有了下面這些推薦。

先推薦幾本書。

Don’t Make Me Think ，這是我看的第一本和設計相關的書。這本書對我的影響也比較深遠。這本書踐行了自己的理論，整本書短小精悍，語言輕松詼諧，書中穿插大量色彩豐富的屏幕截圖、趣味叢生的卡通插圖以及包含大量信息的圖表，使枯燥的設計原理變得平易近人。

Simple and Usable Web,Mobile,and Interaction Design ，中文版譯名為《簡約至上》。本書作者賈爾斯（Giles）有 20 多年交互式設計的探索與實踐。提出了合理刪除、分層組織、適時隱藏和巧妙轉移這四個達成簡約至上的終極策略，講述了為什么應該站在主流用戶一邊，以及如何從他們的真實需求和期望出發，簡化設計，提升易用性。

Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules ，中文版譯名為《認知與設計：理解 UI 設計準則》。這本書語言清晰明了，將設計準則與其核心的認知學和感知科學高度統一起來，使得設計準則更容易在具體環境中得到應用。涵蓋了交互計算機系統設計的方方面面，為交互系統設計提供了支持工程方法。不僅如此，這也是一本人類行為原理的入門書。

Designing Interfaces: Patterns for Effective Interaction Design ，中文版譯名為《界面設計模式》。這本書開篇即總結了"與人有關"的各類問題，為讀者提供了界面設計總體思路上的指引，幫助讀者舉一反三。然后，收集并分析了很多常用的界面設計模式，幫助讀者理解在實現級別的各種常用解決方案，將它們靈活地運用到自己的設計中。

除了上面的這幾本書，還有下面的這幾篇文章也是很不錯的，推薦一讀。

The Psychology Principles Every UI/UX Designer Needs to Know ，這篇文章講述了 6 大用戶界面用戶體驗設計的心理學原則。

18 designers predict UI/UX trends for 2018

The Evolution of UI/UX Designers Into Product Designers ，這篇文章是 Adobe 公司的一篇博客，其在回顧整個產品設計的演化過程中有一些不錯的思考和想法，并提供了一些方法論。

在 2013 年網頁設計師布拉德·弗羅斯特（Brad Frost）從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecules），進一步結合形成生物體（Organisms）。布拉德將這個概念應用在界面設計中，我們的界面就是由一些基本的元素組成的。

喬希·杜克（Josh Duck）的"HTML 元素周期表"完美闡述了我們所有的網站、App、企業內部網、hoobadyboops 等是如何由相同的 HTML 元素組成的。通過在大層面（頁）和小層面（原子）同時思考界面，布拉德認為，可以利用原子設計建立一個適應組件的動態系統。

為什么要玩原子設計，我認為，這對程序員來說是非常好理解的，因為這就是代碼模塊化重用化的體現。于是，你就是要像搭積木一樣開發和設計網頁，當你把其模塊化組件化了，也更容易規范整體的風格，而且容易維護……這些都意味著你可以更容易地維護你的代碼。所以，這個方法論導致了 Web 組件化的玩法。這是設計中非常重要的方法論。

關于這個設計方法論，你可以閱讀一下下面這幾篇文章。

Atomic Design 原子設計┃構建科學規范的設計系統

網頁設計：Atomic Design 簡介及工作實例

但是，真正權威的地方還是布拉德·弗羅斯特的電子書、博客和實驗室，可以從中獲取更多的信息。

電子書：Atomic Design by Brad Frost 是布拉德·弗羅斯特寫的一本書。

博　客：Atomic Design 是布拉德·弗羅斯特的博客。

實驗室：Pattern lab 是布拉德·弗羅斯特依照這個設計系統所建立的一套工具，可以前往 Pattern Lab 的 GitHub 來試試 Atomic design。

接下來是關于這個設計方法和 React.js 框架的幾篇文章。

Atomic Design with React

Atomic Components: Managing Dynamic React Components using Atomic Design

下面來介紹一下設計語言和設計系統。

Fluent Design System

Fluent Design System 中文翻譯為流暢設計體系，是微軟于 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 ，從概念上講了一下 Fluent Design System 的各個部分。

Introducing Fluent Design ，介紹了 Fluent Design System 的各個部分。

還有 Build 2018 上的一些微軟的 YouTube 分享。

Fluent Design: Evolving our Design System : Build 2018

Microsoft Build 2018 - Fluent Design System Demo

Microsoft Build 2018 - Fluent Design System Evolution

Fluent Design System inside of Microsoft: Office : Build 2018

Material Design

Material Design 中文翻譯為質感設計，或是材質設計、材料設計。這是由 Google 開發的設計語言。擴展于 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）。其可借助 v7 appcompat 庫用于 Android 2.1 及以上版本，幾乎支持所有 2009 年以后制造的 Android 設備。隨后，Material Design 擴展到 Google 的網絡和移動產品陣列，提供一致的跨平臺和應用程序體驗。Google 還為第三方開發人員發布了 API，開發人員可將質感設計應用到他們的應用程序中。

除了到 官網 學習 Material Design，你還可以訪問 Material Design 中文版 來學習。

另外，Wikipedia 上有一張 Material Design 實現的比較表，供你參考。

下面是幾個可供你使用的 Material UI 的工程實現。

Material Design Lite ，這是 Google 官方的框架，簡單易用。

Materialize ，一組類似于 Bootstrap 的前端 UI 框架。

Material-UI 是基于 Google Material Design 的 React 組件實現。

MUI 是一個輕量級的 CSS 框架，遵循 Google 的 Material Design 設計方針。

接下來再來推薦其它幾家公司的設計語言。

蘋果公司的設計指南，在這個網站有蘋果的各種設備的設計規范和指導，一方面可以讓你的 App 能和蘋果的 UI 融合在一起，另一方面，你也可以從中看到蘋果的審美和思維方式。

IBM 公司的設計語言 ，我們總覺得 IBM 公司是一家比較傳統的沒有新意的公司，但是并不是這樣的。IBM 公司的這個設計語言的確比較出眾。所以，在這里推薦一下。

Salesforce 公司的 Lightning Design System ，是在 Salesforce 生態系統中用于創建統一 UI 的設計模式、組件和指南的集合，是一個企業級的產品。

Facebook Design - What’s on our mind? ，Facebook 的設計師們收集的一系列的文章、視頻和資源。很不錯哦。

我認為，要了解 Web 動畫效果設計的第一步，最好的地方是 CodePen。這個網站不只是讓人分享 HTML、CSS 和 JavaScript 代碼的網站。其中也有很多分享樣例都和動畫效果有關。這個網站可以讓你對動畫效果有一些感性認識，當然還有代碼供你參考。

接下來，我們要了解動畫效果設計的一些方法。基本上來說，動畫設計都會受 "動畫的 12 項基本法則 " 的影響，這個方法論源自于迪士尼動畫師奧利·約翰斯頓（Ollie Johnston）和弗蘭克·托馬斯（Frank Thomas）在 1981 年所出的《The Illusion of Life: Disney Animation》一書。這些法則已被普遍采用，至今仍與制作 3D 動畫法則有關聯。這里還有一篇文章 “Understand the 12 principles of animation” 是對這個法則的解讀和理解。

除此之外，還有幾個動畫設計指南和相關文章供你參考和學習。

6 Animation Guidelines for UX Design。這是 Prototypr 公司的一個指南，其中主要指出，動畫效果不是為了炫配，而是能讓你的 UI/UX 能活起來，自然，不消耗時間，并且是生動故事型的動畫效果。其中還推薦了如下幾篇很不錯的文章。

Transitional Interfaces

UI Animation and UX: A Not-So-Secret Friendship

Invisible animation

Creating Usability with Motion: The UX in Motion Manifesto

Designing Interface Animation ，這篇文章同樣說明，任何一個小動畫都是要講一個微故事的，而且這些微故事會和你的品牌和產品理念相融合。動畫會給人更深的印象，讓人們更容易記住你。這篇文章主要是講品牌動畫。

Animation principles in motion design ，這篇文章有點像設計模式，給了一些動畫效果的套路和演示。

Creating Usability with Motion: The UX in Motion Manifesto

Integrating Animation into a Design System

Great UI/UX Animations 是設計師丹尼爾（Daniel）收集的一些很不錯的動畫，可以給你一些靈感。

Great UI/UX Animations 第一組

Great UI/UX Animations 第二組

下面分享一下 UI/UX 設計的相關資源。文章資源主要有以下這些。

Web Designer News ，一個文章聚合的網站。除此之外，還有兩個文章聚合網站，你也可以訂閱。一個是Designer News ，另一個是 Reddit Web Design。

Marvel Blog ，Marvel 團隊的博客。

The Next Web ，內容主要涵蓋國際技術新聞、商業和文化等多個方面。

Medium - Design ，Medium 現在已經成為一個好文章的集散地了，這個地方必去。

Smashing Magazine ，這個地方是給專業的 Web 設計師和程序員的。不但有設計還有 HTML、CSS 和 JavaScript 等各種資源。

Sitepoint ，這個網站上也有很多不錯的給 Web 前端程序員和設計師看的文章（當然，給程序員看的有點簡單了，我覺得更像是讓設計師來學寫程序的網站）。

接下來推薦一些優秀設計的聚集地。

Awwwards ，這個網站給一些設計得不錯網站的評分，在這里你可以看到很多設計不錯的網站。

One Page Love ，就是一個單頁的網頁設計的收集。

Inspired UI ，移動 App 的設計模式。

Behance，這個地言有很不錯的很有創意的作品。

Dribbble ，這應該是設計師都知道也都愛去的網站。除了你可以看到一些很不錯的作品外，你還可以在這里看到很多不錯的設計師。

UI Movement ，也是個設計的收集網站，上面有很多很不錯的 UI 設計，大量的動畫。雖說會像抖音一樣，讓你不知不覺就看了好幾小時，但是它比抖音讓你的收獲大多了。

總結一下今天的內容。我并不認為 UI/UX 設計這些內容只是設計師要學習的，如果你要成為一個前端程序員，那么學習這些設計上的東西可以讓你有更好的成長空間。首先，我推薦了一些圖書和文章，讓你更好地了解經典的設計原則和指導思想。

然后介紹了原子設計，以及深入學習和理解這一設計方法論的圖書、文章和其他相關資源。最后分享了當下主流和知名公司中在用的設計語言和設計系統，并給出了大量的學習資源，推薦了一些優秀設計的聚集地。相信通過學習這些內容，你在 UI/UX 設計方面不僅能收獲方法，還能獲得非常多的靈感。

你的點贊是我持續分享好東西的動力，歡迎點贊！