如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為什么要構建 MIZ Design？隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設計上積累了越來越多的債務。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設計師來設計，前端也是由不同的開發來實現，這直接導致了整個 APP 越來越臃腫無序，視覺和交互體驗不一致，且團隊溝通成本高，重復勞動力大，輸出效率低，迭代速度慢。
開發層面
場景：
設計師：涉及到這個組件的頁面都改一下吧。
開發：改不了，每個頁面都是單獨寫的，改起來非常麻煩，耗時間耗資源耗人力。
設計師：為什么同樣的組件要單獨寫？
開發：我怎么知道，這是以前的開發寫的，而且寫的亂七八糟。
設計師：……
那怎么辦？不改也得改呀?？偛荒芤恢绷糁@些大大小小的毛病，不解決問題會越來越嚴重。
代碼混亂，遺留了非常多的開發層面代碼不一致的問題，后期迭代的過程中如果不統一，也會使整個系統失去可控性。
設計師層面
場景 1：
設計師 A：這個頁面是誰做的？源文件有嗎？
設計師 B：不知道哎。以前的設計師做的。去庫里找一下吧。
30 分鐘以后，依然沒有找到源文件。
場景 2：
開會：為什么這個項目的頁面和以前的風格差很多？
設計師 A：現在流行的就是這個風格呀，多好看。
設計師 B：雖然設計每年都有流行趨勢，但還是要和產品品牌風格相結合。
一個項目兩個設計師負責，設計出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風格完全不一致。在 2 個設計師完成設計以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發需要根據不同業務中的不同設計師的「創意」來進行人肉修改。
當我們開始設計新的頁面，功能需求點優化的時候，這個問題變得更加嚴重。同時，因為沒有一個統一的基礎設計規范原則，設計師在設計項目的時候，在設計決策和討論中花費了大量時間，會存在大量的重復勞動。同時由于產品的界面和交互缺乏一致性和可預測性，用戶體驗也受到了影響。整個產品也會在風格定位上不統一，沒有確定產品風格特質的情況下越來越模糊，失去自身品牌該有的特性。
產品迭代，基本上是基于新功能的開發設計迭代，新的功能、新的頁面不斷的增加，對于設計師而言，有設計規范的原則做基礎設計框架，更容易延續 APP 統一的設計風格，不至于被不同的需求，不同的設計趨勢以及蠢蠢欲動的新的設計靈感牽著鼻子走，導致越做越亂，無章可循。
一個 APP 就像自己的孩子一樣，從一個嗷嗷待哺的嬰兒逐漸長大成人。設計系統就好比一個人的生物系統，是整個生物體的基礎。如果對此系統不維護，那么此系統將會隨著時間的增長越來越脆弱以及呈現不可逆的現象。那么如果維護好一個設計系統，骨骼會在成長中呈現規律清晰的生長模式，會隨著業務的生長而生長，可控制、可更新，使生物體健康的發展然后去完成它的使命。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。
最近幾年，「Design System」這個詞非?；?。下面介紹紅遍全球設計界的兩大設計規范網紅。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。
一經發布就紅遍了全球設計界。新穎的設計理念，清晰明確的設計原則，詳細的設計規范，使之成為完美的安卓端標準設計規范。也給設計界的設計師們提供了非常好的參考，很多設計師也根據 Material Design 設計原則延展出更多的創新設計可能性，制作了各家的設計規范。
出了官方的 Sketch 組件庫以后，谷歌團隊還開發了基于此設計規范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會上，Google 設計團隊開發了一款叫做 Material Theme Editor 工具，可以幫助設計師輕松且快速創建符合自身品牌又符合 Material Design 風格的應用。
設計價值觀
設計原則
材質是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質，包含了材質如何接受光的影響以及所形成的光影效果，并且對紙張的質感和墨水的介質重新進行了構想。
大膽，圖形，鮮明：Material Design 基于印刷設計的指導原則，字體、柵格、留白、顏色等元素都以創造層次、意義和焦點為基礎來讓用戶沉浸在設計體驗中。
動效賦予意義：微妙順暢地反饋和過渡性的動作效果，引起用戶的注意力并使之保持持續關注。當元素出現在一個界面中的時候，元素之間的互動重塑了環境。
基礎靈活：Material Design 同樣旨在實現品牌價值的傳遞。結合了基礎的代碼、組件和元素，可表達不同的品牌需求。
跨平臺：Material Design 的 UI 組件庫可在不同的平臺共用，不論在安卓平臺、iOS、Flutter，還是 Web 都可保持一致的組件元素。
iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。
iOS 設計價值觀
iOS 設計原則
Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗，產品功能和用戶行為的有效結合。比如當一款工具類 APP 主要是幫助用戶完成一項任務時，設計師應關注于用戶操作本身的行為路徑，和產品功能相結合來幫助用戶完成目標，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵引導用戶探索的同時也有非常棒的操作體驗。
Consistency 一致性：一個保持了一致性原則的 APP，通過使用標準的控件、熟悉的 icon、標準的文字規范、統一的組件俗語來實現一個擁有標準化范例的系統。這個系統提供的特性和交互行為也符合用戶的心智模型和預期。
Direct Manipulation 直接操作：讓用戶在屏幕上直接對內容進行操作的交互行為，可以鼓勵用戶和系統進行交互并且更易于理解。當用戶翻轉屏幕或者使用手勢直接與屏幕交互時，他們會感知到直接操作的行為，并且能立即得到操作結果。
Feedback 反饋：反饋能夠響應操作，呈現結果，使用戶獲得信息。手機中內置的 iOS 應用程序為用戶的每一個動作提供可感知的反饋。交互元素在點擊時會凸顯被高亮顯示，進度指示器顯示了需要長時間運行的操作進度、動效和聲音，使用戶能夠更清晰地感知交互行為的結果并作出響應。
Metaphors 隱喻：當一個 APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時，不管它是來自于真實世界還是數字世界，用戶都能很快上手。隱喻之所以有效果，是因為用戶和屏幕存在物理上的交互。用戶可以通過移動分層視圖來顯示手機上被遮擋的內容；拽拖并且滑動對象，切換開關，移動滑塊，滾動數值選擇器，用戶甚至可以通過翻轉手勢來翻閱手機上的雜志和文章。
User Control 用戶控制：在 iOS 系統中，用戶是主導者，而不是 APP。APP 可以提供行動建議，給予警告提示，但是不應該替用戶做選擇。優秀的 APP 始終會在用戶主導和用戶不想要出現的結果中保持平衡。一個 APP 應該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預期；對有破壞性的操作可確認；對錯誤操作可取消，即使是在進行中的行為也可中斷。
在 Sketch 工具中可直接下載 iOS 的組件庫使用。
在 2016 年，由工程師和設計師組成的團隊創建了 Airbnb 的設計語言系統 （DLS）的第一個版本，其目標是創建一致的體驗和跨平臺的統一。DLS 包含了一套內部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設計、工程和其他學科的共享詞匯表進行快速迭代。DLS 的結構簡單而連貫，簡化了團隊之間的溝通。并制定了以下幾條原則來指導 DLS 的設計：
ADS 開源庫
Airbnb 設計副總裁 Alex Schleifer 在 IXDC 2017 國際體驗設計大會上分享了這一創新的 React Sketch APP 管理設計系統，這是為 Airbnb 的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢 Sketch 數據和代碼，也可以下載圖標、設計模塊，所有工程師和設計師都可以免費下載。看到這個，我想完美共享庫也許并不是那么的遙遠。
Airbnb 團隊在設計 DLS 過程中，也是通過原子組件的方式來構建整個框架，我覺得他們對于設計系統的理解非常對：「一個統一的設計語言不應該只是一組靜態的規則和原子組件構成，它應該是一個可持續發展的系統?！顾栽跇嫿ê玫讓拥脑O計語言之后，可持續性、可發展性，是維護并讓設計系統產生價值的重點。
隨著商業化的趨勢，越來越多的企業級產品對擁有更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻金服體驗技術部經過大量的項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 Ant Design?；凇复_定」和「自然」的設計價值觀，通過模塊化的解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
設計價值觀
自然，讓人機交互行為更自然。
自然規律運用到設計中，自然界的方方面面都會對用戶行為產生深遠影響，設計者應該從其中汲取靈感，并運用到當下的設計工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。
自然的人機交互核心：節能。既要節省身體運動的體力，更要節省大腦思考的腦力。
那么如何在設計中體現呢？
確定，保持克制、對象設計方法、模塊化。
設計者需要做出更好的設計決策，給予研發團隊一種高確定性、低熵值的研發狀態。同時，不同設計者在充分理解業務訴求后，基于 Ant Design 體系都會有相同且符合當前業務特性的設計產出。
給予用戶確定感，結合 Ant Design 的三個關鍵點，可以總結為邊界和規則 2 個方面：
構建米莊設計系統的目標是什么？
意義
有了規范和控件庫，設計師在接受需求的時候，可以減少設計成本，提高設計效率，尤其是在用于快速迭代產品的階段，通過大量的標準化組件即可實現縮短設計周期的效果，并且設計師可以更專注于深耕體驗和細節，同時能保證高質量的輸出。
構建一個設計系統來支撐產品的所有業務線，解決團隊協作一致性問題，產品的周期性更新問題，解決不同的設計師和工程師規范性輸出 UI 的問題，最終從設計驅動商業的層面上，解決用戶體驗一致性，迭代開發的問題。
時間
APP 進入穩定發展階段，也完成了基礎功能的開發，在業務穩定發展的前提下，構建已有 APP 的整體框架，規范前端開發和設計流程是個好時機。在產品發展到穩定階段、參與的人越來越多時，對整個 APP 的頁面整理是非常有必要的。也為了后續快速發展的業務起到完整系統地支撐能力。
人力
相信幾乎在所有的公司和團隊，規范建立都是非常有價值，也非常耗費資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統。沒有上線落地的視覺規范只是耍流氓。所以項目啟動的時候，團隊分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。
場景
所以在項目開始之前，便需要和整個團隊統一目標意義：視覺規范的建立，除了保障統一的用戶體驗和認知，還能夠通過工程師代碼層面的組件化提高開發、設計效率。整個設計系統的開發，從設計到落地，需要產品、設計和前端的全力支持。
雞生蛋問題
即使我們看了很多設計系統范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當我們還沒有組建一個 UI kits 組件庫的時候是如何來搭建一個頁面的呢？是先有了組件，然后創造了模塊頁面；還是先設計了頁面，然后再來歸納總結出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。
原子理論
在學習其他公司如何搭建設計系統的時候，我們了解到了 Brad Frost 的原子設計理論。他提出了原子設計原則，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年網頁設計師 Brad Frost 從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecures），進一步結合形成了生物體（Organisms）。于是提出了原子設計方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。
原子設計的五個階段
原子（Atoms）：符號，為頁面構成的基本元素。例如顏色、字體，或是一個圖標等。
分子（Molecules）：組件，由原子構成的簡單 UI 組件。例如，一個表單標簽，搜索框和按鈕共同打造了一個搜索表單分子。
組織（Organisms）：模塊，由原子及分子組成的相對復雜的組織，在 UI 頁面中可視為模塊/樣式層級。
模板（Templates）：原型，將以上元素進行排版，顯示設計的底層內容結構，在 UI 設計中對應的是原型圖層級。
頁面（Pages），將實際內容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。
特點：
從 Brad Frost 的原子設計理論得到啟發，將我們 APP 產品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個詳盡的庫幫助我們以一種更合理的方式構建了一個設計系統的底層框架。
這個理論提出來以后就產生了非常大的轟動。并且至此以后 Atomic Design（原子設計）成為了構建 Design System 的核心指導理論。
Sketch工具
Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產品設計的未來?！刮覀兛梢允褂?Sketch Library 功能實現組件庫的創建。而組件庫的底層邏輯就是原子設計理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構建組件和樣式。
Text style：Text Style 用于設置文字規范，在一個系統中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個系統中的字體樣式，可使之便于管理和修改，保持系統的可持續性和可用性。并且可單獨輸出字體樣式系統進行團隊之間，不同項目之間的共享。
Layer Style：可編輯元素的各種樣式，比如用于制作顏色規范，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容?？墒乖乇３忠恢碌膱D層樣式。
symbols：設計系統中的任何元素都使用 symbols 來形成符號，可復用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號進行嵌套組合，可形成符號嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會形成符號嵌套層，作為不同符號組件的分層。同樣的對于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。
Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個組件庫，可通過共享形式，來使它成為團隊的設計工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態。
在確定了原則和工具之后，我們為設計系統項目制定了完整的項目計劃，因為涉及到上線和設計兩大塊，所以項目也是分設計線和落地線，兩條線既有關聯性，又是相對獨立和分離的。組件設計完成以后才可上線落地，因推動落地的過程是需要整個設計開發團隊的，不管是從時間還是人力上的資源協調和配合，所以落地線需要更加靈活。
設計階段 – 設計線
目標結果 – 設計資產
設計階段，我們所產出的設計資產包括設計價值觀，設計指導原則，以及設計模式（解決方案）。
展開實施 – 任務細分
確定了設計資產以后，我們將設計資產進行細分。整理規范的內容并對每個組件進行優先級的確定。整理規范內容的過程也是一個逐漸完善的過程，第一次整理可能并不完善，但是沒有關系，先把基礎框架和內容整理好，后續在設計過程中有遺漏的再進行添加。
內容整理好以后，我們會發現一套規范里內容非常多，所以需要根據項目時間來安排所有內容的優先級和分工。根據我們的設計系統的底層邏輯，所以我們將核心組件建設放在第一階段，比如字體、顏色、icon 等。構建了基礎元件以后再來搭建模塊，最后再根據不同場景來確定樣式。至于分工，最好整個設計團隊的人員都可參與，互相分擔工作量以達到工作效率最大化。
整體內容確定以后，因每個組件的整理有規范可循，所以我們針對每個組件的設計過程也確定了單個組件的設計流程。
過程跟進 – 關鍵節點
在設計過程中，我們也需要對關鍵時間節點的項目整體進程和結果輸出總結。此階段是和上線的項目節點重合的關鍵點，設計輸出的內容會和上線過程有非常多的磨合，一個組件的落地還需要不停的和開發溝通，收集反饋意見，并且進行調整修改，記錄解決問題。
執行復盤 – 結果驗證
在每個組件的設計過程中，我們都會反復完善每個組件的內容，包括設計原則、交互細節以及應用場景等。反復去驗證組件的可行性。并且對階段性完成的設計結果進行復盤和分享，進一步來驗證設計方案的可行性。規范需要不停地優化創新，才能讓它的可持續性特性發揮至最大。
上線階段 – 落地線
沒有上線落地的視覺規范只是耍流氓。
設計師自嗨并無意義。推進的過程，最重要的還是溝通。溝通的內容包括組件輸出的合理性、開發工作量、產品版本迭代需求計劃等。
愿望如此之美好，現實如此之貧瘠。
設計從落地到上線的過程想必每個設計師都有大把心得。在公司中實際的推進是非常難的，因為產品需求永遠都做不完，開發永遠在寫代碼，設計永遠需要將先完成業務需求設計為前提。所以如何將設計規范的內容插進項目中是個最關鍵的點。
存在問題，根據項目的時間安排和產品迭代安排，我們試圖將不同優先級組件的內容分配到不同的產品迭代中。實際卻證明這非常的理想化。在這個過程中我們遇到非常多的問題：
解決方案：
APP 在建立的時候沒有規范性，所以現在想要規范所有的內容就是一個非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。
我們的核心組件在產品迭代中完成上線以后，將剩余的組件規劃至開發的重構版本中進行開發。減少資源的重復使用，以及最大化降低對 APP 的影響。我們衡量了利弊之后，決定此次規范的設計對于樣式的修改減少到最少，保持和線上內容的一致性。很多時候我們設計師對于設計趨勢是很敏感以及非常想要去創新的，但是基于現狀下保持對樣式的克制完成基礎體系的搭建這個核心目的，是最重要的事。
MIZ Design 的設計資產中設計價值觀是貫徹整個產品的迭代發展，是產品持續迭代的指明燈。設計原則是團隊成員建立設計的標準指導規范；設計資源庫貫徹設計師、開發和產品，實現產品迭代。我們也非常愿意分享這個過程，希望對大家建立設計規范整個流程有所幫助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
當你認清自己的價值觀和行為準則后，決策就輕而易舉了。價值觀是指明燈，貫徹整個產品系統。我們根據米莊品牌的特性，以及業務場景的需求來定義 APP 的設計價值觀，指導 MIZ Design 的設計語言的建立。
品牌特性
米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價值觀來驅動業務增長。
業務場景
米莊作為金融工具類產品，功能操作場景不算復雜，強調一致性的用戶體驗和安全規律的操作路徑。這也體現了產品對于不同頁面元素之間的相互關聯性和一致專業性的要求。
用戶調研
結合我們進行的用戶調研報告，米莊產品的核心用戶對我們產品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標，我們對于整個產品的設計需要以產品可操作性、性為第一原則，呈現的視覺層以安全可靠，清晰明確為風格導向。
從以上三個方向，我們概括了設計價值觀核心的三點：
格式塔心理學
心理學的完形法則：相似、相近、封閉、簡單。
MIZ Design 的設計原則參考了格式塔心理學，取人和萬物交流的過程中，大腦最基礎的一些精神反射和行為操作，格式塔心理學的理論主張研究意識和行為，強調經驗和行為的整體性，這也符合了米莊的設計價值觀里關于效率和自然的定義。所以我們參考此心理學來幫助團隊順暢地溝通，減少信息不對稱以及學習成本，作為協作的基礎。
第一性原理
埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結果出發，把事物分解成最基本的組成，看透事物的本質，從源頭解決問題。這和原子設計理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實踐者，他將此原理視為科學界和商界非常古老的一條守則。
奧卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如無必要，勿增實體。
奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速決策和判斷認知行之有效的工具之一?？梢院唵卫斫鉃楸３质挛锏暮唵涡浴Ｔ诟鱾€學科，各個研究領域都有發展。這個原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個穩定的，持續自我生長的系統，發展原則是盡量保持簡約之道。
設計資產層面，我們輸出的內容包含了以下兩大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 說明文檔：
開發層面 – 溝通，減少重復
基于 UI kit 創建的組件庫，幫助他們在最終產品中保持代碼的一致性和復用性。并且設計語言作為一種工具，是整個團隊順暢溝通的最重要的語言。所以我們確保我們的設計語言，是能夠讓開發，產品都懂，并在第一時間執行的。既然是語言，那么每個元素都會有自己的名字。每個組件，甚至每個組件中不同屬性的元素我們也賦予它名字。
無名萬物之始，有名萬物之母。──《道德經》
我們的祖先發明語言文字的過程，其實就是一個給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會有文化偏見和個人信息資產的反應。所以我們需要給設計系統中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產品的特殊語言。
場景：
開發：#000和#00000000分別替換成什么顏色？
設計師：#000，替換成 black-1
開發：那#00000000呢？
設計師：一臉茫然，這 2 個不是一個顏色嗎？
慣性思維，色值在設計師眼中，對應的是一種色彩，而在開發眼中只是一堆數字。將心比心，當你扔給開發一個色值的時候他們只是一個難過的問號；而當你給他們具體的一個顏色的名字，他們能馬上對應到這個名字，那么就是順暢的。
所以當我們給顏色命名以后，溝通就變成了以下這樣：
設計師：#ff5600 換成 orange-2。
開發：好的。修改完成。
設計師：#ff3450 全部替換成 blue-2。
開發：好的，替換完成。
設計師：這次我們品牌升級，orange-2 的色值更改為 #ff5666。
開發：好的。全局修改完成。
雖然修改的過程比較辛苦，但是結果是好的。從此設計師掌握了話語權。當然，開發也很高興。
不單單是色彩，我們對字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產生價值。
設計層面 – 輸出，快樂傳承
設計師們可以更加便捷地創建、分享、定義設計界面的內容。此外，在設計傳承方面，也能讓我們更好地將設計原則傳遞給新人。
場景：
設計師 a：此次版本迭代涉及到優惠券頁面的優惠，這個頁面的字體和顏色有規范嗎？
設計師 b：有的。請參照設計規范。
不同設計師在接到需求開始設計以后會擔心：怕風格有差別，怕頁面不統一。辛苦做好頁面以后發現和別的設計師同時做的差別很大，也不符合產品整體品牌調性，陷入循環改稿中。此時設計規范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點。
同步更新：設計資產的目標用戶，除了團隊中的前端開發，那么最大受益者其實就是設計師們。設計系統的一大優點便是修改設計系統中任何一個原子，整個系統所有這個原子都能感知到。這便是設計系統的可持續性、統一性，也是設計系統的基礎。
△ 組件庫中的任何修改，會同步到所有使用該庫的文檔中
自定義內容：組件中的內容都可自定義進行修改。
解放重復生產力
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer
這句話的道理和我們的設計原則中第一性原理相通，從原理出發，一步步往前推演，直到找出適合該問題的解決方法。這和在構建設計系統的時候是一個道理。學習從元認知能力開始，而組件一個系統，從元件開始。埃隆·馬斯克從組成汽車的發電機開始思考，創辦了特斯拉；從底層元素的創新開始，才會有產品整體性的創新。
最后補充一下結構圖：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Loading動畫，在現在的設計中已經是一個必須要設計的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。
那關于loading動畫相關知識，我覺得對于設計師來說是有必要去了解的，所以我找到了這篇優秀文章，讓大家能夠深入了解loading動畫，透過現象看本質，學以致用。
圖片來源：Domaso
沒有人喜歡等待
在用戶心目中，優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。
舉一個真實的例子：最近我們新發布了一個用戶評價的應用，第一個版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認為這3秒是一個故障。在實際開發中，你可能要面對龜速的網絡，沒有優化的代碼，操作時間長或數據處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會，但絕大多數人會立即退出它。
除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么？是操作錯誤還是在等待服務器的請求？用戶需要等待多長時間才能正常使用這個工具或網站？用戶為什么要等待呢?
讓我們一起深入了解Loading動畫：
1、loading動畫的歷史由來
2、優秀loading動畫所具備的特征
3、細節可以做出精彩
4、簡單處理還是精心制作
loading動畫的歷史由來
對于這種類型的反饋，設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設計師是從什么時候開始考慮加上這種反饋的？
我很驚訝的看到關于Nielsen Norman的一篇文章，提到響應時間和loading動畫是在1993年（參考1985年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋。【Myers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
顯示進度的三個主要優點：向用戶保證系統沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個網站都有loading狀態，用戶可以注意到當頁面內容正在loading時，這些Loading動畫活躍的身影。
在2007年的時候，網站的Loading形式大概是下面這張圖上的樣子：
2007年時的Loading
在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。
到了2010年，隨著CSS3的迅猛發展，出現了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。
在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網頁都做了一些很有創意的loading動畫：
30個創意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設計師們開始不滿足于簡單的進度條和旋轉Loading，到2014年-2016年的時候，變得更加關注這塊的設計。所以，你能發現更多關于loading教程，免費的Loading設計資源，插件和開源項目。
2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設計趨勢和方法已經發生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優秀loading動畫所具備的特征
在一個完美的世界里，loading動畫應該：
盡可能少的顯示給用戶
如果你的工具或網站工作的足夠快，那就是非常完美的。或者至少要使得它們的速度符合用戶的預期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應該是解決內容的loading問題。
給出具體時間
它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募?？更新需要多少分鐘？已經進行到了什么階段？這些體驗上的設計細節都可以給用戶預期并減少焦慮。
宇航員數據loadingby Cream M.
告訴用戶為什么需要等待
一些應用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動畫 by Vinoth
讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的loading動畫
讓等待的過程不那么讓人無聊
可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。
動畫來源：Alex Kunchevsky
減少用戶等待時間的心理感知
這與上面提到的一點非常相關，如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。
蛋糕loading by Pierre Kleinhouse
透傳公司品牌形象
如果用戶在用你的應用或者網站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設計細節：
BCG的車票應用動畫 by Antonin
細節可以做出精彩
雖然有些人可能會認為Loading只是一個很小的UI細節，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環的loading圖和骨架圖。
進度條
當可以明確loading時間時使用，進度條可以通過數字或視覺化的形式來表現。
有數字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創意，需要對你的用戶業務表達更有效：
一個app loading頁 by Nguyen Tran
你也可以找到有趣的進度條和循環動畫結合的loading圖。
Loading動畫by Dragonlady
進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同，進度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子：
Gamil loading和一個創意loading動畫 by Allen Zhang
無限loading動畫
當loading的時間是未知的時候來使用，它可以是默認的旋轉圖，也可以是一些創意動畫，顯示應用正在做一些事情。
計算loading圖標 by Hoang Nguyen
創意性loading動畫一樣可以與業務緊密相關，并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫？
LittlePin Spinner by Daniel Sofinet
無限循環動畫要求用戶在上傳或執行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。
如你所見，如今的loading動畫不僅僅只是一個系統狀態的UI元素。
骨架動畫
骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內容。
這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。
舉個栗子，如果你使用的是網頁設計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數據：
Figma UI
簡單處理還是精心制作
除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念，在目前大多數應用中，你可能能看到還是一個默認的Loading。
有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最?。ㄓ绕涫菍τ趙eb）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。
如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在設計的時候，各種視覺要素以有序的方式排列，設計師需要通過對各部分空間的精妙設置來實現這一點。通常而言，我們的目光總會被最引人注目的部分吸引——無論它是視覺主體還是負空間。視覺主體和負空間，兩者都很重要，尤其當你需要平和地呈現一個和諧、連貫、天衣無縫的設計。那么在一個網頁設計作品中，設計師到底利用空間傳達出怎樣的一個故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。人類的大腦天生就能把規律性的散點連接起來，并對目之所及的事物賦予意義。設計是一個創造性的領域，是形式和空間的相互融合，并隨之創造各種各樣的體驗。無論我們接觸到什么樣的設計作品，我們的大腦都會本能地將作品解構為更簡單的各個組件，這些組件由基本的形狀和不同的形態組成，而這些形狀和形態則與空間息息相關。過往豐富的體驗與經歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識別出這些特定的設計形式。
正空間，或者說顯著的設計主體，構成了設計的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負空間多數情況下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個以正負空間之間有著強對比的經典設計案例。
就像正空間似乎支配著負空間一樣，兩者都被用來平衡地傳達一個和諧、連貫的設計理念。
在平衡的構圖中，設計的正負空間都是相互配合、相互補充的，形成一個無縫、美觀的整體。相反，不平衡的構圖會讓觀眾感到不適，傳達出一個不完整的、扭曲的故事。
網頁設計的好壞很大程度上取決于它的實用性和可用性。如果你的設計技巧很差，那么網頁設計的整體效果和表現都會受到影響。但從另一個角度來看，在「內容為王」的時代，如果空間布局使用不當，內容將對您的網站產生顯著的負面影響。
如果你認為你的開發技能很棒，但你的設計技能可能需要更多的改進，那這篇文章對你就太合適了。在本文中，我們將討論：
我們還將討論一些真實的網頁設計實例，探討每個案例如何體現格式塔原理，以及它對空間的創造性使用。
話不多說，一起開始學習吧。
空間由兩個主要維度組成：正空間和負空間。正空間是可被直接感知到的視覺元素，負空間則為元素以外的留白和間隙。如前所述，正的是物體，負的是物體后面可以通常被忽略的留白區域。一個是焦點，另一個是背景。在前者產生活動和刺激時，后者則保持靜止和模糊。一個是月亮，另一個是環繞著它的暗夜。
在網頁設計中，正負空間相互作用，共同形成構圖，傳達理念。只有當正負空間通過對比來區分，同時又向更大的區域延伸時，才會產生視覺層次（腦補一下陰陽太極圖吧）。
正負空間的交匯之處就是信息的交匯點。負空間拱衛著正空間元素，讓后者更加突出和顯著。
通常而言，正空間在絕大多數時候起主導作用，實際上負空間同樣重要。負空間的優點在于:
設計中的負空間相反并不是負面的。當正負空間比例平衡得當時，兩者在視覺上會顯得非常舒適。而當其中一個占據主導地位，并給人一種「過于擁擠」或「空洞無物」的印象時，混亂才會發生。在這兩種情況下，受眾都無法處理如此復雜的信息，因此，而這樣的空間設計是不符合網頁設計的基本原則和設計動機的。
這是一個網頁模板，它展現了何為「內容錯位」和「空間混亂」:
△ 布局混亂
△ 空間失衡
△ 適當的布局調整
△ 網頁設計中空間的合理運用
有意思的是，當談到空間的概念和布局出現時，質疑聲也隨之而起。
類似的問題只能在理解基本概念后再來作答。黃金經驗法則告訴我們——簡單是最好的策略。
在文章開頭，我曾提到在設計網頁的時候，盡量創建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶?；驈谋砻嫔峡?，網頁設計的重點在于增加網站的視覺吸引力，使用戶操作更為簡便。
我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯系。因此它會將當前的視覺信息與之前的經驗進行比對。為了成為一名的網頁設計師，你必須先了解大腦是如何感知周圍環境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。
偉大的設計師明白心理學在視覺感知中所扮演的強大角色。當某人的目光與你的設計作品相遇時會發生什么？他們對你的文章所傳達的信息有何反應？——勞拉·布什，Autodesk 品牌內容策略師
作為設計師，你必須清楚地了解視覺設計和心理學是如何相互聯系、相互影響的。換句話說，開發以用戶為中心的簡單界面，借助正負空間進行設計主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯系。
格式塔在德語中是「形式」的意思。它更多的是一個概念而不是一個單純的詞匯，它最基本的概念是：
整體大于各個部分的總和?！獛鞝柼亍た挤蚩ǎ兰乱嵝睦韺W家，格式塔心理學的代表人物之一）
當單個部分的集合以某種方式統一時，它們在我們的感知當中就是一組。我們把元素看作一個整體，這一概念或理論基本適用于所有的設計媒介：我們不把文本、顏色和形狀看作單獨的元素，而是把整個網頁看作一個整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們在看海洋時看不到水滴一樣。
格式塔原則描述了當特定的條件出現時，人類大腦是如何感知視覺成分的。它幫助大腦創造視覺圖像。因此，格式塔原理通常會應到下面六個主要類別：
1. 圖像和背景
「圖形」是直觀地、明顯地與背景分離的物體。
目前最經典的例子是圣杯——兩個鏡面對稱輪廓構成了花瓶。當你第一次看到這張照片的時候，你的眼睛會立即被吸引到畫面上看起來最聚焦的視覺主體上，可能是相互對立的面孔，也可能是花瓶。當你的大腦在調整你的焦點時，背景或花瓶被模糊了，在那一刻，你的大腦直覺地在圖像中感知到背景。
過了一會兒，你會注意到背景中的花瓶，并意識到它本來就在那里。盡管圖形和基本原則看起來模棱兩可，設計師常常創造視覺上吸引人的超現實和虛幻藝術，并將之運用于網頁設計。
有時，圖形與背景之間的關系是穩定的，而這種穩固的視覺關系使得兩者之間，產生區別。這種關系有的時候又是不穩定的，這意味著圖形和背景是無法清晰區分的。由于這種關系的模糊性，用戶會很自然地開始困惑。
為了讓大家直觀地感受到圖形和背景之間的關系，讓我們詳細的拿幾個案例來進行討論。這些例子都集中在圖形-背景關系中的三個主要方面：對比度、Box 區塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關系到內容的區分和視覺的縱深。
在下面的第一個例子中，Trellis 使用了一個全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關系明確，該關系清楚地展示出了細節、色彩和尺寸上的差異。
頁面中的文字是位于中央的手寫風格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構成對比的白色文本是吸引用戶注意力的焦點，這使得文本在畫面中是高度可見的。從另一個角度來看，背景圖片是模糊的，所以清晰的文本會非常醒目。這些都表明，這里的文本被優先考慮為圖形或正空間，而模糊的圖像被用作背景或負空間，從而強烈地暗示了圖形和背景之間的關系。
下一個案例是下圖方框里的內容。 Ocean Health Index 巧妙地利用了框內區域的內容將圖片與背景分離開來。這是你在瀏覽他們的網站時看到的：
當你第一次瀏覽這個頁面時，哪個部分會吸引你的注意力？你會發現，它的主要文本為白色和藍色背景構成對比，而更加醒目的是是兩個與文字對比鮮明的 Box 區塊。前者借助了深色背景和文本色彩上的差異，構造對比度。而 Box 區塊本身的色彩和背景色構成對比的同時，還和更靠前的文本構成色彩對比。
背景使用了微妙的色調，使數字得以鮮明地展現，并突出細節。方框的運用使它們在頁面上清晰可見。
一些網站還通過添加陰影來表現物與背景的關系，產生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com：
Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來。背景之上的元素都是「正空間」，圖中的物體呈現在背景的映襯下，有一種被置于「頂部」的錯覺。而陰影并沒有直接用在圖片和文本上，而是應用在圖片的內部，這讓我們注意到在主要圖像內部還有另一層視覺元素，這意味著里面還有一層圖片-背景關系——這是一個非常智慧的設計。
2. 接近性原理
接近性是指頁面中元素之間的接近程度。網頁中的不同元素可以組合在一起，不同的接近程度會帶來不同的關聯屬性。除了視覺特征上的接近性之外，這些元素與其他頁面元素之間的距離接近度也會自動地在觀眾的腦海中產生關聯感。
從圖像到文本、導航欄到網頁表單，這種接近性原則在網頁設計中適用范圍非常廣。將類似的內容組合在一起時，它將在元素之間創建關聯，為觀者提供更好的視覺體驗。
以下是 Mashable 網站導航顯示的運用接近度的案例：
在上方的截圖中，我們可以清楚地看到如何將相同類別的元素放在一起，以顯示它們與主菜單的關系。由于顏色和文本大小的選擇，使觀者的目光自動被吸引到主標題下的子欄目上。
除了導航欄外，基于網格的內容也符合黃金比例的接近性。亞馬遜的產品列表就是最好的例子：
這個案例體現的是接近性還是相似性還有待討論。如你所見，具備視覺接近性的同類產品使用狹窄的留白進行分組和分隔。這種接近性會指示用戶在類似的產品列表中，對其目標產品基于購買偏好進行排序。此外，封閉性原則也在類似項目的清單中發揮了作用。
現在，我們來仔細看看 Basecamp 的網頁表單設計，它在網頁設計中顯示了另一種接近性的理想情況：
可以看到上圖中的表單是被劃分為兩個主要部分的：個人信息和 ID 生成兩個部分。第一部分被暗示為最重要的字段，第二部分則是一個次要的需求。這兩個部分的標題都因顏色和字體大小的不同而產生區別。在這個網頁表單中，接近度是一個重要指標，它將網頁中呈現的信息按優先級排列。
3. 對稱和秩序
對稱是指兩個元素呈現出鏡像關系。它可以被看作是把一個物體一分為二的平衡。真實的對稱圖形包括等邊三角形、圓形和正方形等幾何圖像。
人類的大腦會本能地渴望在面孔中找尋「平衡」和「對稱」，這在美學上是令人愉悅的。大腦也傾向于在其他物體中找到對稱，因為對稱創造和諧，讓觀者在觀看圖像時感到舒適。
下面是 HvD Fonts 在網頁設計中體現對稱性的一個很好的案例：
這個頁面不僅顯示了典型的圖形-背景關系，而且強調了對稱性原則的運用。頁面被分成四等份，字體大小和顏色相似。四個部分中的每個部分的背景都具有相同的主題色和灰度效果。你也可以注意到負空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。
對稱性原則還可以衍生出了另一個概念：在網頁設計中，不對稱會使觀感不佳，必須謹慎使用。許多網站使用不對稱作為平衡間距的元素——非常規的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營銷理念是不對稱，Xplode 以獨特的美觀悅目的方式引發不對稱。
這個網頁利用視覺錯覺和不對稱，抓住了觀者的眼球。作為正空間的物體被放置在一個不對稱的布局之下，在負空間中創造了強烈的視覺吸引力。色彩是兩個空間和諧的主要因素，并為觀者創造了一種自然的聯系。左邊的圖形也有很強的平衡性，而右邊的則是帶來更強的視覺吸引力。你覺得這個設計如何呢？
4. 相似性原理
相似性與接近性原理密切相關的原因，是相似分組對象之間共享屬性的質量。無論是顏色、形狀、形態、大小、方向或任何其他屬性，當這些屬性中的一個或多個在鄰近對象中共享時，相似性將占上風。
即使正空間的元素看起來沒有明顯的聯系，由于相似性原理，它們也會與負空間元素區分開。
看看這些 UrbanDecay 的商品列表：
雖然上面的商品各不相同，但在位置、色彩、產品布局、表現方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產品中獨樹一幟。這顯然是一種營銷策略，目的是在不損害頁面整體對稱和美觀的情況下吸引注意力。這里要考慮的另一點是，尺寸上的相似性使其他圖像與相似的產品類別區分開來。
除了產品展示之外，正空間可以與相似度結合使用，也可以與負空間結合使用。
讓我們來看看 influenster 的著陸頁：
上面例子中對齊的邊框也運用了相似性原理。雖然每個正空間元素是不同的，但是相似的感覺是通過整個頁面中一致的文本字段來傳達的。風格、布局和主題都是相似的，因此帶來了統一的視覺效果。
5. 封閉性原理
你是否曾經遇到過這樣一幅畫面，看上去是閉合的，但實際上是開放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補」不完整物體的空白，并利用我們的視覺感知來使圖形完整化。
正空間和負空間一起構成一個整體。最好的案例就是負空間中隱藏的形狀和形式，這要求對正空間中要傳達的信息進行評估。在封閉空間創造性地使用著正負空間，可以產生有趣但簡單的設計。
下面是 Magu Kambucha 的設計圖：
在這個案例中，可以看到封閉性和圖形-背景關系的平衡。瓶子和后面的粗體文字構成對比，背景則是和兩者都構成對比的柔粉色。封閉性體現在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個「K」和最后一個「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺自動完成的，整個形式開始成形，意義也隨之成形。
下面是 Cult 的截圖：
即使文本沒有寫得很清楚，我們的頭腦可以很容易地讀到 CULT 這個詞。即使單詞不完整，文本的排列和對齊也可以使其易于辨認。
6. 連續性原理
最后，根據一般格式塔原則，連續性遵循模式，即引導實現遵循一致的路徑，建立從一個對象到另一個對象的線性模式。
在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續性的原理比色彩的力量更能引導用戶的視覺感知。當我們借助負空間在視覺元素中畫出路徑，我們的眼睛傾向于優先感知正負空間之間的界限。
腦補出來的這條連續的線條是我們在設計中更應該引入的視覺線索。
讓我們來看看 Crypton Trading 網站中的視覺線索設計：
看到頁面右半部分設計的完美延續了嗎？不管背景的明暗色調如何變化，圖案在頁面上的變化都非常顯著。當你向下滾動時，你會看到圖案和顏色是如何以連續和無縫的運動變化的。在這里，色調的變化是可以忽略的，我們所看到的是一個連續的線和點的模式。
另一個很好的例子是 OscilloScope 網站：
該網站借用連續性法則，將網站用戶引入到工作室的 360 度視角中，他們可以在導航中選擇所需的子欄目。
影片《Cargo》的著陸頁也使用了連續性法則：滾動式的導航，以線性運動的方式讓文本漂浮在網站上。由于 LOGO 是垂直展現的，所以用戶必須向下滾動才能看到它的全貌。當頁面向下滾動時，靜態 LOGO 開始與并行的文本塊一起浮動。導航引導用戶經歷不同層次的體驗，而不會干擾隱藏在下面的內容。
由于我們的眼睛通常遵循最平滑的路徑，設計師可以使用這樣的方式來創建引導路徑。
在這篇文章中，我們討論了格式塔原則與網站 UI 的正負空間之間的關系。通過一些真實的案例，讓大家清楚地知道如何運用簡單有效的方法來改變設計的觀感。關鍵是使用這些原理來設計的時候，可以達到 1 + 1 > 2 的效果。
人類是根據感知來思考的——主要是基于視覺。根據格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個元素。
正負空間幫助我們區分、回憶、感知并識別理解。在格式塔原理的引導下，我們能夠更好地在網頁設計中利用不同元素來創造吸引人的作品。因為空間對于任何設計師來說都是一件復雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認識到空間在設計中的重要性、有效性，繼而使自己成為網頁設計領域的佼佼者。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
作為交互設計師，天天畫的就是交互稿了。而對于很多新手交互設計師以及想轉行做交互的同學們來說，一定都非常想知道大廠的交互設計師畫出來的交互稿具體是什么樣子的。但和視覺稿不同，交互稿里面體現了太多產品本身的邏輯，難免涉及到一些敏感內容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。
不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。
但我必須重點強調一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據自己的需要自由修改。
第一個是 PPT 型的分頁交互稿，這個樣式最早是從騰訊 CDC 團隊流傳下來的，我在第二家公司的時候就從他們的博客中看到過，當時還用 InDesign 做過一個模板。而我現在所在的團隊用的也是這個，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很簡單，就是文檔標題和作者，頂部有一個通用的文檔標題欄，上面的內容包括：
我在 Sketch 中為這個模板中需要改動的內容都定義了 Symbol，比如這個標題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內容。
2. 修訂記錄
修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內容，以及相關人員，方便后期交接的時候給對應的產品經理、游戲策劃和設計師查看。有時候交互稿更新一次只是修改一小處地方，如果不備注對方就會很難找到，可能以后你自己都會遺忘。
這一塊我也定義了 Symbol 元件，你可以直接復制一行，然后修改里面的內容，「更新內容」的文本支持多行輸入。
3. 目錄
這種分頁型的文檔一定要有目錄，備注好每個模塊對應的頁碼，否則十幾頁看下來都暈了，每次想找到對應的界面還得重新翻一遍。
4. 內容頁面
具體的內容頁面才是交互稿的核心，一般會用小氣泡和箭頭進行標注，然后在右側用對應的數字和它們對應，寫下詳細的交互說明。
結構可以有很多種，比如上面這種豎屏的界面可以是左右結構，如果是橫屏界面還可以是上下結構等等，根據情況自由調整。文字段落的樣式我已經定義好了，直接修改套用就行。
其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數字即可。
5. 導出方式
使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導出成 PDF 文檔。我很喜歡這個格式，與 PPT 相比，PDF 在任何平臺都可以通用，包括手機、Mac，不用特地裝什么軟件都能很好地打開。
另一種是更常見的交互稿形式，這也是我這幾年進騰訊后一直使用的格式。
如果你曾經用過上文介紹的 PPT 型模板，你一定會發現：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個大產品的交互功能介紹，而不適合小功能的頻繁修改。
今天介紹的這第二種，則是更加輕便快捷的類型。
這種長圖型的交互稿，優點很明顯：
來看一張基本樣例：
它的結構分為：
交互稿標題、日期
按照項目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標化改版），可以地規范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內容。
相關負責人
對應的產品經理，交互稿的作者，方便評審時或者交接后找人。
需求背景
簡單介紹為什么要做這次設計，出發點是什么，遇到了什么問題。
主要界面
這次設計中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據這些來進行風格設計。
流程說明
有了主要界面后，我們還可能需要對一些操作流程進行說明，比如怎樣發送一條語音消息，怎樣刪除一條會話等等。
異常狀態
最后還要記得檢查一下，每個界面在沒有內容時的空狀態、斷網時的異常狀態，彈出各種通知的位置等等，千萬不要等到開發同學找你的時候才想起來。
上面所說的，就是一份交互稿的常見內容模塊了。
該模板是專門給 Mac 平臺的 Sketch 用的。
下載后（下載方式見文末），打開你會看到這個界面：
里面的每個模塊我都做了 Symbol 元件，你只要選中就可以在右側更改內容了。
比如下面的文檔基本信息：
我還把可能會用到的各種字體大小、顏色、對齊方式都做成了文字樣式：
選中文字后，在右側下拉框中選擇你要的樣式就好。
交互稿用的都是黑白灰，還有藍色作為標注。
我一直用的這幾種，足夠用。
是不是很心動？別著急，先把這個 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件時，選擇從模板處新建，直接用這個模板開始畫稿。
下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取碼：npq2
備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33歲，騰訊高級交互設計師、騰訊學院認證講師，9 年工作經驗的資深互聯網人，曾任 MIG 桌面安全產品部軒轅設計組組長，目前在騰訊游戲 NEXT Studios 工作室負責《樂高無限》創造型沙盒游戲的用戶體驗設計。
負責過的產品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網游助手等。曾在 OPPO 手機、金蝶軟件等企業工作，有著 PC、Web、移動端等多平臺的豐富設計經驗。
感謝大家的閱讀，末尾做個小廣告，我的新書《交互思維：詳解交互設計師技能樹》馬上就要上市了，這是我自己九年多來做交互設計師的經驗總結，也是市面上第一本詳細介紹交互設計師所應該掌握的職業技能的書，適合所有希望了解交互、學習交互的設計師和產品經理。同時書中也有我進騰訊的成長故事，以及一些個人工作和學習方法的分享，絕對物超所值 → https://item.jd.com/12576242.html
這是我所總結的「交互設計師技能樹」。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天分享一款運維相關的B端產品，主要闡述自身的設計思路及產品的優化過程。B端產品功能聚焦、講究效能，對產品鏈路有著高流暢度與率的訴求。設計師在做B端產品的的時候要有全鏈路和小白用戶視角，以體驗及效率為先，我們需要協調全局一致性，遵循產品鏈路，在視覺上減少對于用戶的負擔和干擾，避免打斷用戶的使用流程，確保流暢、優質的用戶體驗。
在產品優化上，我們在每個版本迭代后，會對用戶進行訪談及收集意見反饋，建議設計師可以制定一套自有的用戶調研方式去了解用戶的想法和自己產品的不足之處，這樣的好處是可以讓用戶幫助你優化產品。
在產品的細節上我們可以深度地去挖掘和嘗試更好更優的設計方式，對設計師來說打磨和優化每一個細節正是B端產品的魅力所在。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
互聯網讓全世界都無線互聯，大家可以無視距離隨時瀏覽世界另外一頭的設計師所上傳的設計作品。無論是 Dribbble、Behance、Pinterest 還是國內的各大社交媒體，想瀏覽別人作品獲取靈感，幾乎是0成本的事情。那么這樣做對于做設計、激發靈感進行創造，真的有好處嗎？它所引發的抄襲的問題，其實是最現實可見的，對此，昨天所發布的文章《如何界定借鑒和抄襲？看這7位設計大咖怎么說！》里，7位來自世界各地的設計師，已經對此發表了看法，而今天的文章里，99U 邀請了三位頂尖的創意人，闡述他們如何看待這種設計師中的「時代病」。不斷上網瀏覽別人的作品這種「靈感時代病」對于做設計激發創意而言，到底有哪些利弊？在的設計辯論中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 對無休止的靈感素材的視覺進行了權衡分析。
過于關注在線設計靈感類素材，會讓設計思路趨于千篇一律，扼殺創意。這就是為什么我們必須明智地管理我們的個人信息流?！瀹嫀?nbsp;Nadine Kolodziey
我們每時每刻都在上網，這意味著我們將會不斷地接觸到各種各樣的視覺刺激。
如果你總是在公交車上或休息時關注別人的設計作品，那么你就會不自覺地把它融入到自己的作品中。很快你就會意識到：「糟了，我剛剛做了一些看起來和其他人完全一樣的東西。」你會發現，你在不斷地復制和重復別人的東西，盡管可能一開始是下意識的，但最終你會成為潮流的一部分。你忽略了你個人獨特的視角，別人的作品開始影響你的判斷和直覺。
而屬于你自己的那部分最獨特的東西，才是最有力道的。
我完全理解為什么人們想成為潮流的一部分?？蛻艨赡芟胍恍┤霑r的東西——在特定的圈子里以特定的方式行事，這樣做是有所幫助的。但最終這種做法所帶來的同質化，對雙方的發展都會有所制約。插畫師在他們的作品中沒有個性，所有的客戶都在購買類似的風格——這意味著他們的品牌缺乏獨特性。
如果你想獲得靈感，看其他的創意作品并不是最好的選擇。
看看其他的設計作品固然重要，這可以讓你緊跟行業發展步伐，但是要適度。如果你想獲得靈感，看其他的創意作品并不是最好的選擇。當我在網上關注其他插畫家的作品時，我個人很難受到啟發。我已經使用 Instagram 兩年半了。起初我總是看其他插畫家的作品，這是我的本職工作，我熱愛插畫。但后來我發現，這阻礙了我的創作潛力。
我開始注意到我的配色方案與其他人的相似。我注意到，看其他的作品降低了自己嘗試新事物所需的勇氣。當我看到另一位插畫家的作品時，我不可能洞悉他的創作潛力。當我在模仿他人的時候，我不可能有屬于自己的獨特創造力。
但是這個問題并非是無解的。解決之道就在于有選擇地關注?？赐碌淖髌泛涂匆话愕膱D片是有區別的。我對線上的靈感素材很感興趣，但是我更多地將這些素材視作為一個個「小貼士」，因此我注重于管理我的社交媒體所關注的賬號。我不再關注 Instagram 上的其他插畫家，而是關注那些在審美上吸引人的內容。例如，我將關注那些收集不同尋常的石頭的人，或者為擺放得精美的和風食物拍照的人。
我特別喜歡「I’m Google」這個賬號，它不是按主題而是按視覺來排列圖片。當我看到這樣的圖片時，尤其是當我開始著手準備新項目的時候，它們會立即在我的腦海中激發出新的概念和全新的思路。這些資源成為我的靈感來源：當我滾動鼠標時，我將看到來自外太空的巖石圖像，它的形狀將啟發我如何安排構圖。
線上靈感素材固然可以鼓勵國際交流和對話，但問題出現在這些圖像在傳播的時候脫離了相關語境?！?a target="_blank" rel="noopener noreferrer" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">Thomas Kronbichler Mut工作室的創始人 創意總監
在 Mut 工作室，我們是當之無愧的互聯網擁簇，我們從不害怕靈感素材過載這種問題。我們是阿爾卑斯山脈中部一個叫做海蒂·蘭德小鎮上的一個小工作室，互聯網不僅為我們提供了來自世界各地令人嘆服的靈感，而且提供了一個展示自己作品的平臺，這在10年前是不可想象的。
正是因為圖片可以在網上廣泛地傳播，我們才能讓歐洲和美國的用戶看到我們的作品。由于有了在線訂閱和社交媒體，平面設計社區現才有了如今繁榮的模樣。當然，這也有負面影響，很多人說如今平面設計在審美上變得太相似了。但積極的一面是，現在有更多的平面設計作品涌現出來。任何地方的人都可以進入這個行業而不再受到地域的限制，平面設計行業變得更具包容性。例如，歐洲各地的小鎮上都會有人在嘗試更瘋狂的創作，我們能透過網絡在不同的地方跟進觀察，支持彼此。豐富的網絡靈感圖片的流通，最終有利于平面設計作為一種藝術形式而廣泛存在。
我并不是受到某張特定的圖片啟發，而是在聽設計師講述設計思路的過程中獲益良多。
問題是對此互聯網并沒有過多關注。一些博客和自媒體上并沒有關于圖片來源的解釋。為朋友設計的項目和為大公司做的項目都在同一個空間中流通，這很有趣，但同時也弱化了應有的差異化和環境。
作品背后的故事，以及設計過程中各種問題的解決過程，才是真正重要的內容。我并不會受到某張特定圖片的啟發，而是在聽設計師講述設計思路的過程中獲益良多。了解設計師的獨特理念，則更有可能啟發我，我對設計師處理客戶關系的部分也很感興趣。當然，這一切是不能用一張簡單的圖像來進行概括的。
我已經不再瀏覽 Tumblr 和 Pinterest，因為我最感興趣的點，是了解一個問題是如何解決的。最終，我在設計師會議上發言的視頻實錄中獲得了最多的靈感。聽設計師們講述作品誕生的過程是最令人振奮的。我從一個人如何構建一個項目，以及如何實現它的過程中學到了很多。我喜歡聽他們談論客戶關系，講述他們遇到的困難以及如何克服它們。確切地說，更能鼓舞人心的是設計態度和思維方式。
在阿爾卑斯山的工作室中足不出戶，我就可以看 Michael 所有的視頻。
例如，就在上周，我狂看了所有 Michael Bierut 在線演講的視頻。我喜歡他展示作品的方式，喜歡他大方地和別人分享成果，我欽佩的是他的工作態度。在阿爾卑斯山的工作室中足不出戶，我就可以看遍邁克爾所有的演講視頻，這簡直太棒了。
對正在發生的事情有所知覺是非常重要的，而上網獲取靈感會簡化這個過程。——Polina Joffe，藝術總監和平面設計師
如果你知道別人在做什么，你可以選擇參與其中，也可以選擇拒絕。而形成自己的觀點并做出明智決策的前提是你足夠了解。
我一直在關注其他人在網上會做什么，我也會在博客和社交媒體上上傳一些實用的干貨。當涉及到具體的項目時，我會做具體的項目研究。我們會從互聯網上獲得大量的靈感，這使得研究階段變得非常簡單和。我經常會想起設計師們以前在社交媒體上使用過的概念和想法，然后我會把這些想法和我自己的想法進行重新轉化，組合并且更新，這樣它們就可以運用在我的設計大綱中了。
瀏覽在線靈感素材，然后它們會形成屬于我自己的一個巨大的視覺詞典，里面有我腦海中所有的概念和方法，每當我開始一項新的任務時，我都可以沉浸其中。
我們經常談論來自內心的創造力，但我不確信我是否真的要相信這一點。萬物皆有源頭。
我最近為泰特倫敦美術館的教育團隊做了一個項目。這個項目是針對年輕人的。首先，如果你的目標受眾是年輕人，了解年輕人都在做什么是很重要的事情了，因為這些信息很有參考價值。你需要運用觀眾能夠理解的視覺語言。在項目的研究階段，我看了其他設計師是如何處理和學習這些屬于年輕人的理念的。最初我想用筆記本和活頁夾做點什么。然后我想起了我在網上看到的那些用活頁夾或記事本紙做的項目，然后我回去重新又看了一遍，看了其他人如何處理類似的主題，由此激發了我的新想法。
我們經常談論來自內心的創造力，但我不確信我是否真的要相信這一點。萬物皆有源頭。我認為創造力通常是學習前人如何混搭各種想法，然后自己進行特定的調整組合，二次創造。
誠然，視覺交流的發展是一部復制、更新、轉移的歷史。但重復別人已經做了太多遍的東西，并使用類似的元素來直接竊取它們是有危險的。當你在做研究獲取靈感時，你必須通過多種方式參考海量的資源。如果我們能妥善地使用現有的大量圖像，就能鼓勵創新，跟上時代發展的步伐。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
質感是什么？如何讓畫面擁有更高端的質感？本文由質感的原理出發，深入分析質感表現所需要的要素，并通過實例來講解如何在作品中表現高端質感。很多同學在設計完成后，總是會發現頁面很單薄，導致整體看起來很粗糙、不耐看。究其原因，大多數是因為頁面缺乏質感。
質感，對于設計作品來說，是一個非常重要的視覺元素。它能夠提升作品的層次，讓整個作品更高端、更有品質。
質感，基本釋義為所表現的物體呈現出的物質真實感和細膩的品質感。這是一種視覺的綜合感受，會觸動你的某種本能的綜合感官，讓你感覺非常舒服、非常爽。
我找了幾張比較富有質感的圖片，大家可以感受一下這種感覺。
觀察完這些圖片后，你發現有什么共同點了嗎？我們可以試著來分析一下。
首先，物體本身的型是好看舒服的，并且細節足夠精致。
其次，在光的影響下，物體的表面呈現出細膩的光澤變化，以及通透而舒服的陰影，展現了豐富的層級關系。正是光的作用，讓這些視覺元素得以表達，讓我們沒有觸摸便能感知到這種質感。
我們再來看一些優秀的擬物作品。大家對照一下，是否都遵循相同的要素。
觀察這些優秀的擬物作品，為什么會覺得有質感呢？首先圖標很精致，它的形具有一定的美感。但是這不足以讓它富有質感，關鍵是它也符合了上面所說的幾個質感要素。
最后，我們可以總結一下，質感產生的要素：
所以除了作品本身足夠精美以外，整個作品的光感需要和諧統一。每個元素表現的色彩變化規律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴謹的統一。
這就要求你在繪制所有元素時，需要去假定一個統一的光源，這樣才能讓物體擁有更真實的質感。
我們已經了解了質感產生的原理，下面就開始實際案例。每一個步驟我都會講解思考的過程和原因，方便大家理解。
1. 整體背景和主體框架繪制
建立畫布（1200 x 900）。用矩形工具繪制背景和主體框架（1100 x 700），圖層樣式為漸變疊加，光線方向統一。
漸變是為了模擬背景的質感和在光線下的變化，兩層光線方向需要統一。背景顏色稍淺且飽和度低，符合遠近的視覺規律。
2. 繪制投影和主體背景
復制矩形作為投影層，顏色調整為黑色，轉為智能對象后，加入高斯模糊效果。調整矩形圖層的模糊度和透明度，移到適當位置。具體參數對照圖中。投影的位置根據假定光源位置而定，使其符合視覺原理（詳見光線分析圖）。
繪制主體深色背景（1070 x 670），添加漸變疊加模式，漸變方向與前面保持一致。漸變的顏色對于質感非常重要，恰當且高級的漸變色，能夠在本質上提升畫面質感。而漸變方向則需要根據假定光源進行判定。
為什么要這么繪制漸變與投影的位置呢？我繪制了一張光線分析圖，大家可以從圖中看出假定光源的位置，以此來確定漸變的方向以及投影的位置。
只有整體光感的統一，整個畫面才能表現出強烈的質感。大家在繪制這一步時，需要用心體會假定光感的這個過程。
3. 將人物融入背景，提升發絲層次和質感
放入人物圖片，圖層模式改為正片疊底。調整圖層透明度，添加蒙版使人物下半部分漸隱，與背景融合。
復制人物層，取消圖層模式和透明度。用選擇顏色命令提取發絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調整透明度使其融合進人物。
為什么要做這一步呢？單純的人物在畫面中顯得太平了，所以需要豐富細節、增加層次。
4. 主體字體和投影繪制
輸入主體文字，圖層模式調整為漸變疊加，根據光源調整顏色漸變。案例中的英文字體為「Monotype Corsiva Regular」。這一步需要反復的嘗試，大家可以換一些字體嘗試一下。
復制一層作為投影，文本顏色改為黑色，圖層樣式設置為正片疊底，轉智能對象后模糊對象，調整圖層的透明度和大小，放在字體后面。字體的立體感依靠的仍然是統一的光源，需要想象字體在假定光源下的陰影關系。
投影能夠模擬真實感，需要若有若無的感覺，讓文字懸浮在圖層上面，豐富畫面層次。
5. 主體文字細節刻畫
根據字體的結構，用形狀工具繪制出字體的立體關系。每一個形狀圖層繪制后需要兩層蒙版，一層為了限制字體范圍，一層為漸變蒙版。讓充滿立體感的文字懸浮于畫面中央，提升視覺中心的細節品質。
6. 穿插細文與投影繪制
輸入細文，并復制一層作為陰影。不過因為字體較小，距離拉遠后投影肯定是看不清細節的，所以已經模糊的若有若無，但還是需要有的。
表現文字穿插關系，讓「is an」懸浮于「L」上，并留下近距離投影。讓「attitude」穿過「e」字，遮擋部分文字。豐富的穿插和相互投影，進一步增加主體文字的細節和層次，讓畫面細節豐富且更加耐看。
7. 繪制輔助圖形，增強畫面流動感
為了豐富畫面細節，增強畫面流動感，可以適當加一些飄零的輔助元素。
繪制時需要注意的是，你需要明確整體視覺中心與運動的方向。輔助圖形沿著整體畫面，水平中心向右運動，你可以想象圖形散開后的畫面，并反復調整元素的合理位置。
如果沒有一定的規律，所有圖形就不像一個整體，就會看起來很亂。大家可以根據這點來判斷輔助元素是否需要進一步調整。
8. 收尾工作，大功告成
最后，根據頁面需要，搭配上合適的元素，讓畫面更完整。
需要注意的一個細節是，由于所處的位置不同，這些元素在光照中呈現的顏色也會出現深淺變化，所以左邊的元素較淺，而右邊的元素會深一些。
怎么樣，是不是看起來并不難？
希望大家可以抽空認真地跟著教程去嘗試一遍。只要你能夠理解每個步驟的目的，耐心地繪制每一個細節，相信你也能夠做出這種非常高端的質感。
如果你能在制作時，用心思考和體會整個過程。就能在以后的作品中舉一反三，讓這個技能成為你自己的技能了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
篩選是資源聚合類APP中不可缺少的功能，可幫用戶快速、精準地找到需要內容信息，根據資源分類形式的不同有多種篩選類型，并且不同的篩選類型還可以進行自由組合，讓復雜的內容信息更容易被篩選出來。
1. 橫向tab式篩選
2. 標簽篩選
3. 下拉篩選
4. 底部篩選
5. 抽屜式篩選
這是最常見的篩選樣式，屬于一級篩選。通常出現在導航欄或者是導航欄目的下方，根據分類層級的多少有4種展現形式。
一個層級
分類2~5個：所有類目都可以直接在tab欄目上展示出來，用戶可快速地在各個分類之間進行切換；
分類大于5個：所有類目以相同的間距進行橫向排布，引入橫滑操作，方便用戶瀏覽被隱藏的分類信息；有些產品也會在欄目右側增加下拉操作，點擊后下拉展示所有的分類，用戶可對所有分類進行直觀的瀏覽；
兩個層級分類
Tab 欄目上只展示推薦分類或者用戶自己選擇的分類
當內容分類有兩個層級且分類比較多的時候，產品會根據用戶的喜好推薦幾種分類在tab上進行展示；右側有篩選操作，點擊后在一個頁面里展示所有的分類。用戶可以在這個頁面自主選擇增減展示在tab上的分類，并且可以調整展示的順序。
交互細節
用戶在不同的類目間進行切換的時候，篩選內容在當前頁面刷新展示；
不同的tab分類可以通過橫滑進行切換；
位于內容信息的上方，對下方的列表內容進行控制；
當觸發篩選條件時，篩選欄目直接定位到導航欄下方。
是一種輔助篩選樣式，通常位于某一分類標題下方，或者跟tab篩選和下拉篩選搭配使用，有4種表現形式
① 內容分類標簽，充當內容入口。產品設定的內容分類，分類層級較高，且內容之間無交集，當觸發操作的時候，會跳轉頁面進行內容展示。
② 大分類下的子篩選條件，分類層級比較低，當用戶觸發操作時，內容在當前頁面進行展示。
③ 篩選頁面，多維度的篩選條件以列表的形式進行排布，標簽是單一維度下的多種分類，可橫滑操作，這種方式可以幫助用戶快速進行多維度的內容篩選。篩選的結果直接展示在篩選條件下方，最常出現在視頻類APP內做電影、電視篩選；馬蜂窩游記中也使用了這種分類形式。
通常是在一個大的分類下做具體選擇的時候使用，這種篩選樣式可以承載1~3級分類層級。
單一層級
分類以列表的形式展示在頁面中，當分類字段少且分類較多的時候也可以排2~3列進行展示。
兩個層級
有三種排布方式
①直接以欄目標題加列表內容的形式排列。適用于兩個層級分類都較少，或需要用戶進行操作（比較輸入框、滑塊）的場景使用。
②左側為一級分類信息展示區，右側為二級分類信息展示區，可以通過左側的一級分類控制右側的二級分類。適用于兩個層級分類都比較多的情況使用。
③上面為tab式的一級分類，下面是二級分類內容的展示。適用于一級分類較少，二級分類較多的場景使用。
三個層級
一級分類為tab形式展示在最上面，二三級為左右排布形式。
交互細節
放在內容信息的上面，對下方內容進行控制；
當觸發篩選條件時，篩選欄目直接定位在導航欄下方；
有2~3種信息層級的篩選，結果通常取得是不同信息之間的交集，所以需要在篩選中向用戶展示篩選結果數量，幫助用戶判斷是否調整篩選條件 ；如圖左
我們也可以選擇在篩選結果頁展示篩選標簽，用戶可以在當前頁面刪除部分標簽，以查看更多的內容信息；如下圖
備注：下拉篩選通常是多維度組合在一個欄目上展示，通常應用在電商、外賣等內容分類層級比較多，且層級內的分類也比較多的場景里
某一具體內容需要通過多個篩選維度輔助篩選時使用，比如XX-XX的火車票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級的篩選層級，每種層級下的分類目都不能過多，是一種比較簡單輕便的篩選過程
單一篩選層級
① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內容
兩個篩選層級
① 直接以欄目標題加列表內容的形式排列。
② 左側為一級分類信息展示區，右側為二級分類信息展示區
交互細節
處于頁面的底部導航欄的位置
當用戶出發操作的時候，內容從下往上彈出展示。
電商平臺應用較多的分類形式，通常是有兩個分類層級，一、二級的分類類目都比較多，默認情況下，如果分類特別多時可以只展示第一層級信息，用展開收起輔助用戶瀏覽二級類目信息。
交互細節
因為篩選的分類比較多，且通過展開收起會將已選擇的內容遮擋上，所以我們需要以一種方式將已篩選的條件展示出來，方便用戶及時調整。eg.馬蜂窩將所有用戶選擇的內容都放置在最前面，而京東選擇在欄目上方展示出來。
顯示有多少個符合篩選條件的內容，幫助用戶決策篩選條件是否合理。
本文主要講述了5種內容篩選種類：tab篩選、標簽篩選、下拉篩選、底部篩選和抽屜式篩選，選擇何種篩選類型跟內容分類層級和分類數量相關，所以設計之前要先了解產品的分類及數量，有助于選擇更適合用戶使用的篩選樣式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
程峰，滴滴出行高級設計總監，具備互聯網和廣告行業工作雙重經驗，同時擁有用戶體驗思維跟創意思維的他，對互聯網設計和創意設計都有著自己的獨到見解。
如今互聯網設計圈，方法論大行其道，很多設計師為了走捷徑過分依賴方法論，但他一直保持著初心，不驕不躁，他認為：方法可以被總結創造，但設計功夫與思維是更可貴的東西，功夫+思維>方法論。
本次訪談，程峰分享了自己的觀點，包括設計師如何融合創意和用戶體驗，在遭遇靈感枯竭的時候如何理性的找靈感等干貨內容。不僅如此，他還偷偷告訴湖湖他在招聘設計人才時最看重的特質。
△ 程峰，滴滴出行高級設計總監
滴滴出行高級設計總監；曾就職于搜狐、百度、Ogilvyone、Cheil鵬泰等知名互聯網公司及 Digital Agency；資深創意人、設計師，獲獎眾多，對創意、設計有深入的了解。
藍湖：
介紹一下你自己，另外，可以跟大家詳細講講您的工作成長經歷嗎？
程峰：
Hello，大家好，我是程峰。
我畢業后的第一份工作在是一家正版音樂公司擔任 GUI設計師，當時正版音樂行業的市場土壤還沒有形成，所以公司沒能發展下去，一年后，公司成為了行業「先烈」，我也只能選擇離開，那是我第一次接觸 UI設計。
在05年的時候，產品用戶體驗設計在國內開始萌芽，我出于對這個行業的喜歡和好奇，加入搜狐從事體驗設計的工作，07年的時候，加入百度做交互/UI，在這個階段，體驗設計思維方式深深扎根在我的腦海。
后來，因為當時國內的用戶體驗設計還不夠成熟，同時出于對廣告視覺表達有極大的興趣，在互聯網用戶體驗行業呆了幾年之后，我投身廣告行業，將本土、4A Digital、媒介型公司都體驗了一把，我在這個階段形成了創意思維思考方式。
體驗設計思維跟創意思維，對我來說都有非常大的價值，可以讓我更靈活面對不同的任務。這兩種思維方式的區別在于：一個是解決產品體驗問題；一個是解決溝通問題。我認為現在的設計師/創意者需要同時具備這兩種思維。
幾年之后，我又回到了互聯網，來到了滴滴。
總體上我的經歷跟大部分設計師朋友一樣，其中不同的可能是我接觸過的領域比較多，在音樂、游戲、搜索引擎、交通、廣告等行業都有過職業經歷，我個人也比較喜歡跨界。
藍湖：
您同時擁有互聯網公司（甲方）及廣告公司（乙方）的工作背景，甲乙方最大的區別是什么？這種經歷對您在工作中分析、解決問題會有什么幫助和優勢？關于這種交叉背景帶來的優勢，您可否深入和我們分享一下？
程峰：
設計師在一般的互聯網公司工作跟乙方公司工作相比還是有區別的。
在乙方，由于接觸到的行業領域比較多，所以適合產出跨領域的通用方法論，思考方式更加橫向，更重視規律，從而能夠解決不同行業的共性化、模塊化問題，但也有可能因信息不夠及時對等，跟進不夠持續，可能導致對問題的理解片面，無法深入。
而在互聯網公司，設計是服務于單一企業產品和業務的，比較單一，但更專注，會對具體行業的具體問題理解更加深入，具備持續性，更重視對變化的即時響應，但同時也容易陷入視角局限，導致脫離規律，無法全局思考。
對我個人來說，甲乙方的雙重經歷使我更加靈活，看待問題具備了更多視角，更容易保持客觀，可以快速切入找到符合規律的問題本質，同時還可以深入并持續性地解決。
藍湖：
創意&設計是服務于品牌和產品的，您是否可以舉一個實例來詳細講講，好的創意&設計是如何服務于產品和品牌的？
程峰：
以滴滴為例，首先，滴滴CDX 很重視不同專業之間的打通與整合，聚沙成塔、匯點成線，這對于創意&設計產生好的效果尤為重要。
2017年，我們曾經在 CDX 內部構建了一個需求關聯池，把產品、品牌、運營三塊設計需求主動整合，并關聯思考，跨專業團隊協作，輸出了司機端App 5.0升級+司機故事+司機教育等相關項目設計，提升了司機師傅們對平臺的認同感，最終達成了1+1+1>3的效果。
設計師要具備敏銳的全局觀和主動性，任何一個體系組織都不可能做到徹底扁平化，信息只要在流通，多少會出現一定程度的不對等和信息失真，各職能都不可能對所有信息細節徹底掌握到位，大多數時候需要主動接觸，主動思考，以建立項目間的共性聯系，而不是坐等被告知，不能過度理想主義。
△ 滴滴「司機故事」創意設計
△ 滴滴「司機故事」創意設計
△ 滴滴「司機端」5.0配色標準
△ 滴滴「司機端」5.0啟動頁面
△ 滴滴「司機端」5.0導航設計
△ 滴滴「司機端」測試環節
藍湖：
創意和用戶體驗是設計師必須思考深入的兩個點，要更好地融合創意和用戶體驗，設計師應該怎么做？舉一個例子？
程峰：
這兩種思維方式雖然一個偏產品，一個偏傳播，但最終都會回歸到一個點上，也就是以用戶為中心，站在用戶的角度思考，基于這個點衍生出來，站在產品層面叫做痛點，站在創意層面叫做洞察。
舉個通俗的例子：一個人早上很難起床，需要借助外力才能被叫醒，這是痛點；一個人早上很難起床，但如果第二天早上有重要的事情要趕飛機，他按時起床的可能性就會變大，這是洞察。
再舉個例子：小朋友容易把衣服弄臟，媽媽洗起來很累。用某品牌洗衣液，針對小朋友衣服常見污漬進行洗滌，省時省力，這是基于用戶媽媽的痛點想出的產品解決方案。小朋友容易把衣服弄臟，但媽媽總是會在第一時間，像變魔術般把干凈如初的衣服放在他的床邊，這是基于媽媽勤勞，母愛的洞察表達。
痛點與洞察交融在一起，可以使設計師在思考的時候更周全，在進行產品體驗設計思考的時候更具備情感引導性，在進行創意思考的時候不至于忽略功能性。
藍湖：
設計類工作需要創造力的支撐，您是否可以跟我們分享一下，如何科學、系統地提高自己的創造力？
程峰：
不得不說，創造力很大程度上是天生的，可以理解為直覺。但洞察力是創造力的前提，是創造力被激發的基礎，洞察力是可以被后天鍛煉的。我個人并沒有總結過科學系統的方法，但我相信一話：「觀察和經驗和諧地應用到生活上就是智慧?！?
如果一定要說方法的話，就是把自我提升需求轉換為習慣，養成針對性定期閱讀并定期總結的習慣。這里的關鍵詞是：定期、針對性。說得再直白點，就是多看多想并持續下去，任何事情的通用訣竅都是持之以恒。
提到這點，想多說幾句，近幾年看到了太多設計師過度重視方法，期望通過方法論找到解決問題的捷徑，我認為這是浮躁的。對于創意&設計，我個人并不否定方法論的價值，但設計本質上還是功夫活，思維的跨越也是從量變到質變積累的過程。在這個階段，我更想跟大家說的是：功夫+思維>方法論。
尤其是希望很多年輕設計師，多下點苦功，多思考，不要把希望都寄托在方法論上。方法可以被總結創造，但設計功夫與思維是更可貴的東西，是設計師真正的能力壁壘。
藍湖：
在滴滴擁有眾多產品，設計師持續提出服務于產品和品牌的好創意和設計似乎并不容易，在設計師們遇到瓶頸時，您會給他們什么建議？在靈感枯竭的情況下，您有什么快速找靈感的好方法嗎？
程峰：
滴滴雖然產品眾多，但好在都是在解決出行問題，所以很多產品之間是具備共性的。
作為設計師，不該局限于自己的產品，應該橫向多看，找到不同產品之間的關聯，多加以借鑒，找到可持續的復用性的解決方案，這是避免陷入到困境的好辦法。
在靈感枯竭的瓶頸期，設計師應該明確一點：任何靈感都來源于對事物、信息的重新組合，當把不同的元素組合應用在不同場景中的時候，會有意想不到的收獲。
腦洞是不能隨意大開的，我認為，找靈感、開腦洞需要兩個前提：第一是持續關注，日常積累，只有一定量的持續積累才能讓大腦里的數據庫足夠大，才能確?？梢栽谛枰臅r候，第一時間任意調取信息并進行重組。第二是邏輯性的結構化思考，可以確保將信息進行有條理、有效、有價值的組合。
藍湖：
面試的時候，您會比較關注候選人的哪些特質？是否具備優秀的創造力，可以通過面試得出結論嗎？您有什么能在短暫的面試時間內找到更適合的人選的秘訣嗎？
程峰：
坦白講，我認為在面試的有限時間空間環境下，很難做到全方位的考察，我個人也無法做到，這也是為什么會有多次面試的原因。
但是關于面試設計師，我還是有一些心得的。首先，設計師的專業能力是根本，除此之外，最重要的是心理成熟度的考察。就設計師的發展來看，很多時候遇到的問題都不是技術問題，大多是心理問題。創造力也同樣重要，雖然個人是否具備創造力可以在溝通中發現一些，但最好的辦法還是設置筆試題來考察。
除此之外，恒心、雄心、好奇心，分別體現了一個人達成目標的能力，自我提升的可能性，以及對專業探索的熱情，優秀的設計師，這三個特質缺一不可。
藍湖：
在提拔設計人員成為設計管理者時，您會重點考察候選人的哪些方面？
程峰：
如果將設計團隊比喻成一支球隊的話，我對團隊內設計管理者的要求是從明星球員變成主教練。
最簡單的考察標準：
藍湖：
滴滴CDX 內部是如何分工協作的？設計有時會是一個比較主觀的，容易出現分歧的工作內容，如果團隊內部的意見出現分歧，您是如何做決策的？
程峰：
CDX 專業分為兩側：體驗設計+創意設計。既解決產品的體驗設計問題，同時也關注業務運營效率及品牌創意設計問題。
我想目前的分工是階段性的，未來的趨勢應該是設計師職能更加融合，最終合并成只有「設計」這個職能。
在面對專業分歧的時候，最的解決辦法依然是溝通。事實上大部分的分歧都是因為目標不一致導致的，所以在遇到分歧時，要保持讓產品、品牌更好的端正、開放的心態，就會被更有道理的觀點說服。
△ 滴滴「CDX」部門成員合照
藍湖：
您作為設計管理者，對于提升產品設計效率，有什么經驗分享給大家嗎？
程峰：
首先，推進設計師成為更「復合」型的人才，設計細分專業之間的融合，能夠降低理解成本。
其次，要繼續推進產品組件化的建設和組件使用率。
最后，針對性使用設計工具，比如使用藍湖完成自動標注和切圖，通過工具規范標準化流程，避免無效溝通和重復勞動。
這些都是提升設計效率的辦法。
藍湖：
對于相對年輕的設計師，您有怎樣的職業發展建議？
程峰：
保持初心，永遠記得你為什么踏上設計這一行，并且時刻具備長遠規劃。
堅信設計的價值，任何職能都不可能解決全世界的問題，專注設計能解決的領域，設計自然更有價值。
保持思考，不僅是對專業的思考，更是對業務的思考，甚至生活和世界的思考。
我也是這樣要求自己的，希望對各位也有幫助。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
