中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：表格是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一，它也是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同。本文作者總結(jié)了一套B端表格設(shè)計(jì)指南，一起來看看吧。

大家好，我是小鹿，今天為大家分享的是「表格設(shè)計(jì)指南下篇」

在之前的文章中小編已經(jīng)分享過上篇，里面介紹了表格的概念和數(shù)據(jù)查看的知識(shí)點(diǎn)，沒有看過的小伙伴可以快速回看????《B端表格設(shè)計(jì)指南（上篇）》

本篇文章就來聊聊數(shù)據(jù)篩選和數(shù)據(jù)操作。

一、數(shù)據(jù)篩選-查

數(shù)據(jù)篩選區(qū)可以看作表格的導(dǎo)航，按預(yù)定目標(biāo)過濾出某種具有特定性質(zhì)的數(shù)據(jù)，將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于快速查看、對比、分析信息的操作過程。

從用戶角度出發(fā)，按不同粒度的數(shù)據(jù)檢索方式分為3種方式，分別對應(yīng)不同程度的用戶。

• 搜索：當(dāng)用戶有相對明確的選擇目標(biāo)時(shí)，需定點(diǎn)查看，數(shù)據(jù)多且雜亂無規(guī)律；
• 篩選：用戶目標(biāo)相對比較模糊，游離于一個(gè)大概的范圍時(shí)，通常用于一些有清晰分類的數(shù)據(jù)；
• 標(biāo)簽：查看無交集的數(shù)據(jù)內(nèi)容，通常伴隨時(shí)間、狀態(tài)的流轉(zhuǎn)。

1. 搜索

搜索可以幫助用戶在巨大的信息池中縮小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。由于考慮到用戶需要手動(dòng)輸入，很難保證精準(zhǔn)搜索，原則上所有搜索均為模糊搜索，必要精準(zhǔn)搜索的地方使用篩選功能，給用戶提供篩選選項(xiàng)。通常上端搜索欄不被限定搜索范圍，可以全部搜索。

1.1 模糊搜索

優(yōu)點(diǎn)：減少精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)

缺點(diǎn)：容易把不相關(guān)的信息帶出來，如搜索手機(jī)號131，把ID含131數(shù)字的信息也帶出來了

1.2 帶標(biāo)簽的搜索

優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高

缺點(diǎn)：不方便，每次只能對單一條件進(jìn)行搜索

2. 篩選

篩選可以幫助用戶縮小數(shù)據(jù)范圍，逐步找到想要的內(nèi)容。或者當(dāng)用戶的目標(biāo)就是查看某一范圍的數(shù)據(jù)時(shí)，篩選將是一種十分快捷的方式。

2.1 下拉篩選

優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用

缺點(diǎn)：無法直觀看到所有篩選項(xiàng)

2.2 平鋪篩選

優(yōu)點(diǎn)：操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件

缺點(diǎn)：空間利用率低，不適合選項(xiàng)太多的情況

2.3 表頭篩選

優(yōu)點(diǎn)：篩選當(dāng)前列，更直觀，一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高

缺點(diǎn)：篩選的內(nèi)容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學(xué)習(xí)

2.4 tab標(biāo)簽

使用場景：標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容（可以是同性質(zhì)，也可以是不同性質(zhì)）。主要樣式有基礎(chǔ)、卡片、膠囊等。

優(yōu)點(diǎn)：根據(jù)標(biāo)簽，可以很清楚知道劃分，切換tab就可以篩選內(nèi)容。

缺點(diǎn)：分類需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒有交集，分類不能過多，超過7±2個(gè)選項(xiàng)可選擇下拉篩選。

提升用戶體驗(yàn)的一個(gè)小細(xì)節(jié)：默認(rèn)用戶最關(guān)注的選項(xiàng)，而非全部，這樣可以縮短查詢路徑，同時(shí)給出條目，讓用戶清晰明了每個(gè)選項(xiàng)的數(shù)量，便于操作。

3. 組合篩選

在企業(yè)級中后臺(tái)中，用戶查看的數(shù)據(jù)往往屬性較多且不唯一，通過簡單的檢索方式很難精確定位到目標(biāo)數(shù)據(jù)，所以，在實(shí)際使用時(shí)，常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、標(biāo)簽切換組合出現(xiàn)，形成多屬性組合檢索。

而篩選項(xiàng)互相組合，其展示方式分為平鋪和折疊兩種。

3.1 平鋪顯示

選用對用戶決策有意義、操作頻次高的屬性作為直接展示的組合檢索條件，建議數(shù)量最好不超過5個(gè)（7±2法則）。

優(yōu)點(diǎn)：大而全能最大限度避免檢索條件疏漏的可用性問題

缺點(diǎn)：易用性不高。大而全可能為用戶帶來繁雜的第一印象，都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時(shí)間。

3.2 折疊展示

如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，

可通過折疊的方式將這部分檢索條件隱藏起來，將高頻率使用的、數(shù)據(jù)覆蓋面廣的1-3個(gè)屬性直接展示出來。

總結(jié)思考

在設(shè)置組合檢索項(xiàng)時(shí)，應(yīng)考慮每一項(xiàng)檢索甚至是多屬性組合檢索是否有必要。需從實(shí)際場景出發(fā)，根據(jù)用戶對各個(gè)檢索項(xiàng)的使用頻率及組合檢索項(xiàng)的數(shù)量，來決定組合檢索項(xiàng)是直接展示還是折疊展示；以及哪些屬性直接展示，哪些屬性折疊展示，為各檢索項(xiàng)安排合理的展示方式。

案例一：不同篩選數(shù)據(jù)位置的擺放

案例講解前先開動(dòng)大家聰明的小腦瓜思考?兩個(gè)小問題：

問題1:

報(bào)表管理里面有一個(gè)吞吐量統(tǒng)計(jì)、艦次（艦是船的意思）和箱量的統(tǒng)計(jì)，一個(gè)是放在左圖中篩選的最上方用我們帶小橫線的這個(gè)標(biāo)簽頁默認(rèn)樣式，一個(gè)是用膠囊的樣式放在篩選最下方表格的上方。這兩個(gè)哪個(gè)的用法是正確呢？

5、4、3、2、1…

先來說下結(jié)論吧：左圖是正確的

原因：首先分析下吞吐量、艦次、箱量三者的關(guān)系，很明顯，他們和狀態(tài)、時(shí)間的流轉(zhuǎn)是沒有關(guān)系的，它是不同類型的數(shù)據(jù)，三個(gè)tab的切換有可能就會(huì)影響到下面篩選項(xiàng)和表格的字段。所以他的層級是最高的，左圖的位置正確

問題2：

如果還有在場箱、已出閘、已在船三個(gè)類別，那這三個(gè)tab標(biāo)簽是放在左圖還是右圖合適？

答案是：右圖是正確的

原因：這三個(gè)tab是狀態(tài)和過程的流轉(zhuǎn)有關(guān)系，他們是同類型的的數(shù)據(jù)集，和上面日期、港區(qū)的選擇是同一個(gè)層級的，不會(huì)互相影響，之所以把它拿出來呢，是因?yàn)樗@個(gè)篩選比較常用，本質(zhì)上也是把這個(gè)選項(xiàng)給平鋪出來了，方便用戶查找。

我們再來總結(jié)一下案例中tab的用法。不同性質(zhì)的數(shù)據(jù)集分類放在表格的頂部，下面的篩選和表格都是它的子維度。同性質(zhì)，不同狀態(tài)流程的篩選條件如果比較高頻，可以從細(xì)分緯度的篩選條件中拿出來，緊挨在表格上方

案例二：會(huì)員篩選優(yōu)化

比如說這我們以一個(gè)會(huì)員的這個(gè)篩選為例，我們的產(chǎn)品經(jīng)理在做需求的時(shí)候，特別喜歡按照業(yè)務(wù)邏輯來做一個(gè)去梳理。

對會(huì)員的篩選，首頁是這個(gè)人是不是會(huì)員，初始的注冊時(shí)間，然后會(huì)員的來源、性別營銷顧問等等，然后她的標(biāo)簽是什么，都有什么卡，然后再往后面耗費(fèi)次數(shù)怎么樣呢？積分怎么樣？做這樣的一個(gè)邏輯。

那可以思考下這樣的邏輯是對的嗎？這樣的排序邏輯是對的嗎？

答案當(dāng)然是不對的，首先應(yīng)該明確一點(diǎn)，用戶目標(biāo)高于業(yè)務(wù)邏輯

但這個(gè)時(shí)候還需要考慮2個(gè)關(guān)鍵問題：用戶場景、目標(biāo)有哪些？查詢路徑是什么？哪些檢索頻次高？依據(jù)從何而來呢？通常有兩種方式：

• 依據(jù)一：用戶調(diào)研，通過【問卷投放】或【用戶訪談】，深入理解用戶真實(shí)使用場景以及與業(yè)務(wù)之間的關(guān)系。
• 依據(jù)二：數(shù)據(jù)埋點(diǎn)，每個(gè)操作埋個(gè)PV（點(diǎn)擊量）,一個(gè)月后再看每個(gè)操作的數(shù)據(jù)量；

Step 1：信息排序

會(huì)員全生命周期的業(yè)務(wù)邏輯應(yīng)該按照的是你的這個(gè)用戶的實(shí)際的這個(gè)操作頻次性來去排序是更合理的，訪談中我們已經(jīng)得到了用戶對各個(gè)檢索項(xiàng)的使用頻率，那信息排序的原則是：按使用頻率，用戶目標(biāo)高于業(yè)務(wù)邏輯。

Step 2：組織及隱藏

同時(shí)我們?yōu)榱吮ｋU(xiǎn)起見，調(diào)研后只調(diào)整了信息的排序，同時(shí)我們針對后臺(tái)數(shù)據(jù)做了一個(gè)點(diǎn)擊埋點(diǎn)，一個(gè)月后的搜索點(diǎn)擊次數(shù)如下圖所示（注：數(shù)據(jù)已脫敏，大家了解思路即可）

一個(gè)月后，我們發(fā)現(xiàn)搜索點(diǎn)擊這里是 69,873 次，點(diǎn)擊會(huì)員等級的是 19,876 次。對不對？而客戶性別只有是 23 次，這種數(shù)據(jù)你們要怎么去做呢？默認(rèn)折疊低頻選項(xiàng)

?如果數(shù)據(jù)不是上圖所示，每個(gè)篩選項(xiàng)都很低頻呢？

這個(gè)時(shí)候我們是不是就可以用高級篩選，把篩選都下鉆到里面，以彈窗的形式呈現(xiàn)

這個(gè)時(shí)候可能又有小伙伴遇到另外一種場景了，產(chǎn)品涉及了多個(gè)角色，每個(gè)角色的訴求還不一樣?？蛻趑昔问巧系?，沒有辦法，上帝的需求都得滿足。那這個(gè)時(shí)候自定義就可以出場了?

二、數(shù)據(jù)操作-增刪改

數(shù)據(jù)操作主要是針對表格數(shù)據(jù)的增、刪、改?？梢詮目刂品秶筒僮鲗傩詠韰^(qū)分：

控制范圍：單行操作、批量操作、全局操作

操作屬性：新增數(shù)據(jù)、編輯數(shù)據(jù)、刪除數(shù)據(jù)、業(yè)務(wù)處理

本文主要從控制范圍來對數(shù)據(jù)操作進(jìn)行拆解。

1. 單行操作

單行操作也稱行內(nèi)操作，常見的顯性與隱性兩種方式。顯性操作，操作項(xiàng)顯示在行內(nèi)，直觀明了；隱性操作，鼠標(biāo)懸停時(shí)才顯示操作項(xiàng)，界面簡潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾

顯性操作：文字按鈕操作項(xiàng)一般不多于三個(gè)，圖標(biāo)按鈕不多于四個(gè)時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過時(shí)，建議將相對低頻操作選項(xiàng)折疊收起，點(diǎn)擊”更多”或“…”下拉顯示。操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因。

隱性操作：如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時(shí)，可將所有的操作進(jìn)行隱藏，當(dāng)用戶鼠標(biāo)懸停時(shí)進(jìn)行展開所有操作。這種方式能最大程度上滿足用戶快速查看與編輯的需求，但是在實(shí)際使用中，用戶的初次使用門檻較高，需要有一定的學(xué)習(xí)成本。

2. 批量操作

適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時(shí)便于批處理和單個(gè)操作。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作，通常與復(fù)選框操作配合使用，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準(zhǔn)、拒絕、復(fù)制之類的操作，這將節(jié)省用戶時(shí)間，避免重復(fù)對多行進(jìn)行相同操作。通常也分顯隱性兩種操作

顯性批量操作：較為常用，外漏操作簡單易懂。

如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋；飛書的批量操作外漏在表格表格的右上角，雖然按鈕放在右側(cè)符合用戶右手操作鼠標(biāo)的習(xí)慣，而且考慮到適配問題，但是批量操作的路徑不符合用戶的操作動(dòng)線，路徑變長，大家可自行抉擇

隱性批量操作：容易造成記憶負(fù)擔(dān)，增加學(xué)習(xí)成本，適合批量操作較低頻的操作，產(chǎn)品沒有那么復(fù)雜的產(chǎn)品。如飛書文檔

3. 全局操作

統(tǒng)攬全局，無需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見的【新增】、【導(dǎo)入】操作。

三種操作：兩個(gè)在表格外，一個(gè)在表格內(nèi)，那么很自然的我們會(huì)遇到一個(gè)問題，一個(gè)功能該放在哪呢？下面我通過一個(gè)案例來說明。

4. 案例-數(shù)據(jù)操作優(yōu)化

產(chǎn)品現(xiàn)狀：在HRM系統(tǒng)中，不同的權(quán)限使每行的數(shù)據(jù)擁有不同的操作項(xiàng)，而且這些操作因?yàn)橐曈X特征比較顯眼，容易分散用戶的注意力，且因表格空間有限，操作區(qū)的各操作項(xiàng)過于接近，誤操作率相對較高。

設(shè)計(jì)優(yōu)化方向：

• 業(yè)務(wù)目標(biāo)-提升數(shù)據(jù)操作效率；
• 設(shè)計(jì)目標(biāo)-降低誤操作率，讓用戶聚焦內(nèi)容；
• 設(shè)計(jì)策略-控制操作項(xiàng)的顯示數(shù)量，將操作項(xiàng)分類

Step 1：分析操作控制范圍

習(xí)慣上我們會(huì)認(rèn)為一行數(shù)據(jù)是對某一個(gè)對象實(shí)例的描述，比如在上圖表格中，一行數(shù)據(jù)是對某個(gè)待入職員工的描述，包括他的姓名、工號、在職狀態(tài)等等。所以表格內(nèi)的操作也是針對這個(gè)對象的。

一般我會(huì)把一次只能針對一個(gè)對象操作的功能放在表格內(nèi)，比如【詳情】和【編輯】，因?yàn)椴榭丛斍椴惶赡芤淮尾榭炊鄠€(gè)對象，編輯修改信息也是。那么反過來，不屬于任何一個(gè)對象實(shí)例的功能就需要放在表格外的操作欄，比如說【新增】。另外一種需要放在表格外的功能是批量操作，因?yàn)榕坎僮餍枰獙Χ嘈袛?shù)據(jù)進(jìn)行同時(shí)操作，也不是屬于單個(gè)對象實(shí)例的。以此為依據(jù)將圖中操作分類如下：

大家應(yīng)該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內(nèi)操作，也可以作為批量操作的問題。作為行內(nèi)操作，優(yōu)點(diǎn)是更便捷，；表外作為是批量操作，這樣更方便的同時(shí)操作多個(gè)數(shù)據(jù)，但如果只是操作單個(gè)數(shù)據(jù)時(shí)就會(huì)增加用戶的操作步驟?；蛘邇煞N方式都提供，雖然更靈活但是會(huì)讓頁面比較冗余。

其實(shí)怎么選擇還是要根據(jù)具體業(yè)務(wù)場景來決定，首先判斷這倆操作是不是高頻功能。在我們的業(yè)務(wù)功能中，已入職和離職的員工在該頁面不能操作刪除，且【刪除】是相對低頻地，完全可以只提供單個(gè)刪除功能。【入職生效】作為高頻功能，與產(chǎn)品經(jīng)理討論后提供行內(nèi)操作和批量操作，選擇這個(gè)方案的原因是，該功能作為行內(nèi)操作已上線運(yùn)營了1年時(shí)間，移除會(huì)產(chǎn)生學(xué)習(xí)成本。

Step 2：判斷擺放位置

批量操作常見的擺放位置有三種形式。

方案一：和全局操作一起置于表左上方或右上方

因批量操作需要勾選左邊復(fù)選框，放置在表右上方不符合操作動(dòng)效，本著效率至上的原則，此處不考慮放在右上方。

優(yōu)點(diǎn)：操作項(xiàng)信息前置能清楚的知道有哪些功能，無需用戶記憶

缺點(diǎn)：但當(dāng)批量操作較多時(shí)，會(huì)擠占頁面空間，導(dǎo)致操作按鈕很多，不易查找

方案二：默認(rèn)不顯示，勾選激活后顯示于表左上方

優(yōu)點(diǎn)：減少了相應(yīng)的視覺噪音，業(yè)務(wù)拓展性強(qiáng)

缺點(diǎn)：有一定的學(xué)習(xí)成本，沒有勾選時(shí)不知道有該操作項(xiàng)

方案三：直接顯示于表左下方，但需勾選激活后操作

優(yōu)點(diǎn)：上內(nèi)容下操作，符合操作動(dòng)線

缺點(diǎn)：和分頁放置一起不易于業(yè)務(wù)拓展

根據(jù)我司業(yè)務(wù)，最復(fù)雜的批量操作不超過3個(gè)，是可以滿足業(yè)務(wù)場景的，即使后續(xù)再有新增的批量，也可以和下鉆到「更多」，綜合考慮后選擇方案三，放置于表的左下方。

Step 3：優(yōu)化信息層級

單行操作根據(jù)操作頻率優(yōu)先級為入職生效>詳情>刪除>編輯，其中編輯和刪除屬于低頻操作，可折疊隱藏。批量操作-導(dǎo)出也是低頻操作。最后定稿方案如下：

三、結(jié)語

全篇的表格文章到這就結(jié)束啦～

本文提供了一個(gè)表格設(shè)計(jì)基本指南，在具體項(xiàng)目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整，但是表格設(shè)計(jì)的原則是通用的：

• 從用戶閱讀表格的目標(biāo)出發(fā)設(shè)計(jì)表格的內(nèi)容和布局
• 從提高用戶閱讀速度的功能角度出發(fā)進(jìn)行表格的視覺設(shè)計(jì)，避免過度設(shè)計(jì)
• 當(dāng)表格指標(biāo)、數(shù)據(jù)過多時(shí)，提供一些自定義的工具幫助用戶自助選擇出最需要的數(shù)據(jù)條目

本文由 @且曼B端設(shè)計(jì)_劉美芳 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。