天貓海信中央空調旗艦店-雙十二主頁面
已于雙十二更換使用
本來是雙十一建的模使用的，頁面都做好了，后因配合線下活動修改了頁面，使用了線下海報改版的頁面度過了雙十一，所以就不上傳雙十一的圖了，抱著既然做了就不能浪費的原則，雙十一改成十二就上線使用了。
（PS：第一次使用C4D，一邊百度一邊建模，一邊百度一邊打光調材質做的。。。）
僅用于展示，未經允許，請勿用于任何用途
轉自：站酷
作者：杜失憶
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做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）采用有序排列，軸標簽右對齊
對多個數據系列排序時，如果不涉及到日期等特定數據，最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數據。
可以通過升序或降序排布，例如按照數量從多到少來對數據進行排序，也可以按照字母順序等來排布?？傊凑者壿嬇判蚩梢砸欢ǔ潭壬弦龑藗兏玫亻喿x數據。
（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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
