2025-4-10 杰睿
毫無(wú)疑問(wèn)，表格之于B端產(chǎn)品而言是及其重要的一部分，那么，如何系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)呢？本文作者從表格設(shè)計(jì)規(guī)范與交互邏輯兩個(gè)角度提出了15點(diǎn)建議，干貨滿(mǎn)滿(mǎn)，希望對(duì)你有幫助。
表格作為B端產(chǎn)品中重要的界面組成部分，承載著內(nèi)容展示、數(shù)據(jù)記錄等多重任務(wù)。每家產(chǎn)品的表格看起來(lái)構(gòu)成差不多，但在交互細(xì)節(jié)上仍然有很多好的地方值得我們仔細(xì)思考。
本次通過(guò)整理10條B端表格設(shè)計(jì)規(guī)范+5條B端表格交互邏輯，系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)～
表格內(nèi)的信息通過(guò)對(duì)齊，會(huì)更加規(guī)范易理解，給用戶(hù)視覺(jué)上的統(tǒng)一感，且視線流動(dòng)順暢，能夠讓人快速捕捉到所要的內(nèi)容。
默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展示出來(lái)。
有操作時(shí)需固定，操作項(xiàng)不固定時(shí)無(wú)法快速定位會(huì)降低操作效率；重要信息固定，有利于快速獲取重要的內(nèi)容。
寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。（如果由于屏幕小表格會(huì)出現(xiàn)省略，就要考慮多一個(gè)瀏覽器自帶的title提示。）
注：當(dāng)?shù)谝涣惺切蛱?hào)或多選項(xiàng)時(shí)，列寬不需要太寬，這樣視覺(jué)不會(huì)顯得空洞。
字符不要多，如果文字太多，就需要做文字信息精簡(jiǎn)化。同樣，對(duì)于專(zhuān)業(yè)術(shù)語(yǔ)或用戶(hù)不常見(jiàn)的名詞應(yīng)給予一定的幫助說(shuō)明。
表格內(nèi)容較多且有長(zhǎng)文本時(shí)，長(zhǎng)文本縮略展示；表格內(nèi)容較少時(shí)有長(zhǎng)文本，長(zhǎng)文本換行展示。
表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無(wú)數(shù)據(jù)的情況，留白處理會(huì)給用戶(hù)造成一定的困惑和誤解，是系統(tǒng)沒(méi)有加載出來(lái)嗎？明智的做法，使用「-」填充顯示。圖片為空時(shí)使用圖片占位符。
同一項(xiàng)目中的操作列命名應(yīng)該保持統(tǒng)一，例如：常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。
操作項(xiàng)超過(guò)三個(gè)時(shí)，將操作低頻折疊收起，可以幫助頁(yè)面突出更加重要的信息，減輕空間壓力，減少干擾。
給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢(shì)，國(guó)內(nèi)數(shù)據(jù)升圖標(biāo)默認(rèn)為紅色，降的為綠色。
全局操作為無(wú)需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見(jiàn)的有新增、導(dǎo)入、篩選。
批量操作就是對(duì)表格的多行數(shù)據(jù)同時(shí)操作，常見(jiàn)的有導(dǎo)出、刪除。
全局和批量都不屬于單個(gè)對(duì)象因此需要放在表格外，操作具體的位置排放根據(jù)操作的重要程度一次從左到右遞減。
條紋顏色：標(biāo)題背景色透明度60%左右；（條紋顏色視覺(jué)上應(yīng)該比標(biāo)題欄弱一點(diǎn)）鼠標(biāo)hover顏色：主題色透明度10%。
當(dāng)閱讀豐富且繁多的表格時(shí)，由于屏幕有限，用戶(hù)不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。
固定表頭，能夠讓用戶(hù)明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。
可以讓無(wú)序信息內(nèi)容進(jìn)行有序排列，排序分為升序和降序，一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。
允許調(diào)整列的寬度來(lái)查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù)，默認(rèn)支持鼠標(biāo)懸停時(shí)瀏覽器自帶title顯示完整數(shù)據(jù)。
呈現(xiàn)大型數(shù)據(jù)集時(shí)，水平滾動(dòng)是不可避免的，通過(guò)橫向滾動(dòng)查看其它數(shù)據(jù)。將首列進(jìn)行固定（若包含勾選操作，則一起固定），以便用戶(hù)將數(shù)據(jù)與對(duì)象進(jìn)行對(duì)應(yīng)。
若表格是分頁(yè)處理的，分頁(yè)會(huì)放在上部、下部或上下部均有，分頁(yè)固定省去了用戶(hù)需要翻到頂部或底部進(jìn)行操作的麻煩。
作者：譚檀檀
本文由 @Clippp 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Pixabay，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(m.skdbbs.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.skdbbs.com