表格作為組織整理數據的手段，可以有效的向用戶展示數據信息，是B端產品中出現最高頻的模塊之一。
下圖為典型的B端表格示例：
用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化（關聯和區別）。好的表格信息展示設計，應當是能夠輔助用戶高效便捷的實現以上場景中的訴求。
今天我們就來討論表格設計中一個重要的問題——【應該如何考慮表格信息展示】。首先拋出結論，我們認為良好呈現信息的表格應當做到疏密適度、高效掃視、精簡克制。
1
一、疏密適度
常見的表格信息包含文本、標簽、狀態樣式、數值統計圖表、關鍵信息Icon等。表格單元格是信息填充的基本單元，行高和列寬的定義決定了表格信息的疏密程度，進而決定了表格給用戶的直觀感受，因而下面分別從行高和列寬兩個方向來探討表格信息展示如何疏密適度。
1
1、定義合理的表格行高
a、行高模數設定
在具體設定表格行高時，由于表格中以文字信息為主，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設定為字號的1.2~1.8倍，文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫代碼時的習慣（多行行高同理去設定）。
根據用戶場景的不同，來選擇模數倍數，需保證系統內使用統一的模數。比如，針對用戶快速瀏覽獲取大量數據場景時，可以選擇1.2倍作為模數，列表更為緊湊，同樣掃視范圍內，可獲取更多信息。
b、為小屏幕考慮一屏顯示的行數
表格行高決定屏幕內能呈現的行數，即用戶在一屏內能獲取信息的數量，主要影響用戶縱向對比數據的效率。對于1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數的感知不強，但對于1366×768、1280*720等這類小屏，顯示行數有限，用戶進行縱向數據對比的效率就會有所降低。在設計前，應當充分了解目標用戶的行為訴求，了解目標用戶設備屏幕分辨率的占比分布情況，有針對性的設置行高。
c、用戶自定義行高的場景
B端產品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。比如個人視力的原因，有些用戶喜歡表格行高值大一些，看起來舒適透氣，便于閱讀。而有些平臺用戶由于很熟悉線下excel表格模式，希望線上的表格也盡可能像excel那樣緊湊，以便他們在一屏內看到更多的數據，進行對比，提升工作效率。產品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設置開放給用戶，建議不是完全開放給用戶去調整尺寸，而是給出一定階梯度的快速選項，例如舒適、標準、緊湊三種高度來滿足用戶需求。
例如，Gmail提供默認/標準/緊湊三種表格密度設置，如圖：
1
2、靈活擴展的橫向空間
通過對表格固定位置與列寬的調整，擴大表格數據空間，使信息不局促，空間更透氣，保證橫向掃視易讀性。
a、列寬極限值設定
設計師需要根據表格承載內容定義表格的列寬，應包含最大/最小/默認列寬的定義以及使用規則。
我推薦的一個規則是：
規則1：當相對列少【瀏覽器寬度-頁面其他模塊 > 全部列的默認寬度和】，則各個列自動等比拉伸，撐滿屏幕；
規則2：當相對列多【瀏覽器寬度-頁面其他模塊 < 全部列的默認寬度和】，則出橫向滾動條，每列寬度為默認寬。
另外需注意最小值設定時應避免信息展示出現【對聯式表格】。對聯式表格最大的問題在于，一屏內展示的行數有限，當用戶縱向對比數據時，需往復滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預覽，而是不停上下左右切換，使用體驗不佳。
b、橫向『偷取』屏幕外空間、行高模數設定
當壓縮列寬也無法在有限空間內展示大量的數據指標列時，我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進行瀏覽，有一定操作成本，所以要結合業務實際情況選用是否利用屏幕外橫向空間。
隨著行和列的增加，用戶的瞬時記憶會達到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內的數據，防止遺忘某列數據的意義。因而當表格數據列較多橫向滾動時，建議為用戶固定重要信息列，如標題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的，建議固定列顯示在表格左側，方便用戶從左至右瀏覽數據、從上至下對比數據時能夠清晰定位當前所瀏覽數據的主體是什么，同時可根據需要快速發起操作。
同理，用戶拖拽縱向滾動條來閱讀數據時，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數據的意義。
c、用戶自定義展示信息
針對需展示大量數據的情景，我們除了【偷取】屏幕外空間外，可以根據B端產品提供的數據表格是覆蓋全部用戶角色的全量數據的特點，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據需要選擇展示的數據列，系統將在用戶完成選擇后，主動幫用戶保存自定義內容，下次登錄后，表格依然按照用戶定義的數據來展示。
1
二、高效掃視
無論是在表格中要明確的定位數據，還是順序閱讀，高效掃視都是B端用戶一個很重要的訴求，我們在設計表格時可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。
1
1、合理的對齊方式
數據信息本身包含多種格式，可遵守一個基本原則即文字左對齊，符合從左到右的閱讀習慣；數據信息右對齊，方便數據大小的直觀對比。
具體對齊方式可參考我們建議的方式：
文本字段：可點擊字段、普通文本類、數字、字母等，長短參差不齊，左對齊；
格式化字段：日期、時間、部分枚舉類等，字符數一致且較短的，左對齊。
數據字段：金額、數據、百分比。帶小數點等數據，方便對比為主，右對齊。
1
2、去除視覺雜音，強調對比關系
a、正確使用分割線，實現對表格行與列的強調
橫向分割線可強調行內信息的連續性。垂直分割線在縮減元素之間的距離后也能區分不同元素，更好的強調縱向數據對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。
1
b、斑馬線作用有限
斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數據（如總和、平均值）使用不同底色來區分，可以更突出強調該數據。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。
對同一類數據而言，分割線就已經能夠明顯區隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態，強化橫向導視，避免出現列數過多引起數據錯行的問題。
1
3、突顯重要內容的視覺重量
前面我們提到表格呈現的數據信息除文本外，還有其它一些可視化數據。可視化一方面提升了列表視覺表現力，增加差異化，另一方面讓內容更加突出，提升閱讀效率。例如：數據列中數據異常時，最好可以醒目的形式突顯，讓用戶一進入頁面就能快速注意到異常狀況。
1
三、精簡克制
體驗好的表格一定是克制的，克制應表現在信息的適度隱藏以及內容折行與截斷展示原則。
1、適度隱藏信息
a、隱藏低頻操作
當表頭需要承載排序、表頭篩選、提示等功能時，不建議一股腦的將所有功能展示出來。用戶對表頭的訴求是定位數據指標﹥執行操作的，因此可根據具體業務定義展示哪些操作，將其它操作隱藏，有需求時用戶主動觸發再展示。比如，百度搜索推廣平臺的推廣管理頁面提供了全局篩選，所以表頭篩選對于用戶而言是相對低頻的操作，我們選擇隱藏表頭篩選的圖標，當用戶鼠標HOVER表頭單元格時再展示。
對于表格行內的操作我們也應當進行優先級排序，為用戶專門設置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關數據單元格中，用戶有訴求時hover對應單元格即可快速發起操作。
b、隱藏輔助信息
表格中的有些數據指標是綜合緯度的，當用戶關注點定位于該指標時，需要通過細分數據來理解、分析。指標的細分緯度信息雖能起到輔助用戶更好理解數據指標的作用，但如果全部拿出來在表格列展示，會讓表格變得臃腫不易讀，此時可以考慮采取一定設計手段去隱藏這些信息，把觸發展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關鍵詞列表中，質量度指標是由多條數據共同決定的，我們采用了將細分指標聚合在氣泡卡片中，當用戶HOVER質量度得分數據時展示出來。
1
再比如，有父子層級關系的數據，可以通過父子折疊表格將子信息默認隱藏，用戶根據需要，去展開查看詳細的子信息。
2、設定折行與截斷規則
B 端業務的數據信息復雜多樣，信息內容的長度高度是多樣不可控的，很多內容會超出我們限定的最大列寬，最大列高，我們應當給出折行與截斷原則去約束內容的展示，而非總是為具體情況而做特殊設計，破壞體驗的一致性。
截斷折行原則設定時要細分，不能簡單粗暴的一刀切，比如一行截斷這種，如日期、時間等固定格式內容，拖動列寬后文字應折行而非截斷展示，避免影響用戶誤讀。再比如很多業務實體標題字段是格式化的，即標題前面部分可能都是一致的，這時候如果簡單的截斷，用戶就需要逐一Hover才能找到定位到要找的數據。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自適應截斷，根據具體業務情景選擇。
1
總結
我們今天集中討論了應該如何考慮表格信息展示，并總結了如何做好表格信息展示，即遵守【 疏密適度】、【高效掃視】、【精簡克制】三原則，并結合業務特點以及目標用戶場景，設計高效易讀的表格。
最后，感謝你花費寶貴時間閱讀這篇文章，希望可以給你帶來一些啟發。我們非常期待我們的思考和一些小經驗能夠幫助你去設計滿足你的業務場景的表格，也可以通過這些方法和步驟，創造屬于你們團隊自己的設計資產。
感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。
也歡迎加入MEUX,視覺/交互/用研
可投簡歷至MEUX@BAIDU.COM
(注明信息獲取來源如：公眾號）
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
