表格是B端產品中最常見的交互組件之一，甚至在某些業務場景下是最核心的交互組件。但由于表格的樣式復雜和操作繁瑣，用戶在使用時會出現諸多體驗問題。本文我會以自身的項目經歷，分享一下表格組件的優化。enjoy~~

1. 思路

圖1

發現問題解決問題是設計的基本思路，圖1羅列了部分我們產品中表格組件的現有問題。但是直接針對問題點進行優化可能會有更多的問題：

• 首先，問題未必全面，解決方案可能顧此失彼；
• 其次，沒有還原出用戶真實的場景，解決未必是對的；
• 最后，單點的解決方案難以形成規范，復用性較低。

所以，在執行前我制定了以下思路，圖2。

圖2

• 第一步，由于表格組件可能出現于產品內的多個頁面。所以，需要對產品內的所有頁面進行清查。在清查過程中盡可能地發現組件存在的問題，以及梳理該頁面下的使用場景是什么。
• 第二步，將梳理出的組件抽象化并按場景歸類，歸類的目的在于讓組件的優化具有通用性和一致性，而不是針對個別頁面的個別優化。而且能讓我們分析出該場景下用戶的行為模式，由此推導出解決方案。
• 第三步，基于場景發散解決方案。我們可以依據競品分析、文獻研究和用戶行為分析等方式，推導出解決方案。在此階段可以先不判斷，而是盡可能窮盡所有情況，這會讓我們的優化方案更全面。在項目中，我將表格組件的使用場景歸納為錄入場景、數據處理場景、選擇場景、數據統計場景、特殊場景和通用場景?；谶@6個場景的分析將在下文詳細介紹。
• 第四步，聚焦出可執行落地的方案。在第三步所發散的方案不可能全部落實，需要定義出優先級。而優先級的依據可以是上一步歸納的問題、設計原則、業務場景和技術框架限制等等。
• 第五步，撰寫文檔，形成規范輸出。便于以后的溝通對接、回溯和迭代。

2. 場景、行為模式、優化點

2.1 錄入場景

2.1.1 場景描述

在錄入場景下，用戶需要錄入大量結構化數據到系統內，用戶在此場景下的主要目標是高效且無誤地將信息錄入到表格內。例如：銷售人員在開單時，需要在訂單中錄入商品、數量、型號等多維的信息，且錄入的商品明細可多達上百條。所以銷售人員會在表格上進行大量重復性的操作。

2.1.2 行為模式

• 逐條新增行錄入：當錄入的數據超出默認提供的行數時，用戶會新增一行→錄入一行數據→再新增一行→再錄入……
• 先新增后錄入：用戶已經知道他需要錄入的行數，所以先新建足夠多的行數，再依次錄入數據……
• 全鍵盤錄入：用戶會延續在Excel中的操作習慣，如，按tab鍵切換單元格編輯或者其他快捷鍵操作，全程脫離鼠標。
• 尋找錯誤：保存后系統報錯→用戶找到不合法的字段→修改。
• 再次修改：再次進入頁面→修改數據→再次確認修改過的數據→保存；再次進入頁面→修改數據→中途變卦→找回修改過的數據→還原/再修改→保存。
• 重復操作：用戶錄入的數據都是一致的，或者有規律的。例如：錄入商品的倉庫，通常都是同一個倉庫。
• 錄入打斷：錄入場景的持續時間較長，用戶會在這段時間內被打斷，然后再次回來錄入。

2.1.3 優化點

1. 當用戶錄入到最后一行時，系統默認自動新建一行，省去用戶新建行的麻煩。
2. 新建按鈕始終靠近行，用戶能在錄入過程中，縮短鼠標的移動路徑。
3. 提供tab鍵等快捷鍵，實現選中態在單元格內跳轉；當跳到不可錄入的單元格時（如禁用狀態的輸入框、開關控件等），直接跳過；當跳到下拉選擇框時，直接展開下拉；當選中態跳到視窗外時，自動挪動表格，保證選中態始終可見。
4. 降低表格內的輸入控件類別，讓用戶使用同樣的操作邏輯進行錄入。例如，單選控件可能會打斷用戶的全鍵盤操作（必須用鼠標點擊），可將單選改為下拉，用戶可以通過↑↓鍵進行選擇，操作流將不會被打斷，圖3。
5. 即時校驗，用戶輸入后會即時校驗，無需要等到保存是再校驗。
6. 報錯時，自動定位到報錯的單元格并高亮顯示，用戶無需要在一堆數據中尋找。
7. 針對報錯的內容給出修改建議，讓用戶知道如何正確錄入。
8. 對修改后的數據加上提示（如：字體加粗），讓用戶可以快速返回查找。
9. 記錄用戶的當次的修改記錄，減少用戶回憶之前的內容是什么。
10. 提供批量錄入功能，或者如Excel表中的一鍵填充功能，可降低重復的工作量。
11. 提供行復制功能，快速錄入相似度極高的行數據。
12. 當表格在草稿狀態下再次被打開時，光標自動定位到最后編輯的單元格，幫助用戶回憶上次錄入到哪里。

圖3

2.2 數據處理場景

2.2.1 場景描述

用戶需要對大量結構化的數據進行處理，用戶在此場景下的主要目的是快速篩選并處理數據（新增、刪除、修改、查看、啟用/禁用、復制等）。數據處理場景的表格通?？煞Q為列表，因為它通常只是一個入口載體，用戶如果想了解更明細信息，需要進入新的明細頁。

所以這種表格所承載的數據既復雜又不全面，一般來說，用戶會經歷三個階段：篩選、審閱、處理。例如：銷售人員需要對之前開出的銷售單進行審核，他需要將目標單據從大量的單據里篩選出來，然后審閱單據的信息是否有誤，最后進行確認審核操作。

2.2.2 行為模式

1. 精準篩選：用戶在處理數據前，已清楚知道數據的某個信息片段，如商品編碼，他會通過信息片段直接搜索。
2. 模糊篩選：對需要處理的數據印象模糊或不清楚需要處理的數據有什么，只能縮小數據范圍。
3. 快速處理：篩選出數據→只審閱關鍵數據或狀態→批量選中要處理的數據→處理。
4. 謹慎處理：篩選出數據→進入詳細頁面審閱詳情→處理→返回列表。
5. 逐一處理：逐行審閱行信息→處理→再審閱下一行信息→再處理→直至待處理的信息全部完成
6. 操作錯誤：系統報錯→了解原因→找到未處理的數據→重新操作。
7. 新增操作：新增數據后→找到已新增的數據→對新增數據進行操作。

2.2.3 優化點

1. 提供搜索功能，直接篩選出用戶需要處理的數據。
2. 提供多維的篩選和排序，減少用戶尋找信息的時間。
3. 提高處理的效率：將關鍵數據和關鍵狀態做特殊的視覺處理，讓用戶迅速搜尋并理解；點擊整行可選中，無需用戶瞄準勾選框。
4. 幫助用戶快捷查詢明細：雙擊/單擊整行可以跳轉至相應頁面，無需用戶瞄準查看按鈕或超鏈接； 在表中展開更明細的信息或者用側拉浮層或氣泡承載更多信息，無需用戶跳轉頁面查看，如圖4。
5. 當逐一處理為主要場景時，操作按應鈕直接顯示在行上，用戶可以直接操作。
6. 允許用戶批量處理；告知用戶已選多少條數據；允許跨頁選擇。
7. 協助用戶完成任務：系統先將沒有問題的數據全部處理完畢，再向用戶報錯，而不是直接終止進程；如果報錯內容可被更正，直接引導用戶到相應頁面更正；如果報錯內容不可被更正，告知用戶原因，自動定位到報錯的數據行并高亮顯示，避免用戶找不到報錯的數據。如圖5。
8. 新增數據行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。

圖4

圖5

2.3 選擇/挑選場景

2.3.1 場景描述

選擇場景的表格通常也可以稱為列表，因為其本質是對選項的羅列，用戶需要在大量選項中進行選擇。此場景下用戶目標明確，操作路徑單一，時間短暫，能高效識別出目標信息是核心需求。

由于目標明確，用戶關注的信息會更聚焦。由于用于記憶有限，多維信息能輔助用戶決策，但信息量過多會影響用戶選擇效率。

例如：銷售人員需要在表單上錄入客戶信息，他需要呼出客戶列表彈窗，在彈窗內選擇客戶并將信息帶入到表單上。但由于同一個客戶可能配有多個聯系人、多個地址或多個子公司等情況，所以銷售員在選擇過程中需要快速過濾這些信息是否選擇正確。

2.3.2 行為模式

1. 快速選擇：用戶選擇的依據單一，找到目標后馬上確認。
2. 謹慎選擇：用戶選擇的依據多維，需要相互比對才能進行確認。
3. 遺忘選項：用戶選擇選項→滾動表格→再多選其他選擇→重復多次→遺忘之前的選擇有哪些。
4. 重新選擇：用戶再次打開表格→取消原來的選項→選擇新項目。
5. 補充選擇：用戶再次打開表格→回顧原來的選項→添加新項目。
6. 范圍選擇：選項帶有連續關系，用戶需要從頭到尾依次選擇。
7. 習慣：用戶的選擇帶有重復性，某些選項會有更高的概率被選中。
8. 嘗新：用戶更可能會偏好新的選項。

2.3.3 優化點

1. 支持雙擊/單擊行確認選中行數據，無需要再點擊“確定”按鈕，省去冗余操作。
2. 如果用戶更多傾向快速選擇，可將表格改成列表或卡片等形式。如圖6，騰訊文檔為例。
3. 支持數據篩選（與數據處理場景一致）。
4. 記錄并顯示用戶的已選項和個數，避免用戶遺忘選項。
5. 允許用戶一鍵清除選項。
6. 如果選項內容帶有強連續屬性，提供范圍選擇的快捷鍵。（如PS連續選擇圖層）
7. 提供快捷選項：記錄用戶的選擇習慣，設置常用選項；或者允許用戶標記常用選項。
8. 如果選項受時間影響較大，可按時間倒敘排列。

圖6

2.4 數據統計場景

2.4.1場景描述

用戶需要對數據進行審查和分析，其目標是在龐大的數據集中確認某些結果或得出某些結論。由于關注的數據會有主次之分，數據與數據之間也會有內在聯系，用戶會更加跳躍地掃視頁面，而且會更加反復地審查數據。

例如：銷售人員需要查閱本月的銷售情況，進入到商品銷售明細表中，分析本月的經營狀況，若其中某些商品滯銷，需要分析它們的內在聯系，并制定之后的銷售策略。

2.4.2 行為模式

1. 數據審查：整體瀏覽報表→重點查看幾個關鍵數據→分析有沒有異常；
2. 掃視概覽：整體瀏覽報表→留意數據整體的變化、趨勢等，忽略明細；
3. 來源追溯：發現異常數據或產生疑問→追溯數據來源→分析原因；
4. 閱讀習慣：用戶會延續現實報表的閱讀習慣，對新的報表樣式需要時間適應；
5. 反復跳讀：用戶的記憶有限，當同時關注多個數據時，會反復跳讀。

2.4.3 優化點

1. 系統能高亮標記異常數據和出錯風險較大的數據，提示用戶，并告知原因；關鍵數據使用更顯眼的形式展現，圖7。
2. 如果用戶對數據明細不敏感，可使用可視化圖表（趨勢圖、餅圖）等形式展示；或者讓用戶選擇切換，圖8。
3. 用戶可以由數據聯查到數據來源，并引導到具體的頁面查看詳情。
4. 使用公認的標準模板展示數據；或者允許用戶自定義模板，較少用用戶的認知負擔。
5. 盡量一屏展示所有數據；可以滾動頁面，避免翻頁，否則用戶需要頻繁切換頁面，打斷用戶心流。
6. 支持用戶橫向或縱向拖動表格，直觀操作而不是使用滾動條。

圖7

圖8

2.5 特殊場景

由于B端業務的特殊性，上述歸納的場景仍可能不夠。在一些特殊業務下，會催生出更多表格使用場景，比如：在本項目中，我歸納了4種特殊場景：多維錄入場景、輕數據錄入場景、“報表+數據處理”場景和“選擇+數據處理”場景，我們可以針對這種特殊的場景做相應的優化。

以輕數據錄入場景為例：

2.5.1 輕數據錄入場景

銷售人員需要錄入收款信息到單據上，然而，客戶通常只會用一個賬號付款，所以銷售人員只會在表格內錄入一行分錄，這是主要場景。但也有客戶用多個賬號付款，所以銷售人員需要錄入多行分錄，這是次要場景。盡管基礎的錄入表格可以支持以上場景，但由于錄入的信息非常少量，使用表格的形式未免太復雜，所以可以使用其它錄入控件替代。如圖9。

圖9

2.6 通用場景

另外，還有一些情況無論在哪種場景都有可能出現，我們稱之為通用場景，包括：內容溢出單元格的情況、頁面空間不足的情況和數據密集的情況。

2.6.1 內容溢出單元格的情況

當單元格字段不可控時，字段長度會很容易溢出單元格，造成信息缺失。

優化點：

1. 折行，將數據折成兩行，能應對大多數短文本的溢出情況。
2. 鼠標懸停后展示全部信息，可以適應任何長度的字段，但會增加用戶的操作成本，對于高頻查看的數據不夠友好。
3. 允許用戶拖動邊框設置列寬，并記錄設置，但弊端在于占用空間（可能導致出現橫向滾動條）。
4. 上述幾種優化方案可以組合，以最大程度地覆蓋使用場景。
5. 當單元格字段可控時，可以固定列寬度，以保證字段完整且可讀。

2.6.2 頁面空間不足的情況

當表格數據較多時，導致一屏無法裝下所有數據，閱讀效率會大打折扣。

優化點：

1. 可固定表格窗體的大小，表頭和底欄固定，讓用戶始終清楚每列的數據是什么數據，當表格的內容可以自我解釋時，可以隱藏表頭，但這種情況很少見。
2. 當列數太多，用戶需要橫向滾動表格時，允許用戶進行列設置（顯示、隱藏、凍結、調整順序…），讓重要信息時時可見，如圖10。
3. 當列數和行數太多時，橫向滾動條和縱向滾動條會同時出現?？v向滾動條可以當用戶滾動時或鼠標懸停表格邊緣時才出現，橫向滾動條建議始終顯示或者鼠標懸停表格時才出現。

圖10

2.6.3 數據密集的情況

用戶只會掃視我們的界面，而不會仔細閱讀。在數據密集的情況下，用戶很容易掃視錯誤，眼花繚亂。

優化點：

1. 鼠標懸停某行時，整行高亮顯示，如圖11。
2. 使用斑馬線，分隔每行信息。
3. 當用戶需要進行行與行間的數據對比時，可以使用縱向斑馬線或縱向分割線，讓列更突出。
4. 自定義行高，因為用戶習慣和用戶設備的不同，無法滿足所有用戶的需求，所以可以讓用戶去選擇合適的行高。
5. 定義合適的對齊方式，一般來說數值字段右對齊，中英文本左對齊，布爾值（是否、男女）居中對齊，多級表頭居中對齊。

圖11

3. 下一步

事情還沒結束，47個優化點其實不一定都適合應用于我們的產品當中，這需要結合真實的用戶場景和業務需求等因素進行分析。

比如我們項目里，收到的反饋大多都指向于錄入場景的報錯問題，系統報錯后用戶的心流會被嚴重打斷，失去焦點。其次是快捷鍵支持問題，我們的目標用戶會經常使用tab切換，這時候他們會有輸入的預期，一旦這種預期不符合，心流也會被打斷，對于這種問題我們會優先處理。所以，盡管我們花了很大精力去發掘表格的優化點，但仍需要克制地去選擇。

最后，才發現洋洋灑灑寫了一大堆，感謝堅持閱讀到這的你，希望以上內容對你有幫助~

作者：genrry，公眾號：設計師阿余。熱愛設計，關注用戶體驗，分享設計思考。

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

題圖來自Unsplash，基于CC0協議