B端體驗(yàn)設(shè)計(jì)專題——表格篇

10 評(píng)論 18682 瀏覽 281 收藏 44 分鐘

編輯導(dǎo)語:B端企業(yè)經(jīng)常會(huì)用到表格,表格在日常工作中能起到很大作用,對(duì)于數(shù)據(jù)的整理以及總結(jié)都很有用,也能提高我們的工作效率;本文作者分享了關(guān)于B端體驗(yàn)設(shè)計(jì)中的表格設(shè)計(jì),我們一起來看一下。

做To B的同行都知道,降本增效一直是企業(yè)中后臺(tái)繞不開的熱點(diǎn)話題,現(xiàn)任公司業(yè)務(wù)涵蓋倉(WMS)、運(yùn)(TMS)、配、人(HRM),所做項(xiàng)目雖功能各異,但是有一個(gè)共同點(diǎn)——大量使用表格。

本文受有贊設(shè)計(jì)師美芳的啟發(fā),將我日常工作通過優(yōu)化表格來提效的思路整理成文章,一方面是對(duì)企業(yè)后臺(tái)的數(shù)據(jù)表格作一個(gè)簡(jiǎn)單的階段性總結(jié),另一方面給部門做一個(gè)年終分享。

一、什么是表格?

表格是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一,它也是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件,常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同。在B端中后臺(tái)中,常應(yīng)用于:

  • 一次性瀏覽大量信息-很多圖表類型無法展示數(shù)據(jù)特點(diǎn),而表格是組織大量信息通用性最高的一種表達(dá)方式,既可陳列信息,又可以表達(dá)信息之間的關(guān)系;
  • 信息之間需對(duì)比-表格的歸納與分類,便于用戶快速查詢其中的差異與變化和關(guān)聯(lián);
  • 快速確定并執(zhí)行多種復(fù)雜操作-如對(duì)信息進(jìn)行搜索、篩選、增刪改等。

1. 表格的結(jié)構(gòu)

通常表格的組成元素以及相關(guān)元素會(huì)有多個(gè)部分,根據(jù)不同粒度的用戶目標(biāo)將其解構(gòu)三部分:

  • 數(shù)據(jù)查看:表格的核心-顯,用戶用來閱覽、對(duì)比和分析數(shù)據(jù)。
  • 數(shù)據(jù)過濾:輔助作用,承載表格的查功能,將數(shù)據(jù)過濾,方便用戶快速查詢定位數(shù)據(jù),一般位于表格上方。
  • 數(shù)據(jù)操作:輔助作用,承載表格的增刪改的功能,比如常見的“新增”、“刪除”、“編輯”按鈕。

2. 設(shè)計(jì)原則與目標(biāo)

首先,我們要明確,什么是一個(gè)好的表格?我認(rèn)為好的數(shù)據(jù)表格應(yīng)便于用戶對(duì)信息進(jìn)行快速的掃描、查詢、過濾、分析等操作,以獲取深刻認(rèn)知并快速準(zhǔn)確完成目標(biāo)任務(wù)。

表格是為可讀性而生的,一個(gè)結(jié)構(gòu)清晰的布局能大大提升用戶對(duì)信息的接收速度和理解程度;因此,拆分到表格的構(gòu)成就是,設(shè)計(jì)目標(biāo)就是:數(shù)據(jù)查看區(qū)-易讀、易瀏覽、易對(duì)比;數(shù)據(jù)檢索區(qū)-易查找;數(shù)據(jù)操作區(qū)-易操作。

二、數(shù)據(jù)檢索——查

數(shù)據(jù)檢索區(qū)可以看作表格的導(dǎo)航,按預(yù)定目標(biāo)過濾出某種具有特定性質(zhì)的數(shù)據(jù),將操作者所關(guān)注的數(shù)據(jù)展示到前面,便于快速查看查看、對(duì)比、分析信息的操作過程;從用戶角度出發(fā),按不同粒度的數(shù)據(jù)過濾方式分為3種方式,分別對(duì)應(yīng)不同程度的用戶。

  • 搜索:當(dāng)用戶有相對(duì)明確的選擇目標(biāo)時(shí),需定點(diǎn)查看,數(shù)據(jù)多且雜亂無規(guī)律;
  • 篩選:用戶目標(biāo)相對(duì)比較模糊,游離于一個(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);通常上端搜索欄不被限定搜索范圍,可以全部搜索。

a. 模糊搜索

  • 優(yōu)點(diǎn):減少精準(zhǔn)搜索帶來的記憶負(fù)擔(dān);
  • 缺點(diǎn):容易把不相關(guān)的。

b. 帶標(biāo)簽的搜索

  • 優(yōu)點(diǎn):搜索匹配精準(zhǔn)度高;
  • 缺點(diǎn):不方便,每次只能對(duì)單一條件進(jìn)行搜索。

2. 篩選

篩選可以幫助用戶縮小數(shù)據(jù)范圍,逐步找到想要的內(nèi)容;或者當(dāng)用戶的目標(biāo)就是查看某一范圍的數(shù)據(jù)時(shí),篩選將是一種十分快捷的方式;在企業(yè)級(jí)中后臺(tái)產(chǎn)品中,篩選的使用場(chǎng)景通常是后一種。

a.下拉篩選

  • 優(yōu)點(diǎn):空間利用率高,起到了很好的收納作用;
  • 缺點(diǎn):無法直觀看到所有篩選項(xiàng)。

b. 平鋪篩選

  • 優(yōu)點(diǎn):操作效率高,篩選項(xiàng)一目了然,支持輸入更多篩選條件;
  • 缺點(diǎn):空間利用率低,不適合選項(xiàng)太多的情況。

c. 表頭篩選

  • 優(yōu)點(diǎn):篩選當(dāng)前列,更直觀,一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高;
  • 缺點(diǎn):篩選的內(nèi)容僅限于特定、單次列的篩選,對(duì)于首次使用者來說陌生,交互形式需要學(xué)習(xí)。

3. 標(biāo)簽

使用場(chǎng)景:標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān),且沒有交集的數(shù)據(jù)內(nèi)容;主要樣式有基礎(chǔ)、卡片、膠囊等。

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

缺點(diǎn):分類必須覆蓋所有情況,并且保證每一項(xiàng)沒有交集,分類不能過多,9個(gè)已經(jīng)是最大。

注:提升用戶體驗(yàn)的一個(gè)小細(xì)節(jié)-我在其他B端表格的使用中發(fā)現(xiàn),一部分表格在使用標(biāo)簽時(shí),默認(rèn)的是全部。個(gè)人認(rèn)為比較好的一種方法是默認(rèn)用戶最關(guān)注的選項(xiàng),而非全部,這樣可以縮短查詢路徑;并給出條目,易于閱讀。

4. 組合檢索

在企業(yè)級(jí)中后臺(tái)中,用戶查看的數(shù)據(jù)往往屬性比較多且不唯一,通過簡(jiǎn)單的檢索方式很難精確定位到目標(biāo)數(shù)據(jù),所以,在實(shí)際使用時(shí),常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列,搜索、篩選、標(biāo)簽切換組合出現(xiàn),形成多屬性組合檢索。這種檢索更適合于專家用戶,他們對(duì)于目標(biāo)數(shù)據(jù)有明確的定位,知道可以通過哪些屬性精確定位到自己想要的數(shù)據(jù)

a. 展示方式

平鋪顯示:

選用高識(shí)別度、高使用頻率的、對(duì)用戶決策有意義的屬性作為直接展示的組合檢索條件,不建議過于廣泛,數(shù)量最好不超過5個(gè)(7±2法則)。

  • 優(yōu)點(diǎn):大而全能最大限度避免檢索條件疏漏的可用性問題;
  • 缺點(diǎn):易用性不高。大而全可能為用戶帶來繁雜的第一印象,都是重點(diǎn)等于沒有重點(diǎn),增加用戶的決策時(shí)間。

折疊展示:

如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的;則可通過折疊的方式將這部分檢索條件隱藏起來,將高頻率使用的、數(shù)據(jù)覆蓋面廣的1-3個(gè)屬性直接展示出來。

b. 總結(jié)思考

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

5. 案例-檢索區(qū)優(yōu)化

產(chǎn)品現(xiàn)狀:前言中提過,我司業(yè)務(wù)涵蓋WMS、TMS、HRM,業(yè)務(wù)極其復(fù)雜,數(shù)據(jù)種類字段眾多,使用的檢索方式為組合篩選平鋪展示,一半以上的頁面篩選項(xiàng)超過了9個(gè)(不符合7±2原則),大而全的檢索方式一方面占據(jù)首屏大部分空間,導(dǎo)致首屏屏效低;另一方面用戶在尋找具體篩選條件時(shí),仿佛大海撈針,增加了用戶決策時(shí)間。因后臺(tái)數(shù)據(jù)涉密,將下圖-招聘中可公開的頁面作為案例來可大家分享。

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

  • 業(yè)務(wù)目標(biāo)-提升招聘人員的檢索效率?;
  • 設(shè)計(jì)目標(biāo)-縮短檢索路徑,減少檢索區(qū)占用的屏幕空間,提高首屏屏效,將展示區(qū)域更多留給表格;
  • 設(shè)計(jì)策略-按照用戶場(chǎng)景檢索路徑、檢索頻次設(shè)計(jì)信息;

但還有2個(gè)關(guān)鍵問題:用戶場(chǎng)景有哪些?查詢路徑是什么?哪些檢索頻次高?依據(jù)從何而來呢?通常有兩種方式:

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

Step 1:用戶訪談

我采用的用研方式是用戶訪談,原因是由于招聘人員和我們產(chǎn)研人員在一個(gè)園區(qū),調(diào)研方便,得出數(shù)據(jù)的時(shí)間比埋點(diǎn)短;而相比【問卷投放】,用戶訪談能細(xì)到具體某個(gè)字段在場(chǎng)景中的作用。訪談的過程因?yàn)槠蚓筒辉诖司唧w講述,大家可根據(jù)自己的實(shí)際情況選擇適合的用研方式。

訪談中了解到,招聘人員的工作是發(fā)布崗位信息,快速招到合適的人。因此他們?cè)谠擁撁娴腡OP場(chǎng)景就是對(duì)崗位上下架,即【新增】和【刪除】,而檢索的TOP場(chǎng)景有哪些呢?

  • 對(duì)上架中的已招滿的崗位進(jìn)行下架處理,完整的檢索路徑為崗位狀態(tài)>崗位名稱>項(xiàng)目;
  • 設(shè)置崗位傭金,因傭金會(huì)根據(jù)需求方要求及緊急程度動(dòng)態(tài)變化,完整的檢索路徑為崗位名稱>傭金排序;
  • 匯報(bào)招聘進(jìn)度,對(duì)于個(gè)別需求量大、急聘的項(xiàng)目,領(lǐng)導(dǎo)特別重視,經(jīng)常需要導(dǎo)表。完整的檢索路徑為急聘>崗位名;

通過場(chǎng)景得出高頻檢索為【崗位狀態(tài)】、【崗位名稱】、【急聘】,其他如【項(xiàng)目】和【城市】檢索條件只是當(dāng)崗位名稱重復(fù)時(shí)來進(jìn)行組合篩選,但該場(chǎng)景在我們業(yè)務(wù)中很少遇到,如【仙林店誠(chéng)招配送員】,門店重合率很低。

Step 2:信息排序

訪談中我們已經(jīng)得到了用戶對(duì)各個(gè)檢索項(xiàng)的使用頻率,那信息排序的原則是:按使用頻率,用戶目標(biāo)高于業(yè)務(wù)邏輯,而改版前并非是按照使用頻率排序的。再回到用戶場(chǎng)景,在匯報(bào)招聘進(jìn)度時(shí)需要檢索的【急聘】并不在檢索項(xiàng)中,需要和產(chǎn)品經(jīng)理反映這一點(diǎn)

Step 3:組織及隱藏

直接展示高頻檢索項(xiàng)【崗位狀態(tài)】、【崗位名稱】和【急聘】,其他低頻項(xiàng)折疊至高級(jí)篩選,【項(xiàng)目】、【城市】

【創(chuàng)建人】作為下拉篩選,查詢路徑較長(zhǎng),同時(shí)將字段組合放置在搜索選項(xiàng)中,采用帶標(biāo)簽的搜索,因【崗位名】頻次遠(yuǎn)高于其他字段,默認(rèn)展示【崗位】

優(yōu)化后如下圖所示:

三、數(shù)據(jù)查看

數(shù)據(jù)查看區(qū)主要用于數(shù)據(jù)的顯,用于對(duì)比、瀏覽,而B端后臺(tái)的表格中展示的數(shù)據(jù)往往多且雜,數(shù)據(jù)種類、字段眾多,10-20字段很普遍;這就需要我們?cè)谠O(shè)計(jì)的時(shí)候先一步對(duì)數(shù)據(jù)進(jìn)行梳理歸納,提高數(shù)據(jù)的易讀性;我在對(duì)我們后臺(tái)表格進(jìn)行優(yōu)化時(shí),會(huì)先通過四個(gè)維度來自檢,然后再有針對(duì)性的進(jìn)行優(yōu)化。

在講提升數(shù)據(jù)查看區(qū)的易讀性前,我們先來看看該區(qū)的結(jié)構(gòu)。數(shù)據(jù)查看區(qū)主要由表頭、行、列、單元格四個(gè)部分組成。

  • 表頭:說明數(shù)據(jù)的內(nèi)容,可以包含篩選、排序等功能起到數(shù)據(jù)解釋作用;
  • 行和列:對(duì)本行/本列數(shù)據(jù)的描述,可以理解為是表格的骨架,是用戶快速掃描并接收表格布局的關(guān)鍵要素;
  • 單元格:表格的主體內(nèi)容,承載用戶的每一條數(shù)據(jù),也是整個(gè)表格的核心。

1. 信息降噪

表格設(shè)計(jì)的本質(zhì)是信息內(nèi)容的有效傳達(dá),就表格本身而言應(yīng)該是隱型的,應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上,多做減法。

1)內(nèi)容降噪

a. 控制列數(shù)

基于對(duì)實(shí)際業(yè)務(wù)需求、目標(biāo)用戶訴求及其行為的理解,列數(shù)盡量控制在7±2,列舉用戶更為關(guān)注的數(shù)據(jù),用戶需要的非重點(diǎn)、輔助性信息可以在詳情中展示。

b. 自定義列

如果不同用戶想看到的信息側(cè)重不同,可以讓用戶自定義列的展示。在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)(如下圖)。

這樣做的好處是,首先,用戶能在表格上方看到所有的指標(biāo)名稱,避免了原來需要橫向拖拽才能瀏覽到所有指標(biāo)的情況;其次,用戶可以根據(jù)自己的需要,自由的選擇顯示所需指標(biāo),隱藏不必要指標(biāo),減少干擾;但需注意系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置,減少用戶重復(fù)操作。

c. 精簡(jiǎn)表頭-少一字不可

表頭,概括每列的主要信息,在用戶使用表格中,起到數(shù)據(jù)解釋作用,讓數(shù)據(jù)能與之進(jìn)行匹配,使用戶能夠看懂;表頭在能夠概括的情況下,盡量簡(jiǎn)煉、準(zhǔn)確,一般可根據(jù)上下文關(guān)系來進(jìn)行減短簡(jiǎn)化,以達(dá)到節(jié)省表格頭部空間和減輕視覺壓力的作用。

一個(gè)簡(jiǎn)單的檢驗(yàn)表頭是否精簡(jiǎn)的方法是:少一個(gè)字不可,通俗易懂的說法就是字?jǐn)?shù)再精簡(jiǎn)用戶就不明白意思了;可以讓其他同事體驗(yàn)產(chǎn)品,看有沒有一些名詞定義讓用戶產(chǎn)生誤解。

d. 定義專有名詞

對(duì)于比較復(fù)雜的表頭,可以定義一個(gè)專有名詞,鼠標(biāo)hover上去對(duì)專業(yè)術(shù)語或用戶不常見的名詞給予該字段的詳細(xì)解釋,同時(shí)滿足新手、普通、專家用戶的需求。

e. 情況允許時(shí),去掉表頭

如果表格數(shù)據(jù)可以自我解釋,表頭就不是必須的。如電子郵件的表格,就不需要列標(biāo)簽,因?yàn)榘l(fā)件人和郵主題的區(qū)分度比較高。

2)視覺降噪

表格中所承載的數(shù)據(jù)信息才是主體,在進(jìn)行表格設(shè)計(jì)時(shí),尤其要注意去除所有非必要的視覺元素,讓用戶將注意力集中在數(shù)據(jù)信息上,而不是無關(guān)的邊框、底色等;所有的視覺元素應(yīng)該為更好的幫助用戶閱讀而服務(wù),除此之外,再精美的設(shè)計(jì)都是對(duì)表格的破壞。

a. 去掉不必要的分割線和斑馬紋

去掉豎向分割線:水平分割線能顯著減輕長(zhǎng)表格在垂直方向的視覺重量,加快大量數(shù)值的對(duì)比工作。

而豎向分割線的作用是即使縮減元素之間的距離也能區(qū)分不同元素,但如果用對(duì)齊方式和間距來區(qū)分,豎直分隔線其實(shí)是多余的的;即使要用,也要非常淡,不能妨礙快速瀏覽。

不使用斑馬線:數(shù)據(jù)量不大且易分辨的情況下,斑馬線在很多時(shí)候也是沒有必要的,因?yàn)樗鼈兪峭活悢?shù)據(jù),而且水平分割線就已經(jīng)能夠明顯區(qū)隔。

b. 分割線樣式輕盈

分割線的樣式盡量輕盈,無關(guān)的邊框不要搶視覺,數(shù)據(jù)才是主體,突出內(nèi)容。

c. 減少圖形元素的使用

去掉不必要的裝飾和顏色,如icon、標(biāo)簽等,雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息,但物極必反,少即是多,要注意克制這些元素的使用;標(biāo)簽?zāi)苡镁€性就不用面性,做到輕盈,否則表格中最重的就是標(biāo)簽。

d. 字體降噪-統(tǒng)一

在產(chǎn)品的品牌設(shè)計(jì)中,字體是規(guī)范中的重要一環(huán)。然而在設(shè)計(jì)表格時(shí),簡(jiǎn)約至上才是關(guān)鍵,盡量避免任何裝飾性字體;雖然文本不能夠建議你具體使用哪種字體,但數(shù)字建議使用Helvetica Neue、Helvetica等其他等寬字體,文本最好不要出現(xiàn)以下情況。

  • 不要出現(xiàn)襯線字體:因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音,不利于用戶對(duì)數(shù)據(jù)的理解和思考。
  • 不要出現(xiàn)全大寫字體:因?yàn)樗茈y讀,需要轉(zhuǎn)化思維。
  • 不要出現(xiàn)使用斜體:易引起視線疲勞,影響閱讀。
  • 不要出現(xiàn)多種字體:保持風(fēng)格統(tǒng)一。

2. 呼吸適中

1)合適的單元格高度

在開發(fā)同學(xué)的眼中,單元格高度=內(nèi)容高度+上間距+下間距,在實(shí)現(xiàn)設(shè)計(jì)稿時(shí),通常也是按照這個(gè)方式來寫的,而不是像設(shè)計(jì)同學(xué)一樣按照文字的尺寸來計(jì)算間距;其中,文字行高建議設(shè)為字號(hào)的1.5倍,上下間距設(shè)為字號(hào)的1.2倍。

當(dāng)然,在很多很多通用化產(chǎn)品中,存在多個(gè)設(shè)備屏幕分辨率的差異,為了讓每一個(gè)分辨率下的產(chǎn)品都能夠有較好的展示效果,可設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足需求,提供切換按鈕讓用戶自己控制顯示密度。

2)合適的列間距

合適的填充和邊距對(duì)于視覺設(shè)計(jì)至關(guān)重要,以保證易讀性。定義列的間距時(shí),我通常的做法是N1保持不變,將N2定義一個(gè)最小值,N2再根據(jù)表格的寬度自適應(yīng)變化。

表格主要適配到這個(gè)最小寬度,這一步驟通常的設(shè)計(jì)系統(tǒng)的初期就要完成,一方面可根據(jù)自己項(xiàng)目目前情況,按照導(dǎo)航寬度等固定尺寸確定最小的表格寬度;這樣在處理最小尺寸時(shí),可以有一個(gè)明確的邊界,同時(shí)能與開發(fā)同學(xué)進(jìn)行理解溝通;當(dāng)表格寬度大于頁面寬度,固定首尾列,左右滑動(dòng)。

?3. 高效易讀

1)合適的對(duì)齊

合適的對(duì)齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對(duì)齊(符合格式塔心理學(xué)中相近原則)能夠很好的形成視覺引導(dǎo)線。

通過對(duì)齊,會(huì)讓表格更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,視線流動(dòng)更順暢,讓用戶快速的捕捉到所需內(nèi)容。

  • 文本左對(duì)齊:更高效的閱讀瀏覽順序,包括非比較型和固定長(zhǎng)度的數(shù)字,如日期2020-12-04(補(bǔ)0是數(shù)字書寫規(guī)范)、編號(hào)1948696等;
  • 數(shù)值右對(duì)齊:金額、長(zhǎng)度、高度等,數(shù)字是從右往左讀的,通過數(shù)值位數(shù)的長(zhǎng)短即可對(duì)比數(shù)值的量級(jí)和大小,方便數(shù)值的比對(duì)。這是因?yàn)樵趯?duì)比數(shù)字時(shí),首先看個(gè)位,然后十位、百位等;
  • 最后一列右對(duì)齊:通常是操作,即使沒有縱向分割線也能很好的起到分隔的作用,視覺上看表格是一個(gè)方方正正的格子,比較整齊;

2)不留空白格

當(dāng)表格單元格中沒有相應(yīng)數(shù)據(jù)時(shí),要避免直接留出空白單元格;空白格容易造成用戶的困惑甚至誤解,用戶會(huì)搞不清楚到底是沒有數(shù)據(jù),還是根本沒有值?

正確做法是,數(shù)據(jù)不存在(數(shù)據(jù)庫中沒有該字段)用“-”,沒有數(shù)量(數(shù)據(jù)庫中有該字段)用“0”,且小數(shù)點(diǎn)后位數(shù)、單位,都要與上下單元格保持一致。

3)合適的翻頁器

在Web端,數(shù)據(jù)量動(dòng)輒上萬條,容易出現(xiàn)瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出的情況,使用分頁器有哪些優(yōu)點(diǎn)呢?

  • 分頁可以緩解服務(wù)器的加載壓力,每翻一頁加載該頁的頁面,縮減單次加載的數(shù)據(jù)量來縮短等待加載的時(shí)間,從而達(dá)到少量多次的高效體驗(yàn);這就是為什么哪怕是移動(dòng)時(shí)代了,很多表格還是使用分頁組件。
  • 分頁可以跳躍查看數(shù)據(jù),靈活性更高、步驟更短。

表格設(shè)計(jì)大原則是整張表不要超過一屏,每一頁的默認(rèn)行數(shù):10行以上,減少翻頁的次數(shù)。

但考慮到每個(gè)用戶的使用習(xí)慣,在給出默認(rèn)行的數(shù)量后,可以讓用戶自定義每頁的顯示的數(shù)量,相比于跨屏翻頁而言,向下滾屏?xí)憷?/p>

4)收起低頻操作

我在接手我們后臺(tái)產(chǎn)品之初,在對(duì)業(yè)務(wù)人員進(jìn)行角色調(diào)研時(shí)就收到反饋到有些頁面非常難用,有些就很好用。

為什么會(huì)出現(xiàn)這樣的情況呢?如下圖所示,被投訴的表格單操作項(xiàng)就有6個(gè),一方面容易誤操作,另一方面左側(cè)的數(shù)據(jù)展示內(nèi)容有限,易讀性很差。

對(duì)于單條數(shù)據(jù)操作頻繁的場(chǎng)景,我的方法是,當(dāng)超過三個(gè)操作項(xiàng)時(shí),將操作低頻折疊收起;這樣做的優(yōu)點(diǎn)是界面簡(jiǎn)潔明快,信息密度低,可以幫助頁面突出更加重要的信息,減輕空間壓力,減少干擾。

5)內(nèi)容防重復(fù)

工作中常常會(huì)遇到單元格數(shù)據(jù)過多的情況,常見的方法有兩種:

  1. 定義一個(gè)單元格長(zhǎng)度或字?jǐn)?shù)限制,超過該范圍以“…”顯示,鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。
  2. 多行顯示,這種方法讓平鋪直敘,讓用戶可以直接了當(dāng)?shù)目吹剿行畔ⅲ贐端使用層面上還是不錯(cuò)的,但是超出三行就會(huì)擠占行高度,建議不要超過兩行,超出可“…”顯示。

數(shù)據(jù)過多時(shí),單元格長(zhǎng)度如何定義?超過哪個(gè)范圍“…”顯示呢?

定義長(zhǎng)度的依據(jù):根據(jù)業(yè)務(wù)字段,防重復(fù);保證用戶在掃視的時(shí)候,對(duì)重要字段能快速區(qū)分、對(duì)比。

6)默認(rèn)行排序

新增一條數(shù)據(jù)后,這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢?這是個(gè)和表格默認(rèn)排序有關(guān)的問題。

表格數(shù)據(jù)應(yīng)該默認(rèn)按添加的時(shí)間排序,還是應(yīng)該按某個(gè)字段的名稱排序?

如果我們默認(rèn)按某個(gè)字段排序,比方說崗位列表里增加一條“廣深常溫B2C 叉車員”的字段,而首字母G的數(shù)據(jù)很可能不在所有數(shù)據(jù)的靠前位置;這時(shí)就會(huì)出現(xiàn)一個(gè)問題,用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù),或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了,這會(huì)讓他們覺得自己的操作失敗了。

解決這個(gè)問題的一個(gè)方法就是按照數(shù)據(jù)添加時(shí)間排序,默認(rèn)最新創(chuàng)建的在最上面,體驗(yàn)上創(chuàng)建完反饋,馬上就出現(xiàn)了變化,且針對(duì)最新數(shù)據(jù)的操作頻率較高,方便用戶發(fā)現(xiàn)與查找;也可以用帶排序表頭,讓用戶自定義排序。

4. 詳情查看

前面內(nèi)容降噪有講到盡量控制列數(shù)在7±2,非重點(diǎn)內(nèi)容通過更深的入口查看,關(guān)于詳情查看可以分為跳轉(zhuǎn)和點(diǎn)擊詳情。

  • 跳轉(zhuǎn):把 ID、名稱等唯一性標(biāo)志的字段加上超鏈接,直接顯示鏈接色或者開始不顯示,鼠標(biāo)hover上去才顯示鏈接色,點(diǎn)擊可以查看該條記錄的詳情。
  • 詳情:在操作列中增加“詳情”功能,點(diǎn)擊查看詳情。

關(guān)于表詳情查看的展現(xiàn)形式,按可承載的信息量由少到多依次分為四種:折疊展開、彈窗、抽屜、以及新增頁面。

1)折疊展開

直接在表格里展開(可以是詳情,也可以是二級(jí)表格),無需打開新頁面即可查看附加信息,防止用戶迷失。

適用場(chǎng)景:信息量較少的情況。

2)彈窗

彈窗是一種中斷用戶當(dāng)前操作并對(duì)其進(jìn)行補(bǔ)充、或者對(duì)當(dāng)前操作進(jìn)行強(qiáng)制反饋的交互形式,需要用戶進(jìn)行強(qiáng)交互,它可以保留用戶當(dāng)前進(jìn)程的情況下,指引用戶完成一個(gè)特定的操作。

主要分為模態(tài)彈窗與非模態(tài)彈窗兩種形式:

a. 非模態(tài)彈窗

通常這類彈窗只會(huì)在屏幕上短暫停留,幾秒就會(huì)消失,也因此用戶感受不到他的存在;它的缺點(diǎn)也非常明顯,展示時(shí)間較短,不適合展示重要信息、不能承載大量文案;在詳情查看頁面中并不適用,此處就不再進(jìn)行拆解。

b. 模態(tài)彈窗

位于瀏覽器的主頁面核心區(qū)域,需要用戶對(duì)它做出相應(yīng)交互,彈窗才會(huì)消失。

  • 優(yōu)勢(shì):通過全局的半透明黑色能夠讓用戶更加聚焦,集中精力去處理好當(dāng)前事情,能夠通過透明度展示背景,讓用戶了解到自己并沒有離開當(dāng)前頁面;
  • 劣勢(shì):打擾用戶,感到強(qiáng)烈的中斷的感受;

適用場(chǎng)景:數(shù)據(jù)詳情體量不大,頁面內(nèi)容較輕時(shí);同時(shí),不需要參照上級(jí)頁面內(nèi)容,有快速回退的訴求。

3)抽屜

側(cè)滑抽屜相比彈窗減少了頁面層級(jí)和隔離感,有較強(qiáng)的連貫性,適合與原頁面具有連貫結(jié)構(gòu)的內(nèi)容的展示。

單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息,這讓用戶能夠解析大型數(shù)據(jù)集;而且在涉及到多個(gè)項(xiàng)目時(shí)不會(huì)丟失位置??勺远x上下左右四個(gè)方向,一般右側(cè)最為常見。

適用場(chǎng)景:詳情頁的內(nèi)容較多時(shí),且有快速切換主體的訴求。

4)新增頁面

新增頁面幾乎是萬能的,無論頁面內(nèi)容量是多少、頁面間是否連貫、以及使用頻率怎樣,都可以使用;新增頁面又分為:覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式,在場(chǎng)景上可以根據(jù)兩者差異進(jìn)行選擇。

在詳情查看中,二級(jí)頁面使用頻率是非常高的,需要用戶在A與B頁面之間進(jìn)行來回切換,這時(shí)候考慮頁面反復(fù)出現(xiàn)是否流暢,是否有切換成本的產(chǎn)生;本著產(chǎn)品效率至上的原則,新增的頁面建議新開一個(gè)窗口跳轉(zhuǎn)而非覆蓋,如下圖:

適用場(chǎng)景:當(dāng)詳情頁承載內(nèi)容過多且里面的操作相對(duì)復(fù)雜時(shí)。

四、數(shù)據(jù)操作——增刪改

數(shù)據(jù)操作主要是針對(duì)表格數(shù)據(jù)的增、刪、改,從控制范圍可分為:?jiǎn)涡胁僮?、批量操作、全局操作?/p>

1. 單行操作

單行操作也稱行內(nèi)操作,常見的顯性與隱性兩種方式:

  • 顯性操作,操作項(xiàng)顯示在行內(nèi),直觀明了;
  • 隱性操作,鼠標(biāo)懸停時(shí)才顯示操作項(xiàng),界面簡(jiǎn)潔,留更多的空間給需要查看的數(shù)據(jù)內(nèi)容,減輕空間壓力,減少干擾。

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

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

2. 批量操作

適用于數(shù)據(jù)量較大的表格,通常把操作放在表外部上方,這樣操作更便捷,同時(shí)便于批處理和單個(gè)操作。

批處理操作模式允許用戶對(duì)一行或多行對(duì)象執(zhí)行操作,通常與復(fù)選框操作配合使用,并在選中復(fù)選框后激活表上方操作按鈕,如刪除、批準(zhǔn)、拒絕、復(fù)制之類的操作,這將節(jié)省用戶時(shí)間,避免重復(fù)對(duì)多行進(jì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)過于接近,誤操作率相對(duì)較高。

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

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

1)分析操作控制范圍

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

一般我會(huì)把一次只能針對(duì)一個(gè)對(duì)象操作的功能放在表格內(nèi),比如【詳情】和【編輯】,因?yàn)椴榭丛斍椴惶赡芤淮尾榭炊鄠€(gè)對(duì)象,編輯修改信息也是。

那么反過來,不屬于任何一個(gè)對(duì)象實(shí)例的功能就需要放在表格外的操作欄,比如說【新增】;另外一種需要放在表格外的功能是批量操作,因?yàn)榕坎僮餍枰獙?duì)多行數(shù)據(jù)進(jìn)行同時(shí)操作,也不是屬于單個(gè)對(duì)象實(shí)例的。

以此為依據(jù)將圖中操作分類如下:

大家應(yīng)該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內(nèi)操作,也可以作為批量操作的問題。

作為行內(nèi)操作,優(yōu)點(diǎn)是更便捷;表外作為是批量操作,這樣更方便的同時(shí)操作多個(gè)數(shù)據(jù),但如果只是操作單個(gè)數(shù)據(jù)時(shí)就會(huì)增加用戶的操作步驟;或者兩種方式都提供,雖然更靈活但是會(huì)讓頁面比較冗余。

其實(shí)怎么選擇還是要根據(jù)具體業(yè)務(wù)場(chǎng)景來決定,首先判斷這倆操作是不是高頻功能;在我們的業(yè)務(wù)功能中,已入職和離職的員工在該頁面不能操作刪除,且【刪除】是相對(duì)低頻地,完全可以只提供單個(gè)刪除功能。

【入職生效】作為高頻功能,與產(chǎn)品經(jīng)理討論后提供行內(nèi)操作和批量操作,選擇這個(gè)方案的原因是,該功能作為行內(nèi)操作已上線運(yùn)營(yíng)了1年時(shí)間,移除會(huì)產(chǎn)生學(xué)習(xí)成本。

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ù),綜合考慮后選擇方案三,放置于表的左下方。

3)優(yōu)化信息層級(jí)

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

最后定稿方案如下:

五、結(jié)語

2B產(chǎn)品應(yīng)該著眼于業(yè)務(wù),本文是根據(jù)我司業(yè)務(wù)提供了一個(gè)表格設(shè)計(jì)基本的指南,在具體項(xiàng)目中,你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。

但是表格設(shè)計(jì)的原則應(yīng)該是通用的:

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

本文到這就結(jié)束啦!如果你還有什么好的想法和建議,可以在評(píng)論里留言討論。

 

本文由 @小鹿_lp 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 不能說似曾相識(shí),只能說一模一樣http://theventurebank.com/pd/4312403.html

    來自四川 回復(fù)
    1. 我覺得這篇更詳細(xì)更多。。。

      來自北京 回復(fù)
  2. 簡(jiǎn)歷量這個(gè)應(yīng)該是對(duì)比型數(shù)據(jù),對(duì)齊方式不需要右對(duì)齊嗎?

    來自北京 回復(fù)
  3. 作者你好,請(qǐng)問如果想在表格上方加入幾個(gè)條件選擇器來篩選數(shù)據(jù),有什么要注意的地方嗎?自己嘗試了感覺上方控件略微顯得有點(diǎn)雜亂。

    來自浙江 回復(fù)
  4. 寫的很好,最近在正在設(shè)計(jì)表格這方面的,作者總結(jié)的非常到位,請(qǐng)問用的畫圖工具是啥呀,感覺挺好的

    來自山東 回復(fù)
  5. 作者的交互規(guī)則描寫的十分清晰 很受用 有點(diǎn)吹毛求疵的小問題:方案三的“導(dǎo)出”默認(rèn)狀態(tài)也是點(diǎn)亮吧 不勾選的情況下可以支持導(dǎo)出全部數(shù)據(jù)~

    來自上海 回復(fù)
  6. 總結(jié)的挺好的,思路很清晰,先了解業(yè)務(wù)、用戶使用路徑再做體驗(yàn)設(shè)計(jì)。交流幾個(gè)疑問;
    1.工號(hào)是否可以和與姓名合并“小鹿(2021)”工號(hào)并偏向灰色。因工號(hào)僅能作為姓名的輔助判斷信息,入職順序、重名者判斷。
    2.橫向沒有主次表達(dá)出來;如 入職狀態(tài)也就3類左右,已經(jīng)加入類顏色圓點(diǎn)作為區(qū)分,字體置灰即可
    3.表頭可以加排序與篩選,比如入職狀態(tài)篩選,入職時(shí)間排序。
    4.崗位是否需要區(qū)分高中低的崗位給予顏色或圖形標(biāo)簽?(看具體情況)

    來自廣東 回復(fù)
    1. 你的疑問是關(guān)于案例-數(shù)據(jù)操作優(yōu)化的,案例中的字段和我上線產(chǎn)品還是有差異的哈,主要說明操作按鈕。但還是可以回答你下面的問題:
      1.工號(hào)和與姓名合并,字段變長(zhǎng),且長(zhǎng)短不一,反而會(huì)影響姓名的閱讀效率,工號(hào)和后面的其他字段都是輔助判斷信息,沒有必要單獨(dú)合并
      關(guān)于2.3兩點(diǎn):入職狀態(tài)不同,聯(lián)動(dòng)的是單行操作的差異,層級(jí)置于表格上方用tab標(biāo)簽比較合適。至于狀態(tài)用圓點(diǎn)區(qū)分后字體是否要置灰,實(shí)際上我通過tab標(biāo)簽把狀態(tài)區(qū)分了,表格是沒有狀態(tài)的
      3.崗位的高低在該業(yè)務(wù)場(chǎng)景下和用戶閱讀、操作并沒有強(qiáng)關(guān)聯(lián),并非用戶所關(guān)心的,無需強(qiáng)調(diào),比如CRM產(chǎn)品,銷售會(huì)關(guān)注客戶等級(jí),則可以用你說的方式

      來自上海 回復(fù)
  7. 代碼控件沒分享啊,直接拿來用比較好,一般企業(yè)沒那么多時(shí)間搞這個(gè)

    來自新疆 回復(fù)
    1. 伸手就來要?

      來自廣東 回復(fù)