2021-5-11 周周
什么是表格？
表格頁(yè)是公認(rèn)為展示數(shù)據(jù)最為清晰和高效的形式，它的信息密度極高，就像是一個(gè)家庭衣柜，里面很多抽屜，我們需要把衣物整潔擺放收納，提高空間利用率。
表格頁(yè)由三個(gè)部分，如下圖所示：
一、數(shù)據(jù)查看
數(shù)據(jù)查看可通過(guò)四個(gè)維度去自檢設(shè)計(jì)是否合理，分別為信息降噪、呼吸適中、高效易讀、詳情查看。
1、信息降噪-內(nèi)容
通過(guò)對(duì)表頭內(nèi)容刪減，我們一眼就可以看到表格的重要信息，從而幫助用戶能快速進(jìn)行數(shù)據(jù)決策。因此，列數(shù)控制在7+-2，列表表頭展示更為關(guān)注的數(shù)據(jù)，更多信息在詳情中展示。
另外，如果不同用戶想看到的信息側(cè)重不同，我們還可以做自定義設(shè)置項(xiàng)，讓用戶自己去選擇想要看到的表格內(nèi)容。
用最少字?jǐn)?shù)給表頭做精簡(jiǎn)，精簡(jiǎn)到少一字不可。
另外，當(dāng)遇到少一字都不可的長(zhǎng)標(biāo)題，我們可以定義專有名詞，并且給一個(gè)解釋專有名詞的icon，便于第一次使用的用戶易于理解。
2、 信息降噪-視覺(jué)
去掉不必要的分割線和斑馬紋，用對(duì)齊和間距來(lái)區(qū)分列和行，可以鼠標(biāo)滑上去給斑馬紋，增強(qiáng)交互體驗(yàn)。
分割線的樣式盡量輕盈，不要搶視覺(jué)，突出內(nèi)容。
去掉不必要的裝飾和顏色，為了防止視覺(jué)負(fù)擔(dān)，少用面性圖標(biāo)，使用顏色保持克制，刪除如果不是點(diǎn)擊即可刪除，可以不用預(yù)警色。
不要出現(xiàn)襯線字體，比如宋體，保持字體統(tǒng)一。
3、 呼吸適中-單元格
定義單元格高度。字號(hào)、行高、上下間距進(jìn)行規(guī)范，這里有一個(gè)比較常見(jiàn)的規(guī)范，將字號(hào)設(shè)為N，那文字行高就是
1.5N，上下間距為1.2N，單元格高度=內(nèi)容高度+上間距+下間距。
4、 呼吸適中-列寬
我們將首列和尾列定義為N1，列與列之間定義為N2，隨著頁(yè)面收縮和拉伸，N1保持不變，N2自適應(yīng)變寬變窄，這樣頁(yè)面會(huì)看起來(lái)會(huì)更均衡，這樣會(huì)顯得有呼吸感。一般定義一個(gè)最小值，當(dāng)表格寬度大于頁(yè)面寬度時(shí)候，固定首尾列，左右滑動(dòng)。
5、 高效易讀-對(duì)齊方式
標(biāo)題和內(nèi)容一般采用左對(duì)齊，更高效的瀏覽順序，有長(zhǎng)短不一的數(shù)字時(shí)，右對(duì)齊方便比較。操作項(xiàng)一般放在尾列右對(duì)齊。
6、高效易讀-不做無(wú)意義留白
當(dāng)數(shù)據(jù)為零時(shí)就寫上“零”，當(dāng)沒(méi)有數(shù)據(jù)時(shí)候就寫上“-”。比如開發(fā)取不到的后臺(tái)數(shù)據(jù)，我們就可以給“-”作為顯示，如果得到的數(shù)據(jù)就是零，我們也要讓它顯示出來(lái)。
7、高效易讀-選擇合適的翻頁(yè)器
選擇合適的翻頁(yè)器，利用分頁(yè)可以緩解服務(wù)器的加載壓力。無(wú)限瀏覽如果數(shù)據(jù)過(guò)多很容易使頁(yè)面崩掉，使用功能較為強(qiáng)大的翻頁(yè)器，每一頁(yè)默認(rèn)10行以上，減少翻頁(yè)次數(shù)，增強(qiáng)用戶體驗(yàn)，給出默認(rèn)行數(shù)后，可以讓用戶自定義每頁(yè)行數(shù)，相比跨屏翻頁(yè)，向下滑動(dòng)更便利。
8、高效易讀-收起低頻操作項(xiàng)
超過(guò)四項(xiàng)操作項(xiàng)收起來(lái)，可以用圖標(biāo)指引下一步操作。關(guān)于哪些可以操作項(xiàng)可以折疊起來(lái)，可以與產(chǎn)品經(jīng)理溝通收起低頻鏈接，或者埋點(diǎn)一個(gè)月時(shí)間查看點(diǎn)擊量也可以做出決策。
9、高效易讀-默認(rèn)行數(shù)
當(dāng)單元格內(nèi)容長(zhǎng)度不固定的時(shí)候，定義好內(nèi)容的寬度和行數(shù)以及字?jǐn)?shù)，超出顯示的字?jǐn)?shù)可以用省略號(hào)代替。
10、高效易讀-行的排序
默認(rèn)最近創(chuàng)建的在表格中第一行顯示，使用戶感知最新情況。也可以帶排序的表頭，讓用戶自定義排序。
11、詳情查看-入口
入口可以在操作里加詳情，也可以把發(fā)起人做成可以點(diǎn)擊樣式，跳轉(zhuǎn)詳情，并且可以避免視覺(jué)干擾，也就是降噪，當(dāng)鼠標(biāo)Hover上去時(shí)候，發(fā)起人才顯示出跳轉(zhuǎn)色，提示可點(diǎn)擊狀態(tài)。
12、詳情查看-交互方式
第一種是用彈窗的形式。第二種是第一種的延伸，當(dāng)內(nèi)容過(guò)多時(shí)候可以考慮抽屜樣式。這些交互的共同有點(diǎn)就是沒(méi)有脫離原頁(yè)面。當(dāng)詳情內(nèi)容較多且需要編輯時(shí)候，我們就考慮跳新頁(yè)面，使用新頁(yè)面進(jìn)行承載。(這里有個(gè)細(xì)節(jié)，新開tab頁(yè)可以打開多個(gè)詳情頁(yè)，如果覆蓋原頁(yè)面則只能打開一個(gè)詳情頁(yè)，并且不能同時(shí)查看原頁(yè)面和詳情頁(yè)。所以我們要根據(jù)具體場(chǎng)景、業(yè)務(wù)需求去設(shè)計(jì))
二、數(shù)據(jù)過(guò)濾
數(shù)據(jù)過(guò)濾由搜索，篩選和標(biāo)簽頁(yè)構(gòu)成。
1、搜索
搜索可分為模糊搜索和帶標(biāo)簽的搜索。工作中常用的搜索為模糊搜索，優(yōu)點(diǎn)是只要有相關(guān)的內(nèi)容都會(huì)搜索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)。缺點(diǎn)是容易把不相關(guān)的信息也帶出來(lái)，例如搜索手機(jī)號(hào)，把相關(guān)編碼也匹配了出來(lái)。帶標(biāo)簽的搜索優(yōu)點(diǎn)是搜索匹配精準(zhǔn)度高。缺點(diǎn)是每次只能對(duì)單一條件進(jìn)行搜索，當(dāng)用戶要搜索的時(shí)候都要去切換選擇信息，多了一個(gè)步驟。另外，在實(shí)際工作中，可以通過(guò)埋點(diǎn)或者調(diào)研，如果搜索框搜索手機(jī)號(hào)頻率較大，我們可以把手機(jī)號(hào)設(shè)置為默認(rèn)選項(xiàng)。
2、篩選
篩選框可以分為下拉篩選和平鋪篩選。下拉篩選的優(yōu)點(diǎn)是空間利用率高，起到了很好的收納作用。缺點(diǎn)是無(wú)法直觀看到所有篩選項(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)概率相等，在空間允許情況下我們可以平鋪出來(lái)。
當(dāng)篩選項(xiàng)過(guò)多時(shí)，信息排序應(yīng)是用戶目標(biāo)優(yōu)于業(yè)務(wù)邏輯，即排序應(yīng)該考慮用戶的使用習(xí)慣。例如當(dāng)用戶查找訂單時(shí)候，第一反應(yīng)都是搜索框輸入，而一般通過(guò)價(jià)格過(guò)濾較少的應(yīng)該放在末尾。
當(dāng)然，我們還有更多優(yōu)化空間，當(dāng)篩選項(xiàng)過(guò)多時(shí)，我們可以默認(rèn)折疊低頻篩選項(xiàng)。折疊哪些篩選項(xiàng)還是得基于用戶習(xí)慣，可以通過(guò)數(shù)據(jù)埋點(diǎn)或者用戶調(diào)研得到用戶使用場(chǎng)景。
當(dāng)通過(guò)數(shù)據(jù)埋點(diǎn)或者用戶調(diào)研發(fā)現(xiàn)絕大多數(shù)用戶只需要用到搜索項(xiàng)，那么我們就可以只保留搜索框，其他選項(xiàng)全部折疊到高級(jí)搜索里面，當(dāng)點(diǎn)擊高級(jí)搜索時(shí)候出現(xiàn)一個(gè)彈窗，既可以保留更多篩選內(nèi)容，又可以使頁(yè)面不會(huì)看起來(lái)很擁擠。
(當(dāng)彈窗內(nèi)容選擇完畢時(shí)候，高級(jí)搜索按鈕會(huì)呈現(xiàn)高亮顏色，未選擇更多篩選內(nèi)容時(shí)候則呈現(xiàn)默認(rèn)態(tài)。）
3、標(biāo)簽頁(yè)
標(biāo)簽頁(yè)是比較常用的數(shù)據(jù)過(guò)濾方式，切換樣式包括基本樣式、卡片樣式以及膠囊樣式。一般和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)。
同樣我們可以通過(guò)數(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)品那里拿來(lái)一個(gè)原型圖堆疊很多操作項(xiàng)，我們就可以根據(jù)控制范圍來(lái)區(qū)分判斷，從而明確擺放位置。單行操作可以放到表格里，批量操作根據(jù)親密性原則放在左上方，這樣可以離打勾矩形近一些，如果有利于用戶操作，也可以放在左下方。全局操作則可以放單獨(dú)一行，使得層級(jí)更加清晰。
調(diào)整后，我們發(fā)覺(jué)雖然解決了多個(gè)操作放一塊的行為，但是層級(jí)還是不夠清晰，我們可以通過(guò)割裂板塊或者板塊顏色不同來(lái)調(diào)整，使得識(shí)別性更強(qiáng)。
后記
B端設(shè)計(jì)強(qiáng)調(diào)的是在好用的基礎(chǔ)上讓頁(yè)面變好看，所以更考慮用戶體驗(yàn)。所有設(shè)計(jì)方式不局限與一種，只要操作上是順手，業(yè)務(wù)上是合理的，都是優(yōu)秀的設(shè)計(jì)。如果一個(gè)頁(yè)面占據(jù)半屏都是篩選項(xiàng)，那么我們就得好好反思，因?yàn)樗泻Y選項(xiàng)不可能都是高頻操作，接下來(lái)就需要去做數(shù)據(jù)埋點(diǎn)并進(jìn)行頁(yè)面優(yōu)化了。另外，一張只有篩選項(xiàng)和表格的頁(yè)面，表格數(shù)據(jù)查看區(qū)域建議占整個(gè)頁(yè)面的百分之六十到百分之七十，這個(gè)時(shí)候?yàn)g覽起來(lái)是比較舒適的。
文章來(lái)源：UI中國(guó) 推薦：最多三分糖
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com