B端交互界面基礎組件——表格

3 評論 7326 瀏覽 78 收藏 17 分鐘

編輯導語:在我們的日常工作中經常會用到表格,表格的功能可以讓我們很清晰快捷的了解當前情況,設計一個好的表格也能大大的提升我們的工作效率;本文作者分享了關于B端交互界面基礎組件表格的設計,我們一起來看一下。

我們常說一個表格基本的功能是包含增刪改查的,為了完整的表達這一功能,常見的就是用表格組件,表格被公認為是展現結構化數據最為清晰、高效的形式;常和按鈕、搜索、篩選、分頁等其他界面元素一起協同,構成表格頁。

它具備結構簡單、分隔和歸納明確等特點,幫助對比分析,大大提升了用戶對信息的接收效率和理解程度;回歸到線下場景更像家里的柜子,我們使用抽屜可以用來收納整理,極大提升用戶信息收納的效率、空間利用率,查找規律,打造了一個信息密度極高的歸納頁。

下面我將表格拆分成多個細節,并詳細講解各部分如何來設計,并結合業務場景深挖如何正確的使用表格:

B端交互界面基礎組件-表格

一、數據查看

1. 表格構成與布局

  • 內部:由表頭、行、列、單元格共4部分組成;
  • 外部:由篩選區域、操作按鈕區、分頁區共3 大類組成。

B端交互界面基礎組件-表格

2. 檢驗表格設計好壞

B端交互界面基礎組件-表格

在我們對表格的設計思考過程中,需要注意兩項原則:可讀(可視化)與易用

好的數據表格是全面整合并呈現業務數據,提供順暢閱讀體驗,便于用戶發掘重要信息,進行便捷操作,主要是從信息降噪、呼吸適中、高效易讀以及詳情查看四個方面去檢驗表格的好壞。

這里我們從四個方面來驗證表格的好壞:信息降噪、呼吸適中、高效易讀、查看詳情

1)信息降噪

信息降噪:內容

表頭:表頭標簽應該簡煉準確,以達到節省表頭空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數據本身;當然對于產品而言,先能把事情說清楚,再考慮文字的簡潔性。

這需要我們做到:

表頭內容上面做到精簡,列數控制在7+-2,列舉出用戶更為關注的數據,更多的信息我們可以在詳情中展示。

B端交互界面基礎組件-表格

自定義列:如果不同用戶看到的信息側重不同,我們還可以通過增加設置類型的按鈕,讓用戶進行自定義列的展示。

B端交互界面基礎組件-表格

信息降噪:視覺

幾種常見的風格樣式:

  • a.帶豎向分割線:表格有均勻而明顯的分割線,邊框單元格比較明顯。
  • b.帶斑馬紋:隔行交替使用不同底色來區分數據。
  • c.極簡樣式:僅顯示水平線可減少整個網格的視覺噪音。

B端交互界面基礎組件-表格

關于樣式的選取技巧:

當前樣式一和樣式二比較傳統老套,比較推薦極簡,去掉不必要的視覺干擾,針對想要突出某一行,可以鼠標hover給一個斑馬紋,這樣可以方便看某一行數據,讓數據更加聚焦,如果在你數據特巨長無比的情況下,斑馬紋還是比較重要的。

去掉不必要的裝飾:能用線性標簽就不要使用面性標簽,盡量做到輕盈不要太重。

B端交互界面基礎組件-表格

不要出現襯線體等字體的干擾。

B端交互界面基礎組件-表格

2)呼吸適中

關于單元格行高制定:

合適的填充和邊距對于視覺設計至關重要,既包括保證數據單元格之間的留白,又包括單元格內部留白,以保證易讀性,當創建表格設計規范并嚴格遵循后,就可以創建視覺一致的表。

開始之前首先明確一下開發是怎么實現行高的,從下圖可以看出,開發在實現設計稿時,通常是按照行高來寫的:

單元格高度=文字行高+上間距+下間距

B端交互界面基礎組件-表格

一般我們制定的單元格規范為:

文字字號:n

文字行高:1.5n

上、下間距:1.2n

以此來保證各場景下獲取信息的效率與易讀性。

關于列與列之間的制定:

表格本身應具有最小寬度,在不同畫面中寬度應可以增長到整個空間,所以每個列也需具備最小寬度。如果頁面寬度小于表格,那么表格應水平可拖拽,當表格寬度大于頁面寬度時候,固定首尾列,左右滑動。

B端交互界面基礎組件-表格

隨著頁面搜索和拉伸變n2,n1保持不變,并且在拉長或變短,表格的呼吸感、節奏感不受影響 ,N2會隨著表格的變化自適應產生變動。

回歸到開發場景中,n2 對應盒子模型中的margin-right,字體的行高相當于padding

3)高效易讀

列的對齊方式:

單元格合適的位置排列能夠提升表格的效率和準確度。對齊能夠很好的形成視覺引導線,會讓表格更加規范易理解,將元素進行對齊;既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。

標題和內容:一般采用左對齊,更高效的閱讀瀏覽順序。

表格:諸如金額、數量等數值排列時,通常采用“右對齊”方式,既方便用戶快捷讀取數據,還可以使用戶進行縱向數據對比。

操作項:一般放置在尾列,左對齊,保證表格為規整的盒子模型。

B端交互界面基礎組件-表格

空白格:

單元格中不要做無意義的留白,以上傳貨物為例,未上傳為-,缺貨的顯示為0。

B端交互界面基礎組件-表格

分頁器:

選擇合適的翻頁器,利用分頁可以緩解服務器的加載壓力,通常情況下,分頁器緊跟在表格正文之后,主要展示正文中的數據量以及單頁數據條目信息;同時,兼具一些導航的功能,指示當前所在頁面以及跳轉到指定頁面。

  • 每一頁的默認行數:10行以上,減少翻頁的次數;
  • 給出默認行的數量后,也可以讓用戶自定義每頁行的數量,相比跨屏更加方便。

B端交互界面基礎組件-表格

操作項:

為保證用戶閱讀高效性,我們可以收起低頻操作箱,這里注意:除了產品經理和客戶,我們可以通過之前的埋點pv、uv來區分高頻和低頻的操作項。

B端交互界面基礎組件-表格

行的排序:

  • 默認最近創建的放在最上面,這點是由于操作完立馬有反饋,針對最近一條使用頻率比較高;
  • 可以用帶排序的表頭,讓用戶自定義排序;

B端交互界面基礎組件-表格

4)詳情查看

精簡表格之后如何查看隱藏起來的次要信息呢?

詳情入口:可以在操作里加“詳情”。

B端交互界面基礎組件-表格

也可以把名稱做成可點擊樣式,跳轉詳情:

B端交互界面基礎組件-表格

5)交互方式

展開行:

展開行(Expandable rows)允許用戶無需打開新頁面即可查看附加信息,防止用戶迷失;展開可以是一個二級表格,重新定義表頭和內容,也可以是一個列表展示。

B端交互界面基礎組件-表格

彈窗:

包括模態彈窗和非模態彈窗,模態彈窗可以打開任一個條目進行詳細查看,非模態彈窗可以同時打開多個,并允許拖動彈窗位置進行信息對比。

B端交互界面基礎組件-表格

抽屜:

表格內部側邊展開,相比彈窗減少了頁面層級和隔離感,承載內容變大。

B端交互界面基礎組件-表格

頁面切換:

適合詳情比較多,且需要編輯的情況,相當于新開一個tab欄。

B端交互界面基礎組件-表格

二、數據過濾

搜索、篩選和標簽頁是用戶獲取精準目標的辦法,這是一項基本功能,可讓用戶從默認的表格數據輕松獲取要查找的內容,在數據量較大的表中特別有用,一般位于表上方的操作區域或表頭區域。

1. 搜索

一般的搜索功能分為模糊搜索和帶標簽的精準搜索,輸入搜索框輸入用戶關心的內容,既可以實時篩選,也可以點擊觸發。

B端交互界面基礎組件-表格

1)模糊搜索

  • 優點:只要有相關的內容都會搜索出來,減少了精準搜索帶來的記憶負擔。
  • 缺點:容易把不想管的信息也帶出來。例如搜索手機號,把相關編碼也匹配了出來。

2)帶標簽的搜索

  • 優點:搜索匹配精準度高。
  • 缺點:每次只能對單一條件進行搜索。

2. 篩選

一般搜索和篩選會同時出現,但是兩者一般很少同時使用來對數據進行定位,在一般情況下,搜索更多的是對單一或者包含某個字段的的數據來進行定位;篩選則是用來查詢一類數據,下面我們將分為兩種篩選進行分析:下拉篩選、平鋪篩選。

B端交互界面基礎組件-表格

1)下拉篩選

  • 優點:空間利用率高、起到了很好的收納作用。
  • 缺點:無法直觀看到所有篩選項。

2)平鋪篩選

  • 優點:操作效率高,篩選項一目了然,支持輸入更多篩選條件。
  • 缺點:空間利用率低,不適合選項太多的情況。

這里我們需要注意,當篩選項過多時,我們應當按照操作頻次來排列篩選項,因為用戶的目標均是優先于業務邏輯;當所有的篩選項都是屬于低頻操作時,可以把所有的篩選項放置在高級篩選,作為高級操作,用彈窗來承載。

B端交互界面基礎組件-表格

3. 標簽

標簽頁的篩選一般和時間、狀態流轉相關,通常按照用戶最關注的目標設置為默認的選項。

B端交互界面基礎組件-表格

三、數據操作

操作項一般存在于條目最后,以及表頭位置,分別對應單條操作、批量和全局操作的場景。

數據操作的分類:

  • 控制范圍:單行操作、批量操作、全局操作;
  • 操作屬性:新增數據、編輯數據、刪除數據、業務處理。

1)判斷控制范圍

B端交互界面基礎組件-表格

2)再判斷放置位置

B端交互界面基礎組件-表格

3)最后優化信息層級

B端交互界面基礎組件-表格

四、總結

以上便是我個人對于web典型表格設計的拆解,雖然是簡單的數據表格,其實是web端非常重要的部分,通過合理的拆解分析和布局,使得原本枯燥的數據呈現出生命力。

但是組件是死的,人是活的,希望大家今后遇到具體的業務場景,還是需要具體分析,真實地圍繞用戶的實際使用場景,為用戶提供高效的篩選工具,促進信息的理解,降低用戶的使用成本,這才是本質內容。

參考資料:

B端表格設計實戰指南

Ant Design:https://ant.design/index-cn

web表格設計攻略

web端表格設計,怎么做?

 

本文由@斯兒們 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享

    回復
  2. 不錯不錯不錯

    回復
  3. 文章不多,都是精品【表情】
    我拿這篇文章培訓下面的產品經理了,期待更多文章!

    回復