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