什么是表格？

表格頁是公認(rèn)為展示數(shù)據(jù)最為清晰和高效的形式，它的信息密度極高，就像是一個(gè)家庭衣柜，里面很多抽屜，我們需要把衣物整潔擺放收納，提高空間利用率。

表格頁由三個(gè)部分，如下圖所示：

一、數(shù)據(jù)查看

數(shù)據(jù)查看可通過四個(gè)維度去自檢設(shè)計(jì)是否合理，分別為信息降噪、呼吸適中、高效易讀、詳情查看。

1、信息降噪-內(nèi)容

通過對表頭內(nèi)容刪減，我們一眼就可以看到表格的重要信息，從而幫助用戶能快速進(jìn)行數(shù)據(jù)決策。因此，列數(shù)控制在7+-2，列表表頭展示更為關(guān)注的數(shù)據(jù)，更多信息在詳情中展示。

另外，如果不同用戶想看到的信息側(cè)重不同，我們還可以做自定義設(shè)置項(xiàng)，讓用戶自己去選擇想要看到的表格內(nèi)容。

用最少字?jǐn)?shù)給表頭做精簡，精簡到少一字不可。

另外，當(dāng)遇到少一字都不可的長標(biāo)題，我們可以定義專有名詞，并且給一個(gè)解釋專有名詞的icon，便于第一次使用的用戶易于理解。

2、 信息降噪-視覺

去掉不必要的分割線和斑馬紋，用對齊和間距來區(qū)分列和行，可以鼠標(biāo)滑上去給斑馬紋，增強(qiáng)交互體驗(yàn)。

分割線的樣式盡量輕盈，不要搶視覺，突出內(nèi)容。

去掉不必要的裝飾和顏色，為了防止視覺負(fù)擔(dān)，少用面性圖標(biāo)，使用顏色保持克制，刪除如果不是點(diǎn)擊即可刪除，可以不用預(yù)警色。

不要出現(xiàn)襯線字體，比如宋體，保持字體統(tǒng)一。

3、 呼吸適中-單元格

定義單元格高度。字號、行高、上下間距進(jìn)行規(guī)范，這里有一個(gè)比較常見的規(guī)范，將字號設(shè)為N，那文字行高就是

1.5N，上下間距為1.2N，單元格高度=內(nèi)容高度+上間距+下間距。

4、 呼吸適中-列寬

我們將首列和尾列定義為N1，列與列之間定義為N2，隨著頁面收縮和拉伸，N1保持不變，N2自適應(yīng)變寬變窄，這樣頁面會(huì)看起來會(huì)更均衡，這樣會(huì)顯得有呼吸感。一般定義一個(gè)最小值，當(dāng)表格寬度大于頁面寬度時(shí)候，固定首尾列，左右滑動(dòng)。

5、 高效易讀-對齊方式

標(biāo)題和內(nèi)容一般采用左對齊，更高效的瀏覽順序，有長短不一的數(shù)字時(shí)，右對齊方便比較。操作項(xiàng)一般放在尾列右對齊。

6、高效易讀-不做無意義留白

當(dāng)數(shù)據(jù)為零時(shí)就寫上“零”，當(dāng)沒有數(shù)據(jù)時(shí)候就寫上“-”。比如開發(fā)取不到的后臺(tái)數(shù)據(jù)，我們就可以給“-”作為顯示，如果得到的數(shù)據(jù)就是零，我們也要讓它顯示出來。

7、高效易讀-選擇合適的翻頁器

選擇合適的翻頁器，利用分頁可以緩解服務(wù)器的加載壓力。無限瀏覽如果數(shù)據(jù)過多很容易使頁面崩掉，使用功能較為強(qiáng)大的翻頁器，每一頁默認(rèn)10行以上，減少翻頁次數(shù)，增強(qiáng)用戶體驗(yàn)，給出默認(rèn)行數(shù)后，可以讓用戶自定義每頁行數(shù)，相比跨屏翻頁，向下滑動(dòng)更便利。

8、高效易讀-收起低頻操作項(xiàng)

超過四項(xiàng)操作項(xiàng)收起來，可以用圖標(biāo)指引下一步操作。關(guān)于哪些可以操作項(xiàng)可以折疊起來，可以與產(chǎn)品經(jīng)理溝通收起低頻鏈接，或者埋點(diǎn)一個(gè)月時(shí)間查看點(diǎn)擊量也可以做出決策。

9、高效易讀-默認(rèn)行數(shù)

當(dāng)單元格內(nèi)容長度不固定的時(shí)候，定義好內(nèi)容的寬度和行數(shù)以及字?jǐn)?shù)，超出顯示的字?jǐn)?shù)可以用省略號代替。

10、高效易讀-行的排序

默認(rèn)最近創(chuàng)建的在表格中第一行顯示，使用戶感知最新情況。也可以帶排序的表頭，讓用戶自定義排序。

11、詳情查看-入口

入口可以在操作里加詳情，也可以把發(fā)起人做成可以點(diǎn)擊樣式，跳轉(zhuǎn)詳情，并且可以避免視覺干擾，也就是降噪，當(dāng)鼠標(biāo)Hover上去時(shí)候，發(fā)起人才顯示出跳轉(zhuǎn)色，提示可點(diǎn)擊狀態(tài)。

12、詳情查看-交互方式

第一種是用彈窗的形式。第二種是第一種的延伸，當(dāng)內(nèi)容過多時(shí)候可以考慮抽屜樣式。這些交互的共同有點(diǎn)就是沒有脫離原頁面。當(dāng)詳情內(nèi)容較多且需要編輯時(shí)候，我們就考慮跳新頁面，使用新頁面進(jìn)行承載。(這里有個(gè)細(xì)節(jié)，新開tab頁可以打開多個(gè)詳情頁，如果覆蓋原頁面則只能打開一個(gè)詳情頁，并且不能同時(shí)查看原頁面和詳情頁。所以我們要根據(jù)具體場景、業(yè)務(wù)需求去設(shè)計(jì))

二、數(shù)據(jù)過濾

數(shù)據(jù)過濾由搜索，篩選和標(biāo)簽頁構(gòu)成。

1、搜索

搜索可分為模糊搜索和帶標(biāo)簽的搜索。工作中常用的搜索為模糊搜索，優(yōu)點(diǎn)是只要有相關(guān)的內(nèi)容都會(huì)搜索出來，減少了精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)。缺點(diǎn)是容易把不相關(guān)的信息也帶出來，例如搜索手機(jī)號，把相關(guān)編碼也匹配了出來。帶標(biāo)簽的搜索優(yōu)點(diǎn)是搜索匹配精準(zhǔn)度高。缺點(diǎn)是每次只能對單一條件進(jìn)行搜索，當(dāng)用戶要搜索的時(shí)候都要去切換選擇信息，多了一個(gè)步驟。另外，在實(shí)際工作中，可以通過埋點(diǎn)或者調(diào)研，如果搜索框搜索手機(jī)號頻率較大，我們可以把手機(jī)號設(shè)置為默認(rèn)選項(xiàng)。

2、篩選

篩選框可以分為下拉篩選和平鋪篩選。下拉篩選的優(yōu)點(diǎn)是空間利用率高，起到了很好的收納作用。缺點(diǎn)是無法直觀看到所有篩選項(xiàng)。平鋪篩選優(yōu)點(diǎn)是操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件，可以自定義輸入。缺點(diǎn)是空間利用率低，不適合選項(xiàng)太多的情況。如果用戶點(diǎn)擊其中一個(gè)選項(xiàng)概率最多，我們就可以將點(diǎn)擊率高的一項(xiàng)作為默認(rèn)項(xiàng)，然后選擇第一種下拉篩選框。如果用戶點(diǎn)擊每個(gè)選項(xiàng)概率相等，在空間允許情況下我們可以平鋪出來。

當(dāng)篩選項(xiàng)過多時(shí)，信息排序應(yīng)是用戶目標(biāo)優(yōu)于業(yè)務(wù)邏輯，即排序應(yīng)該考慮用戶的使用習(xí)慣。例如當(dāng)用戶查找訂單時(shí)候，第一反應(yīng)都是搜索框輸入，而一般通過價(jià)格過濾較少的應(yīng)該放在末尾。

當(dāng)然，我們還有更多優(yōu)化空間，當(dāng)篩選項(xiàng)過多時(shí)，我們可以默認(rèn)折疊低頻篩選項(xiàng)。折疊哪些篩選項(xiàng)還是得基于用戶習(xí)慣，可以通過數(shù)據(jù)埋點(diǎn)或者用戶調(diào)研得到用戶使用場景。

當(dāng)通過數(shù)據(jù)埋點(diǎn)或者用戶調(diào)研發(fā)現(xiàn)絕大多數(shù)用戶只需要用到搜索項(xiàng)，那么我們就可以只保留搜索框，其他選項(xiàng)全部折疊到高級搜索里面，當(dāng)點(diǎn)擊高級搜索時(shí)候出現(xiàn)一個(gè)彈窗，既可以保留更多篩選內(nèi)容，又可以使頁面不會(huì)看起來很擁擠。

(當(dāng)彈窗內(nèi)容選擇完畢時(shí)候，高級搜索按鈕會(huì)呈現(xiàn)高亮顏色，未選擇更多篩選內(nèi)容時(shí)候則呈現(xiàn)默認(rèn)態(tài)。）

3、標(biāo)簽頁

標(biāo)簽頁是比較常用的數(shù)據(jù)過濾方式，切換樣式包括基本樣式、卡片樣式以及膠囊樣式。一般和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)。

同樣我們可以通過數(shù)據(jù)埋點(diǎn)或者調(diào)研，將用戶最關(guān)注的選項(xiàng)設(shè)置為默認(rèn)選項(xiàng)，減少用戶的選擇，提高用戶體驗(yàn)。例如下圖，用戶更關(guān)注的是銷售中的商品，即將到店的客戶，以及即將發(fā)貨的商品，所以我們將這些選項(xiàng)作為默認(rèn)項(xiàng)。

三、數(shù)據(jù)操作

數(shù)據(jù)操作從控制范圍可以分為單行操作、批量操作和全局操作。從操作屬性可以分為新增數(shù)據(jù)、編輯數(shù)據(jù)和刪除數(shù)據(jù)。

當(dāng)從產(chǎn)品那里拿來一個(gè)原型圖堆疊很多操作項(xiàng)，我們就可以根據(jù)控制范圍來區(qū)分判斷，從而明確擺放位置。單行操作可以放到表格里，批量操作根據(jù)親密性原則放在左上方，這樣可以離打勾矩形近一些，如果有利于用戶操作，也可以放在左下方。全局操作則可以放單獨(dú)一行，使得層級更加清晰。

調(diào)整后，我們發(fā)覺雖然解決了多個(gè)操作放一塊的行為，但是層級還是不夠清晰，我們可以通過割裂板塊或者板塊顏色不同來調(diào)整，使得識(shí)別性更強(qiáng)。

后記

B端設(shè)計(jì)強(qiáng)調(diào)的是在好用的基礎(chǔ)上讓頁面變好看，所以更考慮用戶體驗(yàn)。所有設(shè)計(jì)方式不局限與一種，只要操作上是順手，業(yè)務(wù)上是合理的，都是優(yōu)秀的設(shè)計(jì)。如果一個(gè)頁面占據(jù)半屏都是篩選項(xiàng)，那么我們就得好好反思，因?yàn)樗泻Y選項(xiàng)不可能都是高頻操作，接下來就需要去做數(shù)據(jù)埋點(diǎn)并進(jìn)行頁面優(yōu)化了。另外，一張只有篩選項(xiàng)和表格的頁面，表格數(shù)據(jù)查看區(qū)域建議占整個(gè)頁面的百分之六十到百分之七十，這個(gè)時(shí)候?yàn)g覽起來是比較舒適的。

文章來源：UI中國    推薦：最多三分糖

藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.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ù)