中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：B端企業經常會用到表格，表格在日常工作中能起到很大作用，對于數據的整理以及總結都很有用，也能提高我們的工作效率；本文作者分享了關于B端體驗設計中的表格設計，我們一起來看一下。

做To B的同行都知道，降本增效一直是企業中后臺繞不開的熱點話題，現任公司業務涵蓋倉（WMS）、運（TMS）、配、人（HRM），所做項目雖功能各異，但是有一個共同點——大量使用表格。

本文受有贊設計師美芳的啟發，將我日常工作通過優化表格來提效的思路整理成文章，一方面是對企業后臺的數據表格作一個簡單的階段性總結，另一方面給部門做一個年終分享。

一、什么是表格？

表格是展現數據最為清晰、高效的形式之一，它也是B端產品和設計師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協同。在B端中后臺中，常應用于：

• 一次性瀏覽大量信息-很多圖表類型無法展示數據特點，而表格是組織大量信息通用性最高的一種表達方式，既可陳列信息，又可以表達信息之間的關系；
• 信息之間需對比-表格的歸納與分類，便于用戶快速查詢其中的差異與變化和關聯；
• 快速確定并執行多種復雜操作-如對信息進行搜索、篩選、增刪改等。

1. 表格的結構

通常表格的組成元素以及相關元素會有多個部分，根據不同粒度的用戶目標將其解構三部分：

• 數據查看：表格的核心-顯，用戶用來閱覽、對比和分析數據。
• 數據過濾：輔助作用，承載表格的查功能，將數據過濾，方便用戶快速查詢定位數據，一般位于表格上方。
• 數據操作：輔助作用，承載表格的增刪改的功能，比如常見的“新增”、“刪除”、“編輯”按鈕。

2. 設計原則與目標

首先，我們要明確，什么是一個好的表格？我認為好的數據表格應便于用戶對信息進行快速的掃描、查詢、過濾、分析等操作，以獲取深刻認知并快速準確完成目標任務。

表格是為可讀性而生的，一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度；因此，拆分到表格的構成就是，設計目標就是：數據查看區-易讀、易瀏覽、易對比；數據檢索區-易查找；數據操作區-易操作。

二、數據檢索——查

數據檢索區可以看作表格的導航，按預定目標過濾出某種具有特定性質的數據，將操作者所關注的數據展示到前面，便于快速查看查看、對比、分析信息的操作過程；從用戶角度出發，按不同粒度的數據過濾方式分為3種方式，分別對應不同程度的用戶。

• 搜索：當用戶有相對明確的選擇目標時，需定點查看，數據多且雜亂無規律；
• 篩選：用戶目標相對比較模糊，游離于一個大概的范圍時，通常用于一些有清晰分類的數據；
• 標簽：查看無交集的數據內容，通常伴隨時間、狀態的流轉。

1. 搜索

搜索可以幫助用戶在巨大的信息池中縮小目標范圍，快速而準確的定位到目標數據，并速獲取需要的信息。

由于考慮到用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項；通常上端搜索欄不被限定搜索范圍，可以全部搜索。

a. 模糊搜索

• 優點：減少精準搜索帶來的記憶負擔；
• 缺點：容易把不相關的。

b. 帶標簽的搜索

• 優點：搜索匹配精準度高；
• 缺點：不方便，每次只能對單一條件進行搜索。

2. 篩選

篩選可以幫助用戶縮小數據范圍，逐步找到想要的內容；或者當用戶的目標就是查看某一范圍的數據時，篩選將是一種十分快捷的方式；在企業級中后臺產品中，篩選的使用場景通常是后一種。

a.下拉篩選

• 優點：空間利用率高，起到了很好的收納作用；
• 缺點：無法直觀看到所有篩選項。

b. 平鋪篩選

• 優點：操作效率高，篩選項一目了然，支持輸入更多篩選條件；
• 缺點：空間利用率低，不適合選項太多的情況。

c. 表頭篩選

• 優點：篩選當前列，更直觀，一般情況下表單左側數據篩選頻次越高；
• 缺點：篩選的內容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學習。

3. 標簽

使用場景：標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容；主要樣式有基礎、卡片、膠囊等。

優點：根據標簽，可以很清楚知道劃分，切換tab就可以篩選內容。

缺點：分類必須覆蓋所有情況，并且保證每一項沒有交集，分類不能過多，9個已經是最大。

注：提升用戶體驗的一個小細節-我在其他B端表格的使用中發現，一部分表格在使用標簽時，默認的是全部。個人認為比較好的一種方法是默認用戶最關注的選項，而非全部，這樣可以縮短查詢路徑；并給出條目，易于閱讀。

4. 組合檢索

在企業級中后臺中，用戶查看的數據往往屬性比較多且不唯一，通過簡單的檢索方式很難精確定位到目標數據，所以，在實際使用時，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、標簽切換組合出現，形成多屬性組合檢索。這種檢索更適合于專家用戶，他們對于目標數據有明確的定位，知道可以通過哪些屬性精確定位到自己想要的數據

a. 展示方式

平鋪顯示：

選用高識別度、高使用頻率的、對用戶決策有意義的屬性作為直接展示的組合檢索條件，不建議過于廣泛，數量最好不超過5個（7±2法則）。

• 優點：大而全能最大限度避免檢索條件疏漏的可用性問題；
• 缺點：易用性不高。大而全可能為用戶帶來繁雜的第一印象，都是重點等于沒有重點，增加用戶的決策時間。

折疊展示：

如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的；則可通過折疊的方式將這部分檢索條件隱藏起來，將高頻率使用的、數據覆蓋面廣的1-3個屬性直接展示出來。

b. 總結思考

在設置組合檢索項時，應考慮每一項檢索甚至是多屬性組合檢索是否有必要。需從實際場景出發，根據用戶對各個檢索項的使用頻率及組合檢索項的數量，來決定組合檢索項是直接展示還是折疊展示；以及哪些屬性直接展示，哪些屬性折疊展示，為各檢索項安排合理的展示方式。

5. 案例-檢索區優化

產品現狀：前言中提過，我司業務涵蓋WMS、TMS、HRM，業務極其復雜，數據種類字段眾多，使用的檢索方式為組合篩選平鋪展示，一半以上的頁面篩選項超過了9個（不符合7±2原則），大而全的檢索方式一方面占據首屏大部分空間，導致首屏屏效低；另一方面用戶在尋找具體篩選條件時，仿佛大海撈針，增加了用戶決策時間。因后臺數據涉密，將下圖-招聘中可公開的頁面作為案例來可大家分享。

設計優化方向：

• 業務目標-提升招聘人員的檢索效率?；
• 設計目標-縮短檢索路徑，減少檢索區占用的屏幕空間，提高首屏屏效，將展示區域更多留給表格；
• 設計策略-按照用戶場景檢索路徑、檢索頻次設計信息；

但還有2個關鍵問題：用戶場景有哪些？查詢路徑是什么？哪些檢索頻次高？依據從何而來呢？通常有兩種方式：

• 依據一：數據埋點，每個操作埋個PV（點擊量）,一個月后再看每個操作的數據量；
• 依據二：用戶調研，通過【問卷投放】或【用戶訪談】，深入理解用戶真實使用場景以及與業務之間的關系。

Step 1：用戶訪談

我采用的用研方式是用戶訪談，原因是由于招聘人員和我們產研人員在一個園區，調研方便，得出數據的時間比埋點短；而相比【問卷投放】，用戶訪談能細到具體某個字段在場景中的作用。訪談的過程因為篇幅原因就不在此具體講述，大家可根據自己的實際情況選擇適合的用研方式。

訪談中了解到，招聘人員的工作是發布崗位信息，快速招到合適的人。因此他們在該頁面的TOP場景就是對崗位上下架，即【新增】和【刪除】，而檢索的TOP場景有哪些呢？

• 對上架中的已招滿的崗位進行下架處理，完整的檢索路徑為崗位狀態>崗位名稱>項目；
• 設置崗位傭金，因傭金會根據需求方要求及緊急程度動態變化，完整的檢索路徑為崗位名稱>傭金排序；
• 匯報招聘進度，對于個別需求量大、急聘的項目，領導特別重視，經常需要導表。完整的檢索路徑為急聘>崗位名；

通過場景得出高頻檢索為【崗位狀態】、【崗位名稱】、【急聘】，其他如【項目】和【城市】檢索條件只是當崗位名稱重復時來進行組合篩選，但該場景在我們業務中很少遇到，如【仙林店誠招配送員】，門店重合率很低。

Step 2：信息排序

訪談中我們已經得到了用戶對各個檢索項的使用頻率，那信息排序的原則是：按使用頻率，用戶目標高于業務邏輯，而改版前并非是按照使用頻率排序的。再回到用戶場景，在匯報招聘進度時需要檢索的【急聘】并不在檢索項中，需要和產品經理反映這一點

Step 3：組織及隱藏

直接展示高頻檢索項【崗位狀態】、【崗位名稱】和【急聘】，其他低頻項折疊至高級篩選，【項目】、【城市】

【創建人】作為下拉篩選，查詢路徑較長，同時將字段組合放置在搜索選項中，采用帶標簽的搜索，因【崗位名】頻次遠高于其他字段，默認展示【崗位】

優化后如下圖所示：

三、數據查看

數據查看區主要用于數據的顯，用于對比、瀏覽，而B端后臺的表格中展示的數據往往多且雜，數據種類、字段眾多，10-20字段很普遍；這就需要我們在設計的時候先一步對數據進行梳理歸納，提高數據的易讀性；我在對我們后臺表格進行優化時，會先通過四個維度來自檢，然后再有針對性的進行優化。

在講提升數據查看區的易讀性前，我們先來看看該區的結構。數據查看區主要由表頭、行、列、單元格四個部分組成。

• 表頭：說明數據的內容，可以包含篩選、排序等功能起到數據解釋作用；
• 行和列：對本行/本列數據的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關鍵要素；
• 單元格：表格的主體內容，承載用戶的每一條數據，也是整個表格的核心。

1. 信息降噪

表格設計的本質是信息內容的有效傳達，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上，多做減法。

1）內容降噪

a. 控制列數

基于對實際業務需求、目標用戶訴求及其行為的理解，列數盡量控制在7±2，列舉用戶更為關注的數據，用戶需要的非重點、輔助性信息可以在詳情中展示。

b. 自定義列

如果不同用戶想看到的信息側重不同，可以讓用戶自定義列的展示。在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。

這樣做的好處是，首先，用戶能在表格上方看到所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況；其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾；但需注意系統應記住用戶上一次的自定義列設置，減少用戶重復操作。

c. 精簡表頭-少一字不可

表頭，概括每列的主要信息，在用戶使用表格中，起到數據解釋作用，讓數據能與之進行匹配，使用戶能夠看懂；表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。

一個簡單的檢驗表頭是否精簡的方法是：少一個字不可，通俗易懂的說法就是字數再精簡用戶就不明白意思了；可以讓其他同事體驗產品，看有沒有一些名詞定義讓用戶產生誤解。

d. 定義專有名詞

對于比較復雜的表頭，可以定義一個專有名詞，鼠標hover上去對專業術語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。

e. 情況允許時，去掉表頭

如果表格數據可以自我解釋，表頭就不是必須的。如電子郵件的表格，就不需要列標簽，因為發件人和郵主題的區分度比較高。

2）視覺降噪

表格中所承載的數據信息才是主體，在進行表格設計時，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數據信息上，而不是無關的邊框、底色等；所有的視覺元素應該為更好的幫助用戶閱讀而服務，除此之外，再精美的設計都是對表格的破壞。

a. 去掉不必要的分割線和斑馬紋

去掉豎向分割線：水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數值的對比工作。

而豎向分割線的作用是即使縮減元素之間的距離也能區分不同元素，但如果用對齊方式和間距來區分，豎直分隔線其實是多余的的；即使要用，也要非常淡，不能妨礙快速瀏覽。

不使用斑馬線：數據量不大且易分辨的情況下，斑馬線在很多時候也是沒有必要的，因為它們是同一類數據，而且水平分割線就已經能夠明顯區隔。

b. 分割線樣式輕盈

分割線的樣式盡量輕盈，無關的邊框不要搶視覺，數據才是主體，突出內容。

c. 減少圖形元素的使用

去掉不必要的裝飾和顏色，如icon、標簽等，雖然能夠幫助組織數據、更直觀的傳達信息，但物極必反，少即是多，要注意克制這些元素的使用；標簽能用線性就不用面性，做到輕盈，否則表格中最重的就是標簽。

d. 字體降噪-統一

在產品的品牌設計中，字體是規范中的重要一環。然而在設計表格時，簡約至上才是關鍵，盡量避免任何裝飾性字體；雖然文本不能夠建議你具體使用哪種字體，但數字建議使用Helvetica Neue、Helvetica等其他等寬字體，文本最好不要出現以下情況。

• 不要出現襯線字體：因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考。
• 不要出現全大寫字體：因為它很難讀，需要轉化思維。
• 不要出現使用斜體：易引起視線疲勞，影響閱讀。
• 不要出現多種字體：保持風格統一。

2. 呼吸適中

1）合適的單元格高度

在開發同學的眼中，單元格高度=內容高度+上間距+下間距，在實現設計稿時，通常也是按照這個方式來寫的，而不是像設計同學一樣按照文字的尺寸來計算間距；其中，文字行高建議設為字號的1.5倍，上下間距設為字號的1.2倍。

當然，在很多很多通用化產品中，存在多個設備屏幕分辨率的差異，為了讓每一個分辨率下的產品都能夠有較好的展示效果，可設置舒適、標準、緊湊三種高度來滿足需求，提供切換按鈕讓用戶自己控制顯示密度。

2）合適的列間距

合適的填充和邊距對于視覺設計至關重要，以保證易讀性。定義列的間距時，我通常的做法是N1保持不變，將N2定義一個最小值，N2再根據表格的寬度自適應變化。

表格主要適配到這個最小寬度，這一步驟通常的設計系統的初期就要完成，一方面可根據自己項目目前情況，按照導航寬度等固定尺寸確定最小的表格寬度；這樣在處理最小尺寸時，可以有一個明確的邊界，同時能與開發同學進行理解溝通；當表格寬度大于頁面寬度，固定首尾列，左右滑動。

?3. 高效易讀

1）合適的對齊

合適的對齊方式能夠提升數據的瀏覽效率。表格內信息的縱向列對齊（符合格式塔心理學中相近原則）能夠很好的形成視覺引導線。

通過對齊，會讓表格更加規范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。

• 文本左對齊：更高效的閱讀瀏覽順序，包括非比較型和固定長度的數字，如日期2020-12-04（補0是數字書寫規范）、編號1948696等；
• 數值右對齊：金額、長度、高度等，數字是從右往左讀的，通過數值位數的長短即可對比數值的量級和大小，方便數值的比對。這是因為在對比數字時，首先看個位，然后十位、百位等；
• 最后一列右對齊：通常是操作，即使沒有縱向分割線也能很好的起到分隔的作用，視覺上看表格是一個方方正正的格子，比較整齊；

2）不留空白格

當表格單元格中沒有相應數據時，要避免直接留出空白單元格；空白格容易造成用戶的困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是根本沒有值？

正確做法是，數據不存在（數據庫中沒有該字段）用“-”，沒有數量（數據庫中有該字段）用“0”，且小數點后位數、單位，都要與上下單元格保持一致。

3）合適的翻頁器

在Web端，數據量動輒上萬條，容易出現瀏覽器響應太慢或者瀏覽器內存溢出的情況，使用分頁器有哪些優點呢？

• 分頁可以緩解服務器的加載壓力，每翻一頁加載該頁的頁面，縮減單次加載的數據量來縮短等待加載的時間，從而達到少量多次的高效體驗；這就是為什么哪怕是移動時代了，很多表格還是使用分頁組件。
• 分頁可以跳躍查看數據，靈活性更高、步驟更短。

表格設計大原則是整張表不要超過一屏，每一頁的默認行數：10行以上，減少翻頁的次數。

但考慮到每個用戶的使用習慣，在給出默認行的數量后，可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利。

4）收起低頻操作

我在接手我們后臺產品之初，在對業務人員進行角色調研時就收到反饋到有些頁面非常難用，有些就很好用。

為什么會出現這樣的情況呢？如下圖所示，被投訴的表格單操作項就有6個，一方面容易誤操作，另一方面左側的數據展示內容有限，易讀性很差。

對于單條數據操作頻繁的場景，我的方法是，當超過三個操作項時，將操作低頻折疊收起；這樣做的優點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。

5）內容防重復

工作中常常會遇到單元格數據過多的情況，常見的方法有兩種：

1. 定義一個單元格長度或字數限制，超過該范圍以“…”顯示，鼠標懸停時出現氣泡顯示完整內容。
2. 多行顯示，這種方法讓平鋪直敘，讓用戶可以直接了當的看到所有信息，在B端使用層面上還是不錯的，但是超出三行就會擠占行高度，建議不要超過兩行，超出可“…”顯示。

數據過多時，單元格長度如何定義？超過哪個范圍“…”顯示呢？

定義長度的依據：根據業務字段，防重復；保證用戶在掃視的時候，對重要字段能快速區分、對比。

6）默認行排序

新增一條數據后，這條數據應該被放在表格的哪里呢？這是個和表格默認排序有關的問題。

表格數據應該默認按添加的時間排序，還是應該按某個字段的名稱排序？

如果我們默認按某個字段排序，比方說崗位列表里增加一條“廣深常溫B2C 叉車員”的字段，而首字母G的數據很可能不在所有數據的靠前位置；這時就會出現一個問題，用戶要在茫茫數據中找到剛增加的那一條數據，或者用戶根本不知道自己增加的數據已經被插入在了表格里了，這會讓他們覺得自己的操作失敗了。

解決這個問題的一個方法就是按照數據添加時間排序，默認最新創建的在最上面，體驗上創建完反饋，馬上就出現了變化，且針對最新數據的操作頻率較高，方便用戶發現與查找；也可以用帶排序表頭，讓用戶自定義排序。

4. 詳情查看

前面內容降噪有講到盡量控制列數在7±2，非重點內容通過更深的入口查看，關于詳情查看可以分為跳轉和點擊詳情。

• 跳轉：把 ID、名稱等唯一性標志的字段加上超鏈接，直接顯示鏈接色或者開始不顯示，鼠標hover上去才顯示鏈接色，點擊可以查看該條記錄的詳情。
• 詳情：在操作列中增加“詳情”功能，點擊查看詳情。

關于表詳情查看的展現形式，按可承載的信息量由少到多依次分為四種：折疊展開、彈窗、抽屜、以及新增頁面。

1）折疊展開

直接在表格里展開（可以是詳情，也可以是二級表格），無需打開新頁面即可查看附加信息，防止用戶迷失。

適用場景：信息量較少的情況。

2）彈窗

彈窗是一種中斷用戶當前操作并對其進行補充、或者對當前操作進行強制反饋的交互形式，需要用戶進行強交互，它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作。

主要分為模態彈窗與非模態彈窗兩種形式：

a. 非模態彈窗

通常這類彈窗只會在屏幕上短暫停留，幾秒就會消失，也因此用戶感受不到他的存在；它的缺點也非常明顯，展示時間較短，不適合展示重要信息、不能承載大量文案；在詳情查看頁面中并不適用，此處就不再進行拆解。

b. 模態彈窗

位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，彈窗才會消失。

• 優勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當前頁面；
• 劣勢：打擾用戶，感到強烈的中斷的感受；

適用場景：數據詳情體量不大，頁面內容較輕時；同時，不需要參照上級頁面內容，有快速回退的訴求。

3）抽屜

側滑抽屜相比彈窗減少了頁面層級和隔離感，有較強的連貫性，適合與原頁面具有連貫結構的內容的展示。

單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集；而且在涉及到多個項目時不會丟失位置?？勺远x上下左右四個方向，一般右側最為常見。

適用場景：詳情頁的內容較多時，且有快速切換主體的訴求。

4）新增頁面

新增頁面幾乎是萬能的，無論頁面內容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以使用；新增頁面又分為：覆蓋當前窗口以及新窗口跳轉兩種形式，在場景上可以根據兩者差異進行選擇。

在詳情查看中，二級頁面使用頻率是非常高的，需要用戶在A與B頁面之間進行來回切換，這時候考慮頁面反復出現是否流暢，是否有切換成本的產生；本著產品效率至上的原則，新增的頁面建議新開一個窗口跳轉而非覆蓋，如下圖：

適用場景：當詳情頁承載內容過多且里面的操作相對復雜時。

四、數據操作——增刪改

數據操作主要是針對表格數據的增、刪、改，從控制范圍可分為：單行操作、批量操作、全局操作。

1. 單行操作

單行操作也稱行內操作，常見的顯性與隱性兩種方式：

• 顯性操作，操作項顯示在行內，直觀明了；
• 隱性操作，鼠標懸停時才顯示操作項，界面簡潔，留更多的空間給需要查看的數據內容，減輕空間壓力，減少干擾。

顯性操作，文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊“更多”或“…”下拉顯示；當操作按鈕致灰時，鼠標選中可顯示原因。

隱性操作，如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可將所有的操作進行隱藏，當用戶鼠標懸停時進行展開所有操作；這種方式能最大程度上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。

2. 批量操作

適用于數據量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時便于批處理和單個操作。

批處理操作模式允許用戶對一行或多行對象執行操作，通常與復選框操作配合使用，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作。

3. 全局操作

統攬全局，無需選擇數據內容即可進行的操作，常見的【新增】、【導入】操作。

三種操作：兩個在表格外，一個在表格內，那么很自然的我們會遇到一個問題，一個功能該放在哪呢？下面我通過一個案例來說明。

4. 案例-數據操作優化

產品現狀：在HRM系統中，不同的權限使每行的數據擁有不同的操作項，而且這些操作因為視覺特征比較顯眼，容易分散用戶的注意力；且因表格空間有限，操作區的各操作項過于接近，誤操作率相對較高。

設計優化方向：

• 業務目標-提升數據操作效率?；
• 設計目標-降低誤操作率，讓用戶聚焦內容；
• 設計策略-控制操作項的顯示數量，將操作項分類

1）分析操作控制范圍

習慣上我們會認為一行數據是對某一個對象實例的描述，比如在上圖表格中，一行數據是對某個待入職員工的描述，包括他的姓名、工號、在職狀態等等；所以表格內的操作也是針對這個對象的。

一般我會把一次只能針對一個對象操作的功能放在表格內，比如【詳情】和【編輯】，因為查看詳情不太可能一次查看多個對象，編輯修改信息也是。

那么反過來，不屬于任何一個對象實例的功能就需要放在表格外的操作欄，比如說【新增】；另外一種需要放在表格外的功能是批量操作，因為批量操作需要對多行數據進行同時操作，也不是屬于單個對象實例的。

以此為依據將圖中操作分類如下：

大家應該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內操作，也可以作為批量操作的問題。

作為行內操作，優點是更便捷；表外作為是批量操作，這樣更方便的同時操作多個數據，但如果只是操作單個數據時就會增加用戶的操作步驟；或者兩種方式都提供，雖然更靈活但是會讓頁面比較冗余。

其實怎么選擇還是要根據具體業務場景來決定，首先判斷這倆操作是不是高頻功能；在我們的業務功能中，已入職和離職的員工在該頁面不能操作刪除，且【刪除】是相對低頻地，完全可以只提供單個刪除功能。

【入職生效】作為高頻功能，與產品經理討論后提供行內操作和批量操作，選擇這個方案的原因是，該功能作為行內操作已上線運營了1年時間，移除會產生學習成本。

2）判斷擺放位置

批量操作常見的擺放位置有三種形式。

方案一：和全局操作一起置于表左上方或右上方。

因批量操作需要勾選左邊復選框，放置在表右上方不符合操作動效，本著效率至上的原則，此處不考慮放在右上方。

• 優點：操作項信息前置能清楚的知道有哪些功能，無需用戶記憶；
• 缺點：但當批量操作較多時，會擠占頁面空間，導致操作按鈕很多，不易查找；

方案二：默認不顯示，勾選激活后顯示于表左上方。

• 優點：減少了相應的視覺噪音，業務拓展性強；
• 缺點：有一定的學習成本，沒有勾選時不知道有該操作項；

方案三：直接顯示于表左下方，但需勾選激活后操作。

• 優點：上內容下操作，符合操作動線；
• 缺點：和分頁放置一起不易于業務拓展；

根據我司業務，綜合考慮后選擇方案三，放置于表的左下方。

3）優化信息層級

單行操作根據操作頻率優先級為入職生效>詳情>刪除>編輯，其中編輯和刪除屬于低頻操作，可折疊隱藏；批量操作-導出也是低頻操作。

最后定稿方案如下：

五、結語

2B產品應該著眼于業務，本文是根據我司業務提供了一個表格設計基本的指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。

但是表格設計的原則應該是通用的：

• 從用戶閱讀表格的目標出發設計表格的內容和布局；
• 從提高用戶閱讀速度的功能角度出發進行表格的視覺設計，避免過度設計；
• 當表格指標、數據過多時，提供一些自定義的工具幫助用戶自助選擇出最需要的數據條目。

本文到這就結束啦！如果你還有什么好的想法和建議，可以在評論里留言討論。

本文由 @小鹿_lp 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議