B端體驗設計專題-表格篇

B端體驗設計專題-表格篇

B端體驗設計專題-表格篇,教程,小鹿lp,原創文章站酷網,中國設計師互動平台。

前言

做To B的同行都知道,降本增效一直是企業中後台繞不開的熱點話題,現任公司業務涵蓋倉(WMS)、運(TMS)、配、人(HRM),所做項目雖功能各異,但是有一個共同點-大量使用表格。本文受有贊設計師@美芳的啟發,將我日常工作通過優化表格來提效的思路整理成文章,一方面是對企業後台的數據表格作一個簡單的階段性總結,另一方面給部門做一個年終分享。

undefined

一、什麼是表格?

表格是展現數據最為清晰、高效的形式之一,它也是B端產品和設計師每天接觸最多的組件,常和排序、搜索、篩選、分頁等其他界面元素一起協同。在企業級中後台中,常應用於:

  • 一次性瀏覽大量信息-很多圖表類型無法展示數據特點,而表格是組織大量信息通用性最高的一種表達方式,既可陳列信息,又可以表達信息之間的關係;

  • 信息之間需對比-表格的歸納與分類,便於用戶快速查詢其中的差異與變化和關聯;

  • 快速確定並執行多種複雜操作信息-如對信息進行搜索、篩選、增刪改等。

1. 表格的結構

通常表格的組成元素以及相關元素會有多個部分,根據不同粒度的用戶目標將其解構為三部分:

數據查看:表格的核心-顯,用戶用來閱覽、對比和分析數據。

數據過濾:輔助作用,承載表格的查功能,將數據過濾,方便用戶快速查詢定位數據,一般位於表格上方。

數據操作:輔助作用,承載表格的增刪改的功能,比如常見的“新增”、“刪除”、“編輯”按鈕。

undefined

2. 設計原則與目標

首先,我們要明確,什麼是一個好的表格?筆者認為好的數據表格可讀性要強,應便於用戶對信息進行快速的掃描、查詢、過濾、分析等操作,以獲取數據并快速準確地完成目標任務。一個結構清晰的佈局能大大提升用戶對信息的接收速度和理解程度,拆分到表格的設計目標就是:易讀、易查找、易操作。

undefined

二、數據檢索-查

數據檢索區可以看作表格的導航,按預定目標過濾出某種具有特定性質的數據,將操作者所關注的數據展示到前面,便於快速查看查看、對比、分析信息的操作過程。從用戶角度出發,按不同粒度的數據檢索方式分為3種方式,分別對應不同程度的用戶。

搜索:當用戶有相對明確的選擇目標時,需定點查看,數據多且雜亂無規律;

篩選:用戶目標相對比較模糊,游離於一個大概的範圍時,通常用於一些有清晰分類的數據;

標籤:查看無交集的數據內容,通常伴隨時間、狀態的流轉。

undefined

1. 搜索

搜索可以幫助用戶在巨大的信息池中縮小目標範圍,快速而準確的定位到目標數據,並速獲取需要的信息。由於考慮到用戶需要手動輸入,很難保證精準搜索,原則上所有搜索均為模糊搜索,必要精準搜索的地方使用篩選功能,給用戶提供篩選選項。通常上端搜索欄不被限定搜索範圍,可以全部搜索。

1.1 模糊搜索

優點:減少精準搜索帶來的記憶負擔

缺點:容易把不相關的

1.2 帶標籤的搜索

優點:搜索匹配精準度高

缺點:不方便,每次只能對單一條件進行搜索

undefined

2. 篩選

篩選可以幫助用戶縮小數據范圍,逐步找到想要的內容;或者當用戶的目標就是查看某一範圍的數據時,篩選將是一種十分快捷的方式。在企業級中後台產品中,篩選的使用場景通常是後一種。

2.1 下拉篩選

優點:空間利用率高,起到了很好的收納作用

缺點:無法直觀看到所有篩選項

undefined

2.2 平鋪篩選

優點:操作效率高,篩選項一目了然,支持輸入更多篩選條件

缺點:空間利用率低,不適合選項太多的情況undefined

2.3 表頭篩選

優點:篩選當前列,更直觀,一般情況下表單左側數據篩選頻次越高

缺點:篩選的內容僅限於特定、單次列的篩選,對於首次使用者來說陌生,交互形式需要學習

undefined

3. 標籤

使用場景:標籤切換一般用於和時間、狀態的流轉有關,且沒有交集的數據內容。主要樣式有基礎、卡片、膠囊等。

優點:根據標籤,可以很清楚知道劃分,切換tab就可以篩選內容。

缺點:分類需覆蓋選項,並且保證每一項沒有交集,分類不能過多,超過7±2個選項可選擇下拉篩選。

undefined

提升用戶體驗的一個小細節:默認用戶最關注的選項,而非全部,這樣可以縮短查詢路徑,同時給出條目,讓用戶清晰明了每個選項的數量,便於操作。 undefined

4. 組合檢索

在企業級中後台中,用戶查看的數據往往屬性較多且不唯一,通過簡單的檢索方式很難精確定位到目標數據,所以,在實際使用時,常會將大量非交叉關係的屬性進行羅列,搜索、篩選、標籤切換組合出現,形成多屬性組合檢索。這種檢索更適合於專家用戶,他們對於目標數據有明確的定位,知道可以通過哪些屬性精確定位到自己想要的數據。

4.1 展示方式

a.平鋪顯示

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

優點:大而全能最大限度避免檢索條件疏漏的可用性問題

缺點:易用性不高。大而全可能為用戶帶來繁雜的第一印象,都是重點等於沒有重點,增加用戶的決策時間。 undefined

b.折疊展示

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

4.2 總結思考

在設置組合檢索項時,應考慮每一項檢索甚至是多屬性組合檢索是否有必要。需從實際場景出發,根據用戶對各個檢索項的使用頻率及組合檢索項的數量,來決定組合檢索項是直接展示還是折疊展示;以及哪些屬性直接展示,哪些屬性折疊展示,為各檢索項安排合理的展示方式。

5. 案例-檢索區優化

產品現狀:前言中提過,我司業務涵蓋WMS、TMS、HRM,業務極其複雜,數據種類字段眾多,使用的檢索方式為組合篩選平鋪展示,一半以上的頁面篩選項超過了9個(不符合7±2原則),大而全的檢索方式一方面佔據首屏大部分空間,導致首屏屏效低;另一方面用戶在尋找具體篩選條件時,彷彿大海撈針,增加了用戶決策時間。因後台數據涉密,將下圖-招聘中可公開的頁面作為案例來可大家分享。

undefined


設計優化方向:


  • 業務目標-提升招聘人員的檢索效率;

  • 設計目標-縮短檢索路徑,減少檢索區佔用的屏幕空間,提高首屏屏效,將展示區域更多留給表格;

  • 設計策略-按照用戶場景檢索路徑、檢索頻次設計信息

🤔但還有2個關鍵問題:用戶場景有哪些?查詢路徑是什麼?哪些檢索頻次高?依據從何而來呢?通常有兩種方式:

  • 依據一:數據埋點,每個操作埋個PV(點擊量),一個月後再看每個操作的數據量;

  • 依據二:用戶調研,通過【問卷投放】或【用戶訪談】,深入理解用戶真實使用場景以及與業務之間的關係。

Step 1:用戶訪談

我採用的用研方式是用戶訪談,原因是由於招聘人員和我們產研人員在一個園區,調研方便,得出數據的時間比埋點短;而相比【問卷投放】,用戶訪談能細到具體某個字段在場景中的作用。訪談的過程因為篇幅原因就不在此具體講述,大家可根據自己的實際情況選擇適合的用研方式。

訪談中了解到,招聘人員的工作是發布崗位信息,快速招到合適的人。因此他們在該頁面的TOP場景就是對崗位上下架,即【新增】和【刪除】,而檢索的TOP場景有哪些呢?

1.對上架中的已招滿的崗位進行下架處理,完整的檢索路徑為崗位狀態>崗位名稱>項目

2.設置崗位佣金,因佣金會根據需求方要求及緊急程度動態變化,完整的檢索路徑為崗位名稱>佣金排序

3.匯報招聘進度,對於個別需求量大、急聘的項目,領導特別重視,經常需要導表。完整的檢索路徑為急聘>崗位名

undefined

通過場景得出高頻檢索為【崗位狀態】、【崗位名稱】、【急聘】,其他如【項目】和【城市】檢索條件只是當崗位名稱重複時來進行組合篩選,但該場景在我們業務中很少遇到,如【仙林店誠招配送員】,門店重合率很低。

Step 2:信息排序

訪談中我們已經得到了用戶對各個檢索項的使用頻率那信息排序的原則是:按使用頻率,用戶目標高於業務邏輯,而改版前並非是按照使用頻率排序的。再回到用戶場景,在匯報招聘進度時需要檢索的【急聘】並不在檢索項中,需要和產品經理反映這一點

Step 3:組織及隱藏

直接展示高頻檢索項【崗位狀態】、【崗位名稱】和【急聘】,其他低頻項折疊至高級篩選,【項目】、【城市】

【創建人】作為下拉篩選,查詢路徑較長,同時將字段組合放置在搜索選項中,採用帶標籤的搜索,因【崗位名】頻次遠高於其他字段,默認展示【崗位】

優化後如下圖所示:

undefined

三、數據查看-顯

數據查看區主要用於數據的顯,用於對比、瀏覽,而B端后台的表格中展示的數據往往多且雜,數據種類、字段眾多,10-20字段很普遍。這就需要我們在設計的時候先一步對數據進行梳理歸納,提高數據的易讀性。我在對我們後台表格進行優化時,會先通過四個維度來自檢,然後再有針對性的進行優化。

undefined


在講提升數據查看區的易讀性前,我們先來看看他的組成部分。

  • 表頭:說明數據的內容,可以包含篩選、排序等功能起到數據解釋作用,

  • 行和列:對本行/本列數據的描述,可以理解為是表格的骨架,是用戶快速掃描並接收表格佈局的關鍵要素

  • 單元格:表格的主體內容,承載用戶的每一條數據,也是整個表格的核心

undefined

1. 信息降噪

表格設計的本質是信息內容的有效傳達,就表格本身而言應該是隱型的,應該讓用戶注意力聚焦在核心內容上,多做減法。

1.1 內容降噪

a. 控制列數

基於對實際業務需求、目標用戶訴求及其行為的理解,列數盡量控制在7±2,列舉用戶更為關注的數據,用戶需要的非重點、輔助性信息可以在詳情中展示。 undefined

b. 自定義列

如果不同用戶想看到的信息側重不同,可以讓用戶自定義列的展示。在默認情況下僅展示最常用、最重要的幾個指標(如下圖)。這樣做的好處是,首先,用戶能在表格上方看到所有的指標名稱,避免了原來需要橫向拖拽才能瀏覽到所有指標的情況;其次,用戶可以根據自己的需要,自由的選擇顯示所需指標,隱藏不必要指標,減少干擾。但需注意系統應記住用戶上一次的自定義列設置,減少用戶重複操作。

undefined

c. 精簡表頭-少一字不可

表頭,概括每列的主要信息,在用戶使用表格中,起到數據解釋作用,讓數據能與之進行匹配,使用戶能夠看懂。表頭在能夠概括的情況下,盡量簡煉、準確,一般可根據上下文關係來進行減短簡化,以達到節省表格頭部空間和減輕視覺壓力的作用。

一個簡單的檢驗表頭是否精簡的方法是:少一個字不可,通俗易懂的說法就是字數再精簡用戶就不明白意思了。可以讓其他同事體驗產品,看有沒有一些名詞定義讓用戶產生誤解。

undefined

d. 定義專有名詞

對於比較複雜的表頭,可以定義一個專有名詞,鼠標hover上去對專業術語或用戶不常見的名詞給予該字段的詳細解釋,同時滿足新手、普通、專家用戶的需求。

undefined

e. 情況允許時,去掉表頭

如果表格數據可以自我解釋,表頭就不是必須的。如電子郵件的表格,就不需要列標籤,因為發件人和郵主題的區分度比較高。

1.2 視覺降噪

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

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

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

而豎向分割線的作用是即使縮減元素之間的距離也能區分不同元素,但如果使用了合適的對齊方式分,豎直分隔線就會很多餘的。即使要用,也要非常淡,不能妨礙快速瀏覽。

不使用斑馬線:數據量不大且易分辨的情況下,斑馬線在很多時候也是沒有必要的,因為它們是同一類數據,而且水平分割線就已經能夠明顯區隔。

undefined

b. 分割線樣式輕盈

分割線的樣式盡量輕盈,無關的邊框不要搶視覺,數據才是主體,突出內容。

undefined

c. 減少圖形元素的使用

去掉不必要的裝飾和顏色,如icon、標籤等,雖然能夠幫助組織數據、更直觀的傳達信息,但物極必反,少即是多,要注意克制這些元素的使用。標籤能用線性就不用面性,做到輕盈,否則表格中最重的就是標籤。

undefined

d. 字體降噪-統一

在產品的品牌設計中,字體是規範中的重要一環。然而在設計表格時,簡約至上才是關鍵,盡量避免任何裝飾性字體。雖然文本不能夠建議你具體使用哪種字體,但數字建議使用Helvetica Neue、Helvetica等其他等寬字體,文本最好不要出現以下情況

不要出現襯線字體:因為個性會產生閱讀噪音,不利於用戶對數據的理解和思考。

不要出現全大寫字體:因為它很難讀,需要轉化思維。

不要出現使用斜體:易引起視線疲勞,影響閱讀。

不要出現多種字體:保持風格統一。

undefined

2. 呼吸適中

2.1 合適的單元格高度

在開發同學的眼中,單元格高度=內容高度+上間距+下間距,在實現設計稿時,通常也是按照這個方式來寫的,而不是像設計同學一樣按照文字的尺寸來計算間距。其中,文字行高建議設為字號的1.5倍,上下間距設為字號的1.2倍。

undefined

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

2.2 合適的列間距

合適的填充和邊距對於視覺設計至關重要,以保證易讀性。定義列的間距時,我通常的做法是N1保持不變,將N2定義一個最小值,N2再根據表格的寬度自適應變化。表格主要適配到這個最小寬度,這一步驟通常的設計系統的初期就要完成,一方面可根據自己項目目前情況,按照導航寬度等固定尺寸確定最小的表格寬度,這樣在處理最小尺寸時,可以有一個明確的邊界,同時能與開發同學進行理解溝通。當表格寬度大於頁面寬度,固定首尾列,左右滑動。

undefined

3. 高效易讀

3.1 合適的對齊


合適的對齊方式能夠提升數據的瀏覽效率。表格內信息的縱向列對齊(符合格式塔心理學中相近原則)能夠很好的形成視覺引導線。通過對齊,會讓表格更加規範易理解,給用戶視覺上的統一感,視線流動更順暢,讓用戶快速的捕捉到所需內容。

  • 文本左對齊:更高效的閱讀瀏覽順序,包括非比較型和固定長度的數字,如日期2020-12-04(補0是數字書寫規範)、編號1948696等;

  • 數值右對齊:金額、長度、高度等,數字是從右往左讀的,通過數值位數的長短即可對比數值的量級和大小,方便數值的比對。這是因為在對比數字時,首先看個位,然後十位、百位等;

  • 最後一列右對齊:通常是操作,即使沒有縱向分割線也能很好的起到分隔的作用,視覺上看表格是一個方方正正的格子,比較整齊;

undefined

3.2 不留空白格

當表格單元格中沒有相應數據時,要避免直接留出空白單元格。空白格容易造成用戶的困惑甚至誤解,用戶會搞不清楚到底是沒有數據,還是根本沒有值?正確做法是,數據不存在(數據庫中沒有該字段)用“-”,沒有數量(數據庫中有該字段)用“0” ,且小數點後位數、單位,都要與上下單元格保持一致。

undefined

3.3 合適的翻頁器

在Web端,數據量動輒上萬條,容易出現瀏覽器響應太慢或者瀏覽器內存溢出的情況。使用分頁器有哪些優點呢?

  • 分頁可以緩解服務器的加載壓力,每翻一頁加載該頁的頁面縮減單次加載的數據量來縮短等待加載的時間,從而達到少量多次的高效體驗。這就是為什麼哪怕是移動時代了,很多表格還是使用分頁組件。

  • 分頁可以跳躍查看數據,靈活性更高、步驟更短

表格設計大原則是整張表不要超過一屏,每一頁的默認行數:10行以上,減少翻頁的次數。但考慮到每個用戶的使用習慣,在給出默認行的數量後,可以讓用戶自定義每頁的顯示的數量,相比於跨屏翻頁而言,向下滾屏會更便利。

當表格數據無數據時,翻頁控制按鈕不可見。

undefined

3.4 收起低頻操作

我在接手我們後台產品之初,在對業務人員進行角色調研時就收到反饋到有些頁面非常難用,有些就很好用。為什麼會出現這樣的情況呢?如下圖所示,被投訴的表格單操作項就有6個,一方面容易誤操作,另一方面左側的數據展示內容有限,易讀性很差。

對於單條數據操作頻繁的場景,我的方法是,當超過三個操作項時,將操作低頻折疊收起。這樣做的優點是界面簡潔明快,信息密度低,可以幫助頁面突出更加重要的信息,減輕空間壓力,減少干擾。

undefined

3.5 內容防重複

工作中常常會遇到單元格數據過多的情況,常見的方法有兩種:

  1. 定義一個單元格長度或字數限制,超過該範圍以"..."顯示,鼠標懸停時出現氣泡顯示完整內容。

  2. 多行顯示,這種方法讓平鋪直敘,讓用戶可以直接了當的看到所有信息,在B端使用層面上還是不錯的,但是超出三行就會擠占行高度,建議不要超過兩行,超出可“...”顯示。

🤔數據過多時,單元格長度如何定義?超過哪個範圍“...”顯示呢?

定義長度的依據:根據業務字段,防重複保證用戶在掃視的時候,對重要字段能快速區分、對比。
undefined

3.6 默認行排序

新增一條數據後,這條數據應該被放在表格的哪裡呢?這是個和表格默認排序有關的問題。

表格數據應該默認按添加的時間排序,還是應該按某個字段的名稱排序?

如果我們默認按某個字段排序,比方說崗位列表裡增加一條“廣深常溫B2C 叉車員”的字段,而首字母G的數據在表格中極大概率不靠前。這時就會出現一個問題,用戶要在茫茫數據中找到剛增加的那一條數據,或者用戶根本不知道自己增加的數據已經被插入在了表格里了,這會讓他們覺得自己的操作失敗了。

解決這個問題的一個方法就是按照數據添加時間排序,默認最新創建的在最上面,體驗上創建完反饋,馬上就出現了變化,且針對最新數據的操作頻率較高,方便用戶發現與查找。同時也可以用帶排序的表頭,讓用戶自定義排序。 undefined

4. 詳情查看

前面內容降噪有講到盡量控制列數在7±2,非重點內容通過更深的入口查看,關於詳情查看可以分為跳轉和點擊詳情。

跳轉:把ID、名稱等唯一性標誌的字段加上超鏈接,直接顯示鏈接色或者開始不顯示,鼠標hover上去才顯示鏈接色,點擊可以查看該條記錄的詳情。

詳情:在操作列中增加“詳情”功能,點擊查看詳情。

undefined

關於表格詳情查看的展現形式,按可承載的信息量由少到多依次分為折疊展開、彈窗、抽屜、及新增頁面四種類型。

4.1 折疊展開

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

適用場景:信息量較少的情況


4.2 彈窗

彈窗是一種中斷用戶當前操作並對其進行補充、或者對當前操作進行強制反饋的交互形式,需要用戶進行強交互,它可以保留用戶當前進程的情況下,指引用戶完成一個特定的操作。主要分為模態彈窗與非模態彈窗兩種形式:

a. 非模態彈窗

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

b. 模態彈窗

位於瀏覽器的主頁面核心區域,需要用戶對它做出相應交互,彈窗才會消失。

優勢:通過全局的半透明黑色能夠讓用戶更加聚焦,集中精力去處理好當前事情,能夠通過透明度展示背景,讓用戶了解到自己並沒有離開當前頁面

劣勢:打擾用戶,感到強烈的中斷的感受

undefined

適用場景:數據詳情體量不大,頁面內容較輕時。同時,不需要參照上級頁面內容,有快速回退的訴求。

4.3 抽屜

側滑抽屜相比彈窗減少了頁面層級和隔離感,有較強的連貫性,適合與原頁面具有連貫結構的內容的展示。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息,這讓用戶能夠解析大型數據集,而且在涉及到多個項目時不會丟失位置。可自定義上下左右四個方向,一般右側滑出最為常見。

undefined

適用場景:詳情頁的內容較多時,且有快速切換主體的訴求。

4.4 新增頁面

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

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

undefined

適用場景:當詳情頁承載內容過多且裡面的操作相對複雜時。


四、數據操作-增刪改

數據操作主要是針對錶格數據的增、刪、改,從控制範圍可分為:單行操作、批量操作、全局操作。


1.單行操作

單行操作也稱行內操作,常見的顯性與隱性兩種方式。顯性操作,操作項顯示在行內,直觀明了;隱性操作,鼠標懸停時才顯示操作項,界面簡潔,留更多的空間給需要查看的數據內容,減輕空間壓力,減少干擾

顯性操作,文字按鈕操作項一般不多於三個,圖標按鈕不多於四個時,操作項跟在行條目後面;當超過時,建議將相對低頻操作選項折疊收起,點擊"更多"或“...”下拉顯示。操作按鈕致灰時,鼠標選中可顯示原因。
undefined

隱性操作,如果行操作不那麼重要,或者說行操作過於囉嗦影響用戶閱讀時,可將所有的操作進行隱藏,當用戶鼠標懸停時進行展開所有操作。這種方式能最大程度上滿足用戶快速查看與編輯的需求,但是在實際使用中,用戶的初次使用門檻較高,需要有一定的學習成本。

undefined

2. 批量操作

適用於數據量較大的表格,通常把操作放在表外部上方,這樣操作更便捷,同時便於批處理和單個操作。批處理操作模式允許用戶對一行或多行對象執行操作,通常與復選框操作配合使用,並在選中復選框後激活表上方操作按鈕,如刪除、批准、拒絕、複製之類的操作,這將節省用戶時間,避免重複對多行進行相同操作。

3. 全局操作

統攬全局,無需選擇數據內容即可進行的操作,常見的【新增】、【導入】操作。

🤔三種操作:兩個在表格外,一個在表格內,那麼很自然的我們會遇到一個問題,一個功能該放在哪呢?下面我通過一個案例來說明。

4. 案例-數據操作優化

產品現狀:在HRM系統中,不同的權限使每行的數據擁有不同的操作項,而且這些操作因為視覺特徵比較顯眼,容易分散用戶的注意力,且因表格空間有限,操作區的各操作項過於接近,誤操作率相對較高。

undefined

設計優化方向:


  • 業務目標-提升數據操作效率;

  • 設計目標-降低誤操作率,讓用戶聚焦內容;

  • 設計策略-控制操作項的顯示數量,將操作項分類

Step 1:分析操作控制範圍


習慣上我們會認為一行數據是對某一個對象實例的描述,比如在上圖表格中,一行數據是對某個待入職員工的描述,包括他的姓名、工號、在職狀態等等。所以表格內的操作也是針對這個對象的。

一般我會把一次只能針對一個對像操作的功能放在表格內,比如【詳情】和【編輯】,因為查看詳情不太可能一次查看多個對象,編輯修改信息也是。那麼反過來,不屬於任何一個對象實例的功能就需要放在表格外的操作欄,比如說【新增】。另外一種需要放在表格外的功能是批量操作,因為批量操作需要對多行數據進行同時操作,也不是屬於單個對象實例的。以此為依據將圖中操作分類如下:

undefined

大家應該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內操作,也可以作為批量操作的問題。作為行內操作,優點是更便捷,;表外作為是批量操作,這樣更方便的同時操作多個數據,但如果只是操作單個數據時就會增加用戶的操作步驟。或者兩種方式都提供,雖然更靈活但是會讓頁面比較冗餘。

其實怎麼選擇還是要根據具體業務場景來決定,首先判斷這倆操作是不是高頻功能。在我們的業務功能中,已入職和離職的員工在該頁面不能操作刪除,且【刪除】是相對低頻地,完全可以只提供單個刪除功能。 【入職生效】作為高頻功能,與產品經理討論後提供行內操作和批量操作,選擇這個方案的原因是,該功能作為行內操作已上線運營了1年時間,移除會產生學習成本。

Step 2:判斷擺放位置

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

方案一:和全局操作一起置於表左上方或右上方

因批量操作需要勾選左邊複選框,放置在表右上方不符合操作動效,本著效率至上的原則,此處不考慮放在右上方。

優點:操作項信息前置能清楚的知道有哪些功能,無需用戶記憶

缺點:但當批量操作較多時,會擠占頁面空間,導致操作按鈕很多,不易查找

undefined



方案二:默認不顯示,勾選激活後顯示於表左上方

優點:減少了相應的視覺噪音,業務拓展性強

缺點:有一定的學習成本,沒有勾選時不知道有該操作項
undefined



方案三:直接顯示於表左下方,但需勾選激活後操作

優點:上內容下操作,符合操作動線

缺點:和分頁放置一起不易於業務拓展

undefined

根據我司業務,綜合考慮後選擇方案三,放置於表的左下方。

Step 3:優化信息層級

單行操作根據操作頻率優先級為入職生效>詳情>刪除>編輯,其中編輯和刪除屬於低頻操作,可折疊隱藏。批量操作-導出也是低頻操作。最後定稿方案如下:

undefined

結語

2B產品應該著眼於業務,本文是根據我司業務提供了一個表格設計基本指南,在具體項目中,你可能需要根據產品特性和用戶需求進行調整。但是表格設計的原則應該是通用的:

  • 從用戶閱讀表格的目標出發設計表格的內容和佈局

  • 從提高用戶閱讀速度的功能角度出發進行表格的視覺設計,避免過度設計

  • 當表格指標、數據過多時,提供一些自定義的工具幫助用戶自助選擇出最需要的數據條目

本文到這就結束啦!如果你還有什麼好的想法和建議,可以在評論裡留言討論。

本文由@小鹿原創首發於站酷。未經許可,禁止轉載

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。