摘要：前端還有一個(gè)很重要的事就是設(shè)計(jì)。，中文版譯名為認(rèn)知與設(shè)計(jì)理解設(shè)計(jì)準(zhǔn)則。實(shí)驗(yàn)室是布拉德弗羅斯特依照這個(gè)設(shè)計(jì)系統(tǒng)所建立的一套工具，可以前往的來(lái)試試。中文翻譯為流暢設(shè)計(jì)體系，是微軟于年開(kāi)發(fā)的設(shè)計(jì)語(yǔ)言。微軟于年月日的開(kāi)發(fā)者大會(huì)上公開(kāi)了該設(shè)計(jì)體系。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

這個(gè)是我訂閱 陳皓老師在極客上的專(zhuān)欄《左耳聽(tīng)風(fēng)》,我整理出來(lái)是為了自己方便學(xué)習(xí)，同時(shí)也分享給你們一起學(xué)習(xí)，當(dāng)然如果有興趣，可以去訂閱，為了避免廣告嫌疑，我這就不多說(shuō)了！以下第一人稱(chēng)是指陳皓老師。

前端還有一個(gè)很重要的事就是設(shè)計(jì)。作為前端人員，我們有必要了解現(xiàn)在的一些知名且流行的設(shè)計(jì)語(yǔ)言或是一些設(shè)計(jì)規(guī)范或是設(shè)計(jì)方法，學(xué)習(xí)它們的設(shè)計(jì)思想和方法，有助于我們拓寬眼界、與時(shí)俱進(jìn)。我并不覺(jué)得這些內(nèi)容是設(shè)計(jì)師要學(xué)習(xí)的，如果你要成為一個(gè)前端程序員，那么學(xué)習(xí)這些設(shè)計(jì)上的東西可以讓你有更好的成長(zhǎng)空間。

對(duì)于學(xué)習(xí)設(shè)計(jì)的新手來(lái)說(shuō)，推薦看看 7 steps to become a UI/UX designer ，這是一篇很不錯(cuò)的讓新手入門(mén)的文章，非常具有指導(dǎo)性。首先，你得開(kāi)始學(xué)習(xí)設(shè)計(jì)的一些原則和套路，如配色、平衡、排版、一致性等。還有用戶(hù)體驗(yàn)的 4D 步驟——Discover、Define、Develop 和 Delivery。然后，開(kāi)始到一些網(wǎng)站上找靈感。接下來(lái)，是到不同的網(wǎng)站上讀各種文章和資源，開(kāi)始學(xué)習(xí)使用設(shè)計(jì)工具，最后是找人拜師。此外，其中還鏈接了其它一些不錯(cuò)的文章、網(wǎng)站、博客和工具。我認(rèn)為，這篇文章是一篇很不錯(cuò)的設(shè)計(jì)師從入門(mén)到精通的練級(jí)攻略。

雖然有這么一個(gè)速成的教程，但我覺(jué)得還是應(yīng)該系統(tǒng)地學(xué)習(xí)一下，所以有了下面這些推薦。

先推薦幾本書(shū)。

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

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

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

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

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

The Psychology Principles Every UI/UX Designer Needs to Know ，這篇文章講述了 6 大用戶(hù)界面用戶(hù)體驗(yàn)設(shè)計(jì)的心理學(xué)原則。

18 designers predict UI/UX trends for 2018

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

在 2013 年網(wǎng)頁(yè)設(shè)計(jì)師布拉德·弗羅斯特（Brad Frost）從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecules），進(jìn)一步結(jié)合形成生物體（Organisms）。布拉德將這個(gè)概念應(yīng)用在界面設(shè)計(jì)中，我們的界面就是由一些基本的元素組成的。

喬希·杜克（Josh Duck）的"HTML 元素周期表"完美闡述了我們所有的網(wǎng)站、App、企業(yè)內(nèi)部網(wǎng)、hoobadyboops 等是如何由相同的 HTML 元素組成的。通過(guò)在大層面（頁(yè)）和小層面（原子）同時(shí)思考界面，布拉德認(rèn)為，可以利用原子設(shè)計(jì)建立一個(gè)適應(yīng)組件的動(dòng)態(tài)系統(tǒng)。

為什么要玩原子設(shè)計(jì)，我認(rèn)為，這對(duì)程序員來(lái)說(shuō)是非常好理解的，因?yàn)檫@就是代碼模塊化重用化的體現(xiàn)。于是，你就是要像搭積木一樣開(kāi)發(fā)和設(shè)計(jì)網(wǎng)頁(yè)，當(dāng)你把其模塊化組件化了，也更容易規(guī)范整體的風(fēng)格，而且容易維護(hù)……這些都意味著你可以更容易地維護(hù)你的代碼。所以，這個(gè)方法論導(dǎo)致了 Web 組件化的玩法。這是設(shè)計(jì)中非常重要的方法論。

關(guān)于這個(gè)設(shè)計(jì)方法論，你可以閱讀一下下面這幾篇文章。

Atomic Design 原子設(shè)計(jì)┃構(gòu)建科學(xué)規(guī)范的設(shè)計(jì)系統(tǒng)

網(wǎng)頁(yè)設(shè)計(jì)：Atomic Design 簡(jiǎn)介及工作實(shí)例

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

電子書(shū)：Atomic Design by Brad Frost 是布拉德·弗羅斯特寫(xiě)的一本書(shū)。

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

實(shí)驗(yàn)室：Pattern lab 是布拉德·弗羅斯特依照這個(gè)設(shè)計(jì)系統(tǒng)所建立的一套工具，可以前往 Pattern Lab 的 GitHub 來(lái)試試 Atomic design。

接下來(lái)是關(guān)于這個(gè)設(shè)計(jì)方法和 React.js 框架的幾篇文章。

Atomic Design with React

Atomic Components: Managing Dynamic React Components using Atomic Design

下面來(lái)介紹一下設(shè)計(jì)語(yǔ)言和設(shè)計(jì)系統(tǒng)。

Fluent Design System

Fluent Design System 中文翻譯為流暢設(shè)計(jì)體系，是微軟于 2017 年開(kāi)發(fā)的設(shè)計(jì)語(yǔ)言。流暢設(shè)計(jì)是 Microsoft Design Language 2 的改版，其中包含為所有面向 Windows 10 設(shè)備和平臺(tái)設(shè)計(jì)的軟件中的設(shè)計(jì)和交互的指導(dǎo)原則。

該體系基于五個(gè)關(guān)鍵元素：光感、深度、動(dòng)效、材質(zhì)和縮放。新的設(shè)計(jì)語(yǔ)言包括更多對(duì)動(dòng)效、深度及半透明效果的使用。過(guò)渡到流暢設(shè)計(jì)體系是一個(gè)長(zhǎng)期項(xiàng)目，沒(méi)有具體的完成目標(biāo)，但是從創(chuàng)作者更新以來(lái)，新設(shè)計(jì)語(yǔ)言的元素已被融入到個(gè)別應(yīng)用程序中。它將在未來(lái)的 Windows 10 秋季創(chuàng)作者更新中更廣泛地使用，但微軟也表示，該設(shè)計(jì)體系不會(huì)在秋季創(chuàng)作者更新內(nèi)完成。

微軟于 2017 年 5 月 11 日的 Microsoft Build 2017 開(kāi)發(fā)者大會(huì)上公開(kāi)了該設(shè)計(jì)體系。

What’s new and coming for Windows UI: XAML and composition ，從概念上講了一下 Fluent Design System 的各個(gè)部分。

Introducing Fluent Design ，介紹了 Fluent Design System 的各個(gè)部分。

還有 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 中文翻譯為質(zhì)感設(shè)計(jì)，或是材質(zhì)設(shè)計(jì)、材料設(shè)計(jì)。這是由 Google 開(kāi)發(fā)的設(shè)計(jì)語(yǔ)言。擴(kuò)展于 Google Now 的"卡片"設(shè)計(jì)，Material Design 基于網(wǎng)格的布局、響應(yīng)動(dòng)畫(huà)與過(guò)渡、填充、深度效果（如光線(xiàn)和陰影）。設(shè)計(jì)師馬蒂亞斯·杜阿爾特（Matías Duarte）解釋說(shuō)："與真正的紙張不同，我們的數(shù)字材質(zhì)可以智能地?cái)U(kuò)大和變形。材質(zhì)具有實(shí)體的表面和邊緣。接縫和陰影表明組件的含義。"Google 指出他們的新設(shè)計(jì)語(yǔ)言基于紙張和油墨。

Material Design 于 2014 年的 Google I/O 大會(huì)上發(fā)布（參看 Google I/O 2014 - Material witness: How Android material applications work）。其可借助 v7 appcompat 庫(kù)用于 Android 2.1 及以上版本，幾乎支持所有 2009 年以后制造的 Android 設(shè)備。隨后，Material Design 擴(kuò)展到 Google 的網(wǎng)絡(luò)和移動(dòng)產(chǎn)品陣列，提供一致的跨平臺(tái)和應(yīng)用程序體驗(yàn)。Google 還為第三方開(kāi)發(fā)人員發(fā)布了 API，開(kāi)發(fā)人員可將質(zhì)感設(shè)計(jì)應(yīng)用到他們的應(yīng)用程序中。

除了到 官網(wǎng) 學(xué)習(xí) Material Design，你還可以訪(fǎng)問(wèn) Material Design 中文版 來(lái)學(xué)習(xí)。

另外，Wikipedia 上有一張 Material Design 實(shí)現(xiàn)的比較表，供你參考。

下面是幾個(gè)可供你使用的 Material UI 的工程實(shí)現(xiàn)。

Material Design Lite ，這是 Google 官方的框架，簡(jiǎn)單易用。

Materialize ，一組類(lèi)似于 Bootstrap 的前端 UI 框架。

Material-UI 是基于 Google Material Design 的 React 組件實(shí)現(xiàn)。

MUI 是一個(gè)輕量級(jí)的 CSS 框架，遵循 Google 的 Material Design 設(shè)計(jì)方針。

接下來(lái)再來(lái)推薦其它幾家公司的設(shè)計(jì)語(yǔ)言。

蘋(píng)果公司的設(shè)計(jì)指南，在這個(gè)網(wǎng)站有蘋(píng)果的各種設(shè)備的設(shè)計(jì)規(guī)范和指導(dǎo)，一方面可以讓你的 App 能和蘋(píng)果的 UI 融合在一起，另一方面，你也可以從中看到蘋(píng)果的審美和思維方式。

IBM 公司的設(shè)計(jì)語(yǔ)言 ，我們總覺(jué)得 IBM 公司是一家比較傳統(tǒng)的沒(méi)有新意的公司，但是并不是這樣的。IBM 公司的這個(gè)設(shè)計(jì)語(yǔ)言的確比較出眾。所以，在這里推薦一下。

Salesforce 公司的 Lightning Design System ，是在 Salesforce 生態(tài)系統(tǒng)中用于創(chuàng)建統(tǒng)一 UI 的設(shè)計(jì)模式、組件和指南的集合，是一個(gè)企業(yè)級(jí)的產(chǎn)品。

Facebook Design - What’s on our mind? ，F(xiàn)acebook 的設(shè)計(jì)師們收集的一系列的文章、視頻和資源。很不錯(cuò)哦。

我認(rèn)為，要了解 Web 動(dòng)畫(huà)效果設(shè)計(jì)的第一步，最好的地方是 CodePen。這個(gè)網(wǎng)站不只是讓人分享 HTML、CSS 和 JavaScript 代碼的網(wǎng)站。其中也有很多分享樣例都和動(dòng)畫(huà)效果有關(guān)。這個(gè)網(wǎng)站可以讓你對(duì)動(dòng)畫(huà)效果有一些感性認(rèn)識(shí)，當(dāng)然還有代碼供你參考。

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

除此之外，還有幾個(gè)動(dòng)畫(huà)設(shè)計(jì)指南和相關(guān)文章供你參考和學(xué)習(xí)。

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

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 ，這篇文章同樣說(shuō)明，任何一個(gè)小動(dòng)畫(huà)都是要講一個(gè)微故事的，而且這些微故事會(huì)和你的品牌和產(chǎn)品理念相融合。動(dòng)畫(huà)會(huì)給人更深的印象，讓人們更容易記住你。這篇文章主要是講品牌動(dòng)畫(huà)。

Animation principles in motion design ，這篇文章有點(diǎn)像設(shè)計(jì)模式，給了一些動(dòng)畫(huà)效果的套路和演示。

Creating Usability with Motion: The UX in Motion Manifesto

Integrating Animation into a Design System

Great UI/UX Animations 是設(shè)計(jì)師丹尼爾（Daniel）收集的一些很不錯(cuò)的動(dòng)畫(huà)，可以給你一些靈感。

Great UI/UX Animations 第一組

Great UI/UX Animations 第二組

下面分享一下 UI/UX 設(shè)計(jì)的相關(guān)資源。文章資源主要有以下這些。

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

Marvel Blog ，Marvel 團(tuán)隊(duì)的博客。

The Next Web ，內(nèi)容主要涵蓋國(guó)際技術(shù)新聞、商業(yè)和文化等多個(gè)方面。

Medium - Design ，Medium 現(xiàn)在已經(jīng)成為一個(gè)好文章的集散地了，這個(gè)地方必去。

Smashing Magazine ，這個(gè)地方是給專(zhuān)業(yè)的 Web 設(shè)計(jì)師和程序員的。不但有設(shè)計(jì)還有 HTML、CSS 和 JavaScript 等各種資源。

Sitepoint ，這個(gè)網(wǎng)站上也有很多不錯(cuò)的給 Web 前端程序員和設(shè)計(jì)師看的文章（當(dāng)然，給程序員看的有點(diǎn)簡(jiǎn)單了，我覺(jué)得更像是讓設(shè)計(jì)師來(lái)學(xué)寫(xiě)程序的網(wǎng)站）。

接下來(lái)推薦一些優(yōu)秀設(shè)計(jì)的聚集地。

Awwwards ，這個(gè)網(wǎng)站給一些設(shè)計(jì)得不錯(cuò)網(wǎng)站的評(píng)分，在這里你可以看到很多設(shè)計(jì)不錯(cuò)的網(wǎng)站。

One Page Love ，就是一個(gè)單頁(yè)的網(wǎng)頁(yè)設(shè)計(jì)的收集。

Inspired UI ，移動(dòng) App 的設(shè)計(jì)模式。

Behance，這個(gè)地言有很不錯(cuò)的很有創(chuàng)意的作品。

Dribbble ，這應(yīng)該是設(shè)計(jì)師都知道也都愛(ài)去的網(wǎng)站。除了你可以看到一些很不錯(cuò)的作品外，你還可以在這里看到很多不錯(cuò)的設(shè)計(jì)師。

UI Movement ，也是個(gè)設(shè)計(jì)的收集網(wǎng)站，上面有很多很不錯(cuò)的 UI 設(shè)計(jì)，大量的動(dòng)畫(huà)。雖說(shuō)會(huì)像抖音一樣，讓你不知不覺(jué)就看了好幾小時(shí)，但是它比抖音讓你的收獲大多了。

總結(jié)一下今天的內(nèi)容。我并不認(rèn)為 UI/UX 設(shè)計(jì)這些內(nèi)容只是設(shè)計(jì)師要學(xué)習(xí)的，如果你要成為一個(gè)前端程序員，那么學(xué)習(xí)這些設(shè)計(jì)上的東西可以讓你有更好的成長(zhǎng)空間。首先，我推薦了一些圖書(shū)和文章，讓你更好地了解經(jīng)典的設(shè)計(jì)原則和指導(dǎo)思想。

然后介紹了原子設(shè)計(jì)，以及深入學(xué)習(xí)和理解這一設(shè)計(jì)方法論的圖書(shū)、文章和其他相關(guān)資源。最后分享了當(dāng)下主流和知名公司中在用的設(shè)計(jì)語(yǔ)言和設(shè)計(jì)系統(tǒng)，并給出了大量的學(xué)習(xí)資源，推薦了一些優(yōu)秀設(shè)計(jì)的聚集地。相信通過(guò)學(xué)習(xí)這些內(nèi)容，你在 UI/UX 設(shè)計(jì)方面不僅能收獲方法，還能獲得非常多的靈感。

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！