如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

為什么要構(gòu)建 MIZ Design？

1. 背景

隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設(shè)計(jì)上積累了越來越多的債務(wù)。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設(shè)計(jì)師來設(shè)計(jì)，前端也是由不同的開發(fā)來實(shí)現(xiàn)，這直接導(dǎo)致了整個(gè) APP 越來越臃腫無序，視覺和交互體驗(yàn)不一致，且團(tuán)隊(duì)溝通成本高，重復(fù)勞動(dòng)力大，輸出效率低，迭代速度慢。

2. 現(xiàn)狀

開發(fā)層面

• 代碼混亂不統(tǒng)一
• 沒有可控性和可持續(xù)性

場景：

設(shè)計(jì)師：涉及到這個(gè)組件的頁面都改一下吧。

開發(fā)：改不了，每個(gè)頁面都是單獨(dú)寫的，改起來非常麻煩，耗時(shí)間耗資源耗人力。

設(shè)計(jì)師：為什么同樣的組件要單獨(dú)寫？

開發(fā)：我怎么知道，這是以前的開發(fā)寫的，而且寫的亂七八糟。

設(shè)計(jì)師：……

那怎么辦？不改也得改呀。總不能一直留著這些大大小小的毛病，不解決問題會(huì)越來越嚴(yán)重。

代碼混亂，遺留了非常多的開發(fā)層面代碼不一致的問題，后期迭代的過程中如果不統(tǒng)一，也會(huì)使整個(gè)系統(tǒng)失去可控性。

設(shè)計(jì)師層面

• 時(shí)間和精力的重復(fù)浪費(fèi)
• 產(chǎn)品體驗(yàn)和風(fēng)格的混亂

場景 1：

設(shè)計(jì)師 A：這個(gè)頁面是誰做的？源文件有嗎？

設(shè)計(jì)師 B：不知道哎。以前的設(shè)計(jì)師做的。去庫里找一下吧。

30 分鐘以后，依然沒有找到源文件。

場景 2：

開會(huì)：為什么這個(gè)項(xiàng)目的頁面和以前的風(fēng)格差很多？

設(shè)計(jì)師 A：現(xiàn)在流行的就是這個(gè)風(fēng)格呀，多好看。

設(shè)計(jì)師 B：雖然設(shè)計(jì)每年都有流行趨勢，但還是要和產(chǎn)品品牌風(fēng)格相結(jié)合。

一個(gè)項(xiàng)目兩個(gè)設(shè)計(jì)師負(fù)責(zé)，設(shè)計(jì)出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風(fēng)格完全不一致。在 2 個(gè)設(shè)計(jì)師完成設(shè)計(jì)以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發(fā)需要根據(jù)不同業(yè)務(wù)中的不同設(shè)計(jì)師的「創(chuàng)意」來進(jìn)行人肉修改。

當(dāng)我們開始設(shè)計(jì)新的頁面，功能需求點(diǎn)優(yōu)化的時(shí)候，這個(gè)問題變得更加嚴(yán)重。同時(shí)，因?yàn)闆]有一個(gè)統(tǒng)一的基礎(chǔ)設(shè)計(jì)規(guī)范原則，設(shè)計(jì)師在設(shè)計(jì)項(xiàng)目的時(shí)候，在設(shè)計(jì)決策和討論中花費(fèi)了大量時(shí)間，會(huì)存在大量的重復(fù)勞動(dòng)。同時(shí)由于產(chǎn)品的界面和交互缺乏一致性和可預(yù)測性，用戶體驗(yàn)也受到了影響。整個(gè)產(chǎn)品也會(huì)在風(fēng)格定位上不統(tǒng)一，沒有確定產(chǎn)品風(fēng)格特質(zhì)的情況下越來越模糊，失去自身品牌該有的特性。

產(chǎn)品迭代，基本上是基于新功能的開發(fā)設(shè)計(jì)迭代，新的功能、新的頁面不斷的增加，對于設(shè)計(jì)師而言，有設(shè)計(jì)規(guī)范的原則做基礎(chǔ)設(shè)計(jì)框架，更容易延續(xù) APP 統(tǒng)一的設(shè)計(jì)風(fēng)格，不至于被不同的需求，不同的設(shè)計(jì)趨勢以及蠢蠢欲動(dòng)的新的設(shè)計(jì)靈感牽著鼻子走，導(dǎo)致越做越亂，無章可循。

一個(gè) APP 就像自己的孩子一樣，從一個(gè)嗷嗷待哺的嬰兒逐漸長大成人。設(shè)計(jì)系統(tǒng)就好比一個(gè)人的生物系統(tǒng)，是整個(gè)生物體的基礎(chǔ)。如果對此系統(tǒng)不維護(hù)，那么此系統(tǒng)將會(huì)隨著時(shí)間的增長越來越脆弱以及呈現(xiàn)不可逆的現(xiàn)象。那么如果維護(hù)好一個(gè)設(shè)計(jì)系統(tǒng)，骨骼會(huì)在成長中呈現(xiàn)規(guī)律清晰的生長模式，會(huì)隨著業(yè)務(wù)的生長而生長，可控制、可更新，使生物體健康的發(fā)展然后去完成它的使命。

什么是設(shè)計(jì)規(guī)范？

Design System 最開始是 Guide 演化而來，Guide 是一套可指導(dǎo)、可延續(xù)、可擴(kuò)展、可統(tǒng)一的、可區(qū)分的視覺指引手冊，指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對外區(qū)分性。具象層，它是一種設(shè)計(jì)方法；抽象層，它是一種思考模型。

最近幾年，「Design System」這個(gè)詞非常火。下面介紹紅遍全球設(shè)計(jì)界的兩大設(shè)計(jì)規(guī)范網(wǎng)紅。

1. Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言，并且在不同設(shè)備上提供一致的體驗(yàn)底層系統(tǒng)，并同時(shí)支持觸摸、語音、鼠標(biāo)、鍵盤等輸入方式。

一經(jīng)發(fā)布就紅遍了全球設(shè)計(jì)界。新穎的設(shè)計(jì)理念，清晰明確的設(shè)計(jì)原則，詳細(xì)的設(shè)計(jì)規(guī)范，使之成為完美的安卓端標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范。也給設(shè)計(jì)界的設(shè)計(jì)師們提供了非常好的參考，很多設(shè)計(jì)師也根據(jù) Material Design 設(shè)計(jì)原則延展出更多的創(chuàng)新設(shè)計(jì)可能性，制作了各家的設(shè)計(jì)規(guī)范。

出了官方的 Sketch 組件庫以后，谷歌團(tuán)隊(duì)還開發(fā)了基于此設(shè)計(jì)規(guī)范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會(huì)上，Google 設(shè)計(jì)團(tuán)隊(duì)開發(fā)了一款叫做 Material Theme Editor 工具，可以幫助設(shè)計(jì)師輕松且快速創(chuàng)建符合自身品牌又符合 Material Design 風(fēng)格的應(yīng)用。

設(shè)計(jì)價(jià)值觀

• Create：創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言。
• Unify：開發(fā)一套統(tǒng)一的底層系統(tǒng)，保持各端一致的用戶體驗(yàn)。
• Customize：靈活多變的視覺語言，讓各家自成一派，形成獨(dú)特鮮明的品牌風(fēng)格。

設(shè)計(jì)原則

材質(zhì)是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質(zhì)，包含了材質(zhì)如何接受光的影響以及所形成的光影效果，并且對紙張的質(zhì)感和墨水的介質(zhì)重新進(jìn)行了構(gòu)想。

大膽，圖形，鮮明：Material Design 基于印刷設(shè)計(jì)的指導(dǎo)原則，字體、柵格、留白、顏色等元素都以創(chuàng)造層次、意義和焦點(diǎn)為基礎(chǔ)來讓用戶沉浸在設(shè)計(jì)體驗(yàn)中。

動(dòng)效賦予意義：微妙順暢地反饋和過渡性的動(dòng)作效果，引起用戶的注意力并使之保持持續(xù)關(guān)注。當(dāng)元素出現(xiàn)在一個(gè)界面中的時(shí)候，元素之間的互動(dòng)重塑了環(huán)境。

基礎(chǔ)靈活：Material Design 同樣旨在實(shí)現(xiàn)品牌價(jià)值的傳遞。結(jié)合了基礎(chǔ)的代碼、組件和元素，可表達(dá)不同的品牌需求。

跨平臺(tái)：Material Design 的 UI 組件庫可在不同的平臺(tái)共用，不論在安卓平臺(tái)、iOS、Flutter，還是 Web 都可保持一致的組件元素。

2. iOS Human Interface Guidelines

iOS 的人機(jī)規(guī)范指南，保持了蘋果一貫的風(fēng)格。雖然沒有 Material Design 規(guī)范那么細(xì)致全面，但是核心的設(shè)計(jì)原則在每個(gè)組件的設(shè)計(jì)說明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計(jì)基礎(chǔ)，建議每個(gè)設(shè)計(jì)師都需要仔細(xì)研究。

iOS 設(shè)計(jì)價(jià)值觀

• Clarity：系統(tǒng)中所有的文字、圖標(biāo)、圖像以及各個(gè)元素都清晰可見，語意表達(dá)準(zhǔn)確，功能驅(qū)動(dòng)設(shè)計(jì)。
• Deference：順應(yīng)用戶的行為，流暢的動(dòng)效和清晰美觀的界面，使用戶沉浸在順暢的交互中，不去打擾用戶。
• Depth：清晰的視覺層級(jí)和流暢的動(dòng)效，同樣提供了系統(tǒng)清晰的層次感，使其富有活力且易于用戶理解。

iOS 設(shè)計(jì)原則

Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗(yàn)，產(chǎn)品功能和用戶行為的有效結(jié)合。比如當(dāng)一款工具類 APP 主要是幫助用戶完成一項(xiàng)任務(wù)時(shí)，設(shè)計(jì)師應(yīng)關(guān)注于用戶操作本身的行為路徑，和產(chǎn)品功能相結(jié)合來幫助用戶完成目標(biāo)，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵(lì)引導(dǎo)用戶探索的同時(shí)也有非常棒的操作體驗(yàn)。

Consistency 一致性：一個(gè)保持了一致性原則的 APP，通過使用標(biāo)準(zhǔn)的控件、熟悉的 icon、標(biāo)準(zhǔn)的文字規(guī)范、統(tǒng)一的組件俗語來實(shí)現(xiàn)一個(gè)擁有標(biāo)準(zhǔn)化范例的系統(tǒng)。這個(gè)系統(tǒng)提供的特性和交互行為也符合用戶的心智模型和預(yù)期。

Direct Manipulation 直接操作：讓用戶在屏幕上直接對內(nèi)容進(jìn)行操作的交互行為，可以鼓勵(lì)用戶和系統(tǒng)進(jìn)行交互并且更易于理解。當(dāng)用戶翻轉(zhuǎn)屏幕或者使用手勢直接與屏幕交互時(shí)，他們會(huì)感知到直接操作的行為，并且能立即得到操作結(jié)果。

Feedback 反饋：反饋能夠響應(yīng)操作，呈現(xiàn)結(jié)果，使用戶獲得信息。手機(jī)中內(nèi)置的 iOS 應(yīng)用程序?yàn)橛脩舻拿恳粋€(gè)動(dòng)作提供可感知的反饋。交互元素在點(diǎn)擊時(shí)會(huì)凸顯被高亮顯示，進(jìn)度指示器顯示了需要長時(shí)間運(yùn)行的操作進(jìn)度、動(dòng)效和聲音，使用戶能夠更清晰地感知交互行為的結(jié)果并作出響應(yīng)。

Metaphors 隱喻：當(dāng)一個(gè) APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時(shí)，不管它是來自于真實(shí)世界還是數(shù)字世界，用戶都能很快上手。隱喻之所以有效果，是因?yàn)橛脩艉推聊淮嬖谖锢砩系慕换?。用戶可以通過移動(dòng)分層視圖來顯示手機(jī)上被遮擋的內(nèi)容；拽拖并且滑動(dòng)對象，切換開關(guān)，移動(dòng)滑塊，滾動(dòng)數(shù)值選擇器，用戶甚至可以通過翻轉(zhuǎn)手勢來翻閱手機(jī)上的雜志和文章。

User Control 用戶控制：在 iOS 系統(tǒng)中，用戶是主導(dǎo)者，而不是 APP。APP 可以提供行動(dòng)建議，給予警告提示，但是不應(yīng)該替用戶做選擇。優(yōu)秀的 APP 始終會(huì)在用戶主導(dǎo)和用戶不想要出現(xiàn)的結(jié)果中保持平衡。一個(gè) APP 應(yīng)該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預(yù)期；對有破壞性的操作可確認(rèn)；對錯(cuò)誤操作可取消，即使是在進(jìn)行中的行為也可中斷。

在 Sketch 工具中可直接下載 iOS 的組件庫使用。

3. Airbnb DLS

在 2016 年，由工程師和設(shè)計(jì)師組成的團(tuán)隊(duì)創(chuàng)建了 Airbnb 的設(shè)計(jì)語言系統(tǒng) （DLS）的第一個(gè)版本，其目標(biāo)是創(chuàng)建一致的體驗(yàn)和跨平臺(tái)的統(tǒng)一。DLS 包含了一套內(nèi)部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設(shè)計(jì)、工程和其他學(xué)科的共享詞匯表進(jìn)行快速迭代。DLS 的結(jié)構(gòu)簡單而連貫，簡化了團(tuán)隊(duì)之間的溝通。并制定了以下幾條原則來指導(dǎo) DLS 的設(shè)計(jì)：

• Unified 統(tǒng)一性，每個(gè)組件都是系統(tǒng)的一部分，并且需要積極地響應(yīng)系統(tǒng)，沒有單獨(dú)特殊的單一組件。
• Universal 通用性，Airbnb 在全球被全世界人使用，所以我們的產(chǎn)品和視覺語言需要是受歡迎的和易于理解的。
• Iconic 標(biāo)志性，產(chǎn)品的視覺和功能設(shè)計(jì)是最重要的，我們的工作必須專注于對視覺和功能給予清晰明確的定義。
• Conversational 對話性，動(dòng)效在我們產(chǎn)品中是有生命的，它能讓用戶和我們的產(chǎn)品更好的交流對話。

ADS 開源庫

Airbnb 設(shè)計(jì)副總裁 Alex Schleifer 在 IXDC 2017 國際體驗(yàn)設(shè)計(jì)大會(huì)上分享了這一創(chuàng)新的 React Sketch APP 管理設(shè)計(jì)系統(tǒng)，這是為 Airbnb 的設(shè)計(jì)系統(tǒng)而設(shè)計(jì)的，其實(shí)就是個(gè)實(shí)時(shí)更新的代碼數(shù)據(jù)庫，可以實(shí)時(shí)查詢 Sketch 數(shù)據(jù)和代碼，也可以下載圖標(biāo)、設(shè)計(jì)模塊，所有工程師和設(shè)計(jì)師都可以免費(fèi)下載?？吹竭@個(gè)，我想完美共享庫也許并不是那么的遙遠(yuǎn)。

Airbnb 團(tuán)隊(duì)在設(shè)計(jì) DLS 過程中，也是通過原子組件的方式來構(gòu)建整個(gè)框架，我覺得他們對于設(shè)計(jì)系統(tǒng)的理解非常對：「一個(gè)統(tǒng)一的設(shè)計(jì)語言不應(yīng)該只是一組靜態(tài)的規(guī)則和原子組件構(gòu)成，它應(yīng)該是一個(gè)可持續(xù)發(fā)展的系統(tǒng)?！顾栽跇?gòu)建好底層的設(shè)計(jì)語言之后，可持續(xù)性、可發(fā)展性，是維護(hù)并讓設(shè)計(jì)系統(tǒng)產(chǎn)生價(jià)值的重點(diǎn)。

4. Ant Design

隨著商業(yè)化的趨勢，越來越多的企業(yè)級(jí)產(chǎn)品對擁有更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的一個(gè)終極目標(biāo)，螞蟻金服體驗(yàn)技術(shù)部經(jīng)過大量的項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系 Ant Design。基于「確定」和「自然」的設(shè)計(jì)價(jià)值觀，通過模塊化的解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。

設(shè)計(jì)價(jià)值觀

自然，讓人機(jī)交互行為更自然。

自然規(guī)律運(yùn)用到設(shè)計(jì)中，自然界的方方面面都會(huì)對用戶行為產(chǎn)生深遠(yuǎn)影響，設(shè)計(jì)者應(yīng)該從其中汲取靈感，并運(yùn)用到當(dāng)下的設(shè)計(jì)工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。

自然的人機(jī)交互核心：節(jié)能。既要節(jié)省身體運(yùn)動(dòng)的體力，更要節(jié)省大腦思考的腦力。

那么如何在設(shè)計(jì)中體現(xiàn)呢？

• 保持統(tǒng)一性，減少用戶學(xué)習(xí)成本，降低用戶思維耗能?！窪on’t make me think」一個(gè)道理。
• 隱喻映射，操作行為符合用戶的心智模型，提升產(chǎn)品易學(xué)性，也是減少用戶耗能的一個(gè)方向。
• 保持本能，讓用戶行為保持在本能層面，本能層面中無意識(shí)產(chǎn)生的自然情緒和行為，容易讓用戶達(dá)到心流狀態(tài)。讓用戶更順暢完成任務(wù)，產(chǎn)生愉悅感。

確定，保持克制、對象設(shè)計(jì)方法、模塊化。

設(shè)計(jì)者需要做出更好的設(shè)計(jì)決策，給予研發(fā)團(tuán)隊(duì)一種高確定性、低熵值的研發(fā)狀態(tài)。同時(shí)，不同設(shè)計(jì)者在充分理解業(yè)務(wù)訴求后，基于 Ant Design 體系都會(huì)有相同且符合當(dāng)前業(yè)務(wù)特性的設(shè)計(jì)產(chǎn)出。

給予用戶確定感，結(jié)合 Ant Design 的三個(gè)關(guān)鍵點(diǎn)，可以總結(jié)為邊界和規(guī)則 2 個(gè)方面：

• 設(shè)定邊界，專注于最重要的界面和功能點(diǎn)來組件系統(tǒng)。
• 制定規(guī)則，所有元素抽象為使用者都可理解的類似于「原子」的對象，并且將對象再組件成「模塊」，進(jìn)行打包封裝，在內(nèi)容和規(guī)則上都給予確定性。

構(gòu)建米莊設(shè)計(jì)系統(tǒng)的目標(biāo)是什么？

構(gòu)建米莊設(shè)計(jì)系統(tǒng)的目標(biāo)是什么？

• 輕量
• 一致

意義

有了規(guī)范和控件庫，設(shè)計(jì)師在接受需求的時(shí)候，可以減少設(shè)計(jì)成本，提高設(shè)計(jì)效率，尤其是在用于快速迭代產(chǎn)品的階段，通過大量的標(biāo)準(zhǔn)化組件即可實(shí)現(xiàn)縮短設(shè)計(jì)周期的效果，并且設(shè)計(jì)師可以更專注于深耕體驗(yàn)和細(xì)節(jié)，同時(shí)能保證高質(zhì)量的輸出。

構(gòu)建一個(gè)設(shè)計(jì)系統(tǒng)來支撐產(chǎn)品的所有業(yè)務(wù)線，解決團(tuán)隊(duì)協(xié)作一致性問題，產(chǎn)品的周期性更新問題，解決不同的設(shè)計(jì)師和工程師規(guī)范性輸出 UI 的問題，最終從設(shè)計(jì)驅(qū)動(dòng)商業(yè)的層面上，解決用戶體驗(yàn)一致性，迭代開發(fā)的問題。

如何來構(gòu)建設(shè)計(jì)系統(tǒng)？

1. 項(xiàng)目啟動(dòng)基礎(chǔ)三要素

時(shí)間

APP 進(jìn)入穩(wěn)定發(fā)展階段，也完成了基礎(chǔ)功能的開發(fā)，在業(yè)務(wù)穩(wěn)定發(fā)展的前提下，構(gòu)建已有 APP 的整體框架，規(guī)范前端開發(fā)和設(shè)計(jì)流程是個(gè)好時(shí)機(jī)。在產(chǎn)品發(fā)展到穩(wěn)定階段、參與的人越來越多時(shí)，對整個(gè) APP 的頁面整理是非常有必要的。也為了后續(xù)快速發(fā)展的業(yè)務(wù)起到完整系統(tǒng)地支撐能力。

人力

相信幾乎在所有的公司和團(tuán)隊(duì)，規(guī)范建立都是非常有價(jià)值，也非常耗費(fèi)資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統(tǒng)。沒有上線落地的視覺規(guī)范只是耍流氓。所以項(xiàng)目啟動(dòng)的時(shí)候，團(tuán)隊(duì)分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。

場景

所以在項(xiàng)目開始之前，便需要和整個(gè)團(tuán)隊(duì)統(tǒng)一目標(biāo)意義：視覺規(guī)范的建立，除了保障統(tǒng)一的用戶體驗(yàn)和認(rèn)知，還能夠通過工程師代碼層面的組件化提高開發(fā)、設(shè)計(jì)效率。整個(gè)設(shè)計(jì)系統(tǒng)的開發(fā)，從設(shè)計(jì)到落地，需要產(chǎn)品、設(shè)計(jì)和前端的全力支持。

2. 項(xiàng)目啟動(dòng)基礎(chǔ)框架

雞生蛋問題

即使我們看了很多設(shè)計(jì)系統(tǒng)范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當(dāng)我們還沒有組建一個(gè) UI kits 組件庫的時(shí)候是如何來搭建一個(gè)頁面的呢？是先有了組件，然后創(chuàng)造了模塊頁面；還是先設(shè)計(jì)了頁面，然后再來歸納總結(jié)出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。

原子理論

在學(xué)習(xí)其他公司如何搭建設(shè)計(jì)系統(tǒng)的時(shí)候，我們了解到了 Brad Frost 的原子設(shè)計(jì)理論。他提出了原子設(shè)計(jì)原則，并且在他的文章中有一句非常出名的引用：

we’re not designing pages, we’re designing systems of components.──Stephen Hay

概念

2013 年網(wǎng)頁設(shè)計(jì)師 Brad Frost 從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進(jìn)一步結(jié)合形成了生物體（Organisms）。于是提出了原子設(shè)計(jì)方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。

原子設(shè)計(jì)的五個(gè)階段

原子（Atoms）：符號(hào)，為頁面構(gòu)成的基本元素。例如顏色、字體，或是一個(gè)圖標(biāo)等。

分子（Molecules）：組件，由原子構(gòu)成的簡單 UI 組件。例如，一個(gè)表單標(biāo)簽，搜索框和按鈕共同打造了一個(gè)搜索表單分子。

組織（Organisms）：模塊，由原子及分子組成的相對復(fù)雜的組織，在 UI 頁面中可視為模塊/樣式層級(jí)。

模板（Templates）：原型，將以上元素進(jìn)行排版，顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)，在 UI 設(shè)計(jì)中對應(yīng)的是原型圖層級(jí)。

頁面（Pages），將實(shí)際內(nèi)容（圖片、文章等）套件在特定模板，頁面是模板的具體實(shí)例。

特點(diǎn)：

• 一致：組件可復(fù)用性高，減少重復(fù)設(shè)計(jì)開發(fā)成本，體現(xiàn)一致性原則。
• 清晰：原子理論提出來的層級(jí)結(jié)構(gòu)偏向于結(jié)構(gòu)思維，層層遞進(jìn)，邏輯清晰，使構(gòu)建的所有頁面形成一個(gè)系統(tǒng)。
• 效率：系統(tǒng)化的構(gòu)建方式，易于拓展和維護(hù)，不僅方便設(shè)計(jì)師思考頁面的和諧性，也可以讓工程師、品質(zhì)檢驗(yàn)清楚頁面的邏輯架構(gòu)及變化，降低溝通成本。

從 Brad Frost 的原子設(shè)計(jì)理論得到啟發(fā)，將我們 APP 產(chǎn)品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個(gè)詳盡的庫幫助我們以一種更合理的方式構(gòu)建了一個(gè)設(shè)計(jì)系統(tǒng)的底層框架。

這個(gè)理論提出來以后就產(chǎn)生了非常大的轟動(dòng)。并且至此以后 Atomic Design（原子設(shè)計(jì)）成為了構(gòu)建 Design System 的核心指導(dǎo)理論。

Sketch工具

Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產(chǎn)品設(shè)計(jì)的未來?！刮覀兛梢允褂?Sketch Library 功能實(shí)現(xiàn)組件庫的創(chuàng)建。而組件庫的底層邏輯就是原子設(shè)計(jì)理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構(gòu)建組件和樣式。

Text style：Text Style 用于設(shè)置文字規(guī)范，在一個(gè)系統(tǒng)中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個(gè)系統(tǒng)中的字體樣式，可使之便于管理和修改，保持系統(tǒng)的可持續(xù)性和可用性。并且可單獨(dú)輸出字體樣式系統(tǒng)進(jìn)行團(tuán)隊(duì)之間，不同項(xiàng)目之間的共享。

Layer Style：可編輯元素的各種樣式，比如用于制作顏色規(guī)范，涵蓋填充顏色、描邊顏色、內(nèi)外陰影、模糊效果等內(nèi)容?？墒乖乇３忠恢碌膱D層樣式。

symbols：設(shè)計(jì)系統(tǒng)中的任何元素都使用 symbols 來形成符號(hào)，可復(fù)用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號(hào)進(jìn)行嵌套組合，可形成符號(hào)嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會(huì)形成符號(hào)嵌套層，作為不同符號(hào)組件的分層。同樣的對于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。

Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個(gè)組件庫，可通過共享形式，來使它成為團(tuán)隊(duì)的設(shè)計(jì)工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態(tài)。

3. 實(shí)施項(xiàng)目計(jì)劃

在確定了原則和工具之后，我們?yōu)樵O(shè)計(jì)系統(tǒng)項(xiàng)目制定了完整的項(xiàng)目計(jì)劃，因?yàn)樯婕暗缴暇€和設(shè)計(jì)兩大塊，所以項(xiàng)目也是分設(shè)計(jì)線和落地線，兩條線既有關(guān)聯(lián)性，又是相對獨(dú)立和分離的。組件設(shè)計(jì)完成以后才可上線落地，因推動(dòng)落地的過程是需要整個(gè)設(shè)計(jì)開發(fā)團(tuán)隊(duì)的，不管是從時(shí)間還是人力上的資源協(xié)調(diào)和配合，所以落地線需要更加靈活。

設(shè)計(jì)階段 – 設(shè)計(jì)線

目標(biāo)結(jié)果 – 設(shè)計(jì)資產(chǎn)

設(shè)計(jì)階段，我們所產(chǎn)出的設(shè)計(jì)資產(chǎn)包括設(shè)計(jì)價(jià)值觀，設(shè)計(jì)指導(dǎo)原則，以及設(shè)計(jì)模式（解決方案）。

展開實(shí)施 – 任務(wù)細(xì)分

確定了設(shè)計(jì)資產(chǎn)以后，我們將設(shè)計(jì)資產(chǎn)進(jìn)行細(xì)分。整理規(guī)范的內(nèi)容并對每個(gè)組件進(jìn)行優(yōu)先級(jí)的確定。整理規(guī)范內(nèi)容的過程也是一個(gè)逐漸完善的過程，第一次整理可能并不完善，但是沒有關(guān)系，先把基礎(chǔ)框架和內(nèi)容整理好，后續(xù)在設(shè)計(jì)過程中有遺漏的再進(jìn)行添加。

內(nèi)容整理好以后，我們會(huì)發(fā)現(xiàn)一套規(guī)范里內(nèi)容非常多，所以需要根據(jù)項(xiàng)目時(shí)間來安排所有內(nèi)容的優(yōu)先級(jí)和分工。根據(jù)我們的設(shè)計(jì)系統(tǒng)的底層邏輯，所以我們將核心組件建設(shè)放在第一階段，比如字體、顏色、icon 等。構(gòu)建了基礎(chǔ)元件以后再來搭建模塊，最后再根據(jù)不同場景來確定樣式。至于分工，最好整個(gè)設(shè)計(jì)團(tuán)隊(duì)的人員都可參與，互相分擔(dān)工作量以達(dá)到工作效率最大化。

整體內(nèi)容確定以后，因每個(gè)組件的整理有規(guī)范可循，所以我們針對每個(gè)組件的設(shè)計(jì)過程也確定了單個(gè)組件的設(shè)計(jì)流程。

過程跟進(jìn) – 關(guān)鍵節(jié)點(diǎn)

在設(shè)計(jì)過程中，我們也需要對關(guān)鍵時(shí)間節(jié)點(diǎn)的項(xiàng)目整體進(jìn)程和結(jié)果輸出總結(jié)。此階段是和上線的項(xiàng)目節(jié)點(diǎn)重合的關(guān)鍵點(diǎn)，設(shè)計(jì)輸出的內(nèi)容會(huì)和上線過程有非常多的磨合，一個(gè)組件的落地還需要不停的和開發(fā)溝通，收集反饋意見，并且進(jìn)行調(diào)整修改，記錄解決問題。

執(zhí)行復(fù)盤 – 結(jié)果驗(yàn)證

在每個(gè)組件的設(shè)計(jì)過程中，我們都會(huì)反復(fù)完善每個(gè)組件的內(nèi)容，包括設(shè)計(jì)原則、交互細(xì)節(jié)以及應(yīng)用場景等。反復(fù)去驗(yàn)證組件的可行性。并且對階段性完成的設(shè)計(jì)結(jié)果進(jìn)行復(fù)盤和分享，進(jìn)一步來驗(yàn)證設(shè)計(jì)方案的可行性。規(guī)范需要不停地優(yōu)化創(chuàng)新，才能讓它的可持續(xù)性特性發(fā)揮至最大。

上線階段 – 落地線

沒有上線落地的視覺規(guī)范只是耍流氓。

設(shè)計(jì)師自嗨并無意義。推進(jìn)的過程，最重要的還是溝通。溝通的內(nèi)容包括組件輸出的合理性、開發(fā)工作量、產(chǎn)品版本迭代需求計(jì)劃等。

愿望如此之美好，現(xiàn)實(shí)如此之貧瘠。

設(shè)計(jì)從落地到上線的過程想必每個(gè)設(shè)計(jì)師都有大把心得。在公司中實(shí)際的推進(jìn)是非常難的，因?yàn)楫a(chǎn)品需求永遠(yuǎn)都做不完，開發(fā)永遠(yuǎn)在寫代碼，設(shè)計(jì)永遠(yuǎn)需要將先完成業(yè)務(wù)需求設(shè)計(jì)為前提。所以如何將設(shè)計(jì)規(guī)范的內(nèi)容插進(jìn)項(xiàng)目中是個(gè)最關(guān)鍵的點(diǎn)。

存在問題，根據(jù)項(xiàng)目的時(shí)間安排和產(chǎn)品迭代安排，我們試圖將不同優(yōu)先級(jí)組件的內(nèi)容分配到不同的產(chǎn)品迭代中。實(shí)際卻證明這非常的理想化。在這個(gè)過程中我們遇到非常多的問題：

• 沒資源：產(chǎn)品的功能需求非常多，項(xiàng)目那么多，開發(fā)根本沒有時(shí)間來做視覺規(guī)范的內(nèi)容。
• 風(fēng)險(xiǎn)大：即使只是修改一兩個(gè)組件的內(nèi)容，在開發(fā)過程中卻涉及到幾十個(gè)頁面的修改，導(dǎo)致整個(gè) APP 的不穩(wěn)定性以及每次修改都會(huì)涉及到巨大且重復(fù)的測試資源。
• 感知弱：組件開發(fā)完成上線以后，不像頁面，新功能等可明顯讓大家感知到它的變化，規(guī)范性的內(nèi)容都是系統(tǒng)性的量變和體驗(yàn)上的感知，單點(diǎn)的結(jié)果成就感是比較低的。

解決方案：

APP 在建立的時(shí)候沒有規(guī)范性，所以現(xiàn)在想要規(guī)范所有的內(nèi)容就是一個(gè)非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。

• 拆分：大目標(biāo)拆分成小目標(biāo)，根據(jù)迭代來實(shí)現(xiàn)部分組件先后上線策略。我們將一整塊蛋糕再切成 8 塊，發(fā)現(xiàn)還是有點(diǎn)大，那么再繼續(xù)切，切成 12 塊，24 塊。細(xì)化到每個(gè)組件以及每個(gè)涉及到更改的頁面。
• 克制：保持克制是對邊界的一個(gè)限定。設(shè)計(jì)者在保持克制的狀態(tài)下去做一個(gè)更好的決策。米莊為了降低改動(dòng)的風(fēng)險(xiǎn)，盡量和線上的元素保持一致。創(chuàng)新和趨勢設(shè)計(jì)固然很好，但是在環(huán)境允許下，先保持克制完成目標(biāo)為第一原則。
• 強(qiáng)調(diào)：體驗(yàn)層的確是靠感知來體現(xiàn)它的精髓，而在推進(jìn)的過程中，讓整個(gè)團(tuán)隊(duì)在每個(gè)需求評審的過程中都對視覺規(guī)范有感知和重視，人人都增加參與感。

我們的核心組件在產(chǎn)品迭代中完成上線以后，將剩余的組件規(guī)劃至開發(fā)的重構(gòu)版本中進(jìn)行開發(fā)。減少資源的重復(fù)使用，以及最大化降低對 APP 的影響。我們衡量了利弊之后，決定此次規(guī)范的設(shè)計(jì)對于樣式的修改減少到最少，保持和線上內(nèi)容的一致性。很多時(shí)候我們設(shè)計(jì)師對于設(shè)計(jì)趨勢是很敏感以及非常想要去創(chuàng)新的，但是基于現(xiàn)狀下保持對樣式的克制完成基礎(chǔ)體系的搭建這個(gè)核心目的，是最重要的事。

如何驅(qū)動(dòng)業(yè)務(wù)

MIZ Design 的設(shè)計(jì)資產(chǎn)中設(shè)計(jì)價(jià)值觀是貫徹整個(gè)產(chǎn)品的迭代發(fā)展，是產(chǎn)品持續(xù)迭代的指明燈。設(shè)計(jì)原則是團(tuán)隊(duì)成員建立設(shè)計(jì)的標(biāo)準(zhǔn)指導(dǎo)規(guī)范；設(shè)計(jì)資源庫貫徹設(shè)計(jì)師、開發(fā)和產(chǎn)品，實(shí)現(xiàn)產(chǎn)品迭代。我們也非常愿意分享這個(gè)過程，希望對大家建立設(shè)計(jì)規(guī)范整個(gè)流程有所幫助。

1. 設(shè)計(jì)價(jià)值觀 – 指導(dǎo)設(shè)計(jì)

When your values are clear to you,making decisions becomes easier.──Roy Disney

當(dāng)你認(rèn)清自己的價(jià)值觀和行為準(zhǔn)則后，決策就輕而易舉了。價(jià)值觀是指明燈，貫徹整個(gè)產(chǎn)品系統(tǒng)。我們根據(jù)米莊品牌的特性，以及業(yè)務(wù)場景的需求來定義 APP 的設(shè)計(jì)價(jià)值觀，指導(dǎo) MIZ Design 的設(shè)計(jì)語言的建立。

品牌特性

米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價(jià)值觀來驅(qū)動(dòng)業(yè)務(wù)增長。

業(yè)務(wù)場景

米莊作為金融工具類產(chǎn)品，功能操作場景不算復(fù)雜，強(qiáng)調(diào)一致性的用戶體驗(yàn)和安全規(guī)律的操作路徑。這也體現(xiàn)了產(chǎn)品對于不同頁面元素之間的相互關(guān)聯(lián)性和一致專業(yè)性的要求。

用戶調(diào)研

結(jié)合我們進(jìn)行的用戶調(diào)研報(bào)告，米莊產(chǎn)品的核心用戶對我們產(chǎn)品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標(biāo)，我們對于整個(gè)產(chǎn)品的設(shè)計(jì)需要以產(chǎn)品可操作性、性為第一原則，呈現(xiàn)的視覺層以安全可靠，清晰明確為風(fēng)格導(dǎo)向。

從以上三個(gè)方向，我們概括了設(shè)計(jì)價(jià)值觀核心的三點(diǎn)：

• 自然：自然和諧，有序有趣。
• 信任：真實(shí)明確，安全可靠。
• 效率：輕量，操作便捷。

2. 設(shè)計(jì)原則 – 規(guī)范邊界

格式塔心理學(xué)

心理學(xué)的完形法則：相似、相近、封閉、簡單。

MIZ Design 的設(shè)計(jì)原則參考了格式塔心理學(xué)，取人和萬物交流的過程中，大腦最基礎(chǔ)的一些精神反射和行為操作，格式塔心理學(xué)的理論主張研究意識(shí)和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，這也符合了米莊的設(shè)計(jì)價(jià)值觀里關(guān)于效率和自然的定義。所以我們參考此心理學(xué)來幫助團(tuán)隊(duì)順暢地溝通，減少信息不對稱以及學(xué)習(xí)成本，作為協(xié)作的基礎(chǔ)。

第一性原理

• 找到一個(gè)簡單的、基本的道理；
• 非常嚴(yán)格地按照這個(gè)道理行事。

埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結(jié)果出發(fā)，把事物分解成最基本的組成，看透事物的本質(zhì)，從源頭解決問題。這和原子設(shè)計(jì)理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實(shí)踐者，他將此原理視為科學(xué)界和商界非常古老的一條守則。

奧卡姆剃刀原理

Entities should not be multiplied unnecessarily.

如無必要，勿增實(shí)體。

• 簡化組織結(jié)構(gòu)
• 關(guān)注核心價(jià)值

奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費(fèi)較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速?zèng)Q策和判斷認(rèn)知行之有效的工具之一。可以簡單理解為保持事物的簡單性。在各個(gè)學(xué)科，各個(gè)研究領(lǐng)域都有發(fā)展。這個(gè)原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個(gè)穩(wěn)定的，持續(xù)自我生長的系統(tǒng)，發(fā)展原則是盡量保持簡約之道。

3. 設(shè)計(jì)資產(chǎn) – 業(yè)務(wù)賦能

設(shè)計(jì)資產(chǎn)層面，我們輸出的內(nèi)容包含了以下兩大部分：

• MIZ UI KIT_3.0 LIBRARY
• MIZ UI KIT 說明文檔

MIZ UI KIT_3.0 LIBRARY：

• 字體系統(tǒng)
• 調(diào)色板1.0
• 組件庫
• 樣式庫

MIZ UI KIT 說明文檔：

• 組件說明文檔
• 設(shè)計(jì)過程說明文檔

開發(fā)層面 – 溝通，減少重復(fù)

基于 UI kit 創(chuàng)建的組件庫，幫助他們在最終產(chǎn)品中保持代碼的一致性和復(fù)用性。并且設(shè)計(jì)語言作為一種工具，是整個(gè)團(tuán)隊(duì)順暢溝通的最重要的語言。所以我們確保我們的設(shè)計(jì)語言，是能夠讓開發(fā)，產(chǎn)品都懂，并在第一時(shí)間執(zhí)行的。既然是語言，那么每個(gè)元素都會(huì)有自己的名字。每個(gè)組件，甚至每個(gè)組件中不同屬性的元素我們也賦予它名字。

無名萬物之始，有名萬物之母。──《道德經(jīng)》

我們的祖先發(fā)明語言文字的過程，其實(shí)就是一個(gè)給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會(huì)有文化偏見和個(gè)人信息資產(chǎn)的反應(yīng)。所以我們需要給設(shè)計(jì)系統(tǒng)中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產(chǎn)品的特殊語言。

場景：

開發(fā)：#000和#00000000分別替換成什么顏色？

設(shè)計(jì)師：#000，替換成 black-1

開發(fā)：那#00000000呢？

設(shè)計(jì)師：一臉茫然，這 2 個(gè)不是一個(gè)顏色嗎？

慣性思維，色值在設(shè)計(jì)師眼中，對應(yīng)的是一種色彩，而在開發(fā)眼中只是一堆數(shù)字。將心比心，當(dāng)你扔給開發(fā)一個(gè)色值的時(shí)候他們只是一個(gè)難過的問號(hào)；而當(dāng)你給他們具體的一個(gè)顏色的名字，他們能馬上對應(yīng)到這個(gè)名字，那么就是順暢的。

所以當(dāng)我們給顏色命名以后，溝通就變成了以下這樣：

設(shè)計(jì)師：#ff5600 換成 orange-2。

開發(fā)：好的。修改完成。

設(shè)計(jì)師：#ff3450 全部替換成 blue-2。

開發(fā)：好的，替換完成。

設(shè)計(jì)師：這次我們品牌升級(jí)，orange-2 的色值更改為 #ff5666。

開發(fā)：好的。全局修改完成。

雖然修改的過程比較辛苦，但是結(jié)果是好的。從此設(shè)計(jì)師掌握了話語權(quán)。當(dāng)然，開發(fā)也很高興。

不單單是色彩，我們對字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產(chǎn)生價(jià)值。

設(shè)計(jì)層面 – 輸出，快樂傳承

設(shè)計(jì)師們可以更加便捷地創(chuàng)建、分享、定義設(shè)計(jì)界面的內(nèi)容。此外，在設(shè)計(jì)傳承方面，也能讓我們更好地將設(shè)計(jì)原則傳遞給新人。

場景：

設(shè)計(jì)師 a：此次版本迭代涉及到優(yōu)惠券頁面的優(yōu)惠，這個(gè)頁面的字體和顏色有規(guī)范嗎？

設(shè)計(jì)師 b：有的。請參照設(shè)計(jì)規(guī)范。

不同設(shè)計(jì)師在接到需求開始設(shè)計(jì)以后會(huì)擔(dān)心：怕風(fēng)格有差別，怕頁面不統(tǒng)一。辛苦做好頁面以后發(fā)現(xiàn)和別的設(shè)計(jì)師同時(shí)做的差別很大，也不符合產(chǎn)品整體品牌調(diào)性，陷入循環(huán)改稿中。此時(shí)設(shè)計(jì)規(guī)范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點(diǎn)。

同步更新：設(shè)計(jì)資產(chǎn)的目標(biāo)用戶，除了團(tuán)隊(duì)中的前端開發(fā)，那么最大受益者其實(shí)就是設(shè)計(jì)師們。設(shè)計(jì)系統(tǒng)的一大優(yōu)點(diǎn)便是修改設(shè)計(jì)系統(tǒng)中任何一個(gè)原子，整個(gè)系統(tǒng)所有這個(gè)原子都能感知到。這便是設(shè)計(jì)系統(tǒng)的可持續(xù)性、統(tǒng)一性，也是設(shè)計(jì)系統(tǒng)的基礎(chǔ)。

△ 組件庫中的任何修改，會(huì)同步到所有使用該庫的文檔中

自定義內(nèi)容：組件中的內(nèi)容都可自定義進(jìn)行修改。

解放重復(fù)生產(chǎn)力

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer

這句話的道理和我們的設(shè)計(jì)原則中第一性原理相通，從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。這和在構(gòu)建設(shè)計(jì)系統(tǒng)的時(shí)候是一個(gè)道理。學(xué)習(xí)從元認(rèn)知能力開始，而組件一個(gè)系統(tǒng)，從元件開始。埃隆·馬斯克從組成汽車的發(fā)電機(jī)開始思考，創(chuàng)辦了特斯拉；從底層元素的創(chuàng)新開始，才會(huì)有產(chǎn)品整體性的創(chuàng)新。

最后補(bǔ)充一下結(jié)構(gòu)圖：

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

Loading動(dòng)畫，在現(xiàn)在的設(shè)計(jì)中已經(jīng)是一個(gè)必須要設(shè)計(jì)的系統(tǒng)元素，它能減緩用戶等待焦慮的心態(tài)，也能用來作為品牌透傳，增加曝光。

那關(guān)于loading動(dòng)畫相關(guān)知識(shí)，我覺得對于設(shè)計(jì)師來說是有必要去了解的，所以我找到了這篇優(yōu)秀文章，讓大家能夠深入了解loading動(dòng)畫，透過現(xiàn)象看本質(zhì)，學(xué)以致用。

圖片來源：Domaso

沒有人喜歡等待

在用戶心目中，優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。

舉一個(gè)真實(shí)的例子：最近我們新發(fā)布了一個(gè)用戶評價(jià)的應(yīng)用，第一個(gè)版本并不完美，loading延遲在2-3秒。

你猜怎么著？

很多人認(rèn)為這3秒是一個(gè)故障。在實(shí)際開發(fā)中，你可能要面對龜速的網(wǎng)絡(luò)，沒有優(yōu)化的代碼，操作時(shí)間長或數(shù)據(jù)處理太多等問題。因此，App的運(yùn)行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會(huì)給你的產(chǎn)品第二次機(jī)會(huì)，但絕大多數(shù)人會(huì)立即退出它。

除非你的產(chǎn)品界面對用戶的行為提供了明確的即時(shí)反饋。剛才發(fā)生了什么？是操作錯(cuò)誤還是在等待服務(wù)器的請求？用戶需要等待多長時(shí)間才能正常使用這個(gè)工具或網(wǎng)站？用戶為什么要等待呢?

讓我們一起深入了解Loading動(dòng)畫：

1、loading動(dòng)畫的歷史由來

2、優(yōu)秀loading動(dòng)畫所具備的特征

3、細(xì)節(jié)可以做出精彩

4、簡單處理還是精心制作

loading動(dòng)畫的歷史由來

對于這種類型的反饋，設(shè)計(jì)師會(huì)使用進(jìn)度條、loading示意圖、預(yù)loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時(shí)間發(fā)生了什么或正在loading的過程，以減少用戶的心理焦慮。

你覺得設(shè)計(jì)師是從什么時(shí)候開始考慮加上這種反饋的？

我很驚訝的看到關(guān)于Nielsen Norman的一篇文章，提到響應(yīng)時(shí)間和loading動(dòng)畫是在1993年（參考1985年的資料）：

如果計(jì)算機(jī)無法提供快速響應(yīng)，則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋?！綧yers 1985 論文，“計(jì)算機(jī)-人機(jī)界面百分比進(jìn)度指標(biāo)的重要性”】

顯示進(jìn)度的三個(gè)主要優(yōu)點(diǎn)：向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時(shí)間，讓用戶能騰出時(shí)間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容，減少等待的焦慮?！?Jakob Nielsen, on January 1, 1993

自從Web 1.0以來，幾乎每個(gè)網(wǎng)站都有l(wèi)oading狀態(tài)，用戶可以注意到當(dāng)頁面內(nèi)容正在loading時(shí)，這些Loading動(dòng)畫活躍的身影。

在2007年的時(shí)候，網(wǎng)站的Loading形式大概是下面這張圖上的樣子：

2007年時(shí)的Loading

在那個(gè)年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動(dòng)畫。

到了2010年，隨著CSS3的迅猛發(fā)展，出現(xiàn)了很多教程教大家如何做CSS3動(dòng)畫，也能找到大量的loading 動(dòng)畫預(yù)設(shè)包。設(shè)計(jì)師也可以在Ps cs5中做這種loading動(dòng)畫，這個(gè)在10年前是非常流行的。

在那時(shí)，Loading動(dòng)畫更像是web的專屬問題，因?yàn)轫撁鎙oading確實(shí)是一個(gè)問題。在2010年的時(shí)候，很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動(dòng)畫：

30個(gè)創(chuàng)意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）

漸漸地，設(shè)計(jì)師們開始不滿足于簡單的進(jìn)度條和旋轉(zhuǎn)Loading，到2014年-2016年的時(shí)候，變得更加關(guān)注這塊的設(shè)計(jì)。所以，你能發(fā)現(xiàn)更多關(guān)于loading教程，免費(fèi)的Loading設(shè)計(jì)資源，插件和開源項(xiàng)目。

2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

設(shè)計(jì)趨勢和方法已經(jīng)發(fā)生了變化，但向用戶提供有效反饋的原則依然需要遵循。

優(yōu)秀loading動(dòng)畫所具備的特征

在一個(gè)完美的世界里，loading動(dòng)畫應(yīng)該：

盡可能少的顯示給用戶

如果你的工具或網(wǎng)站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A(yù)期，顯示好看的loading動(dòng)畫只是一個(gè)緩兵之計(jì)，等待太久了一樣會(huì)惹惱用戶。所以，首先應(yīng)該是解決內(nèi)容的loading問題。

給出具體時(shí)間

它可以是一條簡單的文本信息，告知大致的等待時(shí)間，也可以是可視化的圖形來表示?？偣采蟼髁硕嗌傥募扛滦枰嗌俜昼?？已經(jīng)進(jìn)行到了什么階段？這些體驗(yàn)上的設(shè)計(jì)細(xì)節(jié)都可以給用戶預(yù)期并減少焦慮。

宇航員數(shù)據(jù)loadingby Cream M.

告訴用戶為什么需要等待

一些應(yīng)用的loading過程，通常讓用戶不大容易理解。一個(gè)好的Loading動(dòng)畫，應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么：

文件獲取動(dòng)畫 by Vinoth

讓我們說回我的案例，那個(gè)反饋工具軟件。當(dāng)我們的等待時(shí)間超過1秒時(shí)，我們決定給這段等待時(shí)間增加一段解釋。動(dòng)畫說明應(yīng)用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：

好的loading動(dòng)畫

讓等待的過程不那么讓人無聊

可以放一個(gè)有趣的動(dòng)畫來吸引人，讓用戶的眼睛始終保持忙碌。

動(dòng)畫來源：Alex Kunchevsky

減少用戶等待時(shí)間的心理感知

這與上面提到的一點(diǎn)非常相關(guān)，如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西，那么感覺上時(shí)間就會(huì)過得更快。它可以是一個(gè)引人注目的色彩搭配，有趣的想法，或者是一個(gè)什么特別的東西。

蛋糕loading by Pierre Kleinhouse

透傳公司品牌形象

如果用戶在用你的應(yīng)用或者網(wǎng)站時(shí)會(huì)有一段等待時(shí)間，為什么不機(jī)智的利用好這段時(shí)間呢？我不建議僅僅只是為了做loading而做一個(gè)loading動(dòng)畫或者去在動(dòng)畫里使用一些心理學(xué)技巧。我覺得最好是將品牌的聲音融入整個(gè)Loading動(dòng)畫中，讓它成為一個(gè)非常重要的設(shè)計(jì)細(xì)節(jié)：

BCG的車票應(yīng)用動(dòng)畫 by Antonin

細(xì)節(jié)可以做出精彩

雖然有些人可能會(huì)認(rèn)為Loading只是一個(gè)很小的UI細(xì)節(jié)，但它其實(shí)也有許多類型和變化。一般來說，我把loading動(dòng)畫分為幾類，進(jìn)度條，無限循環(huán)的loading圖和骨架圖。

進(jìn)度條

當(dāng)可以明確loading時(shí)間時(shí)使用，進(jìn)度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。

有數(shù)字進(jìn)度的，有時(shí)也稱為百分比指示符。他們可以簡單直接，也可以很有創(chuàng)意，需要對你的用戶業(yè)務(wù)表達(dá)更有效：

一個(gè)app loading頁 by Nguyen Tran

你也可以找到有趣的進(jìn)度條和循環(huán)動(dòng)畫結(jié)合的loading圖。

Loading動(dòng)畫by Dragonlady

進(jìn)度條背后的主要思想是顯示一個(gè)操作將花費(fèi)多長時(shí)間以及目前所處的狀態(tài)。根據(jù)UI需求的不同，進(jìn)度條也可以是線性的，沒有百分比的形式。

想想Gmail，它沒有顯示進(jìn)度百分比，但是用戶同樣可以感覺到加載的進(jìn)度。下面是兩個(gè)簡單而又創(chuàng)意的例子：

Gamil loading和一個(gè)創(chuàng)意loading動(dòng)畫 by  Allen Zhang

無限loading動(dòng)畫

當(dāng)loading的時(shí)間是未知的時(shí)候來使用，它可以是默認(rèn)的旋轉(zhuǎn)圖，也可以是一些創(chuàng)意動(dòng)畫，顯示應(yīng)用正在做一些事情。

計(jì)算loading圖標(biāo) by Hoang Nguyen

創(chuàng)意性loading動(dòng)畫一樣可以與業(yè)務(wù)緊密相關(guān)，并幫助支持品牌發(fā)聲。請思考下那些應(yīng)用會(huì)使用這種loading動(dòng)畫？

LittlePin Spinner by Daniel Sofinet

無限循環(huán)動(dòng)畫要求用戶在上傳或執(zhí)行某些操作時(shí)等待，但不要求具體需要多久時(shí)間，它們可能會(huì)非常簡單或非常有創(chuàng)意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠(yuǎn)不停下來。

如你所見，如今的loading動(dòng)畫不僅僅只是一個(gè)系統(tǒng)狀態(tài)的UI元素。

骨架動(dòng)畫

骨架動(dòng)畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內(nèi)容。

這個(gè)詞最早出現(xiàn)在Luke Wroblewski 的文章中，Luke建議使用骨架動(dòng)畫來獲得更好的loading體驗(yàn)。這個(gè)想法得到了其他設(shè)計(jì)師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。

舉個(gè)栗子，如果你使用的是網(wǎng)頁設(shè)計(jì)工具Figma，你會(huì)在頁面頂部看到一個(gè)進(jìn)度條，同時(shí)還在逐步loadingUI：首先你會(huì)看到占位符，然后才是可用數(shù)據(jù)：

Figma UI

簡單處理還是精心制作

除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計(jì)概念，在目前大多數(shù)應(yīng)用中，你可能能看到還是一個(gè)默認(rèn)的Loading。

有一段時(shí)間，簡單的Loading被大眾所推崇，因?yàn)樗麄儗τ谛阅艿挠绊懽钚。ㄓ绕涫菍τ趙eb）。使用默認(rèn)的或開源的loading要容易的多，不需要設(shè)計(jì)師和開發(fā)花心思來設(shè)計(jì)和實(shí)現(xiàn)它。

如果你正在開發(fā)MVP或者項(xiàng)目的第一個(gè)版本，那么使用簡單的或者開源的loading動(dòng)畫更符合邏輯。在這個(gè)階段，即使把loading動(dòng)畫做的再怎么有創(chuàng)意，也并不會(huì)對你的產(chǎn)品有多么大的幫助，如果它不能解決真正的需求。

一些簡單的loading動(dòng)畫案例

有趣的是，在2016-2019年，我們可以看到非常多精心的loading動(dòng)畫。注重細(xì)節(jié)，日益成熟的設(shè)計(jì)公司，更好的科技環(huán)境，更方便的設(shè)計(jì)工具，這些都使得loading動(dòng)畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動(dòng)畫，所以這也成了展現(xiàn)自己設(shè)計(jì)能力的一種方式。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

在設(shè)計(jì)的時(shí)候，各種視覺要素以有序的方式排列，設(shè)計(jì)師需要通過對各部分空間的精妙設(shè)置來實(shí)現(xiàn)這一點(diǎn)。通常而言，我們的目光總會(huì)被最引人注目的部分吸引——無論它是視覺主體還是負(fù)空間。視覺主體和負(fù)空間，兩者都很重要，尤其當(dāng)你需要平和地呈現(xiàn)一個(gè)和諧、連貫、天衣無縫的設(shè)計(jì)。那么在一個(gè)網(wǎng)頁設(shè)計(jì)作品中，設(shè)計(jì)師到底利用空間傳達(dá)出怎樣的一個(gè)故事呢？這就牽涉到我們今天要聊的主題了，格式塔原理。

人類的大腦天生就能把規(guī)律性的散點(diǎn)連接起來，并對目之所及的事物賦予意義。設(shè)計(jì)是一個(gè)創(chuàng)造性的領(lǐng)域，是形式和空間的相互融合，并隨之創(chuàng)造各種各樣的體驗(yàn)。無論我們接觸到什么樣的設(shè)計(jì)作品，我們的大腦都會(huì)本能地將作品解構(gòu)為更簡單的各個(gè)組件，這些組件由基本的形狀和不同的形態(tài)組成，而這些形狀和形態(tài)則與空間息息相關(guān)。過往豐富的體驗(yàn)與經(jīng)歷，使得我們的腦海中充滿了各種各樣的記憶，于是我們很容易就能識(shí)別出這些特定的設(shè)計(jì)形式。

正空間，或者說顯著的設(shè)計(jì)主體，構(gòu)成了設(shè)計(jì)的「肉體」，它是你看到形狀、顏色、圖案等部分。相反，負(fù)空間多數(shù)情況下是指背景或大量留白。

文森特·梵高（Vincent Van Gogh）的這幅廣受歡迎的作品，是一個(gè)以正負(fù)空間之間有著強(qiáng)對比的經(jīng)典設(shè)計(jì)案例。

就像正空間似乎支配著負(fù)空間一樣，兩者都被用來平衡地傳達(dá)一個(gè)和諧、連貫的設(shè)計(jì)理念。

在平衡的構(gòu)圖中，設(shè)計(jì)的正負(fù)空間都是相互配合、相互補(bǔ)充的，形成一個(gè)無縫、美觀的整體。相反，不平衡的構(gòu)圖會(huì)讓觀眾感到不適，傳達(dá)出一個(gè)不完整的、扭曲的故事。

我們的設(shè)計(jì)在表達(dá)什么？

網(wǎng)頁設(shè)計(jì)的好壞很大程度上取決于它的實(shí)用性和可用性。如果你的設(shè)計(jì)技巧很差，那么網(wǎng)頁設(shè)計(jì)的整體效果和表現(xiàn)都會(huì)受到影響。但從另一個(gè)角度來看，在「內(nèi)容為王」的時(shí)代，如果空間布局使用不當(dāng)，內(nèi)容將對您的網(wǎng)站產(chǎn)生顯著的負(fù)面影響。

如果你認(rèn)為你的開發(fā)技能很棒，但你的設(shè)計(jì)技能可能需要更多的改進(jìn)，那這篇文章對你就太合適了。在本文中，我們將討論：

• 正負(fù)空間之間的關(guān)系、重要性及應(yīng)用；
• 空間與認(rèn)知知覺的關(guān)系；
• 格式塔原理及其它在網(wǎng)頁設(shè)計(jì)中的應(yīng)用。

我們還將討論一些真實(shí)的網(wǎng)頁設(shè)計(jì)實(shí)例，探討每個(gè)案例如何體現(xiàn)格式塔原理，以及它對空間的創(chuàng)造性使用。

話不多說，一起開始學(xué)習(xí)吧。

一、正負(fù)空間的關(guān)系、重要性及應(yīng)用

空間由兩個(gè)主要維度組成：正空間和負(fù)空間。正空間是可被直接感知到的視覺元素，負(fù)空間則為元素以外的留白和間隙。如前所述，正的是物體，負(fù)的是物體后面可以通常被忽略的留白區(qū)域。一個(gè)是焦點(diǎn)，另一個(gè)是背景。在前者產(chǎn)生活動(dòng)和刺激時(shí)，后者則保持靜止和模糊。一個(gè)是月亮，另一個(gè)是環(huán)繞著它的暗夜。

在網(wǎng)頁設(shè)計(jì)中，正負(fù)空間相互作用，共同形成構(gòu)圖，傳達(dá)理念。只有當(dāng)正負(fù)空間通過對比來區(qū)分，同時(shí)又向更大的區(qū)域延伸時(shí)，才會(huì)產(chǎn)生視覺層次（腦補(bǔ)一下陰陽太極圖吧）。

正負(fù)空間的交匯之處就是信息的交匯點(diǎn)。負(fù)空間拱衛(wèi)著正空間元素，讓后者更加突出和顯著。

通常而言，正空間在絕大多數(shù)時(shí)候起主導(dǎo)作用，實(shí)際上負(fù)空間同樣重要。負(fù)空間的優(yōu)點(diǎn)在于:

• 創(chuàng)建易于遵循的視覺層次；
• 吸引注意力，營造焦點(diǎn)，減少分心；
• 幫助營造邊界，突出焦點(diǎn)；
• 讓頁面更容易被掃讀；
• 使頁面看起來自然；
• 不借助外力的情況下，闡明視覺元素之間的關(guān)系；
• 有助于保持頁面干凈清爽；
• 強(qiáng)化網(wǎng)頁的視覺風(fēng)格和外觀。

設(shè)計(jì)中的負(fù)空間相反并不是負(fù)面的。當(dāng)正負(fù)空間比例平衡得當(dāng)時(shí)，兩者在視覺上會(huì)顯得非常舒適。而當(dāng)其中一個(gè)占據(jù)主導(dǎo)地位，并給人一種「過于擁擠」或「空洞無物」的印象時(shí)，混亂才會(huì)發(fā)生。在這兩種情況下，受眾都無法處理如此復(fù)雜的信息，因此，而這樣的空間設(shè)計(jì)是不符合網(wǎng)頁設(shè)計(jì)的基本原則和設(shè)計(jì)動(dòng)機(jī)的。

這是一個(gè)網(wǎng)頁模板，它展現(xiàn)了何為「內(nèi)容錯(cuò)位」和「空間混亂」:

△ 布局混亂

△ 空間失衡

△ 適當(dāng)?shù)牟季终{(diào)整

△ 網(wǎng)頁設(shè)計(jì)中空間的合理運(yùn)用

有意思的是，當(dāng)談到空間的概念和布局出現(xiàn)時(shí)，質(zhì)疑聲也隨之而起。

• 是正空間被負(fù)空間包圍，還是負(fù)空間被正空間吞噬？
• 如何確定正負(fù)空間的比例？
• 兩種空間類型中，哪一個(gè)作為焦點(diǎn)對象？
• 是否必須突出其中一個(gè)而忽略另一個(gè)，以便向觀眾傳達(dá)設(shè)計(jì)師的預(yù)期感知？
• 我將如何通過正負(fù)空間之間的變化讓設(shè)計(jì)出現(xiàn)質(zhì)的變化？

類似的問題只能在理解基本概念后再來作答。黃金經(jīng)驗(yàn)法則告訴我們——簡單是最好的策略。

在文章開頭，我曾提到在設(shè)計(jì)網(wǎng)頁的時(shí)候，盡量創(chuàng)建簡單的用戶界面，這是一舉兩得的舉措，既可以造福你自己，也可以惠及用戶。或從表面上看，網(wǎng)頁設(shè)計(jì)的重點(diǎn)在于增加網(wǎng)站的視覺吸引力，使用戶操作更為簡便。

二、空間與認(rèn)知知覺之間的聯(lián)系

我們的大腦總是在扮演偵探的角色，試圖尋找隱藏的線索和空間之間缺失的聯(lián)系。因此它會(huì)將當(dāng)前的視覺信息與之前的經(jīng)驗(yàn)進(jìn)行比對。為了成為一名的網(wǎng)頁設(shè)計(jì)師，你必須先了解大腦是如何感知周圍環(huán)境的。它可以幫助你選擇特定的視覺元素，利用它們來影響觀眾的感知。

偉大的設(shè)計(jì)師明白心理學(xué)在視覺感知中所扮演的強(qiáng)大角色。當(dāng)某人的目光與你的設(shè)計(jì)作品相遇時(shí)會(huì)發(fā)生什么？他們對你的文章所傳達(dá)的信息有何反應(yīng)？——?jiǎng)诶げ际?，Autodesk 品牌內(nèi)容策略師

作為設(shè)計(jì)師，你必須清楚地了解視覺設(shè)計(jì)和心理學(xué)是如何相互聯(lián)系、相互影響的。換句話說，開發(fā)以用戶為中心的簡單界面，借助正負(fù)空間進(jìn)行設(shè)計(jì)主要依靠格式塔原理，它可以幫助你理解和控制視覺和心理的聯(lián)系。

三、網(wǎng)頁設(shè)計(jì)中的「格式塔原則」

格式塔在德語中是「形式」的意思。它更多的是一個(gè)概念而不是一個(gè)單純的詞匯，它最基本的概念是：

整體大于各個(gè)部分的總和?！獛鞝柼亍た挤蚩ǎ兰乱嵝睦韺W(xué)家，格式塔心理學(xué)的代表人物之一）

當(dāng)單個(gè)部分的集合以某種方式統(tǒng)一時(shí)，它們在我們的感知當(dāng)中就是一組。我們把元素看作一個(gè)整體，這一概念或理論基本適用于所有的設(shè)計(jì)媒介：我們不把文本、顏色和形狀看作單獨(dú)的元素，而是把整個(gè)網(wǎng)頁看作一個(gè)整體。同樣的道理也適用于森林：我們看到的不僅僅是一堆樹，就像我們在看海洋時(shí)看不到水滴一樣。

格式塔原則描述了當(dāng)特定的條件出現(xiàn)時(shí)，人類大腦是如何感知視覺成分的。它幫助大腦創(chuàng)造視覺圖像。因此，格式塔原理通常會(huì)應(yīng)到下面六個(gè)主要類別：

• 圖形和背景
• 接近性原則
• 對稱和秩序
• 相似性
• 封閉性
• 連續(xù)性

1. 圖像和背景

「圖形」是直觀地、明顯地與背景分離的物體。

目前最經(jīng)典的例子是圣杯——兩個(gè)鏡面對稱輪廓構(gòu)成了花瓶。當(dāng)你第一次看到這張照片的時(shí)候，你的眼睛會(huì)立即被吸引到畫面上看起來最聚焦的視覺主體上，可能是相互對立的面孔，也可能是花瓶。當(dāng)你的大腦在調(diào)整你的焦點(diǎn)時(shí)，背景或花瓶被模糊了，在那一刻，你的大腦直覺地在圖像中感知到背景。

過了一會(huì)兒，你會(huì)注意到背景中的花瓶，并意識(shí)到它本來就在那里。盡管圖形和基本原則看起來模棱兩可，設(shè)計(jì)師常常創(chuàng)造視覺上吸引人的超現(xiàn)實(shí)和虛幻藝術(shù)，并將之運(yùn)用于網(wǎng)頁設(shè)計(jì)。

有時(shí)，圖形與背景之間的關(guān)系是穩(wěn)定的，而這種穩(wěn)固的視覺關(guān)系使得兩者之間，產(chǎn)生區(qū)別。這種關(guān)系有的時(shí)候又是不穩(wěn)定的，這意味著圖形和背景是無法清晰區(qū)分的。由于這種關(guān)系的模糊性，用戶會(huì)很自然地開始困惑。

為了讓大家直觀地感受到圖形和背景之間的關(guān)系，讓我們詳細(xì)的拿幾個(gè)案例來進(jìn)行討論。這些例子都集中在圖形-背景關(guān)系中的三個(gè)主要方面：對比度、Box 區(qū)塊和陰影。這三方面涉及到諸多屬性，包括顏色、尺寸和信息量，它們關(guān)系到內(nèi)容的區(qū)分和視覺的縱深。

在下面的第一個(gè)例子中，Trellis 使用了一個(gè)全屏大圖背景，并且搭配上清晰的 CTA 元素，圖形-背景關(guān)系明確，該關(guān)系清楚地展示出了細(xì)節(jié)、色彩和尺寸上的差異。

頁面中的文字是位于中央的手寫風(fēng)格字體，與背景中的圖像相比顯得很突出。和灰色背景圖片構(gòu)成對比的白色文本是吸引用戶注意力的焦點(diǎn)，這使得文本在畫面中是高度可見的。從另一個(gè)角度來看，背景圖片是模糊的，所以清晰的文本會(huì)非常醒目。這些都表明，這里的文本被優(yōu)先考慮為圖形或正空間，而模糊的圖像被用作背景或負(fù)空間，從而強(qiáng)烈地暗示了圖形和背景之間的關(guān)系。

下一個(gè)案例是下圖方框里的內(nèi)容。 Ocean Health Index 巧妙地利用了框內(nèi)區(qū)域的內(nèi)容將圖片與背景分離開來。這是你在瀏覽他們的網(wǎng)站時(shí)看到的：

當(dāng)你第一次瀏覽這個(gè)頁面時(shí)，哪個(gè)部分會(huì)吸引你的注意力？你會(huì)發(fā)現(xiàn)，它的主要文本為白色和藍(lán)色背景構(gòu)成對比，而更加醒目的是是兩個(gè)與文字對比鮮明的 Box 區(qū)塊。前者借助了深色背景和文本色彩上的差異，構(gòu)造對比度。而 Box 區(qū)塊本身的色彩和背景色構(gòu)成對比的同時(shí)，還和更靠前的文本構(gòu)成色彩對比。

背景使用了微妙的色調(diào)，使數(shù)字得以鮮明地展現(xiàn)，并突出細(xì)節(jié)。方框的運(yùn)用使它們在頁面上清晰可見。

一些網(wǎng)站還通過添加陰影來表現(xiàn)物與背景的關(guān)系，產(chǎn)生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com：

Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關(guān)系。明亮顏色和陰影的配合；背景是純粹的白色，使得前景元素更容易從中出來。背景之上的元素都是「正空間」，圖中的物體呈現(xiàn)在背景的映襯下，有一種被置于「頂部」的錯(cuò)覺。而陰影并沒有直接用在圖片和文本上，而是應(yīng)用在圖片的內(nèi)部，這讓我們注意到在主要圖像內(nèi)部還有另一層視覺元素，這意味著里面還有一層圖片-背景關(guān)系——這是一個(gè)非常智慧的設(shè)計(jì)。

2. 接近性原理

接近性是指頁面中元素之間的接近程度。網(wǎng)頁中的不同元素可以組合在一起，不同的接近程度會(huì)帶來不同的關(guān)聯(lián)屬性。除了視覺特征上的接近性之外，這些元素與其他頁面元素之間的距離接近度也會(huì)自動(dòng)地在觀眾的腦海中產(chǎn)生關(guān)聯(lián)感。

從圖像到文本、導(dǎo)航欄到網(wǎng)頁表單，這種接近性原則在網(wǎng)頁設(shè)計(jì)中適用范圍非常廣。將類似的內(nèi)容組合在一起時(shí)，它將在元素之間創(chuàng)建關(guān)聯(lián)，為觀者提供更好的視覺體驗(yàn)。

以下是 Mashable 網(wǎng)站導(dǎo)航顯示的運(yùn)用接近度的案例：

在上方的截圖中，我們可以清楚地看到如何將相同類別的元素放在一起，以顯示它們與主菜單的關(guān)系。由于顏色和文本大小的選擇，使觀者的目光自動(dòng)被吸引到主標(biāo)題下的子欄目上。

除了導(dǎo)航欄外，基于網(wǎng)格的內(nèi)容也符合黃金比例的接近性。亞馬遜的產(chǎn)品列表就是最好的例子：

這個(gè)案例體現(xiàn)的是接近性還是相似性還有待討論。如你所見，具備視覺接近性的同類產(chǎn)品使用狹窄的留白進(jìn)行分組和分隔。這種接近性會(huì)指示用戶在類似的產(chǎn)品列表中，對其目標(biāo)產(chǎn)品基于購買偏好進(jìn)行排序。此外，封閉性原則也在類似項(xiàng)目的清單中發(fā)揮了作用。

現(xiàn)在，我們來仔細(xì)看看 Basecamp 的網(wǎng)頁表單設(shè)計(jì)，它在網(wǎng)頁設(shè)計(jì)中顯示了另一種接近性的理想情況：

可以看到上圖中的表單是被劃分為兩個(gè)主要部分的：個(gè)人信息和 ID 生成兩個(gè)部分。第一部分被暗示為最重要的字段，第二部分則是一個(gè)次要的需求。這兩個(gè)部分的標(biāo)題都因顏色和字體大小的不同而產(chǎn)生區(qū)別。在這個(gè)網(wǎng)頁表單中，接近度是一個(gè)重要指標(biāo)，它將網(wǎng)頁中呈現(xiàn)的信息按優(yōu)先級(jí)排列。

3. 對稱和秩序

對稱是指兩個(gè)元素呈現(xiàn)出鏡像關(guān)系。它可以被看作是把一個(gè)物體一分為二的平衡。真實(shí)的對稱圖形包括等邊三角形、圓形和正方形等幾何圖像。

人類的大腦會(huì)本能地渴望在面孔中找尋「平衡」和「對稱」，這在美學(xué)上是令人愉悅的。大腦也傾向于在其他物體中找到對稱，因?yàn)閷ΨQ創(chuàng)造和諧，讓觀者在觀看圖像時(shí)感到舒適。

下面是 HvD Fonts 在網(wǎng)頁設(shè)計(jì)中體現(xiàn)對稱性的一個(gè)很好的案例：

這個(gè)頁面不僅顯示了典型的圖形-背景關(guān)系，而且強(qiáng)調(diào)了對稱性原則的運(yùn)用。頁面被分成四等份，字體大小和顏色相似。四個(gè)部分中的每個(gè)部分的背景都具有相同的主題色和灰度效果。你也可以注意到負(fù)空間不一定是白色的，黑色甚至其他的顏色也可以以圖像作為背景。

對稱性原則還可以衍生出了另一個(gè)概念：在網(wǎng)頁設(shè)計(jì)中，不對稱會(huì)使觀感不佳，必須謹(jǐn)慎使用。許多網(wǎng)站使用不對稱作為平衡間距的元素——非常規(guī)的正空間元素與中性的背景相互平衡，反之亦然。而 Xplode 的營銷理念是不對稱，Xplode 以獨(dú)特的美觀悅目的方式引發(fā)不對稱。

這個(gè)網(wǎng)頁利用視覺錯(cuò)覺和不對稱，抓住了觀者的眼球。作為正空間的物體被放置在一個(gè)不對稱的布局之下，在負(fù)空間中創(chuàng)造了強(qiáng)烈的視覺吸引力。色彩是兩個(gè)空間和諧的主要因素，并為觀者創(chuàng)造了一種自然的聯(lián)系。左邊的圖形也有很強(qiáng)的平衡性，而右邊的則是帶來更強(qiáng)的視覺吸引力。你覺得這個(gè)設(shè)計(jì)如何呢？

4. 相似性原理

相似性與接近性原理密切相關(guān)的原因，是相似分組對象之間共享屬性的質(zhì)量。無論是顏色、形狀、形態(tài)、大小、方向或任何其他屬性，當(dāng)這些屬性中的一個(gè)或多個(gè)在鄰近對象中共享時(shí)，相似性將占上風(fēng)。

即使正空間的元素看起來沒有明顯的聯(lián)系，由于相似性原理，它們也會(huì)與負(fù)空間元素區(qū)分開。

看看這些 UrbanDecay 的商品列表：

雖然上面的商品各不相同，但在位置、色彩、產(chǎn)品布局、表現(xiàn)方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告，在同類產(chǎn)品中獨(dú)樹一幟。這顯然是一種營銷策略，目的是在不損害頁面整體對稱和美觀的情況下吸引注意力。這里要考慮的另一點(diǎn)是，尺寸上的相似性使其他圖像與相似的產(chǎn)品類別區(qū)分開來。

除了產(chǎn)品展示之外，正空間可以與相似度結(jié)合使用，也可以與負(fù)空間結(jié)合使用。

讓我們來看看 influenster 的著陸頁：

上面例子中對齊的邊框也運(yùn)用了相似性原理。雖然每個(gè)正空間元素是不同的，但是相似的感覺是通過整個(gè)頁面中一致的文本字段來傳達(dá)的。風(fēng)格、布局和主題都是相似的，因此帶來了統(tǒng)一的視覺效果。

5. 封閉性原理

你是否曾經(jīng)遇到過這樣一幅畫面，看上去是閉合的，但實(shí)際上是開放的？這是由于它采用封閉性原理。我們的大腦傾向于「腦補(bǔ)」不完整物體的空白，并利用我們的視覺感知來使圖形完整化。

正空間和負(fù)空間一起構(gòu)成一個(gè)整體。最好的案例就是負(fù)空間中隱藏的形狀和形式，這要求對正空間中要傳達(dá)的信息進(jìn)行評估。在封閉空間創(chuàng)造性地使用著正負(fù)空間，可以產(chǎn)生有趣但簡單的設(shè)計(jì)。

下面是 Magu Kambucha 的設(shè)計(jì)圖：

在這個(gè)案例中，可以看到封閉性和圖形-背景關(guān)系的平衡。瓶子和后面的粗體文字構(gòu)成對比，背景則是和兩者都構(gòu)成對比的柔粉色。封閉性體現(xiàn)在哪里？看到瓶子后面的文字了嗎？雖然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一個(gè)「K」和最后一個(gè)「A」，其他字母都是半隱藏的，這些字母都是憑觀者的直覺自動(dòng)完成的，整個(gè)形式開始成形，意義也隨之成形。

下面是 Cult 的截圖：

即使文本沒有寫得很清楚，我們的頭腦可以很容易地讀到 CULT 這個(gè)詞。即使單詞不完整，文本的排列和對齊也可以使其易于辨認(rèn)。

6. 連續(xù)性原理

最后，根據(jù)一般格式塔原則，連續(xù)性遵循模式，即引導(dǎo)實(shí)現(xiàn)遵循一致的路徑，建立從一個(gè)對象到另一個(gè)對象的線性模式。

在上面的圖片中，盡管圓形色塊的顏色變淡了，但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續(xù)性的原理比色彩的力量更能引導(dǎo)用戶的視覺感知。當(dāng)我們借助負(fù)空間在視覺元素中畫出路徑，我們的眼睛傾向于優(yōu)先感知正負(fù)空間之間的界限。

腦補(bǔ)出來的這條連續(xù)的線條是我們在設(shè)計(jì)中更應(yīng)該引入的視覺線索。

讓我們來看看 Crypton Trading 網(wǎng)站中的視覺線索設(shè)計(jì)：

看到頁面右半部分設(shè)計(jì)的完美延續(xù)了嗎？不管背景的明暗色調(diào)如何變化，圖案在頁面上的變化都非常顯著。當(dāng)你向下滾動(dòng)時(shí)，你會(huì)看到圖案和顏色是如何以連續(xù)和無縫的運(yùn)動(dòng)變化的。在這里，色調(diào)的變化是可以忽略的，我們所看到的是一個(gè)連續(xù)的線和點(diǎn)的模式。

另一個(gè)很好的例子是 OscilloScope 網(wǎng)站：

該網(wǎng)站借用連續(xù)性法則，將網(wǎng)站用戶引入到工作室的 360 度視角中，他們可以在導(dǎo)航中選擇所需的子欄目。

影片《Cargo》的著陸頁也使用了連續(xù)性法則：滾動(dòng)式的導(dǎo)航，以線性運(yùn)動(dòng)的方式讓文本漂浮在網(wǎng)站上。由于 LOGO 是垂直展現(xiàn)的，所以用戶必須向下滾動(dòng)才能看到它的全貌。當(dāng)頁面向下滾動(dòng)時(shí)，靜態(tài) LOGO 開始與并行的文本塊一起浮動(dòng)。導(dǎo)航引導(dǎo)用戶經(jīng)歷不同層次的體驗(yàn)，而不會(huì)干擾隱藏在下面的內(nèi)容。

由于我們的眼睛通常遵循最平滑的路徑，設(shè)計(jì)師可以使用這樣的方式來創(chuàng)建引導(dǎo)路徑。

總結(jié)

在這篇文章中，我們討論了格式塔原則與網(wǎng)站 UI 的正負(fù)空間之間的關(guān)系。通過一些真實(shí)的案例，讓大家清楚地知道如何運(yùn)用簡單有效的方法來改變設(shè)計(jì)的觀感。關(guān)鍵是使用這些原理來設(shè)計(jì)的時(shí)候，可以達(dá)到 1 + 1 > 2 的效果。

人類是根據(jù)感知來思考的——主要是基于視覺。根據(jù)格式塔原理，我們傾向于看到更大的整體性圖景，而不是第一眼看到的某一單個(gè)元素。

正負(fù)空間幫助我們區(qū)分、回憶、感知并識(shí)別理解。在格式塔原理的引導(dǎo)下，我們能夠更好地在網(wǎng)頁設(shè)計(jì)中利用不同元素來創(chuàng)造吸引人的作品。因?yàn)榭臻g對于任何設(shè)計(jì)師來說都是一件復(fù)雜的事情，所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認(rèn)識(shí)到空間在設(shè)計(jì)中的重要性、有效性，繼而使自己成為網(wǎng)頁設(shè)計(jì)領(lǐng)域的佼佼者。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

作為交互設(shè)計(jì)師，天天畫的就是交互稿了。而對于很多新手交互設(shè)計(jì)師以及想轉(zhuǎn)行做交互的同學(xué)們來說，一定都非常想知道大廠的交互設(shè)計(jì)師畫出來的交互稿具體是什么樣子的。

但和視覺稿不同，交互稿里面體現(xiàn)了太多產(chǎn)品本身的邏輯，難免涉及到一些敏感內(nèi)容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。

不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。

但我必須重點(diǎn)強(qiáng)調(diào)一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據(jù)自己的需要自由修改。

模版一：PPT  型的分頁交互稿

第一個(gè)是 PPT 型的分頁交互稿，這個(gè)樣式最早是從騰訊 CDC 團(tuán)隊(duì)流傳下來的，我在第二家公司的時(shí)候就從他們的博客中看到過，當(dāng)時(shí)還用 InDesign 做過一個(gè)模板。而我現(xiàn)在所在的團(tuán)隊(duì)用的也是這個(gè)，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。

1. 封面

封面很簡單，就是文檔標(biāo)題和作者，頂部有一個(gè)通用的文檔標(biāo)題欄，上面的內(nèi)容包括：

• 項(xiàng)目名稱：阿爾法項(xiàng)目（示意）
• 頁面標(biāo)題：iOS 主界面框架（示意，根據(jù)每頁的內(nèi)容進(jìn)行變化）
• 版本號(hào)：1.0（每修改一次都要 + 0.1，當(dāng)然你也可以直接變成 2.0、3.0）
• 修改日期：2018-07-24
• 頁碼：分為當(dāng)前頁碼和總頁數(shù)

我在 Sketch 中為這個(gè)模板中需要改動(dòng)的內(nèi)容都定義了 Symbol，比如這個(gè)標(biāo)題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內(nèi)容。

2. 修訂記錄

修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內(nèi)容，以及相關(guān)人員，方便后期交接的時(shí)候給對應(yīng)的產(chǎn)品經(jīng)理、游戲策劃和設(shè)計(jì)師查看。有時(shí)候交互稿更新一次只是修改一小處地方，如果不備注對方就會(huì)很難找到，可能以后你自己都會(huì)遺忘。

這一塊我也定義了 Symbol 元件，你可以直接復(fù)制一行，然后修改里面的內(nèi)容，「更新內(nèi)容」的文本支持多行輸入。

3. 目錄

這種分頁型的文檔一定要有目錄，備注好每個(gè)模塊對應(yīng)的頁碼，否則十幾頁看下來都暈了，每次想找到對應(yīng)的界面還得重新翻一遍。

4. 內(nèi)容頁面

具體的內(nèi)容頁面才是交互稿的核心，一般會(huì)用小氣泡和箭頭進(jìn)行標(biāo)注，然后在右側(cè)用對應(yīng)的數(shù)字和它們對應(yīng)，寫下詳細(xì)的交互說明。

結(jié)構(gòu)可以有很多種，比如上面這種豎屏的界面可以是左右結(jié)構(gòu)，如果是橫屏界面還可以是上下結(jié)構(gòu)等等，根據(jù)情況自由調(diào)整。文字段落的樣式我已經(jīng)定義好了，直接修改套用就行。

其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數(shù)字即可。

5. 導(dǎo)出方式

使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導(dǎo)出成 PDF 文檔。我很喜歡這個(gè)格式，與 PPT 相比，PDF 在任何平臺(tái)都可以通用，包括手機(jī)、Mac，不用特地裝什么軟件都能很好地打開。

模版二：長圖型的流程交互稿

另一種是更常見的交互稿形式，這也是我這幾年進(jìn)騰訊后一直使用的格式。

如果你曾經(jīng)用過上文介紹的 PPT 型模板，你一定會(huì)發(fā)現(xiàn)：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個(gè)大產(chǎn)品的交互功能介紹，而不適合小功能的頻繁修改。

今天介紹的這第二種，則是更加輕便快捷的類型。

1. 內(nèi)容模塊

這種長圖型的交互稿，優(yōu)點(diǎn)很明顯：

• 發(fā)揮空間大，可以直接在一片空白上盡情地闡釋每個(gè)界面、每個(gè)流程，展開說各種細(xì)節(jié)。
• 分享和閱讀都很方便，最終格式是一張 PNG 長圖，能隨手發(fā)給老板、產(chǎn)品經(jīng)理和其他相關(guān)同事，電腦手機(jī)都能看。
• 不存在分頁和各種格式限制，所以畫起來和修改起來都很快，小迭代要的就是效率。

來看一張基本樣例：

它的結(jié)構(gòu)分為：

交互稿標(biāo)題、日期

按照項(xiàng)目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標(biāo)化改版），可以地規(guī)范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內(nèi)容。

相關(guān)負(fù)責(zé)人

對應(yīng)的產(chǎn)品經(jīng)理，交互稿的作者，方便評審時(shí)或者交接后找人。

需求背景

簡單介紹為什么要做這次設(shè)計(jì)，出發(fā)點(diǎn)是什么，遇到了什么問題。

主要界面

這次設(shè)計(jì)中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據(jù)這些來進(jìn)行風(fēng)格設(shè)計(jì)。

流程說明

有了主要界面后，我們還可能需要對一些操作流程進(jìn)行說明，比如怎樣發(fā)送一條語音消息，怎樣刪除一條會(huì)話等等。

異常狀態(tài)

最后還要記得檢查一下，每個(gè)界面在沒有內(nèi)容時(shí)的空狀態(tài)、斷網(wǎng)時(shí)的異常狀態(tài)，彈出各種通知的位置等等，千萬不要等到開發(fā)同學(xué)找你的時(shí)候才想起來。

上面所說的，就是一份交互稿的常見內(nèi)容模塊了。

2. 模板使用

該模板是專門給 Mac 平臺(tái)的 Sketch 用的。

下載后（下載方式見文末），打開你會(huì)看到這個(gè)界面：

里面的每個(gè)模塊我都做了 Symbol 元件，你只要選中就可以在右側(cè)更改內(nèi)容了。

比如下面的文檔基本信息：

我還把可能會(huì)用到的各種字體大小、顏色、對齊方式都做成了文字樣式：

選中文字后，在右側(cè)下拉框中選擇你要的樣式就好。

交互稿用的都是黑白灰，還有藍(lán)色作為標(biāo)注。

我一直用的這幾種，足夠用。

是不是很心動(dòng)？別著急，先把這個(gè) Sketch 文件保存成 Template（模板）。

然后，你就可以在新建文件時(shí)，選擇從模板處新建，直接用這個(gè)模板開始畫稿。

源文件下載

下載鏈接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA

提取碼：npq2

備用鏈接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA

作者：WingST（寇敬），男，33歲，騰訊高級(jí)交互設(shè)計(jì)師、騰訊學(xué)院認(rèn)證講師，9 年工作經(jīng)驗(yàn)的資深互聯(lián)網(wǎng)人，曾任 MIG 桌面安全產(chǎn)品部軒轅設(shè)計(jì)組組長，目前在騰訊游戲 NEXT Studios 工作室負(fù)責(zé)《樂高無限》創(chuàng)造型沙盒游戲的用戶體驗(yàn)設(shè)計(jì)。

負(fù)責(zé)過的產(chǎn)品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網(wǎng)游助手等。曾在 OPPO 手機(jī)、金蝶軟件等企業(yè)工作，有著 PC、Web、移動(dòng)端等多平臺(tái)的豐富設(shè)計(jì)經(jīng)驗(yàn)。

結(jié)語

感謝大家的閱讀，末尾做個(gè)小廣告，我的新書《交互思維：詳解交互設(shè)計(jì)師技能樹》馬上就要上市了，這是我自己九年多來做交互設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)，也是市面上第一本詳細(xì)介紹交互設(shè)計(jì)師所應(yīng)該掌握的職業(yè)技能的書，適合所有希望了解交互、學(xué)習(xí)交互的設(shè)計(jì)師和產(chǎn)品經(jīng)理。同時(shí)書中也有我進(jìn)騰訊的成長故事，以及一些個(gè)人工作和學(xué)習(xí)方法的分享，絕對物超所值 → https://item.jd.com/12576242.html

這是我所總結(jié)的「交互設(shè)計(jì)師技能樹」。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

今天分享一款運(yùn)維相關(guān)的B端產(chǎn)品，主要闡述自身的設(shè)計(jì)思路及產(chǎn)品的優(yōu)化過程。

B端產(chǎn)品功能聚焦、講究效能，對產(chǎn)品鏈路有著高流暢度與率的訴求。設(shè)計(jì)師在做B端產(chǎn)品的的時(shí)候要有全鏈路和小白用戶視角，以體驗(yàn)及效率為先，我們需要協(xié)調(diào)全局一致性，遵循產(chǎn)品鏈路，在視覺上減少對于用戶的負(fù)擔(dān)和干擾，避免打斷用戶的使用流程，確保流暢、優(yōu)質(zhì)的用戶體驗(yàn)。

在產(chǎn)品優(yōu)化上，我們在每個(gè)版本迭代后，會(huì)對用戶進(jìn)行訪談及收集意見反饋，建議設(shè)計(jì)師可以制定一套自有的用戶調(diào)研方式去了解用戶的想法和自己產(chǎn)品的不足之處，這樣的好處是可以讓用戶幫助你優(yōu)化產(chǎn)品。

在產(chǎn)品的細(xì)節(jié)上我們可以深度地去挖掘和嘗試更好更優(yōu)的設(shè)計(jì)方式，對設(shè)計(jì)師來說打磨和優(yōu)化每一個(gè)細(xì)節(jié)正是B端產(chǎn)品的魅力所在。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

互聯(lián)網(wǎng)讓全世界都無線互聯(lián)，大家可以無視距離隨時(shí)瀏覽世界另外一頭的設(shè)計(jì)師所上傳的設(shè)計(jì)作品。無論是 Dribbble、Behance、Pinterest 還是國內(nèi)的各大社交媒體，想瀏覽別人作品獲取靈感，幾乎是0成本的事情。那么這樣做對于做設(shè)計(jì)、激發(fā)靈感進(jìn)行創(chuàng)造，真的有好處嗎？它所引發(fā)的抄襲的問題，其實(shí)是最現(xiàn)實(shí)可見的，對此，昨天所發(fā)布的文章《如何界定借鑒和抄襲？看這7位設(shè)計(jì)大咖怎么說！》里，7位來自世界各地的設(shè)計(jì)師，已經(jīng)對此發(fā)表了看法，而今天的文章里，99U 邀請了三位頂尖的創(chuàng)意人，闡述他們?nèi)绾慰创@種設(shè)計(jì)師中的「時(shí)代病」。

不斷上網(wǎng)瀏覽別人的作品這種「靈感時(shí)代病」對于做設(shè)計(jì)激發(fā)創(chuàng)意而言，到底有哪些利弊？在的設(shè)計(jì)辯論中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 對無休止的靈感素材的視覺進(jìn)行了權(quán)衡分析。

插畫師 Nadine Kolodziey

過于關(guān)注在線設(shè)計(jì)靈感類素材，會(huì)讓設(shè)計(jì)思路趨于千篇一律，扼殺創(chuàng)意。這就是為什么我們必須明智地管理我們的個(gè)人信息流?！瀹嫀?nbsp;Nadine Kolodziey

我們每時(shí)每刻都在上網(wǎng)，這意味著我們將會(huì)不斷地接觸到各種各樣的視覺刺激。

如果你總是在公交車上或休息時(shí)關(guān)注別人的設(shè)計(jì)作品，那么你就會(huì)不自覺地把它融入到自己的作品中。很快你就會(huì)意識(shí)到：「糟了，我剛剛做了一些看起來和其他人完全一樣的東西?！鼓銜?huì)發(fā)現(xiàn)，你在不斷地復(fù)制和重復(fù)別人的東西，盡管可能一開始是下意識(shí)的，但最終你會(huì)成為潮流的一部分。你忽略了你個(gè)人獨(dú)特的視角，別人的作品開始影響你的判斷和直覺。

而屬于你自己的那部分最獨(dú)特的東西，才是最有力道的。

我完全理解為什么人們想成為潮流的一部分?？蛻艨赡芟胍恍┤霑r(shí)的東西——在特定的圈子里以特定的方式行事，這樣做是有所幫助的。但最終這種做法所帶來的同質(zhì)化，對雙方的發(fā)展都會(huì)有所制約。插畫師在他們的作品中沒有個(gè)性，所有的客戶都在購買類似的風(fēng)格——這意味著他們的品牌缺乏獨(dú)特性。

如果你想獲得靈感，看其他的創(chuàng)意作品并不是最好的選擇。

看看其他的設(shè)計(jì)作品固然重要，這可以讓你緊跟行業(yè)發(fā)展步伐，但是要適度。如果你想獲得靈感，看其他的創(chuàng)意作品并不是最好的選擇。當(dāng)我在網(wǎng)上關(guān)注其他插畫家的作品時(shí)，我個(gè)人很難受到啟發(fā)。我已經(jīng)使用 Instagram 兩年半了。起初我總是看其他插畫家的作品，這是我的本職工作，我熱愛插畫。但后來我發(fā)現(xiàn)，這阻礙了我的創(chuàng)作潛力。

我開始注意到我的配色方案與其他人的相似。我注意到，看其他的作品降低了自己嘗試新事物所需的勇氣。當(dāng)我看到另一位插畫家的作品時(shí)，我不可能洞悉他的創(chuàng)作潛力。當(dāng)我在模仿他人的時(shí)候，我不可能有屬于自己的獨(dú)特創(chuàng)造力。

但是這個(gè)問題并非是無解的。解決之道就在于有選擇地關(guān)注?？赐碌淖髌泛涂匆话愕膱D片是有區(qū)別的。我對線上的靈感素材很感興趣，但是我更多地將這些素材視作為一個(gè)個(gè)「小貼士」，因此我注重于管理我的社交媒體所關(guān)注的賬號(hào)。我不再關(guān)注 Instagram 上的其他插畫家，而是關(guān)注那些在審美上吸引人的內(nèi)容。例如，我將關(guān)注那些收集不同尋常的石頭的人，或者為擺放得精美的和風(fēng)食物拍照的人。

我特別喜歡「I’m Google」這個(gè)賬號(hào)，它不是按主題而是按視覺來排列圖片。當(dāng)我看到這樣的圖片時(shí)，尤其是當(dāng)我開始著手準(zhǔn)備新項(xiàng)目的時(shí)候，它們會(huì)立即在我的腦海中激發(fā)出新的概念和全新的思路。這些資源成為我的靈感來源：當(dāng)我滾動(dòng)鼠標(biāo)時(shí)，我將看到來自外太空的巖石圖像，它的形狀將啟發(fā)我如何安排構(gòu)圖。

創(chuàng)意總監(jiān) Thomas Kronbichler

線上靈感素材固然可以鼓勵(lì)國際交流和對話，但問題出現(xiàn)在這些圖像在傳播的時(shí)候脫離了相關(guān)語境?！?a target="_blank" rel="noopener noreferrer" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">Thomas Kronbichler Mut工作室的創(chuàng)始人 創(chuàng)意總監(jiān)

在 Mut 工作室，我們是當(dāng)之無愧的互聯(lián)網(wǎng)擁簇，我們從不害怕靈感素材過載這種問題。我們是阿爾卑斯山脈中部一個(gè)叫做海蒂·蘭德小鎮(zhèn)上的一個(gè)小工作室，互聯(lián)網(wǎng)不僅為我們提供了來自世界各地令人嘆服的靈感，而且提供了一個(gè)展示自己作品的平臺(tái)，這在10年前是不可想象的。

正是因?yàn)閳D片可以在網(wǎng)上廣泛地傳播，我們才能讓歐洲和美國的用戶看到我們的作品。由于有了在線訂閱和社交媒體，平面設(shè)計(jì)社區(qū)現(xiàn)才有了如今繁榮的模樣。當(dāng)然，這也有負(fù)面影響，很多人說如今平面設(shè)計(jì)在審美上變得太相似了。但積極的一面是，現(xiàn)在有更多的平面設(shè)計(jì)作品涌現(xiàn)出來。任何地方的人都可以進(jìn)入這個(gè)行業(yè)而不再受到地域的限制，平面設(shè)計(jì)行業(yè)變得更具包容性。例如，歐洲各地的小鎮(zhèn)上都會(huì)有人在嘗試更瘋狂的創(chuàng)作，我們能透過網(wǎng)絡(luò)在不同的地方跟進(jìn)觀察，支持彼此。豐富的網(wǎng)絡(luò)靈感圖片的流通，最終有利于平面設(shè)計(jì)作為一種藝術(shù)形式而廣泛存在。

我并不是受到某張?zhí)囟ǖ膱D片啟發(fā)，而是在聽設(shè)計(jì)師講述設(shè)計(jì)思路的過程中獲益良多。

問題是對此互聯(lián)網(wǎng)并沒有過多關(guān)注。一些博客和自媒體上并沒有關(guān)于圖片來源的解釋。為朋友設(shè)計(jì)的項(xiàng)目和為大公司做的項(xiàng)目都在同一個(gè)空間中流通，這很有趣，但同時(shí)也弱化了應(yīng)有的差異化和環(huán)境。

作品背后的故事，以及設(shè)計(jì)過程中各種問題的解決過程，才是真正重要的內(nèi)容。我并不會(huì)受到某張?zhí)囟▓D片的啟發(fā)，而是在聽設(shè)計(jì)師講述設(shè)計(jì)思路的過程中獲益良多。了解設(shè)計(jì)師的獨(dú)特理念，則更有可能啟發(fā)我，我對設(shè)計(jì)師處理客戶關(guān)系的部分也很感興趣。當(dāng)然，這一切是不能用一張簡單的圖像來進(jìn)行概括的。

我已經(jīng)不再瀏覽 Tumblr 和 Pinterest，因?yàn)槲易罡信d趣的點(diǎn)，是了解一個(gè)問題是如何解決的。最終，我在設(shè)計(jì)師會(huì)議上發(fā)言的視頻實(shí)錄中獲得了最多的靈感。聽設(shè)計(jì)師們講述作品誕生的過程是最令人振奮的。我從一個(gè)人如何構(gòu)建一個(gè)項(xiàng)目，以及如何實(shí)現(xiàn)它的過程中學(xué)到了很多。我喜歡聽他們談?wù)摽蛻絷P(guān)系，講述他們遇到的困難以及如何克服它們。確切地說，更能鼓舞人心的是設(shè)計(jì)態(tài)度和思維方式。

在阿爾卑斯山的工作室中足不出戶，我就可以看 Michael 所有的視頻。

例如，就在上周，我狂看了所有 Michael Bierut 在線演講的視頻。我喜歡他展示作品的方式，喜歡他大方地和別人分享成果，我欽佩的是他的工作態(tài)度。在阿爾卑斯山的工作室中足不出戶，我就可以看遍邁克爾所有的演講視頻，這簡直太棒了。

藝術(shù)總監(jiān) Polina Joffe

對正在發(fā)生的事情有所知覺是非常重要的，而上網(wǎng)獲取靈感會(huì)簡化這個(gè)過程。——Polina Joffe，藝術(shù)總監(jiān)和平面設(shè)計(jì)師

如果你知道別人在做什么，你可以選擇參與其中，也可以選擇拒絕。而形成自己的觀點(diǎn)并做出明智決策的前提是你足夠了解。

我一直在關(guān)注其他人在網(wǎng)上會(huì)做什么，我也會(huì)在博客和社交媒體上上傳一些實(shí)用的干貨。當(dāng)涉及到具體的項(xiàng)目時(shí)，我會(huì)做具體的項(xiàng)目研究。我們會(huì)從互聯(lián)網(wǎng)上獲得大量的靈感，這使得研究階段變得非常簡單和。我經(jīng)常會(huì)想起設(shè)計(jì)師們以前在社交媒體上使用過的概念和想法，然后我會(huì)把這些想法和我自己的想法進(jìn)行重新轉(zhuǎn)化，組合并且更新，這樣它們就可以運(yùn)用在我的設(shè)計(jì)大綱中了。

瀏覽在線靈感素材，然后它們會(huì)形成屬于我自己的一個(gè)巨大的視覺詞典，里面有我腦海中所有的概念和方法，每當(dāng)我開始一項(xiàng)新的任務(wù)時(shí)，我都可以沉浸其中。

我們經(jīng)常談?wù)搧碜詢?nèi)心的創(chuàng)造力，但我不確信我是否真的要相信這一點(diǎn)。萬物皆有源頭。

我最近為泰特倫敦美術(shù)館的教育團(tuán)隊(duì)做了一個(gè)項(xiàng)目。這個(gè)項(xiàng)目是針對年輕人的。首先，如果你的目標(biāo)受眾是年輕人，了解年輕人都在做什么是很重要的事情了，因?yàn)檫@些信息很有參考價(jià)值。你需要運(yùn)用觀眾能夠理解的視覺語言。在項(xiàng)目的研究階段，我看了其他設(shè)計(jì)師是如何處理和學(xué)習(xí)這些屬于年輕人的理念的。最初我想用筆記本和活頁夾做點(diǎn)什么。然后我想起了我在網(wǎng)上看到的那些用活頁夾或記事本紙做的項(xiàng)目，然后我回去重新又看了一遍，看了其他人如何處理類似的主題，由此激發(fā)了我的新想法。

我們經(jīng)常談?wù)搧碜詢?nèi)心的創(chuàng)造力，但我不確信我是否真的要相信這一點(diǎn)。萬物皆有源頭。我認(rèn)為創(chuàng)造力通常是學(xué)習(xí)前人如何混搭各種想法，然后自己進(jìn)行特定的調(diào)整組合，二次創(chuàng)造。

誠然，視覺交流的發(fā)展是一部復(fù)制、更新、轉(zhuǎn)移的歷史。但重復(fù)別人已經(jīng)做了太多遍的東西，并使用類似的元素來直接竊取它們是有危險(xiǎn)的。當(dāng)你在做研究獲取靈感時(shí)，你必須通過多種方式參考海量的資源。如果我們能妥善地使用現(xiàn)有的大量圖像，就能鼓勵(lì)創(chuàng)新，跟上時(shí)代發(fā)展的步伐。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

質(zhì)感是什么？如何讓畫面擁有更高端的質(zhì)感？本文由質(zhì)感的原理出發(fā)，深入分析質(zhì)感表現(xiàn)所需要的要素，并通過實(shí)例來講解如何在作品中表現(xiàn)高端質(zhì)感。

很多同學(xué)在設(shè)計(jì)完成后，總是會(huì)發(fā)現(xiàn)頁面很單薄，導(dǎo)致整體看起來很粗糙、不耐看。究其原因，大多數(shù)是因?yàn)轫撁嫒狈|(zhì)感。

質(zhì)感，對于設(shè)計(jì)作品來說，是一個(gè)非常重要的視覺元素。它能夠提升作品的層次，讓整個(gè)作品更高端、更有品質(zhì)。

什么是質(zhì)感？

質(zhì)感，基本釋義為所表現(xiàn)的物體呈現(xiàn)出的物質(zhì)真實(shí)感和細(xì)膩的品質(zhì)感。這是一種視覺的綜合感受，會(huì)觸動(dòng)你的某種本能的綜合感官，讓你感覺非常舒服、非常爽。

我找了幾張比較富有質(zhì)感的圖片，大家可以感受一下這種感覺。

觀察完這些圖片后，你發(fā)現(xiàn)有什么共同點(diǎn)了嗎？我們可以試著來分析一下。

首先，物體本身的型是好看舒服的，并且細(xì)節(jié)足夠精致。

其次，在光的影響下，物體的表面呈現(xiàn)出細(xì)膩的光澤變化，以及通透而舒服的陰影，展現(xiàn)了豐富的層級(jí)關(guān)系。正是光的作用，讓這些視覺元素得以表達(dá)，讓我們沒有觸摸便能感知到這種質(zhì)感。

我們再來看一些優(yōu)秀的擬物作品。大家對照一下，是否都遵循相同的要素。

觀察這些優(yōu)秀的擬物作品，為什么會(huì)覺得有質(zhì)感呢？首先圖標(biāo)很精致，它的形具有一定的美感。但是這不足以讓它富有質(zhì)感，關(guān)鍵是它也符合了上面所說的幾個(gè)質(zhì)感要素。

最后，我們可以總結(jié)一下，質(zhì)感產(chǎn)生的要素：

• 整體光感：符合視覺原理的整體光感。
• 細(xì)膩的漸變：通過色彩漸變所模擬出的真實(shí)的質(zhì)感和豐富的層次感，以及柔和舒服、符合光感的投影。
• 細(xì)節(jié)/紋理：精致的細(xì)節(jié)/紋理，讓畫面足夠精美和耐看。

所以除了作品本身足夠精美以外，整個(gè)作品的光感需要和諧統(tǒng)一。每個(gè)元素表現(xiàn)的色彩變化規(guī)律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴(yán)謹(jǐn)?shù)慕y(tǒng)一。

這就要求你在繪制所有元素時(shí)，需要去假定一個(gè)統(tǒng)一的光源，這樣才能讓物體擁有更真實(shí)的質(zhì)感。

我們已經(jīng)了解了質(zhì)感產(chǎn)生的原理，下面就開始實(shí)際案例。每一個(gè)步驟我都會(huì)講解思考的過程和原因，方便大家理解。

案例解析

1. 整體背景和主體框架繪制

建立畫布（1200 x 900）。用矩形工具繪制背景和主體框架（1100 x 700），圖層樣式為漸變疊加，光線方向統(tǒng)一。

漸變是為了模擬背景的質(zhì)感和在光線下的變化，兩層光線方向需要統(tǒng)一。背景顏色稍淺且飽和度低，符合遠(yuǎn)近的視覺規(guī)律。

2. 繪制投影和主體背景

復(fù)制矩形作為投影層，顏色調(diào)整為黑色，轉(zhuǎn)為智能對象后，加入高斯模糊效果。調(diào)整矩形圖層的模糊度和透明度，移到適當(dāng)位置。具體參數(shù)對照圖中。投影的位置根據(jù)假定光源位置而定，使其符合視覺原理（詳見光線分析圖）。

繪制主體深色背景（1070 x 670），添加漸變疊加模式，漸變方向與前面保持一致。漸變的顏色對于質(zhì)感非常重要，恰當(dāng)且高級(jí)的漸變色，能夠在本質(zhì)上提升畫面質(zhì)感。而漸變方向則需要根據(jù)假定光源進(jìn)行判定。

為什么要這么繪制漸變與投影的位置呢？我繪制了一張光線分析圖，大家可以從圖中看出假定光源的位置，以此來確定漸變的方向以及投影的位置。

只有整體光感的統(tǒng)一，整個(gè)畫面才能表現(xiàn)出強(qiáng)烈的質(zhì)感。大家在繪制這一步時(shí)，需要用心體會(huì)假定光感的這個(gè)過程。

3. 將人物融入背景，提升發(fā)絲層次和質(zhì)感

放入人物圖片，圖層模式改為正片疊底。調(diào)整圖層透明度，添加蒙版使人物下半部分漸隱，與背景融合。

復(fù)制人物層，取消圖層模式和透明度。用選擇顏色命令提取發(fā)絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調(diào)整透明度使其融合進(jìn)人物。

為什么要做這一步呢？單純的人物在畫面中顯得太平了，所以需要豐富細(xì)節(jié)、增加層次。

4. 主體字體和投影繪制

輸入主體文字，圖層模式調(diào)整為漸變疊加，根據(jù)光源調(diào)整顏色漸變。案例中的英文字體為「Monotype Corsiva Regular」。這一步需要反復(fù)的嘗試，大家可以換一些字體嘗試一下。

復(fù)制一層作為投影，文本顏色改為黑色，圖層樣式設(shè)置為正片疊底，轉(zhuǎn)智能對象后模糊對象，調(diào)整圖層的透明度和大小，放在字體后面。字體的立體感依靠的仍然是統(tǒng)一的光源，需要想象字體在假定光源下的陰影關(guān)系。

投影能夠模擬真實(shí)感，需要若有若無的感覺，讓文字懸浮在圖層上面，豐富畫面層次。

5. 主體文字細(xì)節(jié)刻畫

根據(jù)字體的結(jié)構(gòu)，用形狀工具繪制出字體的立體關(guān)系。每一個(gè)形狀圖層繪制后需要兩層蒙版，一層為了限制字體范圍，一層為漸變蒙版。讓充滿立體感的文字懸浮于畫面中央，提升視覺中心的細(xì)節(jié)品質(zhì)。

6. 穿插細(xì)文與投影繪制

輸入細(xì)文，并復(fù)制一層作為陰影。不過因?yàn)樽煮w較小，距離拉遠(yuǎn)后投影肯定是看不清細(xì)節(jié)的，所以已經(jīng)模糊的若有若無，但還是需要有的。

表現(xiàn)文字穿插關(guān)系，讓「is an」懸浮于「L」上，并留下近距離投影。讓「attitude」穿過「e」字，遮擋部分文字。豐富的穿插和相互投影，進(jìn)一步增加主體文字的細(xì)節(jié)和層次，讓畫面細(xì)節(jié)豐富且更加耐看。

7. 繪制輔助圖形，增強(qiáng)畫面流動(dòng)感

為了豐富畫面細(xì)節(jié)，增強(qiáng)畫面流動(dòng)感，可以適當(dāng)加一些飄零的輔助元素。

繪制時(shí)需要注意的是，你需要明確整體視覺中心與運(yùn)動(dòng)的方向。輔助圖形沿著整體畫面，水平中心向右運(yùn)動(dòng)，你可以想象圖形散開后的畫面，并反復(fù)調(diào)整元素的合理位置。

如果沒有一定的規(guī)律，所有圖形就不像一個(gè)整體，就會(huì)看起來很亂。大家可以根據(jù)這點(diǎn)來判斷輔助元素是否需要進(jìn)一步調(diào)整。

8. 收尾工作，大功告成

最后，根據(jù)頁面需要，搭配上合適的元素，讓畫面更完整。

需要注意的一個(gè)細(xì)節(jié)是，由于所處的位置不同，這些元素在光照中呈現(xiàn)的顏色也會(huì)出現(xiàn)深淺變化，所以左邊的元素較淺，而右邊的元素會(huì)深一些。

怎么樣，是不是看起來并不難？

希望大家可以抽空認(rèn)真地跟著教程去嘗試一遍。只要你能夠理解每個(gè)步驟的目的，耐心地繪制每一個(gè)細(xì)節(jié)，相信你也能夠做出這種非常高端的質(zhì)感。

如果你能在制作時(shí)，用心思考和體會(huì)整個(gè)過程。就能在以后的作品中舉一反三，讓這個(gè)技能成為你自己的技能了。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

篩選是資源聚合類APP中不可缺少的功能，可幫用戶快速、精準(zhǔn)地找到需要內(nèi)容信息，根據(jù)資源分類形式的不同有多種篩選類型，并且不同的篩選類型還可以進(jìn)行自由組合，讓復(fù)雜的內(nèi)容信息更容易被篩選出來。

目錄

1. 橫向tab式篩選

2. 標(biāo)簽篩選

3. 下拉篩選

4. 底部篩選

5. 抽屜式篩選

1. 橫向tab式篩選

這是最常見的篩選樣式，屬于一級(jí)篩選。通常出現(xiàn)在導(dǎo)航欄或者是導(dǎo)航欄目的下方，根據(jù)分類層級(jí)的多少有4種展現(xiàn)形式。

一個(gè)層級(jí)

• 分類2~5個(gè)：所有類目都可以直接在tab欄目上展示出來，用戶可快速地在各個(gè)分類之間進(jìn)行切換；

• 分類大于5個(gè)：所有類目以相同的間距進(jìn)行橫向排布，引入橫滑操作，方便用戶瀏覽被隱藏的分類信息；有些產(chǎn)品也會(huì)在欄目右側(cè)增加下拉操作，點(diǎn)擊后下拉展示所有的分類，用戶可對所有分類進(jìn)行直觀的瀏覽；

• 
  

兩個(gè)層級(jí)分類

• Tab 欄目上只展示推薦分類或者用戶自己選擇的分類

當(dāng)內(nèi)容分類有兩個(gè)層級(jí)且分類比較多的時(shí)候，產(chǎn)品會(huì)根據(jù)用戶的喜好推薦幾種分類在tab上進(jìn)行展示；右側(cè)有篩選操作，點(diǎn)擊后在一個(gè)頁面里展示所有的分類。用戶可以在這個(gè)頁面自主選擇增減展示在tab上的分類，并且可以調(diào)整展示的順序。

交互細(xì)節(jié)

• 用戶在不同的類目間進(jìn)行切換的時(shí)候，篩選內(nèi)容在當(dāng)前頁面刷新展示；

• 不同的tab分類可以通過橫滑進(jìn)行切換；

• 位于內(nèi)容信息的上方，對下方的列表內(nèi)容進(jìn)行控制；

• 當(dāng)觸發(fā)篩選條件時(shí)，篩選欄目直接定位到導(dǎo)航欄下方。

2. 標(biāo)簽篩選

是一種輔助篩選樣式，通常位于某一分類標(biāo)題下方，或者跟tab篩選和下拉篩選搭配使用，有4種表現(xiàn)形式

① 內(nèi)容分類標(biāo)簽，充當(dāng)內(nèi)容入口。產(chǎn)品設(shè)定的內(nèi)容分類，分類層級(jí)較高，且內(nèi)容之間無交集，當(dāng)觸發(fā)操作的時(shí)候，會(huì)跳轉(zhuǎn)頁面進(jìn)行內(nèi)容展示。

② 大分類下的子篩選條件，分類層級(jí)比較低，當(dāng)用戶觸發(fā)操作時(shí)，內(nèi)容在當(dāng)前頁面進(jìn)行展示。

③ 篩選頁面，多維度的篩選條件以列表的形式進(jìn)行排布，標(biāo)簽是單一維度下的多種分類，可橫滑操作，這種方式可以幫助用戶快速進(jìn)行多維度的內(nèi)容篩選。篩選的結(jié)果直接展示在篩選條件下方，最常出現(xiàn)在視頻類APP內(nèi)做電影、電視篩選；馬蜂窩游記中也使用了這種分類形式。

3.下拉篩選

通常是在一個(gè)大的分類下做具體選擇的時(shí)候使用，這種篩選樣式可以承載1~3級(jí)分類層級(jí)。

單一層級(jí)

分類以列表的形式展示在頁面中，當(dāng)分類字段少且分類較多的時(shí)候也可以排2~3列進(jìn)行展示。

 

兩個(gè)層級(jí)

有三種排布方式

• ①直接以欄目標(biāo)題加列表內(nèi)容的形式排列。適用于兩個(gè)層級(jí)分類都較少，或需要用戶進(jìn)行操作（比較輸入框、滑塊）的場景使用。

• ②左側(cè)為一級(jí)分類信息展示區(qū)，右側(cè)為二級(jí)分類信息展示區(qū)，可以通過左側(cè)的一級(jí)分類控制右側(cè)的二級(jí)分類。適用于兩個(gè)層級(jí)分類都比較多的情況使用。

• ③上面為tab式的一級(jí)分類，下面是二級(jí)分類內(nèi)容的展示。適用于一級(jí)分類較少，二級(jí)分類較多的場景使用。

• 
  

三個(gè)層級(jí)

一級(jí)分類為tab形式展示在最上面，二三級(jí)為左右排布形式。

交互細(xì)節(jié)

• 放在內(nèi)容信息的上面，對下方內(nèi)容進(jìn)行控制；

• 當(dāng)觸發(fā)篩選條件時(shí)，篩選欄目直接定位在導(dǎo)航欄下方；

• 有2~3種信息層級(jí)的篩選，結(jié)果通常取得是不同信息之間的交集，所以需要在篩選中向用戶展示篩選結(jié)果數(shù)量，幫助用戶判斷是否調(diào)整篩選條件 ；如圖左

• 我們也可以選擇在篩選結(jié)果頁展示篩選標(biāo)簽，用戶可以在當(dāng)前頁面刪除部分標(biāo)簽，以查看更多的內(nèi)容信息；如下圖

備注：下拉篩選通常是多維度組合在一個(gè)欄目上展示，通常應(yīng)用在電商、外賣等內(nèi)容分類層級(jí)比較多，且層級(jí)內(nèi)的分類也比較多的場景里

4. 底部篩選

某一具體內(nèi)容需要通過多個(gè)篩選維度輔助篩選時(shí)使用，比如XX-XX的火車票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級(jí)的篩選層級(jí)，每種層級(jí)下的分類目都不能過多，是一種比較簡單輕便的篩選過程

單一篩選層級(jí)

① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內(nèi)容

 

兩個(gè)篩選層級(jí)

① 直接以欄目標(biāo)題加列表內(nèi)容的形式排列。

② 左側(cè)為一級(jí)分類信息展示區(qū)，右側(cè)為二級(jí)分類信息展示區(qū)

交互細(xì)節(jié)

處于頁面的底部導(dǎo)航欄的位置

當(dāng)用戶出發(fā)操作的時(shí)候，內(nèi)容從下往上彈出展示。

5. 抽屜式篩選

電商平臺(tái)應(yīng)用較多的分類形式，通常是有兩個(gè)分類層級(jí)，一、二級(jí)的分類類目都比較多，默認(rèn)情況下，如果分類特別多時(shí)可以只展示第一層級(jí)信息，用展開收起輔助用戶瀏覽二級(jí)類目信息。

交互細(xì)節(jié)

• 因?yàn)楹Y選的分類比較多，且通過展開收起會(huì)將已選擇的內(nèi)容遮擋上，所以我們需要以一種方式將已篩選的條件展示出來，方便用戶及時(shí)調(diào)整。eg.馬蜂窩將所有用戶選擇的內(nèi)容都放置在最前面，而京東選擇在欄目上方展示出來。

• 顯示有多少個(gè)符合篩選條件的內(nèi)容，幫助用戶決策篩選條件是否合理。

總結(jié)

本文主要講述了5種內(nèi)容篩選種類：tab篩選、標(biāo)簽篩選、下拉篩選、底部篩選和抽屜式篩選，選擇何種篩選類型跟內(nèi)容分類層級(jí)和分類數(shù)量相關(guān)，所以設(shè)計(jì)之前要先了解產(chǎn)品的分類及數(shù)量，有助于選擇更適合用戶使用的篩選樣式。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè)、平面設(shè)計(jì)服務(wù)。

 

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

程峰，滴滴出行高級(jí)設(shè)計(jì)總監(jiān)，具備互聯(lián)網(wǎng)和廣告行業(yè)工作雙重經(jīng)驗(yàn)，同時(shí)擁有用戶體驗(yàn)思維跟創(chuàng)意思維的他，對互聯(lián)網(wǎng)設(shè)計(jì)和創(chuàng)意設(shè)計(jì)都有著自己的獨(dú)到見解。

如今互聯(lián)網(wǎng)設(shè)計(jì)圈，方法論大行其道，很多設(shè)計(jì)師為了走捷徑過分依賴方法論，但他一直保持著初心，不驕不躁，他認(rèn)為：方法可以被總結(jié)創(chuàng)造，但設(shè)計(jì)功夫與思維是更可貴的東西，功夫+思維>方法論。

本次訪談，程峰分享了自己的觀點(diǎn)，包括設(shè)計(jì)師如何融合創(chuàng)意和用戶體驗(yàn)，在遭遇靈感枯竭的時(shí)候如何理性的找靈感等干貨內(nèi)容。不僅如此，他還偷偷告訴湖湖他在招聘設(shè)計(jì)人才時(shí)最看重的特質(zhì)。

△ 程峰，滴滴出行高級(jí)設(shè)計(jì)總監(jiān)

滴滴出行高級(jí)設(shè)計(jì)總監(jiān)；曾就職于搜狐、百度、Ogilvyone、Cheil鵬泰等知名互聯(lián)網(wǎng)公司及 Digital Agency；資深創(chuàng)意人、設(shè)計(jì)師，獲獎(jiǎng)眾多，對創(chuàng)意、設(shè)計(jì)有深入的了解。

藍(lán)湖：

介紹一下你自己，另外，可以跟大家詳細(xì)講講您的工作成長經(jīng)歷嗎？

程峰：

Hello，大家好，我是程峰。

我畢業(yè)后的第一份工作在是一家正版音樂公司擔(dān)任 GUI設(shè)計(jì)師，當(dāng)時(shí)正版音樂行業(yè)的市場土壤還沒有形成，所以公司沒能發(fā)展下去，一年后，公司成為了行業(yè)「先烈」，我也只能選擇離開，那是我第一次接觸 UI設(shè)計(jì)。

在05年的時(shí)候，產(chǎn)品用戶體驗(yàn)設(shè)計(jì)在國內(nèi)開始萌芽，我出于對這個(gè)行業(yè)的喜歡和好奇，加入搜狐從事體驗(yàn)設(shè)計(jì)的工作，07年的時(shí)候，加入百度做交互/UI，在這個(gè)階段，體驗(yàn)設(shè)計(jì)思維方式深深扎根在我的腦海。

后來，因?yàn)楫?dāng)時(shí)國內(nèi)的用戶體驗(yàn)設(shè)計(jì)還不夠成熟，同時(shí)出于對廣告視覺表達(dá)有極大的興趣，在互聯(lián)網(wǎng)用戶體驗(yàn)行業(yè)呆了幾年之后，我投身廣告行業(yè)，將本土、4A Digital、媒介型公司都體驗(yàn)了一把，我在這個(gè)階段形成了創(chuàng)意思維思考方式。

體驗(yàn)設(shè)計(jì)思維跟創(chuàng)意思維，對我來說都有非常大的價(jià)值，可以讓我更靈活面對不同的任務(wù)。這兩種思維方式的區(qū)別在于：一個(gè)是解決產(chǎn)品體驗(yàn)問題；一個(gè)是解決溝通問題。我認(rèn)為現(xiàn)在的設(shè)計(jì)師/創(chuàng)意者需要同時(shí)具備這兩種思維。

幾年之后，我又回到了互聯(lián)網(wǎng)，來到了滴滴。

總體上我的經(jīng)歷跟大部分設(shè)計(jì)師朋友一樣，其中不同的可能是我接觸過的領(lǐng)域比較多，在音樂、游戲、搜索引擎、交通、廣告等行業(yè)都有過職業(yè)經(jīng)歷，我個(gè)人也比較喜歡跨界。

藍(lán)湖：

您同時(shí)擁有互聯(lián)網(wǎng)公司（甲方）及廣告公司（乙方）的工作背景，甲乙方最大的區(qū)別是什么？這種經(jīng)歷對您在工作中分析、解決問題會(huì)有什么幫助和優(yōu)勢？關(guān)于這種交叉背景帶來的優(yōu)勢，您可否深入和我們分享一下？

程峰：

設(shè)計(jì)師在一般的互聯(lián)網(wǎng)公司工作跟乙方公司工作相比還是有區(qū)別的。

在乙方，由于接觸到的行業(yè)領(lǐng)域比較多，所以適合產(chǎn)出跨領(lǐng)域的通用方法論，思考方式更加橫向，更重視規(guī)律，從而能夠解決不同行業(yè)的共性化、模塊化問題，但也有可能因信息不夠及時(shí)對等，跟進(jìn)不夠持續(xù)，可能導(dǎo)致對問題的理解片面，無法深入。

而在互聯(lián)網(wǎng)公司，設(shè)計(jì)是服務(wù)于單一企業(yè)產(chǎn)品和業(yè)務(wù)的，比較單一，但更專注，會(huì)對具體行業(yè)的具體問題理解更加深入，具備持續(xù)性，更重視對變化的即時(shí)響應(yīng)，但同時(shí)也容易陷入視角局限，導(dǎo)致脫離規(guī)律，無法全局思考。

對我個(gè)人來說，甲乙方的雙重經(jīng)歷使我更加靈活，看待問題具備了更多視角，更容易保持客觀，可以快速切入找到符合規(guī)律的問題本質(zhì)，同時(shí)還可以深入并持續(xù)性地解決。

藍(lán)湖：

創(chuàng)意&設(shè)計(jì)是服務(wù)于品牌和產(chǎn)品的，您是否可以舉一個(gè)實(shí)例來詳細(xì)講講，好的創(chuàng)意&設(shè)計(jì)是如何服務(wù)于產(chǎn)品和品牌的？

程峰：

以滴滴為例，首先，滴滴CDX 很重視不同專業(yè)之間的打通與整合，聚沙成塔、匯點(diǎn)成線，這對于創(chuàng)意&設(shè)計(jì)產(chǎn)生好的效果尤為重要。

2017年，我們曾經(jīng)在 CDX 內(nèi)部構(gòu)建了一個(gè)需求關(guān)聯(lián)池，把產(chǎn)品、品牌、運(yùn)營三塊設(shè)計(jì)需求主動(dòng)整合，并關(guān)聯(lián)思考，跨專業(yè)團(tuán)隊(duì)協(xié)作，輸出了司機(jī)端App 5.0升級(jí)+司機(jī)故事+司機(jī)教育等相關(guān)項(xiàng)目設(shè)計(jì)，提升了司機(jī)師傅們對平臺(tái)的認(rèn)同感，最終達(dá)成了1+1+1>3的效果。

設(shè)計(jì)師要具備敏銳的全局觀和主動(dòng)性，任何一個(gè)體系組織都不可能做到徹底扁平化，信息只要在流通，多少會(huì)出現(xiàn)一定程度的不對等和信息失真，各職能都不可能對所有信息細(xì)節(jié)徹底掌握到位，大多數(shù)時(shí)候需要主動(dòng)接觸，主動(dòng)思考，以建立項(xiàng)目間的共性聯(lián)系，而不是坐等被告知，不能過度理想主義。

△ 滴滴「司機(jī)故事」創(chuàng)意設(shè)計(jì)

△ 滴滴「司機(jī)故事」創(chuàng)意設(shè)計(jì)

 

△ 滴滴「司機(jī)端」5.0配色標(biāo)準(zhǔn)

△ 滴滴「司機(jī)端」5.0啟動(dòng)頁面

△ 滴滴「司機(jī)端」5.0導(dǎo)航設(shè)計(jì)

△ 滴滴「司機(jī)端」測試環(huán)節(jié)

藍(lán)湖：

創(chuàng)意和用戶體驗(yàn)是設(shè)計(jì)師必須思考深入的兩個(gè)點(diǎn)，要更好地融合創(chuàng)意和用戶體驗(yàn)，設(shè)計(jì)師應(yīng)該怎么做？舉一個(gè)例子？

程峰：

這兩種思維方式雖然一個(gè)偏產(chǎn)品，一個(gè)偏傳播，但最終都會(huì)回歸到一個(gè)點(diǎn)上，也就是以用戶為中心，站在用戶的角度思考，基于這個(gè)點(diǎn)衍生出來，站在產(chǎn)品層面叫做痛點(diǎn)，站在創(chuàng)意層面叫做洞察。

舉個(gè)通俗的例子：一個(gè)人早上很難起床，需要借助外力才能被叫醒，這是痛點(diǎn)；一個(gè)人早上很難起床，但如果第二天早上有重要的事情要趕飛機(jī)，他按時(shí)起床的可能性就會(huì)變大，這是洞察。

再舉個(gè)例子：小朋友容易把衣服弄臟，媽媽洗起來很累。用某品牌洗衣液，針對小朋友衣服常見污漬進(jìn)行洗滌，省時(shí)省力，這是基于用戶媽媽的痛點(diǎn)想出的產(chǎn)品解決方案。小朋友容易把衣服弄臟，但媽媽總是會(huì)在第一時(shí)間，像變魔術(shù)般把干凈如初的衣服放在他的床邊，這是基于媽媽勤勞，母愛的洞察表達(dá)。

痛點(diǎn)與洞察交融在一起，可以使設(shè)計(jì)師在思考的時(shí)候更周全，在進(jìn)行產(chǎn)品體驗(yàn)設(shè)計(jì)思考的時(shí)候更具備情感引導(dǎo)性，在進(jìn)行創(chuàng)意思考的時(shí)候不至于忽略功能性。

藍(lán)湖：

設(shè)計(jì)類工作需要?jiǎng)?chuàng)造力的支撐，您是否可以跟我們分享一下，如何科學(xué)、系統(tǒng)地提高自己的創(chuàng)造力？

程峰：

不得不說，創(chuàng)造力很大程度上是天生的，可以理解為直覺。但洞察力是創(chuàng)造力的前提，是創(chuàng)造力被激發(fā)的基礎(chǔ)，洞察力是可以被后天鍛煉的。我個(gè)人并沒有總結(jié)過科學(xué)系統(tǒng)的方法，但我相信一話：「觀察和經(jīng)驗(yàn)和諧地應(yīng)用到生活上就是智慧?！?

如果一定要說方法的話，就是把自我提升需求轉(zhuǎn)換為習(xí)慣，養(yǎng)成針對性定期閱讀并定期總結(jié)的習(xí)慣。這里的關(guān)鍵詞是：定期、針對性。說得再直白點(diǎn)，就是多看多想并持續(xù)下去，任何事情的通用訣竅都是持之以恒。

提到這點(diǎn)，想多說幾句，近幾年看到了太多設(shè)計(jì)師過度重視方法，期望通過方法論找到解決問題的捷徑，我認(rèn)為這是浮躁的。對于創(chuàng)意&設(shè)計(jì)，我個(gè)人并不否定方法論的價(jià)值，但設(shè)計(jì)本質(zhì)上還是功夫活，思維的跨越也是從量變到質(zhì)變積累的過程。在這個(gè)階段，我更想跟大家說的是：功夫+思維>方法論。

尤其是希望很多年輕設(shè)計(jì)師，多下點(diǎn)苦功，多思考，不要把希望都寄托在方法論上。方法可以被總結(jié)創(chuàng)造，但設(shè)計(jì)功夫與思維是更可貴的東西，是設(shè)計(jì)師真正的能力壁壘。

藍(lán)湖：

在滴滴擁有眾多產(chǎn)品，設(shè)計(jì)師持續(xù)提出服務(wù)于產(chǎn)品和品牌的好創(chuàng)意和設(shè)計(jì)似乎并不容易，在設(shè)計(jì)師們遇到瓶頸時(shí)，您會(huì)給他們什么建議？在靈感枯竭的情況下，您有什么快速找靈感的好方法嗎？

程峰：

滴滴雖然產(chǎn)品眾多，但好在都是在解決出行問題，所以很多產(chǎn)品之間是具備共性的。

作為設(shè)計(jì)師，不該局限于自己的產(chǎn)品，應(yīng)該橫向多看，找到不同產(chǎn)品之間的關(guān)聯(lián)，多加以借鑒，找到可持續(xù)的復(fù)用性的解決方案，這是避免陷入到困境的好辦法。

在靈感枯竭的瓶頸期，設(shè)計(jì)師應(yīng)該明確一點(diǎn)：任何靈感都來源于對事物、信息的重新組合，當(dāng)把不同的元素組合應(yīng)用在不同場景中的時(shí)候，會(huì)有意想不到的收獲。

腦洞是不能隨意大開的，我認(rèn)為，找靈感、開腦洞需要兩個(gè)前提：第一是持續(xù)關(guān)注，日常積累，只有一定量的持續(xù)積累才能讓大腦里的數(shù)據(jù)庫足夠大，才能確保可以在需要的時(shí)候，第一時(shí)間任意調(diào)取信息并進(jìn)行重組。第二是邏輯性的結(jié)構(gòu)化思考，可以確保將信息進(jìn)行有條理、有效、有價(jià)值的組合。

藍(lán)湖：

面試的時(shí)候，您會(huì)比較關(guān)注候選人的哪些特質(zhì)？是否具備優(yōu)秀的創(chuàng)造力，可以通過面試得出結(jié)論嗎？您有什么能在短暫的面試時(shí)間內(nèi)找到更適合的人選的秘訣嗎？

程峰：

坦白講，我認(rèn)為在面試的有限時(shí)間空間環(huán)境下，很難做到全方位的考察，我個(gè)人也無法做到，這也是為什么會(huì)有多次面試的原因。

但是關(guān)于面試設(shè)計(jì)師，我還是有一些心得的。首先，設(shè)計(jì)師的專業(yè)能力是根本，除此之外，最重要的是心理成熟度的考察。就設(shè)計(jì)師的發(fā)展來看，很多時(shí)候遇到的問題都不是技術(shù)問題，大多是心理問題。創(chuàng)造力也同樣重要，雖然個(gè)人是否具備創(chuàng)造力可以在溝通中發(fā)現(xiàn)一些，但最好的辦法還是設(shè)置筆試題來考察。

除此之外，恒心、雄心、好奇心，分別體現(xiàn)了一個(gè)人達(dá)成目標(biāo)的能力，自我提升的可能性，以及對專業(yè)探索的熱情，優(yōu)秀的設(shè)計(jì)師，這三個(gè)特質(zhì)缺一不可。

藍(lán)湖：

在提拔設(shè)計(jì)人員成為設(shè)計(jì)管理者時(shí)，您會(huì)重點(diǎn)考察候選人的哪些方面？

程峰：

如果將設(shè)計(jì)團(tuán)隊(duì)比喻成一支球隊(duì)的話，我對團(tuán)隊(duì)內(nèi)設(shè)計(jì)管理者的要求是從明星球員變成主教練。

最簡單的考察標(biāo)準(zhǔn)：

• 專業(yè)必須要過關(guān)，這是基礎(chǔ)條件；
• 要具備讓其他設(shè)計(jì)師變得更好的能力，要帶動(dòng)團(tuán)隊(duì)專業(yè)能力整體提升；
• 個(gè)人的犧牲精神，要把心態(tài)調(diào)節(jié)為利他思維，懂得賦能別人讓自己更好，無論是對團(tuán)隊(duì)內(nèi)還是對外，這點(diǎn)都尤為重要。

藍(lán)湖：

滴滴CDX 內(nèi)部是如何分工協(xié)作的？設(shè)計(jì)有時(shí)會(huì)是一個(gè)比較主觀的，容易出現(xiàn)分歧的工作內(nèi)容，如果團(tuán)隊(duì)內(nèi)部的意見出現(xiàn)分歧，您是如何做決策的？

程峰：

CDX 專業(yè)分為兩側(cè)：體驗(yàn)設(shè)計(jì)+創(chuàng)意設(shè)計(jì)。既解決產(chǎn)品的體驗(yàn)設(shè)計(jì)問題，同時(shí)也關(guān)注業(yè)務(wù)運(yùn)營效率及品牌創(chuàng)意設(shè)計(jì)問題。

我想目前的分工是階段性的，未來的趨勢應(yīng)該是設(shè)計(jì)師職能更加融合，最終合并成只有「設(shè)計(jì)」這個(gè)職能。

在面對專業(yè)分歧的時(shí)候，最的解決辦法依然是溝通。事實(shí)上大部分的分歧都是因?yàn)槟繕?biāo)不一致導(dǎo)致的，所以在遇到分歧時(shí)，要保持讓產(chǎn)品、品牌更好的端正、開放的心態(tài)，就會(huì)被更有道理的觀點(diǎn)說服。

△ 滴滴「CDX」部門成員合照

藍(lán)湖：

您作為設(shè)計(jì)管理者，對于提升產(chǎn)品設(shè)計(jì)效率，有什么經(jīng)驗(yàn)分享給大家嗎？

程峰：

首先，推進(jìn)設(shè)計(jì)師成為更「復(fù)合」型的人才，設(shè)計(jì)細(xì)分專業(yè)之間的融合，能夠降低理解成本。

其次，要繼續(xù)推進(jìn)產(chǎn)品組件化的建設(shè)和組件使用率。

最后，針對性使用設(shè)計(jì)工具，比如使用藍(lán)湖完成自動(dòng)標(biāo)注和切圖，通過工具規(guī)范標(biāo)準(zhǔn)化流程，避免無效溝通和重復(fù)勞動(dòng)。

這些都是提升設(shè)計(jì)效率的辦法。

藍(lán)湖：

對于相對年輕的設(shè)計(jì)師，您有怎樣的職業(yè)發(fā)展建議？

程峰：

保持初心，永遠(yuǎn)記得你為什么踏上設(shè)計(jì)這一行，并且時(shí)刻具備長遠(yuǎn)規(guī)劃。

堅(jiān)信設(shè)計(jì)的價(jià)值，任何職能都不可能解決全世界的問題，專注設(shè)計(jì)能解決的領(lǐng)域，設(shè)計(jì)自然更有價(jià)值。

保持思考，不僅是對專業(yè)的思考，更是對業(yè)務(wù)的思考，甚至生活和世界的思考。

我也是這樣要求自己的，希望對各位也有幫助。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。