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