以下內容主要分成兩大部分，第一是聊聊響應式和自適應的區別和原理，以及我們應該如何去設計響應式界面；第二部分也是比較關鍵的B端系統設計的核心，B端設計中臺完整構建過程的具體步驟，以及應用到的格式塔原則，和命名的一些注意事項，內容較多，大家可以根據上述目錄來選擇性閱讀。
簡單概括多端兼容設計的發展史，最早是桌面端，比如桌面的一些應用；后來出現了移動端，針對移動端大家用的都是WAP，指一種無線應用協議，大家在用手機瀏覽一些網站，會把網站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網絡不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現了響應式，也就是做一套代碼可以兼容三端（網頁、移動端、iPad）設備，在發展的同時也遇到很多問題，但響應式同時也遇到了很多問題；于是又出現了自適應，指不同的設備打開不同的頁面進行自適應，自適應能增加效率，但需要增加工作量；2017年以后直到現在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。
自動布局算是響應式的一種，但平時看到很多響應式其實并不是真正的響應式，而是自動布局，因為界面在不同的設備用的是不同的模板，當我們用電腦打開呈現的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應式，其實不是。因為當我在開發者模式下調節不同設備展示時，就會發現，其實是換了一個網址來根據不同的設備進行自適應的，而真正的響應式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進式布局是近幾年比較新起的，這種布局設計，很像一個網站或者本身它就是一個網站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網頁，但通過技術的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術還是web網頁。
響應式的原理是通過定位的方式來做響應式的各種開發，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解，其實結合figma來看，這些點對應的就是這樣（如下圖），在figma中的布局點。設計師通過調節圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應式的原理。換言之，我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。
01、響應式
如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面，這個頁面兼容三端。雖然做了響應式，但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面，然后全部做好對應的自動布局，再進行頁面拉伸，內容隨之會發生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發現局部在設計上有些不合實際情況，這時就需要設計師在對應尺寸的設計稿上進行內容上的微調，比如按鈕不可能那么長，就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時，然后再酌情針對網頁尺寸的呈現樣式，局部進行尺寸的調整，比如文字和按鈕被拉伸到網頁版都需要居中對齊，電腦端的樣式就需要設計師重新排版了。
通常在B端系統，設計師需要做響應式設計時，往往是從大往小做設計，這也取決于這個B端產品是否需要進行移動端的設計，《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端，就需要我們將網頁改成移動端設計，比如B端的側邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設置，就可以完美的看到頁面在三端不同情況的適配呈現，斷點插件用來做演示非常方便。
02、自適應
如下圖是自適應的優點和缺點，其實就是一個項目開發三個頁面，分別做定制設計，網頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型，尤其是今年我們設計師更能深刻體會，C端和B端已經是完全兩個不同的行業，C端發展近十年，已經很難再做到創新上的突破，該做的功能和創新都已經做了，而B端這片藍海才剛剛開始發力，很多企業也都在考慮B端系統的搭建，降本提效率成了很多公司新的指標，因此數字化轉型重點在于B端系統探索，B端重點在于中臺的搭建！設計師通過設計中臺，構建出基本的業務類型，再分類到業務中，構建出不同的業務界面，所以設計中臺非常關鍵，很多公司經常會用這兩個系統去構建，Antdesign和Elemnet就是設計中臺，我們會發現用Antdesign可以做出很多的系統，那怎么進行設計中臺的設計呢？和我們設計師有什么樣的關聯度呢？帶著這個問題，我們深度探索B端設計中臺的落地！
概念：中臺是互聯網的術語，一般應用于大型企業，中國互聯網的變革永遠是從大型互聯網開始，大型互聯網公司引發了技術的變革，這也是中臺的興起，一般指搭建一個靈活快速應對變化的架構，快速實現前端提的需求，避免重復建設，達到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產生，一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設計師設計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設計師的工作效率。
基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等，之所以強調系統兩個字，有系統就要統一規則和統一規范，然后進行調用應用在系統中的各個地方，比如我們想調用一個顏色，不是去隨選用一個顏色，應該嚴格的從色彩系統中去調用，如果系統組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用，這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應的組件，我們應該試著反推一下，是否要加進組件庫中去，來進行系統的調用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規則，它也是在沿用別人的規則，而這些規則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現在這樣的組件庫，那中臺設計，首先要搭建基本庫，把基本庫里的基礎一些系統搭建好后，我們繼續去做擴展庫。
如下圖，擴展庫中包含了很多內容，比如分了四類，導航系統，數據錄入，數據展示和反饋系統。其中導航系統又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節Arco組件庫，因為它們面向的是系統級的解決方案，各行各業都可以用它，它面向的是一個大系統，也許我們只涉及到了其中的20%，因為也沒有一個系統能用到它所有的組件，所以我們自己在設計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應該加以說明什么時候用這個多選框。類似于是組件的設計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據眼動儀實驗數據數據來看，并且結合給出一些工作中業務中的最佳實踐得案例放進去，給使用的人去做指引。
所以設計師做的事情，不僅僅是應用組件庫和創造組價庫，還應該指導其他設計師，指導開發人員在去復用每個頁面組件的的時候，應該怎么正確的使用，這也是在B端設計中一個關鍵的環節，同時我們的視覺系統一定也是和業務有關聯度的，所以在B端中做設計一定也不會脫離業務去做，我們一定要聯系到實際的業務場景中，這個業務場景指的就是業務和視覺的結合，在做C端的時候，業務場景一定不會比B端多，C端的業務場景大多是定制化的業務場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統一化，中臺組件庫的落地，可以大大提高設計師的工作效率和開發人員的協同效率，嚴謹的調用組件使用組件，可以使得系統頁面保持高度的一致。
如圖1：可以看出縱列的關系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應用，如果元素相鄰的更近，元素之間的關系就會更加的緊密。
如圖3：如果元素相鄰的關系都是保持一樣的，那么它們的關系是相對對等的。
由此可以得出結論，如果相鄰的關系越近，它們的關聯度就越近，如果相鄰的越遠，它們的關聯度就越遠。
應用案例：如圖4卡片中得標題和內容，設計中把標題和內容進行區分，所以我們會做大量的留白，這樣的留白就會讓信息結構具有層次感，層次感就是指它們信息結構的關聯度，如果想讓它們有關聯度，就讓它們距離近一點不要做區分，如果不想讓它們有關聯度，或者關聯度出現一個等級的區分，那么就可以加一條線，讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。
如圖5：如果去區分右邊的形狀，通常我們會根據形狀進行區分，因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。
應用案例：如果文字的標題大小是保持一致的，包括它有統一的大小，統一的色彩，統一的字號，那系統中的其他同樣功能的地方，都應該用統一的文字，這就是格式塔相似性的應用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進行了區分，如果在設計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。
應用案例：比如警告彈出，可以用色彩去區分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中，前景和背景進行區分的時候，我們就可以通過色彩進行區分，色彩的區分要保持統一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關系是什么呢？比如一個loading，半圓一直在旋轉，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應用在圖標的設計，圖表的設計和步驟條的設計中。
如圖9：可以看出用一些簡單得形狀來體現，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續性；另外一組三角形箭頭指向右下角，可以看出它們是連續的一組。不同的形狀會有連續性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數據需要有連續的時候，我們也要使用相似的形狀來表達，這就是連續性原則的應用。
同理如圖10：連續性一定是要有連續等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續等階變化，通過色彩的透明度也可以做到連續性。
很多公司或者不同公司有不同的命名方式，這個需要和團隊開發提前做溝通，主要以方便開發習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態，這樣的命名順序來進行，這樣命名開發使用也比較方便，因為是按照了開發的統一規則來進行命名的。如圖所示：
當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態名、級別名、內部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
文章來源：站酷 作者：飛魚十七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。
通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息進行分組。
圖3 親密性原則體現的留白分割
如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，間距留白是區隔單一信息元素的默認選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個元素之間默認使用留白分割，隨著元素的增多，多個元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。
圖5 iOS和Android系統的分割方式差異
在 iOS 中，線性分割是條目間默認的分割方式（參見 iPhone 通訊錄和設置），當多個條目成組后，為了區分不同組別，則會采用更高層級的卡片分割方式。
在 Android 系統，留白分割是條目間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文內容。（參見 Pixel 5 的通訊錄和設置）
從 2014 年 Material Design 發布后“卡片式設計”的風靡，再到 2019 年前后“去線化設計”盛行，結合設計趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數據指標的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設計的創始團隊 Google，在設計 Android OS 時也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內容。在 Material Design 中，對分割線(Dividers)有明確的定義和規范。（iOS 中沒有相關定義，根據上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設計規范建議和效果）
分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾，影響頁面信息傳達，所以 Android 系統明確規定了分割線的使用原則：
圖7 Android系統中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數時候（信息層級≤2），采用分割線進行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：
圖10 追求縱向信息屏效時線性分割效果更好
當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時應注意以下三個使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好，畫面的分割感會更強。
不管是哪種卡片類型，它們都是獨立的、包含單個主題的內容(操作)的容器，它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。
那什么時候使用通欄分割線，什么時候使用卡片分割呢？這里有三個參考建議給你：
圖14 使用卡片的三個參考條件
回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。
圖15 設計師設計的三種分割效果
在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。
根據分割方式自身的特點（視覺干擾性、分割強弱感、滑動沉浸感）、上下文條目之間的關系，單個條目的內容復雜度，屏幕空間的利用率，我們可以對分割方式做一個簡單的小結，如下：
圖17 分割方式特點小結
簡而言之：
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。
通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息進行分組。
圖3 親密性原則體現的留白分割
如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，間距留白是區隔單一信息元素的默認選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個元素之間默認使用留白分割，隨著元素的增多，多個元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。
圖5 iOS和Android系統的分割方式差異
在 iOS 中，線性分割是條目間默認的分割方式（參見 iPhone 通訊錄和設置），當多個條目成組后，為了區分不同組別，則會采用更高層級的卡片分割方式。
在 Android 系統，留白分割是條目間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文內容。（參見 Pixel 5 的通訊錄和設置）
從 2014 年 Material Design 發布后“卡片式設計”的風靡，再到 2019 年前后“去線化設計”盛行，結合設計趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數據指標的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設計的創始團隊 Google，在設計 Android OS 時也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內容。在 Material Design 中，對分割線(Dividers)有明確的定義和規范。（iOS 中沒有相關定義，根據上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設計規范建議和效果）
分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾，影響頁面信息傳達，所以 Android 系統明確規定了分割線的使用原則：
圖7 Android系統中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數時候（信息層級≤2），采用分割線進行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：
圖10 追求縱向信息屏效時線性分割效果更好
當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時應注意以下三個使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好，畫面的分割感會更強。
不管是哪種卡片類型，它們都是獨立的、包含單個主題的內容(操作)的容器，它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。
那什么時候使用通欄分割線，什么時候使用卡片分割呢？這里有三個參考建議給你：
圖14 使用卡片的三個參考條件
回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。
圖15 設計師設計的三種分割效果
在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。
根據分割方式自身的特點（視覺干擾性、分割強弱感、滑動沉浸感）、上下文條目之間的關系，單個條目的內容復雜度，屏幕空間的利用率，我們可以對分割方式做一個簡單的小結，如下：
圖17 分割方式特點小結
簡而言之：
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。
通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息進行分組。
圖3 親密性原則體現的留白分割
如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，間距留白是區隔單一信息元素的默認選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個元素之間默認使用留白分割，隨著元素的增多，多個元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。
圖5 iOS和Android系統的分割方式差異
在 iOS 中，線性分割是條目間默認的分割方式（參見 iPhone 通訊錄和設置），當多個條目成組后，為了區分不同組別，則會采用更高層級的卡片分割方式。
在 Android 系統，留白分割是條目間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文內容。（參見 Pixel 5 的通訊錄和設置）
從 2014 年 Material Design 發布后“卡片式設計”的風靡，再到 2019 年前后“去線化設計”盛行，結合設計趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數據指標的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設計的創始團隊 Google，在設計 Android OS 時也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內容。在 Material Design 中，對分割線(Dividers)有明確的定義和規范。（iOS 中沒有相關定義，根據上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設計規范建議和效果）
分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾，影響頁面信息傳達，所以 Android 系統明確規定了分割線的使用原則：
圖7 Android系統中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數時候（信息層級≤2），采用分割線進行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：
圖10 追求縱向信息屏效時線性分割效果更好
當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時應注意以下三個使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好，畫面的分割感會更強。
不管是哪種卡片類型，它們都是獨立的、包含單個主題的內容(操作)的容器，它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。
那什么時候使用通欄分割線，什么時候使用卡片分割呢？這里有三個參考建議給你：
圖14 使用卡片的三個參考條件
回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。
圖15 設計師設計的三種分割效果
在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。
根據分割方式自身的特點（視覺干擾性、分割強弱感、滑動沉浸感）、上下文條目之間的關系，單個條目的內容復雜度，屏幕空間的利用率，我們可以對分割方式做一個簡單的小結，如下：
圖17 分割方式特點小結
簡而言之：
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“復雜是世界的一部分，但它不應該令人困惑，好的設計幫我們馴服復雜，不是讓事物變簡單（如果復雜是符合需求的），而是去管理復雜”--唐納德·A·諾曼
與復雜共處，這是一個有趣的話題。在這個奉行“少即是多”的時代，設計師對于復雜噤若寒蟬，認為優秀的設計應該簡潔明了，若無必要，勿增實體，而復雜則常備被視作失敗設計的標簽。設計師為了保持設計上的簡約挖空心思，甚至試圖通過削弱功能的方式來降低產品的復雜度，得到自己想象中的完美設計。然而一味追求“簡單”的設計真的符合用戶的實際需求嗎？從心理學的角度來看，復雜的事物往往功能強大，而功能強大意味著更好的服務與更高的價值，用戶也更愿意為之付費。當我們購買商品時，我們會仔細斟酌，拿著產品的功能列表反復比對，這個時候我們忘記了產品復雜與否，更多考慮的是功能是否滿足自身需求。
對于大部分B端產品而言，復雜或許難以避免，復雜是出于實實在在的業務的需要，而非某位設計師的錯誤喜好。B端產品之所以給人感覺會相對復雜，是因為產品需要完成復雜的工作任務，界面內承載的信息內容較多，在視覺上會帶給用戶壓力，直觀感受上覺得產品很復雜。但是這些信息又都是必需的，如果缺少這些必要的信息，會對用戶理解和使用產品造成阻礙。就如同飛機的駕駛艙，密密麻麻的按鈕如此復雜，但是每一個按鈕都有著相應的功能，不可或缺。既然復雜難以避免，那么作為設計師我們不應該被動接受或盲目拒絕復雜，我們應該學會如何與復雜共處，去嘗試馴服復雜、管理復雜。
相信很多設計師和我一樣，經歷過現代主義浪潮的洗禮，對于簡約的設計有著或多或少的偏好。因為這種偏好，在自己進行設計時也希望能夠選用這種風格，在設計時刻意的去追求界面簡約，卻忽略了界面上的簡約不等同于產品易于理解和使用。從心理學的角度上看，復雜的事物更容易理解，簡單的事物反倒令人困惑，一味的追求簡單反而會讓事物變得復雜。
B端產品的目標是降本提效，追求簡約的設計思想在B端產品的設計中并沒有那么適用，為了提升用戶的操作效率，我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復雜度，但是相較于產品視覺界面會因此變得復雜，產品的易用性和操作效率對于B端產品而言會更為重要。
與復雜共處的前提是能夠理性地看待復雜，復雜本身的含義即非褒義也非貶義。復雜描述的是事物的狀態，它在詞典上的解釋是擁有很多即錯綜復雜又相互關聯的組成部分的事物。產品復雜與否是由產品本身所從事的業務和需要完成的任務來決定，就像我們不能要求一個做機械結構設計的工程軟件做得像一個圖畫板一樣簡單，因為兩者的功能需求不是一個層面的，所以我們也不能單純的將產品簡潔還復雜作為評判一款產品優秀與否的標準。
我們之所以對復雜懷有畏懼，其實更多的是畏懼令人困惑的復雜，復雜與困惑有著本質的區別，理解他們之間的區別很有必要，復雜描述的是事物的狀態，而困惑表述的是用戶使用產品時的心理。復雜的背后可以擁有規則與邏輯，理解這些規則和邏輯，能夠幫助我們理解和使用產品。而令人困惑的產品往往缺少這樣的內在規則與邏輯，用戶難以理解產品的運轉機制，需要花費很大力氣才能完成有效操作，容易讓用戶產生挫敗感。產品可以是復雜的，但是不應該讓用戶困惑。
在很多復雜的傳統線下業務數字化轉型的過程中，為了讓產品易于使用，設計師需要深入到一線，去了解真實用戶在線下業務場景中是如何處理日常任務的，在流程線上化過程中也需要遵循這樣的業務流程，這樣能夠讓用戶更快上手，而如果我們在設計過程中不去參考用戶在線下的操作場景，按照自己的想法去意測用戶的行為，這樣設計出的產品背離了用戶的心理模型，缺乏內在邏輯，會讓用戶感到混亂困惑，陷入深深的麻煩。
基于產品本身功能需要，我們可能無法很主觀的去降低產品的復雜度，這就需要我們在進行產品設計時花費更多的心思，通過對業務流程、頁面布局、信息呈現上的調整與設計讓產品變得清晰，不讓用戶陷入困惑。如下圖的關于表單編輯器的A\B兩種設計，用戶在編輯器內完成一系列針對表單的編輯、配置操作，然后發布表單。方案A中將這些表單編輯配置項通過tab進行排列，這種方式結構簡單，但是擴展性較差，過多的欄目也容易讓用戶陷入困惑，不清楚需要完成哪些配置項才能進行發布。方案B中采用了步驟導航加側欄導航的雙層導航結構，在步驟導航上給出完成表單編輯配置的主要步驟，在大的步驟下用側欄導航承載小的編輯項，結構清晰，且能夠對用戶編輯表單提供一定的幫助指引。雖然兩種方案信息內容上都一致，視覺觀感上甚至方案B更為復雜，但是方案B在這里可能是更合適的方案，因為方案B在配置流程的指引上更為清晰，也更貼近用戶心理模型，即使沒有使用過在線表單的用戶也能理解產品流程，因而用戶能夠更容易的完成表單配置并發布表單。
我們在使用產品時，都會有一個大概的心理預期，會認為某一類型的產品會較為復雜，某一類型的產品會相對簡單。為什么我們會有這樣的認知呢？是因為我們知道這些產品大概有哪些功能，而這些功能就決定了產品的復雜層度。產品的復雜程度由產品的業務與功能決定，而不是依照設計師的自我喜好，像如淘寶、京東這類的購物網站、擁有著很多的欄目，所以淘寶、京東的界面相對來說較為復雜；而像百度這樣的搜索引擎功能相對來說比較簡單，所以界面設計相對簡單干凈。
我們可以容許一個功能強大的產品設計得相對復雜，但是一個功能簡單的產品設計得復雜難用就是一個災難。作為設計師我們需要根據產品的實際需要來進行設計，即不過度設計，也不執著于追求簡約，而是基于需求恰到好處的進行設計。
復雜的產品會有好的用戶體驗嗎？答案是肯定的，用戶體驗的好壞與產品是復雜還是簡單并沒有直接的關系，很多時候復雜的產品也能帶給我們良好的用戶體驗，在互聯網產品中，我們可以看到很多復雜的產品，這些復雜的軟件產品，一點點的改變著我們的生活與工作方式，讓我們生活與工作變得便捷與高效。
首先可以看看我們的國民級電商應用淘寶，乍看淘寶的界面，可能會覺得十分復雜，甚至會給人一種眼花繚亂的感覺，但是包括我在內的許多人仍然十分喜歡逛淘寶。淘寶內除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際，做社區團購的淘鮮達，專做拍賣的阿里拍賣等數十個板塊，業務繁多，功能復雜，但這幾乎很難改變，因為之所以做這些業務和功能背后都有著商業上的考量。從交互設計的角度看，雖然淘寶的業務和功能繁多，卻有著清晰的布局、信息對齊、內容組織，產品盡管復雜，但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿，貼近用戶的心理模型，用戶容易了解產品功能、容易與之交互，整體上有著良好的用戶體驗。
又如我一直在使用的一款筆記軟件Notion，Notion相對于印象筆記、有道云筆記而言更為復雜，需要花費一定的時間成本學習才能夠從容上手使用，但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前，甚至都不會想到會出現在一款筆記產品里面，如甘特圖，多維表格等，這類功能一般出現在項目管理類軟件中。而Notion塊結構的布局模式，讓筆記能夠自由拖拽，擁有了極強的自由度，用戶可以很自由的用各種各樣的形式來記筆記，要是你肯再花一些心思，你甚至可以在Notion內搭建一個個人專屬網站來記錄的學習知識，打造個人專屬知識庫。將我們習以為常的線性筆記思維，轉變成縱向思維，甚至是網格狀思維。Notion無疑是復雜的，但是這樣做是為了給用戶提供的強大功能和極高的自由度，這些功能恰恰也切合了用戶的需求，創造了一種全新的筆記體驗，帶給用戶愉悅的使用感受。
簡單是產品追求的最終形態嗎？其實未必，很多時候產品設計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設計，不可避免的就需要隱藏一些信息或者拉長操作路徑，這是一個權衡的過程，我們在做設計時也會經常面臨這樣的抉擇，是追求視覺上的簡約美觀還是信息傳達準確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要，人們對于美的事物往往更有耐心，也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應用而言，準確的傳達信息，幫助用戶進行判斷，頻繁使用的功能設計得更高效便捷，這些點能帶給用戶更實際價值，也是我們在設計產品時應該優先考慮的點。
特別是在一些專業性的軟件中，如果我們為了追求簡約而弱化或者省略掉一些關鍵信息，還有可能會導致用戶錯誤操作的出現，造成嚴重的后果。試想一下當你在使用軟件編寫一個計算字段時，軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例，導致你因為書寫上的不規范使得計算結果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產品會如此難用，為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發生。
前面我們了解了關于復雜的定義，認識了復雜與困惑之間的區別，也明確了在B端產品中復雜或許難以避免，復雜是出于實實在在的業務的需要而非某位設計師的錯誤喜好，既然復雜無法避免，我們就應該學會與復雜共處，管理與馴服復雜。那么如何與復雜共處呢，有一些策略或許可以給予我們一些思路。
復雜與困惑的本質區別在于復雜的背后隱藏著規則與邏輯，而困惑缺少這樣的規則與邏輯，讓人無法預測與揣摩，對應到軟件產品的設計，一款成功的優秀的軟件產品，應該是易學易用、能夠滿足用戶預期，用戶能夠直觀的理解產品的流程與主要功能，并通過產品實現自己的目標。那么具體到軟件的設計上我們應該怎樣做呢？
這里可以看看我們團隊正在使用的研發管理工具TAPD，TAPD是一款敏捷研發協作工具，凝聚了騰訊研發方法及敏捷實踐精髓，其中敏捷開發的方法就是TAPD的內在規則與邏輯，有過敏捷開發經驗，理解敏捷開發流程的的開發人員能夠快速的上手使用TAPD，對于不了解敏捷開發的開發人員也可以通過產品幫助中心學習敏捷開發思想，進而理解產品的功能與流程，因此雖然TAPD功能與頁面結構相對復雜，但是基于對敏捷開發的認識用戶還是能從產品復雜的功能界面中摸索出一條操作路徑，實現自己的目標。這就是產品擁有內核思想以后能夠帶來的直觀好處，將原本零散的功能點通過特定邏輯鏈接成操作流程，幫助用戶更好地理解與使用產品。
相同的在我們公司自己的一個項目中我們也運用了同樣的方法，在我們公司之前研發的一款crm產品中，為了給用戶提供最佳的銷售實踐，幫助用戶更快上手使用我們的產品，我們在設計產品時尋找了硅谷藍圖團隊做了顧問咨詢，并依照硅谷藍圖的銷售轉化路徑來構建我們的產品體系，確定產品功能，梳理產品中的業務流程。并希望在以后為客戶做實施的過程中能夠將硅谷藍圖的銷售方法一起帶給用戶，讓用戶能夠更好地使用我們的產品，實現產品的最高價值，為中小企業銷售團隊賦能。
通過前面兩個案例其實我們可以感受到，當一款復雜的產品有了內在的規則與邏輯以后，用戶理解和使用我們的產品會變得更順暢，用戶不會迷失在茫茫的功能之中，通過理解規則與邏輯，用戶能夠對自己操作結果有一個大概的預期，而不是處于困惑狀態，作為設計師的我們也可以將這種規則邏輯作為我們設計的引導，讓我們的設計更為系統和有條理，讓產品不再是一堆功能的堆疊，各自為戰。
復雜是用戶的一種心理感受，用戶覺得產品復雜除了產品本身結構信息復雜之外，也是因為產品在設計上沒有貼合用戶的心理預期，用戶很難理解產品的流程與交互，所以貼近用戶心理進行設計就顯得尤為重要。這里我們需要先了解三個概念，實現模型、表現模型和心理模型，三個概念的釋義如下：
實現模型：產品是怎樣工作的
心里模型：用戶認為產品是怎樣工作的
表現模型：通過設計來讓用戶認為產品是怎樣工作的
表現模型越接近心理模型，用戶就越容易了解產品功能、容易與之交互。表現模型越接近實現模型，用戶越難理解產品，產品就越難使用。復雜產品在用戶體驗過程中的痛點在于用戶需要花費時間學習或培訓之后才能了解產品的運轉機制，很多B端產品在設計時更多的偏向于實現模型，用戶在使用產品的過程中會發現很多地方的交互和自己心理預期并不一致，使用過程中會遇到很多的阻礙，影響整體的使用體驗。對于一款復雜的產品而言，我們需要讓我們產品的表現模型更接近于用戶的心理模型，這樣用戶能夠更容易了解產品的功能，并與之交互。
大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息，里面是一堆的專業名詞，看得人一頭霧水。這時候我們能做的只有默默的打開百度，去了解彈窗里面講的內容究竟是什么，了解后才明白原來這樣，然后按照百度上操作步驟一通操作，僥幸解決了問題。但是當下次我們遇到相同問題時，可能還是不知道如何解決，無可避免還是需要求助百度。這個就是表現模型貼近與實現模型會帶給用戶的困擾，用戶不是專業的開發者，他們不了解也不需要了解產品背后的實現邏輯，這對用戶而言是沒有價值的，給予用戶這些信息不能對用戶起到預想的幫助作用。貼近實現模型進行設計會讓用戶與產品交互變得困難，變相的是在人為的增加產品的復雜度，與復雜共處，我們需要學會貼近用戶心理進行設計。
復雜的產品往往功能、頁面繁多，如果頁面內的視覺元素以及交互各自為戰，那么放大到整個產品就是一個災難，不僅是產品給用戶感官上不統一、整體性差，過多的交互模式也會增加用戶的學習與記憶成本，用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑，對用戶使用產品造成困擾。針對這個問題，現在越來越多的公司開始通過搭建組件庫的方式來規范自家產品內的視覺與交互，一個規范完整的組件庫的確能夠在很大程度上解決產品在視覺與交互上的一致性問題，通過模塊化解決方案，也能降低冗余的生產成本，實現產品快速開發。因此很多人也認為搭建好組件庫就能一次性的解決產品體驗一致性問題，但實際上就算一個產品有了一個自己的組件庫，依舊還會遇到體驗上統一性問題，這是為什么呢？
在原子化設計理論中，粒子是構成頁面的最小顆粒，粒子構成簡單組件，簡單組件到復雜組件，再到區塊、頁面。雖然用組件能去構建頁面，但是還會遇到頁面結構、交互不一致的問題，設計師各自使用組件去搭建并不能提升我們的效率和解決設計一致性的問題，在末端設計并沒有做到約束。因此我們在構建好組件以后還需要繼續抽取出了頁面級的組裝結構和交互模式。
這里我們拿B端產品中常見的列表頁來舉例，縱觀所有后臺列表頁面，抽取后無非就分為這么幾個區域。不同的業務可以通過基礎組件和樣式定義符合自己業務線的子模塊。比如列表頁中的篩選區，在不同的業務場景下，對篩選器的需求也各不相同，簡單的可能只需要使用標簽選擇就能夠完成篩選，復雜的可能添加很多的篩選項甚至選項之間還有且或關系，我們需要根據實際的業務場景設計適合的篩選器，但是需要注意的是一個產品中用到的篩選器形式不應太多，我們需要抽取歸納出三四種篩選器形式去覆蓋我們產品內所有的篩選場景。來保證產品內不會出現各種相識卻有各不相同的篩選器。
B端后臺產品中比較常見的還有表單，我們可以歸納出產品內可能會使用到的表單類型，然后定義出具體的框架結構與交互，在具體的設計過程中在根據實際情況選用不同的表單區塊。
一種常見的信息錄入以及信息展示表單，這種形式是我們最長用。
分布表單適用于信息錄入項以及信息展示項過多，在一個頁面內已經不能合理清晰的組織傳遞信息，或者表單內容的錄入方式或者展示方式存在較大差異，不適宜在一個頁面內進行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。
組合表單因其結構能夠承載更多的信息，每一個欄目都可以承載一個獨立的表單頁，有效的管理信息。
很多時候我們也會用彈窗來承載表單，好處是交互銜接流暢，不用跳頁。
將產品中類似的區塊做成最佳的交互模式范例，能夠最大的程度的規范我們產品中的交互，這樣才能真正的實現產品體驗上的統一，化繁為簡，讓復雜的產品也能夠調理清晰，上手簡單容易。在面對復雜的系統級軟件時，在統一組件樣式的基礎上還應該統一產品內的交互模式。
復雜的產品頁面內信息往往都特別繁多，如果不做好信息歸納，用戶將很難把握住重點內容，信息獲取效率低下，十分影響用戶的使用體驗，所以信息的強弱的整理十分重要，那么什么樣的信息是對用戶而言重要的信息呢？
信息設計大師愛德華·塔夫特認為優秀的視覺設計應該是“將清晰的思考視覺化”，他還認為只有充分理解觀看者的“認知任務”及一些設計原則才能設計出優秀的產品。
如何找到對用戶真正重要的信息需要借助到產品設計中一個十分重要的工具--用戶模型，通過調研的來得用戶模型是對于我們產品客戶的抽象歸納，通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內容該重點突出，哪些內容相對不是那么重要可以弱化處理，通過對于頁面內容強弱的劃分，用戶能夠更快的獲取到對自己有用的內容，盡管頁面仍舊復雜，但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗，幫助用戶高效的處理任務。
復雜是產品的本來特性，本身不含褒貶，但是如果復雜不加以控制，讓其發展為困惑與混亂，這對于一款產品而言絕對不是一件好事情，這樣即使產品功能上很優秀，用戶也無法長期忍受，一旦市場上出現替代產品，那么忍受已久的用戶也將拋棄產品轉向體驗更好的新產品。
曾經我也是一個極簡主義的追捧者，但是經歷過越來越多的設計項目，我開始發現某些產品復雜性是必需的，將產品做得簡單并不是其核心訴求。真正需要處理的問題也不是復雜，而是混淆的狀態和由此產生的無條理性。解決的方法不是簡單的去除幾個界面元素，讓其在視覺界面上變得簡潔干凈，而是要讓產品擁有內在規則、一致且能夠被理解。
文章來源：站酷 作者：Yone楊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
著：[英] 賈爾斯·科爾伯恩
譯：李松峰
人民郵電出版社
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. 梳理知識框架，記錄閱讀收獲、心得，本身就是一個加深理解、溫故內化的過程。
2. 摘錄重要知識，存儲在數字媒體上，方便隨時按需查閱。
3. 鍛煉思維和表達。
百利無一害，來吧，走起。
本書講述了一個產品價值觀和四個策略。
一個產品價值觀：作者崇尚簡單體驗的產品設計。簡單的產品更容易制造 (成本也更低)，也更容易使用 (市場也更廣)
① 這里的產品指數字產品或實體產品。
② 本書主要考慮大多數用戶 (主流用戶) 的體驗。
四個策略：刪除、組織、隱藏、轉移。本書的核心內容就是講述如何通過這四個策略（我理解就是方法論）設計大多數用戶喜愛的簡單體驗。這幾個策略適用于簡化功能和內容。
1. 知識原理很多都是相通的
① 本書的刪除策略與奧卡姆剃刀
奧卡姆剃刀：“如無必要，勿增實體”。講的也是簡單性原則。
他說：“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情?！?講得真好，不能贊同更多。
② 組織策略與親密性原則
親密性原則：彼此相關的項應當靠近，歸組在一起，成為一個視覺單元。——《寫給大家看的設計書》Robin Williams，非常棒 推薦
組織策略與親密性原則講的都是正確組織信息的方法論。
③ 簡單與別讓我思考
別讓我思考 (可用性最重要的原則)：你的目標應該是讓每一個頁面或屏幕都不言而喻，這樣的話，普通用戶只要看它一眼就知道是什么內容，知道怎么使用它。即他們不需要思考就能明白?？捎眯允顷P于人，關于人們如何理解和使用產品的，它和技術沒有關系。技術日新月異，人本身的變化卻非常緩慢?！饵c石成金》史蒂夫·克魯格，很棒 推薦+1
2. 凡事過猶不及。
書中有一個案例驚嘆不已，講的是東京蘋果專賣店，沒有按鈕的電梯 (電梯內和外都沒有操控按鈕)，自動在每一樓層?？?、自動開和關門 (乘客干預不了)。置用戶于完全失控的環境中（要是深夜一個人乘坐，估計得嚇不活了）。難以置信，誰能想到以優質體驗設計征服世界的鼎鼎大名的蘋果，居然還有這種反人類的逆天設計！
3. 這本書的閱讀體驗跟《寫給大家看的設計書》極相似
① 簡單、輕松、通俗易懂兩者都為讀者創造了簡單、輕松的閱讀體驗。把知識融入情境、故事，以圖示意，短小的一篇一篇像在和你講故事，娓娓道來、言之有物、簡明扼要、通俗易懂。
② 知識框架扁平、濃縮為極簡，過目難忘《簡約至上》把全書核心凝煉為：刪除、組織、隱藏、轉移?！秾懡o大家看的設計書》將復雜的設計原理凝煉為：親密性、對齊、對比、重復。合上書，就能回憶起來，太簡單又太深刻，真的想忘記都難。
4. 好書亦師亦友
“雖然這世界上不能改變的東西很多，但眼前的設計還是有很多簡化的途徑可循?！薄ⅰ澳隳茏龅健?.. 像不像一個智慧溫暖又真誠善良的朋友在不斷的給你信心和鼓舞？
(小聲說，我也喜歡)
以我淺薄有限的認知來看，人們喜歡簡單不僅因為簡單順應人性，還因為簡單帶來高效：
① 簡單順應人性簡單意味著不用思考，以現有的認知水平一看就明白，在人的舒適區，啟用的是人低耗能自動模式，是本能來的。而復雜的事物，如思考、學習、鍛煉、做一件難的事，都是更多的消耗人的腦力、體力、意志力、自控力、耐心、時間，都是調用人的高耗能模式，所以復雜這個東西本質上是反人性的。
② 簡單帶來高效不管是工具任務型產品還是內容型產品，用戶使用產品的邏輯路線是一樣的，都是經由認知 -> 決策 -> 行動 -> 達成目標；如果簡單就會：認知快 -> 決策快 -> 行動快 -> 高效達成目標；所以，簡單是大多數用戶的剛需了。
1. 越復雜或少用的知識，忘記就越快。
2. 簡單源自專注。明確自己的目標，更容易迷途知返。
3. 解決問題前，先搞清楚狀況。糾結于某個設計時，退一步想想：“用戶在這里真正想干的是什么？” 聚焦用戶。
4. 共識：把所有利益相關方的目標都統一到最終用戶身上，通過共識構建愿景。然后，阻力和爭斗就會減少。
怎么讓利益相關方聽自己的？答案是必須理解他們的想法。
先從傾聽他們和理解什么對他們最重要開始。把匯總的意見恰當地反饋給他們，他們會知道你已經明白了。在感覺被人傾聽后，他們才會樂意敞開心扉。
“我也希望看到最適合用戶的設計，我們一塊看幾個，看看是否可行。”
不要嘗試說服別人，聽他們說，讓他們自己判斷，讓他們自己承認而不是回避問題，然后再去尋找解決他們問題的方案。
5. 產品使用環境是觀察用戶的最佳地點，必須使軟件設計符合環境需求。你的用戶體驗應該簡單到不受這些干擾的影響，能夠在人們被打斷的間隙生存。
6. 為主流用戶 (大多數用戶) 而設計，忽略專家型用戶。
7. 體現品牌特征① 實用性——這個品牌能做什么對我有幫助的事情？(如讓飛行更簡單)② 這個品牌給了我什么感覺？(如充滿活力，好玩)③ 這個品牌崇尚什么？
8. 簡單就是讓用戶感到自己在掌控一切。你的設計不能跟這種掌控的感覺有什么抵觸，而是應該放大這種感覺。
9. 設計之所以會變復雜，通常是因為某些不重要的步驟擠占了核心特性。關注用戶行為 (而不是你的設計)，并且從用戶的視角把它描述出來。
10. 在研究某個問題的時候，你需要把它轉換成一種認識。故事是描述認識的一種好方式。與一大堆需求描述相比，故事更容易讓讀者明白什么重要和為什么重要。故事應該用三言兩語把核心體驗表達出來。
11. 極端的可用性
① 任何人都可以使用
② 毫不費力的使用
③ 瞬間響應
④ 一目了然
⑤ 始終工作
⑥ 不出錯
⑦ 恰好夠用的信息
⑧ 在混亂無序的環境中工作
爭取你不可能達成的目標有一個重要的好處：保持正確的方向。
12. 堅持不懈是達成簡單最重要的一步。
“乍一看到某個問題，你會覺得很簡單，其實你并沒有理解其復雜性。當你把問題搞清楚之后，又會發現真的很復雜，于是你就拿出一套復雜的方案來。實際上，你的工作只做了一半，大多數人也都會到此為止……但是，真正偉大的人還會繼續向前，直至找到問題的關鍵和深層次原因，然后再拿出一個優雅的、堪稱完美的有效方案?！?——史蒂夫·喬布斯
13. 簡化意味著改變，而改變始終意味著痛苦。多數人會不惜代價避免痛苦。收集需要改變的證據很重要。
14. 挑出正確的點子，確保能夠得到很好的執行。
刪除：通過刪除來簡化設計，刪除所有不必要的，直到減無可減。
15. 刪除雜亂的特性可以讓設計師專注于把有限的重要問題解決好，而且也有助于用戶心無旁騖地完成自己的目標。
16. 不要等著別人不分青紅皂白地、無情地刪除最有意思的功能。要總攬全局，保證只交付那些對用戶體驗而言真正有價值的功能和內容。
17. 體驗的核心是最能打動用戶的東西。找到它，刪什么留什么就一目了然了。能夠消除用戶挫折感的功能同樣也會受到歡迎。
18. 刪除殘缺的功能、導致出錯的功能、不必要的功能
19. 如果一個小變化導致了復雜的流程，就應該退一步去尋找更好的解決方案。
20. 錯誤：即使非常小的錯誤也會讓用戶煩惱。消除錯誤是簡化用戶體驗的重要途徑。無論顯示什么錯誤信息，好像都沒有那么友好、親切和簡單。
21. 不要以功能的多寡來認定產品的價值，而應該看產品能否滿足用戶最高優先級的目標。
22. 刪除視覺干擾因素，讓用戶注意力保持集中。界面中的各種小細節會增加用戶的負擔、打斷用戶的思維，會像公路上的減速帶或坑坑洼洼一樣降低用戶的效率。
23. 太多選擇容易讓人反感。
24. 清除減速帶：選擇聰明的默認值可以減少用戶的選擇。
25. 刪除視覺混亂和噪音，意味著人們必須處理的信息變少了，能夠把注意力集中到真正重要的內容上。
26. 刪減文字、精簡句子：重要的內容“水落石出”，消除了分析滿屏內容的麻煩，用戶更有掌控感，把文字變得簡潔、清晰、有說服力。
27. 簡化對話，長話短說。一次交互就是用戶與設備之間的一次對話。
28. 砍掉時間。砍掉功能和內容可以節省時間，因為決定少了、按鈕少了、思考少了、閱讀少了。要在對用戶真正重要的事情上節省他們的腦力。
組織：通過組織來簡化設計
29. 通過組織的方式簡化設計，要點在于只強調一兩個最重要的主題。
信息布局、分類、排序、搜索、使用顏色分層 (地鐵線路圖)，找到組織信息的正確方式，可以極大的簡化用戶體驗。要想知道設計是否成功，可以瞇起眼睛來觀察屏幕，看是否能區分出不同的層。
隱藏：隱藏不重要的，避免分散用戶注意力
30. 無論隱藏什么功能，都意味著你在用戶和功能之間設置了一道障礙。這個障礙可能是遙控器上的塑料倉門，也可能是網站上一連串的點擊。為了避免給用戶造成不必要的麻煩，必須仔細權衡要隱藏哪些功能。
31. 不常用但不能少，如個性化設置不會經常改變，因此非常適合隱藏。
32. 隱藏所有需要隱藏的功能，在你需要時出現在合適的位置上。
33. 細微的線索足以提示隱藏的功能。
轉移
34. 轉移合適的功能到其他設備上、系統組件中，向用戶轉移。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
“先有思想，后有設計”設計師自身應該逐步建立一套自己的設計體系，需要對設計方法論有專業的認識和理解。一直想收集整理日常說到的各類設計理論知識，也希望通過整理和總結能有新的收獲，加深記憶。
格式塔心理學是視覺排版及設計中應用比較廣泛，主要指人的眼腦作用是一個不斷組織、簡化、統一的過程，正是通過這一過程，才產生出易于理解、協調的整體。格式塔的理論核心是整體決定部分的性質，部分依從于整體，人腦知覺到的東西要大于眼睛見到的東西。
古登堡法則是又稱對角線平衡法則，由14世紀西方活字印刷術的發明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限：
1.第一視覺區(Primary Optical Area)：左上方，讀者首先注意到的地方。
2.最終視覺區(Final Optical Area)：右下方，視覺流程的終點。
3.強閑置區(Strong Follow Area)：右上方，較少被注意到。
4.弱閑置區(Weak Follow Area)：左下方，最少被注意到。
通過古登堡法則我們知道用戶的視覺中心往往在頁面的左上方，而結束瀏覽時視線往往落在右下角，所以合理利用這個法則可以幫助用戶更好地獲取內容并采取行動。自上而下的界面設計，自左向右的界面設計，頁面中通常將操作按鈕放在右下角。
菲茲定律：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大?。▓D中的 D與 W），用數學公式表達為時間 T = a + b log2(D/W+1)。意味著小而近的目標用戶不需要花費太大的精力就能輕易觸及或者關注，相反小而遠的目標則需要花費用戶更多的時間和注意力，菲茲定律闡述的是效率相關的問題
思考結論：1.必要時讓按鈕更大，2.讓相關信息更近
希克定律：一個人面臨的選擇(n)越多，所需要作出決定(t)就越長。用數學公式表達為反應時間T=a+b log2（n）。在人機交互界面中選項越多，意味著用戶作出決定的時間越長。如比起2個菜單，每個菜單有5項，用戶會更快從有10項的1個菜單中做出選擇。席克定律在產品應用中主要用于通過合理的選項及功能規劃提高用戶的決策及完成任務效率
應用場景：
1.分類編組，提高決策效率
2.過濾選項，隱藏/刪除低頻率功能選項
3.分布執行，提高流程轉化率
米勒定律：頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。米勒定律在產品應用中主要在于合理的信息布局和信息處理可以提高用戶對信息的獲取效率和記憶難度。
應用場景：
1.控制數量，減少用戶選擇
2.信息分段，輔助用戶記憶
3.流程分步，優化用戶操作
4.信息排序，引導用戶記憶
臨近性原則：當對象離得太近的時候，意識會認為它們是相關的。在交互設計中表現為一個提交按鈕會緊挨著一個文本框，用戶會理解為按鈕于文本框有關聯性。換句話說當相互靠近的功能塊是不相關的話，就說明交互設計可能是有問題的。
泰斯勒定律（復雜守恒定律):該定律認為每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
應用場景：
1.合理縮短用戶使用路徑，在設計中可有適度的簡化縮短操作流程但是到一定的程度可能會影響整體的功能和價值。
2.將固有的復雜性從一個地方轉移到另一個地方，例如搜索中歷史記錄，信息商品的收藏等功能，實際都利用了此定律。
3.將功能進行拆分，一次性無法降低復雜度的功能可以進行拆分。
奧卡姆剃刀原理：奧卡姆剃刀原理只承認確實存在的東西，認為那些空洞的普遍性的東西都是沒有用的，應該剔除掉，概括起來就是“如非必要，勿增實體”實際上無論實體、視覺或認知上，多余的負擔都會削弱表現效能，去除解決方案的雜質，讓最后的設計會更嚴謹、更純粹。在設計蘋果產品的時候，喬布斯一直堅持認為：為了實現一個功能而造出一堆復雜的東西，沒用，簡單的才最好。Google專注于搜索，主頁上也只有搜索，其他搜索引擎就沒有做的這么徹底，這也是為什么Google用戶量最多的原因之一。
防錯原則：最早應用于汽車制造領域中，工程師新鄉重夫（豐田精益生產莊家）于上世紀60年代，創造了這個理念。防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽，例如硬件設計上的 USB 插槽，醬油瓶口。防錯原則有四項基本原則包括，輕松原則，簡單原則，安全原則和自動原則。
狀態可見原則：保持界面的狀態可見，變化可見，內容可見。讓用戶知道發生了什么，在適當的時間內做出適當的反饋。 比如用戶在網頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應即時給出反饋。
貼近場景原則：用用戶的語言，用詞，短語和用戶熟悉的概念，而不是系統術語。遵循現實世界的慣例來呈現信息，功能操作符合用戶的使用場景。進一步來說貼近場景，也是要求在設計的時候要考慮，產品面對的人群和人群所在的環境，比如，同一款產品在不同地區呈現形式需要考慮文化差異。不同屬性的產品例如兒童教育和辦公產品，需考慮使用人群的特性。
可控原則：操作應該是可逆的，可以支持“撤銷”和“重試”，以此來離開“非預期” 的狀態，簡單來說就是不要讓用戶走進死胡同，提供出口和退路。例如微信發送消息可以撤回可重新編輯等。很多web端的表單，文章發布等都支持自動保存，很大程度上避免錯誤或者意外操作。
一致性原則：遵循平臺的慣例。也就是，同一用語、功能、操作保持一致。
防錯原則：核心觀點是如何有效的在用戶出錯之前就盡量避免錯誤發生，在互聯網產品中，比起回退修改錯誤信息或者操作更好的是，用設計防止這類問題發生。很多轉賬功能中輸入數字后會顯示千萬等說明文字，用戶輸入卡號后會自動識別關聯銀行，避免用戶出錯。
1.限制操作范圍和條件。例如很多手機登錄等交互中默認設置手機號為11位避免了用戶出錯，提高了易用性。
2.對有風險的操作進行二次確認。
易取原則：盡量減少用戶對操作目標的記憶負荷，動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。 很多產品搜索功能的關鍵詞聯想搜索，即使用戶不能完全記住關鍵詞也能輕松搜索。
1.讓用戶選擇而不是輸入，選擇和輸入的操作成本相差巨大，產品應給給用戶提供選項，讓用戶可以直接選擇，而不是自己輸入，比如填寫收貨地址。
2.自動讀取、記錄信息、減少操作路徑。在用戶使用產品的過程中，會產生一些需要記憶的內容、或者操作路徑，這個時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里
高效靈活原則：為大多數用戶設計，兼容少部分特殊用戶。允許用戶進行頻繁的操作，更加便捷靈活的代碼和反饋。各大產品中常使用的搜索功能，提供歷史搜索功能。微信朋友圈發布中選擇可見/不可見人群時，提供上次選人記錄。
1.提供快捷入口，例如支付寶的首頁可以自主配置常用的小程序，微信下拉對話頁面可以快捷進入歷史小程序
2.方便用戶重復操作，例如外賣平臺中自動定位常用地址，訂單中可以再來重復的一單等
3.預知用戶操作縮短操作路徑，例如截圖后打開微信對話框會關聯截圖發送
簡約原則：審美和簡約設計，頁面不應該包含無關緊要的信息，頁面的每個額外信息都會降低主要內容的相對可見性。
容錯原則：錯誤信息應該用語言表達（不要用代碼），較準確地反應問題所在，并且提出一個建設性的解決方案。比如404。
人性化幫助原則：有必要提供幫助和文檔。任何信息應容易去搜索，專注于用戶的任務，列出具體的步驟來進行。幫助性提示最好的方式是：1、一次性提示；2、常駐提示；3；幫助文檔。
通過這些方法的總結歸納，我發現其實很多原則原理我們在平時的設計中有意無意的總會用到，在實際工作中設計很大程度上是做選擇，哪一種是對產品對用戶最優的方案，有的設計師可以通過自己的經驗作出選擇，沒有經驗的可能需要多多理解這些原則原理，交互設計之父阿蘭·庫珀說過“除非有更好的選擇，否則就遵從標準”只有反復的遵循使用標準才能建立自己的一套設計方法論，讓工作更加得心應手。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
來源：站酷
作者：有魚MUMU
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“少即是多”是經常掛在嘴邊的話題，在設計過程中，設計師們都會想盡一切辦法去簡化交互流程、組件元素及各種設計屬性，讓用戶使用起來更簡單。當產品簡化到一定程度，就必須要面對其不可簡化的復雜性。
諾曼曾說過 “復雜是世界的一部分，但它不應該令人困惑 ”，如果復雜性是合理的，我們應該學會如何去管理復雜，考慮好復雜的問題在流向用戶后以何種方式處理，篩選控件就是用戶自行處理復雜信息的方式之一，只要是符合用戶行為做出的設計，將應有的復雜以篩選的形式呈現給用戶，讓其自行決定，用戶反而會樂意接受。
篩選控件的使用頻率非常高，本文根據筆者對各類篩選控件的拆解及自身經驗進行分總結，整理了在移動端中常用篩選控件的類型、使用場景以及設計思路，幫助大家在設計中更好的選擇適合自己產品的篩選控件。
一、現實生活中的篩選
二、篩選功能的重要性
三、常見的篩選類樣式
四、篩選的幾個維度
五、篩選功能設計準則
六、總結
在日常生活中，我們天天都在跟篩選打交道。設想一下，當你走進超市，在沒有任何分類指示的情況下，看到琳瑯滿目的商品是否會不知所措，答案是肯定的，且不論超市規模大小、商品的多少，相信沒有任何一個人愿意在不清楚的情況下花時間去找一個很可能不存在的商品，即便這點時間會很短。
道理還沒說完，大家都感覺自己很懂，可依然逃脫不了如今在各種形形色色的應用中找不到自己需要的功能而苦惱，那么這些應用又是誰設計的呢？答案就是「大多數人」。
換言之，如果我們能通過標識牌、平面圖指引（模糊查找），詢問服務員、記憶指引（精準查找），就容易很多，這些指引路徑就完全充當了篩選功能，至于通過什么方式，只能根據人們自身或現場條件自行選擇，能滿足自己的需求即可。在功能繁多、交互流程復雜的互聯網產品中也是如此。
在我們設計篩選控件之前，需要清楚了解什么是篩選，東施效顰不是什么明智之舉。篩選，即用戶根據自身需求、通過一個或多個特定條件，在已有的內容中快速找到滿足自己當前條件的信息，單獨呈現的同時、并將未滿足條件的信息暫時作隱藏處理，以便用戶完成自己的目標需求。
篩選也可以稱之為過濾器，是搜索框架的一部分。這里需要說明一點，篩選不同于搜索，它是系統結合用戶提出的條件，對內容進行規則性的查找，準確的說，用戶屬于被動，篩選出的結果在產品側「精準」、用戶側「模糊」；而搜索則是用戶通過明確的目標主動進行精準查找，要么直接找到自己想要的結果、要么對結果不滿意，搜索出的結果在產品側「模糊」、用戶側需要「精準」。說直接點就是，搜索直接查找出結果、篩選只是縮小查找范圍（并非絕對，也可以對搜索結果縮小范圍）。
在電商應用中，如果有目標的用戶更多使用的是搜索，那么沒有目標的用戶更多使用的則是系統推薦或商品分類，不管是哪種類型的用戶，前面雖然已經進行過一次范圍縮減，但下一步還是逃不掉要面對的海量商品，這時，不給用戶提供選擇上的便利，用戶很可能因瀏覽商品耗時過長、選擇性困難等原因扭頭就走，即便離轉化僅一步之遙，也無法避免用戶流失的問題。
增加篩選功能就能很好解決這個困局，用戶通過篩選、設置接近于目標需求的條件，縮短查找路徑，就能從海量的商品信息中快速找到符合條件的內容，大大降低了用戶的查找成本，節省了很多查找時間，用戶體驗得到很大程度的提升，由此可見，為什么要使用篩選，不言而喻。
1）系統定義篩選需求
方向性的篩選：用戶通過系統提供的多種類型進行頻道切換，還會存在多少子級，可定義為一級篩選。例如訂單列表（待支付/待發貨/待收貨/待評價），優惠券（未使用/已使用/已過期）等，用戶從已有的類型列表中選擇自己所需。
2）用戶自定義篩選需求
精細化篩選：當系統已提供方向性的篩選，用戶依然可從分類篩選出的結果中進一步細化。例如針對單個類型的商品列表自定義價格區間、發貨地、品牌...等，也可稱之為二級次篩選，相比一級篩選，其篩選的結果會更精細化，也更接近于用戶的真實需求。
（PS：系統定義篩選條件后，配合用戶自定義二次篩選條件以及排序功能，則更容易滿足用戶需求）
Tab式篩選條件大部分在操作前、操作中、操作后基本都會一直顯示，有橫向Tab和縱向Tab兩種，如新聞、視頻類型的應用大多使用橫向Tab，通過將不同的內容以大的方向、區塊進行分類，便于用戶隨時切換、篩選出不同的內容；縱向Tab更多則是在電商類應用中出現，且會存在多個子級，例如我們在京東購買「鼠標」，則需要在tab分類中依次找到「電腦辦公>外設產品>鼠標」進行篩選。
Tab類型主要以大的維度進行篩選，所篩選出的結果可能模糊且信息量極大，如果想要結果更加精準，則需配備其他類型的控件進行二次篩選。
操作中以蒙層的方式彈出，其他時候均為隱藏狀態。彈窗類型的篩選最大的優點是占用空間小，僅需一個入口，能在有限的彈出空間中從多個維度展示篩選條件，用戶選中或自定義對應的篩選項，即可快速篩選出自己想要的信息。
介于Tab式與彈窗式之間，篩選條件初始為隱藏狀態并提供一個入口。點擊后展開，期間不影響當前頁面的任何其他操作且一直處于展示狀態，需經過再次點擊才會將篩選條件隱藏。
基于自定義篩選條件過多，為滿足用戶個性化需求，點擊后會跳轉到新頁面操作多個條件進行篩選。相比前面提到的Tab、彈窗更為復雜，對篩選的要求較高。
高級篩選適合用在顆粒度很細的場景，為的是避開其他視覺元素的干擾，讓用戶更專注于當前頁面較為復雜的篩選條件，降低因受其他因素影響而出錯的情況。例如：在選擇汽車時，需要對服務、價格、級別、排量...等各種情況作出非常細致的選擇，這時用高級篩選就再合適不過。
篩選、排序組合方式算是商品列表中的標配了，尤其在空間資源有限的移動端設備中，能最大化的將多個控制條件一次性展示給用戶，在篩選出結果后再使用排序功能，便于更快找到想要的商品。例如美團、餓了么將篩選與排序控件形成組合，極大的提高了用戶篩選的效率。
單維度的篩選不管是設計還是操作都相對簡單，無需操作確定/下一步按鈕，觸發篩選條件后會就會更新信息列表，大家最熟悉的訂單系統（待支付、待發貨、待收貨...）即是單維度篩選。
另外，單維度具備短、明、快的特點，為方便用戶識別，單個標簽一般不超過5個文字，且語義明確，用戶不用任何思考就能快速理解。
當產品中的屬性過多，使用單維度篩選不僅會降低篩選結果的精準度，還可能會導致用戶因反復/重復無用的操作而產生挫敗感，已無法滿足用戶的需求。這時，需采用多維度篩選幫助用戶縮小查找范圍，讓其快速找到符合自己需求的內容。
多維度篩選條件一般以按鈕（單選/多選）、輸入框為主，有些還會以滑塊來控制數據范圍。設定好篩選條件需通過重置、確認操作按鈕，用來清空篩選條件或進入下一步。在移動端，因屏幕空間有限，一級篩選數量最好不要超過9個，如果太多，建議進行整合或并入二級篩選。
在多級篩選控件中，可以把當前篩選條件的上一級看成是篩選分類菜單，每個等級中可包含一個或多個單維度/多維度的篩選條件，移動端最多不超過3個等級。
從表面看，多級篩選與多維度篩選其本質是一樣的，但多級篩選會存在下一級或再下一級，而多維度會將所有篩選條件平鋪在空間中。當單維度、多維度篩選還是無法滿足用戶需求，多等級就能作為最好的延伸。
在設計篩選之前，需要思考用戶為什么要使用篩選、在什么樣的場景下使用篩選、以及如何滿足用戶的心理預期等，有了清晰的用戶需求，設計出來的篩選才能更好的幫助用戶滿足其需求。
以「餓了么」用戶點餐為例，使用點餐服務的用戶類型雖然很多，不過主力還是來自于辦公室白領、宅男/女這兩大用戶群體，有目標的用戶會從搜索、收藏、訂單記錄等入口直接去購買，但絕大多數用戶因長期點外賣的原因，“吃什么”就成了最大的問題，這時如果用戶還要“吃”，就必須得使用篩選功能，從Tab分類（模糊）到彈窗式篩選（精準）再配合排序功能滿足自己的點餐需求，得出結論：
1）一群不知道“吃什么”的白領、宅男/女用戶；
2）需要使用篩選功能解決自己“吃什么”的問題；
3）問題很快得到解決后，對結果及使用體驗非常滿意。
上面的案例可以看出，用戶想要在海量的信息中找到自身所需，從表面上看，最直接、真實的需求就是找到滿意的商品去下單。站在產品的角度并非如此，最應該解決的應該是效率的問題，這才是篩選的終極目標，不管用戶花多長時間，筆者相信都能找到想要的，但所花費的時間成本越少，滿意度就會越高，其產品的可信度、使用粘性、用戶體驗也隨之提升。
篩選并非千篇一律，不要一上場就來一波大眾化的篩選條件，很多APP首頁設計就是最好的例子，什么都不考慮，直接導航欄+輪播圖+金剛區+內容推薦...傳統的一套流程走下來，結果可想而知。
設計篩選功能時，不同類型的產品需要根據其產品定位、用戶目標以及使用場景來定義篩選條件，用戶需求是用來設定篩選條件范圍的決定因素。例如：購物類產品需要結合商品的銷量、評價、價格及知名度等，而新聞類產品側重于用戶偏好、點贊量、熱度值來提供篩選，方便用戶快速找到感興趣的內容。
在滿足上述兩個條件后也不能將篩選項一股腦的挨個排出來，即便是在同一個頁面內，也需要結合當前內容的屬性對篩選條件進行優先級排序，將用戶高頻使用的條件按先后順序依次排列，不重要的也可將其隱藏于某個入口。
以淘寶為例，在「手機」商品列表，篩選條件中首先看到的是品牌，其次是內存、容量...，我相信很少人不在乎手機品牌吧；而在「鋼釘」列表中，依次是價格排序、銷量...，品牌條件隱藏在了高級篩選中，試問，如果是你購買釘子這種實用性的商品，是在乎價格、還是品牌呢？
篩選功能旨在滿足用戶查找需求，通過縮短用戶選擇商品的范圍，節約查找時間，快速將符合條件的信息呈現出來，并讓用戶在這一過程中產生愉悅的使用體驗，以發揮產品的最大價值，從而增強用戶的使用粘性。
至于在設計中該使用何種篩選控件則取決于用戶需求和使用場景，設定符合需求的篩選維度及條件，且根據內容屬性做靈活變動即可，切記篩選的核心需求是通過簡單易用的方式來幫助用戶提高操作效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
整個報告分兩個部分，
一部分是調研概述，主要描述調研是如何進行的，包含：用戶方法闡述，調研對象說明，用戶畫像等，簡單清晰的告訴別人你數據是如何獲取的，增加后期問題及數據闡述的科學性。（還有一部分，就是關于調研涉及人員，可以在合適的時機帶一下是UED全員協作完成的整個過程的。）
另一部分是調研結論，我的描述思路是：總-分-總，先描述總結論，讓觀看報告的人對整體結論有個初步了解，然后詳細描述各模塊分結論，最后提出各模塊共性問題。
結論部分是整個報告的重點，所以前面的概述就簡單介紹清楚就好了，不需要占太多篇幅。
調研流程，確定標準，是匯報，也是邀功，調研本身就是個繁瑣的過程，我們把過程直觀的呈現出來，讓老板知道我們整個調研過程，前前后后做了哪些準備。付出了哪些努力，體現工作量的同時，也能體現我們的專業性，但是不是記流水賬，得有總結。
我把整個路程大體分了3個部分，第一個部分是調研前的準備，第二個部分是調研，第三個部分結果闡述。結果匯報，后期工作計劃，匯報很重要，調研做得再好，你的結果無法呈現，問題就沒辦法結論，那就只會停留在發現結論。
評估緯度是為了闡述我們從哪些緯度去收集答案的，想要驗證什么問題。
由于大部分人對調研都只是停留在問卷調查的層面，所以對樣本量的選擇有不理解，可用性測試主要是為了觀察用戶操作路徑及反饋，所以樣本量不需要太大，這個可以簡單的解釋下是如何挑選用戶的。
數據整理也是匯報的一部分，一方面，材料佐證我們做過的努力和準備，另一方面，數據存檔。
我們整個調研采用了錄音與錄音相結合，錄音是為了便于后期多人協作幫忙整理問題，錄屏是記錄用戶操作路徑，收集用戶使用過程中的卡頓，去挖掘卡頓原因，這是是我們做可用性測試的主要目的，這也是跟問卷調研最主要的差異。
在寫報告的過程中，我一直在想關于整體滿意度的結論，是放在第一部分還是第二部分，但是鑒于第二部分主要描述問題，所以思慮再三，還是把他放到了第一部分。
我們拿到各模塊的數據后，要怎么用著很關鍵，單個零散的數據是體現不出問題的，只有對比著看才能看出問題。
通過數據對比我們明顯能發現，付費用戶對產品的整體要求要比增值服務的要求高得多，畢竟不要錢的，好不好用無所謂，好用我就用，不要用我就不用。但是如果是用戶花錢了的，那他就需要考慮，我獲取到的服務和花的錢是否成正比，這也就間接確定了我們后面問題處理的優先級。
這里建議做個中場頁。
前面說過，問題描述采用的總-分-總的節奏，所以最開始描述了一下我們收集到的所有問題的概述，包含，總共多少個問題，已經分類類型的分類占比。
這里分享一個問題整理的表格，表格跟PPT的作用不一樣，PPT是為了匯報成果，獲取支持，表格是為了后續跟進落地，解決問題。
當然，先把問題整理出來也是為了更好的輸出PPT。
共享文檔可以讓更多人清晰的看到問題，因為匯報的效果比較好，老板給了明確支持，所以匯報后我們將表格發給了各個產品，與設計師配合，認領問題，給出優先級和排期計劃，整個過程推進的很順利。
分結論部分，主要通過用戶體驗地圖去描述用戶路徑，直觀闡述用戶使用過程中的情緒和痛點，右邊整理出來了需要重點關注的一些點。
用戶體驗地圖主要描述的是用戶發現，不一定是問題，屬于啟發類，可以為后期優化方案的輸出提供方向引導。
問題整理則是明確的已知問題描述。
各模塊可以根據實際情況去描述各自的問題，這里就挑了幾個典型的模塊舉例了一下，就不一一闡述了。
再來說一下，分結論講完之后，整理的共性問題。先說問題，再說涉及的模塊，體現問題的嚴重性。
到此，整個PPT就結束了，匯報完成后，老板就開始給各業務線下達任務了，就又回到了表格上，我們把之前的問題以界面緯度進行整理，跟產品確認優先級和排期計劃，并與老板就排期計劃進行了確認，然后責任到人，目前第一輪優化方案已經在陸續落地中，整個發現問題到推進落地的過程，還是比較順利的，
最近幾年以來，大家能看到B端設計趨勢已經越來越火熱，在B端設計中關于圖表的設計算是為數不多的視覺發揮點了。那么怎樣才能做好圖表設計，讓設計出來的圖表高大上，符合業務需求，讓業務方和總監對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！
應用設計越來越依賴數據驅動，對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表，但我們其實可以通過遵循一些簡單的規則來改變這個情況。
選擇錯誤的圖表類型，或默認為最常見的數據可視化類型，可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容，可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。
當使用水平條時，在基線的左側繪制負值，在右側繪制正值。不要在基線的同一側繪制負值和正值。
刪數據起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。
對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。
折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數據更新不頻繁時，這可能會導致混淆。
例如: 使用折線圖來代表年度收入，如果數據是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數字是未知的，所以可能會產生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。
平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數據，而且過粗的線會模糊真正的“標記”位置。
通常，為了節省可視化空間，當有兩個具有相同度量但大小不同的數據系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結論。
餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:
1）不要超過5-7片，保持簡單
2）可以將額外的最小段分組到“其他”切片
如果沒有適當的標簽，無論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。
將數據放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰。相反，添加黑色標簽能清晰的鏈接到每個部分。
在確定餅片秩序時，有幾種常用的方法:
1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列
2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列
同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖)，以確保最重要的數值占據最突出的空間，減少眼球運動和閱讀圖表所需的時間。
餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。
不必要的造型不僅會分散注意力，還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:
1）3D元素，明暗面
2）陰影、漸變和其他扭曲的多彩色
3）斑馬圖案，過多的網格線
4）過度裝飾，斜體，粗體或襯線字體
顏色是有效的數據可視化的組成部分，在設計時考慮以下3種顏色類型:一個定性調色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合，可以創建一個連續的顏色集。
發散調色板是兩個連續調色板的組合，中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。
看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調色板。
根據美國國家眼科研究所(National Eye Institute)的數據，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。
1）在調色板中使用不同的飽和度和亮度
2）把現有配色去色然后檢查對比度和可讀性。
確保排版能夠準確傳達信息，幫助用戶專注于數據，而不是分散用戶的注意力。
1）選擇易讀的字體，避免襯線和裝飾過度的字體
2）避免使用斜體、粗體和全部大寫
3）確保與背景有高對比度
4）不要旋轉文字
這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。
如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則?；谝讯x庫的設計將確保易于實現，并能提供大量交互想法。
幫助用戶通過改變參數，可視化數據進行探索。然后得出結論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數據表示的組合。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當設計師被迫待在家里時，終于能有時間去反思現有的設計并重新創造。無聊是藝術家最大的敵人，他們會盡可能地打破困局。
對我們來說，2021年相當困難。世界上最長壽的貓慶祝了它的34歲生日，這可能是發生的唯一一件好事，順便說一下，你會在文末看到這只可愛的小貓照片。
那么，2022年的UI/UX設計趨勢是什么呢？看看現在的情況，我們已經可以預測未來的設計趨勢，就像我們對2021年所做的預測一樣（回頭看非常準確）。
在本文中，我們將發現：
3D視覺設計師的內卷將會越來越嚴重
數據可視化的工作將變得越來越重要
服務的移動化還需要做出更多努力
scrollytelling 技術會越來越流行
舊的滾動是無聊的。如果你想吸引注意力，你就需要實現滾動敘事（scrollytelling）。（彩云注：這個技術的核心在于邊滾動頁面邊講故事）
《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。
它是一種敘事形式，可以在網頁和APP上呈現。想象一下，在一個網站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。
2022年，Scrollytelling將會出現在你看到的每一個流行網站上。
另一方面，scrolllytelling讓用戶真正去閱讀內容。你可以用動態文本讓他們產生興趣，比如谷歌的網站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:
Scrollytelling在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設計師創造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節。
所以，最好的網站不可能在2天內建成，需要更多的時間去打磨。
IAmBinadam令人驚艷的敘述設計
滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結果是值得的。頁面變成“活的”，每一秒都有新的事情發生，所以在閱讀時很難感到無聊。
那么移動端APP呢? Pure是一款約會應用（彩云注，這個應用在app store可以搜到，推薦大家安裝一個體驗一下，非廣告），它創造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時，它就會被激活):
Scrollytelling是為用戶而創建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網頁設計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設計出來。
如何在2022年做出一個還不錯的企業網站？你不會想告訴用戶你是“XX領域公認的領導者，該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。
最好不要用形容詞，而是用事實來說明:你有多少分支機構，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數據，你需要讓它不僅簡單，而且有趣。
數據可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結合。以下是IAmBinadam展示數據的方式:
通過去除數據集的復雜性，使信息更容易讓讀者感知。
不同級別的數據具有不同的大小，這樣用戶知道應該先從哪里查看
讀者可以很快注意到作者試圖通過圖片引出的結論?？紤]到如今人們消費的數據量巨大，那些干凈整潔的數字帶來的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據英國國家統計局的數據，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發生以來，得分已升至4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了4個小時。
人們壓力太大，卷的太辛苦，以至于不愿去看復雜的數據。
設計師做好數據可視化，以保持人們的注意力。記住，復雜的信息通常被忽略，因為讀者試圖節省他們的時間，更有可能使用滾動按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數據的方式
1）圖表和曲線圖
2）插圖
3）靜態信息圖
4）互動信息圖
Illustration by Ink Factory
一個好的圖表，或者任何其他形式的數據可視化，都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個原則：
1）展示數據的圖形元素與數值總數的比值應趨向于1。簡單地說，應該刪除一切不必要的元素，保持整潔。
2）充分利用好畫面空間。也就是說，需要將數據編排的更緊密
Graph by Hootsuite
3）客觀地描述數據。不要使用夸張的圖表，可視化數據可以看起來很酷，但真實永遠是更重要的。
根據We Are Social的數據，2021年有52.2億人使用手機，約占世界人口的66%。自2020年1月以來，手機用戶數量增長了1.8%(9300萬)，而手機聯網總數量增長了7200萬(0.9%)，到2021年初達到80.2億。
過去一年，社交媒體用戶的數量增長了13%以上。到2021年初，社交網絡上已有近5億新用戶注冊。根據App Annie的數據，Android用戶每天花在手機上的時間超過4小時。2020年，安卓用戶上網時長超過3.5萬億小時。
令人印象深刻的數字，是嗎？似乎到2022年，為產品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用？有以下幾點可供評估：
1）用戶主要通過移動設備訪問你的網站這是你應該了解的重要數據。
客戶和你在一起的時間越長，你就有越多的機會去吸引他們，了解他們的習慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）
2）幫助內部業務流程更加有效。
如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業務流程的移動應用。
如今，像這樣的手機應用使企業能夠執行越來越復雜和多樣化的任務，加快日常重復操作和文檔管理。
3）實現一些網站上沒有的新功能。
如果你認為APP能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發。問問自己的APP能提供什么新的商業機會？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。
4）競爭對手做的情況。
要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。
查看App Store和谷歌Play的統計數據。下載和評論的數量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要，那么你就容易被甩在后面。
5）復購率。
一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發送一個通知就能完成，成本更低。
在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。
6）促銷工具。
有了應用，你就不需要花錢設計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到APP，并分享有用的促銷信息。
開發手機網站比開發手機應用需要更少的工作量，這反過來可以降低整體推廣成本。
這部分是由于響應式設計的出現，它允許你根據打開網站的設備屏幕來調整網站。至于APP，它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。
一些設計師認為“前端驅動的網絡體驗”會是2022年的一個好機會，我非常同意!（彩云注：在國內，現在開發小程序的肯定越來越多了。）
我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設計師們就已經設計了很多3D圖像和動畫了。
Cardi B rhymes with 3D
3D技術已經在過去流行了很多年，但它不會很快消失。此外，我們預測3D圖形將變得更加多樣化和包容。
在過去的幾年里，3D藝術和動畫已經出現在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。
3D當然應該成為2022年最熱門的趨勢和預測之一，因為與經典動畫相比，逼真的3D形狀結合動畫總是引人注目的。
“從技術上講，通過3D更容易傳達更多內容，因為它比平面圖片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動性。"
許多設計師將3D對象無縫地“安置”在2D空間中。它允許創建更有趣的組合，也作為一個優秀的工作方法蘊藏著巨大的潛力。
烏克蘭政府網站用3D手模擬了黑客帝國
注意一點：在整合3D圖形等重量級內容之前，確保你的應用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D。或者兩者兼而有之?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設計師也需要保持關注。跟著趨勢走，易于放大自身價值。）
越來越多的公司在網站和移動應用中使用動畫，以提高用戶的沉浸感和體驗，使內容更有趣。
動畫是2022年重要的網頁設計趨勢。2022年，如果沒有它，你的產品很可能會看起來就像個半成品?；旌巷L格的動畫越來越受歡迎:定格動畫和3D動畫的結合，2D動畫和3D動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案，以及提高最終產品的質量。
2022年，動畫設計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業設計師數量的增長，實現新想法的機會也在增加。
1）講故事動畫。
可以通過在界面和用戶之間建立情感聯系來傳達信息。
加載動畫Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。
3）光標效果。
用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應來探索網站。這種效果在21世紀初非常流行。如你所知，流行趨勢往往每20年就會重演一次。
4）動態排版
你有沒有想過讓字母跳舞?
據Statista統計，2020年全球動畫市場達到了2700億美元。趨勢是視頻，而不是靜態信息。全球品牌在社交網絡上使用動畫制作廣告。毫無疑問，動畫插圖的優勢是它們非常靈活和多樣化。
寶馬歷史動畫
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動畫解說的趨勢出現在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。
在招聘或商業視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發生了什么，將導致什么操作，下一步需要做什么。
圖片來源awwards
動畫交互將為你的設計注入活力，并有助于保持用戶粘性。關注每一個細節是設計師工作的關鍵，因為設計中的所有元素都可以帶來積極的用戶體驗。
重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們為界面元素增強價值。
微交互有助于頁面導航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現特定的行為。
2022年，在線品牌面臨著新的挑戰，需尋求新的解決方案，其中之一就是動畫logo設計。
圖片來源Toridori
動畫logo主要有以下幾點營銷優勢:
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動態內容，帶有動態圖形的頁面更容易吸引用戶。
3）在移動端看起來更好。絲滑的動畫看起來比靜態的logo更有趣。
4）最重要的是展示了歷史。靜態logo背后的想法正在動畫中發展。由于這一點，在幾秒鐘內，你可以展示品牌的使命，甚至它的價值!
一家洗衣機[公司]的標志(https://www.schulthess.ch/)
現在有很多設計模板，可以很容易地用字體制作一個動畫logo:
圖片來源Shabello, Bobby Voeten
記住，設計趨勢總是在變化的，但是設計的意義不會變。如果你不能深刻理解這一點，那么任何設計趨勢的文章不能幫你做好設計。
這是前面提到過的世界上最老的貓。她今年34歲(相當于人的160歲)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多時候既讓初入B端行業的設計師感到一絲絲迷茫，因為不同的B端系統也就意味著，它的業務一定就會有所不同。比如CRM系統當中的客戶生命周期管理，OA的辦公自動化，特定的行業往往都會蘊含著不同的業務類型
而作為設計師，如果只了解設計模式、設計組件，不去分析設計最后的業務訴求，其實是沒有任何意義。因此想要通過B端設計指南，和大家一起聊聊B端業務，以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批
開始之前，還得再多說兩句，因為一個系統當中，業務本身就不是獨立存在的。因此在去講述審批的過程，一定會涉及到 流程、權限、表單配置 等一些基礎內容，建議可以先做初步了解，再結合文章進行閱讀
雖然在說起源，其實我更想給大家講清楚 審批在B端系統 當中的重要性
審批字面意思是審查并加以批示，通常指對 下級呈報上級的公文進行審查批示，報請上級審批
現如今，任何事情一定都會有分工協作，而使用審批的好處是可以
規范員工行為
提高企業運轉效率
系統存檔便于溯源
保護環境（畢竟減少了紙張浪費）
當然在不同的階段的公司，對于審批的訴求是不太一樣
小公司：因為審批的決策路徑短、流程上都非常簡單，但因此就會缺乏規范保障。比如在外出辦公時，看似只需要與老板當面進行口頭上的溝通即可，但是在外出出現意外時，由于缺乏外出辦公的相關證據，員工的權益則很難得到保障
大公司：因為審批的決策路徑長，流程上都極其復雜，因此會在多人協作下完成整個流程審批。比如想要申請購買辦公用品時，會由 行政、Leader、財務 層層審批，從提交審批到最終落實可能需要十天半個月，但是這樣的流程，能夠確保企業在清查財務狀況時，更加有理有據
審批的演變，就是從最開始的規章制度而來。比如在早期去政務機構辦理各種業務時，會讓你去填寫各種紙質表單。在審核過程中，則需要有各個機關的蓋章及批準，而這種形式正是政府對于普通市民的自上而下的管理方式
審批其實是整個B端系統的靈魂，因為在B端系統當中，企業想要使用系統的一大痛點便是 核心的管控
因此你會發現，只要一個獨立的系統，一定會存在獨立的審批模塊。因為B端管理系統當中企業的最終目的，是管理手中的人，而審批便是最為常見的一種手段
審批在如今的B端系統當中，可以理解為它是一組消息，在這一組消息當中會有：“具體的文本、對應的附件、以及照片視頻”這些內容都是輔佐 申請人 去講訴你需要申請的內容
比如我們在申請病假時，往往需要出示 三甲醫院所開設的證明，對于這個證明，如何在表單當中出現，你會發現最為常見的便是拍攝證明圖片，然后上傳到表單當中（這個與字段屬性緊密相連，我就不做不過介紹）
審批的這組消息還會有些特殊，因為它非常重要，你可以理解為它是一則“加急消息”會提醒審批人快速的進行處理，同時會告知相關的參與人（處理人、抄送人）審批的進度、并且無論成功與否，都會在系統當中留下 足跡，因此它起到了 “追蹤、通知、留存” 三個非常重要的作用，我們首先對于審批進行一個基礎的拆解
如果把審批單獨拿出來，你會發現審批會牽涉到 發起人、處理人、抄送人
審批的發起人，也是整個審批流程的歸屬人，他最關心整個審批進展
因為在發起人的角度，創建完審批事項后，可能還需要進入審批頁面，完善 后續附加信息、及時了解審批狀態、催促審批人的審核、處理駁回意見 等等，因此站在發起人的角度，審批需要盡可能詳細的展示 當前審批的狀態、完整的審批流程、駁回信息的快速操作、成功信息的必要通知
審批的處理人主要在審批過程做出決策，因此他更在乎的是審批申請內容的信息。比如 審批的信息內容、直接的審批操作、多條審批的管理
當然，在一些大型的集團企業當中，會將審批分為審批「直接處理人」與「間接處理人」（后文以 直處人、間處人 簡稱）
「直處人」作為審批的第一處理人，也就意味著他的意見至關重要，如果「直處人」通過過后，相對而言整條審批的通過幾率會大大增加。通?！钢碧幦恕故亲鳛樯暾埲说闹毕殿I導居多，因此多數情況下可以理解為直屬領導進行 “把關”
「間處人」作為審批的后續處理人，同樣在流程當中也十分重要。但在有些情況下，比如一些偏平化管理的企業，「間處人」更多像是“權利”的象征，因為權利已經下放給「直處人」，而「間處人」起到知曉審批以及企業的規章制度要求
審批抄送人主要起到通知對應角色的作用，因為一條審批的出現，會造成諸多影響，假設今天你需要申請事假，如何通知同部門的其他成員呢？
發送即時消息，顯得過于簡單；每個打電話，又有些麻煩；發送企業郵件，又怕他們沒有看到
這時候抄送人會顯得尤為關鍵
通常抄送會有企業流程上管理員配置的固定抄送人，以及發起人選擇的自行抄送人 兩種類型
固定抄送人 角色通常與管理員配置整個流程有關，他是角色當中 管理員 所配置的重要通知人，比如今天你的請假信息，肯定會告知行政，像這類默認的通知流程，則可以將其設為固定抄送人
自行選擇抄送人 則是提供給發起人自行選擇，該條審批可能會影響到的相關人群。比如就是發送給同事，讓他們知曉今天你不在崗位上，因此自行選擇可以增加審批抄送的靈活性
這里肯定會有很多讀者會問，我選擇抄送人與我發消息給同事，有什么區別么？
看似完全相同，實則有明確的區分
通過消息，將審批內容傳達，本質上是你自行將內容發送給對方，對方會對于你這個消息的真實性會產生疑問？你是否通知了
而選擇抄送，更為權威，更能體現你這條消息的真實性，并且整個流程都已經由領導進行批準，因此不會存在太大問題
其實審批的本質就是一組消息，而這一組消息當中，申請人 通過 表單配置 去獲取需要補充的消息內容，而流程會根據企業所配置的流程方式將這一組消息進行合并轉發給對應人，而審批人則需要對這一組消息進行回復“通過、駁回” 來讓整個流程繼續延續
審批當中，最主要的便是流程。因為你可以通過查看流程圖，去了解整個企業的組織架構、規章制度、員工管理方式
串行審批主要是指當一個審核節點通過后，才能進入下一個審核節點。如果節點駁回，則可以根據業務實際需要，配置駁回的返回路徑，會有：撥回到發起人、駁回到上一個節點、或駁回之前任意一個節點 重新審批
并行審批是指一個審批節點存在多個角色同時審批，這里會存在兩種情況
任何一個人審批通過，則可以進入下個節點，這也就是系統當中常說的 「或簽」
所有審批人員通過，才能進入下個節點，這也是系統當中常說的 「會簽」
條件審批就是將企業當中的規章制度映射到實際的項目當中，通常就是某個審批內容會根據 金額多少、實際數量 等 進而選擇哪個角色進行審批
比如銷售人員在申請一個合同審批時，會根據合同金額的不同，審批人也會有所差異
當金額小于8000時，合同直接由財務專員進行審批，進而讓流程進行快速審批
當金額大于8000時，合同會由銷售主管進行審批，讓銷售主管能夠掌握企業的重要合同
通過發起人選定一個審批事項后，將自主選擇后續的審批內容，進而實現審批的后續選擇。這是一種較為靈活的審批流程，當企業尚未形成標準化流程時，自主的核心就是當發起人發起一個審批，提交時需要自行選擇下一個環節的審批人。而下一個環節的審批人審批通過后，可以選擇繼續流轉到再下一個人去審批，或者結束這個流程
審批的背后，它映射的其實是企業的一條條管理制度，而它的設計一定是要滿足企業的實際需求。因為你負責的產品不是為某一家企業提供的服務（定制化產品），并且企業管理制度的變動其實是家常便飯，你需要去考慮一個通用的解決方案，這個解決方案拆解下來會分為三個內容，分別是：申請表單、流程配置、更多配置 進行講解
審批表單是最為一個“簡單”的用戶可配置化表單，因為現如今大多數B端產品都是以 SaaS 作為基礎（如果是定制化產品 它的審批內容、流程也不會是固定不變的）也就意味著審批表單需要為企業提供“DIY”的方式，通過表單提供不同的字段類型，去構建審批的實際要求
比如在一個選擇請假時，年假、事假、病假、婚假 等的要求都會有所不同
如何知道他們的差別，其實可以根據《勞動法》的相關規定 以及 各個其實的實際公司制度，進行個性化的處理
在申請婚假時，需要上傳你的結婚證，以證明其真實性；在病假時，需要有3甲醫院的病情證明；在年假時，則需要有你的剩余年假天數。而這些特殊訴求，其實都需要在表單當中進行各種定制化表單
當然這只是極為常見的 請假 場景，而在實際業務當中的復雜場景（更多需要將 審批與其他系統關聯）一個簡單的表單是沒有辦法進行滿足
這也是很多企業會發現，無論是飛書、釘釘、企業微信，都沒有辦法滿足其實際流程需求。又沒有辦法改變自身流程，只能夠自研、定制化 產品，這也是為什么即便各行各業都有了初具規模的 SaaS 產品，但是還是會有很多企業愿意自行研發軟件
企業可以根據自身的系統流程，在流程配置當中去定制特定的流程。在這個頁面的設計上，需要注意不同參與人的狀態，以及復雜流程時如何才能夠進行清晰的閱讀，因此增加了 顏色區分（發起人、審批人、抄送人）+ 視圖縮放 功能
顏色自然不必多說，整個系統需要統一，因此不能夠只考慮在管理后臺的顏色，是一定要在詳情頁當中也能過保證顏色的一致。這樣才能夠滿足實際業務所需
視圖縮放只是小小提一下，常見的視圖縮放會放在左側，至于為什么，自己稍稍揣摩揣摩
由于流程配置的屬性頁面會涉及很多表單的復雜邏輯，這個只能夠留在我的 訓練營的課程 當中進行拆解，這里就不過多贅述
更多配置項則是審批在實際情況下的特殊處理，比如：申請人修改審批的具體時間、能夠將審批轉發給其他人、出現多次相同的審批人是否去重 等等... 其實就是將審批的設計方案進行“賦能”，去滿足更多企業在實際場景當中的需求，感興趣的同學可以去 釘釘、飛書 了解詳情
審批，核心還是提高企業運轉效率，如果在審批之間，還需要不同角色私下反復溝通，本質上就失去了審批的意義。而審批本身，就是一個典型的B端產品 從場景到需求，進而研發功能，最后又回歸場景，你設計的好與壞，落地到真實的場景當中，試試便知
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn
