極客時間-左耳聽風-程序員攻略-UI/UX設計

程序員練級攻略：UI/UX設計

學習設計新手， 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， 18 條原則是指導性的思想。
• The Evolution of UI/UX Designers Into Product Designers ，這篇文章是 Adobe 公司的一篇博客，其在回顧整個產品設計的演化過程當中有一些不錯的思考和想法，並提供了一些方法論。

原子設計（Atomic Design）

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

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

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

• 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 設備和平臺設計的軟件中的設計和交互的指導原則。

該體系基於五個關鍵元素：光感、深度、動效、材質和縮放。新的設計語言包括更多對動效、深度及半透明效果的使用。

微軟於 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 設計方針。

其它公司

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

• 蘋果公司的設計指南，在這個網站有蘋果的各類設備的設計規範和指導。
• 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 設計，大量的動畫。