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

1. 思路

圖1

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

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

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

圖2

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

2. 場(chǎng)景、行為模式、優(yōu)化點(diǎn)

2.1 錄入場(chǎng)景

2.1.1 場(chǎng)景描述

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

2.1.2 行為模式

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

2.1.3 優(yōu)化點(diǎn)

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

圖3

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

2.2.1 場(chǎng)景描述

用戶需要對(duì)大量結(jié)構(gòu)化的數(shù)據(jù)進(jìn)行處理，用戶在此場(chǎng)景下的主要目的是快速篩選并處理數(shù)據(jù)（新增、刪除、修改、查看、啟用/禁用、復(fù)制等）。數(shù)據(jù)處理場(chǎng)景的表格通?？煞Q為列表，因?yàn)樗ǔＶ皇且粋€(gè)入口載體，用戶如果想了解更明細(xì)信息，需要進(jìn)入新的明細(xì)頁。

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

2.2.2 行為模式

1. 精準(zhǔn)篩選：用戶在處理數(shù)據(jù)前，已清楚知道數(shù)據(jù)的某個(gè)信息片段，如商品編碼，他會(huì)通過信息片段直接搜索。
2. 模糊篩選：對(duì)需要處理的數(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. 操作錯(cuò)誤：系統(tǒng)報(bào)錯(cuò)→了解原因→找到未處理的數(shù)據(jù)→重新操作。
7. 新增操作：新增數(shù)據(jù)后→找到已新增的數(shù)據(jù)→對(duì)新增數(shù)據(jù)進(jìn)行操作。

2.2.3 優(yōu)化點(diǎn)

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

圖4

圖5

2.3 選擇/挑選場(chǎng)景

2.3.1 場(chǎng)景描述

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

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

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

2.3.2 行為模式

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

2.3.3 優(yōu)化點(diǎn)

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

圖6

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

2.4.1場(chǎng)景描述

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

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

2.4.2 行為模式

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

2.4.3 優(yōu)化點(diǎn)

1. 系統(tǒng)能高亮標(biāo)記異常數(shù)據(jù)和出錯(cuò)風(fēng)險(xiǎn)較大的數(shù)據(jù)，提示用戶，并告知原因；關(guān)鍵數(shù)據(jù)使用更顯眼的形式展現(xiàn)，圖7。
2. 如果用戶對(duì)數(shù)據(jù)明細(xì)不敏感，可使用可視化圖表（趨勢(shì)圖、餅圖）等形式展示；或者讓用戶選擇切換，圖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ù)；可以滾動(dòng)頁面，避免翻頁，否則用戶需要頻繁切換頁面，打斷用戶心流。
6. 支持用戶橫向或縱向拖動(dòng)表格，直觀操作而不是使用滾動(dòng)條。

圖7

圖8

2.5 特殊場(chǎng)景

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

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

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

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

圖9

2.6 通用場(chǎng)景

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

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

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

優(yōu)化點(diǎn)：

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

2.6.2 頁面空間不足的情況

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

優(yōu)化點(diǎn)：

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

圖10

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

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

優(yōu)化點(diǎn)：

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

圖11

3. 下一步

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

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

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

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

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

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