国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

B端領域中簡單粗暴的產品設計時代已經過去，產品如何提高體驗、效率擺在了所有設計者的臺面。那么，一個優(yōu)秀的表格具備什么特征呢？本文作者對此進行了分析，一起來看一下吧。

B端領域中簡單粗暴的產品設計時代已經過去。產品如何提高體驗、效率擺在了所有設計者的臺面。

存量競爭的時代里，我們應該思考如何讓客戶/用戶“既吃得飽，又吃得好”。因此，作者想通過本文，詳細跟大家分享表格在B端系統(tǒng)中的設計實例與思考。

一、認識表格

表格，一種常見的信息組織整理手段。常用于信息展示、歸納、分析等活動。

1. 表格的組成

表格是被公認的展示結構化數(shù)據，最清晰、最高效的形式。

表格頁由按鈕、搜索、篩選、視圖、單元格、分頁等元素構成。

2. 表格的樣式

如何有效地傳達信息內容，是表格設計的核心。

需要明確的是，表格本身應該是隱性的，如何讓用戶注意力集中在核心內容上才是表格設計的重點。

常見3種表格樣式：

1）網格型

特征：表格有均勻而明顯的分割線，邊框單元格比較明顯，類似于Excel。

優(yōu)點：

• 適合展示大量的數(shù)據，能夠清晰地呈現(xiàn)數(shù)據的結構和關系。
• 可以展示復雜的數(shù)據關系，如多層次的數(shù)據結構。
• 可以清晰地表達時間的先后順序，適合展示具有時間序列的數(shù)據。

缺點：

• 網格線會增加表格的復雜度，使得表格顯得更加擁擠，不易于閱讀和理解。
• 如果數(shù)據量較少，使用網格型的表格會顯得過于復雜，不必要地增加了閱讀的難度。
• 如果表格中存在大量的空白單元格，使用網格型的表格會顯得浪費空間。

2）水平線型

特征：僅對行進行分割，通過空白間距與對齊的方式對列進行分割。

優(yōu)點：

• 適合展示相對較少的數(shù)據，易于閱讀和理解。
• 易于比較同一行內的數(shù)據，方便找出數(shù)據的規(guī)律和趨勢。

缺點：

• 不適用于展示復雜的數(shù)據關系，如多層次的數(shù)據結構列與列之間的邏輯與對比）。
• 不適用于展示具有時間序列的數(shù)據，因為這種表格無法清晰地表達時間的先后順序。

3）斑馬條紋型

特征：使用不同低飽和度顏色并隔行交替來區(qū)分數(shù)據。

優(yōu)點：

• 能夠使表格的數(shù)據更加清晰明了，易于閱讀和理解。
• 能夠減少閱讀時的視覺疲勞，提高閱讀效率。
• 能夠突出表格的結構和層次，使得數(shù)據的關系更加明顯。

缺點：

• 不適合展示大量的數(shù)據，其背景色或者文本顏色的變化會增加表格的復雜度。
• 不適合展示復雜的數(shù)據關系，如多層次的數(shù)據結構。
• 不適合展示具有時間序列的數(shù)據，因為這種表格形式無法清晰地表達時間的先后順序。

二、優(yōu)秀表格具備的特征

1. 設計目標

2. 設計案例

1）自定義篩選與列信息

數(shù)據表格，本身信息繁多，且需要滿足不同行業(yè)不同角色的需求。

結合上述場景與席克定律，米勒法則，可提供通用字段指標的同時，為用戶提供自定義字段指標的功能；

讓表格與篩選具備彈性化的特征，以此滿足個性化訴求，滿足不同角色不同維度的篩選、統(tǒng)計、核對需求。

交互小知識：

2）固定表頭

當閱讀豐富且繁多的表格時，由于屏幕有限，用戶不得不拖動橫向或縱向滾動條來閱讀信息。

結合場景與菲茨定律，將表頭固定，能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。

交互小知識：

3）精煉表頭與聚合同類項

① 精煉表頭

表頭標題在能夠概括的情況下，盡量簡練、準確。

可根據上下文關系來進行減短簡化，以達到節(jié)省表格頭部空間和減輕視覺壓力的作用。

② 聚合同類項

可根據表格內容的關系和業(yè)務含義，將表格內容進行歸納、分組，并將分組好的信息進行合并排列展示。

聚合同類項的目的是為了提高用戶對表格內容的閱讀效率。

信息較多且信息間存在邏輯關聯(lián)時，可考慮使用此方式展示信息。

當然合并同類項會使行高變高，使得一屏展示的行信息變少，需根據場景慎重使用。

4）行與列的平衡與克制

根據目的及信息主體的不同，通過行與列的顯隱變化，來更好地傳達信息。定向地降低視覺噪音，提高信息的可讀性。

通過隱藏表格中縱向的線，強調“行”的特性，使橫向信息更加連續(xù)通暢，便于橫向閱讀、對比。

展示縱向的線，增加了“上下行”之間的信息的對比性。

5）排序

讓無序信息內容進行有序排列，排序分為升序和降序，一般用在數(shù)據、時間、數(shù)量上。

表頭排序在多個情況下，排序之間均為互斥，只執(zhí)行一個命令。

6）內聯(lián)操作

允許用戶在表格中直接修改數(shù)據，而無需到單獨的編輯頁面。

7）水平滾動，固定關鍵數(shù)據列

表格呈現(xiàn)大量信息時，水平滾動是不可避免的。

結合米勒、菲茨等原則：

• 將“關鍵列”固定在表格左右側，通過滾動查看更多數(shù)據。
• “列”的數(shù)量控制在5-9列。

8）自定義調整列寬

結合奧卡姆剃刀原理，將核心信息展示在列表的同時，根據信息的常規(guī)寬度設置默認每列寬。

允許調整列的寬度來查看更加完整的縮略數(shù)據。

或者，被截斷的數(shù)據，默認支持鼠標懸停時 tips 顯示完整數(shù)據。

9）信息對齊

結合格式塔原理之一的對稱性原則，將表格內的信息通過對齊，會更加規(guī)范容易理解。

對稱，給用戶視覺上的統(tǒng)一感，同時視線流動順暢，能夠讓人快速地捕捉到所要的內容。

10）減少計算，為用戶多做一步

表格中的數(shù)據若有計算與核對的訴求，可提供數(shù)據提供歷史數(shù)據對比、差值、總計等處理性的結果，以此減少用戶心算或者線下處理的麻煩。

11）表格信息減少視覺噪音

信息內容的有效傳達是表格的服務本質，就表格本身而言應該是隱性的，減少用戶注意力，在保證整體結構的基礎上，盡量減少或削弱所謂的視覺裝飾。

12）空白數(shù)據，使用“-”填充

表格中出現(xiàn)空數(shù)據或無數(shù)據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎？

明智的做法，是用“-”來填充。

13）突出視覺層級

結合防錯原則，當鼠標指針懸停在表格列或行時，給予變化提示。

特別在信息列數(shù)較多的情況下更為重要，能夠讓人捕捉到所在的位置，從而降低人的心理壓力或增加掌控感。

14）圖形語言表達操作含義

使用直觀、簡單的圖形描述“操作”的功能含義，更可讀、更節(jié)省空間。

15）全選與批量操作

若表格是分頁，在某些情況下全選則需要考慮分為單頁全選和整表全選，瀑布流式的加載則就不需要做區(qū)分了。

16）固定分頁

結合菲茨定律，將分頁固定，省去了用戶需要翻到頂部或底部進行操作的麻煩。

17）右側抽屜，展示詳情

點擊文字鏈接，右側彈出抽屜樣式彈窗，顯示詳細信息。

彈窗不宜承接展示過多的信息，

詳情頁不方便用戶連續(xù)性的查看詳情，操作更為復雜，

抽屜樣式的詳情既能承接大量數(shù)據集，又使得用戶感官更為輕松(并未跳脫出主體頁面)。

三、寫在最后

優(yōu)秀的表格設計，都是圍繞“如何提高用戶閱讀、操作效率”這一目標，來設計。站在用戶的視角，去設計功能、服務，才是優(yōu)秀的表格設計。

最后，文中所用到的交互設計原則引用自我的另一篇文章《產品術與道：交互設計7定律的分析應用》，歡迎大家查閱與斧正。