2021-1-12 周周
做To B的同行都知道，降本增效一直是企業(yè)中后臺繞不開的熱點(diǎn)話題，現(xiàn)任公司業(yè)務(wù)涵蓋倉（WMS）、運(yùn)（TMS）、配、人（HRM），所做項(xiàng)目雖功能各異，但是有一個(gè)共同點(diǎn)-大量使用表格。本文受有贊設(shè)計(jì)師@美芳的啟發(fā)，將我日常工作通過優(yōu)化表格來提效的思路整理成文章，一方面是對企業(yè)后臺的數(shù)據(jù)表格作一個(gè)簡單的階段性總結(jié)，另一方面給部門做一個(gè)年終分享。
表格是展現(xiàn)數(shù)據(jù)最為清晰、的形式之一，它也是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同。在企業(yè)級中后臺中，常應(yīng)用于：
一次性瀏覽大量信息-很多圖表類型無法展示數(shù)據(jù)特點(diǎn)，而表格是組織大量信息通用性最高的一種表達(dá)方式，既可陳列信息，又可以表達(dá)信息之間的關(guān)系；
信息之間需對比-表格的歸納與分類，便于用戶快速查詢其中的差異與變化和關(guān)聯(lián)；
快速確定并執(zhí)行多種復(fù)雜操作-如對信息進(jìn)行搜索、篩選、增刪改等。
通常表格的組成元素以及相關(guān)元素會有多個(gè)部分，根據(jù)不同粒度的用戶目標(biāo)將其解構(gòu)為三部分：
數(shù)據(jù)查看：表格的核心-顯，用戶用來閱覽、對比和分析數(shù)據(jù)。
數(shù)據(jù)過濾：輔助作用，承載表格的查功能，將數(shù)據(jù)過濾，方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方。
數(shù)據(jù)操作：輔助作用，承載表格的增刪改的功能，比如常見的“新增”、“刪除”、“編輯”按鈕。
首先，我們要明確，什么是一個(gè)好的表格？筆者認(rèn)為好的數(shù)據(jù)表格可讀性要強(qiáng)，應(yīng)便于用戶對信息進(jìn)行快速的掃描、查詢、過濾、分析等操作，以獲取數(shù)據(jù)并快速準(zhǔn)確地完成目標(biāo)任務(wù)。一個(gè)結(jié)構(gòu)清晰的布局能大大提升用戶對信息的接收速度和理解程度，拆分到表格的設(shè)計(jì)目標(biāo)就是：易讀、易查找、易操作。
數(shù)據(jù)檢索區(qū)可以看作表格的導(dǎo)航，按預(yù)定目標(biāo)過濾出某種具有特定性質(zhì)的數(shù)據(jù)，將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于快速查看查看、對比、分析信息的操作過程。從用戶角度出發(fā)，按不同粒度的數(shù)據(jù)檢索方式分為3種方式，分別對應(yīng)不同程度的用戶。
搜索：當(dāng)用戶有相對明確的選擇目標(biāo)時(shí)，需定點(diǎn)查看，數(shù)據(jù)多且雜亂無規(guī)律；
篩選：用戶目標(biāo)相對比較模糊，游離于一個(gè)大概的范圍時(shí)，通常用于一些有清晰分類的數(shù)據(jù)；
標(biāo)簽：查看無交集的數(shù)據(jù)內(nèi)容，通常伴隨時(shí)間、狀態(tài)的流轉(zhuǎn)。
搜索可以幫助用戶在巨大的信息池中縮小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。由于考慮到用戶需要手動輸入，很難保證精準(zhǔn)搜索，原則上所有搜索均為模糊搜索，必要精準(zhǔn)搜索的地方使用篩選功能，給用戶提供篩選選項(xiàng)。通常上端搜索欄不被限定搜索范圍，可以全部搜索。
優(yōu)點(diǎn)：減少精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)
缺點(diǎn)：容易把不相關(guān)的
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高
缺點(diǎn)：不方便，每次只能對單一條件進(jìn)行搜索
篩選可以幫助用戶縮小數(shù)據(jù)范圍，逐步找到想要的內(nèi)容；或者當(dāng)用戶的目標(biāo)就是查看某一范圍的數(shù)據(jù)時(shí)，篩選將是一種十分快捷的方式。在企業(yè)級中后臺產(chǎn)品中，篩選的使用場景通常是后一種。
優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用
缺點(diǎn)：無法直觀看到所有篩選項(xiàng)
優(yōu)點(diǎn)：操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件
缺點(diǎn)：空間利用率低，不適合選項(xiàng)太多的情況
優(yōu)點(diǎn)：篩選當(dāng)前列，更直觀，一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高
缺點(diǎn)：篩選的內(nèi)容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學(xué)習(xí)
使用場景：標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容。主要樣式有基礎(chǔ)、卡片、膠囊等。
優(yōu)點(diǎn)：根據(jù)標(biāo)簽，可以很清楚知道劃分，切換tab就可以篩選內(nèi)容。
缺點(diǎn)：分類需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒有交集，分類不能過多，超過7±2個(gè)選項(xiàng)可選擇下拉篩選。
提升用戶體驗(yàn)的一個(gè)小細(xì)節(jié)：默認(rèn)用戶最關(guān)注的選項(xiàng)，而非全部，這樣可以縮短查詢路徑，同時(shí)給出條目，讓用戶清晰明了每個(gè)選項(xiàng)的數(shù)量，便于操作。
在企業(yè)級中后臺中，用戶查看的數(shù)據(jù)往往屬性較多且不唯一，通過簡單的檢索方式很難定位到目標(biāo)數(shù)據(jù)，所以，在實(shí)際使用時(shí)，常會將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、標(biāo)簽切換組合出現(xiàn)，形成多屬性組合檢索。這種檢索更適合于專家用戶，他們對于目標(biāo)數(shù)據(jù)有明確的定位，知道可以通過哪些屬性定位到自己想要的數(shù)據(jù)。
平鋪顯示
選用對用戶決策有意義、操作頻次高的屬性作為直接展示的組合檢索條件，建議數(shù)量最好不超過5個(gè)（7±2法則）。
優(yōu)點(diǎn)：大而全能最大限度避免檢索條件疏漏的可用性問題
缺點(diǎn)：易用性不高。大而全可能為用戶帶來繁雜的第一印象，都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時(shí)間。
折疊展示
如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的；則可通過折疊的方式將這部分檢索條件隱藏起來，將高頻率使用的、數(shù)據(jù)覆蓋面廣的1-3個(gè)屬性直接展示出來。
在設(shè)置組合檢索項(xiàng)時(shí)，應(yīng)考慮每一項(xiàng)檢索甚至是多屬性組合檢索是否有必要。需從實(shí)際場景出發(fā)，根據(jù)用戶對各個(gè)檢索項(xiàng)的使用頻率及組合檢索項(xiàng)的數(shù)量，來決定組合檢索項(xiàng)是直接展示還是折疊展示；以及哪些屬性直接展示，哪些屬性折疊展示，為各檢索項(xiàng)安排合理的展示方式。
產(chǎn)品現(xiàn)狀：前言中提過，我司業(yè)務(wù)涵蓋WMS、TMS、HRM，業(yè)務(wù)極其復(fù)雜，數(shù)據(jù)種類字段眾多，使用的檢索方式為組合篩選平鋪展示，一半以上的頁面篩選項(xiàng)超過了9個(gè)（不符合7±2原則），大而全的檢索方式一方面占據(jù)首屏大部分空間，導(dǎo)致首屏屏效低；另一方面用戶在尋找具體篩選條件時(shí)，仿佛大海撈針，增加了用戶決策時(shí)間。因后臺數(shù)據(jù)涉密，將下圖-招聘中可公開的頁面作為案例來可大家分享。
設(shè)計(jì)優(yōu)化方向：
業(yè)務(wù)目標(biāo)-提升招聘人員的檢索效率 ；
設(shè)計(jì)目標(biāo)-縮短檢索路徑，減少檢索區(qū)占用的屏幕空間，提高首屏屏效，將展示區(qū)域更多留給表格；
設(shè)計(jì)策略-按照用戶場景檢索路徑、檢索頻次設(shè)計(jì)信息
但還有2個(gè)關(guān)鍵問題：用戶場景有哪些？查詢路徑是什么？哪些檢索頻次高？依據(jù)從何而來呢？通常有兩種方式：
依據(jù)一：數(shù)據(jù)埋點(diǎn)，每個(gè)操作埋個(gè)PV（點(diǎn)擊量）,一個(gè)月后再看每個(gè)操作的數(shù)據(jù)量；
依據(jù)二：用戶調(diào)研，通過【問卷投放】或【用戶訪談】，深入理解用戶真實(shí)使用場景以及與業(yè)務(wù)之間的關(guān)系。
我采用的用研方式是用戶訪談，原因是由于招聘人員和我們產(chǎn)研人員在一個(gè)園區(qū)，調(diào)研方便，得出數(shù)據(jù)的時(shí)間比埋點(diǎn)短；而相比【問卷投放】，用戶訪談能細(xì)到具體某個(gè)字段在場景中的作用。訪談的過程因?yàn)槠蚓筒辉诖司唧w講述，大家可根據(jù)自己的實(shí)際情況選擇適合的用研方式。
訪談中了解到，招聘人員的工作是發(fā)布崗位信息，快速招到合適的人。因此他們在該頁面的TOP場景就是對崗位上下架，即【新增】和【刪除】，而檢索的TOP場景有哪些呢？
1.對上架中的已招滿的崗位進(jìn)行下架處理，完整的檢索路徑為崗位狀態(tài)>崗位名稱>項(xiàng)目
2.設(shè)置崗位傭金，因傭金會根據(jù)需求方要求及緊急程度動態(tài)變化，完整的檢索路徑為崗位名稱>傭金排序
3.匯報(bào)招聘進(jìn)度，對于個(gè)別需求量大、急聘的項(xiàng)目，領(lǐng)導(dǎo)特別重視，經(jīng)常需要導(dǎo)表。完整的檢索路徑為急聘>崗位名
通過場景得出高頻檢索為【崗位狀態(tài)】、【崗位名稱】、【急聘】，其他如【項(xiàng)目】和【城市】檢索條件只是當(dāng)崗位名稱重復(fù)時(shí)來進(jìn)行組合篩選，但該場景在我們業(yè)務(wù)中很少遇到，如【仙林店誠招配送員】，門店重合率很低。
訪談中我們已經(jīng)得到了用戶對各個(gè)檢索項(xiàng)的使用頻率，那信息排序的原則是：按使用頻率，用戶目標(biāo)高于業(yè)務(wù)邏輯，而改版前并非是按照使用頻率排序的。再回到用戶場景，在匯報(bào)招聘進(jìn)度時(shí)需要檢索的【急聘】并不在檢索項(xiàng)中，需要和產(chǎn)品經(jīng)理反映這一點(diǎn)
直接展示高頻檢索項(xiàng)【崗位狀態(tài)】、【崗位名稱】和【急聘】，其他低頻項(xiàng)折疊至高級篩選，【項(xiàng)目】、【城市】
【創(chuàng)建人】作為下拉篩選，查詢路徑較長，同時(shí)將字段組合放置在搜索選項(xiàng)中，采用帶標(biāo)簽的搜索，因【崗位名】頻次遠(yuǎn)高于其他字段，默認(rèn)展示【崗位】
優(yōu)化后如下圖所示：
數(shù)據(jù)查看區(qū)主要用于數(shù)據(jù)的顯，用于對比、瀏覽，而B端后臺的表格中展示的數(shù)據(jù)往往多且雜，數(shù)據(jù)種類、字段眾多，10-20字段很普遍。這就需要我們在設(shè)計(jì)的時(shí)候先一步對數(shù)據(jù)進(jìn)行梳理歸納，提高數(shù)據(jù)的易讀性。我在對我們后臺表格進(jìn)行優(yōu)化時(shí)，會先通過四個(gè)維度來自檢，然后再有針對性的進(jìn)行優(yōu)化。
在講提升數(shù)據(jù)查看區(qū)的易讀性前，我們先來看看該區(qū)的結(jié)構(gòu)。數(shù)據(jù)查看區(qū)主要由表頭、行、列、單元格四個(gè)部分組成。
表頭：說明數(shù)據(jù)的內(nèi)容，可以包含篩選、排序等功能起到數(shù)據(jù)解釋作用，
行和列：對本行/本列數(shù)據(jù)的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關(guān)鍵要素
單元格：表格的主體內(nèi)容，承載用戶的每一條數(shù)據(jù)，也是整個(gè)表格的核心
表格設(shè)計(jì)的本質(zhì)是信息內(nèi)容的有效傳達(dá)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上，多做減法。
基于對實(shí)際業(yè)務(wù)需求、目標(biāo)用戶訴求及其行為的理解，列數(shù)盡量控制在7±2，列舉用戶更為關(guān)注的數(shù)據(jù)，用戶需要的非重點(diǎn)、輔助性信息可以在詳情中展示。
如果不同用戶想看到的信息側(cè)重不同，可以讓用戶自定義列的展示。在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖）。這樣做的好處是，首先，用戶能在表格上方看到所有的指標(biāo)名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標(biāo)的情況；其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。但需注意系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復(fù)操作。
表頭，概括每列的主要信息，在用戶使用表格中，起到數(shù)據(jù)解釋作用，讓數(shù)據(jù)能與之進(jìn)行匹配，使用戶能夠看懂。表頭在能夠概括的情況下，盡量簡煉、準(zhǔn)確，一般可根據(jù)上下文關(guān)系來進(jìn)行減短簡化，以達(dá)到節(jié)省表格頭部空間和減輕視覺壓力的作用。
一個(gè)簡單的檢驗(yàn)表頭是否精簡的方法是：少一個(gè)字不可，通俗易懂的說法就是字?jǐn)?shù)再精簡用戶就不明白意思了。可以讓其他同事體驗(yàn)產(chǎn)品，看有沒有一些名詞定義讓用戶產(chǎn)生誤解。
對于比較復(fù)雜的表頭，可以定義一個(gè)專有名詞，鼠標(biāo)hover上去對專業(yè)術(shù)語或用戶不常見的名詞給予該字段的詳細(xì)解釋，同時(shí)滿足新手、普通、專家用戶的需求。
如果表格數(shù)據(jù)可以自我解釋，表頭就不是必須的。如電子郵件的表格，就不需要列標(biāo)簽，因?yàn)榘l(fā)件人和郵主題的區(qū)分度比較高。
表格中所承載的數(shù)據(jù)信息才是主體，在進(jìn)行表格設(shè)計(jì)時(shí)，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數(shù)據(jù)信息上，而不是無關(guān)的邊框、底色等。所有的視覺元素應(yīng)該為更好的幫助用戶閱讀而服務(wù)，除此之外，再精美的設(shè)計(jì)都是對表格的破壞。
去掉豎向分割線：水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數(shù)值的對比工作。
而豎向分割線的作用是即使縮減元素之間的距離也能區(qū)分不同元素，但如果使用了合適的對齊方式分，豎直分隔線就會很多余的。即使要用，也要非常淡，不能妨礙快速瀏覽。
不使用斑馬線：數(shù)據(jù)量不大且易分辨的情況下，斑馬線在很多時(shí)候也是沒有必要的，因?yàn)樗鼈兪峭活悢?shù)據(jù)，而且水平分割線就已經(jīng)能夠明顯區(qū)隔。
分割線的樣式盡量輕盈，無關(guān)的邊框不要搶視覺，數(shù)據(jù)才是主體，突出內(nèi)容。
去掉不必要的裝飾和顏色，如icon、標(biāo)簽等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息，但物極必反，少即是多，要注意克制這些元素的使用。標(biāo)簽?zāi)苡镁€性就不用面性，做到輕盈，否則表格中最重的就是標(biāo)簽。
在產(chǎn)品的品牌設(shè)計(jì)中，字體是規(guī)范中的重要一環(huán)。然而在設(shè)計(jì)表格時(shí)，簡約至上才是關(guān)鍵，盡量避免任何裝飾性字體。雖然文本不能夠建議你具體使用哪種字體，但數(shù)字建議使用Helvetica Neue、Helvetica等其他等寬字體，文本最好不要出現(xiàn)以下情況
不要出現(xiàn)襯線字體：因?yàn)閭€(gè)性會產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考。
不要出現(xiàn)全大寫字體：因?yàn)樗茈y讀，需要轉(zhuǎn)化思維。
不要出現(xiàn)使用斜體：易引起視線疲勞，影響閱讀。
不要出現(xiàn)多種字體：保持風(fēng)格統(tǒng)一。
在開發(fā)同學(xué)的眼中，單元格高度=內(nèi)容高度+上間距+下間距，在實(shí)現(xiàn)設(shè)計(jì)稿時(shí)，通常也是按照這個(gè)方式來寫的，而不是像設(shè)計(jì)同學(xué)一樣按照文字的尺寸來計(jì)算間距。其中，文字行高建議設(shè)為字號的1.5倍，上下間距設(shè)為字號的1.2倍。
當(dāng)然，在很多很多通用化產(chǎn)品中，存在多個(gè)設(shè)備屏幕分辨率的差異，為了讓每一個(gè)分辨率下的產(chǎn)品都能夠有較好的展示效果，可設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足需求，提供切換按鈕讓用戶自己控制顯示密度。
合適的填充和邊距對于視覺設(shè)計(jì)至關(guān)重要，以保證易讀性。定義列的間距時(shí)，我通常的做法是N1保持不變，將N2定義一個(gè)最小值，N2再根據(jù)表格的寬度自適應(yīng)變化。表格主要適配到這個(gè)最小寬度，這一步驟通常的設(shè)計(jì)系統(tǒng)的初期就要完成，一方面可根據(jù)自己項(xiàng)目目前情況，按照導(dǎo)航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時(shí)，可以有一個(gè)明確的邊界，同時(shí)能與開發(fā)同學(xué)進(jìn)行理解溝通。當(dāng)表格寬度大于頁面寬度，固定首尾列，左右滑動。
合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對齊（符合格式塔心理學(xué)中相近原則）能夠很好的形成視覺引導(dǎo)線。通過對齊，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。
文本左對齊：更的閱讀瀏覽順序，包括非比較型和固定長度的數(shù)字，如日期2020-12-04（補(bǔ)0是數(shù)字書寫規(guī)范）、編號1948696等；
數(shù)值右對齊：金額、長度、高度等，數(shù)字是從右往左讀的，通過數(shù)值位數(shù)的長短即可對比數(shù)值的量級和大小，方便數(shù)值的比對。這是因?yàn)樵趯Ρ葦?shù)字時(shí)，首先看個(gè)位，然后十位、百位等；
最后一列右對齊：通常是操作，即使沒有縱向分割線也能很好的起到分隔的作用，視覺上看表格是一個(gè)方方正正的格子，比較整齊；
當(dāng)表格單元格中沒有相應(yīng)數(shù)據(jù)時(shí)，要避免直接留出空白單元格?？瞻赘袢菀自斐捎脩舻睦Щ笊踔琳`解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？正確做法是，數(shù)據(jù)不存在（數(shù)據(jù)庫中沒有該字段）用“-”，沒有數(shù)量（數(shù)據(jù)庫中有該字段）用“0”，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格保持一致。
在Web端，數(shù)據(jù)量動輒上萬條，容易出現(xiàn)瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出的情況。使用分頁器有哪些優(yōu)點(diǎn)呢？
分頁可以緩解服務(wù)器的加載壓力，每翻一頁加載該頁的頁面，縮減單次加載的數(shù)據(jù)量來縮短等待加載的時(shí)間，從而達(dá)到少量多次的體驗(yàn)。這就是為什么哪怕是移動時(shí)代了，很多表格還是使用分頁組件。
分頁可以跳躍查看數(shù)據(jù)，靈活性更高、步驟更短。
表格設(shè)計(jì)大原則是整張表不要超過一屏，每一頁的默認(rèn)行數(shù)：10行以上，減少翻頁的次數(shù)。但考慮到每個(gè)用戶的使用習(xí)慣，在給出默認(rèn)行的數(shù)量后，可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏?xí)憷?/span>。
當(dāng)表格數(shù)據(jù)無數(shù)據(jù)時(shí)，翻頁控制按鈕不可見。
我在接手我們后臺產(chǎn)品之初，在對業(yè)務(wù)人員進(jìn)行角色調(diào)研時(shí)就收到反饋到有些頁面非常難用，有些就很好用。為什么會出現(xiàn)這樣的情況呢？如下圖所示，被投訴的表格單操作項(xiàng)就有6個(gè)，一方面容易誤操作，另一方面左側(cè)的數(shù)據(jù)展示內(nèi)容有限，易讀性很差。
對于單條數(shù)據(jù)操作頻繁的場景，我的方法是，當(dāng)超過三個(gè)操作項(xiàng)時(shí)，將操作低頻折疊收起。這樣做的優(yōu)點(diǎn)是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。
工作中常常會遇到單元格數(shù)據(jù)過多的情況，常見的方法有兩種：
定義一個(gè)單元格長度或字?jǐn)?shù)限制，超過該范圍以"..."顯示，鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。
多行顯示，這種方法讓平鋪直敘，讓用戶可以直接了當(dāng)?shù)目吹剿行畔?，在B端使用層面上還是不錯(cuò)的，但是超出三行就會擠占行高度，建議不要超過兩行，超出可“...”顯示。
數(shù)據(jù)過多時(shí)，單元格長度如何定義？超過哪個(gè)范圍“...”顯示呢？
定義長度的依據(jù)：根據(jù)業(yè)務(wù)字段，防重復(fù)。保證用戶在掃視的時(shí)候，對重要字段能快速區(qū)分、對比。
新增一條數(shù)據(jù)后，這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢？這是個(gè)和表格默認(rèn)排序有關(guān)的問題。
表格數(shù)據(jù)應(yīng)該默認(rèn)按添加的時(shí)間排序，還是應(yīng)該按某個(gè)字段的名稱排序？
如果我們默認(rèn)按某個(gè)字段排序，比方說崗位列表里增加一條“廣深常溫B2C 叉車員”的字段，而首字母G的數(shù)據(jù)在表格中極大概率不靠前。這時(shí)就會出現(xiàn)一個(gè)問題，用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù)，或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了，這會讓他們覺得自己的操作失敗了。
解決這個(gè)問題的一個(gè)方法就是按照數(shù)據(jù)添加時(shí)間排序，默認(rèn)創(chuàng)建的在最上面，體驗(yàn)上創(chuàng)建完反饋，馬上就出現(xiàn)了變化，且針對數(shù)據(jù)的操作頻率較高，方便用戶發(fā)現(xiàn)與查找。同時(shí)也可以用帶排序的表頭，讓用戶自定義排序。
前面內(nèi)容降噪有講到盡量控制列數(shù)在7±2，非重點(diǎn)內(nèi)容通過更深的入口查看，關(guān)于詳情查看可以分為跳轉(zhuǎn)和點(diǎn)擊詳情。
跳轉(zhuǎn)：把 ID、名稱等唯一性標(biāo)志的字段加上超鏈接，直接顯示鏈接色或者開始不顯示，鼠標(biāo)hover上去才顯示鏈接色，點(diǎn)擊可以查看該條記錄的詳情。
詳情：在操作列中增加“詳情”功能，點(diǎn)擊查看詳情。
關(guān)于表格詳情查看的展現(xiàn)形式，按可承載的信息量由少到多依次分為折疊展開、彈窗、抽屜、及新增頁面四種類型。
直接在表格里展開（可以是詳情，也可以是二級表格），無需打開新頁面即可查看附加信息，防止用戶迷失。
適用場景：信息量較少的情況
彈窗是一種中斷用戶當(dāng)前操作并對其進(jìn)行補(bǔ)充、或者對當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式，需要用戶進(jìn)行強(qiáng)交互，它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作。主要分為模態(tài)彈窗與非模態(tài)彈窗兩種形式：
通常這類彈窗只會在屏幕上短暫停留，幾秒就會消失，也因此用戶感受不到他的存在。它的缺點(diǎn)也非常明顯，展示時(shí)間較短，不適合展示重要信息、不能承載大量文案。在詳情查看頁面中并不適用，此處就不再進(jìn)行拆解。
位于瀏覽器的主頁面核心區(qū)域，需要用戶對它做出相應(yīng)交互，彈窗才會消失。
優(yōu)勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當(dāng)前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當(dāng)前頁面
劣勢：打擾用戶，感到強(qiáng)烈的中斷的感受
適用場景：數(shù)據(jù)詳情體量不大，頁面內(nèi)容較輕時(shí)。同時(shí)，不需要參照上級頁面內(nèi)容，有快速回退的訴求。
側(cè)滑抽屜相比彈窗減少了頁面層級和隔離感，有較強(qiáng)的連貫性，適合與原頁面具有連貫結(jié)構(gòu)的內(nèi)容的展示。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息，這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到多個(gè)項(xiàng)目時(shí)不會丟失位置。可自定義上下左右四個(gè)方向，一般右側(cè)滑出最為常見。
適用場景：詳情頁的內(nèi)容較多時(shí)，且有快速切換主體的訴求。
新增頁面幾乎是萬能的，無論頁面內(nèi)容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以使用。新增頁面又分為：覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場景上可以根據(jù)兩者差異進(jìn)行選擇。
在詳情查看中，二級頁面使用頻率是非常高的，需要用戶在A與B頁面之間進(jìn)行來回切換，這時(shí)候考慮頁面反復(fù)出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生，本著產(chǎn)品效率至上的原則，新增的頁面建議新開一個(gè)窗口跳轉(zhuǎn)而非覆蓋，如下圖：
適用場景：當(dāng)詳情頁承載內(nèi)容過多且里面的操作相對復(fù)雜時(shí)。
數(shù)據(jù)操作主要是針對表格數(shù)據(jù)的增、刪、改，從控制范圍可分為：單行操作、批量操作、全局操作。
單行操作也稱行內(nèi)操作，常見的顯性與隱性兩種方式。顯性操作，操作項(xiàng)顯示在行內(nèi)，直觀明了；隱性操作，鼠標(biāo)懸停時(shí)才顯示操作項(xiàng)，界面簡潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾
顯性操作，文字按鈕操作項(xiàng)一般不多于三個(gè)，圖標(biāo)按鈕不多于四個(gè)時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過時(shí)，建議將相對低頻操作選項(xiàng)折疊收起，點(diǎn)擊"更多"或“...”下拉顯示。操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因。
隱性操作，如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時(shí)，可將所有的操作進(jìn)行隱藏，當(dāng)用戶鼠標(biāo)懸停時(shí)進(jìn)行展開所有操作。這種方式能上滿足用戶快速查看與編輯的需求，但是在實(shí)際使用中，用戶的初次使用門檻較高，需要有一定的學(xué)習(xí)成本。
適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時(shí)便于批處理和單個(gè)操作。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作，通常與復(fù)選框操作配合使用，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準(zhǔn)、拒絕、復(fù)制之類的操作，這將節(jié)省用戶時(shí)間，避免重復(fù)對多行進(jìn)行相同操作。
統(tǒng)攬全局，無需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見的【新增】、【導(dǎo)入】操作。
三種操作：兩個(gè)在表格外，一個(gè)在表格內(nèi)，那么很自然的我們會遇到一個(gè)問題，一個(gè)功能該放在哪呢？下面我通過一個(gè)案例來說明。
產(chǎn)品現(xiàn)狀：在HRM系統(tǒng)中，不同的權(quán)限使每行的數(shù)據(jù)擁有不同的操作項(xiàng)，而且這些操作因?yàn)橐曈X特征比較顯眼，容易分散用戶的注意力，且因表格空間有限，操作區(qū)的各操作項(xiàng)過于接近，誤操作率相對較高。
設(shè)計(jì)優(yōu)化方向：
業(yè)務(wù)目標(biāo)-提升數(shù)據(jù)操作效率 ；
設(shè)計(jì)目標(biāo)-降低誤操作率，讓用戶聚焦內(nèi)容；
設(shè)計(jì)策略-控制操作項(xiàng)的顯示數(shù)量，將操作項(xiàng)分類
習(xí)慣上我們會認(rèn)為一行數(shù)據(jù)是對某一個(gè)對象實(shí)例的描述，比如在上圖表格中，一行數(shù)據(jù)是對某個(gè)待入職員工的描述，包括他的姓名、工號、在職狀態(tài)等等。所以表格內(nèi)的操作也是針對這個(gè)對象的。
一般我會把一次只能針對一個(gè)對象操作的功能放在表格內(nèi)，比如【詳情】和【編輯】，因?yàn)椴榭丛斍椴惶赡芤淮尾榭炊鄠€(gè)對象，編輯修改信息也是。那么反過來，不屬于任何一個(gè)對象實(shí)例的功能就需要放在表格外的操作欄，比如說【新增】。另外一種需要放在表格外的功能是批量操作，因?yàn)榕坎僮餍枰獙Χ嘈袛?shù)據(jù)進(jìn)行同時(shí)操作，也不是屬于單個(gè)對象實(shí)例的。以此為依據(jù)將圖中操作分類如下：
大家應(yīng)該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內(nèi)操作，也可以作為批量操作的問題。作為行內(nèi)操作，優(yōu)點(diǎn)是更便捷，；表外作為是批量操作，這樣更方便的同時(shí)操作多個(gè)數(shù)據(jù)，但如果只是操作單個(gè)數(shù)據(jù)時(shí)就會增加用戶的操作步驟。或者兩種方式都提供，雖然更靈活但是會讓頁面比較冗余。
其實(shí)怎么選擇還是要根據(jù)具體業(yè)務(wù)場景來決定，首先判斷這倆操作是不是高頻功能。在我們的業(yè)務(wù)功能中，已入職和離職的員工在該頁面不能操作刪除，且【刪除】是相對低頻地，完全可以只提供單個(gè)刪除功能。【入職生效】作為高頻功能，與產(chǎn)品經(jīng)理討論后提供行內(nèi)操作和批量操作，選擇這個(gè)方案的原因是，該功能作為行內(nèi)操作已上線運(yùn)營了1年時(shí)間，移除會產(chǎn)生學(xué)習(xí)成本。
批量操作常見的擺放位置有三種形式。
方案一：和全局操作一起置于表左上方或右上方
因批量操作需要勾選左邊復(fù)選框，放置在表右上方不符合操作動效，本著效率至上的原則，此處不考慮放在右上方。
優(yōu)點(diǎn)：操作項(xiàng)信息前置能清楚的知道有哪些功能，無需用戶記憶
缺點(diǎn)：但當(dāng)批量操作較多時(shí)，會擠占頁面空間，導(dǎo)致操作按鈕很多，不易查找
方案二：默認(rèn)不顯示，勾選激活后顯示于表左上方
優(yōu)點(diǎn)：減少了相應(yīng)的視覺噪音，業(yè)務(wù)拓展性強(qiáng)
缺點(diǎn)：有一定的學(xué)習(xí)成本，沒有勾選時(shí)不知道有該操作項(xiàng)
方案三：直接顯示于表左下方，但需勾選激活后操作
優(yōu)點(diǎn)：上內(nèi)容下操作，符合操作動線
缺點(diǎn)：和分頁放置一起不易于業(yè)務(wù)拓展
根據(jù)我司業(yè)務(wù)，綜合考慮后選擇方案三，放置于表的左下方。
單行操作根據(jù)操作頻率優(yōu)先級為入職生效>詳情>刪除>編輯，其中編輯和刪除屬于低頻操作，可折疊隱藏。批量操作-導(dǎo)出也是低頻操作。最后定稿方案如下：
2B產(chǎn)品應(yīng)該著眼于業(yè)務(wù)，本文是根據(jù)我司業(yè)務(wù)提供了一個(gè)表格設(shè)計(jì)基本指南，在具體項(xiàng)目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。但是表格設(shè)計(jì)的原則應(yīng)該是通用的：
從用戶閱讀表格的目標(biāo)出發(fā)設(shè)計(jì)表格的內(nèi)容和布局
從提高用戶閱讀速度的功能角度出發(fā)進(jìn)行表格的視覺設(shè)計(jì)，避免過度設(shè)計(jì)
當(dāng)表格指標(biāo)、數(shù)據(jù)過多時(shí)，提供一些自定義的工具幫助用戶自助選擇出最需要的數(shù)據(jù)條目
文章來源：tob.design 作者：佩奇一只居
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn