做To B的同行都知道，降本增效一直是企業中后臺繞不開的熱點話題，現任公司業務涵蓋倉（WMS）、運（TMS）、配、人（HRM），所做項目雖功能各異，但是有一個共同點-大量使用表格。本文受有贊設計師@美芳的啟發，將我日常工作通過優化表格來提效的思路整理成文章，一方面是對企業后臺的數據表格作一個簡單的階段性總結，另一方面給部門做一個年終分享。
表格是展現數據最為清晰、的形式之一，它也是B端產品和設計師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協同。在企業級中后臺中，常應用于：
一次性瀏覽大量信息-很多圖表類型無法展示數據特點，而表格是組織大量信息通用性最高的一種表達方式，既可陳列信息，又可以表達信息之間的關系；
信息之間需對比-表格的歸納與分類，便于用戶快速查詢其中的差異與變化和關聯；
快速確定并執行多種復雜操作-如對信息進行搜索、篩選、增刪改等。
通常表格的組成元素以及相關元素會有多個部分，根據不同粒度的用戶目標將其解構為三部分：
數據查看：表格的核心-顯，用戶用來閱覽、對比和分析數據。
數據過濾：輔助作用，承載表格的查功能，將數據過濾，方便用戶快速查詢定位數據，一般位于表格上方。
數據操作：輔助作用，承載表格的增刪改的功能，比如常見的“新增”、“刪除”、“編輯”按鈕。
首先，我們要明確，什么是一個好的表格？筆者認為好的數據表格可讀性要強，應便于用戶對信息進行快速的掃描、查詢、過濾、分析等操作，以獲取數據并快速準確地完成目標任務。一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度，拆分到表格的設計目標就是：易讀、易查找、易操作。
數據檢索區可以看作表格的導航，按預定目標過濾出某種具有特定性質的數據，將操作者所關注的數據展示到前面，便于快速查看查看、對比、分析信息的操作過程。從用戶角度出發，按不同粒度的數據檢索方式分為3種方式，分別對應不同程度的用戶。
搜索：當用戶有相對明確的選擇目標時，需定點查看，數據多且雜亂無規律；
篩選：用戶目標相對比較模糊，游離于一個大概的范圍時，通常用于一些有清晰分類的數據；
標簽：查看無交集的數據內容，通常伴隨時間、狀態的流轉。
搜索可以幫助用戶在巨大的信息池中縮小目標范圍，快速而準確的定位到目標數據，并速獲取需要的信息。由于考慮到用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。通常上端搜索欄不被限定搜索范圍，可以全部搜索。
優點：減少精準搜索帶來的記憶負擔
缺點：容易把不相關的
優點：搜索匹配精準度高
缺點：不方便，每次只能對單一條件進行搜索
篩選可以幫助用戶縮小數據范圍，逐步找到想要的內容；或者當用戶的目標就是查看某一范圍的數據時，篩選將是一種十分快捷的方式。在企業級中后臺產品中，篩選的使用場景通常是后一種。
優點：空間利用率高，起到了很好的收納作用
缺點：無法直觀看到所有篩選項
優點：操作效率高，篩選項一目了然，支持輸入更多篩選條件
缺點：空間利用率低，不適合選項太多的情況
優點：篩選當前列，更直觀，一般情況下表單左側數據篩選頻次越高
缺點：篩選的內容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學習
使用場景：標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容。主要樣式有基礎、卡片、膠囊等。
優點：根據標簽，可以很清楚知道劃分，切換tab就可以篩選內容。
缺點：分類需覆蓋選項，并且保證每一項沒有交集，分類不能過多，超過7±2個選項可選擇下拉篩選。
提升用戶體驗的一個小細節：默認用戶最關注的選項，而非全部，這樣可以縮短查詢路徑，同時給出條目，讓用戶清晰明了每個選項的數量，便于操作。
在企業級中后臺中，用戶查看的數據往往屬性較多且不唯一，通過簡單的檢索方式很難定位到目標數據，所以，在實際使用時，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、標簽切換組合出現，形成多屬性組合檢索。這種檢索更適合于專家用戶，他們對于目標數據有明確的定位，知道可以通過哪些屬性定位到自己想要的數據。
平鋪顯示
選用對用戶決策有意義、操作頻次高的屬性作為直接展示的組合檢索條件，建議數量最好不超過5個（7±2法則）。
優點：大而全能最大限度避免檢索條件疏漏的可用性問題
缺點：易用性不高。大而全可能為用戶帶來繁雜的第一印象，都是重點等于沒有重點，增加用戶的決策時間。
折疊展示
如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的；則可通過折疊的方式將這部分檢索條件隱藏起來，將高頻率使用的、數據覆蓋面廣的1-3個屬性直接展示出來。
在設置組合檢索項時，應考慮每一項檢索甚至是多屬性組合檢索是否有必要。需從實際場景出發，根據用戶對各個檢索項的使用頻率及組合檢索項的數量，來決定組合檢索項是直接展示還是折疊展示；以及哪些屬性直接展示，哪些屬性折疊展示，為各檢索項安排合理的展示方式。
產品現狀：前言中提過，我司業務涵蓋WMS、TMS、HRM，業務極其復雜，數據種類字段眾多，使用的檢索方式為組合篩選平鋪展示，一半以上的頁面篩選項超過了9個（不符合7±2原則），大而全的檢索方式一方面占據首屏大部分空間，導致首屏屏效低；另一方面用戶在尋找具體篩選條件時，仿佛大海撈針，增加了用戶決策時間。因后臺數據涉密，將下圖-招聘中可公開的頁面作為案例來可大家分享。
設計優化方向：
業務目標-提升招聘人員的檢索效率 ；
設計目標-縮短檢索路徑，減少檢索區占用的屏幕空間，提高首屏屏效，將展示區域更多留給表格；
設計策略-按照用戶場景檢索路徑、檢索頻次設計信息
但還有2個關鍵問題：用戶場景有哪些？查詢路徑是什么？哪些檢索頻次高？依據從何而來呢？通常有兩種方式：
依據一：數據埋點，每個操作埋個PV（點擊量）,一個月后再看每個操作的數據量；
依據二：用戶調研，通過【問卷投放】或【用戶訪談】，深入理解用戶真實使用場景以及與業務之間的關系。
我采用的用研方式是用戶訪談，原因是由于招聘人員和我們產研人員在一個園區，調研方便，得出數據的時間比埋點短；而相比【問卷投放】，用戶訪談能細到具體某個字段在場景中的作用。訪談的過程因為篇幅原因就不在此具體講述，大家可根據自己的實際情況選擇適合的用研方式。
訪談中了解到，招聘人員的工作是發布崗位信息，快速招到合適的人。因此他們在該頁面的TOP場景就是對崗位上下架，即【新增】和【刪除】，而檢索的TOP場景有哪些呢？
1.對上架中的已招滿的崗位進行下架處理，完整的檢索路徑為崗位狀態>崗位名稱>項目
2.設置崗位傭金，因傭金會根據需求方要求及緊急程度動態變化，完整的檢索路徑為崗位名稱>傭金排序
3.匯報招聘進度，對于個別需求量大、急聘的項目，領導特別重視，經常需要導表。完整的檢索路徑為急聘>崗位名
通過場景得出高頻檢索為【崗位狀態】、【崗位名稱】、【急聘】，其他如【項目】和【城市】檢索條件只是當崗位名稱重復時來進行組合篩選，但該場景在我們業務中很少遇到，如【仙林店誠招配送員】，門店重合率很低。
訪談中我們已經得到了用戶對各個檢索項的使用頻率，那信息排序的原則是：按使用頻率，用戶目標高于業務邏輯，而改版前并非是按照使用頻率排序的。再回到用戶場景，在匯報招聘進度時需要檢索的【急聘】并不在檢索項中，需要和產品經理反映這一點
直接展示高頻檢索項【崗位狀態】、【崗位名稱】和【急聘】，其他低頻項折疊至高級篩選，【項目】、【城市】
【創建人】作為下拉篩選，查詢路徑較長，同時將字段組合放置在搜索選項中，采用帶標簽的搜索，因【崗位名】頻次遠高于其他字段，默認展示【崗位】
優化后如下圖所示：
數據查看區主要用于數據的顯，用于對比、瀏覽，而B端后臺的表格中展示的數據往往多且雜，數據種類、字段眾多，10-20字段很普遍。這就需要我們在設計的時候先一步對數據進行梳理歸納，提高數據的易讀性。我在對我們后臺表格進行優化時，會先通過四個維度來自檢，然后再有針對性的進行優化。
在講提升數據查看區的易讀性前，我們先來看看該區的結構。數據查看區主要由表頭、行、列、單元格四個部分組成。
表頭：說明數據的內容，可以包含篩選、排序等功能起到數據解釋作用，
行和列：對本行/本列數據的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關鍵要素
單元格：表格的主體內容，承載用戶的每一條數據，也是整個表格的核心
表格設計的本質是信息內容的有效傳達，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上，多做減法。
基于對實際業務需求、目標用戶訴求及其行為的理解，列數盡量控制在7±2，列舉用戶更為關注的數據，用戶需要的非重點、輔助性信息可以在詳情中展示。
如果不同用戶想看到的信息側重不同，可以讓用戶自定義列的展示。在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣做的好處是，首先，用戶能在表格上方看到所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況；其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。但需注意系統應記住用戶上一次的自定義列設置，減少用戶重復操作。
表頭，概括每列的主要信息，在用戶使用表格中，起到數據解釋作用，讓數據能與之進行匹配，使用戶能夠看懂。表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。
一個簡單的檢驗表頭是否精簡的方法是：少一個字不可，通俗易懂的說法就是字數再精簡用戶就不明白意思了。可以讓其他同事體驗產品，看有沒有一些名詞定義讓用戶產生誤解。
對于比較復雜的表頭，可以定義一個專有名詞，鼠標hover上去對專業術語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。
如果表格數據可以自我解釋，表頭就不是必須的。如電子郵件的表格，就不需要列標簽，因為發件人和郵主題的區分度比較高。
表格中所承載的數據信息才是主體，在進行表格設計時，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數據信息上，而不是無關的邊框、底色等。所有的視覺元素應該為更好的幫助用戶閱讀而服務，除此之外，再精美的設計都是對表格的破壞。
去掉豎向分割線：水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數值的對比工作。
而豎向分割線的作用是即使縮減元素之間的距離也能區分不同元素，但如果使用了合適的對齊方式分，豎直分隔線就會很多余的。即使要用，也要非常淡，不能妨礙快速瀏覽。
不使用斑馬線：數據量不大且易分辨的情況下，斑馬線在很多時候也是沒有必要的，因為它們是同一類數據，而且水平分割線就已經能夠明顯區隔。
分割線的樣式盡量輕盈，無關的邊框不要搶視覺，數據才是主體，突出內容。
去掉不必要的裝飾和顏色，如icon、標簽等，雖然能夠幫助組織數據、更直觀的傳達信息，但物極必反，少即是多，要注意克制這些元素的使用。標簽能用線性就不用面性，做到輕盈，否則表格中最重的就是標簽。
在產品的品牌設計中，字體是規范中的重要一環。然而在設計表格時，簡約至上才是關鍵，盡量避免任何裝飾性字體。雖然文本不能夠建議你具體使用哪種字體，但數字建議使用Helvetica Neue、Helvetica等其他等寬字體，文本最好不要出現以下情況
不要出現襯線字體：因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考。
不要出現全大寫字體：因為它很難讀，需要轉化思維。
不要出現使用斜體：易引起視線疲勞，影響閱讀。
不要出現多種字體：保持風格統一。
在開發同學的眼中，單元格高度=內容高度+上間距+下間距，在實現設計稿時，通常也是按照這個方式來寫的，而不是像設計同學一樣按照文字的尺寸來計算間距。其中，文字行高建議設為字號的1.5倍，上下間距設為字號的1.2倍。
當然，在很多很多通用化產品中，存在多個設備屏幕分辨率的差異，為了讓每一個分辨率下的產品都能夠有較好的展示效果，可設置舒適、標準、緊湊三種高度來滿足需求，提供切換按鈕讓用戶自己控制顯示密度。
合適的填充和邊距對于視覺設計至關重要，以保證易讀性。定義列的間距時，我通常的做法是N1保持不變，將N2定義一個最小值，N2再根據表格的寬度自適應變化。表格主要適配到這個最小寬度，這一步驟通常的設計系統的初期就要完成，一方面可根據自己項目目前情況，按照導航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時，可以有一個明確的邊界，同時能與開發同學進行理解溝通。當表格寬度大于頁面寬度，固定首尾列，左右滑動。
合適的對齊方式能夠提升數據的瀏覽效率。表格內信息的縱向列對齊（符合格式塔心理學中相近原則）能夠很好的形成視覺引導線。通過對齊，會讓表格更加規范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。
文本左對齊：更的閱讀瀏覽順序，包括非比較型和固定長度的數字，如日期2020-12-04（補0是數字書寫規范）、編號1948696等；
數值右對齊：金額、長度、高度等，數字是從右往左讀的，通過數值位數的長短即可對比數值的量級和大小，方便數值的比對。這是因為在對比數字時，首先看個位，然后十位、百位等；
最后一列右對齊：通常是操作，即使沒有縱向分割線也能很好的起到分隔的作用，視覺上看表格是一個方方正正的格子，比較整齊；
當表格單元格中沒有相應數據時，要避免直接留出空白單元格。空白格容易造成用戶的困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是根本沒有值？正確做法是，數據不存在（數據庫中沒有該字段）用“-”，沒有數量（數據庫中有該字段）用“0”，且小數點后位數、單位，都要與上下單元格保持一致。
在Web端，數據量動輒上萬條，容易出現瀏覽器響應太慢或者瀏覽器內存溢出的情況。使用分頁器有哪些優點呢？
分頁可以緩解服務器的加載壓力，每翻一頁加載該頁的頁面，縮減單次加載的數據量來縮短等待加載的時間，從而達到少量多次的體驗。這就是為什么哪怕是移動時代了，很多表格還是使用分頁組件。
分頁可以跳躍查看數據，靈活性更高、步驟更短。
表格設計大原則是整張表不要超過一屏，每一頁的默認行數：10行以上，減少翻頁的次數。但考慮到每個用戶的使用習慣，在給出默認行的數量后，可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利。
當表格數據無數據時，翻頁控制按鈕不可見。
我在接手我們后臺產品之初，在對業務人員進行角色調研時就收到反饋到有些頁面非常難用，有些就很好用。為什么會出現這樣的情況呢？如下圖所示，被投訴的表格單操作項就有6個，一方面容易誤操作，另一方面左側的數據展示內容有限，易讀性很差。
對于單條數據操作頻繁的場景，我的方法是，當超過三個操作項時，將操作低頻折疊收起。這樣做的優點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。
工作中常常會遇到單元格數據過多的情況，常見的方法有兩種：
定義一個單元格長度或字數限制，超過該范圍以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
多行顯示，這種方法讓平鋪直敘，讓用戶可以直接了當的看到所有信息，在B端使用層面上還是不錯的，但是超出三行就會擠占行高度，建議不要超過兩行，超出可“...”顯示。
數據過多時，單元格長度如何定義？超過哪個范圍“...”顯示呢？
定義長度的依據：根據業務字段，防重復。保證用戶在掃視的時候，對重要字段能快速區分、對比。
新增一條數據后，這條數據應該被放在表格的哪里呢？這是個和表格默認排序有關的問題。
表格數據應該默認按添加的時間排序，還是應該按某個字段的名稱排序？
如果我們默認按某個字段排序，比方說崗位列表里增加一條“廣深常溫B2C 叉車員”的字段，而首字母G的數據在表格中極大概率不靠前。這時就會出現一個問題，用戶要在茫茫數據中找到剛增加的那一條數據，或者用戶根本不知道自己增加的數據已經被插入在了表格里了，這會讓他們覺得自己的操作失敗了。
解決這個問題的一個方法就是按照數據添加時間排序，默認創建的在最上面，體驗上創建完反饋，馬上就出現了變化，且針對數據的操作頻率較高，方便用戶發現與查找。同時也可以用帶排序的表頭，讓用戶自定義排序。
前面內容降噪有講到盡量控制列數在7±2，非重點內容通過更深的入口查看，關于詳情查看可以分為跳轉和點擊詳情。
跳轉：把 ID、名稱等唯一性標志的字段加上超鏈接，直接顯示鏈接色或者開始不顯示，鼠標hover上去才顯示鏈接色，點擊可以查看該條記錄的詳情。
詳情：在操作列中增加“詳情”功能，點擊查看詳情。
關于表格詳情查看的展現形式，按可承載的信息量由少到多依次分為折疊展開、彈窗、抽屜、及新增頁面四種類型。
直接在表格里展開（可以是詳情，也可以是二級表格），無需打開新頁面即可查看附加信息，防止用戶迷失。
適用場景：信息量較少的情況
彈窗是一種中斷用戶當前操作并對其進行補充、或者對當前操作進行強制反饋的交互形式，需要用戶進行強交互，它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作。主要分為模態彈窗與非模態彈窗兩種形式：
通常這類彈窗只會在屏幕上短暫停留，幾秒就會消失，也因此用戶感受不到他的存在。它的缺點也非常明顯，展示時間較短，不適合展示重要信息、不能承載大量文案。在詳情查看頁面中并不適用，此處就不再進行拆解。
位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，彈窗才會消失。
優勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當前頁面
劣勢：打擾用戶，感到強烈的中斷的感受
適用場景：數據詳情體量不大，頁面內容較輕時。同時，不需要參照上級頁面內容，有快速回退的訴求。
側滑抽屜相比彈窗減少了頁面層級和隔離感，有較強的連貫性，適合與原頁面具有連貫結構的內容的展示。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集，而且在涉及到多個項目時不會丟失位置。可自定義上下左右四個方向，一般右側滑出最為常見。
適用場景：詳情頁的內容較多時，且有快速切換主體的訴求。
新增頁面幾乎是萬能的，無論頁面內容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以使用。新增頁面又分為：覆蓋當前窗口以及新窗口跳轉兩種形式，在場景上可以根據兩者差異進行選擇。
在詳情查看中，二級頁面使用頻率是非常高的，需要用戶在A與B頁面之間進行來回切換，這時候考慮頁面反復出現是否流暢，是否有切換成本的產生，本著產品效率至上的原則，新增的頁面建議新開一個窗口跳轉而非覆蓋，如下圖：
適用場景：當詳情頁承載內容過多且里面的操作相對復雜時。
數據操作主要是針對表格數據的增、刪、改，從控制范圍可分為：單行操作、批量操作、全局操作。
單行操作也稱行內操作，常見的顯性與隱性兩種方式。顯性操作，操作項顯示在行內，直觀明了；隱性操作，鼠標懸停時才顯示操作項，界面簡潔，留更多的空間給需要查看的數據內容，減輕空間壓力，減少干擾
顯性操作，文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊"更多"或“...”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。
隱性操作，如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可將所有的操作進行隱藏，當用戶鼠標懸停時進行展開所有操作。這種方式能上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。
適用于數據量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時便于批處理和單個操作。批處理操作模式允許用戶對一行或多行對象執行操作，通常與復選框操作配合使用，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作。
統攬全局，無需選擇數據內容即可進行的操作，常見的【新增】、【導入】操作。
三種操作：兩個在表格外，一個在表格內，那么很自然的我們會遇到一個問題，一個功能該放在哪呢？下面我通過一個案例來說明。
產品現狀：在HRM系統中，不同的權限使每行的數據擁有不同的操作項，而且這些操作因為視覺特征比較顯眼，容易分散用戶的注意力，且因表格空間有限，操作區的各操作項過于接近，誤操作率相對較高。
設計優化方向：
業務目標-提升數據操作效率 ；
設計目標-降低誤操作率，讓用戶聚焦內容；
設計策略-控制操作項的顯示數量，將操作項分類
習慣上我們會認為一行數據是對某一個對象實例的描述，比如在上圖表格中，一行數據是對某個待入職員工的描述，包括他的姓名、工號、在職狀態等等。所以表格內的操作也是針對這個對象的。
一般我會把一次只能針對一個對象操作的功能放在表格內，比如【詳情】和【編輯】，因為查看詳情不太可能一次查看多個對象，編輯修改信息也是。那么反過來，不屬于任何一個對象實例的功能就需要放在表格外的操作欄，比如說【新增】。另外一種需要放在表格外的功能是批量操作，因為批量操作需要對多行數據進行同時操作，也不是屬于單個對象實例的。以此為依據將圖中操作分類如下：
大家應該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內操作，也可以作為批量操作的問題。作為行內操作，優點是更便捷，；表外作為是批量操作，這樣更方便的同時操作多個數據，但如果只是操作單個數據時就會增加用戶的操作步驟?；蛘邇煞N方式都提供，雖然更靈活但是會讓頁面比較冗余。
其實怎么選擇還是要根據具體業務場景來決定，首先判斷這倆操作是不是高頻功能。在我們的業務功能中，已入職和離職的員工在該頁面不能操作刪除，且【刪除】是相對低頻地，完全可以只提供單個刪除功能?！救肼毶А孔鳛楦哳l功能，與產品經理討論后提供行內操作和批量操作，選擇這個方案的原因是，該功能作為行內操作已上線運營了1年時間，移除會產生學習成本。
批量操作常見的擺放位置有三種形式。
方案一：和全局操作一起置于表左上方或右上方
因批量操作需要勾選左邊復選框，放置在表右上方不符合操作動效，本著效率至上的原則，此處不考慮放在右上方。
優點：操作項信息前置能清楚的知道有哪些功能，無需用戶記憶
缺點：但當批量操作較多時，會擠占頁面空間，導致操作按鈕很多，不易查找
方案二：默認不顯示，勾選激活后顯示于表左上方
優點：減少了相應的視覺噪音，業務拓展性強
缺點：有一定的學習成本，沒有勾選時不知道有該操作項
方案三：直接顯示于表左下方，但需勾選激活后操作
優點：上內容下操作，符合操作動線
缺點：和分頁放置一起不易于業務拓展
根據我司業務，綜合考慮后選擇方案三，放置于表的左下方。
單行操作根據操作頻率優先級為入職生效>詳情>刪除>編輯，其中編輯和刪除屬于低頻操作，可折疊隱藏。批量操作-導出也是低頻操作。最后定稿方案如下：
2B產品應該著眼于業務，本文是根據我司業務提供了一個表格設計基本指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。但是表格設計的原則應該是通用的：
從用戶閱讀表格的目標出發設計表格的內容和布局
從提高用戶閱讀速度的功能角度出發進行表格的視覺設計，避免過度設計
當表格指標、數據過多時，提供一些自定義的工具幫助用戶自助選擇出最需要的數據條目
文章來源：tob.design 作者：佩奇一只居
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在B端設計中，數據可視化是必不可少而且非常重要，越來越多的設計師需要和數據打交道，但是很多設計師不懂可視化當中不同用途的圖表規范，只是單純設計出好看的數據圖表，卻不能給用戶帶來更多的信息和價值。
因此掌握數據可視化能力是設計師必不可少的一個技能，然而目前國內互聯網對于數據的教學不夠全面，這讓很多B端的設計師很苦惱，所以今天我結合自己的工作經驗和大家分享一下--“數據可視化之圖表設計”，為大家梳理一套完整的數據可視化的框架，以及關于可視化設計的基本準則和規范。幫助大家理解什么樣的數據對應什么樣的圖標，了解顏色的意義，知道數據排版的要點。
將不可見的數據轉化為可見的圖形和符號，從中發現規律和特征，以獲取更多的信息和價值。
在當前互聯網的時代下，一頁圖可能對標一個龐大且復雜的數據表格，按照人類本身對圖的記憶遠大于對抽象文字的記憶，所以我們要學會讓數據說話，數據可視化除了“簡潔直觀”，還可有容易理解和記憶、傳遞信息更豐富的特點。
接下來我們開始思考如何制作數據可視化圖標？首先規范的流程是最好的前提，下面的工作流程結合我自己的經驗和日常企業的數據分析場景，找到了一個合適的參考，我們就可以步步為營，避免很多不必要的返工，保證設計質量和項目進度。
很多小伙伴在做可視化圖表設計過程中，肯定遇到過這樣的困擾，發現自己做完的圖標并未能準確表達自己的意圖，也無法傳達自己的意圖，圖表通常讓用戶看完困惑不已，主要問題出現在分析的維度沒有找準或定義的比較混亂，面對B端龐大復雜的圖標，同樣的一個指標的數據，我們從不同維度分析就會出現不同結果。用一句古話來形容：橫看成嶺側成峰。
國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示（如下圖），他把數據的關系分成了4種類型，幫助我們去選出合適的圖表來呈現。
上圖向大家展示了數據分析常用的4個維度，我們在選定數據指標后，我們需要和數據產品經理溝通我們核心需求，是我們想通過可視化向用戶傳遞什么價值信息。上圖引導我們從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題，我們在進行圖表設計時首先進行需求的分析，熟悉數據并且明確數據要展現出來的信息，然后選用合適的圖表來進行數據的展現。
聯系：數據之間的相關性
分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
比較：數據之間存在何種差異、差異主要體現在哪些方面
構成：指標里的數據都由哪幾部分組成、每部分占比如何
考慮到日常企業的數據分析場景，圖中有些圖表使用頻率是非常低的。所以我參考了上圖的部分內容，對其進行了總結，重新整合成三個維度
圖表的作用，是幫助我們更好地看懂數據。選擇什么圖表，需要回答的首要問題是『我有什么數據，需要用圖表做什么』，而不是 『圖表長成什么樣』 ，根據數據選用合適的圖表展現來把數據的信息傳達給用戶。因此我們從數據出發、熟悉每種圖表的定義、適用場景、優缺點，從功能角度對圖表進行分類，這樣才能快速選擇合適的圖表。
（1）柱狀圖
定義：柱狀圖是一種以長方形的長度為變量的統計圖表。長條圖用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。
特點：
1、這個分類不限于地區、品牌等，可以是一個時間周期；
2、數量控制在5-12條最佳；
使用建議：
（1）使用合適的寬度去適配柱條的寬度
當柱子太窄時，用戶的視覺可能會集中在兩個柱中間的負空間，而這里是不承載任何數據的。寬度推薦使用在1/2 柱寬到 1 柱寬之間，但也要視情況而定。
（2）不推薦采用全圓角
柱形圖可以有適當的圓角，全圓角則有可能歪曲可視化圖表的表達，用戶可能無法明確是圓心還會頂點作為峰值。
（3）不要使用非水平和豎直的文字標注，也不要使用轉行
有時坐標軸上的注釋文字會很多，所以很多人為了妥協，在小空間內顯示出所有的文字標注內容，而使用傾斜的文本，或者將文本轉行處理。
不要用過于復雜的設計形式，數據可視化的第一要義是簡單易懂，所以在遇到標簽文字過長時，可以采用將柱狀圖轉化為條形圖
定義：條形圖是用寬度相同的條形的高度或長短來表示數據多少的圖形。條形圖能夠使人們一眼看出各個數據的大小，易于比較數據之間的差別。當條目較多，如大于12條，移動端上的柱狀圖會顯得擁擠不堪，更適合使用條形圖。
特點：
1、與柱狀圖類似，只是交換了X軸與Y軸位置；
2、多用于豎長的顯示區域，例如手機端、大屏的一側；
3、多用于top排行或分類名稱較長的情況；
4、數量一般不超過30條，否則易帶來視覺和記憶負擔
使用建議：
（1）采用有序排列，軸標簽右對齊
對多個數據系列排序時，如果不涉及到日期等特定數據，最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數據。
可以通過升序或降序排布，例如按照數量從多到少來對數據進行排序，也可以按照字母順序等來排布?？傊?，按照邏輯排序可以一定程度上引導人們更好地閱讀數據。
（2）標簽直接顯示在柱體上
條形圖還可以通過省略橫軸和縱軸，并直接在柱子上表明數值，來降低數據墨水比，進一步提高信息的獲取效率。
定義：用于顯示數據在一個連續的時間間隔或者時間跨度上的變化，它的特點是反映事物隨時間或有序類別而變化的趨勢。折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數據是遞增還是遞減、增減的速率、增減的規律（周期性、螺旋性等）、峰值等特征。
特點：
1、橫軸如果不是表示連續數值，折線圖的意義不大
2、數量一般不少于3條，否則用柱狀圖更合適
使用建議：
（1）反映事物隨時間或有序類別而變化的趨勢
折線圖看的是趨勢，所有不是有序類別的不適合使用折線圖
（2）視覺美化
折線圖可以清晰的反映數據是遞增還是遞減，不能和面積圖累計的概念混淆，由于折線圖放在界面上的視覺重量很弱，所以我們可以通過添加微漸變加重視覺。
定義：面積圖又叫區域圖。它是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區域使用顏色或者紋理填充，顏色的填充可以更好的突出趨勢信息，需要注意的是顏色要帶有一定的透明度，透明度可以很好地幫助使用者觀察不同序列之間的重疊關系，沒有透明度的面積會導致不同序列之間相互遮蓋，減少可以被觀察到的信息。
使用建議：
（1）不要超過7個序列
當數據系列過多時，往往造成用戶難以觀察的痛苦，所以建議使用堆疊面積圖時數據系列最好不要超過7個。
分組條形圖屬于條形圖的一種，又叫簇狀條形圖，是一種以不同分組高度相同的長方形的寬度為變量的統計圖表，每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區別各個分類，各個分組之間需要保持間隔。
特點：
（1）適用場景
分組條形圖適用于表達相同分類不同組別的數據，或者相同組別不同分類的數據，簡而言之，就是根據一個相同變量的不同分組進行數據表達。
（2）不適用場景
分組條形圖不適合用于表達分組過多的，數據量較大的數據，也不適合用于表達趨勢類的數據。
定義：雙向柱狀圖又叫正負條形圖，是使用正向和反向的柱子顯示類別之間的數值比較，其中分類軸表示需要對比的分類維度，連續軸代表相應的數值。
定義：一種圓形直方圖，使用半徑長短表示數值大小?？梢栽谝曈X上夸大數據之間的差異。
特點：
1、由于面積等于半徑的平方，玫瑰圖會將數值之間的差異放大
2、南丁格爾玫瑰圖不能用于表示占比構成
3、數量：一般 不超過30條，否則易帶來視覺和記憶負擔
定義：雷達圖又稱為蜘蛛網圖、網絡圖，蜘蛛圖，星圖，是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數據的方法，所有這些方面都可以類似地量化，常用于排名、評估、評論等數據的展示，比如我們玩王者榮耀中英雄的各項性能指標。
特點：
1、指標得分接近圓心，說明處于較差狀態，應分析改進；指標得分接近外變現，說明處于理想狀態
2、數量控制在5-8個最佳
定義：對比分類數據的數值大小以及是否達標
特點：
1、可以通過標記刻度區間，來進行更好的評估
2、數量控制在10個以內
定義：由多個梯形從上而下疊加而成。從上到下的項有邏輯上的順序關系，梯形面積表示某個業務量與上一個環節之間的差異，通過漏斗各環節業務數據的比較，能夠直觀地發現和說明問題所在，為決策者提供一定的參考。
特點：
適用于業務流程比較規范、周期長、環節多的單流程單向分析，不適合表示無邏輯順序的分類對比
使用建議：
（1）漏斗圖不是表示各個分類的占比情況，而是展示數據變化的一個邏輯流程，如果數據是無邏輯順序的占比比較，建議使用餅圖更合適。
（2）可以根據數據選擇使用對比色或同一種顏色的色調漸變，從最暗到最淺來依照漏斗的尺寸排列。切記，不要添加許多圖層和顏色造成漏斗圖難以閱讀。
定義：用于表示不同分類的占比情況，通過弧度大小來對比各種分類，將一個圓餅按照分類的占比劃分成多個區塊，整個圓餅代表數據的總量，每個圓弧所在的塊表示該分類占總體的比例大小，所有圓弧所在的塊組成的圓餅等于 100%，這樣可以很好地幫助用戶快速了解數據的占比分配。
特點：
1、可以通過標記刻度區間，來更好的評估
2、數量控制在10個以內
使用建議：
（1）餅圖適合用來展示單一維度數據的占比，要求其數值中沒有零或負值，并確保各分塊占比總和為100%
（2）餅圖不適合被用于數據的比較
定義：本質是將餅圖中間區域挖空
特點：
（1）餅圖的整體性太強，我們會將注意力更多集中在扇形的面積上，環圖則可以很好地避免這個問題
（2）建議分類數量不超過9個
使用建議：
餅圖更加集中面積，環圖會集中在角度和弧長上，所以我們中間的空間利用率還可以更好的利用。
定義：旭日圖（Sunburst）由多層的環形圖組成，在數據結構上，內圈是外圈的父節點。因此，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關系。
特點：
1、旭日圖=N張餅圖
2、離遠心越近，代表層級越高
3、下一層級的總和構成上一層級
4、可以無限向外擴展
定義：堆積面積圖是一種特殊的面積圖，可以用來比較在一個區間內的多個變量。如果有多個數據系列，并想分析每個類別的部分到整體的關系，并展現部分量對于總量的貢獻時，使用堆積面積圖是非常合適的選擇。
特點：
1、適合表達總量和分量的構成情況
2、分類指標的縱軸起點，并不是從0開始，而是在上一個分類基礎上疊加
使用建議：
1、圖表有重疊的數據時，類別數量越多，重疊越多，因此可見度越低，所以不建議堆疊面積圖中包含過多數據系列.
2、堆積面積圖要展示部分和整體之間的關系，所以不能用于包含負值的數據的展示。
3、建議堆疊面積圖中把變化量較大的數據放在上方，變化量較小的數據放在下方會獲得更好的展示效果。
定義：堆疊柱狀圖是柱狀圖的擴展，不同的是，柱狀圖的數據值為并行排列，堆疊柱圖則是一個個疊加起來的。它可以展示每一個分類的總量，以及該分類包含的每個小分類的大小及占比，因此非常適合處理部分與整體的關系。
特點：
1、二級分類并不是按照同一基準對齊的
使用建議：
大多數的堆疊柱狀圖都是垂直繪制的，但是如果你的數據標簽特別長時，考慮更好地展示效果，可以選擇使用水平堆疊的方式。
定義：通過顯示正值（收入）和負值（支出）對總量的貢獻來顯示結果累積的過程，因為形似瀑布流水而被稱之為瀑布圖。瀑布圖通過巧妙的設置，使圖表中數據的排列形狀（稱為浮動列）看似瀑布懸空，從而反映數據在不同時期或受不同因素影響的程度及結果，還可以直觀反映出數據的增減變化，在工作表中非常實用。
特點：
1、過程值為正的時候，向上加；
2、過程值為負的時候，向下減；
定義：特殊高亮的形式顯示數據集中的區域和數據所在的地理區域的圖示。使用地圖作為背景，對數據的地理分布顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小，將數據在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。
特點：
1、結合散點：位置坐標更清晰
2、結合飛線圖：表達起始點和目標點的鏈接或流向關系
使用建議：
（1）必須要有地理位置
（2）展現的通常是以某個地區為單位的匯總的連續信息
（3）當你用基于地圖的熱力圖的時候，顏色梯度變化一定是有規律的，一定根據數值遞增遞減來變化的，否則在視覺上產生錯誤引導
定義：數據點在直角坐標系平面上的分布圖，表示因變量隨自變量而變化的大致趨勢。
定義：氣泡圖是顯示變量之間相關性的一種圖表。與散點圖類似。在直角坐標系中顯示數據的兩個變量（X和Y軸）之間的關系，數據顯示為點的集合。與散點圖不同的是，氣泡圖是一個多變量圖，它增加了第三個數值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值。可以通過氣泡的位置分布和大小比例，來分析數據的規律。
特點：
有一定的數據量是展現三個變量之前的相關性，數據具有3個序列、特征及相關值。
舉個栗子：
我們回歸到線下場景，我們通常在逛生鮮超市類如盒馬生鮮、沃爾瑪等，會發現里面售賣的雞蛋、生鮮類會比外面便宜很多，因為他們容易過期，屬于成本極高的食品，通過限購來讓他們引流，從而吸引更多的顧客來買那些成本低、單品收入高的商品。
最后給大家總結一下，首先我們拿到數據后先明確我們的使用目標，是讓用戶用最短的時間了解到數據帶來的信息，結合每個圖表的優缺點，選擇合適的圖表，從需求和目標出發，切忌盲目的增加和刪減元素，圖表的易用性大于它的美觀度。
以上就是本篇文章的全部內容，數據可視化是一門龐大系統的科學，關于可視化相關的知識還有很多沒有涉及到，例如可視化圖表的構成、圖表運用場景、數據可視化大屏等等，后續希望大家持續關注。
文章來源：tob.design 作者：佩奇一只居
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大約在 3 年前我就注意到像 Facebook 等國外社交 App 在大幅度使用頭像。比如明明文字就能表達的地方，偏偏要塞下幾個小頭像。這個現象我琢磨好久，直到我最近在自己參與的項目中也嘗試著加入頭像，發現數據非常好看，因此和大家分享一下這個成果。
在沒有進行實踐之前，我嘗試從理論中尋找原因。
頭像視覺面積更大、顏色更豐富，比文字更吸引人的注意力。
之前在網上流行過把微波爐豎著放，就特別像笑臉的事件。為什么有兩個圓圈一道弧線的圖形會被當作人臉的微笑？
科學界對此早有研究，把這種誤把具有臉特征的視覺圖形當作人臉的現象稱為“空想性錯視（Pareidolia）”。
早在 1952 年，生物學家赫胥黎（JulianHuxley）就已提出空想性錯視源于人類演化的過程。他認為在人類漫長的進化過程中會遇到各種危險，殘暴的野獸和同族的人類都具有“臉孔”。對“臉孔”的識別越快，就能讓我們在復雜的環境中快速識別潛在的危險或盟友。久而久之，隨著人類進化就衍生出與生俱來對“臉孔”的辨識能力。
通過現代科技研究發現，在人類大腦中，梭狀回面孔區（right fusiform face area，rFFA）主要負責人臉的認知。它能整合經視皮層處理的視覺刺激，讓我們快速識別人臉。有研究發現，只需 130ms 面孔可以被檢測到。
很顯然，在界面設計中，因為大多數人的頭像也具有“臉孔”特征，因此能很快地被用戶注意到。
心理學家研究發現，人在觀察事物時，并不是對事物部分屬性孤立觀察，而總是傾向于把具有不同屬性、不同部分的對象作為一個統一的整體。格式塔原理即是這一特征的反映。
這個原理不僅作用于視覺，人對其他人的觀察也是一樣。我們在互相多次交往后才發現和第一印象偏差很大。因為第一印象只是這個人的部分特征，并不完整。大腦會傾向于根據這些部分特征腦補出完整的人，長得漂亮的人會被認為聰明善良，著裝正式的人看著技術更專業即是如此，這種被某個亮眼的特征所籠罩，讓你腦補完整屬性的情況稱為光暈效應。
因此摳腳大漢用美女頭像能騙到部分男人就見怪不怪了。
基于以上 3 點分析，用戶會認為頭像背后的就是活生生的人類。
在理論分析后不久我剛好得到了一次實踐的機會。在我們的在線問診 App 中促使用戶購買醫生提供的治療方案是核心目標之一，最開始我們的醫患溝通界面和閑魚類似，分為對話和服務卡片兩種信息。
通過用戶訪談我們發現患者非常在乎醫生的回復內容（因為花錢買的就是醫生的內容），但是卻表示沒有注意到治療方案卡片。我猜測是由于治療卡片并不像醫生提供的內容，更像是我們系統推送的某種廣告，因此被用戶忽略。于是我做了一個非常小的改動，將治療方案卡片用醫生對話回復的樣式包起來，并增加一句文案。患者能正確理解治療方案也是醫生提供內容，結果治療方案的購買率有明顯提升！
增加一個醫生頭像和聊天氣泡，下一步轉化也有明顯增長。
通過這兩次實踐團隊成員開玩笑說這是“加頭像數據就會上漲的方法論”，奈何我們幾個詞藻有限不能再做更高程度的包裝。不過以上案例確實是很好的利用了視覺傳達、面孔識別和光暈效應的原理。
以上實踐都是增加對方的頭像，那界面上展示用戶自己的頭像又有什么意義呢？團隊成員通過探討得出以下觀點：
1. 切換多賬號，避免登錯號
有些公司職員需要打理公司的社交網絡賬號同時也有自己的賬號，甚至還有另外的小號。如果一不小心登錯號發錯內容，可能會導致社會性死亡。推特 App 在發布界面顯示自己的頭像點擊可以切換不同的賬號，能有效避免這些問題。
2. 頭像讓我發言更注意自身形象
自己的頭像是自己現實人格在網絡上的映射，看著自己的頭像在輸入框旁邊，發言時難免會有“這是我在說話”的潛意識。因此在發表內容時會注意自己的措辭，維持自己的身份形象。同理，如果做匿名社交，在輸入框旁邊放上匿名頭像，也讓用戶覺得自己帶上了面具，發言更肆無忌憚。
3. 頭像更像溝通
如果在別人的帖子下面發表評論，有頭像更像是你和帖子的作者進行平等的對話溝通，沒頭像就顯得你在蕓蕓眾生中仰望作者。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源：優設 作者：龍爪槐守望者
隨著大數據的興起，數據價值的不斷挖掘，圖表作為數據呈現與分析的有效手段，正扮演著越來越重要的角色。我們在進行 B 端平臺設計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。
為了達到清晰傳達和視覺美觀的目標，我們結合實際項目，進行大量探索及思考，梳理總結了一套適用于 B 端后臺類產品的圖表設計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。
圖表能夠承載大量數據信息，同時視覺元素較多，如果只是憑借設計師的審美喜好進行視覺設計，沒有整體信息讀取考量，可能會導致重要信息未能凸顯，降低用戶讀取效率。
為清晰傳達信息，進一步提升讀取效率，我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據不同視覺強度分別設計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前后關系，能夠清晰把握元素視覺層次，保證信息傳遞效率。
1. 底層元素設計
在各類圖表中，我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾，突出主圖形，底層元素全部使用淺灰色進行設計。我們發現，當元素與背景顏色的明度對比在 1.2:1 時，人眼較難看到元素；當對比度在 2.0:1 時，視覺強度過強，易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試，最終確定元素與背景對比度在 1.6:1 左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發現。
2. 中層元素設計
中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數據色來表現，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。
3. 頂層元素設計
我們把頂層元素定義為圖表高亮信息，內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出，使用深灰色、強調色等強對比度樣式，并輔以動畫、投影等手法保證明顯的視覺強調效果，保證頂層信息最有效的傳達給用戶。
4. 最終效果
通過層級梳理，并綁定元素重要程度和視覺強度的方法，設計后圖表主次信息均按重要程度進行對應視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。
圖表排版是指各元素在圖表中的尺寸及布局等，對于 B 端后臺類產品來說，不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規范保證用戶的使用體驗？我們經過大量討論推敲，梳理出一套針對 B 端后臺類產品的排版規則，力求保證用戶圖表的使用體驗。
1. 圖表尺寸
圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大，例如巨量數據的圖表擠在名片大小的區域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環視”、“詳情分析”三類典型場景，并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸，針對不同尺寸優化圖表的信息展示密度，以達到讀取信息的目的。
“迷你圖”尺寸最小，舍棄了 Y 軸等不必要信息，利用小面積展示最關鍵的圖表信息，并控制數據密度，保證信息讀取。
“中號圖表”尺寸受限，限制坐標軸刻度數量和數據的密度，例如曲線圖數據點不高于每 4 像素 1 個數據點，Y 軸坐標刻度不超過 5 個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。
“大號圖表”尺寸最大，不限制數據信息密度，給予最全最詳細的展示，這類尺寸通常用在數據詳情頁等詳細分析場景中。
最后考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。
2. 坐標軸
坐標軸在圖表中出現的頻率較高，那么坐標軸常見的設計問題有哪些呢？
第一是橫縱坐標軸的刻度出現過密情況。
如果坐標軸所承載的是連續數據（連續數據指可量化的，連續不斷的，在區間內可任意取值的數據，如時間、金額、人數等），設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據（離散數據指不可量化的，無關聯的，不可在區間內任意取值的數據，如分類、軟件版本、省份等），可采取增加坐標軸縮放功能解決。
第二個常見問題是刻度的說明文字過長。
如果是 X 軸（橫軸）文字過長，除了在可控范圍內減少刻度，還可采取文字傾斜 45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜 90°)，緩解信息過密看不清的情況。
如果是 Y 軸（縱軸）文字過長，需聯合研發一起調整數據的單位，比如把“元”調整為“百萬元”。
如果不能調整，那就要根據所使用的圖表庫有針對性調整。例如常用的 Echarts 圖表、D3 圖表等開源圖表庫，需要提前預估刻度文字長度并預留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調整。
3. 圖例
圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當布局擺放，但在同一產品或頁面內，過于隨意的擺放圖例，會導致頁面統一性較差，同時增加用戶的瀏覽成本。我們團隊所負責的 B 端商業產品矩陣，作為面向用戶的產品集合，產品間聯系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題，我們基于業務特點，針對 B 端商業產品矩陣制定了圖例布局指導原則。
我們以提升屏幕信息密度為目標，分析不同場景的頁面排布，制定了頂部和右側兩種較為寬松的指導原則，供設計師在沒有明確的更優方案時選用。
當圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布，減少占用空間。當圖表本身左右都有空余空間時，例如餅圖，建議將圖例放置于圖表的右側。也能夠節省頁面的空間。
色板作為常見的數據表達手段，能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試，梳理總結出圖表色彩的兩個關鍵維度：辨識度與統一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統一風格，以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性，是我們遇到的難題。
1. 辨識度
辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對于第一種，我們采用控制顏色的明亮程度來確保色彩辨識度，尤其對于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。
對于第二種也就是各顏色之間的辨識度，通過實驗發現單純的顏色色相變化，例如紅色與橙色的區分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，即深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中，運用歐幾里得距離公式測算顏色間的距離長短，來衡量各顏色間色差數值。顏色間距離越遠代表色差越大，利用數據輔助衡量辨識效果。
2. 統一性
色彩統一性的作用在于確保圖表整體風格一致，色彩搭配舒適，從而帶來美觀、統一的視覺感受。為達目的，我們首先提煉商業產品設計風格為明亮、強對比，其次把設計風格轉化為色彩數值。經過實驗，把顏色明度限制在 50%-70%，把飽和度限制在 75%-85%，并在區間內不斷波動。這樣既保證了色彩視覺感受的統一，各顏色間又能夠有清晰的辨識度。
3. 顏色量化與工具
量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的 HCL 色彩模式來衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區別于傳統的 RGB 或 HSB 模式，它能夠將人眼對顏色的感知的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由于此特性，HCL 模式在誕生距今不到 20 年間，已被一些先鋒設計師用于數據可視化的呈現中。
但是 HCL 作為小眾色彩模式，目前設計軟件鮮有支持，造成了 HCL 色彩不直觀、不方便調色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，并在風格上與品牌色匹配，達到整體色彩的統一。我們也將一套調配好的色板及 HCL 實用小工具附在文末，幫助大家直觀的查看和使用 HCL 模式顏色。
數據價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙，是發掘數據價值的強有力武器。通過對圖表的不斷探索優化，我們希望能夠最大化數據的價值。通過圖表，讓數據最直觀的展現；通過圖表，讓其背后的規律浮出水面被人探知；通過圖表，讓 B 端不再有難懂的數據。
附：色板及 HCL 工具
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
伴隨技術的發展與人們需求層次的變化，新趨勢年年都有，有的新趨勢由于用的人多了，使設計作品逐漸飽和，慢慢失去了新意，有的趨勢則會為企業不斷地帶來靈感，產生更多的“化學”反應。
今天，TCC 情報局從這篇國外大神的趨勢里總結了 8 條影響 2021 年的用戶體驗設計趨勢，以及可能面臨的挑戰。只有充分利用這些趨勢來創造視覺表現力強且具有可用性的產品，我們設計的產品才可能被更多用戶接受并喜愛。
2020 年無疑對全世界來說都是面臨挑戰的一年，新冠疫情的爆發使大多數人都體驗了一把在家辦公的 “樂趣”（作為一名大學在職教師，我也終于實現了多年以來睜眼就能上班的愿望）。騰訊會議、騰訊課堂、釘釘幾乎成了每一位 “網紅”，不對，是教師電腦里的必備軟件。對于打工人來說，能夠在家與同事進行線上協同辦公，也成為了剛需。像 Teambition 這樣能夠實現多人協同辦公的工作學習套件，使人們不但做到工作進度的實時同步，還做到了在家也能 996（淚目）。
△ 基于虛擬現實 VR 和增強現實 AR 的會議軟件 Spatial
類似的辦公協作工具，在國外也廣受歡迎，Zoom 的股價在一年內上漲了 600%，Google 也加快更新了 Workspace 辦公效率套件?？梢娺@些產品在未來將會取得進一步發展，創造出更為成熟的虛擬辦公生態系統。
△ 遠程協作已經成為工作中的一部分
△ Divan Raj 設計的遠程會議應用
△ Dmitriy Kharaberyush 對遠程會議系統 Zoom 進行了 Redesign
在設計領域，設計工具的協同性也是設計師們比較關注的話題，Sketch 的使用痛點便是協作的問題，尤其對于后疫情時代來說，人們意識到了在線協同辦公的重要性后，Figma 便以它驚艷的協同能力成功出圈，備受青睞，也成為了 Facebook 設計師們的御用工具。
△ 適合 macOS Big Sur 系統的全新 Sketch
增強現實（AR）和虛擬現實（VR）技術早已悄悄進入我們的日常生活，AR 上妝、VR 看房不再新鮮。2020 年，由于新冠疫情的影響，虛擬現實重新進入大眾視野，成為人們關注的重點。
△ 將 AR 技術融入線下實體書店
Facebook 對 VR 和 AR 也越來越重視，公司旗下也會推出 VR 旅行、三維藝術品創作、AR 室內設計和博物館等應用程序，還有用于教育的 VR 游戲等。
△ 博物館指南程序結合 AR 技術
尤其對于教育領域來說，虛擬現實技術所具備的仿真性、開放性和安全性的特點，不僅可以使學生在學習過程中身臨其境，還能打破時空限制進行集中教學，同時能模擬各種情景，不必擔心有安全隱患。
△ 直播課程 Unacademy Plus 提出應用 AR 技術的概念版
過去，人們一直認為虛擬現實僅是一項娛樂技術，比如手游 “陰陽師” 的 AR 召喚，使無數人想起當非酋的日子；大多數人首次接觸 VR 技術，也是在商場里偶然嘗試了類似 VR 大擺錘這樣的游戲，然后被嚇得連連尖叫（不是我）。如今，這項技術在各個領域的廣泛應用才是我們要討論的話題，其在醫療、教育和藝術領域實現的跨越式發展，成為必然趨勢。
△ 陰陽師 AR 召喚陣圖
相信在未來，將 AR 和 VR 技術融入更多的數字產品和服務，也會給設計師們的創作帶來無限可能。
在現代工具和技術的幫助下，設計師的工作流程得到了大大的簡化，智能化與生成式設計也成為一大趨勢。各大軟件開發公司也爭相推出了一系列智能化工具組，以幫助打工人們更快速的完成工作任務（也有可能是在跟打工人們搶飯碗）。這些智能化工具組可以分析大量現有數據，找出其特性，然后根據所提供的數據生產新的特性。這些工具可以幫助我們：自動生成多種布局，選擇視覺風格，生成演示模型、優化設計細節。
△ 設計團隊關注效率，使用組件化的協作方式
Sketch 中添加了顏色變量和組件視圖的新功能，使保持顏色一致性和使用組件變得更加容易。
值得思考的是，在技術越來越成熟和智能的現代社會，如何平衡所謂人工和智能呢？生成式設計不僅僅在幫助我們更的工作，另一方面，在未來也可能奪走本屬于我們的工作，畢竟 “鹿班” 的出現一度使 “美工們” 陷入恐慌。但是作為未來的設計師，我們必須相信，機器可以通過數據來相互學習，但它們還遠遠不能獨立思考，不能在美學、情感化等問題上與人類競爭，人類所需處理的問題，遠比機器要復雜。
△ 鹿班智能設計平臺
疫情期間，為了避免用手觸碰電梯按鍵，我們看到很多電梯都放置了紙巾、牙簽等物品，哪怕如今國內病毒有所控制，我們也已經習慣用鑰匙來戳一戳電梯按鍵。此后，語音聲控電梯在武漢防疫戰線調試運行。
眾所周知，科幻超英電影中，總會為我們展現未來世界的面貌，語音交互技術在此類電影中早已不是什么先進技術。早在 2014 年《超凡蜘蛛俠 2》上映之時，電影中就有個值得注意的小細節，女主角格溫（私心：超英系列最愛女主）所在的科技公司奧斯本總部的電梯，就可以通過語音交互來說出自己要去的樓層，同時還可以和漂亮的人工智能小姐姐對話。
△ 電影《超凡蜘蛛俠 2》奧斯本科技公司總部電梯內場景
△ AI 驅動的智能語音助手
除了語音交互，你們的身邊可能早早的就出現過體感交互的例子。例如微軟為 X-box 360 推出的外設周邊 Kinect，就采用了體感交互技術，操作者可以通過自己的肢體去控制系統，實現與游戲的互動。你只需站在大屏幕前，揮動手臂，即可完成一系列翻閱、確認等操作，回想一下，你有沒有在商場里見過對著屏幕過瘋狂切水果的熊孩子，體感交互技術正在慢慢跟上他們靈活的速度（年輕人不講武德）。去年 8 月，蘋果獲得了一項專利，該專利顯示或許有一天我們可以通過空中手勢來控制 AirPods Pro。
△ X-box 360 推出的外設周邊 Kinect
△ 體感交互助力 Apple watch，未來可能在表帶中也植入肌電傳感器
△ 硬件設備結合應用程序進行運動數據記錄
綜上，其實無論是語音交互還是體感交互，都不是新興的科技了，畢竟我們和 Siri 的罵戰都持續了好多年。但是相信到了 2021 年，伴隨便捷、安全、無接觸等后疫情時代的需求，無接觸式交互會得到更多廣泛的應用。
隨著 C4D 的大熱，3D 設計近幾年一直活躍在大眾視野中，目前大多應用在營銷活動、數據可視化、游戲等需要表達空間感和氛圍感的項目里，還沒有大規模的應用在日常的線上產品中。
△ 使用 3D 風格設計的游戲網站
△ Slava Kornilov 設計的車載導航系統
當 2020 年蘋果全球開發者大會發布了 macOS Big Sur 系統后，趨勢又產生了新的改變，Big Sur 中應用了大量新擬態風格的 3D 效果圖標。這一波操作必然是引起了大量爭議，期間涌現出一批對這套圖標進行優化的作品，擬物的熱潮就這么被重新點燃，3D 技巧細膩而自然的表現方式必然會引起大量設計師的關注。
△ 3D 風格的蘋果系統圖標
△ Flu AR Fluent 儀表盤
△ 3D 空間展示數據
伴隨著 VR 和 AR 技術的發展，2021 年 3D 風格會更加流行，無論是從操作性，還是視覺效果的角度，3D 風格都可以產生極大的突破。得物 APP 等線上商城紛紛開通了 AR 虛擬試鞋的功能，幫助用戶在足不出戶的情況下體驗 “真實上腳” 的效果。
△ AR 試鞋的功能已經普及
△ 基于 AR 導航的線上商店
精彩的動畫故事會吸引所有年齡段的用戶，畢竟誰都年輕過，都喜歡充滿奇幻元素和大膽想象的畫面。在界面設計中加入動畫元素，使簡約的界面和有趣的動畫相結合，不僅能吸引用戶，還能增添互動時的新奇感。
△ 加載動畫可以充分發揮創意
奇特好玩的界面動效和微交互已經不算 2021 年的新趨勢了，但趣味動畫的其他應用方式仍值得我們探討。畢竟任何動態演示都能比靜態圖像或純文本更能清晰有效的傳達你的品牌故事，并讓人輕松的看進去（尤其你可能是個“閱讀障礙患者”）。
微軟的設計團隊常常用動畫技術制作宣傳片來展示公司的新產品，2020 年較為火爆的是關于 Fluent Design 的系列動畫，下面這條經典作品傳達了如何將 Fluent Design 引入到 Office 移動端軟件中，且共享相同設計元素。動畫演示巧妙的展現了新圖標元素的構成，輕快的配樂配合圖標們可愛的變形，可以單片循環一整天。
△ 將 Fluent Design 應用于移動端的動畫宣傳片
△ Fluent Design 宣傳片的劇照，采用 3D 動畫的元素
設計中的動畫應該是有目的和有意義的，不僅要賞心悅目，也要能夠解決問題或傳達概念。動畫最重要的目的是解釋、簡化和加速交互過程，讓用戶不經意間嘴角上揚。
2021 年，趣味的動畫不僅僅是一種純粹的裝飾和娛樂，其在設計中的廣泛應用將持續成為設計師們熱議的話題，好玩的動畫就在那里，看你怎么用了。
有一種工程量很大的設計趨勢，其頁面布局和交互操作都特別復雜，使用復雜的動畫、渲染、插畫，用創新的交互吸引用戶進行互動，鼓勵用戶不斷進行探索。這種風格常常被用在技術型或創意型產品的網站上，可以表現出科技感和獨特感，體現出公司或團隊的能力。
△ Nathan Riley 設計的概念網站未來反思
△ Berezhnoy Eugene 設計的數據星球
△ Senko Holographic 設計的網站首頁，鼠標移動可與頁面進行交互
采用這種趨勢設計的網站并沒有統一的風格，而是各有各的特色，每一個的交互形式都極其創新，因為制作成本較高，通常是針對品牌定制化，下面將推薦幾個優質的網站，小伙伴們可以自己去試一試。
△ 設計師 Louis Ansa 個人作品網站
△ 3D 風格的蘋果系統圖標
△ Flu AR Fluent 儀表盤
△ 3D 空間展示數據
伴隨著 VR 和 AR 技術的發展，2021 年 3D 風格會更加流行，無論是從操作性，還是視覺效果的角度，3D 風格都可以產生極大的突破。得物 APP 等線上商城紛紛開通了 AR 虛擬試鞋的功能，幫助用戶在足不出戶的情況下體驗 “真實上腳” 的效果。
△ AR 試鞋的功能已經普及
△ 基于 AR 導航的線上商店
精彩的動畫故事會吸引所有年齡段的用戶，畢竟誰都年輕過，都喜歡充滿奇幻元素和大膽想象的畫面。在界面設計中加入動畫元素，使簡約的界面和有趣的動畫相結合，不僅能吸引用戶，還能增添互動時的新奇感。
△ 加載動畫可以充分發揮創意
奇特好玩的界面動效和微交互已經不算 2021 年的新趨勢了，但趣味動畫的其他應用方式仍值得我們探討。畢竟任何動態演示都能比靜態圖像或純文本更能清晰有效的傳達你的品牌故事，并讓人輕松的看進去（尤其你可能是個“閱讀障礙患者”）。
微軟的設計團隊常常用動畫技術制作宣傳片來展示公司的新產品，2020 年較為火爆的是關于 Fluent Design 的系列動畫，下面這條經典作品傳達了如何將 Fluent Design 引入到 Office 移動端軟件中，且共享相同設計元素。動畫演示巧妙的展現了新圖標元素的構成，輕快的配樂配合圖標們可愛的變形，可以單片循環一整天。
△ 將 Fluent Design 應用于移動端的動畫宣傳片
△ Fluent Design 宣傳片的劇照，采用 3D 動畫的元素
設計中的動畫應該是有目的和有意義的，不僅要賞心悅目，也要能夠解決問題或傳達概念。動畫最重要的目的是解釋、簡化和加速交互過程，讓用戶不經意間嘴角上揚。
2021 年，趣味的動畫不僅僅是一種純粹的裝飾和娛樂，其在設計中的廣泛應用將持續成為設計師們熱議的話題，好玩的動畫就在那里，看你怎么用了。
有一種工程量很大的設計趨勢，其頁面布局和交互操作都特別復雜，使用復雜的動畫、渲染、插畫，用創新的交互吸引用戶進行互動，鼓勵用戶不斷進行探索。這種風格常常被用在技術型或創意型產品的網站上，可以表現出科技感和獨特感，體現出公司或團隊的能力。
△ Nathan Riley 設計的概念網站未來反思
△ Berezhnoy Eugene 設計的數據星球
△ Senko Holographic 設計的網站首頁，鼠標移動可與頁面進行交互
采用這種趨勢設計的網站并沒有統一的風格，而是各有各的特色，每一個的交互形式都極其創新，因為制作成本較高，通常是針對品牌定制化，下面將推薦幾個優質的網站，小伙伴們可以自己去試一試。
△ 設計師 Louis Ansa 個人作品網站
△ 注重設計與科技結合的團隊 Letters
△ 科技公司官網 Farm
體驗后你會發現這類網站的視覺效果大多很驚人，交互方式充滿想象力。為了實現效果，團隊會產出高質量高標準的設計、投入大量的研發成本。當然，成也蕭何，敗也蕭何，特別的交互使頁面邏輯與我們常用的網站大相徑庭，吸引眼球的視覺使頁面繁瑣花哨，會導致信息難以順利傳遞至用戶。這違背了可用性原則和無障礙設計理念，如果想要使用這樣的方式設計產品，一定要在創新和可用性中找到平衡點。
在這個新時代，社會發展十分迅速，整體節奏都很快，互聯網產品的操作效率需要隨之加快，用戶體驗的每一步流程都要仔細斟酌，是否還能再精簡一些、再快捷一些，我們的目的是幫助用戶更的完成目標，因此輕量化體驗必然是永恒的課題。最明顯的例子就是登陸功能的簡化，從早期的賬號密碼，到后來的驗證碼登陸、第三方賬號登陸、人臉識別登陸，用戶已經不需要記住密碼，也不需要一步一步的輸入信息，一切都變得更加快速、更注重實用性。試想會不會有一天，人們一出生就得到一個永久賬號呢。
△ Surja Sen Das Raj 設計的極簡風 APP
不光是交互操作，界面的視覺風格也正朝著輕量化設計的方向前進，如果你一直在留意 Dribbble 熱門作品，會發現大部分都具備簡潔清爽的特點。極簡的配色和核心功能的突出，可以幫助用戶聚焦于重點信息；同時，我們可以結合信息層級的整合來降低用戶的外在認知負荷，進一步減少用戶的學習成本，使用戶更容易集中注意力；不僅如此，我們還可以適當為核心元素添加一些微動效，使界面更具有溫度感的傳遞操作反饋。
△ Akshay Devazya 設計的求職 APP，注重頁面 Z 軸的空間感
△ Dmitriy Kazarov 設計的極簡風官網
△ Choirul Syafril 設計的云存儲后臺界面
△ 可愛的微動效交互
隨著科技的飛速發展，輕量化可能是未來各個行業產品設計的趨勢。以游戲行業為例，從早期風靡的單機游戲到現在隨時可以面對面開黑的手游，主流玩家漸漸將自己的游戲陣地轉移到手機上，無論是畫面精致度還是游戲流暢感，手游都可以提供優質的體驗，今年火遍全球的游戲英雄聯盟也發布了手游版本。還有一個輕量化的案例，就是我們的小程序，微信、支付寶、百度紛紛發布了自家的小程序，我們已經可以在一個 APP 里使用多家公司的產品功能了。
設計趨勢是循環的。用戶體驗設計的新趨勢每年都會推陳出新，但也有很多趨勢，幾年后又會卷土重來，這也是為什么復古總會成為一種潮流。設計是手段，不是目的。 比起緊隨潮流，更重要的是理解趨勢背后的價值和意義， 創造有價值的設計作品，趨勢就會成為你的那陣東風。
文章來源：優設網 作者：TCC設計情報局
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
元旦過后，新的一波工作又要開始了，我在開始準備新一輪匯報材料的時候突然想到了一個問題，不知道鐵子們在往年參加設計評審的時候，有沒有總被老板 diss 設計稿里“太空了” “不夠飽滿” 這些個問題呢？
我猜測應該 99%的鐵子經歷過，我也不例外，從校招進到第一家公司就開始被植入頁面需要利用好每一像素的理念，搞得像北京房價一樣寸土寸金，生怕被浪費了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來聊聊排版的問題：
如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強的對比，還有一些微妙的層級關系。
坦誠的講，我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格；
1. 瑞士風格
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在；這種一絲不茍，傳達準確的風格，即所謂瑞士國際主義風格。簡單的說，由于 Swiss Design 這種風格簡單明確，傳達功能準確，因而很快得到世界范圍內的普遍認可，成為戰后影響最大的一種平面設計風格，也是國際最流行的風格，因此，又被稱為國際主義平面設計風格；
簡單的說，瑞士的這種設計風格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網格 / 非常理智的克制顏色的使用 / 層級關系；有趣的是，審美和潮流是循環的，隨著時代的發展，越來越多的 app 開始重新挖掘出來瑞士風格并加以使用，比如我們 iOS 系統自帶的應用們，Spotify：
年少的時候，我經?？粗@些個 app 會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內容，同樣也是構成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網頁亦或者是 UI 界面，在沒有可用的裝飾下，信息本身要承擔起裝飾和傳達的雙重功能，這就是瑞士風格的核心本質。
2. 擬物風格
iOS 是擬物的典型代表，網上對于這塊的講解已經過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：
通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設計觀，PS.不管錘子科技現在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻，respect！
毫無保留的說，我的設計就是二者的融合，以 層次對比 作為核心理念。
啰嗦了半天，趕緊進入正題；如果你是一名產品體驗設計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；
同樣，在嘈雜的視覺結構里，畫面也需要奧卡姆剃刀，當你在對畫面的飽和上困擾不已，并急于找到一些背景和紋理填充的時候，我建議你先冷靜一下…因為頁面的空虛未必是需要實體化的東西來填充的；上文有說過以 “層次對比” 作為核心理念出發，要區別于平面設計，營造一個立體空間，所以先理一下畫面結構：
通常來講，如果想要不平，把二維空間轉化成三維空間是必要的一步，需要在 Z 軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當然，虛實的對比對信息的呈現和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：
另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結構，把內容和自然物質擺進去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：
整個 case 下來，你會發現用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質可以很好的幫助畫面分層，以達到填充的效果，并不是一定要依賴于實體化的裝飾。
對了，如果你跟我一樣閑著沒事干的話，借用 keynote 的動畫效果做一個吊炸天的動效，一定可以成為匯報場上最靚的崽（注意：視頻有音樂）！
keynote 素材和視頻可在開頭/文末下載
本來不打算再開一個章節說這個，但還是覺著很有必要再說下（我好糾結），作為 PPT 來講，ta 的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關愛；
以上圖為例（實名 diss 自己的作品），坦誠的講左邊的部分大多數觀者是不會有心思來看的，按照視覺系統的處理，這部分就會被當成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設計師必要的職責之一。
想問一個問題，鐵子們覺著 UI 的本質或者作用是什么？從我個人的角度來講，UI 設計的本質就是對信息的整理歸類和編排，沒有什么比信息更重要，如果貿然為了飽滿加入一些裝飾元素，很有可能是本末倒置，得不償失。這就像喝酒一樣，喝醉很容易，但微醺的感覺才是最棒的，希望你能有個好心情迎接美好的一年～
文章來源：優設網 作者：負能量補給站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在當今互聯網快速發展的情況下，每個行業競爭都非常激烈，所以對于我們設計師而言，有時候項目的周期也非常緊迫，導致當我們接到需求時，很容易會遇到這樣的問題：需求方解釋不清楚，設計師不知道從何開始，對項目也是不了解，后面臨時想到什么就問什么，使我們工作效率低下，也會讓對方覺得你很不專業，做完的方案，需求方不滿意，改了又改，浪費了很多寶貴的時間。
那么我們如何在項目周期緊迫的情況下，通過有效的溝通準確的輸出運營設計方案呢？下面，我將和大家分享一些我在日常和需求方溝通的一些小技巧。
所謂有效的溝通，是通過聽、說、讀、寫等載體，通過演講、會見、對話、討論、信件等方式將思維準確、恰當地表達出來，以促使對方更好的接受，使雙方就某個問題可以達到共同認識的目的。
當接收到一個設計需求時，不要忙著動手開始做，要先去與需求方溝通清楚，如果少了前期的溝通，后期你可能會在無休止的改圖中，一點點的不僅失去了耐心，還磨滅了激情！
首先了解項目背景、活動的文案和玩法以及活動的目標及用戶人群。
根據活動的文案和玩法去網上搜索一些針對性的有啟發性的圖片案例作為參考，用來初探需求方的喜好，明確接下來該走的方向，最后達成對風格的整體認知。同時要整理好自己的設計思路。
隨時記錄
帶著前期準備的內容去和需求方溝通，把自己的一些設計想法給對方講清楚，這樣做能保證我們在和需求方討論的時候能做到心中有數，不會被牽著走！
與需求方溝通時隨時記錄在溝通中對方的想法，比如需求方想重點突出表現什么，想營造出什么樣的氛圍等。也可以記錄在討論中一些好的創意，再結合自己的思考運用到實際中。
「溝通過程中的 3 個小技巧」
先聽：這一階段很重要，一定要以求知的心態去了解需求，不要拿著一個自認為的結論去溝通，因為產品在提出需求時，也一定是經歷過多次推翻自己的想法，最后才選擇的這一版方案及玩法。
后問：這個時候有不明白或者沒有理清的地方要及時的提問，問題要明確，避免后期重復溝通。
再復述：將接收到的信息總結后與對接人復述，查漏補缺，確認下沒有出現任何的遺漏。
達成共識
前面的所有點都確定好了之后，這時候我們已經與需求方達成共識，就可以進行設計階段了。
下面我將通過實際案例，具體說一下我是怎么通過有效的溝通與產品達成共識，從而減少多次改稿的問題的。
項目背景：
此次雙 11 大促活動借助京東這一平臺，增加品牌的曝光度，吸引用戶下單，為業務線吸引更多的流量，促進轉化率。
頭圖文案：
活動的玩法：通過預售提前付定金，享受折扣這樣的活動方式來吸引用戶。
針對的用戶人群：用戶群體年輕，女性占比較高，超過 80%的用戶在 35 歲以下。
參考的搜集和對設計的想法
由對第一點的總結，得出設計目標：
參考圖的搜集:
了解完項目的背景，和對項目進行初步的思考之后，就可以帶著自己的想法和參考圖去找需求方溝通。
隨時記錄
給需求方看參考圖，他們對用 C4D 搭建場景的創意表示認同與支持，也很期待。
在討論時也說出了他們的訴求（這時候要拿小本本記下，好記性不如爛筆頭）：
達成共識
與需求方溝通完需求之后，心里有了方向和發力點，結合需求方的訴求和自己的思考，就可以胸有成竹的往下進行了。
這幾個步驟雖然看似簡單，但是做到了這幾項，產出的設計稿可以減少改稿的次數！
最終設計結果：
把需求方說的每個點都著重考慮到，以免等完稿的時候再修改。
最后我們來回顧總結一下
不管項目大還是小，每次做完都要去做一個總結復盤，把遇到的問題記錄下來，多思考是哪個環節出了問題，或者請教有經驗的同事,逐步優化自己的溝通流程。養成良好的溝通技巧，這樣對于在下一次接到新需求的時候不至于手忙腳亂，做到心中有數，這樣會大大的提高自己的工作效率！
如何有效溝通是一個需要長期去總結思考的事情，只要掌握方式方法，再經過刻意練習，就一定會有好的結果。
文章來源：優設網 作者：58UXD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
完美，不是因為沒有什么可以增加，而是沒有什么可以減少。
創建美觀、可用和的 UI 界面需要花費時間進行設計細節的打磨，本文從視覺和情感化設計兩個方面來說說如何提升 UI 設計的高級感。
在互聯網產品日趨成熟的今天，你會發現所有的 App 越來越像，似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。一個 App 設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的 UI 設計。本節總結了 12 個簡單直觀的提升設計感的小細節，一起來學習。
在對 UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。
每種顏色都有一個視覺權重，這有助于在內容中建立層次結構。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在 UI 設計的時候，通常兩種不同的字重足以營造出優秀的層次感：
大多數的文本采用正常的字重（400 到 500，具體取決于字體）
對于需要強調的文字采用較重的字重（600 到 700，具體取決于字體）
△ 主標題字重為600，其他標綠點的文字字重都為400
應當盡量不要讓正文部分字重低于 400，因為這一部分字體本身尺寸已經較小，低于 400 會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
△ 左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相的顏色
其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
選擇一種基礎色，再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
陰影是 UI 設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。
陰影不一定是黑色的，還有一種擴散陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。在 UI 設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。
標簽欄作為一個 App 的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。通常，大多數 App 都是使用 iOS 規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了。要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D 立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。
Tab 是 App 設計中最常見的控件之一，它源自 Material Design 的設計規范?，F在很多 iOS 產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于 iOS 規范當中的分段選擇器變得不那么常見了。
在視覺表現形式上，Tab 和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。例如蝦米音樂的 Tab 選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的 Tab 就被創造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為 Tab 選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到 Tab 的設計上，既讓界面視覺，又進一步強化了用戶對品牌形象的認知。
在 UI 設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內容更聚焦。
使用不同的背景色來區分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。
增加額外的留白
創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是 UI 設計中的常用手法。
在 App 中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數 App 的設計需求。但會出現一個問題就是，系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類 App 中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
大多數 App 都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。一個設計精致的 App 不應漏過任何的細節，我們可以以自家 App 的圖標風格為依據，對第三方圖標進行優化設計。
App 中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經?？吹轿淖织B加在圖片背景上的設計樣式，為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
圖片的質量影響著整個 App 的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想。而低品質的圖片會瞬間拉低 App 的質感。在 App 設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
現在的 UI 界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。
心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時，使他產生情感的變化，那么產品便不再冷冰冰，他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之后，追求更高層次的目標。
1. 提示性文字
語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產品的新的生命力。例如 App 那些 push 推送通知，因為用戶每天收到的 PUSH 實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的 PUSH 文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。
2. 下拉刷新
下拉刷新是用戶在 App 使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用戶任何的情緒。
下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如 uc 頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌 logo。作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。
3. 頭像設計
個人中心頁與用戶信息密切相關，用戶的虛擬形象在這里得以展現，常見的設計是一個用戶頭像加登陸文字的形式，這種默認的頭像設計無法得到用戶的認同感。
現在很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用戶的屬性，讓用戶產生一種身份的認同感。
4. 缺省頁化解負面情緒
通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用戶心理造成很大的落差，陷入負面情緒中。情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景，讓用戶會心一笑，使產品充滿了趣味性。
5. 標簽欄微動效
情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果。通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。精心設計的動態效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。
6. 模擬用戶行為
如果一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。
情感化設計可以拉近用戶與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產生了。例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。
再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。
7. 有趣的細節設計
俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。 在 UI 設計中，有些有趣的設計是隱形的，需要用戶自己去發現，當用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強用戶對產品的探知欲。例如在電腦端打開 B 站的鬼畜區長按這個返回圖標 10 秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回頂部」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！
有些有趣的設計又是顯性的，目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的 ID 在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕，讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。
總的來說：UI 設計的“高級感”意味著在視覺層面要從細微之處著手，創造出精致富有設計感的畫面；另一方面要從情感化設計出發，使用戶與產品產生情感上的共鳴，獲得更高層次的使用體驗。
好的學習方式就是把日常積累的知識點匯總并講出來才能真正為自己所有，新的一年愿每位設計師都能繼續保持對設計&生活的激情和熱愛。希望這篇文章對你有所幫助。
文章來源：優設網 作者：印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：如今可以說是短視頻時代，各種短視頻平臺充斥著我們的娛樂生活，在如此快節奏的時代，碎片化的時間剛好可以被短視頻滿足；本文作者分享了關于短視頻【單列沉浸式】的分析，我們一起來看一下。
誰能統一短視頻領域？
抖音？快手？還是視頻號？
目前來看，這個答案是【單列沉浸式】。
準確來說，單列沉浸式不是一款產品，而是一種產品形態。
過去這一兩年，抖快兩極越發明顯，格局變化不劇烈的短視頻領域發生的一個還算比較明顯的變化是，所有的短視頻都開始在產品形態上向抖音看齊了。
包括快手、微信視頻號，甚至微博小視頻，主流的短視頻產品都已經全面擁抱單列沉浸式。
圖：抖音（左1）、快手（左2）、視頻號（左3）、微博（左4）
這是不是可以證明單列沉浸式就是短視頻消費的最佳形態？
無論是成熟的老產品快手和微博，還是初出茅廬的新產品視頻號，為什么短視頻難逃單列沉浸式的真香定律？
如果要找一個正確的角度去切入，主要包括三個維度：
單列VS雙列，沉浸式VS非沉浸式，到底區別在哪？為什么說單列沉浸式是更加適合短視頻的消費呢？
短視頻是高度碎片化、kill time式的消費，這個消費有個非常大的特征，就是無腦，也就是用腦成本極低。
圖：系統1（左）、系統2（右）
我們在刷短視頻的時候，大部分時間是處于左邊的系統 1 狀態，是快速的、本能的、自動化、情緒化的大腦工作狀態，用腦成本低。
為什么同樣是2個小時，明明可以完整看完一部電影，很多人仍然選擇用短視頻來消費？就是因為看短視頻不需要動腦，只要被動的接受平臺投喂的多巴胺、腎上腺素和荷爾蒙，產生愉悅感就好。
長短視頻獲得的快樂自然是不一樣的，長視頻雖然也大量充斥著價值極低的內容，但普遍認為長視頻的內容價值遠遠高于短視頻；因為長視頻是比較完整、系統的去闡述，比如說長時間鋪墊后的高潮、明線暗線的多方交織、一波三折、高潮迭起的情節等；而這些更加高級的價值感都是需要大腦去思考、分攤到時間上面才有意義的。
用戶在看長視頻是相對高喚醒的狀態，在看短視頻是相對低喚醒的狀態。
單列沉浸式是更加完美的契合這種無腦狀態的，因為它的消費成本更低、體驗更好。
首先是單列相比較于雙列，是更加短平快的消費方式，可以減少用戶的思考、選擇和操作。
在單列中，用戶切換視頻只需要上下滑，播放完自動切換甚至無需成本；而雙列中，用戶需要返回重新選擇并點擊觀看；切換視頻的成本，雙列高于單列。
圖：單列消費路徑（左）、雙列消費路徑（右）
短視頻因為時長極短，意味著用戶在單次消費的過程中會消費非常多的內容單元，每多消費一個內容單元，雙列與單列的成本差就會進一步擴大，雙列成本相對的就越高，單列成本越低。
因為單列消費路徑短、消費成本低，在相同的時間內，單列比雙列能夠看到的視頻數就更多，效率就更高。
當然，雙列可以給用戶更多的選擇，提高系統整體的容錯率，但是這個選擇的收益本身就不大；因為短視頻價值極低，時長又極短、消費成本極低，這代表著選擇的ROI低、選錯的成本也低。
不妨將選擇的成本分攤到視頻消費時長中，長視頻因為時長很長就會比較劃算且必要性強，而短視頻因為時長極短就不劃算且必要性弱。
而且現在推薦系統越來越準，在短視頻的消費中比人的主觀選擇還要準，基本上是抹掉了選擇帶來的收益，還省了選擇的成本。
所以單列是比雙列更加適合短視頻的。
而沉浸式為什么比非沉浸式更加合適，是因為沉浸式可以使用戶更快、更好的進入視頻情境之中；而忘記真實世界的情境，因為沒有其它視頻信息的干擾，能夠讓用戶只專注于當前的視頻。
圖：可對比視頻號單列沉浸式（左）和單列非沉浸式（右）
抖音負責人張楠曾經將抖音的成功在消費端歸結為“全屏高清、音樂、個性化推薦、傳遞美好”四個因素。
全屏高清其實對應的就是沉浸式的消費體驗。
手機中的原生相機拍出來的視頻就是全屏的，如果將一模一樣的短視頻放在不同的尺寸上去看，全屏效果無論是視覺沖擊力，還是進入其中、身臨其境的感受上都是最強的。
這說明全屏高清是當時沉浸式在視頻尺寸和清晰度上體驗最好的形態，到了現在，全屏依然是最佳，清晰度卻已經變成了1080P甚至更高。
單列沉浸式的消費體驗更佳、成本更低，且非常適合短視頻這種無腦式的kill time消費，自然是最佳的消費形態。
同時，這種形態也是產品上癮的基礎之一。
為什么刷抖音會上癮，停不下來，一刷不知不覺就一兩個小時了？
主要的原因可以歸結為兩個，第一個是用戶持續無腦、愉悅的狀態，跟短視頻的內容有關；第二個則是因為單列沉浸式上下滑。
沉浸式的視頻構建了專注的情境，讓人忘了時間的流逝；而單列上下滑切換視頻成本極低，切換時間極為短暫，這點非常重要；因為這意味著用戶基本無縫切換視頻，無腦、愉悅的狀態不會因為切換而被打斷；上下滑簡單、不用思考，容易形成習慣，甚至是自然反應。
用戶打開抖音不知不覺就繼續看下去了，不喜歡就立即劃走，像個快樂的魔盒，沒有盡頭，自然而然就上癮了。
上癮后用戶時長也就增加了。
時長的增長可以看做是短視頻目前階段絕對的核心指標，首先是因為短視頻本來就是殺時間的利器，時長代表著一切；其次則是因為短視頻用戶數量的增長已經趨緩，只能靠爭奪時長來保持增長。
這也是為什么那些原本不是單列沉浸式的短視頻敢改版的原因，強推一個新的功能尚且要考慮用戶的舊習慣、是否接受、學習成本如何，何況這是完全另一種產品形態。
單純拿用戶體驗提高是無法有效說動的，因為沒有數據去論證用戶體驗到底提沒提高、提高了多少，大廠的產品運營都背著嚴重的KPI或OKR，但是用戶時長的增長就是最有利的支持。
單列沉浸式對于平臺商業化的貢獻其實可以基本從單列的角度去分析，主要有兩個層面：
NO.1 單列的變現效率遠高于雙列。
以目前最主流的信息流廣告為例。
單列比雙列消費的路徑短、成本低，同樣的時長內，單列比雙列能夠消費的視頻總數更多，也就意味著可消費的廣告更多。
更重要的是，單列的內容推薦完全由系統決定，用戶無法選擇，系統對流量可以做到100%的精準把控，決定推薦給用戶內容就內容，決定推薦給用戶廣告就是廣告；抖音可以做到讓廣告跟內容一樣100%的曝光到用戶面前，目前抖音基本上是每5個內容就插一條廣告。
雙列由于在消費路徑上，還需要用戶去選擇點擊觀看，意味著轉化路徑多了一個環節：從瀑布流的圖片封面到內容觀看的CTR轉化率。
雙列形態下，廣告的CTR是不可能達到跟內容一樣的。
據快手《2019快手創作者報告》披露，快手的內容CTR為20%，但是根據【亂翻書】對實際從業者的訪談，內容CTR和廣告CTR的差距要比想象中更大，甚至達到5-10倍的差距，也就是廣告的CTR可能只達到1%-2%。
當然，有人說雙列因為有了用戶主動選擇來表示較為明確的需求，所以理論上是可以為每個點擊收取更高的價格，類似于搜索廣告的價格遠大于展示廣告，有沒有可能正負為零，完全彌補曝光率的不足？
很大程度上是不可能。
雙列仍然是展示廣告，它跟單列的差距會在一個有限的范圍內，搜索廣告之所以點擊價高出這么多；除了明確的意圖帶來的高匹配度之外，另外一個很重要的就是搜索是比較急迫的需求，急迫的需求+高匹配度才使得搜索廣告的溢價高。
而日常我們刷抖音快手這些娛樂性質的短視頻是沒有這些急迫的需求的，是需要短視頻平臺展示的廣告來切中或者激發我們需求的；這也是為什么雙列形態下，廣告的CTR達不到跟內容一樣的原因，娛樂性的內容跟廣告的內容是不統一的，用戶的心理接受度也不會很高——用戶上來是看包袱消磨時間的，不是買買買的，而人的主觀選擇也會趨向于避免廣告。
那么單雙列展示廣告的點擊價的高低就來自于命中需求的準確程度+展示效果了，準確率由推薦系統決定，關乎算法和數據；而數據的維度是來自于非常多層面的，不僅僅只是點擊廣告的數據，所以這方面就算有差距也很難說差距多大；而展示效果的話，單列沉浸式的【大屏+視頻】的展示效果遠高過雙列下的【小屏+圖片】。
所以很可能的結果是，單列和雙列的廣告點擊價之差在一個合理的范圍內，是很難完全抵消掉內容和廣告CTR的差距的。
這樣綜合來看，單列的變現效率是高于雙列的。
單列不僅增加了用戶整體變現的時長，同時也提高了整體變現的效率，因為增加的變現時長不僅僅來自于新增的總用戶時長，也來自于搶奪了其它消費形態下的時長；比如說快手的單列會搶奪雙列的時長，而因為單列變現效率比雙列高，所以也提升了變現時長在用戶消費總時長中的比例，提高了整體的變現效率。
NO.2 單列雙列會造成不同的內容生態，影響到公域和私域的強弱，進而影響到平臺的整體變現效率。
單列相較會強內容、弱關系，因為單列完全是系統推薦什么看什么，容錯率低，系統往往就傾向于推薦頭部優質的內容；而雙列就弱內容、強關系，因為雙列除了系統推薦之外，還要用戶主動選擇，加強了整體的容錯率，所以系統推薦的內容就會更加多元。
相較而言，前者私域弱、公域強，后者私域強、公域弱，而公域強才有利于平臺變現。
公域強意味著平臺對于流量的掌控權，快手老員工就在內部信中提到：
雙列下kol的私域流量粘性太高太強勢，很不利于我們把用戶的arpu（每用戶平均收入）持續做高(直播電商雖然現在勢頭很好，但本質是kol的私域流量太強，所以我們公域的短視頻推小店效果不好)，那么今年流量分配也要重新調整……
私域強是有利于平臺創作者，公域強才能肥了平臺自身，淘寶、拼多多和美團等超大型交易平臺之所以收入這么高都是因為強公域，更好的掌握了流量的分發權，進而更的變現；抖音之所以成為超級印鈔機，也是因為完全掌握了流量分發，公域能力極強。
單列可以將流量的分發權更加集中在平臺的手上，提高了平臺整體的變現效率。
或許是基于單列沉浸式在商業化上的這些優點，現在連以雙列和中視頻為主的B站都坐不住了，也開始加入單列沉浸式。
圖：B站的【單列沉浸式】
B站因為文化氛圍好、私域強，無論留存還是用戶時長都很理想，但就是整體變現效率低：雙列下信息流廣告不好變現，同時也為了文化氛圍而束手束腳。
新開一個單列沉浸式可以說是創造了新的消費場景，同時也有助于提高變現效率。但中視頻在B站的單列沉浸式的視頻中占據著比較大的比例，未必會真香。
短視頻之所以真香，歸根到底還是跟短視頻這種載體和消費場景密不可分。
短視頻因為沖擊強（體驗好）、消費成本低，所以非常適合碎片化、kill time式的消費。
沖擊強跟視頻這種載體有關，視頻比文字、圖片的沖擊性更強；
而消費成本低則跟時長有關，因為時長極短，所以消費成本極低，同時時間彈性也極高，又因為時長短，很難承載比較有深度、有價值的內容；再加上碎片化的消費場景，所以用腦成本極低，看短視頻大多數時候都是無腦狀態。
商業的進化必然是往體驗更好、成本更低、更加的方向去進化，單列比雙列、沉浸式比非沉浸式的體驗更好、消費成本更低，更符合短視頻碎片化、kill time式的無腦消費；
但B站的中視頻已經有點脫離了這個場景，中視頻已經可以承載一些有深度、有價值的內容，很多人在B站也并非完全是單純的kill time，而是看財經、漲知識等，需要用腦思考，消費成本也比較高。
在這個場景下，雙列的多選擇、強容錯就是有必要的，因為選擇的RIO變高了，選錯的成本也高了，所以B站做單列沉浸式未必會有短視頻這么香。
當然，B站也可以學微博，單列沉浸式只展示短視頻，無異于在內部開一個抖音，創造一個完全的短視頻產品。
具體會如何，拭目以待吧；希望對你有幫助。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
