程序員練級攻略（2018）：前端 UI/UX設計

時間 2019-11-09

原文原文鏈接

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

這個是我訂閱陳皓老師在極客上的專欄《左耳聽風》,我整理出來是爲了本身方便學習，同時也分享給大家一塊兒學習，固然若是有興趣，能夠去訂閱，爲了不廣告嫌疑，我這就很少說了！如下第一人稱是指陳皓老師。前端

前端還有一個很重要的事就是設計。做爲前端人員，咱們有必要了解如今的一些知名且流行的設計語言或是一些設計規範或是設計方法，學習它們的設計思想和方法，有助於咱們拓寬眼界、與時俱進。我並不以爲這些內容是設計師要學習的，若是你要成爲一個前端程序員，那麼學習這些設計上的東西可讓你有更好的成長空間。react

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

雖然有這麼一個速成的教程，但我以爲仍是應該系統地學習一下，因此有了下面這些推薦。程序員

圖書和文章推薦

先推薦幾本書。github

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 ，中文版譯名爲《界面設計模式》。這本書開篇即總結了"與人有關"的各種問題，爲讀者提供了界面設計整體思路上的指引，幫助讀者觸類旁通。而後，收集並分析了不少經常使用的界面設計模式，幫助讀者理解在實現級別的各類經常使用解決方案，將它們靈活地運用到本身的設計中。

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

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 公司的一篇博客，其在回顧整個產品設計的演化過程當中有一些不錯的思考和想法，並提供了一些方法論。

原子設計（Atomic Design）

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

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

爲何要玩原子設計，我認爲，這對程序員來講是很是好理解的，由於這就是代碼模塊化重用化的體現。因而，你就是要像搭積木同樣開發和設計網頁，當你把其模塊化組件化了，也更容易規範總體的風格，並且容易維護……這些都意味着你能夠更容易地維護你的代碼。因此，這個方法論致使了 Web 組件化的玩法。這是設計中很是重要的方法論。設計模式

關於這個設計方法論，你能夠閱讀一下下面這幾篇文章。

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

電子書：Atomic Design by Brad Frost 是布拉德·弗羅斯特寫的一本書。
博　客：Atomic Design 是布拉德·弗羅斯特的博客。
實驗室：Pattern lab 是布拉德·弗羅斯特依照這個設計系統所創建的一套工具，能夠前往 Pattern Lab 的 GitHub 來試試 Atomic design。

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

設計語言和設計系統

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

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 分享。

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 能活起來，天然，不消耗時間，而且是生動故事型的動畫效果。其中還推薦了以下幾篇很不錯的文章。
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 第二組

文章資源

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 設計，大量的動畫。雖然說會像抖音同樣，讓你不知不覺就看了好幾小時，可是它比抖音讓你的收穫大多了。