B端表格的基礎數據展示樣式和常見的交互方式
選題來源
選題的來源于一個設計朋友/同行面試時候的問題，我們當時也是去找資料和視頻會議踐行討論進行了補充，整理完了之后就重新發了文章。接下里的選題集中在面試難點上，有同行有遇到難回答的專業或者團隊協同面試題的話，隨時可以聯系我。在此謝過。
表格前言
在針對企業中后臺產品中，通常要使用大量的表格來展現結構化的數據,也包含了大量查詢數據的場景。合理的數據表現方式和常見的交互設計能夠讓用戶帶來高效的信息獲取效率。針對數據展現表示和交互形式，很多事時候是很難進行設計的，接下來結合自身工作中表格的來進行討論，希望能幫助到大家理清楚基礎數據展示類型和常見交互的選擇方式。
基礎數據展示樣式
基礎數展示拆分為表格與表頭，有共用的部分也有自己相對特有的部分。
表頭
僅圖標
僅只有圖標的場景常見于表頭和表格的左側，主要的操作是針對的是批量操作，例如刪除/導出等等（具體的要根據業務場景判斷）。
右側圖標
一般是用于配合下拉進行類型的篩選以及數據進行數據的篩選，一般組合是左邊是文案配合，右邊是相應的功能。
雙圖標
雙圖標是一般用于當文案修改到一定程度上時候也很難表達的時候，用輔助圖標進行解釋輔助說明，方便理解用戶。
純文案
純文案是最常見的場景，包含了用戶的姓名和所有的字段都可以進行填入。
表格
頭像產品加文案
一般使用的場景是用人物或者是在電商或者是商品中，應對左側表頭的用戶名稱和產品名稱，方便給用戶進行理解。
顯示產品有關的的狀態（開關/可視化/標簽）
常用場景是顯示產品的狀態，是否打開或者是在某個流程的狀態，通常是已結束/正在開始/未開始。
純數字
主要是針對于數量選項進行數字化進行展示，展現選項的數量。
多圖標
一般適用于末尾多操作場景下要展示多功操作展示。
常見交互形式
篩選
搜索
常見的搜索形式分為4種：單屬性搜索，切屬性搜索，多屬性搜索以及模糊搜索
單屬性搜索
常見的場景是快速定位到某個目標數據上，能夠讓讓用戶快速的進行決策。
切換型屬性
場景：通常是多個屬性/類型之間的，對于搜索的精準程度比較高。
多屬性組合搜索
使用場景：常用于多個搜索屬性，對頁面空間要求比較高，但是需要進行性多屬性組合搜索就能得到精準的搜索結果。
多屬性模糊搜索
使用場景：多個常用的搜索屬性，搜索的便捷性高于精準高度時候，使用模糊搜索。
條件篩選
條件篩選也被稱為為過濾器，產用于內容提取，幫助用戶快速輸入。
下拉選擇
常見的一種控件，主要是彈出一個下拉菜單給用戶進行選擇操作，選項遵照7+-2原則。當選項低于5個時候建議方案是平鋪
單選框
使用場景：常用于多選項中選中單個選項的場景，每個選項都是互斥的。數量上最低是2個，一般是在4個到5個。一般情況下，默認的選項是選擇第一個選項。
復選框
使用場景：常用與一個或者多個選項中進行單選和多選。選項一般是不會太多，一般是遵守7+-2原則，常見的4個到5個選項一般是不宜多的。如果遇到更多選項的話，建議采用下拉交互。
日期選擇
使用場景：用戶選擇一個或者是某個時間段的組件。根據業務屬性，顆粒度大的只有年/月，顆粒度小的真是能夠到秒。不同的業務，還可以增加不同的功能。
標簽切換
使用場景：平級區域或者是功能的內容進行收納和展現，來保證頁面的容納能力。
數據編輯
根據操作對象不同可以分為2類：批量才做和數據編輯
批量操作
針對多行已經選擇的數據的編輯操作，常見的：導出，刪除等等
單行數據編輯
單行數據編輯從位置來進行區分：內聯操作，單行操作
內聯操作
交互可以是原位編輯，也可以是單擊之后的彈窗修改
單行操作
常見的場景是表格最右側的操作欄中常見的刪除/編輯等等
喚醒
所謂的喚醒就是表格數據詳情展現方式，大致可以分為：彈窗，抽屜，嵌套以及新建頁面。
彈窗
模態彈窗可以簡單理解帶有遮罩的，具有強的打斷性，用戶在這種場景下無法操作主頁面。而非模態彈窗，喚醒時刻用戶也可以操作主頁面
模態彈窗
常見的使用場景是數據詳情字段不多，不用要承受過多的字段，可以快速回到主頁面
非模態彈窗
再不離開主路徑的場景下，可以打開多個浮層，同時也可以操作主頁面。
抽屜
抽屜是一種從頁面上下左右都可以彈出來的交互方式，需要一個主頁面來來控制一個子頁面，常規的話是右邊偏多。常見的場景是能夠承受更多的內容，能夠快速切換主體和比較內容。
嵌套
點擊標題數據，表格下拉，直接表現相關數據的詳情。一般用于內容比較少，針對數據進行的補充。
新建頁面
當表格詳情過于復雜的場景下，新建頁面可以承載過于復雜的內容和操作。
滑動
表格內的極限列是9列，如果業務場景下必須承擔更多的內容化的話可以進行滑動處理
這里會延伸出一個固定的交互。
總結
以上就是針對一個面試中關于基礎數據表現方式的回答思路，這些要往往和產品和業務場景相結合，希望能夠對大家有幫助。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）