隨著產(chǎn)品生態(tài)的多端化進程，越來越多的跨設備和不同屏幕尺寸導致的問題也逐漸暴露，例如：

XX 能力要在手機上使用，不得不單獨為移動端開發(fā)幾個頁面甚至一個產(chǎn)品（反之亦然）；產(chǎn)品數(shù)據(jù)量很大，Ant Design 默認字體 / 間距太大了，不夠緊湊；版式不夠優(yōu)化，造成空間浪費；

Ant Design 基于如何在小屏幕中解決信息展示問題這樣的出發(fā)點也在很多組件中提供了響應式設計，但擁有更加完備的環(huán)境適應性應該是一個設計體系長期的目標之一，因此在全局性地考慮跨端、跨多屏幕尺寸、信息密度等響應式設計方面還值得我們繼續(xù)深入研究。

本篇文章橫向調(diào)研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業(yè)級產(chǎn)品設計體系的響應式設計部分，從設計策略、設計模式、實施模式、設計方案四個層面大致歸納了一些信息，旨在對響應式設計有一個籠統(tǒng)的了解。

關(guān)于 Adaptive Design 與 Responsive Design先厘清兩個概念，關(guān)于響應式設計通常會有兩個普遍認識，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念，它們的核心區(qū)別在于 AWD 針對不同的設備或屏幕尺寸定制化設計多個固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應，本質(zhì)上它們都在解決產(chǎn)品設計如何適應于不同設備以及不同屏幕規(guī)格的問題，本篇所指的「響應式設計」 概念包含了兩者，不做明顯區(qū)分，關(guān)于 Adaptive 與 Responsive 設計怎么界定以及具體的規(guī)則本篇也不進行展開。

移動優(yōu)先設計策略

提響應式設計不得不提「移動優(yōu)先」設計策略，移動優(yōu)先的概念最早是 Google 在 2010 年世界移動大會上提出來的一種產(chǎn)品策略，基于 Google 對未來趨勢中移動設備將會逐漸擁有核心地位的判斷。后來「移動優(yōu)先」更多被提及是作為一種在響應式設計中應用的設計策略，它認為在響應式設計中優(yōu)先為屏幕限制更大的移動設備設計，再擴展到大屏幕的 PC 端是一種更有效的設計方法。

例如 Alta、Lightning、Fiori 均在設計體系中明確采用「移動優(yōu)先」的設計方法，F(xiàn)iori 尤其指出「移動優(yōu)先」專注核心功能，專注增強而非降級，提前考慮移動端更多的獨特特性以及異常情況，能提供更好的體驗。Material Design 可能算是移動優(yōu)先的最佳實踐，它本身就誕生于 Android 平臺，而后再通過大量響應式規(guī)則擴展到桌面及 Web 端，使得 Material 在多端都擁有一致貫穿的良好體驗。

「移動優(yōu)先」本質(zhì)上是基于一種「增強」的設計思想，一個產(chǎn)品如果要同時適應于不同的設備，一直以來有兩種策略：優(yōu)雅降級 vs. 漸進增強，后者認為先從最小和最受限制的低級設備（移動設備）入手，再為更高級的設備（桌面設備）增強信息和交互，這意味著在更多限制下，迫使設計考慮如何減少、匯總，分組信息，有利于聚焦核心信息以及為更多限制考慮。

然而移動設備已不再是「低級設備」，F(xiàn)iori 盡管強調(diào)「專注增強而非降級」，但它同時提出的「提前考慮移動端更多的獨特特性」卻與漸進增強的設計思想相悖，讓「移動優(yōu)先」淪為了某種形式化的概念而難以執(zhí)行。

例如下面這個報告界面的場景里，移動端僅展示匯總的報告圖表信息，但匯總圖表并沒有「擴展」到 Tablet 里而是用明細數(shù)據(jù)替換圖表，而在桌面端同時包含了明細數(shù)據(jù)與圖表兩部分信息，這看上去并不像是一個「增強」的設計思路，更像是在全量需求下基于設備限制所采用的「降級」策略。

因此「移動優(yōu)先」并不一定是形式上優(yōu)先設計移動端，它被廣泛接受和應用的是背后的漸進增強的核心思想。我認為在移動設備高度發(fā)展的當下，「移動優(yōu)先」不再適合作為單獨概念提出來，而漸進增強的設計思想應該體現(xiàn)在更細分的場景中，例如在布局、信息排版以及交互反饋中，我們應該優(yōu)先考慮限制更大的移動端；在一些交互方式上，優(yōu)先考慮限制更大的鼠標操作。甚至在復雜業(yè)務場景里，優(yōu)先滿足核心業(yè)務流程順暢也屬于漸進增強的策略范疇。

設計模式

這里講的設計模式是指設計師在具體業(yè)務中針對不同的情況可以采用的通用性設計方案，這些設計模式除了單獨應用外，有時候也可以多種模式結(jié)合應用。Fluent 歸納了 6 種對應不同情況的響應式設計模式，非常全面地涵蓋了其它設計體系中的絕大部分方案，分別是：調(diào)整大小、重新定位、重新排列、顯示/隱藏、替換、重新構(gòu)建。

Resize – 調(diào)整大小

調(diào)整大小是最基礎(chǔ)的設計模式，是一個容器默認的響應式模式，通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規(guī)格縮放三種形式，即便在無響應式設計的體系里，容器跟隨屏幕尺寸而變化也是一個常見的應用方式。

Reposition – 重新定位

改變 UI 元素的相對位置，以充分利用不同尺寸的空間。重新定位在響應式應用里多見在框架上，或是在組件里對一些特定元素的處理，例如 Material 的全局浮動按鈕與浮動的下拉菜單以 Reposition 的形式分別在桌面端與移動端處于不同的位置。

Reflow – 重新排列

改變 UI 元素的排列方式，這在內(nèi)容彈性布局里較常見，通常是基于某種排列規(guī)則自動向下折行，并結(jié)合調(diào)整大小與柵格系統(tǒng)應用在響應式布局方面，例如 Carbon 的 Fluid Grid。

（Reflow）

Show / Hide – 顯示 / 隱藏

基于屏幕空間、設備不同特性、特定情況等顯示或隱藏 UI 元素，例如大多數(shù)設計體系的框架設計應用在小屏幕上會隱藏側(cè)邊菜單。Material 在組件響應式行為里提到的 Expand 也屬于 Show / Hide 的延伸。

（Show / Hide）

Replace – 替換

針對不同尺寸的屏幕采用不同形態(tài)的組件，通常應用在對具體的組件做針對性響應式設計中，但需要注意用戶面對變化時的認知成本。

（Replace）

Re-architect – 重新構(gòu)建

折疊或拆分信息架構(gòu)，這種模式在 Web 端較難實現(xiàn)，通常出現(xiàn)在一些 Native App 的場景。

（Re-architect）

Density – 內(nèi)容密度

除了上述 6 種模式以外，我把內(nèi)容密度也歸納為一種設計模式，F(xiàn)iori、Material Design、 以及 Atlassian 都提出了內(nèi)容密度的概念。Fiori 基于移動優(yōu)先在移動端采用默認密度，而針對大屏幕的 Web 端則提供緊湊密度的方案，他們認為移動端手指交互所需的空間要求更高；Material 則是針對很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現(xiàn)。通過被動響應式或主動控制內(nèi)容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。

（Material Design 的內(nèi)容密度示例）

值得一提的是 Atlassian 通過柵格系統(tǒng)的間距來控制密度而非對內(nèi)容密度本身進行設計，越緊湊的布局柵格間距越小，這看上去很合理，卻很容易造成內(nèi)容密度增加的同時整體信息獲取效率反而降低的問題。Material 也有關(guān)于柵格空間的定義，但在內(nèi)容密度的處理上和 Atlassian 恰恰相反，它認為高密度內(nèi)容適用更寬松的柵格空間，相對是一個更合理的設計。在信息密度的問題上，我們的核心目的其實是提升信息效率而非單純提高視覺密度，因此解法上需要更完善的考慮。

實施模式

實施模式是指設計體系為實現(xiàn)具體設計方案而定義的一系列基礎(chǔ)規(guī)則、解決方案或技術(shù)手段，經(jīng)過整理總結(jié)為相對尺寸單位、屏幕斷點、彈性布局、柵格系統(tǒng) 4 個方面。

Rem – 相對尺寸單位

幾乎所有應用于 Web 的設計體系的技術(shù)方案中都采用 rem 相對單位，Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認的 root 尺寸，即 1rem = 16px，Alta 默認采用是 14px 的規(guī)格，并允許基于不同應用選擇 12px 或 16px 的規(guī)格，默認情況 Alta 采用更小規(guī)格的單位會在小屏幕電腦上有更好的表現(xiàn)，這也許和他們的產(chǎn)品特性相關(guān)。

相對尺寸單位是非常具有實施價值的，它使產(chǎn)品能在保持信息節(jié)奏的情況下根據(jù)不同的情況等比例縮放內(nèi)容，這使得設計能更方便地調(diào)整內(nèi)容密度，或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題，且?guī)缀鯖]有前端成本。

國內(nèi)的前端業(yè)界包括我們自己的前端同學更多將 Rem 運用在移動端，主要為了兩個目的：方便計算尺寸、在不同寬度的設備上等比縮放內(nèi)容，這樣的用法是出于前端工程師解決屏幕兼容性的一種技術(shù)手段，在使用上本身也存在一定爭議，而在響應式設計領(lǐng)域我們還沒有發(fā)揮出 Rem 應該發(fā)揮的作用，甚至很多設計師還并不了解相對尺寸單位的使用方法，廣泛應用 Rem 能為我們帶來哪些實際價值是接下來需要繼續(xù)研究的。

Breakpoints – 屏幕斷點

屏幕斷點是響應式設計的基礎(chǔ)依據(jù)，它決定了我們要適配到什么樣的設備或屏幕規(guī)格，并通過 Media Queries 這樣的技術(shù)實現(xiàn)不同 Breakpoint 條件下的不同 UI 表現(xiàn)。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設計的，包括考慮了移動設備的橫評豎屏情況，關(guān)于詳細的規(guī)格設置其實并沒有太大參考價值，設計體系都是根據(jù)自身定位以及設備覆蓋的情況來制訂的，例如 Material 的斷點在低分辨率范圍分得非常細，是因為 Material 主要服務的 Android 平臺有著數(shù)量繁多的設備分辨率。在滿足自己需求的前提下，屏幕端點不需要太多，無論怎樣基于數(shù)據(jù)驅(qū)動的屏幕斷點設置將會是一個更科學的方法。

（屏幕斷點分布）

Fiori 的斷點設計比較有意思，在設計文檔中僅有基本的布局規(guī)則，沒有明確的 Breakpoints 規(guī)則，F(xiàn)iori 對于不同的組件會設計不同的 Breakpoints，例如在 Table 這個組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規(guī)格，而在 Form 的組件中，Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞，從這點上看出 Fiori 認為不同的組件有不同的表達模式，因此應該針對性對組件進行優(yōu)化。

（Fiori 的 Table 組件適配情況）

Flex Layout – 彈性布局

Flex 布局是 CSS3 提供的強大布局能力，從更自然更具語義化的角度實現(xiàn)界面元素的自適應。應用于 Web 的設計體系基本上都在組件代碼里廣泛采用了 Flex 布局，Lightning 還將柵格與 Flex 布局結(jié)合定義了自己更完善的布局方法。在響應式設計中，F(xiàn)lex 布局通常結(jié)合 Breakpoints 使用，在兩個 Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺也都有類似的彈性布局能力，例如 Fluent 在 windows 采用 XAML 構(gòu)建布局系統(tǒng)。

無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力，響應式設計要解決布局的問題將會深度依賴這些基礎(chǔ)技術(shù)手段，本篇不進一步展開。

Grid System – 柵格系統(tǒng)

柵格系統(tǒng)是所有設計體系必備的，我們通常將頁面橫向分為 N 列，定義每一列的尺寸與間距，這為界面布局提供了一致性和成本便利。傳統(tǒng)的柵格系統(tǒng)在響應式方面的應用主要是結(jié)合 Breakpoints 與一些 Responsive Token 來實現(xiàn)的，通過給 UI 元素指定不同的柵格數(shù)來決定他們分別在不同屏幕下占多少列，同時一些設計體系還提供了可見性相關(guān)的 token，來控制界面元素在不同屏幕的顯示與隱藏。

Fluent、Fiori、Lightning、Material 以及大多數(shù)設計體系都采用了 12 柵格系統(tǒng)，因為 12 的因數(shù)夠多，能滿足足夠多的布局細分同時又不至于太復雜，Carbon 的做法更加 geek 一些，他們的「2x grid」采用了 16 柵格系統(tǒng)，布局粒度更細但放棄了 3，6 這樣的因數(shù)。 Ant Design 為了滿足復雜的業(yè)務情況，采用了 24 柵格系統(tǒng)，24 柵格提供了更高的靈活性的同時，也大大增加了復雜度，面臨柵格系統(tǒng)的響應式設計 24 柵格是否適用還有待商榷。

另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念，核心思想是在較小的屏幕上降低柵格數(shù)量，將多余的柵格自動折行彈性布局。

（Carbon 的柵格定義）

在屏幕尺寸變化時，柵格主要有兩種響應模式：Fluid、Fixed

（Fluid）

這種將柵格系統(tǒng)與彈性布局相結(jié)合的方式基于一些簡單的規(guī)則設置，在不需要特定響應式的場景中不再需要指定繁瑣的 token，且能滿足大部分高頻且通用的情況，在一定程度上降低了成本。

組件應用

除了通用的響應式規(guī)則以外，設計體系在具體組件中的響應式方案還有許多值得挖掘，能為我們的組件設計提供參考價值，本篇不再一一展開，僅提兩個典型的應用情況：

框架

框架算是一個特殊的組件，在不同的設備中界面框架的適用有非常大的差異，幾乎提到響應式的所有設計體系都給出了框架響應式方案，例如 Alta 將界面框架分為四塊，以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。

通常情況下設計體系的框架組成按形式可以分為：

• Header – 通常情況下常駐

• Sidenav – 分為左側(cè)右側(cè)兩種情況，一般用于放置導航，在不同設備會有展開，收縮，隱藏三種狀態(tài)

• Content – 內(nèi)容區(qū)，通常由 Grid 控制布局

• Footer – 如有，固定在頁面底部

• Float – 浮動框架，用于臨時狀態(tài)，通知或彈窗等

設計體系通過對框架的定義，以及控制不同部分基于什么樣的模式響應屏幕尺寸來實施對框架的響應式設計。

組件

Fluent 或 Material 在設計文檔中更多基于基礎(chǔ)的網(wǎng)格，布局，設計模式來闡述通用性的響應式規(guī)則，因此他們的響應式設計有非常好的延續(xù)性，組件的響應式方案基本上都遵循這些規(guī)則。

而 Fiori 以及 Lightning 在通用性響應式設計模式上的定義上沒有那么全面，他們側(cè)重于在組件層面對所有組件都考慮了針對性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應式表格的組件里，在桌面端與移動端分別是 table 和 list 的模式，這個方案并不是通過全局抽象規(guī)則得出來的，而是基于對組件的針對性設計，正如他們?yōu)椴煌慕M件設計了不同的 Breakpoints，這種針對性也適用于特定的 UI 解決方案。

（Fiori 針對 Table 的響應式設計）

在一定程度上抽象規(guī)則的同時，如果我們能夠為每一個組件都考慮到不同場景的響應式，當然就會提供更精細化的體驗。在一個完備的設計體系里，在設計每一個組件資產(chǎn)時都以漸進增強的設計策略，考慮到不同的設備及屏幕適配是非常有必要的。

響應式設計的世界煙波浩渺，書不盡言，言不盡意。Ant Design 目前計劃從布局基礎(chǔ)規(guī)則以及內(nèi)容密度的解決方案切入，逐步完善響應式設計的體系，這是一個重要且漫長的過程，至于文中挖下的坑還需要深入研究逐一補充，本篇初探先到這里，歡迎大家留言指出問題也很希望大家能留下想法共同探討。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

在B端產(chǎn)品設計中，有效的設計規(guī)范有利于降低團隊溝通成本，提高開發(fā)效率，并在一定程度上保證產(chǎn)品應用的一致性，最終推動產(chǎn)品設計的優(yōu)化。本篇文章里，作者總結(jié)了從0開始搭建B端設計規(guī)范的注意事項與策略方法，一起來看一下。

前言

哈哈哈哈，最近事情太多了，已經(jīng)快三個月沒更新了，現(xiàn)在也忙的差不多了，咱們更新繼續(xù)~~

今天給大家分享的是關(guān)于如何從零開始搭建 B 端設計規(guī)范。

時間轉(zhuǎn)眼即逝，掐指一算，我接觸 B 端已有 4 年之久了，當年剛接觸的時候，B 端的從業(yè)人員比例還是很少的。近兩年 B 端越來越火熱，無論從設計風格還是產(chǎn)品數(shù)量上，都有了很大的提升。

隨著 B 端的產(chǎn)品越來越完善，要求設計師的專業(yè)性也要越來越強。設計規(guī)范作為基礎(chǔ)中的基礎(chǔ)，是大家都要熟練掌握的技能，我們不僅要會運用各種規(guī)范，還要會撰寫適合產(chǎn)品的規(guī)范。

分享開始，敲黑板~~

一、設計規(guī)范的目標

在搭建設計系統(tǒng)之前，我們要想清楚設計規(guī)范的目標是什么？使用者是誰？

• 目標：保持產(chǎn)品風格統(tǒng)一性、提高設計輸出效率、減少無效溝通。
• 使用人群：UI、交互、前端、測試。

二、設計原則

設計規(guī)范要符合基本的設計原則，否則你的規(guī)范會雜亂無章。這里我總結(jié)了 6 條原則供大家參考。

1. Unity（統(tǒng)一性）：頁面風格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體性。
2. Accessibility（易用性）：易用是首要考慮的因素，能一步解決的事情絕不兩步。
3. Proximity（親密性）：如果信息的關(guān)聯(lián)性強，則他們的距離就要相應的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大。要讓用戶對信息的區(qū)域劃分一目了然。
4. Alignment（對齊原則）：在界面中，將元素進行對齊，即符合用戶的認知，也可以引導視覺流向，讓用戶更加流暢地閱讀信息。
5. Contrast（對比原則）：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。
6. Repetition（重復原則）：相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

三、框架布局

這里一般采用柵格布局。說到柵格，有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復習一遍，如果之前不是很了解柵格的，拿個小本本記下來，要考~~

柵格布局能夠適應各種屏幕尺寸及分辨率，確保整體布局的一致性。

柵格建議使用 1、2、3、4、6 切分布局，可以進行多種布局組合，并在整個設計中保持布局的結(jié)構(gòu)的一致性。

頁面中一般采用 24 列自適應網(wǎng)格，你可以使用它為各種屏幕尺寸創(chuàng)建靈活的布局。

邊距 Margins、列 Columns、間隔 Gutters 分別是什么？

邊距 Margins：邊距是內(nèi)容與左右邊緣之間的空間。

控制臺內(nèi)容區(qū)的邊距選用 8 的倍數(shù)為設定值，一般采用 16/24px 的居多。

需要注意的是：

• 減去 margin 后，列在頁面區(qū)域均分，保證每列的寬度是一致的；
• 在區(qū)域有 margin 的情況下，劃分列的區(qū)域不能包含 margin。

列 Columns：在電腦端列的數(shù)量是個常量（24列），每一列寬度的尺寸隨屏幕大小進行自適應調(diào)整。

間隔 Gutters：間隔是列與列之間的空隙，控制臺產(chǎn)品 gutter 使用固定值也要是 8 的倍數(shù)，一般采用 16/24px。

需要注意的是：

• 布局的左右兩邊的分界線 gutter 可以為 0；
• 必須保證 column 的寬度是一致的。

邊距 Padding：padding 指一個元素的內(nèi)容和其邊界之間的空間，padding 最小值是 4px，然后其余均為 8px 的倍數(shù)，建議值為 8/16/24px。

內(nèi)容區(qū)定寬：此場景常用于用戶歡迎頁、結(jié)果頁等需要將內(nèi)容區(qū)寬度設置為固定值的頁面。此時 column 和 gutter 保持不變，根據(jù)頁面寬度改變 margin 的值。

四、設計風格

1. Color（顏色）

色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨的配色體系。

在前期制定顏色規(guī)范的時候，精益求精的設定顏色，切忌顏色過多。

顏色的狀態(tài)色盡量用原色進行轉(zhuǎn)換，設置一個合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個公式進行轉(zhuǎn)換。例：

• Hover：H不變 S加10 B減5；
• Click：H不變 S加20 B減10；
• Disable：HSB均不變，不透明度 30%。

在設計規(guī)范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強迫癥患者要標的，因為有時候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對于強迫癥的你來說，舒服嗎）。

狀態(tài)色有 4 狀態(tài)色：Normal、Hover、Click、Disable。

在設定圖表顏色的時候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等……），同時也要考慮它的延展性，比如你設定 12 個 chart 色值，在使用的時候按著順序來使用，當超過 12 個后可以為同一個顏色。

2. Font（文字）

設定統(tǒng)一的字體規(guī)范，使用非襯線字體在各個操作系統(tǒng)下都有最佳展示效果。

首先，要設置一個字體家族，保證產(chǎn)品界面的最優(yōu)展示。

例如（僅作為展示，不是建議）：font-family： “Chinese Quote”， -apple-system，BlinkMacSystemFont，“Segoe UI”，“PingFang SC”，“Hiragino Sans GB”，“Microsoft YaHei”，“Helvetica Neue”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”。

1）字號

現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶的習慣進行設定。字號不要出現(xiàn)奇數(shù)，否則在一些顯示器上會有對不齊像素的狀況發(fā)生。

2）行高

行高常規(guī)的有兩種規(guī)范：

• 字號+8px；
• 1.5倍 / 2倍 * 字號。

我喜歡用第一種，就是字號大小 + 8px 作為行高的規(guī)范。行高是不可被忽略的重要細節(jié)之一，因為在算間距的時候，行高是要被算進去的。

3）字重

字重有很多，但是在真正的產(chǎn)品使用中，字重盡量不要太多種，2~3 種即可。

4）字體顏色

字體顏色數(shù)量建議在 3~4 個，不宜過多，但是每個層級之間區(qū)分要大一些。

文本應該保持至少 4.5：1 （基于亮度值計算）的對比度以保持文本清晰；最佳對比度為 7：1。

測試對比度的網(wǎng)站：https://contrast-ratio.com

WCAG 2.0 中將顏色對比等級分為 3 種，A級、AA級、AAA級，等級越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。

• A級：對比度 3：1，是普通觀察者可接受的最低對比；
• AA級：對比度 4.5：1，是普通視力損失的人可接受的最低對比度；
• AAA級：對比度 7：1，是嚴重視力損失的人可接受的最低對比度。

3. icon（圖標）

設定統(tǒng)一的圖標使用規(guī)范，讓視覺效果更和諧。

1）icon 大小

icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個尺寸至少相差 4px，否則你會在后期用的時候會有選擇困難癥。

同時功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺統(tǒng)一性（操作 icon 除外）。

單獨 icon 使用的時候，盡量不要太小，最小值建議為 12px。

2）icon 熱區(qū)

icon 的熱區(qū)經(jīng)常被設計師和開發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設置熱區(qū)的話，操作體驗極差。

所以一定一定要設置 icon 的熱區(qū)，設置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區(qū)大小為 28 * 28px。

4. size（尺寸）

頁面內(nèi)布局間、模塊間、模塊內(nèi)的各部件距離。

尺寸大部分規(guī)范中都用的是 8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個公式：Sn = 8px * n，n為正整數(shù)。

特殊：最小支持4px。

五、交互

交互我分為兩個方面：交互方式和交互狀態(tài)。

1. 交互方式

交互方式指的是對某一個操作所進行的具體行為，比如刷新方式有下拉、上滑、按壓點擊等方式，這就是所謂的交互方式。交互方式有很多種，沒有最優(yōu)，只有最適合。

交互方式要保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認知習慣，可創(chuàng)新但不可違背潛意識。

隨著時代的發(fā)展，交互方式也在不斷的更新。比如最開始的手機是按鍵式的，隨著大眾對屏幕大小的需求不斷提升，到了現(xiàn)在的全面屏手機，如果這個時候你再去做當年火爆的按鍵手機，那你就只能跟市場說拜拜。

總結(jié)交互方式的幾個關(guān)鍵點：創(chuàng)新、統(tǒng)一、緊跟趨勢。

2. 交互狀態(tài)

一個完整的產(chǎn)品生態(tài)是不會遺漏每一個交互狀態(tài)的。

同樣是做售票的軟件，為什么高鐵管家就比 12306 做的好呢？是因為高鐵管家把很多交互狀態(tài)友好地做了展現(xiàn)反饋，而不是冰冷的數(shù)據(jù)吞吐。

同類產(chǎn)品中，每個都有自己獨特的交互狀態(tài)，可能你一直用某個軟件的原因只是有個功能的交互狀態(tài)打動了你，從此你就深深愛上了它。

現(xiàn)在工作中，我們都在講人效，拼命地去更新迭代，去研發(fā)新功能，開拓新產(chǎn)品，往往會忽略交互狀態(tài)這個點，因為很多時候付出收獲比是很低的，但是真正好的產(chǎn)品，這部分是不可或缺的。

交互真的太大了，單獨寫一篇文章都寫不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來叨擾。

六、引導

引導分為 5 種：Newbie guide（新手引導）、Steps guide（步驟引導）、Help / Operation guide（幫助/操作引導）、New function guide（新功能引導）、Blank guide（空白頁引導）。

1. Newbie guide（新手引導）

新手引導是針對新用戶的，首次進入產(chǎn)品的時候，我們要著重地把自己產(chǎn)品的亮點以及操作快速的介紹給新用戶，讓他用最短的時候上手我們的產(chǎn)品。

新手引導要言簡意賅，并且如果非必要的話，盡量給用戶一個可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導，必須走完全部流程后才能關(guān)閉，惡心得不行。

2. Steps guide（步驟引導）

步驟引導一般用在有固定操作步驟的場景下，指引用戶一步一步地完成想要的結(jié)果。常規(guī)的步驟引導建議在 3~5 步之間為合理。

3. Help/Operation guide（幫助/操作引導）

幫助/操作引導的展現(xiàn)方式是比較豐富多彩的，可以是提示語、輔助性文本、tooltips 等等，它的作用就是輔助用戶去了解并且知道如何操作這個功能。

這個也是在產(chǎn)品中使用頻率最高的，運用好它，可以讓你的產(chǎn)品事半功倍。

4. New function guide（新功能引導）

它就是常用在新功能上線后，用戶第一次登陸相關(guān)頁面后做的一些引導，目的是為了告訴用戶我們做了新東西，你快來試試吧。

5. Blank guide（空白頁引導）

空白頁引導一般用在在缺省頁，對用戶進行一些操作指引，讓無信息的頁面變得更有價值。

比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因為做了這個引導，幫助了千萬個家庭找到了失散的孩子。

七、組件

組件是設計系統(tǒng)里面最為龐大的東西。組件可以分為了 5 類：

1. Navigation（導航）；
2. Data Entry（數(shù)據(jù)錄入）；
3. Data Display（數(shù)據(jù)顯示）；
4. Feedback（反饋）；
5. Other（其它）。

基本上這幾類已經(jīng)覆蓋了多數(shù)的組件，下面我把我自己整理的這幾類分別都包含哪些組件、以及組件的簡單介紹給列出來，快來保存吧。

1. Navigation（導航）

• Affix（固釘）：將頁面元素釘在可視范圍。
• Breadcrumb（面包屑）：顯示當前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能向上返回。
• Menu（導航菜單）：為頁面和功能提供導航的菜單列表。
• Pagination（分頁）：采用分頁的形式分隔長列表，每次只加載一個頁面。
• Steps（步驟條）：引導用戶按照流程完成任務的導航條。

2. Data Entry（數(shù)據(jù)錄入）

• Checkbox（多選框）：可選擇多個。
• Radio（單選框）：只可選擇一個。
• Switch（開關(guān)）：開關(guān)選擇器。
• Form（表單）：具有數(shù)據(jù)收集、校驗和提交功能的表單，包含復選框、單選框、輸入框、下拉選擇框等元素。
• Input（輸入框）：通過鼠標或鍵盤輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝。
• Select（選擇器）：下拉選擇器。
• Skeleton（加載占位圖）：在需要等待加載內(nèi)容的位置提供一個占位圖。
• Time selectors and sliders（日期時間選擇過濾器）：當用戶需要輸入一個時間或日期，可以點擊標準輸入框，彈出時間面板進行選擇。
• Transfer（穿梭框）：雙欄穿梭選擇框。
• Upload（上傳）：文件選擇上傳和拖拽上傳控件。

3. Data Display（數(shù)據(jù)顯示）

• Badge（微標）：圖標右上角的圓形徽標數(shù)字。
• Card（卡片）：通用卡片容器。
• Collapse（折疊面板）：可以折疊/展開的內(nèi)容區(qū)域。
• Popover（氣泡卡片）：點擊/鼠標移入元素，彈出氣泡式的卡片浮層（可操作）。
• Tabs（標簽頁）：選項卡切換組件。
• Table（表格）：展示行列數(shù)據(jù)。
• Tag（標簽）：進行標記和分類的小標簽。
• Timeline（時間軸）：垂直展示的時間流信息。
• Tooltip（文字提示）：簡單的文字提示氣泡框。
• Tree（樹形控件）：文件夾、組織架構(gòu)、生物分類、國家地區(qū)等等，世間萬物的大多數(shù)結(jié)構(gòu)都是樹形結(jié)構(gòu)。使用樹控件可以完整展現(xiàn)其中的層級關(guān)系，并具有展開收起選擇等交互功能。

4. Feedback（反饋）

• Alert（警告提示）：警告提示，展現(xiàn)需要關(guān)注的信息。
• Notification（通知提示框）：全局展示通知提醒信息。
• Drawer（抽屜）：抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內(nèi)容。用戶在抽屜內(nèi)操作時不必離開當前任務，操作完成后，可以平滑地回到到原任務。
• Modal（對話框）：模態(tài)對話框和非模態(tài)對話框。
• Progress（進度）：展示操作的當前進度。
• Spin（加載）：用于頁面和區(qū)塊的加載中狀態(tài)。

5. Other（其它）

• Button（按鈕）：按鈕用于開始一個即時操作。
• chart（圖表）：圖標數(shù)據(jù)顯示。
• Copyright（版權(quán)）：版權(quán)信息。
• Divider（分割線）：區(qū)隔內(nèi)容的分割線。
• logo（標志）：logo 的使用。
• LocaleProvider（國際化）：為組件內(nèi)建文案提供統(tǒng)一的國際化支持。
• Text link（文字鏈）：點擊有鏈接跳轉(zhuǎn)的文字。
• Scrollbar（滾動條）：在特定界面區(qū)域內(nèi)進行內(nèi)容的更多展示。

以上組件可根據(jù)自己的產(chǎn)品進行增刪，把組件規(guī)范設計完成后，整個設計規(guī)范就完成了 90% 以上，可以算一個比較完整的設計規(guī)范了。

八、總結(jié)

每一個設計規(guī)范都是有靈魂的，規(guī)范是為了更好地做設計，而不是限制設計師雙手的枷鎖。

設計規(guī)范也不是一成不變的，它在落地使用的時候多少都會有問題，需要慢慢地去反復檢驗規(guī)范的合理性，發(fā)現(xiàn)不合理的及時更正。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

『 Ant Design是什么 』

眾所周知螞蟻集團的B端產(chǎn)品是一個龐大的系統(tǒng)，數(shù)量多且功能復雜，而且變動頻繁，常常需要設計師和開發(fā)人員能快速做出工作上的配合。同時這類產(chǎn)品中有存在很多類似的頁面以及組件，根據(jù)原子設計理論可以得到一些穩(wěn)定且高復用性的內(nèi)容。

隨著這兩年B端產(chǎn)品的逐漸白熱化，越來越多的用戶對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻集團體經(jīng)過大量項目實踐和總結(jié)，逐步打磨出一個服務于企業(yè)級產(chǎn)品的設計體系 —— Ant Design。通過組件化設計規(guī)范，降低冗余的生產(chǎn)成本，讓設計者專注于更好的用戶體驗。

『 Ant Design設計原則是什么 』

針對B端產(chǎn)品反復出現(xiàn)的一些設計體驗等問題， Ant Design 給出標準的設計原則，實現(xiàn)跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面，既減少了不必要的認知成本，又能夠提升設計的效率。考慮到需要適應各種定制化的業(yè)務場景，設計原則具有一定的靈活性，萬變不離其宗，通過了解設計原則的構(gòu)建邏輯，高效組織信息、幫助建立用戶與界面的互動等原則性要求，可以衍生出更具場景特性的設計方案。

① Ant Design設計原則的由來

可以說 Ant design的設計規(guī)范攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則，并做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充，我在看書的過程結(jié)合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明，這也是為什么國內(nèi)的企業(yè)一直以來都很喜歡使用這套組件的原因。

② Ant Design設計原則的適用范圍

1. 我們先說說『Ant Design 』的適用范圍：

稍微了解 Ant Design 的小伙伴都知道，本系統(tǒng)是針對B端后臺系統(tǒng)，承載媒介是PC端的瀏覽器。使用的人員主要包括：用戶體驗設計師、交互設計師、UI設計師、前端程序員等。

2. 再說說 『 Ant Design 設計原則 』的適用范圍：

顧名思義『 設計原則 』主要是針對設計師在創(chuàng)作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統(tǒng)的一部分，但是前文已經(jīng)提到，此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華，所以設計師可以把這些原則運用到任何的設計領(lǐng)域，并不要局限于企業(yè)后臺系統(tǒng)的PC端產(chǎn)品。

為了方便大家理解，講一個小故事。故事來自于《寫給大家看的設計書》，作者有一年圣誕節(jié)收到一份禮物——一本關(guān)于植物的百科全書。作者翻閱之后，發(fā)現(xiàn)其中有一顆叫約書亞樹的樹，造型奇特，自己從未見過。于是決定出門轉(zhuǎn)轉(zhuǎn)，然而發(fā)現(xiàn)外面到處都是這種樹。故事到這里就完了。

可能大家會想，這個故事要講一個什么道理呢？簡單來說就是，當你手中有個錘子，滿世界都是釘子。當你了解到下面要講的十個設計原則后，你會發(fā)現(xiàn)它們處處都適用。

③ Ant Design設計原則的內(nèi)容

十大原則如下：

• 親密原則（Proximity）

• 對齊原則 (Alignment)

• 對比原則 (Contrast)

• 重復原則 (Repetition)

• 直截了當 (Make it Direct)

• 簡化交互 (Keep it Lightweight)

• 足不出戶 (Stay on the Page)

• 提供邀請 (Provide Invitation)

• 即時反應 (React Immediately)

• 巧用過渡 (Use Transition)

『 如何運用Ant Design的設計原則 』

對于一個初級設計師而言，想要了解UI用戶體驗等知識，學習 Ant Design 的設計原則算是比較快能上道的，因為 Ant Design 是吸取了很多前輩的精華，提煉而成的系統(tǒng)。打個簡單的比喻，對于設計師而言 Ant Design 就是設計師學習『 視覺規(guī)范 』，掌握『 設計原則 』最好的字典。

接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設計原則并運用到工作當中。

Ant Design 定義了10條設計原則，根據(jù)『 席克定律 』選項太多不易記憶，于是我找到了這些設計原則的共通性，將其歸為4類，也就是大家只需記住四類設計原則，在工作中適當延展即可。

① 視覺層級清晰

包含 Ant Design 的設計原則有：『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。

「視覺層級清晰」的重要性體現(xiàn)在 交互前 用戶看到的內(nèi)容結(jié)構(gòu)是清晰明確的 。一個層級混亂的界面，任何信息的傳達都是無效的。所以保證清晰的排版布局是人機交互前的基礎(chǔ)。

1. 親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

1.1 縱向間距關(guān)系

• 縱向間距：在 Ant Design 中，通過「小號間距」「中號間距」「大號間距」這三種規(guī)格來劃分信息層次結(jié)構(gòu)。這三種規(guī)格分別為：8px（小號間距）、16px（中號間距）、24px（大號間距）。

• 增加元素：通過增加「分割線」來拉開層次。在這三種規(guī)格不適用的情況下，可以通過加減「基礎(chǔ)間距」的倍數(shù)，或者增加元素來拉開信息層次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是縱向間距，8 是「基礎(chǔ)間距」。

1.2 橫向間距關(guān)系

• 組合排布：為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。（注：柵格是另外一個模塊的內(nèi)容，這里不贅述。）

• 復選框內(nèi)：在一個組件內(nèi)部，元素的橫向間距也應該有所不同。

2. 對齊

正如「格式塔學派」中的連續(xù)律（Law of Continuity）所描述的，人類的視覺系統(tǒng)往往傾向于將看到對象的直線繼續(xù)成為直線，曲線繼續(xù)成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。

格式塔學派（德語：Gestalttheorie）：是心理學重要流派之一，興起于 20 世紀初的德國，又稱為完形心理學；主張人腦的運作原理是整體的，「整體不同于其部件的總和」?！浴妇S基百科」

2.1 文案類對齊

如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。

• 推薦使用：標題和正文左對齊，使用了一個視覺起點。

• 不推薦使用：標題和正文使用了兩個視覺起點，不推薦該種對齊方式，除非刻意強調(diào)兩者區(qū)別。

2.2 表單類對齊

• 冒號對齊：冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。

2.3 數(shù)字類對齊

為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。

3. 對比

對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

注：要實現(xiàn)有效的對比，對比就必須強烈，切不可畏畏縮縮。

3.1 主次關(guān)系對比

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項相對更重要或者更高頻的操作。

注意：突出的方法，不局限于強化重點項，也可以是弱化其他項。

• 需要區(qū)分主次場景：

• 不需要區(qū)分主次的場景：「通過」和「駁回」都使用次按鈕，系統(tǒng)保持中立。在一些需要用戶慎重決策的場景中，系統(tǒng)應該保持中立，不能替用戶或者誘導用戶做出判斷。

3.2 總分關(guān)系對比

• 總分關(guān)系：通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。

3.3 狀態(tài)關(guān)系對比

常見類型有「靜態(tài)對比」、「動態(tài)對比」。

• 靜態(tài)對比示例：用不同顏色的點，來表明不同狀態(tài)。

• 動態(tài)對比：鼠標懸停時，該項和其他項呈現(xiàn)出明顯不同的視覺效果，響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。

4.重復

相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

4.1 重復元素

重復元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關(guān)系等。

• 線框重復：

• 設計要素重復：

• 文案格式重復：

② 交互操作高效

包含 Ant Design 的設計原則有：『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。

「交互操作高效」的重要性體現(xiàn)在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題，卻忽略用戶能否理解流程如何操作，那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短，而是用戶的心理時間是否太長的問題，就像我們打游戲往往會覺得時間過的很快，但是在等待頁面加載時卻不耐煩。

1. 減少打斷

能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉(zhuǎn)都會引起變化盲視（Change Blindness），導致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉(zhuǎn)，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。

變化盲視（Change Blindness）：指視覺場景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場景中的障礙物，眼球運動、地點的變化，或者是缺乏注意力等?！浴毒S基百科》

心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態(tài)，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產(chǎn)生時同時會有高度的興奮及充實感。——摘自《維基百科》

• 氣泡提示：對于操作的反饋是必要的，下文會提到，但是為了減少打斷用戶，輕量級的反饋氣泡提示即可。

• 輸入覆蓋層：鼠標「點擊」圖標觸發(fā)；鼠標「點擊」懸浮層以外的其他區(qū)塊后，直接保存輸入結(jié)果并退出。不用彈窗或跳轉(zhuǎn)的形式編輯，只需要在觸發(fā)圖標附近彈出浮層即可，這樣避免用戶視動線的混亂，減少打斷用戶操作的心流。

2.縮短步驟

正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。eg：不要為了編輯內(nèi)容而打開另一個頁面，應該直接在上下文中實現(xiàn)編輯。

常規(guī)的編輯模式，界面都會跳出一個彈窗或者是一個頁面跳轉(zhuǎn)，無形之中用戶走了更多的流程路徑，如果能在當前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設計原則。

• 文字鏈/圖標編輯：

狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標；

狀態(tài)二：鼠標點擊「編輯」后，出現(xiàn)「輸入框」、「確定」、「取消」表單元素，同時光標定位在「輸入框」中。

• 多字段行內(nèi)編輯：編輯模式在不破壞整體性的前提下，可擴大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進行編輯模式切換時，需要保證每列的不跳動。

• 拖放圖片/文件：在早前很多產(chǎn)品在上傳功能上，都是跳出彈窗再選擇文件上傳，現(xiàn)在基本都可以實現(xiàn)拖拽上傳了。這樣的設計大大提高了用戶使用上傳功能的效率。

• 模糊搜索：系統(tǒng)根據(jù)用戶所查詢的關(guān)鍵詞，智能匹配可能的結(jié)果。

• 定時自動更新：新增的列表項「高亮」，持續(xù)幾秒后恢復正常。不需要用戶手動刷新，減少不冗余的操作。

3.避免回憶

人們在思考的時候，是需要依靠大腦神經(jīng)元之間相互傳遞信號，而回憶是需要調(diào)用更多的的神經(jīng)元傳遞信號，簡單地說就是非常費腦子。

• 搜索歷史：搜索歷史的功能，可以減少用戶的回憶，使得整個體驗更加輕松愉悅。

4.信息降噪

根據(jù)費茨法則（Fitts's Law）所描述的，如果用戶鼠標移動距離越少、對象相對目標越大，那么用戶越容易操作。通過運用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡化交互，起到信息降噪的作用。

費茨法則 ：到達目標的時間是到達目標的距離與目標大小的函數(shù)，具體：。其中：1.設備當前位置和目標位置的距離（D）；2.目標的大?。╓）。距離越長，所用時間越長；目標越大，所用時間越短。

• 列表嵌入層：將列表為多層級時，隱藏弱層級列表內(nèi)容，可以讓用戶更加直觀地看到重要信息。當我在聚焦某一個列表模塊的內(nèi)容，鼠標懸浮即可展開。

• 標簽頁：標簽也換可以將信息內(nèi)容進行分類，讓用戶更易理解。

• 漸進式展現(xiàn)：用戶在填寫表單時，會根據(jù)當前錄入的數(shù)據(jù)，展現(xiàn)下一項需要填寫的內(nèi)容，這樣的展現(xiàn)方式可以屏蔽掉無關(guān)緊要的內(nèi)容。

• 懸停即現(xiàn)工具：鼠標懸停時，出現(xiàn)操作項。這樣將不重要信息或者操作隱藏起來，不會干擾到用戶瀏覽其他重要內(nèi)容。

③ 系統(tǒng)反饋即時

包含 Ant Design 的設計原則有：『 簡化交互 』『 巧用過渡 』『 即時反應 』。

「系統(tǒng)反饋及時」的重要性體現(xiàn)在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應該立即有一個對應的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。

1.實時反饋

雖然反饋太多（準確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統(tǒng)，則讓人感覺遲鈍和笨拙，用戶體驗更差。

牛頓第三定律 ：當兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反?！浴毒S基百科》

• 實時預覽：根據(jù)用戶的輸入，提供關(guān)于密碼強度和有效性的實時反饋提示。

• 文字鏈熱區(qū)：當懸浮在 ID 所在的文字鏈單元格時，鼠標「指針」隨即變?yōu)椤甘中汀梗瑔螕艏纯商D(zhuǎn)。

2.過渡反饋

人腦灰質(zhì)（Gray Matter）會對動態(tài)的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當?shù)募尤胍恍┻^渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。

Adding: 新加入的信息元素應被告知如何使用，從頁面轉(zhuǎn)變的信息元素需被重新識別。

Receding:  與當前頁無關(guān)的信息元素應采用適當方式移除。

Normal: 指那些從轉(zhuǎn)場開始到結(jié)束都沒有發(fā)生變化的信息元素。

• 表格加載：網(wǎng)絡不好或者表格數(shù)據(jù)過多，都有可能導致加載緩慢，這時有一個小動畫可以緩解用戶的焦慮感。

• 富列表加載：用戶在打開列表時，頁面無法做到一次性加載所有的數(shù)據(jù)，同時有為了減少翻頁的繁瑣操作，就有了下拉自動加載的。

• 頁面加載：當用戶訪問的頁面體量過大時，系統(tǒng)會通過給出倒計時或完成百分比，來緩解用戶焦慮，并且給用戶友好可控的感覺。

• 滑入與滑出：可以有效構(gòu)建虛擬空間。  

• 折疊窗口：在視圖切換時，有助于保持上下文，同時也能拓展虛擬空間。

• 對象增加：在列表/表格中，新增了一個對象。

• 對象刪除：在列表/表格中，刪除了一個對象。

• 對象更改：在列表/表格中，更改了一個對象。

• 狀態(tài)一：用戶更改了「詳情」中的值；

• 狀態(tài)二：用戶點擊「保存」后，詳情所在的網(wǎng)格出現(xiàn)「黃底」，表明該對象發(fā)生了更改；

• 狀態(tài)三：底色持續(xù)幾秒后，恢復正常。

• 對象呼出：點擊頁面中元素，呼出一個新對象。

3.結(jié)果反饋

用戶常常會疑惑自己的操作是否成功了，哪怕是失敗了也是需要系統(tǒng)反饋，這樣才能安心進行下一步的操作。

• 頁面反饋結(jié)果：

• 氣泡反饋結(jié)果：

④ 用戶自由可控

包含 Ant Design 的設計原則有：『 提供邀請 』『 足不出戶 』『 即時反應 』。

「用戶自由可控」的重要性體現(xiàn)在 交互前對下一步操作的預判；交互時 不論操作后的結(jié)果多嚴重都要允許用戶自主決策；以及交互后 能否對自己的操作結(jié)果反悔。

1.未來預判

很多富交互模式（eg：「拖放」、「行內(nèi)編輯」、「上下文工具」）都有一個共同問題，就是缺少易發(fā)現(xiàn)性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示，以表明在下一個界面可以做什么。  這樣人機交互的過程往往更加自然、順暢。

• 點擊刷新：對于設計師而言，最常見的例子要屬花瓣了，我們時長會沉浸在我們?yōu)g覽的瀑布流卡片中，如果系統(tǒng)強行刷新當前頁面，用戶很有可能迷失。邀請用戶主動更新，既不會錯過新的消息，又不會導致我們的心流被打斷。

• 未完成邀請：用戶在當前頁面無法完成登錄操作，為了減少用戶迷茫的焦慮感，系統(tǒng)告知用戶點擊“更改”鏈接，可以去向何處。

• 懸停邀請：鼠標「懸停」時，出現(xiàn)「選擇此模板」的按鈕。

2.自主決策

雖然系統(tǒng)中缺少不了一些危險操作或者不可逆操作(eg：刪除、重置、重裝系統(tǒng)等)，但是仍然要用戶自主決定是否繼續(xù)，我們能做的就是讓用戶再三確認。

• 彈窗提示：雖然彈窗打斷用戶心流，但是對于重要的操作，這樣是最保險的方式。

• 刪除知識庫提示：是釘釘中，刪除「知識庫」這一重要內(nèi)容，是不可逆的，系統(tǒng)需要用戶謹慎操作。

3.準許反悔

如果說「自主決策」中提到的案例都是不可逆的，那「準許反悔」的后果嚴重性會弱一些，系統(tǒng)對用戶的操作沒有那么強的阻斷性，所以要準許用戶反悔的，

• 刪除撤銷：用戶點擊「刪除」后，直接操作；出現(xiàn) Message 告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者 1 分鐘內(nèi)不進行任何操作， Message 消失，用戶無法再「撤銷」。

『 Ant Design的優(yōu)點與缺點 』

① 優(yōu)點

1.助初創(chuàng)團隊快速產(chǎn)品快速上線

Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業(yè)務產(chǎn)品能否成功，但是能幫助業(yè)務產(chǎn)品『正確的成功』或者『正確的失敗』?！?

如果團隊有一個產(chǎn)品idea，我們需要通過最少的資源開發(fā)此產(chǎn)品并投入到市場中，通過聽取用戶反饋，驗證idea是否可行，快速迭代最終做出更完善的產(chǎn)品。但理想是美好的，但現(xiàn)實是骨感的，在前期研發(fā)的過程中通常會出現(xiàn)兩個情況。創(chuàng)業(yè)團隊沒有足夠的設計資源和時間，前幾個版本的產(chǎn)品通常用戶體驗非常差，這種情況體驗差有可能讓用戶放棄這款產(chǎn)品。創(chuàng)業(yè)團隊沒有好的方法論和協(xié)作模式，需要磨合，設計和開發(fā)進度一延再延，結(jié)果錯過了風口，市場被競品搶占，還沒上線就倒閉了。

Ant Design提供了一套完整的界面實現(xiàn)方案，即有代碼框架能直接拿來提高開發(fā)效率，每個界面組件都經(jīng)過螞蟻金服多個項目的考驗，具備優(yōu)秀的用戶體驗。用Ant Design來做0-1，能快速發(fā)布用戶體驗優(yōu)秀的產(chǎn)品，聽取用戶反饋，快速迭代。

當然，創(chuàng)業(yè)是九死一生，市場和用戶口味都充滿了不確定性，誰也沒有能力保證產(chǎn)品是否成功，但是只要你能高效的產(chǎn)出質(zhì)量優(yōu)秀的產(chǎn)品，不斷試錯，說不定以后就能成功。

2.減少設計和開發(fā)的不確定性。

用 Ant Design 就能高效的產(chǎn)出高質(zhì)量的產(chǎn)品，減少設計和開發(fā)的不確定性。

因為我們公司就使用了 Ant Design 的系統(tǒng)，所以時常會與前端小伙伴溝通，以下都是他們在使用過程的感想。

Ant Design 提供的大量功能比較全面且UI風格統(tǒng)一的組件，能幫助開發(fā)者快速搭建通用場景下的應用界面。這大概是得益于螞蟻金服業(yè)務線上極為廣泛的應用場景，驅(qū)動了 Ant Design 團隊通過對使用情況的觀察匯總，整理出來了這么一個組件庫。他們的經(jīng)驗積累如此之豐富，足以讓這個庫支持大部分其他前端開發(fā)者的需要。

其設計團隊給出的設計規(guī)范相當詳細且經(jīng)得起推敲，令許多其他團隊獲益匪淺。

3.節(jié)省設計與開發(fā)的人力成本

我見過太多宣稱自己在乎用戶體驗的公司，給用戶的產(chǎn)品質(zhì)量確實比較高，但是自己員工內(nèi)部使用的系統(tǒng)和管理一團糟。種種不便讓員工經(jīng)常加班，情緒消極，這樣的團隊抄抄競品達到行業(yè)標準體驗還行。要想突破是不可能了，因為創(chuàng)新需要員工有充沛的精力和主動性，天天加班誰還有這精神。

用 Ant Design 系統(tǒng)提供的設計工具和組件框架能給設計師和開發(fā)者減少負擔，能用更少的時間呈現(xiàn)給用戶體驗好的產(chǎn)品。這樣帶來的好處不僅僅是設計師和開發(fā)者覺得少加班成就感高而幸福，他們重新恢復活力和激情能做出更有創(chuàng)意和競爭力的產(chǎn)品，給公司帶來更大的收益，這是一個三贏的結(jié)局。

② 缺點

1.無法根據(jù)業(yè)務場景定制組件，靈活度不夠

一定有小伙伴會有這樣的疑問，目前市面上有這么多的第三方設計規(guī)范，例如 Ant Design ，Element UI，有必要自己造輪子做一遍嗎？

這里要視情況而定，如果公司產(chǎn)品是初創(chuàng)期，而且研發(fā)人手不足，那確實沒有必要自己造輪子。反之在資源足夠的情況下，是有必要設計團隊重新做一套屬于自己產(chǎn)品的規(guī)范組件庫的，因為B端自身的業(yè)務性決定了市場上沒有萬能的設計規(guī)范，那些設計規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設計規(guī)范，在此基礎(chǔ)上進行修改，效率很低，適配的復雜度和重新開發(fā)相差無幾。

2.組件細節(jié)深入度不夠，只能“將就”使用

對于比較普通的設計解決方案是可以的，但是 Ant Design 包含的組件細節(jié)仍有不足，畢竟 Ant Design 沒必要投入過多的精力在組件細節(jié)深入度上，規(guī)范定義的越是精細，對于產(chǎn)品組件而言可延展性就越差，限制也會越多。而 Ant Design 只需要解決80%企業(yè)，80%的通用問題即可。

3.競品同質(zhì)化嚴重，視覺上無法脫穎而出

當市場大部分產(chǎn)品都在使用 Ant Design 設計系統(tǒng)時，產(chǎn)品的同質(zhì)化就會很嚴重。為了避免這種情況發(fā)生，我們就有必要從設計語言、設計原則、設計組件三個部分開始，設計自己的規(guī)范。那些大廠的成熟的組件庫該如何用呢？我認為應該把它當成一個字典，有不會的地方，可以去參考人家的成熟的解決方案。

『 總結(jié) 』

這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設計原則是什么以及 Ant Design 的優(yōu)缺點。當然也重點總結(jié)了一下，設計師如何運用 Ant Design 的設計原則，可以將這些原則分為四類：視覺層級清晰、交互操作高效、系統(tǒng)反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設計原則，并將其靈活運用到設計工作中。

參考文獻：

《Ant Design 官網(wǎng)》

《設計心理學 1 》 [美] 唐納德·A·諾曼 

《寫給大家看的設計書》 美國羅賓·威廉姆斯(RobinWilliams)

《web界面設計》 Bill Scott    Theresa Neil

《維基百科》

《如何評價 Ant Design 這個項目（一個設計語言）？》 龍爪槐守望者

文章來源：站酷   作者：菜菜不甜 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

摘要

面對企業(yè)級產(chǎn)品，由于系統(tǒng)復雜度和業(yè)務領(lǐng)域的專業(yè)壁壘，用戶、產(chǎn)品、業(yè)務、技術(shù)的理解和分析難度都遠遠高于C 端。特別是進入業(yè)務深水區(qū)，技術(shù)術(shù)語層出不窮，角色鏈路錯綜交織，場景越來越復雜，在理解和分析業(yè)務上設計師需要耗費的精力越來越多，設計師如何高效且深入的分析業(yè)務，直接影響到設計解決問題的深入度。基于螞蟻金服CTO 線的業(yè)務土壤，我們不斷嘗試打磨，探索出以JCD 為核心的企業(yè)級產(chǎn)品設計思維，助力設計師在深耕業(yè)務上有章可循，有方法可用。

復雜系統(tǒng)的特點

做企業(yè)級產(chǎn)品 3 年多，剛從 C 端業(yè)務轉(zhuǎn)過來時，最大感受是對業(yè)務理解起來很艱難。隨著經(jīng)驗的增加，對 0 到 1 產(chǎn)品駕馭起來輕車熟路，可到業(yè)務深水區(qū)，還是感覺痛苦。技術(shù)術(shù)語層出不窮，用戶角色多，一個用戶身兼數(shù)個角色，系統(tǒng)之間的關(guān)聯(lián)關(guān)系也很復雜，隨著業(yè)務的深入設計師會感覺對產(chǎn)品逐漸失去掌控力。一個簡單的芝麻信用分，需要 20-30 個中后臺產(chǎn)品和各種角色一起協(xié)同支撐。然而復雜是守恒的，系統(tǒng)復雜性的總量是一個衡量，當前臺的呈現(xiàn)更簡單時，隱藏在幕后的復雜性就增加了。

我們面臨系統(tǒng)的復雜性表現(xiàn)在三個方面：

• 多角色，重協(xié)同。

• 鏈路長、錯綜交雜。

• 技術(shù)術(shù)語多，業(yè)務難理解。

但企業(yè)級產(chǎn)品會有一個主線，是從「事情」的角度出發(fā)，關(guān)注一件又一件事情被完成。企業(yè)場景下我們再把事情描述的具體一些，就是一個又一個的 Job 。設計師要做的就是通過設計，包括參與的角色、使用的工具以及協(xié)作方式等，讓 Job 被高效完成。

JCD 設計思維應對復雜系統(tǒng)

我們先對比一下，從「用戶」視角和從「Job」視角出發(fā)，關(guān)注的維度有哪些差異呢？從用戶視角出發(fā)我們需要關(guān)注用戶的個人痛點、情緒、興趣、人種志（年齡、性別、收入）等信息，會更關(guān)注人，核心是為了滿足用戶的需求。在Job 視角下，需要關(guān)注 Job 的目的、參與角色、協(xié)作方式、工具等信息，而且 Job 對角色是有要求的，比如航空公司飛行員，按崗位要求，他需要不斷提升自己業(yè)務能力，每年要去復訓兩次，學習新的技能和知識來滿足崗位對飛行員這個角色的要求。

基于我們的業(yè)務土壤，以及出發(fā)視角，我們探索出一套適合企業(yè)級產(chǎn)品的設計思維，JCD（Job - Centered Design ）以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協(xié)作關(guān)系等。以 Job 被高效完成為決策依據(jù)的設計思維。它是一套適用于企業(yè)級產(chǎn)品設計的發(fā)現(xiàn)問題、解決問題的方法論。

在 JCD 設計思維下，將設計流程分為四個階段，發(fā)現(xiàn)、構(gòu)思、呈現(xiàn)、度量。每個階段下有不同的方法、產(chǎn)出、資產(chǎn)。Ant Design 在「呈現(xiàn)」階段幫設計師大大提升了效能，設計師才有更多的精力投入到「發(fā)現(xiàn)」階段去更深入去理解業(yè)務和角色。接下來重點分享一下在發(fā)現(xiàn)階段的兩個方法，角色分析和業(yè)務分析。

JCD 方法 - 角色分析

常用的 C 端的用戶畫像，如下圖，會關(guān)注用戶人口統(tǒng)計學的信息，如名字、性別、年齡、所在地、家庭情況、用戶的習慣、愛好等信息，這些信息在復雜的企業(yè)級產(chǎn)品中是不需要去關(guān)注的。

企業(yè)級產(chǎn)品角色畫像

在JCD 的視角下，我們企業(yè)級產(chǎn)品的角色畫像應該關(guān)注的三個維度：角色概覽、工作能力、工作內(nèi)容。而工作內(nèi)容是最核心需要關(guān)注的信息，包括了工作的描述、工作的痛點、需求和使用的工具。

一個角色往往需要完成多個Job，描述一個Job 包含：

• 四要素：情景、角色、活動、目標。

• 一個句式：在什么情景下，角色需要完成什么樣的活動，來達成一個目的。

舉個例子，在飛行前 1.5 小時（情景），角色（飛行員）需要去查看飛機情況（活動 A ）、氣象情況（活動 B ），來判斷能否起飛（目標）。

為了給設計提供具體的依據(jù)，我們需要進一步縱向解構(gòu)Job，來構(gòu)建 1 個完整 Job 場景，設計師可以階梯式對一個 Job 進行拆分，Job 下面有多個 Activity，Activity 下面有多個 Task 組成，Task 下面有不同的 Action，到這種顆粒度可影響到設計界面中的具體元素。

看一個具體案例，如何拆解一個 Job，首先用我們的上面的四要素和句式描述。Job：飛行前 1.5 小時，飛行員需要查看飛機情況、查看氣象情況，來判斷能否起飛。在飛行員這個角色的 Job 里包含了兩個 Activity ：1. 查看飛機情況；2. 查看氣象情況。查看氣象情況這個 Activity 下包含了三個 Task：1.查看起飛地天氣；2.查看降落地天氣；3.查看備降地天氣。

每個 Task 下面會有不同的 Action。除了 Job 的縱向拆解，我們還需要關(guān)注每個 Job 場景下的需求、痛點、費力度、成就感。

以 Job 場景為核心，串連角色協(xié)作關(guān)系

做好一件復雜的事情，往往需要多個角色在多個工作場景中協(xié)同配合。我們會以Job 場景為核心，梳理角色之間的協(xié)作關(guān)系，建立全局視角。比如，在飛機起飛前，機組飛行員查看飛機和飛行信息、查看起降地天氣等；同時乘務組空姐們?yōu)榇舜物w行做相應準備工作。準備完畢，機長會通知機組和乘務組開始登機。上飛機后機組需要檢查駕駛艙情況，乘務組檢查客艙情況，檢查完畢，會一起協(xié)同機場地勤人員安排乘客登機。完成登機后，飛行員需要聯(lián)系機場管制申請起飛........ 設計師可以通過Job 場景去串聯(lián)角色之間的協(xié)作關(guān)系，如下圖。

以上是「角色分析」的方法，是從 Job 出發(fā)洞察角色的工作需求以及協(xié)作模式，幫助設計師構(gòu)建角色協(xié)同的全局觀。

JCD 方法- 業(yè)務分析

業(yè)務分析的方法是借鑒面向?qū)嶓w的思路幫助設計師去深入分析復雜業(yè)務。企業(yè)級產(chǎn)品中會有各種技術(shù)術(shù)語、復雜的數(shù)據(jù)流轉(zhuǎn)、業(yè)務邏輯等，我們需要一個系統(tǒng)的方法來分析和理解業(yè)務，為設計提供準確有深度的信息輸入。我們的用戶大部分是軟件工程師，這個思路可以讓設計師在理解和認知上對齊用戶的心理模型。我們業(yè)務分析的有三個維度：

• 產(chǎn)品定義

• 實體建模

• 業(yè)務邏輯

通過以上三個維度，從縱向和橫向去深入和全面的理解業(yè)務。

首先，產(chǎn)品定義。

通過溝通交流、桌面研究的方法，去了解產(chǎn)品和用戶相關(guān)信息，熟悉相關(guān)概念和技術(shù)背景、沉淀信息資料，來收集產(chǎn)品的信息，具體的產(chǎn)出有名詞庫、產(chǎn)品畫布、產(chǎn)品的關(guān)系圖、業(yè)務結(jié)構(gòu)圖、產(chǎn)品形態(tài)圖等，這里不展開詳述。

其次，實體建模。

實體建模是本次分享的重點，實體建模按照面向?qū)嶓w的思想分析業(yè)務，圍繞實體進行問題和內(nèi)容抽象和分析，聚焦于產(chǎn)品內(nèi)實體和實體間的關(guān)系，以及實體的生命周期的分析。

我們先看什么是實體，參考領(lǐng)域建模（此處感謝幻星給實體的定義）給實體一個定義：實體是產(chǎn)品中客觀存在，具有唯一標識的并可以相互區(qū)分的業(yè)務載體，通常包含屬性和行為。

企業(yè)級產(chǎn)品系統(tǒng)的實體，很多情況下都是熟悉的字母，陌生的單詞，在設計之前設計師如何去準確、系統(tǒng)的去分析實體。

舉個例子，現(xiàn)實世界中，「機票」是一個實體，在產(chǎn)品里，可以把「機票訂單」看成一個實體。圍繞著機票訂單，我們梳理出它的基本屬性信息，以及它具有的所有狀態(tài)和對應操作，設計師可以進一步把這些狀態(tài)和操作梳理出一個「機票訂單」這個實體從產(chǎn)生到消失整個生命周期經(jīng)歷的過程。這些分析可以作為后續(xù)任務流程和設計細節(jié)的信息輸入。

一個實體不能構(gòu)成一個產(chǎn)品，一個系統(tǒng)會有很多實體存在，我們需要進一步去梳理「機票訂單」與系統(tǒng)中其他實體的聯(lián)系。在下圖的案例中，機票訂單與機票是聚合 n：1 關(guān)系, 一張機票訂單會包含多張機票，機票訂單與收支明細是關(guān)聯(lián) 1：n 的關(guān)系，一張機票訂單會關(guān)聯(lián)到多個收支明細，比如會有支付成功、退款等明細。

最后，業(yè)務邏輯。

以上是實體建模的過程，產(chǎn)品定義和實體建模都是對業(yè)務內(nèi)容層進行理解和梳理。但是我們的業(yè)務除了內(nèi)容外，還有很多復雜的業(yè)務規(guī)則、業(yè)務流程，我們也需要進行梳理和分析，這樣設計師才能對業(yè)務有全面的理解。

所以我們需要把結(jié)合實體、業(yè)務規(guī)則、業(yè)務流程，進一步梳理業(yè)務邏輯。最終會得到一張業(yè)務邏輯圖，不僅能夠幫助設計師洞察到業(yè)務的本質(zhì)，也能幫設計理解業(yè)務的全貌。

第二個方法業(yè)務分析，是通過面向?qū)ο蠓治鏊悸啡ド钊氲睦斫鈽I(yè)務，為設計提供更精準，更有邏輯的依據(jù)。

總結(jié)

回顧以上三部分內(nèi)容，JCD 是什么？Job - Centered Design 是以 Job 為中心的設計思維。JCD 的定義：以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協(xié)作關(guān)系等。以 Job 被高效完成為決策依據(jù)的設計思維。它包含了原則、流程、方法&工具、產(chǎn)出&資產(chǎn)，上面重點分享了其中兩個方法「角色分析」和「業(yè)務分析」。

文章來源：站酷   作者：Ant_Design 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

真正出色的金融產(chǎn)品是基于可用性，在成熟的數(shù)字生態(tài)系統(tǒng)中，能持續(xù)滿足用戶的特定需求。在UXDA每年交付的數(shù)十個UX/UI設計中，我特別選出了一些重要的作品來舉例，與大家探討設計對塑造金融產(chǎn)品方面的影響。

1/10 從標準化到量身定制

過去20年來，人們認為在創(chuàng)建數(shù)字金融產(chǎn)品時設計發(fā)揮的作用微不足道，這種刻板印象根深蒂固。大多數(shù)情況下，甚至被認為是出于營銷目的的包裝，關(guān)注點也多在產(chǎn)品功能和特性上。

使用標準化設計模板來加速產(chǎn)品開發(fā)是常見的做法，但這也解釋了為什么許多金融服務看起來如此相似——平淡、乏味且對用戶不友好的。

10年前出現(xiàn)的金融科技，打破了人們對設計的偏見，企業(yè)用其來吸引客戶，并試著將設計潛力發(fā)揮到最大。而現(xiàn)在，進入金融行業(yè)的新玩家更專注于獨特創(chuàng)新的設計，來凸顯品牌身份。

大多數(shù)客戶厭倦了乏味又復雜的模板設計，量身定制作為一種全新的趨勢應運而生，不僅為產(chǎn)品注入了新鮮活力，還令金融公司的市場飆升。

「Private Wealth Systems」的財富管理平臺就是一個很好的例子，通過量身定制的設計，為超高凈值人士 (UHNWI) 提供他們對精致生活所期望的奢華體驗。

該平臺的優(yōu)勢在于它旨在解決用戶每天遇到的痛點，關(guān)心客戶財富的同時并盡最大努力協(xié)助其管理，而量身定制也增強了品牌與客戶之間的情感聯(lián)系。敢于打破禁忌并投資于大膽現(xiàn)代設計的金融機構(gòu)知道，隨著客戶忠誠度和參與度的提高，肯定也會帶來回報。

Takeaway

根據(jù)品牌VI創(chuàng)建的產(chǎn)品界面，可以使其在日后的競爭中脫穎而出。

2/10 從有限單一功能到多功能超級應用

向移動模式轉(zhuǎn)型時，集中出現(xiàn)了幾家金融科技公司，他們的優(yōu)勢在于功能單一，非常簡單易懂。對客戶來說，這就像一股新鮮空氣，因為當時的銀行服務功能既復雜多又對用戶不友好。

當今的金融產(chǎn)品，正在不斷擴大外部服務，打破功能壁壘?！窻evolut」就是一個很好的例子，它不斷擴展功能，逐漸成為一個超級應用程序。

單一模式的設定確實很簡單，但隨著用戶期望的增長，以同樣方式呈現(xiàn)更多功能的需求也在逐步增加。對用戶來說，如何用一種既直觀又體驗佳的方式，展示100多個功能呢？

既要為客戶提供解決功能，又不能在使用體驗上打折扣，這并不簡單。需要UX架構(gòu)師和經(jīng)驗豐富的UI設計師密切合作，共同面對挑戰(zhàn)——創(chuàng)建直觀的產(chǎn)品架構(gòu)與合乎邏輯的、用戶友好的界面布局。

來看一個UXDA的多功能銀行應用程序例子：我們將區(qū)塊鏈、游戲化、機器人咨詢、語音處理、生物識別、大數(shù)據(jù)等數(shù)十個功能整合進同一程序內(nèi)，打造銀行即平臺的應用理念。

越來越多的功能服務不斷涌現(xiàn)，可用性高的產(chǎn)品更容易吸引用戶。這就解釋了為什么金融機構(gòu)都在努力創(chuàng)建自己的新銀行或超級應用程序，但展示的服務內(nèi)容也需要與公司的發(fā)展方向保持一致。

根據(jù)我們的經(jīng)驗，品牌希望在產(chǎn)品中包含大量「現(xiàn)代」功能，他們相信這會使解決方案在競爭中脫穎而出。但也可能會適得其反，建議在UX研究階段做好取舍，以便確定更符合品牌受眾的功能。非常成功的金融產(chǎn)品都是基于品牌受眾的特定需求設計的，這些需求為客戶提供額外的價值。

Takeaway

從超級應用程序設計中學習實踐經(jīng)驗，保持簡單性和可用性的同時，再進行產(chǎn)品拓展。

3/10 從表格式界面到游戲化

相信多數(shù)人看到銀行后臺，都會驚訝于它的復雜。員工必須同時使用多個軟件程序，按照說明輸入代碼才能進行工作。操作系統(tǒng)也需要數(shù)月時間去學習，甚至用了很多年，還是無法全部記住。

由于涉及到大量的客戶信息，這些解決方案全靠數(shù)據(jù)驅(qū)動，非常復雜。許多銀行都在努力降低后臺成本，卻沒有意識到對客戶體驗的影響。這導致了一個悖論：銀行在數(shù)字化轉(zhuǎn)型中投入大量資金以改善用戶體驗，而削減銀行核心系統(tǒng)的成本又對客戶服務造成損害，銀行員工的負面體驗又會影響服務質(zhì)量和最終客戶滿意度。

后臺系統(tǒng)的改進可以顯著提高服務質(zhì)量和速度，從而使客戶更滿意。以用戶為中心的設計方法，在當今創(chuàng)建金融產(chǎn)品中也越來越流行，它不僅可以應用于外部銀行產(chǎn)品，還可以應用于內(nèi)部解決方案。

提高內(nèi)部工作效率的一種方法是使用游戲化設計。這種方法使整個工作流程更加現(xiàn)代化，從而實現(xiàn)了工作流程的轉(zhuǎn)變，如「ITTI Digital」所示。

為了使其以用戶為中心，我們將大量繁重的數(shù)據(jù)翻譯成人類語言。員工的學習曲線從幾個月縮短至幾個小時，人為失誤的可能性顯著降低，服務速度、員工效率和客戶滿意度都大幅提升。

此方案在IF的數(shù)字金融服務設計大獎中也得到了認可

金融機構(gòu)將員工視為內(nèi)部用戶，為他們創(chuàng)造盡可能好的體驗，相當于也為銀行客戶提供了最好的服務。認為游戲化和銀行業(yè)務沒有共同之處的想法太過時了，游戲化不僅提高了員工的生產(chǎn)力和積極性，也讓結(jié)果變得更好。

Takeaway

嘗試應用游戲化來激勵用戶，還能使最無聊的金融產(chǎn)品煥然一新。

4/10 從有限的功能到完整的體驗

5年前，移動應用程序還被當做非主流的使用渠道，但今天它卻滿足了大多數(shù)客戶的要求。令人驚訝的是，移動程序的功能非常有限，用戶體驗也相當差，甚至一些銀行服務只在分行提供。疫情反應了嚴峻的現(xiàn)實——金融業(yè)還沒有做好迎接數(shù)字時代的準備。

為改善金融品牌的客戶體驗，需要對移動應用程序進行全面的設計審核，以確保遠程用戶可以訪問所有服務和功能。一家成熟的金融科技公司應快速找出適合客戶的遠程體驗設計方法，而不是冠冕堂皇的借口。

設計「阿拉伯聯(lián)合銀行 (UAB)」移動應用程序時，我們的主要挑戰(zhàn)是簡化所有的日常功能操作步驟，使其簡單高效。

流程的優(yōu)化使用戶更容易瀏覽應用程序，探索新的可能，同時也鼓勵用戶與程序互動，而不是聯(lián)系銀行或直接去分行。新應用僅發(fā)布數(shù)月，在App Store 和Google Play的下載率都大幅提升。

Takeaway

找到缺失的功能并完善它，建立一個完整的使用流程。

5/10 從傳統(tǒng)企業(yè)到數(shù)字化轉(zhuǎn)型

越來越多的老牌銀行企業(yè)敢于走出舒適圈，挑戰(zhàn)自我，踏上數(shù)字化轉(zhuǎn)型之路。在金融科技的啟發(fā)下，現(xiàn)有企業(yè)為用戶體驗設計注入了生命力，從而創(chuàng)造出令客戶驚嘆的產(chǎn)品，激勵用戶長期使用。

他們與內(nèi)部或是外部的UX/UI設計師合作，整合公司各層級的設計方法和組織文化。這種融入了設計角色的團隊，以用戶為中心快速轉(zhuǎn)型，成為金融科技獨角獸的有力競爭對手。

「VTB銀行」是一家被數(shù)百萬人信賴的銀行，升級用戶體驗后，產(chǎn)品重獲新生，也體現(xiàn)了企業(yè)對線上銀行用戶的重視。

「VTB銀行」的用戶反饋說：新升級的產(chǎn)品更貼合他們的生活方式了；銀行員工們也表示，緊跟時代變化的品牌，更能為客戶提供最優(yōu)的服務。

Takeaway

設計至上，跳出傳統(tǒng)，才能打造出一流的數(shù)字產(chǎn)品。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷   作者：UX辭典

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

增長設計是時下的熱門話題，越來越多的企業(yè)開始關(guān)注增長設計，成立獨立的增長部門。在螞蟻體驗技術(shù)部，我們除了做好體驗設計的「老本行」外，也在往增長的方向探索。在現(xiàn)有的增長理論指導下，我們結(jié)合自身業(yè)務，邊落地實踐，邊沉淀總結(jié)。以下是我們的一些小心得。

本文會講述我們是如何利用增長大圖梳理產(chǎn)品各個環(huán)節(jié)，以及如何用定量的用戶行為數(shù)據(jù)漏斗，和定性的痛點比重數(shù)據(jù)，綜合分析，去找到機會點。輔以在 Kitchen 和 語雀 中的增長實踐案例說明。在增長一塊，我們還處于初步探索階段，若有不成熟的地方，歡迎大家一起討論。

為什么要關(guān)注增長？

說到增長，過去 10 幾年是中國互聯(lián)網(wǎng)高速增長的階段，但近 2-3 年來，隨著人口、流量、資本的紅利衰退，越來越多企業(yè)開始關(guān)注增長。典型的是，2017 年可口可樂宣布取消 CMO（首席營銷官），由 CGO（首席增長官）替代，之后各種增長類職位相繼涌出。

什么是增長？

增長是建立在用戶基礎(chǔ)上的，用戶產(chǎn)生需求，需求又衍生出產(chǎn)品，產(chǎn)品之上才可能有增長。所以我們理解：產(chǎn)品在創(chuàng)造價值，而增長其實是傳遞價值，讓價值被發(fā)現(xiàn)。只有讓更多的用戶，最大限度地體驗產(chǎn)品的核心價值，才可能迅速擴張以及有效地變現(xiàn)。它有幾個特點：

1.首先他是關(guān)注用戶全生命周期，不僅僅是獲客、變現(xiàn)。還需要關(guān)注怎么激活用戶，讓用戶用起來，留存下來，傳播出去

2.另外，增長不是一個單打獨斗的獨行俠，而是體系化的，以團隊共創(chuàng)聚焦的方式來推動增長

3.強調(diào)數(shù)據(jù)和實驗：從數(shù)據(jù)分析中洞察，提出假設，循環(huán)實驗的過程

什么產(chǎn)品適合做增長？

那什么樣的產(chǎn)品適合做增長？我們所做的 To B 產(chǎn)品適不適合做增長？

首先看下 To B 和 To C 的差異：To B 產(chǎn)品，多數(shù)是群體決策，決策鏈路復雜，買的人不一定是用的人，如果是客單價較高的話，基本靠銷售關(guān)系驅(qū)動購買，但像具有 C 類屬性的產(chǎn)品，因為是個人消費場景，單一決策購買，就像平時大家在淘寶買東西一樣，隨心所欲。那運用增長策略去推動轉(zhuǎn)化，能節(jié)約很大的獲客成本，可見增長更適用于 C類屬性的產(chǎn)品。

但經(jīng)過大半年的實踐，并且和其他增長團隊交流，我們發(fā)現(xiàn)雖然 To B 增長很難，但在 SMB（中小企業(yè)）的增長很有機會。SMB 中小企業(yè)，有可能是 2-3 人組成的小團隊，這類企業(yè)的客戶和用戶通常是同一類人，我們理解這也具有 To C 屬性。并且中小企業(yè)數(shù)量多，實驗數(shù)據(jù)也有保障。

一句話總結(jié)：To SMB 中小企業(yè)客群的產(chǎn)品可以做增長。

那具體怎么做呢？結(jié)合我們自身經(jīng)驗，給大家分享 1 張增長大圖，2 個實踐案例。

增長大圖

增長大圖是基于 AARRR 模型，在用戶旅程圖的基礎(chǔ)上進化得來。為什么不用用戶旅程圖，而用增長大圖呢？用戶旅程圖主要通過情緒曲線來體現(xiàn)問題的嚴重性，但在使用上也存在難以量化的問題。

所以在增長大圖上，我們選擇定量的用戶行為數(shù)據(jù)漏斗來取代情緒值。漏斗其實是對一個流程和路徑的分析，目的是定位出問題的關(guān)鍵所在，這樣才能對癥下藥。但定量數(shù)據(jù)通常只會告訴我們是什么，而定性數(shù)據(jù)能告訴我們?yōu)槭裁矗?

所以，我們還建議梳理用戶調(diào)研中的定性數(shù)據(jù)，按流程、階段、產(chǎn)品模塊、問題類型等維度歸類，通過痛點比重公式，算出每個維度痛點比重的百分比，去綜合分析，找到機會點。另外，增長大圖還可以記錄從業(yè)務總目標拆解增長目標的過程，以及實驗的策略、方案、指標結(jié)果，所以增長大圖也是一份連接戰(zhàn)略和執(zhí)行，不斷更新的「活文檔」。

公式：痛點比重= [每個階段的問題數(shù) / 問題總數(shù) ] X100%

那怎么用呢？當你確定某個項目可以做增長時，最關(guān)鍵是邀請不同角色的 Key Person，包括 PD、技術(shù)、運營共創(chuàng)去搭建增長大圖。

從業(yè)務總目標出發(fā)拆解增長目標，然后將定量和定性數(shù)據(jù)梳理到大圖上，找出機會點，從而確定聚焦領(lǐng)域，開始增長實驗。想想就像大家在吃自助餐的過程，基本都是先看一遍有什么，再篩選一下，小份量的取餐嘗試，最后再確定幾樣好吃的，重點吃。

小份量的取餐嘗試，就等于增長實驗的過程。分為 4 個步驟：

從定量和定性數(shù)據(jù)中分析洞察——不斷的提出假設——然后排定優(yōu)先級，進行實驗——驗證應用的過程。

接下來，分享兩個我們在增長中做的小 Case。

案例一：1 塊錢 6 周 Ant Design 設計工具 Kitchen 增長實踐

Kitchen 是一款為設計者提升工作效率的 Sketch 工具集。先利用增長大圖看下 Kitchen 的現(xiàn)狀，我們撈取用戶從訪問——下載——安裝——使用的數(shù)據(jù)漏斗，可以看出整體漏斗還是很不錯的，整體留存率達到 40%。

然后我老板就說：「可以去做拉新增長，給你一塊錢成本，去撬動一個地球吧?！蛊鋵崳耶敃r就想給他一個白眼，現(xiàn)在一塊錢能做什么？但反過來想想，這確實是增長很重要的一點：怎么用最小的成本去撬動最大的價值，找到最大的發(fā)力點。

基于當時的 DAU 數(shù)據(jù)現(xiàn)狀，并初步討論后，我們敲定 6 周 DAU 增長翻倍的目標。圍繞這個目標，再進一步拆解為新增和留存，前面有提到留存率不錯，所以我們這 6 周的增長聚焦在拉新上。那么拉新最重要是找到低成本的渠道運營。然后，我們腦爆了一些平時設計師會去的和我們可以切入的網(wǎng)站，雖然篩選了一些，但還是有很多，我們不可能全部去鋪。在人有限、錢有限、時間有限的情況下，再回歸我們的目標，需要找到最合適和低成本的渠道去運營。

所以基于 ICE 評分體系以及結(jié)合業(yè)務，我們做了局部調(diào)整，最終以渠道的「影響力」、「轉(zhuǎn)化率」和「可行性」3 個維度進行打分，確定前 4 個打星標的渠道去做實驗，這里主要分享下在 Ant Design 渠道上做的小實驗。

在增長之前，我們已經(jīng)在 Ant Design 首頁投下過廣告，通過數(shù)據(jù)發(fā)現(xiàn)轉(zhuǎn)化率不足 0.2% ，后來我們分析 Ant Design 各個頁面上的數(shù)據(jù)，從中發(fā)現(xiàn)一個有趣的現(xiàn)象，從招聘貼過來的用戶竟然比首頁過來的用戶還多。

對比這兩個入口，一個是首頁，一個是很內(nèi)頁的文字鏈，比較偏僻的入口，位置是微不足道，但給 Kitchen 帶來的用戶卻是首頁的 10 倍。

我們又對比了他們之間的差別：首頁雖然是比較大的位置，瀏覽量大，但用戶普遍是大致瀏覽，看的欲望不強。而點擊招聘頁，通常是帶著目的進來，所以這部分的用戶是高欲望點擊的。正所謂，欲望 - 摩擦 = 轉(zhuǎn)化，為了提升轉(zhuǎn)化，要么提升客戶的欲望（Desire) ，要么減少摩擦（Friction)， 往往消除摩擦要比提升客戶欲望更簡單。所以讓用戶有欲望進行來時，我們把摩擦盡量減少，則可以帶來更大的轉(zhuǎn)化。

所以我們就提出了一個大膽的假設：如果我們在用戶點擊欲望更強，關(guān)注度更高，瀏覽量更高的頁面，并且和 Kitchen 功能相關(guān)的頁面上增加引導，這個引流的效果可能會更好。因此開始了我們的實驗，首先分析 Ant Design 瀏覽量最高的前 20 的頁面，從中篩選出和 Kitchen 功能相關(guān)的頁面。

（篩選出高頻頁面，以及相關(guān)功能）

在相關(guān)功能頁面下，增加一個叫設計師專屬的模塊。在不同功能的頁面下，加入了不同的引導文案，去吸引設計師點擊。比如 Table 這個組件，我們加入的引導文案是：安裝 Kitchen Sketch 插件 ，兩步就可以自動生成 Ant Design 表格組件。（甚至連在文案前加 emoji 、文案后加或不加 emoji ，我們都嘗試做了實驗 ）

Ant Design 的用戶有一半是設計師，那么當設計師進入到該頁面，并且也想使用 Table 這個組件時，就可以減少用戶的摩擦，增加轉(zhuǎn)化。

1 個月后我們發(fā)現(xiàn)：對比首頁，在功能頁上的引流效果更好，也說明這次試驗是成功的。通過 Ant Design 渠道過來的訪問量，總體提升 2460%。并且這個影響是長久性的。

 （渠道優(yōu)化帶來訪問量提升）

在同一時間，獲得實驗成功后，我們繼續(xù)在不同的渠道嘗試了不同的增長實驗。6 周后，DAU 整體提升 42%，雖然6周的目標沒有達成 100%，但最關(guān)鍵是不斷試驗的過程。

更詳細的案例實踐請查看 ：https://zhuanlan.zhihu.com/p/68707241

案例二：語雀用戶增長實踐

語雀，是螞蟻金服孵化的一款知識協(xié)同產(chǎn)品。在螞蟻、阿里內(nèi)部，大家都是用語雀來管理自己的辦公文檔與個人筆記，是十萬阿里人都在使用的筆記與文檔知識庫。當然，語雀不僅在阿里內(nèi)部使用，對外，語雀也服務外部企業(yè)和個人用戶，所以沒有使用過的同學歡迎大家來試試：

https://link.zhihu.com/?target=https%3A//www.yuque.com/yuque/help

作為文檔管理工具，「寫」是其中的關(guān)鍵環(huán)節(jié)。因此，語雀將「注冊后寫一篇文檔」作為用戶的激活動作，此次增長實踐的目標，就是提升新用戶的激活率。

同樣利用增長大圖先梳理新用戶注冊激活的流程，從數(shù)據(jù)漏斗中我們可以看到，從注冊登錄后，到激活的轉(zhuǎn)化率是非常低的，這是我們的一個機會點。

由此我們也去做了一輪用戶調(diào)研，從調(diào)研結(jié)果來看，許多用戶在注冊后其實不知道「語雀能拿來干啥」「能怎么樣解決我的問題」。具體反映在用戶的操作和困惑上是：一是引導太弱不知道怎么開始寫一篇文檔，二是概念抽象令人費解，三是整個激活流程冗長容易失去耐心。這里邊其實有比較大的提升空間，那我們能不能通過一些實驗去提升轉(zhuǎn)化率呢？

首先分析原有方案的問題

這是我們老的引導方案，用戶注冊完成后，默認會進入到他的個人頁面，語雀默認為用戶創(chuàng)建一個空的默認知識庫。

現(xiàn)在回顧這個頁面，也難怪用戶會說不知道語雀能拿來干什么了。

首先，場景引導弱。每天不同用戶帶著各自的場景和問題，來到語雀，有希望做辦公文檔協(xié)同的，有希望做讀書筆記的，有希望寫專欄博客的。面對這形形色色的需求，語雀只提供了一個空的「默認知識庫」，余下的便留給用戶自行探索，也難怪用戶會感覺無從下手。

此外，像「知識庫」等概念，對于小白來說，其實非常抽象，難以理解。而且在此頁面中還有像「關(guān)注了」「關(guān)注者」等與創(chuàng)作關(guān)系不太大的干擾信息。這些東西，都會阻礙用戶激活，需要優(yōu)化。

針對上述問題，團隊同學經(jīng)過討論，提出假設：我們是否可以通過場景化引導的方式，來提升整個激活率呢？

所謂場景化引導，就是通過語雀產(chǎn)品定位以及用戶實際使用情況，提煉出最典型的場景模板，打包出樣板間。用戶帶著場景與問題來到語雀，語雀帶著相應的解決方案去迎接用戶，如此一來，需求和方案就能很好的匹配上，「語雀能用來干什么」的問題自然迎刃而解。

與此同時，新方案將「知識庫」等很難理解的概念通過場景化包裝，變成「筆記本」「攻略書」等更具像化的東西，用戶不再需要上來就學習這些概念，只需要在使用的過程中慢慢去體會其作用即可。

（第一批場景模板）

以上就是我們最初提煉的六大場景，我們將它放置在新用戶注冊后進入的第一個頁面。此處以學習筆記為例子：新用戶完成注冊后，如果想用語雀做學習筆記，他可以點擊筆記下方的「立即新建」。

此時，會進入學習筆記的創(chuàng)建流程，語雀會默認幫用戶填寫好表單內(nèi)容，并在右側(cè)紫色框框內(nèi)展示一個樣板，通過樣板見，用戶就能大概知道語雀是如何解決他所在場景下的問題。下一步，用戶只需要點擊新建，就能創(chuàng)建出一個適用于做學習筆記的知識庫。

瞧，一個學習筆記知識庫也就新建好了，這里，用戶可以選擇自行「新建文檔」，或者基于我們?yōu)樗M行準備的模板文檔，開始自己的創(chuàng)作。整個引導過程，始終圍繞用戶的目標與場景，并將結(jié)果前置供用戶預覽，讓他更有體感。

最終，我們的增長實驗取得了還不錯的效果。相較于舊版，新版用戶激活率提升了 52%。

既然實驗效果不錯，是否能百尺竿頭更進一步，放大成功影響呢？這里運用了兩個小方法，舉一反三和乘勝追擊：

· 舉一反三：把成功模式運用到產(chǎn)品的其他地方

· 乘勝追擊：針對同一個點進行更多實驗，看能否進一步提升實驗指標

回到剛才的例子，在驗證了場景化引導的有效性后，我們也將模板用在用戶日常的新建流程里，除新手引導外，用戶在自己常規(guī)的新建過程中，也可以通過我們總結(jié)出來的場景模板去新建知識庫或團隊，做到舉一反三。

這一設計有利于向存量老用戶介紹語雀的用法，也方便他們?nèi)ヌ剿髡Z雀更多的可能性，在弄明白「語雀怎么樣解決我的問題」之余，還能知道「原來語雀也能干這個！」

與此同時，我們在原先六大模板的基礎(chǔ)上，借著雙 11 和雙 12 的東風，提煉出了「電商團隊」模板，乘勝追擊。

希望借此轉(zhuǎn)化一部分商家流量，讓商戶也在語雀中管理自己的進銷存等內(nèi)容。

經(jīng)過一輪舉一反三以及乘勝追擊，場景化增長實驗取得了還不錯的效果，除剛剛說的整體激活率提升 52% 以外，自語雀場景化模板上線以來，語雀新建的所有團隊中，有 57% 是通過模板創(chuàng)建的；新建的所有知識庫中，有 21% 是通過模板創(chuàng)建的。可以說，我們的場景化模板還是比較契合用戶實際場景，被用戶接受的。增長實驗取得了不錯的成效。

整個過程，在產(chǎn)品功能上，其實并沒有做多少增量，從前語雀能做的，現(xiàn)在也能做；從前語雀不能做的，現(xiàn)在也不太能做。

通過場景化的方式，讓產(chǎn)品的價值顯性化，通過讓顯性化后的產(chǎn)品價值被用戶發(fā)現(xiàn)，促使用戶增長。

場景化，讓價值被發(fā)現(xiàn)，這是我們在語雀增長實踐中學習到的小小經(jīng)驗，分享給大家。

結(jié)語

最后總結(jié)一下關(guān)鍵點：

1. 利用增長大圖，用定量的用戶行為數(shù)據(jù)漏斗和定性的痛點比重數(shù)據(jù)，去綜合分析，找到機會點，然后從業(yè)務總目標出發(fā)去層層拆解增長目標，確定增長實驗的聚焦領(lǐng)域，現(xiàn)階段先做什么，后做什么？用最小的成本去撬動最大的價值。但增長大圖也只是工具和手段，最關(guān)鍵是與 Key Person 共創(chuàng)聚焦、共同推進，這樣才能做到事半功倍。

2. 增長實踐不是一帆風順、一蹴而就的，最重要的是持之以恒，反復迭代實驗的過程。如果實驗成功則可以通過乘勝追擊和舉一反三的方式，繼續(xù)放大成功影響。如果實驗失敗則要吸取教訓，了解原因，繼續(xù)下一個試驗。

最后想說的是，增長只是一種思維方式，在設計中增長，讓產(chǎn)品核心價值被更多人發(fā)現(xiàn)和使用，通過設計的方式去最終幫助業(yè)務增長，甚至還可以做到對商業(yè)有影響。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

業(yè)界關(guān)于體驗度量的經(jīng)驗

目前關(guān)于“體驗度量”比較成熟的理論模型當屬 Google 的 HEART 模型、ISO 9126 軟件質(zhì)量模型和Davis 的 TAM 技術(shù)接受模型。后人在此基礎(chǔ)上進行了很多實踐，譬如 SAP 的用戶體驗問卷（UEQ）、Oracle 的客戶體驗價值公式（CX）等。公司內(nèi)部各個 BU 也在不斷的嘗試和探索，譬如新零售技術(shù)團隊的 TES 模型，技術(shù)團隊研發(fā)效能的 DEVA 模型，國際 UED 語音設計的 HII 模型，阿里云的 QoUE 模型?？v觀這些模型和實踐，大多是主觀數(shù)據(jù)和客觀數(shù)據(jù)的結(jié)合。

我們團隊也曾提出過 TECH 、PTECH 模型，但由于模型的操作門檻較高、對埋點數(shù)據(jù)有不少要求，難以推廣到各條業(yè)務線。痛定思痛后，我們決定重新回歸業(yè)務，回歸“體驗度量”的初心，去繁從簡，提高通用性。

企業(yè)中后臺產(chǎn)品的特點

企業(yè)級中后臺產(chǎn)品最大的特點是任務性質(zhì)非常明確；用戶使用這類產(chǎn)品通常是為了解決某個確定的問題點，期待用新的解決方式降本增效。

桌面研究也表明：可用性問題是軟件行業(yè)的普遍問題：在英國，一般商用計算機用戶只有30%-40%的有效生產(chǎn)率；軟件缺陷中，48%是可用性問題。

正是基于上述原因，我們嘗試提出了“兩章一分”的標準，分別從設計驗收、可用性測試、易用度分數(shù)等三個維度對產(chǎn)品體驗進行體檢和把關(guān)。

什么是“兩章一分”

設計驗收章

“設計驗收章”主要有 3 個維度：產(chǎn)品還原度、任務流程跑通率、單頁面加載時間。

• 產(chǎn)品還原度：指技術(shù)同學的最終產(chǎn)出與設計稿之間的差異；

匯總?cè)斯ぶ悄芫€、技術(shù)風險線等 5 個產(chǎn)品近 1 年的可用性測試結(jié)果。除功能、性能問題外，高頻體驗問題主要集中在“幫助引導”、“操作反饋”、“任務流程”、“概念術(shù)語”、“功能入口”這 5 個方面。同時，結(jié)合之前項目沉淀的設計經(jīng)驗和設計工具，我們最終將“產(chǎn)品還原度”的子維度定為“信息導航”、“幫助引導”、“操作反饋”、“文案名詞”；每個子維度用 2-3 句描述來進行評分。

• 任務流程跑通率：驗收確認能跑通的主干任務流程數(shù)，在所有主干任務流程數(shù)中的占比；舉個例子，設計稿中枚舉了 10 條主干任務流程，驗收發(fā)現(xiàn)其中 9 條已跑通，那么任務流程跑通率就是 9/10*100%=90%。

• 單頁面加載時間：接入雨燕性能指標數(shù)據(jù)的產(chǎn)品看“首次有效渲染時長 fmp”這個指標；未接入的產(chǎn)品直接主觀判斷，超過 3 秒的視為不合格。

可用性測試章

“可用性測試章”也在驗收階段執(zhí)行，同樣有三個參評維度：最終完成率、人均求助次數(shù)和高阻礙頁面。

我們沒有考慮將可用性測試的常用指標——操作時長作為參評維度，主要原因是企業(yè)中后臺產(chǎn)品類型多、使用場景復雜程度各自不同：用語雀創(chuàng)建企業(yè)空間只需要 5 分鐘；用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘，用 sofa stack 創(chuàng)建并發(fā)布一個應用可能需要 2-3 個小時......難以確定可以作為標準的具體操作時長。

易用度分數(shù)

“易用度分數(shù)”標準為 5.5 分。（關(guān)于“易用度分數(shù)”的更多詳情，請查閱《企業(yè)級中后臺產(chǎn)品體驗度量探索（上）》）。

“兩章一分”的實踐

案例實踐現(xiàn)狀

截至 2020 年 9 月，已有 58 個 產(chǎn)品實踐過“兩章一分”系列方法，基本覆蓋平臺設計團隊支撐的重點項目及 UV 超過 100 的產(chǎn)品。詳細數(shù)據(jù)如下圖：

完整體驗“兩章一分”的 18 個產(chǎn)品，僅可用性測試就幫助發(fā)現(xiàn) 364 個問題，平均每個產(chǎn)品發(fā)現(xiàn) 20 個問題；其中，“九州2.0 發(fā)布部署”發(fā)現(xiàn)問題數(shù)多達 53 個。

實操經(jīng)驗提煉

設計驗收：共創(chuàng)式驗收

企業(yè)中后臺產(chǎn)品生產(chǎn)階段中，由于一般沒有專門的測試同學，因此設計驗收都是由設計師或 PD 單獨執(zhí)行，沒有作為必選環(huán)節(jié)，有時候甚至會因為開發(fā)周期緊張而直接略過；既沒有方法論，又缺乏儀式感。

“兩章一分”的實踐中，我們首次踐行“共創(chuàng)式驗收”，以項目組會議的方式，邀請各個角色共同參與到驗收環(huán)節(jié)中：如果產(chǎn)品沒有什么技術(shù)門檻，那么各個角色分別獨立操作核心流程；如果產(chǎn)品有一定的技術(shù)門檻，則由技術(shù)同學操作核心流程，同時共享屏幕，其他同學從旁觀察。操作完畢后，項目組內(nèi)共同討論發(fā)現(xiàn)的體驗問題，并將問題落地到 Aone 中進行排期管理落地。

可用性測試：引入“技術(shù)支持”+圈定最低測試人數(shù)+ 線上測試降成本

• 引入“技術(shù)支持”

企業(yè)中后臺產(chǎn)品通常有一定的技術(shù)門檻，以 SOFAstack的測試任務為例：

使用 sofaboot 技術(shù)棧，創(chuàng)建 “hello world” 應用，通過“經(jīng)典版”發(fā)布部署模式發(fā)布成功。

測試過程中經(jīng)常會出現(xiàn)一些涉及到底層技術(shù)系統(tǒng)的問題，非設計同學能解決，因此我們建議做企業(yè)中后臺產(chǎn)品的可用性測試時，需要配備至少一名技術(shù)支持同學，以備不時之需。

• 圈定最低測試人數(shù)

Jakob Nielsen 在 2000年提出測試 5 人就能發(fā)現(xiàn) 85%的可用性問題；結(jié)合我們的實際業(yè)務場景：有些產(chǎn)品真實客戶非常難找；前期“共創(chuàng)式驗收”已跑通核心主干流程；因此我們將最低測試人數(shù)限制為 3 人。

• 線上測試降成本

我們開始實操案例時，恰逢疫情期間，于是就引入了線上遠程測試的方式；后續(xù)實踐下來，發(fā)現(xiàn)遠程測試能在觀察、分析階段顯著降低執(zhí)行成本。

通過釘釘或阿里郎發(fā)起視頻會議，邀請參加測試和觀察的同學入會，請測試用戶共享操作屏幕，主持人錄屏捕捉用戶操作軌跡，PD、技術(shù)等項目組成員從旁觀察。測試結(jié)束后，使用語音轉(zhuǎn)文本工具，快速將音頻轉(zhuǎn)成文字。這種模式最大的好處有兩點：

1. 突破了距離和觀察人數(shù)的限制；從實踐來看，現(xiàn)場測試結(jié)合遠程測試的模式，至少能同時對 2-3 人進行測試，執(zhí)行成本減半；

2. 語音轉(zhuǎn)文本后，顯著提升了分析效率。

執(zhí)行階段的多樣化

最開始提出“兩章一分”的時候，我們原本希望這套標準能被作為判斷產(chǎn)品體驗是否好用，能否上線的標準之一；但實際并未推動成功。這里面有很多原因，其中一個非常實際的問題是很多產(chǎn)品需要調(diào)用線上數(shù)據(jù)庫才能跑通核心流程，在測試階段沒法跑通；這就導致在測試階段做可用性測試無法真實還原用戶場景。

此外，設計師或 PD 新接手某款產(chǎn)品時，也希望能通過可用性測試的方式來快速了解產(chǎn)品問題?；貧w到“兩章一分”的初心——幫助產(chǎn)品發(fā)現(xiàn)體驗問題，因此，我們拓展了方法的執(zhí)行階段，不再局限于測試或驗證階段，只要場景適合，都可以用。

典型案例：LinkE 研發(fā)運維中心一期

產(chǎn)品簡介

LinkE 研發(fā)運維中心是云通未來 Serverless 戰(zhàn)場的重要產(chǎn)品；業(yè)務方希望用該產(chǎn)品來整合研發(fā)同學日常高頻使用的研發(fā)、運維、中間件平臺，大幅減少平臺割裂和跳轉(zhuǎn)，提供沉浸式的產(chǎn)品體驗。

目前該產(chǎn)品還處于 0-1 建設的階段。

實踐過程

• 為了確保產(chǎn)品體驗良好，設計師在驗收階段引入“兩章一分”，進行共創(chuàng)驗收和可用性測試；

• 共創(chuàng)驗收階段，邀請 PD、技術(shù) 等 8 名同學一起參與，最終結(jié)果為“通過”；

• 可用性測試階段，設計師根研發(fā)通用場景，招募 6 名研發(fā)同學參與兩個可用性測試任務，分別為

• 任務 1：基于代碼變更完成研發(fā)自測聯(lián)調(diào)；

• 任務 2：基于發(fā)布完成分支的集成、預發(fā)、灰度、生產(chǎn)

結(jié)果用戶在任務 2 遇到高阻礙頁面，導致可用性測試結(jié)果為“不通過”，任務 2 的易用度分為僅 4.4 分，顯著低于 5.5 分的參考標準；最終發(fā)現(xiàn) 30+ 問題點，并推動 PD 思考產(chǎn)品邏輯設置是否合理。

實踐效果

• 經(jīng)過兩次完整實踐，LinkE 設計師已能完全獨立操作執(zhí)行“兩章一分”；

• 業(yè)務方的參與度 & 認知度提升明顯：已開始習慣將“兩章一分”設為項目里程碑，并全員參與進來。

實踐總結(jié)

在實踐過程中，我們發(fā)現(xiàn)企業(yè)中后臺產(chǎn)品的典型場景大致可以分為 4 個場景；不同場景面臨的設計項目有所偏重；不同設計項目在體驗度量方面的切入點也有所不同。譬如：云鳳蝶是一個典型的沉浸式畫布頁面，所有操作幾乎都是通過編輯器屬性面板來調(diào)整，那么如何來評估編輯器的效率呢？通過一系列實踐和思考，我們提出可以通過“高頻屬性查找、配置的步驟數(shù)和時間”、“設置相同組件屬性的耗時變化”等指標進行衡量。以下是我們根據(jù)不同典型場景、設計項目提出的體驗度量切入點。

“兩章一分”的未來

經(jīng)過 S1 長達幾個月的探索：我們制定了“兩章一分”的標準；對 30+ 產(chǎn)品進行了易用度分數(shù)的測試，捕捉分數(shù)基線；提煉實操方法技巧，并賦能給各位設計師；聯(lián)合設計師和業(yè)務方跑通近 20 個案例。不管是問題發(fā)現(xiàn)數(shù)量，還是設計師、業(yè)務方的主觀反饋，都讓我們堅定“兩章一分”在企業(yè)中后臺產(chǎn)品體驗優(yōu)化中是一個相對有效的模式。為此，S2 我們打算繼續(xù)深化。

• 落標準：在關(guān)鍵業(yè)務線將“兩章一分”落地到業(yè)務生產(chǎn)環(huán)節(jié)中，不過“兩章一分”就不能上線；

• 分基線：區(qū)分不同產(chǎn)品類型和迭代大小，制定不同的易用度分數(shù)基線；

• 升方法：針對跨產(chǎn)品、跨域等難以推動的橫向體驗項目，我們考慮升級方法，如將可用性測試升級為“用戶體驗日”，以便更好地推動問題落地；

• 閉案例：針對 S1 已跑通的業(yè)務，我們會在 S2 進行案例閉環(huán)測試，以驗證優(yōu)化效果是否真的能在“兩章一分”上體現(xiàn)出來；

• 始運營：我們會挑選一些案例在公司內(nèi)外發(fā)聲，找相關(guān)業(yè)務領(lǐng)域的團隊進行交流和探討；并從案例中總結(jié)和提煉設計技巧，幫助業(yè)務成長。

總結(jié)

我們團隊當前支持的企業(yè)中后臺產(chǎn)品以 0-1 階段產(chǎn)品為主，PD 通常缺少用戶意識和體驗優(yōu)化手段，這就導致了設計稿還原度較差、產(chǎn)品上手門檻較高。針對這一現(xiàn)狀，我們嘗試性地提出了“兩章一分”這個評價標準，從設計驗收、可用性測試、易用度分數(shù) 3 個維度來評價產(chǎn)品當前的體驗現(xiàn)狀。

通過 S1 50+ 產(chǎn)品的實操，我們一邊不斷完善評價標準和實操經(jīng)驗，一邊總結(jié)體驗度量經(jīng)驗；共幫助 18 個產(chǎn)品發(fā)現(xiàn) 364 個產(chǎn)品，并在 link 、sofa 等重點產(chǎn)品線中落地到業(yè)務生產(chǎn)環(huán)節(jié)中，在業(yè)務方層面收到良好反饋。

在這過程中，我們總結(jié)了適合不同場景、不同設計項目的體驗度量切入點，驗證了這種方式在當前企業(yè)中后臺產(chǎn)品中確實有效。后續(xù)我們將嘗試細化標準，閉環(huán)案例，對內(nèi)對外發(fā)聲等方式，更好地推動體驗思維在企業(yè)中后臺產(chǎn)品生根發(fā)芽；同時，也期待能跟對這塊感興趣的同行朋友們多多交流。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

前言

設計流程

一、理解業(yè)務

理解業(yè)務，主要是理解業(yè)務邏輯、用戶角色、使用場景；

1、業(yè)務流程圖

通過客戶現(xiàn)場訪談、問卷調(diào)查、用戶行為數(shù)據(jù)分析、競品分析、查閱行業(yè)報告等方式，梳理業(yè)務流程的關(guān)鍵節(jié)點，這些節(jié)點也就是我們后續(xù)設計的關(guān)鍵步驟。

2、用戶角色

梳理出業(yè)務流程之后，從業(yè)務流程中可以找到對應的用戶角色。招聘平臺的用戶角色包括招聘專員、招聘經(jīng)理、部門主管、面試官、應聘者、獵頭、企業(yè)員工等，最主要的用戶角色是招聘專員。

通過角色畫像，減少我們在設計過程中的盲目設計和閉門造車，時刻以用戶的視角和感受來設計。

下圖是“招聘專員”的用戶畫像

2、場景分析/用戶故事

場景化設計的定義：根據(jù)特定時間、使用情景、及用戶的特性，進行定制化的設計，使用戶按照產(chǎn)品設定的路線快速完成目標盡可能的給予用戶驚喜與感動。

可以應用“體驗設計畫布”來幫助我們更好的梳理場景。

二、尋找機會

1. 「操作流程」是否高效

   去除冗余：去掉哪一步驟仍能跑通流程；預判操作：下一步驟是否可預判，提前幫用戶完成；自定義操作：高頻操作是否允許用戶自定義從而減少操作步驟；

2.「內(nèi)容反饋」是否合適

符合預期：每一個操作后呈現(xiàn)的頁面或信息內(nèi)容是不是用戶想要的；

一致性：不同界面同一個操作或樣式，操作后是否呈現(xiàn)一致的內(nèi)容？

輕量化：采用更輕量的內(nèi)容呈現(xiàn)方式，是否依然符合場景，減輕操作成本；

3.「信息傳達」是否清晰

邊界清晰：能夠明顯區(qū)分各模塊或信息，遵循格式塔原理；

易獲?。?/strong>主要模塊或信息放置在容器邊界的左上部分，因為用戶閱讀習慣從左到右、從上到下；