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

1. 思路

圖1

發(fā)現(xiàn)問題解決問題是設(shè)計的基本思路，圖1羅列了部分我們產(chǎn)品中表格組件的現(xiàn)有問題。但是直接針對問題點進(jìn)行優(yōu)化可能會有更多的問題：

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

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

圖2

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

2. 場景、行為模式、優(yōu)化點

2.1 錄入場景

2.1.1 場景描述

在錄入場景下，用戶需要錄入大量結(jié)構(gòu)化數(shù)據(jù)到系統(tǒng)內(nèi)，用戶在此場景下的主要目標(biāo)是高效且無誤地將信息錄入到表格內(nèi)。例如：銷售人員在開單時，需要在訂單中錄入商品、數(shù)量、型號等多維的信息，且錄入的商品明細(xì)可多達(dá)上百條。所以銷售人員會在表格上進(jìn)行大量重復(fù)性的操作。

2.1.2 行為模式

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

2.1.3 優(yōu)化點

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

圖3

2.2 數(shù)據(jù)處理場景

2.2.1 場景描述

用戶需要對大量結(jié)構(gòu)化的數(shù)據(jù)進(jìn)行處理，用戶在此場景下的主要目的是快速篩選并處理數(shù)據(jù)（新增、刪除、修改、查看、啟用/禁用、復(fù)制等）。數(shù)據(jù)處理場景的表格通常可稱為列表，因為它通常只是一個入口載體，用戶如果想了解更明細(xì)信息，需要進(jìn)入新的明細(xì)頁。

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

2.2.2 行為模式

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

2.2.3 優(yōu)化點

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

圖4

圖5

2.3 選擇/挑選場景

2.3.1 場景描述

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

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

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

2.3.2 行為模式

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

2.3.3 優(yōu)化點

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

圖6

2.4 數(shù)據(jù)統(tǒng)計場景

2.4.1場景描述

用戶需要對數(shù)據(jù)進(jìn)行審查和分析，其目標(biāo)是在龐大的數(shù)據(jù)集中確認(rèn)某些結(jié)果或得出某些結(jié)論。由于關(guān)注的數(shù)據(jù)會有主次之分，數(shù)據(jù)與數(shù)據(jù)之間也會有內(nèi)在聯(lián)系，用戶會更加跳躍地掃視頁面，而且會更加反復(fù)地審查數(shù)據(jù)。

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

2.4.2 行為模式

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

2.4.3 優(yōu)化點

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

圖7

圖8

2.5 特殊場景

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

以輕數(shù)據(jù)錄入場景為例：

2.5.1 輕數(shù)據(jù)錄入場景

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

圖9

2.6 通用場景

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

2.6.1 內(nèi)容溢出單元格的情況

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

優(yōu)化點：

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

2.6.2 頁面空間不足的情況

當(dāng)表格數(shù)據(jù)較多時，導(dǎo)致一屏無法裝下所有數(shù)據(jù)，閱讀效率會大打折扣。

優(yōu)化點：

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

圖10

2.6.3 數(shù)據(jù)密集的情況

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

優(yōu)化點：

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

圖11

3. 下一步

事情還沒結(jié)束，47個優(yōu)化點其實不一定都適合應(yīng)用于我們的產(chǎn)品當(dāng)中，這需要結(jié)合真實的用戶場景和業(yè)務(wù)需求等因素進(jìn)行分析。

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

最后，才發(fā)現(xiàn)洋洋灑灑寫了一大堆，感謝堅持閱讀到這的你，希望以上內(nèi)容對你有幫助~

作者：genrry，公眾號：設(shè)計師阿余。熱愛設(shè)計，關(guān)注用戶體驗，分享設(shè)計思考。

本文由 @genrry 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議