B端交互界面基礎(chǔ)組件——表格
編輯導(dǎo)語:在我們的日常工作中經(jīng)常會用到表格,表格的功能可以讓我們很清晰快捷的了解當(dāng)前情況,設(shè)計一個好的表格也能大大的提升我們的工作效率;本文作者分享了關(guān)于B端交互界面基礎(chǔ)組件表格的設(shè)計,我們一起來看一下。
我們常說一個表格基本的功能是包含增刪改查的,為了完整的表達(dá)這一功能,常見的就是用表格組件,表格被公認(rèn)為是展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式;常和按鈕、搜索、篩選、分頁等其他界面元素一起協(xié)同,構(gòu)成表格頁。
它具備結(jié)構(gòu)簡單、分隔和歸納明確等特點(diǎn),幫助對比分析,大大提升了用戶對信息的接收效率和理解程度;回歸到線下場景更像家里的柜子,我們使用抽屜可以用來收納整理,極大提升用戶信息收納的效率、空間利用率,查找規(guī)律,打造了一個信息密度極高的歸納頁。
下面我將表格拆分成多個細(xì)節(jié),并詳細(xì)講解各部分如何來設(shè)計,并結(jié)合業(yè)務(wù)場景深挖如何正確的使用表格:
一、數(shù)據(jù)查看
1. 表格構(gòu)成與布局
- 內(nèi)部:由表頭、行、列、單元格共4部分組成;
- 外部:由篩選區(qū)域、操作按鈕區(qū)、分頁區(qū)共3 大類組成。
2. 檢驗表格設(shè)計好壞
在我們對表格的設(shè)計思考過程中,需要注意兩項原則:可讀(可視化)與易用
好的數(shù)據(jù)表格是全面整合并呈現(xiàn)業(yè)務(wù)數(shù)據(jù),提供順暢閱讀體驗,便于用戶發(fā)掘重要信息,進(jìn)行便捷操作,主要是從信息降噪、呼吸適中、高效易讀以及詳情查看四個方面去檢驗表格的好壞。
這里我們從四個方面來驗證表格的好壞:信息降噪、呼吸適中、高效易讀、查看詳情
1)信息降噪
信息降噪:內(nèi)容
表頭:表頭標(biāo)簽應(yīng)該簡煉準(zhǔn)確,以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數(shù)據(jù)本身;當(dāng)然對于產(chǎn)品而言,先能把事情說清楚,再考慮文字的簡潔性。
這需要我們做到:
表頭內(nèi)容上面做到精簡,列數(shù)控制在7+-2,列舉出用戶更為關(guān)注的數(shù)據(jù),更多的信息我們可以在詳情中展示。
自定義列:如果不同用戶看到的信息側(cè)重不同,我們還可以通過增加設(shè)置類型的按鈕,讓用戶進(jìn)行自定義列的展示。
信息降噪:視覺
幾種常見的風(fēng)格樣式:
- a.帶豎向分割線:表格有均勻而明顯的分割線,邊框單元格比較明顯。
- b.帶斑馬紋:隔行交替使用不同底色來區(qū)分?jǐn)?shù)據(jù)。
- c.極簡樣式:僅顯示水平線可減少整個網(wǎng)格的視覺噪音。
關(guān)于樣式的選取技巧:
當(dāng)前樣式一和樣式二比較傳統(tǒng)老套,比較推薦極簡,去掉不必要的視覺干擾,針對想要突出某一行,可以鼠標(biāo)hover給一個斑馬紋,這樣可以方便看某一行數(shù)據(jù),讓數(shù)據(jù)更加聚焦,如果在你數(shù)據(jù)特巨長無比的情況下,斑馬紋還是比較重要的。
去掉不必要的裝飾:能用線性標(biāo)簽就不要使用面性標(biāo)簽,盡量做到輕盈不要太重。
不要出現(xiàn)襯線體等字體的干擾。
2)呼吸適中
關(guān)于單元格行高制定:
合適的填充和邊距對于視覺設(shè)計至關(guān)重要,既包括保證數(shù)據(jù)單元格之間的留白,又包括單元格內(nèi)部留白,以保證易讀性,當(dāng)創(chuàng)建表格設(shè)計規(guī)范并嚴(yán)格遵循后,就可以創(chuàng)建視覺一致的表。
開始之前首先明確一下開發(fā)是怎么實現(xiàn)行高的,從下圖可以看出,開發(fā)在實現(xiàn)設(shè)計稿時,通常是按照行高來寫的:
單元格高度=文字行高+上間距+下間距
一般我們制定的單元格規(guī)范為:
文字字號:n
文字行高:1.5n
上、下間距:1.2n
以此來保證各場景下獲取信息的效率與易讀性。
關(guān)于列與列之間的制定:
表格本身應(yīng)具有最小寬度,在不同畫面中寬度應(yīng)可以增長到整個空間,所以每個列也需具備最小寬度。如果頁面寬度小于表格,那么表格應(yīng)水平可拖拽,當(dāng)表格寬度大于頁面寬度時候,固定首尾列,左右滑動。
隨著頁面搜索和拉伸變n2,n1保持不變,并且在拉長或變短,表格的呼吸感、節(jié)奏感不受影響 ,N2會隨著表格的變化自適應(yīng)產(chǎn)生變動。
回歸到開發(fā)場景中,n2 對應(yīng)盒子模型中的margin-right,字體的行高相當(dāng)于padding
3)高效易讀
列的對齊方式:
單元格合適的位置排列能夠提升表格的效率和準(zhǔn)確度。對齊能夠很好的形成視覺引導(dǎo)線,會讓表格更加規(guī)范易理解,將元素進(jìn)行對齊;既符合用戶的認(rèn)知特性,也能引導(dǎo)視覺流向,讓用戶更流暢地接收信息。
標(biāo)題和內(nèi)容:一般采用左對齊,更高效的閱讀瀏覽順序。
表格:諸如金額、數(shù)量等數(shù)值排列時,通常采用“右對齊”方式,既方便用戶快捷讀取數(shù)據(jù),還可以使用戶進(jìn)行縱向數(shù)據(jù)對比。
操作項:一般放置在尾列,左對齊,保證表格為規(guī)整的盒子模型。
空白格:
單元格中不要做無意義的留白,以上傳貨物為例,未上傳為-,缺貨的顯示為0。
分頁器:
選擇合適的翻頁器,利用分頁可以緩解服務(wù)器的加載壓力,通常情況下,分頁器緊跟在表格正文之后,主要展示正文中的數(shù)據(jù)量以及單頁數(shù)據(jù)條目信息;同時,兼具一些導(dǎo)航的功能,指示當(dāng)前所在頁面以及跳轉(zhuǎn)到指定頁面。
- 每一頁的默認(rèn)行數(shù):10行以上,減少翻頁的次數(shù);
- 給出默認(rèn)行的數(shù)量后,也可以讓用戶自定義每頁行的數(shù)量,相比跨屏更加方便。
操作項:
為保證用戶閱讀高效性,我們可以收起低頻操作箱,這里注意:除了產(chǎn)品經(jīng)理和客戶,我們可以通過之前的埋點(diǎn)pv、uv來區(qū)分高頻和低頻的操作項。
行的排序:
- 默認(rèn)最近創(chuàng)建的放在最上面,這點(diǎn)是由于操作完立馬有反饋,針對最近一條使用頻率比較高;
- 可以用帶排序的表頭,讓用戶自定義排序;
4)詳情查看
精簡表格之后如何查看隱藏起來的次要信息呢?
詳情入口:可以在操作里加“詳情”。
也可以把名稱做成可點(diǎn)擊樣式,跳轉(zhuǎn)詳情:
5)交互方式
展開行:
展開行(Expandable rows)允許用戶無需打開新頁面即可查看附加信息,防止用戶迷失;展開可以是一個二級表格,重新定義表頭和內(nèi)容,也可以是一個列表展示。
彈窗:
包括模態(tài)彈窗和非模態(tài)彈窗,模態(tài)彈窗可以打開任一個條目進(jìn)行詳細(xì)查看,非模態(tài)彈窗可以同時打開多個,并允許拖動彈窗位置進(jìn)行信息對比。
抽屜:
表格內(nèi)部側(cè)邊展開,相比彈窗減少了頁面層級和隔離感,承載內(nèi)容變大。
頁面切換:
適合詳情比較多,且需要編輯的情況,相當(dāng)于新開一個tab欄。
二、數(shù)據(jù)過濾
搜索、篩選和標(biāo)簽頁是用戶獲取精準(zhǔn)目標(biāo)的辦法,這是一項基本功能,可讓用戶從默認(rèn)的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容,在數(shù)據(jù)量較大的表中特別有用,一般位于表上方的操作區(qū)域或表頭區(qū)域。
1. 搜索
一般的搜索功能分為模糊搜索和帶標(biāo)簽的精準(zhǔn)搜索,輸入搜索框輸入用戶關(guān)心的內(nèi)容,既可以實時篩選,也可以點(diǎn)擊觸發(fā)。
1)模糊搜索
- 優(yōu)點(diǎn):只要有相關(guān)的內(nèi)容都會搜索出來,減少了精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)。
- 缺點(diǎn):容易把不想管的信息也帶出來。例如搜索手機(jī)號,把相關(guān)編碼也匹配了出來。
2)帶標(biāo)簽的搜索
- 優(yōu)點(diǎn):搜索匹配精準(zhǔn)度高。
- 缺點(diǎn):每次只能對單一條件進(jìn)行搜索。
2. 篩選
一般搜索和篩選會同時出現(xiàn),但是兩者一般很少同時使用來對數(shù)據(jù)進(jìn)行定位,在一般情況下,搜索更多的是對單一或者包含某個字段的的數(shù)據(jù)來進(jìn)行定位;篩選則是用來查詢一類數(shù)據(jù),下面我們將分為兩種篩選進(jìn)行分析:下拉篩選、平鋪篩選。
1)下拉篩選
- 優(yōu)點(diǎn):空間利用率高、起到了很好的收納作用。
- 缺點(diǎn):無法直觀看到所有篩選項。
2)平鋪篩選
- 優(yōu)點(diǎn):操作效率高,篩選項一目了然,支持輸入更多篩選條件。
- 缺點(diǎn):空間利用率低,不適合選項太多的情況。
這里我們需要注意,當(dāng)篩選項過多時,我們應(yīng)當(dāng)按照操作頻次來排列篩選項,因為用戶的目標(biāo)均是優(yōu)先于業(yè)務(wù)邏輯;當(dāng)所有的篩選項都是屬于低頻操作時,可以把所有的篩選項放置在高級篩選,作為高級操作,用彈窗來承載。
3. 標(biāo)簽
標(biāo)簽頁的篩選一般和時間、狀態(tài)流轉(zhuǎn)相關(guān),通常按照用戶最關(guān)注的目標(biāo)設(shè)置為默認(rèn)的選項。
三、數(shù)據(jù)操作
操作項一般存在于條目最后,以及表頭位置,分別對應(yīng)單條操作、批量和全局操作的場景。
數(shù)據(jù)操作的分類:
- 控制范圍:單行操作、批量操作、全局操作;
- 操作屬性:新增數(shù)據(jù)、編輯數(shù)據(jù)、刪除數(shù)據(jù)、業(yè)務(wù)處理。
1)判斷控制范圍
2)再判斷放置位置
3)最后優(yōu)化信息層級
四、總結(jié)
以上便是我個人對于web典型表格設(shè)計的拆解,雖然是簡單的數(shù)據(jù)表格,其實是web端非常重要的部分,通過合理的拆解分析和布局,使得原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力。
但是組件是死的,人是活的,希望大家今后遇到具體的業(yè)務(wù)場景,還是需要具體分析,真實地圍繞用戶的實際使用場景,為用戶提供高效的篩選工具,促進(jìn)信息的理解,降低用戶的使用成本,這才是本質(zhì)內(nèi)容。
參考資料:
Ant Design:https://ant.design/index-cn
本文由@斯兒們 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
圖表組件庫或者常用的組件庫可以分享下不?
很棒!
感謝分享
不錯不錯不錯
文章不多,都是精品【表情】
我拿這篇文章培訓(xùn)下面的產(chǎn)品經(jīng)理了,期待更多文章!