XX 能力要在手機上使用，不得不單獨為移動端開發幾個頁面甚至一個產品（反之亦然）；產品數據量很大，Ant Design 默認字體 / 間距太大了，不夠緊湊；版式不夠優化，造成空間浪費；
Ant Design 基于如何在小屏幕中解決信息展示問題這樣的出發點也在很多組件中提供了響應式設計，但擁有更加完備的環境適應性應該是一個設計體系長期的目標之一，因此在全局性地考慮跨端、跨多屏幕尺寸、信息密度等響應式設計方面還值得我們繼續深入研究。
本篇文章橫向調研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業級產品設計體系的響應式設計部分，從設計策略、設計模式、實施模式、設計方案四個層面大致歸納了一些信息，旨在對響應式設計有一個籠統的了解。
關于 Adaptive Design 與 Responsive Design先厘清兩個概念，關于響應式設計通常會有兩個普遍認識，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念，它們的核心區別在于 AWD 針對不同的設備或屏幕尺寸定制化設計多個固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應，本質上它們都在解決產品設計如何適應于不同設備以及不同屏幕規格的問題，本篇所指的「響應式設計」 概念包含了兩者，不做明顯區分，關于 Adaptive 與 Responsive 設計怎么界定以及具體的規則本篇也不進行展開。
提響應式設計不得不提「移動優先」設計策略，移動優先的概念最早是 Google 在 2010 年世界移動大會上提出來的一種產品策略，基于 Google 對未來趨勢中移動設備將會逐漸擁有核心地位的判斷。后來「移動優先」更多被提及是作為一種在響應式設計中應用的設計策略，它認為在響應式設計中優先為屏幕限制更大的移動設備設計，再擴展到大屏幕的 PC 端是一種更有效的設計方法。
例如 Alta、Lightning、Fiori 均在設計體系中明確采用「移動優先」的設計方法，Fiori 尤其指出「移動優先」專注核心功能，專注增強而非降級，提前考慮移動端更多的獨特特性以及異常情況，能提供更好的體驗。Material Design 可能算是移動優先的最佳實踐，它本身就誕生于 Android 平臺，而后再通過大量響應式規則擴展到桌面及 Web 端，使得 Material 在多端都擁有一致貫穿的良好體驗。
（Material Design 的響應式設計）
「移動優先」本質上是基于一種「增強」的設計思想，一個產品如果要同時適應于不同的設備，一直以來有兩種策略：優雅降級 vs. 漸進增強，后者認為先從最小和最受限制的低級設備（移動設備）入手，再為更高級的設備（桌面設備）增強信息和交互，這意味著在更多限制下，迫使設計考慮如何減少、匯總，分組信息，有利于聚焦核心信息以及為更多限制考慮。
然而移動設備已不再是「低級設備」，Fiori 盡管強調「專注增強而非降級」，但它同時提出的「提前考慮移動端更多的獨特特性」卻與漸進增強的設計思想相悖，讓「移動優先」淪為了某種形式化的概念而難以執行。
例如下面這個報告界面的場景里，移動端僅展示匯總的報告圖表信息，但匯總圖表并沒有「擴展」到 Tablet 里而是用明細數據替換圖表，而在桌面端同時包含了明細數據與圖表兩部分信息，這看上去并不像是一個「增強」的設計思路，更像是在全量需求下基于設備限制所采用的「降級」策略。
（Fiori 報告界面的 Adaptive Design）
因此「移動優先」并不一定是形式上優先設計移動端，它被廣泛接受和應用的是背后的漸進增強的核心思想。我認為在移動設備高度發展的當下，「移動優先」不再適合作為單獨概念提出來，而漸進增強的設計思想應該體現在更細分的場景中，例如在布局、信息排版以及交互反饋中，我們應該優先考慮限制更大的移動端；在一些交互方式上，優先考慮限制更大的鼠標操作。甚至在復雜業務場景里，優先滿足核心業務流程順暢也屬于漸進增強的策略范疇。
這里講的設計模式是指設計師在具體業務中針對不同的情況可以采用的通用性設計方案，這些設計模式除了單獨應用外，有時候也可以多種模式結合應用。Fluent 歸納了 6 種對應不同情況的響應式設計模式，非常全面地涵蓋了其它設計體系中的絕大部分方案，分別是：調整大小、重新定位、重新排列、顯示/隱藏、替換、重新構建。
調整大小是最基礎的設計模式，是一個容器默認的響應式模式，通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規格縮放三種形式，即便在無響應式設計的體系里，容器跟隨屏幕尺寸而變化也是一個常見的應用方式。
改變 UI 元素的相對位置，以充分利用不同尺寸的空間。重新定位在響應式應用里多見在框架上，或是在組件里對一些特定元素的處理，例如 Material 的全局浮動按鈕與浮動的下拉菜單以 Reposition 的形式分別在桌面端與移動端處于不同的位置。
（Reposition）
改變 UI 元素的排列方式，這在內容彈性布局里較常見，通常是基于某種排列規則自動向下折行，并結合調整大小與柵格系統應用在響應式布局方面，例如 Carbon 的 Fluid Grid。
（Reflow）
基于屏幕空間、設備不同特性、特定情況等顯示或隱藏 UI 元素，例如大多數設計體系的框架設計應用在小屏幕上會隱藏側邊菜單。Material 在組件響應式行為里提到的 Expand 也屬于 Show / Hide 的延伸。
（Show / Hide）
針對不同尺寸的屏幕采用不同形態的組件，通常應用在對具體的組件做針對性響應式設計中，但需要注意用戶面對變化時的認知成本。
（Replace）
折疊或拆分信息架構，這種模式在 Web 端較難實現，通常出現在一些 Native App 的場景。
（Re-architect）
除了上述 6 種模式以外，我把內容密度也歸納為一種設計模式，Fiori、Material Design、 以及 Atlassian 都提出了內容密度的概念。Fiori 基于移動優先在移動端采用默認密度，而針對大屏幕的 Web 端則提供緊湊密度的方案，他們認為移動端手指交互所需的空間要求更高；Material 則是針對很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現。通過被動響應式或主動控制內容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。
（Material Design 的內容密度示例）
值得一提的是 Atlassian 通過柵格系統的間距來控制密度而非對內容密度本身進行設計，越緊湊的布局柵格間距越小，這看上去很合理，卻很容易造成內容密度增加的同時整體信息獲取效率反而降低的問題。Material 也有關于柵格空間的定義，但在內容密度的處理上和 Atlassian 恰恰相反，它認為高密度內容適用更寬松的柵格空間，相對是一個更合理的設計。在信息密度的問題上，我們的核心目的其實是提升信息效率而非單純提高視覺密度，因此解法上需要更完善的考慮。
（Atlassian 與 Material 的柵格密度對比）
實施模式是指設計體系為實現具體設計方案而定義的一系列基礎規則、解決方案或技術手段，經過整理總結為相對尺寸單位、屏幕斷點、彈性布局、柵格系統 4 個方面。
幾乎所有應用于 Web 的設計體系的技術方案中都采用 rem 相對單位，Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認的 root 尺寸，即 1rem = 16px，Alta 默認采用是 14px 的規格，并允許基于不同應用選擇 12px 或 16px 的規格，默認情況 Alta 采用更小規格的單位會在小屏幕電腦上有更好的表現，這也許和他們的產品特性相關。
相對尺寸單位是非常具有實施價值的，它使產品能在保持信息節奏的情況下根據不同的情況等比例縮放內容，這使得設計能更方便地調整內容密度，或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題，且幾乎沒有前端成本。
國內的前端業界包括我們自己的前端同學更多將 Rem 運用在移動端，主要為了兩個目的：方便計算尺寸、在不同寬度的設備上等比縮放內容，這樣的用法是出于前端工程師解決屏幕兼容性的一種技術手段，在使用上本身也存在一定爭議，而在響應式設計領域我們還沒有發揮出 Rem 應該發揮的作用，甚至很多設計師還并不了解相對尺寸單位的使用方法，廣泛應用 Rem 能為我們帶來哪些實際價值是接下來需要繼續研究的。
屏幕斷點是響應式設計的基礎依據，它決定了我們要適配到什么樣的設備或屏幕規格，并通過 Media Queries 這樣的技術實現不同 Breakpoint 條件下的不同 UI 表現。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設計的，包括考慮了移動設備的橫評豎屏情況，關于詳細的規格設置其實并沒有太大參考價值，設計體系都是根據自身定位以及設備覆蓋的情況來制訂的，例如 Material 的斷點在低分辨率范圍分得非常細，是因為 Material 主要服務的 Android 平臺有著數量繁多的設備分辨率。在滿足自己需求的前提下，屏幕端點不需要太多，無論怎樣基于數據驅動的屏幕斷點設置將會是一個更科學的方法。
（屏幕斷點分布）Fiori 的斷點設計比較有意思，在設計文檔中僅有基本的布局規則，沒有明確的 Breakpoints 規則，Fiori 對于不同的組件會設計不同的 Breakpoints，例如在 Table 這個組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規格，而在 Form 的組件中，Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞，從這點上看出 Fiori 認為不同的組件有不同的表達模式，因此應該針對性對組件進行優化。
（Fiori 的 Table 組件適配情況）
（Fiori 的 Form 組件適配情況）
Flex 布局是 CSS3 提供的強大布局能力，從更自然更具語義化的角度實現界面元素的自適應。應用于 Web 的設計體系基本上都在組件代碼里廣泛采用了 Flex 布局，Lightning 還將柵格與 Flex 布局結合定義了自己更完善的布局方法。在響應式設計中，Flex 布局通常結合 Breakpoints 使用，在兩個 Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺也都有類似的彈性布局能力，例如 Fluent 在 windows 采用 XAML 構建布局系統。
無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力，響應式設計要解決布局的問題將會深度依賴這些基礎技術手段，本篇不進一步展開。
柵格系統是所有設計體系必備的，我們通常將頁面橫向分為 N 列，定義每一列的尺寸與間距，這為界面布局提供了一致性和成本便利。傳統的柵格系統在響應式方面的應用主要是結合 Breakpoints 與一些 Responsive Token 來實現的，通過給 UI 元素指定不同的柵格數來決定他們分別在不同屏幕下占多少列，同時一些設計體系還提供了可見性相關的 token，來控制界面元素在不同屏幕的顯示與隱藏。
Fluent、Fiori、Lightning、Material 以及大多數設計體系都采用了 12 柵格系統，因為 12 的因數夠多，能滿足足夠多的布局細分同時又不至于太復雜，Carbon 的做法更加 geek 一些，他們的「2x grid」采用了 16 柵格系統，布局粒度更細但放棄了 3，6 這樣的因數。 Ant Design 為了滿足復雜的業務情況，采用了 24 柵格系統，24 柵格提供了更高的靈活性的同時，也大大增加了復雜度，面臨柵格系統的響應式設計 24 柵格是否適用還有待商榷。
另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念，核心思想是在較小的屏幕上降低柵格數量，將多余的柵格自動折行彈性布局。
（Carbon 的柵格定義）在屏幕尺寸變化時，柵格主要有兩種響應模式：Fluid、Fixed
（Fluid）
這種將柵格系統與彈性布局相結合的方式基于一些簡單的規則設置，在不需要特定響應式的場景中不再需要指定繁瑣的 token，且能滿足大部分高頻且通用的情況，在一定程度上降低了成本。
除了通用的響應式規則以外，設計體系在具體組件中的響應式方案還有許多值得挖掘，能為我們的組件設計提供參考價值，本篇不再一一展開，僅提兩個典型的應用情況：
（Carbon 的框架設計）
框架算是一個特殊的組件，在不同的設備中界面框架的適用有非常大的差異，幾乎提到響應式的所有設計體系都給出了框架響應式方案，例如 Alta 將界面框架分為四塊，以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。
通常情況下設計體系的框架組成按形式可以分為：
Header – 通常情況下常駐
Sidenav – 分為左側右側兩種情況，一般用于放置導航，在不同設備會有展開，收縮，隱藏三種狀態
Content – 內容區，通常由 Grid 控制布局
Footer – 如有，固定在頁面底部
Float – 浮動框架，用于臨時狀態，通知或彈窗等
設計體系通過對框架的定義，以及控制不同部分基于什么樣的模式響應屏幕尺寸來實施對框架的響應式設計。
Fluent 或 Material 在設計文檔中更多基于基礎的網格，布局，設計模式來闡述通用性的響應式規則，因此他們的響應式設計有非常好的延續性，組件的響應式方案基本上都遵循這些規則。
而 Fiori 以及 Lightning 在通用性響應式設計模式上的定義上沒有那么全面，他們側重于在組件層面對所有組件都考慮了針對性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應式表格的組件里，在桌面端與移動端分別是 table 和 list 的模式，這個方案并不是通過全局抽象規則得出來的，而是基于對組件的針對性設計，正如他們為不同的組件設計了不同的 Breakpoints，這種針對性也適用于特定的 UI 解決方案。
（Fiori 針對 Table 的響應式設計）在一定程度上抽象規則的同時，如果我們能夠為每一個組件都考慮到不同場景的響應式，當然就會提供更精細化的體驗。在一個完備的設計體系里，在設計每一個組件資產時都以漸進增強的設計策略，考慮到不同的設備及屏幕適配是非常有必要的。
響應式設計的世界煙波浩渺，書不盡言，言不盡意。Ant Design 目前計劃從布局基礎規則以及內容密度的解決方案切入，逐步完善響應式設計的體系，這是一個重要且漫長的過程，至于文中挖下的坑還需要深入研究逐一補充，本篇初探先到這里，歡迎大家留言指出問題也很希望大家能留下想法共同探討。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在B端產品設計中，有效的設計規范有利于降低團隊溝通成本，提高開發效率，并在一定程度上保證產品應用的一致性，最終推動產品設計的優化。本篇文章里，作者總結了從0開始搭建B端設計規范的注意事項與策略方法，一起來看一下。
前言
哈哈哈哈，最近事情太多了，已經快三個月沒更新了，現在也忙的差不多了，咱們更新繼續~~
今天給大家分享的是關于如何從零開始搭建 B 端設計規范。
時間轉眼即逝，掐指一算，我接觸 B 端已有 4 年之久了，當年剛接觸的時候，B 端的從業人員比例還是很少的。近兩年 B 端越來越火熱，無論從設計風格還是產品數量上，都有了很大的提升。
隨著 B 端的產品越來越完善，要求設計師的專業性也要越來越強。設計規范作為基礎中的基礎，是大家都要熟練掌握的技能，我們不僅要會運用各種規范，還要會撰寫適合產品的規范。
分享開始，敲黑板~~
在搭建設計系統之前，我們要想清楚設計規范的目標是什么？使用者是誰？
設計規范要符合基本的設計原則，否則你的規范會雜亂無章。這里我總結了 6 條原則供大家參考。
這里一般采用柵格布局。說到柵格，有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復習一遍，如果之前不是很了解柵格的，拿個小本本記下來，要考~~
柵格布局能夠適應各種屏幕尺寸及分辨率，確保整體布局的一致性。
柵格建議使用 1、2、3、4、6 切分布局，可以進行多種布局組合，并在整個設計中保持布局的結構的一致性。
頁面中一般采用 24 列自適應網格，你可以使用它為各種屏幕尺寸創建靈活的布局。
邊距 Margins、列 Columns、間隔 Gutters 分別是什么？
邊距 Margins：邊距是內容與左右邊緣之間的空間。
控制臺內容區的邊距選用 8 的倍數為設定值，一般采用 16/24px 的居多。
需要注意的是：
列 Columns：在電腦端列的數量是個常量（24列），每一列寬度的尺寸隨屏幕大小進行自適應調整。
間隔 Gutters：間隔是列與列之間的空隙，控制臺產品 gutter 使用固定值也要是 8 的倍數，一般采用 16/24px。
需要注意的是：
邊距 Padding：padding 指一個元素的內容和其邊界之間的空間，padding 最小值是 4px，然后其余均為 8px 的倍數，建議值為 8/16/24px。
內容區定寬：此場景常用于用戶歡迎頁、結果頁等需要將內容區寬度設置為固定值的頁面。此時 column 和 gutter 保持不變，根據頁面寬度改變 margin 的值。
色彩內容主要包含基礎色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨的配色體系。
在前期制定顏色規范的時候，精益求精的設定顏色，切忌顏色過多。
顏色的狀態色盡量用原色進行轉換，設置一個合理的變色公式，讓所有顏色的狀態色都根據這個公式進行轉換。例：
在設計規范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強迫癥患者要標的，因為有時候色值完全一樣，但 rgba 數值略有不同，雖然效果一樣，但是對于強迫癥的你來說，舒服嗎）。
狀態色有 4 狀態色：Normal、Hover、Click、Disable。
在設定圖表顏色的時候，要考慮不同的使用樣式（柱狀圖、環形圖、餅圖等……），同時也要考慮它的延展性，比如你設定 12 個 chart 色值，在使用的時候按著順序來使用，當超過 12 個后可以為同一個顏色。
設定統一的字體規范，使用非襯線字體在各個操作系統下都有最佳展示效果。
首先，要設置一個字體家族，保證產品界面的最優展示。
例如（僅作為展示，不是建議）：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）字號
現在主流的產品中，主體字為 12px / 14px 的居多，可根據自身的產品定位以及用戶的習慣進行設定。字號不要出現奇數，否則在一些顯示器上會有對不齊像素的狀況發生。
2）行高
行高常規的有兩種規范：
我喜歡用第一種，就是字號大小 + 8px 作為行高的規范。行高是不可被忽略的重要細節之一，因為在算間距的時候，行高是要被算進去的。
3）字重
字重有很多，但是在真正的產品使用中，字重盡量不要太多種，2~3 種即可。
4）字體顏色
字體顏色數量建議在 3~4 個，不宜過多，但是每個層級之間區分要大一些。
文本應該保持至少 4.5：1 （基于亮度值計算）的對比度以保持文本清晰；最佳對比度為 7：1。
測試對比度的網站：https://contrast-ratio.com
WCAG 2.0 中將顏色對比等級分為 3 種，A級、AA級、AAA級，等級越高意味著顏色的對比度越高，呈現出來的視覺壓力越大。
設定統一的圖標使用規范，讓視覺效果更和諧。
1）icon 大小
icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個尺寸至少相差 4px，否則你會在后期用的時候會有選擇困難癥。
同時功能 icon 盡量貼邊或盡量貼邊繪制，保證展現的視覺統一性（操作 icon 除外）。
單獨 icon 使用的時候，盡量不要太小，最小值建議為 12px。
2）icon 熱區
icon 的熱區經常被設計師和開發所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設置熱區的話，操作體驗極差。
所以一定一定要設置 icon 的熱區，設置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區大小為 28 * 28px。
頁面內布局間、模塊間、模塊內的各部件距離。
尺寸大部分規范中都用的是 8 的倍數，不用糾結，直接用就行。我這里有個公式：Sn = 8px * n，n為正整數。
特殊：最小支持4px。
交互我分為兩個方面：交互方式和交互狀態。
交互方式指的是對某一個操作所進行的具體行為，比如刷新方式有下拉、上滑、按壓點擊等方式，這就是所謂的交互方式。交互方式有很多種，沒有最優，只有最適合。
交互方式要保持產品的統一性，同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認知習慣，可創新但不可違背潛意識。
隨著時代的發展，交互方式也在不斷的更新。比如最開始的手機是按鍵式的，隨著大眾對屏幕大小的需求不斷提升，到了現在的全面屏手機，如果這個時候你再去做當年火爆的按鍵手機，那你就只能跟市場說拜拜。
總結交互方式的幾個關鍵點：創新、統一、緊跟趨勢。
一個完整的產品生態是不會遺漏每一個交互狀態的。
同樣是做售票的軟件，為什么高鐵管家就比 12306 做的好呢？是因為高鐵管家把很多交互狀態友好地做了展現反饋，而不是冰冷的數據吞吐。
同類產品中，每個都有自己獨特的交互狀態，可能你一直用某個軟件的原因只是有個功能的交互狀態打動了你，從此你就深深愛上了它。
現在工作中，我們都在講人效，拼命地去更新迭代，去研發新功能，開拓新產品，往往會忽略交互狀態這個點，因為很多時候付出收獲比是很低的，但是真正好的產品，這部分是不可或缺的。
交互真的太大了，單獨寫一篇文章都寫不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來叨擾。
引導分為 5 種：Newbie guide（新手引導）、Steps guide（步驟引導）、Help / Operation guide（幫助/操作引導）、New function guide（新功能引導）、Blank guide（空白頁引導）。
新手引導是針對新用戶的，首次進入產品的時候，我們要著重地把自己產品的亮點以及操作快速的介紹給新用戶，讓他用最短的時候上手我們的產品。
新手引導要言簡意賅，并且如果非必要的話，盡量給用戶一個可以直接關閉的按鈕，讓用戶有選擇權。我就非常討厭有一些產品的新手引導，必須走完全部流程后才能關閉，惡心得不行。
步驟引導一般用在有固定操作步驟的場景下，指引用戶一步一步地完成想要的結果。常規的步驟引導建議在 3~5 步之間為合理。
幫助/操作引導的展現方式是比較豐富多彩的，可以是提示語、輔助性文本、tooltips 等等，它的作用就是輔助用戶去了解并且知道如何操作這個功能。
這個也是在產品中使用頻率最高的，運用好它，可以讓你的產品事半功倍。
它就是常用在新功能上線后，用戶第一次登陸相關頁面后做的一些引導，目的是為了告訴用戶我們做了新東西，你快來試試吧。
空白頁引導一般用在在缺省頁，對用戶進行一些操作指引，讓無信息的頁面變得更有價值。
比如百度在一些缺省頁上就放了一些關于失蹤兒童的信息，就因為做了這個引導，幫助了千萬個家庭找到了失散的孩子。
組件是設計系統里面最為龐大的東西。組件可以分為了 5 類：
基本上這幾類已經覆蓋了多數的組件，下面我把我自己整理的這幾類分別都包含哪些組件、以及組件的簡單介紹給列出來，快來保存吧。
以上組件可根據自己的產品進行增刪，把組件規范設計完成后，整個設計規范就完成了 90% 以上，可以算一個比較完整的設計規范了。
每一個設計規范都是有靈魂的，規范是為了更好地做設計，而不是限制設計師雙手的枷鎖。
設計規范也不是一成不變的，它在落地使用的時候多少都會有問題，需要慢慢地去反復檢驗規范的合理性，發現不合理的及時更正。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
眾所周知螞蟻集團的B端產品是一個龐大的系統，數量多且功能復雜，而且變動頻繁，常常需要設計師和開發人員能快速做出工作上的配合。同時這類產品中有存在很多類似的頁面以及組件，根據原子設計理論可以得到一些穩定且高復用性的內容。
隨著這兩年B端產品的逐漸白熱化，越來越多的用戶對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻集團體經過大量項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 —— Ant Design。通過組件化設計規范，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
針對B端產品反復出現的一些設計體驗等問題， Ant Design 給出標準的設計原則，實現跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面，既減少了不必要的認知成本，又能夠提升設計的效率?？紤]到需要適應各種定制化的業務場景，設計原則具有一定的靈活性，萬變不離其宗，通過了解設計原則的構建邏輯，高效組織信息、幫助建立用戶與界面的互動等原則性要求，可以衍生出更具場景特性的設計方案。
可以說 Ant design的設計規范攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則，并做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充，我在看書的過程結合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明，這也是為什么國內的企業一直以來都很喜歡使用這套組件的原因。
稍微了解 Ant Design 的小伙伴都知道，本系統是針對B端后臺系統，承載媒介是PC端的瀏覽器。使用的人員主要包括：用戶體驗設計師、交互設計師、UI設計師、前端程序員等。
顧名思義『 設計原則 』主要是針對設計師在創作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統的一部分，但是前文已經提到，此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華，所以設計師可以把這些原則運用到任何的設計領域，并不要局限于企業后臺系統的PC端產品。
為了方便大家理解，講一個小故事。故事來自于《寫給大家看的設計書》，作者有一年圣誕節收到一份禮物——一本關于植物的百科全書。作者翻閱之后，發現其中有一顆叫約書亞樹的樹，造型奇特，自己從未見過。于是決定出門轉轉，然而發現外面到處都是這種樹。故事到這里就完了。
可能大家會想，這個故事要講一個什么道理呢？簡單來說就是，當你手中有個錘子，滿世界都是釘子。當你了解到下面要講的十個設計原則后，你會發現它們處處都適用。
十大原則如下：
親密原則（Proximity）
對齊原則 (Alignment)
對比原則 (Contrast)
重復原則 (Repetition)
直截了當 (Make it Direct)
簡化交互 (Keep it Lightweight)
足不出戶 (Stay on the Page)
提供邀請 (Provide Invitation)
即時反應 (React Immediately)
巧用過渡 (Use Transition)
對于一個初級設計師而言，想要了解UI用戶體驗等知識，學習 Ant Design 的設計原則算是比較快能上道的，因為 Ant Design 是吸取了很多前輩的精華，提煉而成的系統。打個簡單的比喻，對于設計師而言 Ant Design 就是設計師學習『 視覺規范 』，掌握『 設計原則 』最好的字典。
接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設計原則并運用到工作當中。
Ant Design 定義了10條設計原則，根據『 席克定律 』選項太多不易記憶，于是我找到了這些設計原則的共通性，將其歸為4類，也就是大家只需記住四類設計原則，在工作中適當延展即可。
包含 Ant Design 的設計原則有：『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。
「視覺層級清晰」的重要性體現在 交互前 用戶看到的內容結構是清晰明確的 。一個層級混亂的界面，任何信息的傳達都是無效的。所以保證清晰的排版布局是人機交互前的基礎。
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
縱向間距：在 Ant Design 中，通過「小號間距」「中號間距」「大號間距」這三種規格來劃分信息層次結構。這三種規格分別為：8px（小號間距）、16px（中號間距）、24px（大號間距）。
增加元素：通過增加「分割線」來拉開層次。在這三種規格不適用的情況下，可以通過加減「基礎間距」的倍數，或者增加元素來拉開信息層次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是縱向間距，8 是「基礎間距」。
組合排布：為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。（注：柵格是另外一個模塊的內容，這里不贅述。）
復選框內：在一個組件內部，元素的橫向間距也應該有所不同。
正如「格式塔學派」中的連續律（Law of Continuity）所描述的，人類的視覺系統往往傾向于將看到對象的直線繼續成為直線，曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
格式塔學派（德語：Gestalttheorie）：是心理學重要流派之一，興起于 20 世紀初的德國，又稱為完形心理學；主張人腦的運作原理是整體的，「整體不同于其部件的總和」?！浴妇S基百科」
如果頁面的字段或段落較短、較散時，需要確定一個統一的視覺起點。
推薦使用：標題和正文左對齊，使用了一個視覺起點。
不推薦使用：標題和正文使用了兩個視覺起點，不推薦該種對齊方式，除非刻意強調兩者區別。
冒號對齊：冒號對齊（右對齊）能讓內容鎖定在一定范圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。
為了快速對比數值大小，建議所有數值取相同有效位數，并且右對齊。
對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
注：要實現有效的對比，對比就必須強烈，切不可畏畏縮縮。
為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項相對更重要或者更高頻的操作。
注意：突出的方法，不局限于強化重點項，也可以是弱化其他項。
需要區分主次場景：
不需要區分主次的場景：「通過」和「駁回」都使用次按鈕，系統保持中立。在一些需要用戶慎重決策的場景中，系統應該保持中立，不能替用戶或者誘導用戶做出判斷。
總分關系：通過調整排版、字體、大小等方式來突出層次感，區分總分關系，使得頁面更具張力和節奏感。
常見類型有「靜態對比」、「動態對比」。
靜態對比示例：用不同顏色的點，來表明不同狀態。
動態對比：鼠標懸停時，該項和其他項呈現出明顯不同的視覺效果，響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比，以便用戶更好的區分信息。
相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
重復元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關系等。
線框重復：
設計要素重復：
文案格式重復：
包含 Ant Design 的設計原則有：『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。
「交互操作高效」的重要性體現在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題，卻忽略用戶能否理解流程如何操作，那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短，而是用戶的心理時間是否太長的問題，就像我們打游戲往往會覺得時間過的很快，但是在等待頁面加載時卻不耐煩。
能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉都會引起變化盲視（Change Blindness），導致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。
變化盲視（Change Blindness）：指視覺場景中的某些變化并未被觀察者注意到的心理現象。產生這種現象的原因包括場景中的障礙物，眼球運動、地點的變化，或者是缺乏注意力等?！浴毒S基百科》
心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產生時同時會有高度的興奮及充實感。——摘自《維基百科》
氣泡提示：對于操作的反饋是必要的，下文會提到，但是為了減少打斷用戶，輕量級的反饋氣泡提示即可。
輸入覆蓋層：鼠標「點擊」圖標觸發；鼠標「點擊」懸浮層以外的其他區塊后，直接保存輸入結果并退出。不用彈窗或跳轉的形式編輯，只需要在觸發圖標附近彈出浮層即可，這樣避免用戶視動線的混亂，減少打斷用戶操作的心流。
正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。eg：不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。
常規的編輯模式，界面都會跳出一個彈窗或者是一個頁面跳轉，無形之中用戶走了更多的流程路徑，如果能在當前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設計原則。
文字鏈/圖標編輯：
狀態一：在可編輯行附近出現文字鏈/圖標；
狀態二：鼠標點擊「編輯」后，出現「輸入框」、「確定」、「取消」表單元素，同時光標定位在「輸入框」中。
多字段行內編輯：編輯模式在不破壞整體性的前提下，可擴大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進行編輯模式切換時，需要保證每列的不跳動。
拖放圖片/文件：在早前很多產品在上傳功能上，都是跳出彈窗再選擇文件上傳，現在基本都可以實現拖拽上傳了。這樣的設計大大提高了用戶使用上傳功能的效率。
模糊搜索：系統根據用戶所查詢的關鍵詞，智能匹配可能的結果。
定時自動更新：新增的列表項「高亮」，持續幾秒后恢復正常。不需要用戶手動刷新，減少不冗余的操作。
人們在思考的時候，是需要依靠大腦神經元之間相互傳遞信號，而回憶是需要調用更多的的神經元傳遞信號，簡單地說就是非常費腦子。
搜索歷史：搜索歷史的功能，可以減少用戶的回憶，使得整個體驗更加輕松愉悅。
根據費茨法則（Fitts's Law）所描述的，如果用戶鼠標移動距離越少、對象相對目標越大，那么用戶越容易操作。通過運用上下文工具（即：放在內容中的操作工具），使內容和操作融合，從而簡化交互，起到信息降噪的作用。
費茨法則 ：到達目標的時間是到達目標的距離與目標大小的函數，具體：。其中：1.設備當前位置和目標位置的距離（D）；2.目標的大小（W）。距離越長，所用時間越長；目標越大，所用時間越短。
列表嵌入層：將列表為多層級時，隱藏弱層級列表內容，可以讓用戶更加直觀地看到重要信息。當我在聚焦某一個列表模塊的內容，鼠標懸浮即可展開。
標簽頁：標簽也換可以將信息內容進行分類，讓用戶更易理解。
漸進式展現：用戶在填寫表單時，會根據當前錄入的數據，展現下一項需要填寫的內容，這樣的展現方式可以屏蔽掉無關緊要的內容。
懸停即現工具：鼠標懸停時，出現操作項。這樣將不重要信息或者操作隱藏起來，不會干擾到用戶瀏覽其他重要內容。
包含 Ant Design 的設計原則有：『 簡化交互 』『 巧用過渡 』『 即時反應 』。
「系統反饋及時」的重要性體現在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進行了操作或者內部數據發生了變化，系統就應該立即有一個對應的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。
雖然反饋太多（準確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統，則讓人感覺遲鈍和笨拙，用戶體驗更差。
牛頓第三定律 ：當兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反?！浴毒S基百科》
實時預覽：根據用戶的輸入，提供關于密碼強度和有效性的實時反饋提示。
文字鏈熱區：當懸浮在 ID 所在的文字鏈單元格時，鼠標「指針」隨即變為「手型」，單擊即可跳轉。
人腦灰質（Gray Matter）會對動態的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當的加入一些過渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。
Adding: 新加入的信息元素應被告知如何使用，從頁面轉變的信息元素需被重新識別。
Receding: 與當前頁無關的信息元素應采用適當方式移除。
Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。
表格加載：網絡不好或者表格數據過多，都有可能導致加載緩慢，這時有一個小動畫可以緩解用戶的焦慮感。
富列表加載：用戶在打開列表時，頁面無法做到一次性加載所有的數據，同時有為了減少翻頁的繁瑣操作，就有了下拉自動加載的。
頁面加載：當用戶訪問的頁面體量過大時，系統會通過給出倒計時或完成百分比，來緩解用戶焦慮，并且給用戶友好可控的感覺。
滑入與滑出：可以有效構建虛擬空間。
折疊窗口：在視圖切換時，有助于保持上下文，同時也能拓展虛擬空間。
對象增加：在列表/表格中，新增了一個對象。
對象刪除：在列表/表格中，刪除了一個對象。
對象更改：在列表/表格中，更改了一個對象。
狀態一：用戶更改了「詳情」中的值；
狀態二：用戶點擊「保存」后，詳情所在的網格出現「黃底」，表明該對象發生了更改；
狀態三：底色持續幾秒后，恢復正常。
對象呼出：點擊頁面中元素，呼出一個新對象。
用戶常常會疑惑自己的操作是否成功了，哪怕是失敗了也是需要系統反饋，這樣才能安心進行下一步的操作。
頁面反饋結果：
氣泡反饋結果：
包含 Ant Design 的設計原則有：『 提供邀請 』『 足不出戶 』『 即時反應 』。
「用戶自由可控」的重要性體現在 交互前對下一步操作的預判；交互時 不論操作后的結果多嚴重都要允許用戶自主決策；以及交互后 能否對自己的操作結果反悔。
很多富交互模式（eg：「拖放」、「行內編輯」、「上下文工具」）都有一個共同問題，就是缺少易發現性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示，以表明在下一個界面可以做什么。 這樣人機交互的過程往往更加自然、順暢。
點擊刷新：對于設計師而言，最常見的例子要屬花瓣了，我們時長會沉浸在我們瀏覽的瀑布流卡片中，如果系統強行刷新當前頁面，用戶很有可能迷失。邀請用戶主動更新，既不會錯過新的消息，又不會導致我們的心流被打斷。
未完成邀請：用戶在當前頁面無法完成登錄操作，為了減少用戶迷茫的焦慮感，系統告知用戶點擊“更改”鏈接，可以去向何處。
懸停邀請：鼠標「懸?！箷r，出現「選擇此模板」的按鈕。
雖然系統中缺少不了一些危險操作或者不可逆操作(eg：刪除、重置、重裝系統等)，但是仍然要用戶自主決定是否繼續，我們能做的就是讓用戶再三確認。
彈窗提示：雖然彈窗打斷用戶心流，但是對于重要的操作，這樣是最保險的方式。
刪除知識庫提示：是釘釘中，刪除「知識庫」這一重要內容，是不可逆的，系統需要用戶謹慎操作。
如果說「自主決策」中提到的案例都是不可逆的，那「準許反悔」的后果嚴重性會弱一些，系統對用戶的操作沒有那么強的阻斷性，所以要準許用戶反悔的，
刪除撤銷：用戶點擊「刪除」后，直接操作；出現 Message 告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者 1 分鐘內不進行任何操作， Message 消失，用戶無法再「撤銷」。
Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業務產品能否成功，但是能幫助業務產品『正確的成功』或者『正確的失敗』?！?
如果團隊有一個產品idea，我們需要通過最少的資源開發此產品并投入到市場中，通過聽取用戶反饋，驗證idea是否可行，快速迭代最終做出更完善的產品。但理想是美好的，但現實是骨感的，在前期研發的過程中通常會出現兩個情況。創業團隊沒有足夠的設計資源和時間，前幾個版本的產品通常用戶體驗非常差，這種情況體驗差有可能讓用戶放棄這款產品。創業團隊沒有好的方法論和協作模式，需要磨合，設計和開發進度一延再延，結果錯過了風口，市場被競品搶占，還沒上線就倒閉了。
Ant Design提供了一套完整的界面實現方案，即有代碼框架能直接拿來提高開發效率，每個界面組件都經過螞蟻金服多個項目的考驗，具備優秀的用戶體驗。用Ant Design來做0-1，能快速發布用戶體驗優秀的產品，聽取用戶反饋，快速迭代。
當然，創業是九死一生，市場和用戶口味都充滿了不確定性，誰也沒有能力保證產品是否成功，但是只要你能高效的產出質量優秀的產品，不斷試錯，說不定以后就能成功。
用 Ant Design 就能高效的產出高質量的產品，減少設計和開發的不確定性。
因為我們公司就使用了 Ant Design 的系統，所以時常會與前端小伙伴溝通，以下都是他們在使用過程的感想。
Ant Design 提供的大量功能比較全面且UI風格統一的組件，能幫助開發者快速搭建通用場景下的應用界面。這大概是得益于螞蟻金服業務線上極為廣泛的應用場景，驅動了 Ant Design 團隊通過對使用情況的觀察匯總，整理出來了這么一個組件庫。他們的經驗積累如此之豐富，足以讓這個庫支持大部分其他前端開發者的需要。
其設計團隊給出的設計規范相當詳細且經得起推敲，令許多其他團隊獲益匪淺。
我見過太多宣稱自己在乎用戶體驗的公司，給用戶的產品質量確實比較高，但是自己員工內部使用的系統和管理一團糟。種種不便讓員工經常加班，情緒消極，這樣的團隊抄抄競品達到行業標準體驗還行。要想突破是不可能了，因為創新需要員工有充沛的精力和主動性，天天加班誰還有這精神。
用 Ant Design 系統提供的設計工具和組件框架能給設計師和開發者減少負擔，能用更少的時間呈現給用戶體驗好的產品。這樣帶來的好處不僅僅是設計師和開發者覺得少加班成就感高而幸福，他們重新恢復活力和激情能做出更有創意和競爭力的產品，給公司帶來更大的收益，這是一個三贏的結局。
一定有小伙伴會有這樣的疑問，目前市面上有這么多的第三方設計規范，例如 Ant Design ，Element UI，有必要自己造輪子做一遍嗎？
這里要視情況而定，如果公司產品是初創期，而且研發人手不足，那確實沒有必要自己造輪子。反之在資源足夠的情況下，是有必要設計團隊重新做一套屬于自己產品的規范組件庫的，因為B端自身的業務性決定了市場上沒有萬能的設計規范，那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范，在此基礎上進行修改，效率很低，適配的復雜度和重新開發相差無幾。
對于比較普通的設計解決方案是可以的，但是 Ant Design 包含的組件細節仍有不足，畢竟 Ant Design 沒必要投入過多的精力在組件細節深入度上，規范定義的越是精細，對于產品組件而言可延展性就越差，限制也會越多。而 Ant Design 只需要解決80%企業，80%的通用問題即可。
當市場大部分產品都在使用 Ant Design 設計系統時，產品的同質化就會很嚴重。為了避免這種情況發生，我們就有必要從設計語言、設計原則、設計組件三個部分開始，設計自己的規范。那些大廠的成熟的組件庫該如何用呢？我認為應該把它當成一個字典，有不會的地方，可以去參考人家的成熟的解決方案。
這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設計原則是什么以及 Ant Design 的優缺點。當然也重點總結了一下，設計師如何運用 Ant Design 的設計原則，可以將這些原則分為四類：視覺層級清晰、交互操作高效、系統反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設計原則，并將其靈活運用到設計工作中。
參考文獻：
《Ant Design 官網》
《設計心理學 1 》 [美] 唐納德·A·諾曼
《寫給大家看的設計書》 美國羅賓·威廉姆斯(RobinWilliams)
《web界面設計》 Bill Scott Theresa Neil
《維基百科》
《如何評價 Ant Design 這個項目（一個設計語言）？》 龍爪槐守望者
文章來源：站酷 作者：菜菜不甜
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
面對企業級產品，由于系統復雜度和業務領域的專業壁壘，用戶、產品、業務、技術的理解和分析難度都遠遠高于C 端。特別是進入業務深水區，技術術語層出不窮，角色鏈路錯綜交織，場景越來越復雜，在理解和分析業務上設計師需要耗費的精力越來越多，設計師如何高效且深入的分析業務，直接影響到設計解決問題的深入度?；谖浵伣鸱﨏TO 線的業務土壤，我們不斷嘗試打磨，探索出以JCD 為核心的企業級產品設計思維，助力設計師在深耕業務上有章可循，有方法可用。
做企業級產品 3 年多，剛從 C 端業務轉過來時，最大感受是對業務理解起來很艱難。隨著經驗的增加，對 0 到 1 產品駕馭起來輕車熟路，可到業務深水區，還是感覺痛苦。技術術語層出不窮，用戶角色多，一個用戶身兼數個角色，系統之間的關聯關系也很復雜，隨著業務的深入設計師會感覺對產品逐漸失去掌控力。一個簡單的芝麻信用分，需要 20-30 個中后臺產品和各種角色一起協同支撐。然而復雜是守恒的，系統復雜性的總量是一個衡量，當前臺的呈現更簡單時，隱藏在幕后的復雜性就增加了。
我們面臨系統的復雜性表現在三個方面：
多角色，重協同。
鏈路長、錯綜交雜。
技術術語多，業務難理解。
但企業級產品會有一個主線，是從「事情」的角度出發，關注一件又一件事情被完成。企業場景下我們再把事情描述的具體一些，就是一個又一個的 Job 。設計師要做的就是通過設計，包括參與的角色、使用的工具以及協作方式等，讓 Job 被高效完成。
我們先對比一下，從「用戶」視角和從「Job」視角出發，關注的維度有哪些差異呢？從用戶視角出發我們需要關注用戶的個人痛點、情緒、興趣、人種志（年齡、性別、收入）等信息，會更關注人，核心是為了滿足用戶的需求。在Job 視角下，需要關注 Job 的目的、參與角色、協作方式、工具等信息，而且 Job 對角色是有要求的，比如航空公司飛行員，按崗位要求，他需要不斷提升自己業務能力，每年要去復訓兩次，學習新的技能和知識來滿足崗位對飛行員這個角色的要求。
基于我們的業務土壤，以及出發視角，我們探索出一套適合企業級產品的設計思維，JCD（Job - Centered Design ）以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協作關系等。以 Job 被高效完成為決策依據的設計思維。它是一套適用于企業級產品設計的發現問題、解決問題的方法論。
在 JCD 設計思維下，將設計流程分為四個階段，發現、構思、呈現、度量。每個階段下有不同的方法、產出、資產。Ant Design 在「呈現」階段幫設計師大大提升了效能，設計師才有更多的精力投入到「發現」階段去更深入去理解業務和角色。接下來重點分享一下在發現階段的兩個方法，角色分析和業務分析。
常用的 C 端的用戶畫像，如下圖，會關注用戶人口統計學的信息，如名字、性別、年齡、所在地、家庭情況、用戶的習慣、愛好等信息，這些信息在復雜的企業級產品中是不需要去關注的。
在JCD 的視角下，我們企業級產品的角色畫像應該關注的三個維度：角色概覽、工作能力、工作內容。而工作內容是最核心需要關注的信息，包括了工作的描述、工作的痛點、需求和使用的工具。
一個角色往往需要完成多個Job，描述一個Job 包含：
四要素：情景、角色、活動、目標。
一個句式：在什么情景下，角色需要完成什么樣的活動，來達成一個目的。
舉個例子，在飛行前 1.5 小時（情景），角色（飛行員）需要去查看飛機情況（活動 A ）、氣象情況（活動 B ），來判斷能否起飛（目標）。
為了給設計提供具體的依據，我們需要進一步縱向解構Job，來構建 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 的縱向拆解，我們還需要關注每個 Job 場景下的需求、痛點、費力度、成就感。
做好一件復雜的事情，往往需要多個角色在多個工作場景中協同配合。我們會以Job 場景為核心，梳理角色之間的協作關系，建立全局視角。比如，在飛機起飛前，機組飛行員查看飛機和飛行信息、查看起降地天氣等；同時乘務組空姐們為此次飛行做相應準備工作。準備完畢，機長會通知機組和乘務組開始登機。上飛機后機組需要檢查駕駛艙情況，乘務組檢查客艙情況，檢查完畢，會一起協同機場地勤人員安排乘客登機。完成登機后，飛行員需要聯系機場管制申請起飛........ 設計師可以通過Job 場景去串聯角色之間的協作關系，如下圖。
以上是「角色分析」的方法，是從 Job 出發洞察角色的工作需求以及協作模式，幫助設計師構建角色協同的全局觀。
業務分析的方法是借鑒面向實體的思路幫助設計師去深入分析復雜業務。企業級產品中會有各種技術術語、復雜的數據流轉、業務邏輯等，我們需要一個系統的方法來分析和理解業務，為設計提供準確有深度的信息輸入。我們的用戶大部分是軟件工程師，這個思路可以讓設計師在理解和認知上對齊用戶的心理模型。我們業務分析的有三個維度：
產品定義
實體建模
業務邏輯
通過以上三個維度，從縱向和橫向去深入和全面的理解業務。
通過溝通交流、桌面研究的方法，去了解產品和用戶相關信息，熟悉相關概念和技術背景、沉淀信息資料，來收集產品的信息，具體的產出有名詞庫、產品畫布、產品的關系圖、業務結構圖、產品形態圖等，這里不展開詳述。
實體建模是本次分享的重點，實體建模按照面向實體的思想分析業務，圍繞實體進行問題和內容抽象和分析，聚焦于產品內實體和實體間的關系，以及實體的生命周期的分析。
我們先看什么是實體，參考領域建模（此處感謝幻星給實體的定義）給實體一個定義：實體是產品中客觀存在，具有唯一標識的并可以相互區分的業務載體，通常包含屬性和行為。
企業級產品系統的實體，很多情況下都是熟悉的字母，陌生的單詞，在設計之前設計師如何去準確、系統的去分析實體。
舉個例子，現實世界中，「機票」是一個實體，在產品里，可以把「機票訂單」看成一個實體。圍繞著機票訂單，我們梳理出它的基本屬性信息，以及它具有的所有狀態和對應操作，設計師可以進一步把這些狀態和操作梳理出一個「機票訂單」這個實體從產生到消失整個生命周期經歷的過程。這些分析可以作為后續任務流程和設計細節的信息輸入。
一個實體不能構成一個產品，一個系統會有很多實體存在，我們需要進一步去梳理「機票訂單」與系統中其他實體的聯系。在下圖的案例中，機票訂單與機票是聚合 n：1 關系, 一張機票訂單會包含多張機票，機票訂單與收支明細是關聯 1：n 的關系，一張機票訂單會關聯到多個收支明細，比如會有支付成功、退款等明細。
以上是實體建模的過程，產品定義和實體建模都是對業務內容層進行理解和梳理。但是我們的業務除了內容外，還有很多復雜的業務規則、業務流程，我們也需要進行梳理和分析，這樣設計師才能對業務有全面的理解。
所以我們需要把結合實體、業務規則、業務流程，進一步梳理業務邏輯。最終會得到一張業務邏輯圖，不僅能夠幫助設計師洞察到業務的本質，也能幫設計理解業務的全貌。
第二個方法業務分析，是通過面向對象分析思路去深入的理解業務，為設計提供更精準，更有邏輯的依據。
回顧以上三部分內容，JCD 是什么？Job - Centered Design 是以 Job 為中心的設計思維。JCD 的定義：以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協作關系等。以 Job 被高效完成為決策依據的設計思維。它包含了原則、流程、方法&工具、產出&資產，上面重點分享了其中兩個方法「角色分析」和「業務分析」。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
真正出色的金融產品是基于可用性，在成熟的數字生態系統中，能持續滿足用戶的特定需求。在UXDA每年交付的數十個UX/UI設計中，我特別選出了一些重要的作品來舉例，與大家探討設計對塑造金融產品方面的影響。
過去20年來，人們認為在創建數字金融產品時設計發揮的作用微不足道，這種刻板印象根深蒂固。大多數情況下，甚至被認為是出于營銷目的的包裝，關注點也多在產品功能和特性上。
使用標準化設計模板來加速產品開發是常見的做法，但這也解釋了為什么許多金融服務看起來如此相似——平淡、乏味且對用戶不友好的。
10年前出現的金融科技，打破了人們對設計的偏見，企業用其來吸引客戶，并試著將設計潛力發揮到最大。而現在，進入金融行業的新玩家更專注于獨特創新的設計，來凸顯品牌身份。
大多數客戶厭倦了乏味又復雜的模板設計，量身定制作為一種全新的趨勢應運而生，不僅為產品注入了新鮮活力，還令金融公司的市場飆升。
「Private Wealth Systems」的財富管理平臺就是一個很好的例子，通過量身定制的設計，為超高凈值人士 (UHNWI) 提供他們對精致生活所期望的奢華體驗。
該平臺的優勢在于它旨在解決用戶每天遇到的痛點，關心客戶財富的同時并盡最大努力協助其管理，而量身定制也增強了品牌與客戶之間的情感聯系。敢于打破禁忌并投資于大膽現代設計的金融機構知道，隨著客戶忠誠度和參與度的提高，肯定也會帶來回報。
Takeaway
根據品牌VI創建的產品界面，可以使其在日后的競爭中脫穎而出。
向移動模式轉型時，集中出現了幾家金融科技公司，他們的優勢在于功能單一，非常簡單易懂。對客戶來說，這就像一股新鮮空氣，因為當時的銀行服務功能既復雜多又對用戶不友好。
當今的金融產品，正在不斷擴大外部服務，打破功能壁壘?！窻evolut」就是一個很好的例子，它不斷擴展功能，逐漸成為一個超級應用程序。
單一模式的設定確實很簡單，但隨著用戶期望的增長，以同樣方式呈現更多功能的需求也在逐步增加。對用戶來說，如何用一種既直觀又體驗佳的方式，展示100多個功能呢？
既要為客戶提供解決功能，又不能在使用體驗上打折扣，這并不簡單。需要UX架構師和經驗豐富的UI設計師密切合作，共同面對挑戰——創建直觀的產品架構與合乎邏輯的、用戶友好的界面布局。
來看一個UXDA的多功能銀行應用程序例子：我們將區塊鏈、游戲化、機器人咨詢、語音處理、生物識別、大數據等數十個功能整合進同一程序內，打造銀行即平臺的應用理念。
越來越多的功能服務不斷涌現，可用性高的產品更容易吸引用戶。這就解釋了為什么金融機構都在努力創建自己的新銀行或超級應用程序，但展示的服務內容也需要與公司的發展方向保持一致。
根據我們的經驗，品牌希望在產品中包含大量「現代」功能，他們相信這會使解決方案在競爭中脫穎而出。但也可能會適得其反，建議在UX研究階段做好取舍，以便確定更符合品牌受眾的功能。非常成功的金融產品都是基于品牌受眾的特定需求設計的，這些需求為客戶提供額外的價值。
Takeaway
從超級應用程序設計中學習實踐經驗，保持簡單性和可用性的同時，再進行產品拓展。
相信多數人看到銀行后臺，都會驚訝于它的復雜。員工必須同時使用多個軟件程序，按照說明輸入代碼才能進行工作。操作系統也需要數月時間去學習，甚至用了很多年，還是無法全部記住。
由于涉及到大量的客戶信息，這些解決方案全靠數據驅動，非常復雜。許多銀行都在努力降低后臺成本，卻沒有意識到對客戶體驗的影響。這導致了一個悖論：銀行在數字化轉型中投入大量資金以改善用戶體驗，而削減銀行核心系統的成本又對客戶服務造成損害，銀行員工的負面體驗又會影響服務質量和最終客戶滿意度。
后臺系統的改進可以顯著提高服務質量和速度，從而使客戶更滿意。以用戶為中心的設計方法，在當今創建金融產品中也越來越流行，它不僅可以應用于外部銀行產品，還可以應用于內部解決方案。
提高內部工作效率的一種方法是使用游戲化設計。這種方法使整個工作流程更加現代化，從而實現了工作流程的轉變，如「ITTI Digital」所示。
為了使其以用戶為中心，我們將大量繁重的數據翻譯成人類語言。員工的學習曲線從幾個月縮短至幾個小時，人為失誤的可能性顯著降低，服務速度、員工效率和客戶滿意度都大幅提升。
此方案在IF的數字金融服務設計大獎中也得到了認可
金融機構將員工視為內部用戶，為他們創造盡可能好的體驗，相當于也為銀行客戶提供了最好的服務。認為游戲化和銀行業務沒有共同之處的想法太過時了，游戲化不僅提高了員工的生產力和積極性，也讓結果變得更好。
Takeaway
嘗試應用游戲化來激勵用戶，還能使最無聊的金融產品煥然一新。
5年前，移動應用程序還被當做非主流的使用渠道，但今天它卻滿足了大多數客戶的要求。令人驚訝的是，移動程序的功能非常有限，用戶體驗也相當差，甚至一些銀行服務只在分行提供。疫情反應了嚴峻的現實——金融業還沒有做好迎接數字時代的準備。
為改善金融品牌的客戶體驗，需要對移動應用程序進行全面的設計審核，以確保遠程用戶可以訪問所有服務和功能。一家成熟的金融科技公司應快速找出適合客戶的遠程體驗設計方法，而不是冠冕堂皇的借口。
設計「阿拉伯聯合銀行 (UAB)」移動應用程序時，我們的主要挑戰是簡化所有的日常功能操作步驟，使其簡單高效。
流程的優化使用戶更容易瀏覽應用程序，探索新的可能，同時也鼓勵用戶與程序互動，而不是聯系銀行或直接去分行。新應用僅發布數月，在App Store 和Google Play的下載率都大幅提升。
Takeaway
找到缺失的功能并完善它，建立一個完整的使用流程。
越來越多的老牌銀行企業敢于走出舒適圈，挑戰自我，踏上數字化轉型之路。在金融科技的啟發下，現有企業為用戶體驗設計注入了生命力，從而創造出令客戶驚嘆的產品，激勵用戶長期使用。
他們與內部或是外部的UX/UI設計師合作，整合公司各層級的設計方法和組織文化。這種融入了設計角色的團隊，以用戶為中心快速轉型，成為金融科技獨角獸的有力競爭對手。
「VTB銀行」是一家被數百萬人信賴的銀行，升級用戶體驗后，產品重獲新生，也體現了企業對線上銀行用戶的重視。
「VTB銀行」的用戶反饋說：新升級的產品更貼合他們的生活方式了；銀行員工們也表示，緊跟時代變化的品牌，更能為客戶提供最優的服務。
Takeaway
設計至上，跳出傳統，才能打造出一流的數字產品。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：UX辭典
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
增長設計是時下的熱門話題，越來越多的企業開始關注增長設計，成立獨立的增長部門。在螞蟻體驗技術部，我們除了做好體驗設計的「老本行」外，也在往增長的方向探索。在現有的增長理論指導下，我們結合自身業務，邊落地實踐，邊沉淀總結。以下是我們的一些小心得。
本文會講述我們是如何利用增長大圖梳理產品各個環節，以及如何用定量的用戶行為數據漏斗，和定性的痛點比重數據，綜合分析，去找到機會點。輔以在 Kitchen 和 語雀 中的增長實踐案例說明。在增長一塊，我們還處于初步探索階段，若有不成熟的地方，歡迎大家一起討論。
為什么要關注增長？
說到增長，過去 10 幾年是中國互聯網高速增長的階段，但近 2-3 年來，隨著人口、流量、資本的紅利衰退，越來越多企業開始關注增長。典型的是，2017 年可口可樂宣布取消 CMO（首席營銷官），由 CGO（首席增長官）替代，之后各種增長類職位相繼涌出。
增長是建立在用戶基礎上的，用戶產生需求，需求又衍生出產品，產品之上才可能有增長。所以我們理解：產品在創造價值，而增長其實是傳遞價值，讓價值被發現。只有讓更多的用戶，最大限度地體驗產品的核心價值，才可能迅速擴張以及有效地變現。它有幾個特點：
1.首先他是關注用戶全生命周期，不僅僅是獲客、變現。還需要關注怎么激活用戶，讓用戶用起來，留存下來，傳播出去
2.另外，增長不是一個單打獨斗的獨行俠，而是體系化的，以團隊共創聚焦的方式來推動增長
3.強調數據和實驗：從數據分析中洞察，提出假設，循環實驗的過程
那什么樣的產品適合做增長？我們所做的 To B 產品適不適合做增長？
首先看下 To B 和 To C 的差異：To B 產品，多數是群體決策，決策鏈路復雜，買的人不一定是用的人，如果是客單價較高的話，基本靠銷售關系驅動購買，但像具有 C 類屬性的產品，因為是個人消費場景，單一決策購買，就像平時大家在淘寶買東西一樣，隨心所欲。那運用增長策略去推動轉化，能節約很大的獲客成本，可見增長更適用于 C類屬性的產品。
但經過大半年的實踐，并且和其他增長團隊交流，我們發現雖然 To B 增長很難，但在 SMB（中小企業）的增長很有機會。SMB 中小企業，有可能是 2-3 人組成的小團隊，這類企業的客戶和用戶通常是同一類人，我們理解這也具有 To C 屬性。并且中小企業數量多，實驗數據也有保障。
一句話總結：To SMB 中小企業客群的產品可以做增長。
那具體怎么做呢？結合我們自身經驗，給大家分享 1 張增長大圖，2 個實踐案例。
增長大圖是基于 AARRR 模型，在用戶旅程圖的基礎上進化得來。為什么不用用戶旅程圖，而用增長大圖呢？用戶旅程圖主要通過情緒曲線來體現問題的嚴重性，但在使用上也存在難以量化的問題。
所以在增長大圖上，我們選擇定量的用戶行為數據漏斗來取代情緒值。漏斗其實是對一個流程和路徑的分析，目的是定位出問題的關鍵所在，這樣才能對癥下藥。但定量數據通常只會告訴我們是什么，而定性數據能告訴我們為什么？
所以，我們還建議梳理用戶調研中的定性數據，按流程、階段、產品模塊、問題類型等維度歸類，通過痛點比重公式，算出每個維度痛點比重的百分比，去綜合分析，找到機會點。另外，增長大圖還可以記錄從業務總目標拆解增長目標的過程，以及實驗的策略、方案、指標結果，所以增長大圖也是一份連接戰略和執行，不斷更新的「活文檔」。
公式：痛點比重= [每個階段的問題數 / 問題總數 ] X100%
那怎么用呢？當你確定某個項目可以做增長時，最關鍵是邀請不同角色的 Key Person，包括 PD、技術、運營共創去搭建增長大圖。
從業務總目標出發拆解增長目標，然后將定量和定性數據梳理到大圖上，找出機會點，從而確定聚焦領域，開始增長實驗。想想就像大家在吃自助餐的過程，基本都是先看一遍有什么，再篩選一下，小份量的取餐嘗試，最后再確定幾樣好吃的，重點吃。
小份量的取餐嘗試，就等于增長實驗的過程。分為 4 個步驟：
從定量和定性數據中分析洞察——不斷的提出假設——然后排定優先級，進行實驗——驗證應用的過程。
（增長實驗流程）
接下來，分享兩個我們在增長中做的小 Case。
Kitchen 是一款為設計者提升工作效率的 Sketch 工具集。先利用增長大圖看下 Kitchen 的現狀，我們撈取用戶從訪問——下載——安裝——使用的數據漏斗，可以看出整體漏斗還是很不錯的，整體留存率達到 40%。
然后我老板就說：「可以去做拉新增長，給你一塊錢成本，去撬動一個地球吧。」其實，我當時就想給他一個白眼，現在一塊錢能做什么？但反過來想想，這確實是增長很重要的一點：怎么用最小的成本去撬動最大的價值，找到最大的發力點。
基于當時的 DAU 數據現狀，并初步討論后，我們敲定 6 周 DAU 增長翻倍的目標。圍繞這個目標，再進一步拆解為新增和留存，前面有提到留存率不錯，所以我們這 6 周的增長聚焦在拉新上。那么拉新最重要是找到低成本的渠道運營。然后，我們腦爆了一些平時設計師會去的和我們可以切入的網站，雖然篩選了一些，但還是有很多，我們不可能全部去鋪。在人有限、錢有限、時間有限的情況下，再回歸我們的目標，需要找到最合適和低成本的渠道去運營。
（利用增長大圖分析 Kitchen 訪問到使用的流程）
所以基于 ICE 評分體系以及結合業務，我們做了局部調整，最終以渠道的「影響力」、「轉化率」和「可行性」3 個維度進行打分，確定前 4 個打星標的渠道去做實驗，這里主要分享下在 Ant Design 渠道上做的小實驗。
（所以基于 ICE 評分體系以及結合業務，選定渠道）
在增長之前，我們已經在 Ant Design 首頁投下過廣告，通過數據發現轉化率不足 0.2% ，后來我們分析 Ant Design 各個頁面上的數據，從中發現一個有趣的現象，從招聘貼過來的用戶竟然比首頁過來的用戶還多。
對比這兩個入口，一個是首頁，一個是很內頁的文字鏈，比較偏僻的入口，位置是微不足道，但給 Kitchen 帶來的用戶卻是首頁的 10 倍。
我們又對比了他們之間的差別：首頁雖然是比較大的位置，瀏覽量大，但用戶普遍是大致瀏覽，看的欲望不強。而點擊招聘頁，通常是帶著目的進來，所以這部分的用戶是高欲望點擊的。正所謂，欲望 - 摩擦 = 轉化，為了提升轉化，要么提升客戶的欲望（Desire) ，要么減少摩擦（Friction)， 往往消除摩擦要比提升客戶欲望更簡單。所以讓用戶有欲望進行來時，我們把摩擦盡量減少，則可以帶來更大的轉化。
所以我們就提出了一個大膽的假設：如果我們在用戶點擊欲望更強，關注度更高，瀏覽量更高的頁面，并且和 Kitchen 功能相關的頁面上增加引導，這個引流的效果可能會更好。因此開始了我們的實驗，首先分析 Ant Design 瀏覽量最高的前 20 的頁面，從中篩選出和 Kitchen 功能相關的頁面。
（篩選出高頻頁面，以及相關功能）
在相關功能頁面下，增加一個叫設計師專屬的模塊。在不同功能的頁面下，加入了不同的引導文案，去吸引設計師點擊。比如 Table 這個組件，我們加入的引導文案是：安裝 Kitchen Sketch 插件 ，兩步就可以自動生成 Ant Design 表格組件。（甚至連在文案前加 emoji 、文案后加或不加 emoji ，我們都嘗試做了實驗 ）
Ant Design 的用戶有一半是設計師，那么當設計師進入到該頁面，并且也想使用 Table 這個組件時，就可以減少用戶的摩擦，增加轉化。
1 個月后我們發現：對比首頁，在功能頁上的引流效果更好，也說明這次試驗是成功的。通過 Ant Design 渠道過來的訪問量，總體提升 2460%。并且這個影響是長久性的。
（渠道優化帶來訪問量提升）
在同一時間，獲得實驗成功后，我們繼續在不同的渠道嘗試了不同的增長實驗。6 周后，DAU 整體提升 42%，雖然6周的目標沒有達成 100%，但最關鍵是不斷試驗的過程。
更詳細的案例實踐請查看 ：https://zhuanlan.zhihu.com/p/68707241
語雀，是螞蟻金服孵化的一款知識協同產品。在螞蟻、阿里內部，大家都是用語雀來管理自己的辦公文檔與個人筆記，是十萬阿里人都在使用的筆記與文檔知識庫。當然，語雀不僅在阿里內部使用，對外，語雀也服務外部企業和個人用戶，所以沒有使用過的同學歡迎大家來試試：
https://link.zhihu.com/?target=https%3A//www.yuque.com/yuque/help
作為文檔管理工具，「寫」是其中的關鍵環節。因此，語雀將「注冊后寫一篇文檔」作為用戶的激活動作，此次增長實踐的目標，就是提升新用戶的激活率。
同樣利用增長大圖先梳理新用戶注冊激活的流程，從數據漏斗中我們可以看到，從注冊登錄后，到激活的轉化率是非常低的，這是我們的一個機會點。
由此我們也去做了一輪用戶調研，從調研結果來看，許多用戶在注冊后其實不知道「語雀能拿來干啥」「能怎么樣解決我的問題」。具體反映在用戶的操作和困惑上是：一是引導太弱不知道怎么開始寫一篇文檔，二是概念抽象令人費解，三是整個激活流程冗長容易失去耐心。這里邊其實有比較大的提升空間，那我們能不能通過一些實驗去提升轉化率呢？
首先分析原有方案的問題
這是我們老的引導方案，用戶注冊完成后，默認會進入到他的個人頁面，語雀默認為用戶創建一個空的默認知識庫。
現在回顧這個頁面，也難怪用戶會說不知道語雀能拿來干什么了。
首先，場景引導弱。每天不同用戶帶著各自的場景和問題，來到語雀，有希望做辦公文檔協同的，有希望做讀書筆記的，有希望寫專欄博客的。面對這形形色色的需求，語雀只提供了一個空的「默認知識庫」，余下的便留給用戶自行探索，也難怪用戶會感覺無從下手。
此外，像「知識庫」等概念，對于小白來說，其實非常抽象，難以理解。而且在此頁面中還有像「關注了」「關注者」等與創作關系不太大的干擾信息。這些東西，都會阻礙用戶激活，需要優化。
針對上述問題，團隊同學經過討論，提出假設：我們是否可以通過場景化引導的方式，來提升整個激活率呢？
所謂場景化引導，就是通過語雀產品定位以及用戶實際使用情況，提煉出最典型的場景模板，打包出樣板間。用戶帶著場景與問題來到語雀，語雀帶著相應的解決方案去迎接用戶，如此一來，需求和方案就能很好的匹配上，「語雀能用來干什么」的問題自然迎刃而解。
與此同時，新方案將「知識庫」等很難理解的概念通過場景化包裝，變成「筆記本」「攻略書」等更具像化的東西，用戶不再需要上來就學習這些概念，只需要在使用的過程中慢慢去體會其作用即可。
（第一批場景模板）
以上就是我們最初提煉的六大場景，我們將它放置在新用戶注冊后進入的第一個頁面。此處以學習筆記為例子：新用戶完成注冊后，如果想用語雀做學習筆記，他可以點擊筆記下方的「立即新建」。
（學習筆記新建流程）
此時，會進入學習筆記的創建流程，語雀會默認幫用戶填寫好表單內容，并在右側紫色框框內展示一個樣板，通過樣板見，用戶就能大概知道語雀是如何解決他所在場景下的問題。下一步，用戶只需要點擊新建，就能創建出一個適用于做學習筆記的知識庫。
（學習筆記知識庫）
瞧，一個學習筆記知識庫也就新建好了，這里，用戶可以選擇自行「新建文檔」，或者基于我們為他進行準備的模板文檔，開始自己的創作。整個引導過程，始終圍繞用戶的目標與場景，并將結果前置供用戶預覽，讓他更有體感。
最終，我們的增長實驗取得了還不錯的效果。相較于舊版，新版用戶激活率提升了 52%。
既然實驗效果不錯，是否能百尺竿頭更進一步，放大成功影響呢？這里運用了兩個小方法，舉一反三和乘勝追擊：
· 舉一反三：把成功模式運用到產品的其他地方
· 乘勝追擊：針對同一個點進行更多實驗，看能否進一步提升實驗指標
回到剛才的例子，在驗證了場景化引導的有效性后，我們也將模板用在用戶日常的新建流程里，除新手引導外，用戶在自己常規的新建過程中，也可以通過我們總結出來的場景模板去新建知識庫或團隊，做到舉一反三。
（將模板復用到常規新建流程中）
這一設計有利于向存量老用戶介紹語雀的用法，也方便他們去探索語雀更多的可能性，在弄明白「語雀怎么樣解決我的問題」之余，還能知道「原來語雀也能干這個！」
與此同時，我們在原先六大模板的基礎上，借著雙 11 和雙 12 的東風，提煉出了「電商團隊」模板，乘勝追擊。
希望借此轉化一部分商家流量，讓商戶也在語雀中管理自己的進銷存等內容。
經過一輪舉一反三以及乘勝追擊，場景化增長實驗取得了還不錯的效果，除剛剛說的整體激活率提升 52% 以外，自語雀場景化模板上線以來，語雀新建的所有團隊中，有 57% 是通過模板創建的；新建的所有知識庫中，有 21% 是通過模板創建的?？梢哉f，我們的場景化模板還是比較契合用戶實際場景，被用戶接受的。增長實驗取得了不錯的成效。
整個過程，在產品功能上，其實并沒有做多少增量，從前語雀能做的，現在也能做；從前語雀不能做的，現在也不太能做。
通過場景化的方式，讓產品的價值顯性化，通過讓顯性化后的產品價值被用戶發現，促使用戶增長。
場景化，讓價值被發現，這是我們在語雀增長實踐中學習到的小小經驗，分享給大家。
最后總結一下關鍵點：
利用增長大圖，用定量的用戶行為數據漏斗和定性的痛點比重數據，去綜合分析，找到機會點，然后從業務總目標出發去層層拆解增長目標，確定增長實驗的聚焦領域，現階段先做什么，后做什么？用最小的成本去撬動最大的價值。但增長大圖也只是工具和手段，最關鍵是與 Key Person 共創聚焦、共同推進，這樣才能做到事半功倍。
增長實踐不是一帆風順、一蹴而就的，最重要的是持之以恒，反復迭代實驗的過程。如果實驗成功則可以通過乘勝追擊和舉一反三的方式，繼續放大成功影響。如果實驗失敗則要吸取教訓，了解原因，繼續下一個試驗。
最后想說的是，增長只是一種思維方式，在設計中增長，讓產品核心價值被更多人發現和使用，通過設計的方式去最終幫助業務增長，甚至還可以做到對商業有影響。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目前關于“體驗度量”比較成熟的理論模型當屬 Google 的 HEART 模型、ISO 9126 軟件質量模型和Davis 的 TAM 技術接受模型。后人在此基礎上進行了很多實踐，譬如 SAP 的用戶體驗問卷（UEQ）、Oracle 的客戶體驗價值公式（CX）等。公司內部各個 BU 也在不斷的嘗試和探索，譬如新零售技術團隊的 TES 模型，技術團隊研發效能的 DEVA 模型，國際 UED 語音設計的 HII 模型，阿里云的 QoUE 模型?？v觀這些模型和實踐，大多是主觀數據和客觀數據的結合。
我們團隊也曾提出過 TECH 、PTECH 模型，但由于模型的操作門檻較高、對埋點數據有不少要求，難以推廣到各條業務線。痛定思痛后，我們決定重新回歸業務，回歸“體驗度量”的初心，去繁從簡，提高通用性。
企業級中后臺產品最大的特點是任務性質非常明確；用戶使用這類產品通常是為了解決某個確定的問題點，期待用新的解決方式降本增效。
桌面研究也表明：可用性問題是軟件行業的普遍問題：在英國，一般商用計算機用戶只有30%-40%的有效生產率；軟件缺陷中，48%是可用性問題。
正是基于上述原因，我們嘗試提出了“兩章一分”的標準，分別從設計驗收、可用性測試、易用度分數等三個維度對產品體驗進行體檢和把關。
“設計驗收章”主要有 3 個維度：產品還原度、任務流程跑通率、單頁面加載時間。
產品還原度：指技術同學的最終產出與設計稿之間的差異；
匯總人工智能線、技術風險線等 5 個產品近 1 年的可用性測試結果。除功能、性能問題外，高頻體驗問題主要集中在“幫助引導”、“操作反饋”、“任務流程”、“概念術語”、“功能入口”這 5 個方面。同時，結合之前項目沉淀的設計經驗和設計工具，我們最終將“產品還原度”的子維度定為“信息導航”、“幫助引導”、“操作反饋”、“文案名詞”；每個子維度用 2-3 句描述來進行評分。
任務流程跑通率：驗收確認能跑通的主干任務流程數，在所有主干任務流程數中的占比；舉個例子，設計稿中枚舉了 10 條主干任務流程，驗收發現其中 9 條已跑通，那么任務流程跑通率就是 9/10*100%=90%。
單頁面加載時間：接入雨燕性能指標數據的產品看“首次有效渲染時長 fmp”這個指標；未接入的產品直接主觀判斷，超過 3 秒的視為不合格。
“可用性測試章”也在驗收階段執行，同樣有三個參評維度：最終完成率、人均求助次數和高阻礙頁面。
我們沒有考慮將可用性測試的常用指標——操作時長作為參評維度，主要原因是企業中后臺產品類型多、使用場景復雜程度各自不同：用語雀創建企業空間只需要 5 分鐘；用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘，用 sofa stack 創建并發布一個應用可能需要 2-3 個小時......難以確定可以作為標準的具體操作時長。
“易用度分數”標準為 5.5 分。（關于“易用度分數”的更多詳情，請查閱《企業級中后臺產品體驗度量探索（上）》）。
截至 2020 年 9 月，已有 58 個 產品實踐過“兩章一分”系列方法，基本覆蓋平臺設計團隊支撐的重點項目及 UV 超過 100 的產品。詳細數據如下圖：
完整體驗“兩章一分”的 18 個產品，僅可用性測試就幫助發現 364 個問題，平均每個產品發現 20 個問題；其中，“九州2.0 發布部署”發現問題數多達 53 個。
企業中后臺產品生產階段中，由于一般沒有專門的測試同學，因此設計驗收都是由設計師或 PD 單獨執行，沒有作為必選環節，有時候甚至會因為開發周期緊張而直接略過；既沒有方法論，又缺乏儀式感。
“兩章一分”的實踐中，我們首次踐行“共創式驗收”，以項目組會議的方式，邀請各個角色共同參與到驗收環節中：如果產品沒有什么技術門檻，那么各個角色分別獨立操作核心流程；如果產品有一定的技術門檻，則由技術同學操作核心流程，同時共享屏幕，其他同學從旁觀察。操作完畢后，項目組內共同討論發現的體驗問題，并將問題落地到 Aone 中進行排期管理落地。
引入“技術支持”
企業中后臺產品通常有一定的技術門檻，以 SOFAstack的測試任務為例：
使用 sofaboot 技術棧，創建 “hello world” 應用，通過“經典版”發布部署模式發布成功。
測試過程中經常會出現一些涉及到底層技術系統的問題，非設計同學能解決，因此我們建議做企業中后臺產品的可用性測試時，需要配備至少一名技術支持同學，以備不時之需。
圈定最低測試人數
Jakob Nielsen 在 2000年提出測試 5 人就能發現 85%的可用性問題；結合我們的實際業務場景：有些產品真實客戶非常難找；前期“共創式驗收”已跑通核心主干流程；因此我們將最低測試人數限制為 3 人。
線上測試降成本
我們開始實操案例時，恰逢疫情期間，于是就引入了線上遠程測試的方式；后續實踐下來，發現遠程測試能在觀察、分析階段顯著降低執行成本。
通過釘釘或阿里郎發起視頻會議，邀請參加測試和觀察的同學入會，請測試用戶共享操作屏幕，主持人錄屏捕捉用戶操作軌跡，PD、技術等項目組成員從旁觀察。測試結束后，使用語音轉文本工具，快速將音頻轉成文字。這種模式最大的好處有兩點：
突破了距離和觀察人數的限制；從實踐來看，現場測試結合遠程測試的模式，至少能同時對 2-3 人進行測試，執行成本減半；
語音轉文本后，顯著提升了分析效率。
最開始提出“兩章一分”的時候，我們原本希望這套標準能被作為判斷產品體驗是否好用，能否上線的標準之一；但實際并未推動成功。這里面有很多原因，其中一個非常實際的問題是很多產品需要調用線上數據庫才能跑通核心流程，在測試階段沒法跑通；這就導致在測試階段做可用性測試無法真實還原用戶場景。
此外，設計師或 PD 新接手某款產品時，也希望能通過可用性測試的方式來快速了解產品問題?；貧w到“兩章一分”的初心——幫助產品發現體驗問題，因此，我們拓展了方法的執行階段，不再局限于測試或驗證階段，只要場景適合，都可以用。
LinkE 研發運維中心是云通未來 Serverless 戰場的重要產品；業務方希望用該產品來整合研發同學日常高頻使用的研發、運維、中間件平臺，大幅減少平臺割裂和跳轉，提供沉浸式的產品體驗。
目前該產品還處于 0-1 建設的階段。
為了確保產品體驗良好，設計師在驗收階段引入“兩章一分”，進行共創驗收和可用性測試；
共創驗收階段，邀請 PD、技術 等 8 名同學一起參與，最終結果為“通過”；
可用性測試階段，設計師根研發通用場景，招募 6 名研發同學參與兩個可用性測試任務，分別為
任務 1：基于代碼變更完成研發自測聯調；
任務 2：基于發布完成分支的集成、預發、灰度、生產
結果用戶在任務 2 遇到高阻礙頁面，導致可用性測試結果為“不通過”，任務 2 的易用度分為僅 4.4 分，顯著低于 5.5 分的參考標準；最終發現 30+ 問題點，并推動 PD 思考產品邏輯設置是否合理。
經過兩次完整實踐，LinkE 設計師已能完全獨立操作執行“兩章一分”；
業務方的參與度 & 認知度提升明顯：已開始習慣將“兩章一分”設為項目里程碑，并全員參與進來。
在實踐過程中，我們發現企業中后臺產品的典型場景大致可以分為 4 個場景；不同場景面臨的設計項目有所偏重；不同設計項目在體驗度量方面的切入點也有所不同。譬如：云鳳蝶是一個典型的沉浸式畫布頁面，所有操作幾乎都是通過編輯器屬性面板來調整，那么如何來評估編輯器的效率呢？通過一系列實踐和思考，我們提出可以通過“高頻屬性查找、配置的步驟數和時間”、“設置相同組件屬性的耗時變化”等指標進行衡量。以下是我們根據不同典型場景、設計項目提出的體驗度量切入點。
經過 S1 長達幾個月的探索：我們制定了“兩章一分”的標準；對 30+ 產品進行了易用度分數的測試，捕捉分數基線；提煉實操方法技巧，并賦能給各位設計師；聯合設計師和業務方跑通近 20 個案例。不管是問題發現數量，還是設計師、業務方的主觀反饋，都讓我們堅定“兩章一分”在企業中后臺產品體驗優化中是一個相對有效的模式。為此，S2 我們打算繼續深化。
落標準：在關鍵業務線將“兩章一分”落地到業務生產環節中，不過“兩章一分”就不能上線；
分基線：區分不同產品類型和迭代大小，制定不同的易用度分數基線；
升方法：針對跨產品、跨域等難以推動的橫向體驗項目，我們考慮升級方法，如將可用性測試升級為“用戶體驗日”，以便更好地推動問題落地；
閉案例：針對 S1 已跑通的業務，我們會在 S2 進行案例閉環測試，以驗證優化效果是否真的能在“兩章一分”上體現出來；
始運營：我們會挑選一些案例在公司內外發聲，找相關業務領域的團隊進行交流和探討；并從案例中總結和提煉設計技巧，幫助業務成長。
我們團隊當前支持的企業中后臺產品以 0-1 階段產品為主，PD 通常缺少用戶意識和體驗優化手段，這就導致了設計稿還原度較差、產品上手門檻較高。針對這一現狀，我們嘗試性地提出了“兩章一分”這個評價標準，從設計驗收、可用性測試、易用度分數 3 個維度來評價產品當前的體驗現狀。
通過 S1 50+ 產品的實操，我們一邊不斷完善評價標準和實操經驗，一邊總結體驗度量經驗；共幫助 18 個產品發現 364 個產品，并在 link 、sofa 等重點產品線中落地到業務生產環節中，在業務方層面收到良好反饋。
在這過程中，我們總結了適合不同場景、不同設計項目的體驗度量切入點，驗證了這種方式在當前企業中后臺產品中確實有效。后續我們將嘗試細化標準，閉環案例，對內對外發聲等方式，更好地推動體驗思維在企業中后臺產品生根發芽；同時，也期待能跟對這塊感興趣的同行朋友們多多交流。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今年，我們在內部中后臺產品進行嘗試，發現「易用度」可以作為合適的度量指標，并成功推廣到 35 個產品，幫助PD、設計師、工程師等產品設計者去衡量產品體驗現狀，發現改進機會點。實踐證明，易用度，相比滿意度、尖叫度、NPS，更適合技術類產品的體驗度量。結合用戶行為數據，可以為用戶畫像、改進方向、運營策略提供更準確的決策依據。
在公司內部，技術類產品種類繁多，有很大一部分是開發、運維人員使用的中后臺產品，且以從 0-1 階段為主。由于這部分同學本身工作復雜度高，又必須依賴內部產品來完成，所以長期以來“簡單易用”成為大家追求的產品體驗標準，他們也把“如絲般順滑”作為終極目標。但現實情況是，上手門檻高是使用技術類產品最大的痛點。
對于前臺業務的設計者，經常會使用「人+錢」，也就是「流量+付費」來衡量產品效果。通過成功率、轉化率等指標，可以快速看到用戶行為上的反饋，來指引后續優化。但對于技術類產品，尤其是強流程、工具型產品，很難找到一套契合業務特點的度量方式。理論上，使用「成本+效率」是比較合適的衡量維度，實際操作下來，找到設計和產品效果之間的因果關系，并非易事。
我們做了一個內部調查，發現產品設計者經常容易遇到這些問題：
體驗度量是一個繞不開的話題。天貓、阿里云、華為、京東都有嘗試提出解決方案，但沒有統一的衡量維度。
設計方案與產品的市場反饋，需要一個可以解釋關聯關系的抓手，這對迭代方向的指引至關重要。
產品團隊逐漸重視用戶用戶，但缺乏有說服力的指標。
業界在體驗度量上的方案，大致分為 3 個派別：
客觀衡量法：通過數據埋點監測用戶行為數據。例如經典的 PULSE 模型，還有大家熟悉的運營指標，活躍用戶數、留存率、ARPU、LTV等等。這對于還未商業化、用戶基數少的產品不適用。
主觀衡量法：收集用戶主觀打分。經典的滿意度、尖叫度、NPS，可用性測試量表（如SUS），美國客戶滿意度指數ACSI。
主觀+客觀衡量法：把用戶行為數據和主觀打分結合起來，多數用歸一化方式得出一個總分，把分數劃分成不同檔次作參考。Google 經典的 HEART 模型，內部 的 PTECH 模型，阿里云 QoUE 模型 ，華為云的用戶體驗模型。
在掌握了這些信息之后，我們在內部的技術類產品上，進行了一輪新的探索。經過半年時間的試點，結合業界的解決方案、內部產品的業務特性，我們最終選擇主觀衡量法，并使用「易用度」這個衡量指標。
易用度，英文 Customer Effort Score ，簡稱「易用度」，也有譯成「費力度」，指的是用戶使用某個產品/服務來解決問題的難易程度。目的是消除或減少用戶使用產品過程中的障礙。
該定義來自 2010年 《哈佛商業評論》發表的文章——《Stop Trying to Delight Your Customers》。2013年，Gartner 子公司 CEB 發布 易用度2.0版本 的測量方法，定義為“解決問題的難易程度”（make it easy to handle my issue）。
它的源頭可以追溯到美國用戶研究專家 Jeff Sauro(2009)提出的單項難易度問卷（Single Ease Question，SEQ），在可用性測試之后，用戶需要對一個問題進行打分，問法是“整體上，這個任務是非常困難-非常容易（7分制）”。
為什么說「易用度」更適合技術類的產品？主要基于技術類產品的三大特點。
總體指標
易用度：使用**產品完成**工作的容易程度。
影響因素
主要因素：產品及設計給用戶操作帶來的復雜度，我們稱之為「基礎體驗」，包括幫助引導、功能入口、概念術語、任務流程、操作反饋。
次要因素：用戶特征對使用易用度的調節作用，也稱之為「調節因素」。不同特點的用戶，會影響易用度分數，包括操作熟練度、先驗知識、行為習慣。
大家肯定要問，這些影響因素是怎么確定的，如何證明它們的合理性？這就要提到量表開發方法，基本上可以分為幾個步驟：
step1.理論借鑒
從相關領域查找經典量表，站在巨人的肩膀上，經過實踐檢驗的量表更可靠。我們首先從15種國際可用性測試量表中借鑒，抽出了一些關鍵的衡量維度。另外，易用度創始人Matt Dixon（2014）在《the effortless effort》書中，總結了在客戶服務場景，費力的關鍵因素：
信息分類不恰當，反復描述問題（82%）
需要多次求助（62%）
幫助指引不清晰(59%)
找不到相關入口，頻繁切換溝通渠道（59%）
step2.實踐總結
我們盤點發現，技術類產品，絕大部分屬于工具型產品，強調任務流程，也是用戶痛點集中的地方。匯總多條業務線近1年的調研結果。除了功能、性能問題外，根據對完成任務的阻礙程度，無論是0-1階段，還是1-N階段，高頻體驗問題分布都集中在5個維度：
幫助引導
操作反饋
任務流程
概念術語
功能入口
step3.數據分析
通過整理歸納的影響因素，需要經過信效度驗證，才能有說服力。簡單來說，信度就是“可信與否”，指的是結果的一致性、穩定性及可靠性；效度就是“命中與否”，指的是結果反映所想要考察內容的程度。通過統計學的探索性因子分析，驗證性因子分析，我們確定 5 個維度可以有效測量易用度分數的變化。詳細可查閱《如何找到影響用戶體驗的關鍵因素？》。
從易用度-滿意度-尖叫度-NPS，是一個用戶預期的漸進變化。從中可以看出，易用度更關注的是基礎體驗，也就是“簡單好用”。
為什么易用度相比其他指標更適合技術類產品呢？主要有 3 個原因：
1.內部試點發現，滿意度無法準確衡量技術類產品體驗
滿意度不能很好衡量真實體驗，分數虛高。我們在一些產品上，同時使用「易用度」和「滿意度」作為總體指標，發現 43% 的用戶滿意度評分，高于易用度評分，可以理解為“產品我滿意但不好用”。此外，易用度分數與滿意度分數相關性高達0.77，具備很高的可替代性。
易用度更接近用戶真實體驗。對任務難易程度作出評價，用戶在判斷時會更直接，考慮使用過程中付出的腦力、時間等成本。對滿意度作出評價，除了考慮產品本身的易用性，內部用戶還會考慮其他主觀因素，例如：
合作關系：你是研發，我是用戶，擔心給你滿意度打低分了，之后就不滿足我的需求了。
中庸傾向：滿意度調查，已經是人盡皆知的評分，國人都傾向于打中上。
評價范圍：易用度問的是完成工作的容易程度，范圍更小，用戶評價的時候更聚焦。滿意度問的是整體是否滿意，范圍更大，用戶會綜合考慮很多因素，例如上面提到的服務支持、上下游協作、需求響應等等。
2.行業實踐表明，易用度比 NPS 更能預測用戶留存和成本變化
易用度更能預測用戶留存?！豆鹕虡I評論》（2010年）發表易用度時，調研7500多名用戶，數據顯示易用度低的客戶，94％的有復購意愿，88％表示會增加支出，僅1％表示會對公司持負面態度。Garter（2013）發布報告，基于49000多名用戶數據發現，易用度分值從1分提升到5分，可以使用戶忠誠度提高22%。Oracle（2015）發布服務云易用度白皮書發現，當用戶表示使用產品付出了更少的努力，忠誠度提高18%。相反，從滿足用戶預期到超出用戶預期，用戶忠誠度的變化并不明顯。
易用度更能預測成本變化。 Gartner（2019）對100+公司、12.5w用戶的調研發現，易用度從高分到低分，可以降低37%的成本。
3.行業實踐表明，尖叫度更適合成熟度較高的產品類型
目前在市場上，至少在國內，ToB 產品沒有達到飽和，定位也各有不同。在企業用戶心中，并沒有足夠清晰的心智和經驗去判斷。例如企業微信和釘釘，基本上很少有用戶會同時使用這兩個產品，那用戶就無法準確評價二者的好壞。
更關鍵的是，很多 ToB 產品，用戶多數是被動接受使用的，極少有選擇余地。普遍的高技術門檻，也把他們嘗試的意愿和可能性大打折扣。
對比滿意度、尖叫度、NPS指標，易用度的優勢在于：
關注用戶完成任務過程中的阻礙，重視基礎體驗；
適合去度量特定的用戶接觸點和任務流程，以便了解用戶解決問題的難易程度。
劣勢在于：
對于分數過高或過低的情況，沒有通用的基線，需要區分行業、產品類型、產品復雜度來衡量分數是否合格；
側重基本體驗，無法衡量用戶的總體滿意度。
經過半年的實踐，我們采集了 35 個技術類產品的易用度，根據產品類型、產品階段來區分。結合內部試點和行業調研，我們把技術類產品的易用基線，設定為 5.5 分。主要發現：
產品類型越復雜，易用度越低。試點產品中，ToC 產品易用度均值 5.46，ToB 產品易用度均值 5.32，ToD 產品易用度均值 5.07。
產品階段越早期，易用度越低。試點產品中，0-1 階段的產品易用度均值 5.09，1-N 階段的產品易用度均值 5.28。
如圖所示，易用度有很好的區分度，不同產品類型的不同產品階段分數呈現出差異性，我們可以根據這個數據，去評估自己的產品所在位置。
為什么總體上選擇 5.5 分作為“易用”標準？
我們在這 35 個產品上進行易用度的嘗試，最終收集了 4000+ 問卷數據，得出了技術類產品的體驗基線：
總體均值 5.07 分，中位數 5 分。具體分布如圖所示，認為“比較容易”（5-7分）的用戶占 69%。
但由于內部的技術類產品，大多處于 0-1階段，以現在的狀態作為“易用”基線，顯然不合理。
因此，我們需要結合業界的實踐作為參考。我們收集到 2 家用戶研究領域的老牌公司 Nicereply 和 HotJar 的數據。Nicereply 是一家咨詢公司，它服務的對象既包括 C 端用戶，也包括 B 端用戶。HotJar 是一家專做用戶行為監控的公司，它服務的對象主要是 C 端用戶。因此，我們傾向于采納 Nicereply 發布的基線 5.5 分，作為參考。
Nicereply 公司在2018 年發布的易用度 benchmark，基線為 5.5 分。
HotJar 公司在 2019 年發布的易用度 benchmark，基線為 6.09 分。
很多設計者會想，不就是一個問卷嘛，能發揮多大的作用？實際上，當問卷數據+用戶行為數據，它將發揮更大的價值。
現狀描述：對產品當前的功能、體驗、性能的在用戶心中的水位進行摸底，通過數據和主觀反饋找到原因。
對比差異：技術型產品往往有多個角色共同使用，并且有上下游協作關系，可以通過問卷和數據發現不同角色的偏好，找出差異化的改進方向。
影響關系：當發現某些模塊用戶評價低時，需要下鉆找到最相關的影響因素，這時需要用到相關分析，找到此消彼長或相輔相成的變化關系，以及用到回歸分析，找到可能的因果關系。
聚類分析：結合問卷數據和用戶行為數據，我們可以對典型用戶進行分層，也就是我們通常說的“用戶畫像”，可以結合經典的 RFM 模型，找到高頻、忠誠、高付費且評價好的用戶。
以某個技術類產品 A 為例，通過現狀描述，可以發現低分人群抱怨的問題集中在哪里，提出問題優先級排序。
通過對比差異，把用戶根據人口學、行為特征進行單維分類，與易用度分數做交叉分析，找出人群之間的差異，有針對性改進。
通過影響關系分析，可以找到影響產品 A 易用度分數的主要原因，也就是用戶為什么覺得好用/不好用。
通過聚類分析，結合問卷數據和用戶行為數據，可以發現典型人群，制定差異化的運營策略。
在 35 個技術類產品上的實踐，我們發現了一些常見現象和經驗性的洞察，它并非都是普適的，卻有很高的參考價值。
基于內部技術類產品的體驗度量實踐，我們得出以下結論：
實踐證明，易用度指標衡量技術類產品更有效。技術類產品降本增效的商業目的、降低技術門檻的用戶訴求、流程復雜上手難的痛點，決定了體驗度量要關注基礎體驗。滿意度、尖叫度、NPS去衡量都不太準確。
易用度的衡量維度，包括 5 個部分的基礎體驗。即幫助引導、功能入口、概念術語、任務流程、操作反饋。
結合內部試點和行業調研，我們把技術類產品的易用基線，設定為 5.5 分。當前內部技術類產品的易用度基線是 5.07分，行業技術類產品的易用度基線是 5.5 分，產品類型（ToC/ToB/ToD）、產品階段（0-1階段，1-N階段）也會有所差異。
結合行為數據，易用度可以進行描述、分類。使用現狀描述找出低分人群的高頻問題，使用對比差異找到多角色的不同訴求，分析影響關系找到影響易用度的主要因素，結合用戶行為數據進行聚類找到典型人群。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近很長時間都在做招聘管理系統的大改版，管理系統用戶角色眾多、功能邏輯復雜、使用場景多樣化，如何做到用戶體驗的突破？
在 ToB 領域，不能只關注中間的設計環節，而是需要參與到整個項目的流程中，圍繞著客戶服務的全流程，包括 理解業務-尋找機會-制定策略-設計原型-效果驗證 進行全鏈路的體驗設計觸達。
理解業務，主要是理解業務邏輯、用戶角色、使用場景；
1、業務流程圖
通過客戶現場訪談、問卷調查、用戶行為數據分析、競品分析、查閱行業報告等方式，梳理業務流程的關鍵節點，這些節點也就是我們后續設計的關鍵步驟。
2、用戶角色
梳理出業務流程之后，從業務流程中可以找到對應的用戶角色。招聘平臺的用戶角色包括招聘專員、招聘經理、部門主管、面試官、應聘者、獵頭、企業員工等，最主要的用戶角色是招聘專員。
通過角色畫像，減少我們在設計過程中的盲目設計和閉門造車，時刻以用戶的視角和感受來設計。
下圖是“招聘專員”的用戶畫像
2、場景分析/用戶故事
場景化設計的定義：根據特定時間、使用情景、及用戶的特性，進行定制化的設計，使用戶按照產品設定的路線快速完成目標盡可能的給予用戶驚喜與感動。
可以應用“體驗設計畫布”來幫助我們更好的梳理場景。
主要是從操作流程、內容反饋、信息傳達、視覺表現、情感關懷的角度來尋找交互和視覺的優化點；
「操作流程」是否高效
去除冗余：去掉哪一步驟仍能跑通流程；預判操作：下一步驟是否可預判，提前幫用戶完成；自定義操作：高頻操作是否允許用戶自定義從而減少操作步驟；
2.「內容反饋」是否合適
符合預期：每一個操作后呈現的頁面或信息內容是不是用戶想要的；
一致性：不同界面同一個操作或樣式，操作后是否呈現一致的內容？
輕量化：采用更輕量的內容呈現方式，是否依然符合場景，減輕操作成本；
3.「信息傳達」是否清晰
邊界清晰：能夠明顯區分各模塊或信息，遵循格式塔原理；
易獲取：主要模塊或信息放置在容器邊界的左上部分，因為用戶閱讀習慣從左到右、從上到下；
結構簡潔：同一層級信息數量遵循7±2原則，若超過則考慮重新整合信息結構，或是提供更高效的信息獲取方式；
4.「視覺表達」是否明確
減少認知負擔：是否有信息內容可用視覺元素代替或輔助，規避用戶閱讀文字加重認知負擔；
表意清晰：通過視覺元素能夠快速了解信息大意，而不產生歧義；
降低疲勞：界面視覺是否容易加速用戶的疲勞感；
5.「情感關懷」體現溫度
正向情感：文案是否傳達了正向情緒，避開負面情緒；
貼近日常：信息呈現貼近日常習慣，非必要不使用專業術語；
積極提供方案：當出現異常情況時，是否有解決方案替代異常提示；
1.「操作流程」優化操作路徑
2.「內容反饋」更加人性
3.「信息傳達」信息整合，清晰高效
4.「視覺表達」一致、易獲取、動線合理
5.「情感關懷」體現溫度
經過前面的理解業務、尋找機會、制定策略之后就可以進行原型設計了，考驗大家設計功底的時候到了，這里不再贅述。
1.驗證維度
2.驗證方式
我們主要通過系統功能埋點、系統NPS信息收集、客戶現場和電話回訪、內部客戶外部客戶問卷調查等方式來收集用戶反饋信息。
3.驗證結果
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網站建設-如何建設一個優質的網站？
網站建設
互聯網時代的到來，作為一個企業你如果還沒有屬于自己的網站，那么你就真的“out”了，互聯網的日流量達到上億，這些不是簡單的點擊率，而是一筆真真正正的大錢。如果你還不會互聯網，不了解互聯網，那么這些都與你毫無關系。而網站建設是企業面向互聯的主要窗口之一。也是大家公認渠道之一。
網站建設對于企業來說意義重大，它不僅是企業展示的窗口那么簡單?；ヂ摼W時代下，眾多企業紛紛進行互聯網轉型，那是因為這些企業的領導者擁有者敏銳的嗅覺，具有洞察時代大趨勢的能力。網站建設使他們首先要做的事情。那么如何建設一個優質的網站呢？
網站建設
第一：網站建設平臺要有強大開發團隊
網站建設是一門技術活，沒有強大的技術作為支撐，就無法保障網站的安全性和功能的實現。開發團隊的強大決定了網站質量與品質。擁有一穩定的后臺，才能確保企業網站的一系列工作順利進行。
第二：網站建設要有專業的設計團隊
一個網站就好比一個門面，設計人員就是裝修的師傅。門面不好看給客戶的第一印象就是不專業，第一印象分就大打折扣，不能引起客戶的重視。設計的不合理，就會影響到客戶的體驗度。一個沒有體驗度網站，很難留住客戶，進行流量的轉化。一切設計以客戶的體驗度為核心。
第三：網站建設要跟上時代的步伐
時代變，網站建設的功能和需求點也在變，只有去適應時代的打造需求，企業才能在競爭激烈的時代下生存。功能的更新換代也要跟上時代的步伐，才能滿足客戶的體驗需求。客戶才會為我們買單。
SEO優化
第四：網站建設要有利于SEO優化
網站建設只是完成面建設，而我們建設網站的目的是為了，引來流量，轉化流量，實現利潤轉化。一個沒有不利于SEO優化的網站，就像埋藏再深山的金山，難以被發現，吸引不到客戶。SEO的意義在于打通前往金山的通道。海、陸、空全方位立體打通，讓客戶絡繹不絕前往。金山才得以被發現，被開發。
第五：網站堅持維護更新
這個時代不是大魚吃小魚的時代，而是快魚吃慢魚的時代。只有不斷的去完善更新，才能適應生存。網站也一樣，只有不斷優化升級才能不被淘汰。
第六：網站建設要符合國家政策
要及時了解國家的相關法律法規以及一些相關的政策，例如最新的廣告法，不能只用不符合要求的字眼。例如分銷系統，不能越過法律底線。那些文字可以商業，哪些是有版權的等。
以上是一些個人的網站建設個人見解，如有更好的意見也歡迎大家一起探討，相互學習。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：SEO
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn