2015-3-1 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)設(shè)計( www.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
原文地址：http://ecd.tencent.com/tips-of-data-table-design.htm 作者：DLIN
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍(lán)藍(lán)覺得在界面設(shè)計中，優(yōu)秀的表格設(shè)計技巧是非常基礎(chǔ)，也非常重要的。所以從網(wǎng)上搜集轉(zhuǎn)載了此主題的一些文章，來學(xué)習(xí)～～這是第三篇！感謝原作者。
DLIN：由于工作原因，經(jīng)常接觸到表格。我們發(fā)現(xiàn)，表格不但廣泛的運用在各類數(shù)據(jù)收集和分析，同時通過表格這樣一種二維矩陣來整理和陳列信息時（即便最后的展示方式并非一個典型的表格樣式），能夠很好的表達(dá)信息之間的邏輯關(guān)系，易于幫助理解橫縱信息之間的關(guān)系。
在實際的網(wǎng)頁設(shè)計應(yīng)用中，表格橫縱相互獨立又相互關(guān)聯(lián)的模式尤其適用于：
1.組織和展示大量的信息
表格簡單的結(jié)構(gòu)不但能包含大量的信息，且同時保證信息的可讀性,便于讀者快速掃描信息、從大量的條目中找到所需的信息。
2.展示對比性信息
通過合理的布局，表格能清晰的展示出同類對比信息，便于讀者分辨不同條目信息之間的關(guān)聯(lián)和區(qū)別，從而關(guān)注到關(guān)鍵、問題條目。
總的來說，一個構(gòu)造清晰的表格布局，將大大提升讀者對信息的接收速度和理解程度
例如下圖中蘋果官網(wǎng)對不同型號mac book的信息陳列方式，就采用了表格的結(jié)構(gòu)，清晰的展示了4款不同的macbook，及各自的性能、售價等屬性，同時讀者第一眼就可以掃描到并理解表格 結(jié)構(gòu)，橫向是4款macbook的排列，縱向分別列出了各自的屬性，然后進一步就可以根據(jù)自己的興趣點就4款macbook的不同屬性進行對比，信息完整 且便于掃描。
如上所述，表格常用來展示大量的、對比性的信息，因此提高表格的可讀性、便于用戶快速掃描，是表格設(shè)計的關(guān)鍵。本文僅就筆者閱讀過的幾篇關(guān)于表格設(shè)計的文章結(jié)合工作中的一些拙見，整理成文，分享如下。
研究如何提高表格可讀性之前，我們先簡要闡述下表格的組成要素，這里我們暫且這么總結(jié)：表格 = 標(biāo)題 + 表頭 + 行標(biāo)簽 + 單元格數(shù)據(jù)（信息），如下圖
表格標(biāo)題是對表格整體的描述，應(yīng)包含表格數(shù)據(jù)的來源及屬性，使讀者對表格內(nèi)容有所認(rèn)識，例如數(shù)據(jù)收集的日期、地區(qū)及其表格數(shù)據(jù)的其他屬性。
行標(biāo)簽和列標(biāo)簽（表頭） 是對本行/本列數(shù)據(jù)的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關(guān)鍵要素。
單元格數(shù)據(jù)（單元格信息）這里就不在多說，是表格的主體內(nèi)容。
1. 根據(jù)表格的用途，設(shè)計表格的布局
如下圖，兩張表格中所包含的數(shù)據(jù)完全相同，是關(guān)于10座山峰的高度和人類登頂年份數(shù)據(jù)。不同的是他們的成列方式：表1a根據(jù)山峰的高度排序陳列，而 表1b則根據(jù)人類登頂山峰的年份排序陳列，一眼之下，這兩張表無設(shè)計優(yōu)劣高下之分，決定使用兩站表中的哪一張的根據(jù)是這組數(shù)據(jù)的用途，如果這張表是用于向 讀者展示世界上的TOP 10山峰，則山峰的高度則是重點信息，a表的展示方式會更加合適；反之，如果這張表意在展示10大高峰中，哪座山峰是人類登頂?shù)模祟愊群蟮琼數(shù)臅r間 順序是讀者的主要興趣點，則表b就更加適用。
2. 減少讀者計算
其實類似上一點，表格的指標(biāo)也不是永遠(yuǎn)固定的，而是從讀者閱讀表格的目的出發(fā)，調(diào)整所需展示的指標(biāo)。在原始數(shù)據(jù)的基礎(chǔ)上給出差值、總計等分析性的數(shù) 據(jù)，可以直達(dá)用戶閱讀的目標(biāo)，而盡量減少用戶心算或者線下處理的過程。例如下圖展示了2010年與2009年兩年的公司財政報表，查看兩年的具體數(shù)據(jù)當(dāng)然 必要，但深入分析，讀者之所以要并列查看兩年的數(shù)據(jù)，目的在于對比兩年的數(shù)據(jù)變化，因此將指標(biāo)變化情況列出能幫助用戶更快的達(dá)成目標(biāo)。
3.精簡指標(biāo)，創(chuàng)造信息層級
盡量減少或壓縮指標(biāo)數(shù)量，避免出現(xiàn)用戶不需要的數(shù)據(jù)，默認(rèn)只展示用戶所必須的信息，用戶需要的非重點輔助信息可以通過提供深入細(xì)節(jié)的入口（彈窗、下 拉）等形式來解決，僅在用戶需要時進行提供。創(chuàng)造信息層級，避免無主次的鋪出所有信息，干擾用戶快速掃描定位目標(biāo)條目。例如易迅的”我的訂單”列表中，就 將用戶的信息、訂單狀態(tài)跟蹤信息進行了默認(rèn)隱藏，同時通過鏈接色很好的提示了進一步細(xì)節(jié)信息的入口，在用戶需要時，可以方便的查閱。
4.不留空白單元格
當(dāng)表格單元格中沒有相應(yīng)數(shù)據(jù)時，要避免直接留出空白單元格。空白單元格容易造成讀者的困惑甚至誤解，讀者會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？正確做法，沒有數(shù)據(jù)的顯示0，給沒有值的單元格劃線或者打叉。如下圖：
5.斑馬條的運用
橫向或縱向的斑馬線以及懸停高亮底色能夠很好的引導(dǎo)用戶的視線，避免在閱讀時出現(xiàn)錯行、迷失的情況：斑馬線會使得行與行的界限更為分明，尤其對數(shù)據(jù)列較多時的橫向引導(dǎo)得到加強，這樣看行內(nèi)的內(nèi)容時不容易錯行，而懸停變色行主要是配合操作交互，明確區(qū)分出光標(biāo)所在的行。
6.高亮重點信息，提高閱讀速度
通過合理的使用icon、背景色等視覺元素高亮重點信息，能夠提高用戶的閱讀速度，幫助讀者更快定位重點信息，例如下表中利用紅綠的上下箭頭很好的向用戶表達(dá)了年度財務(wù)的變化情況。
7.對齊，便于用戶快速瀏覽
對比的數(shù)據(jù)如果有了明確的對齊方式，會大大提升數(shù)據(jù)的瀏覽效率，增加對比的效果。通常，我們將數(shù)據(jù)右對齊，便于對比：通過數(shù)字位數(shù)的長短即可對比數(shù) 字的量級和大小；文字左對齊，符合人們閱讀從左到右的習(xí)慣；而對一些固定長度的狀態(tài)文字（如已完成，待支付等）采用居中對齊，使這些狀態(tài)文字更突出。
像下面的圖中，如果數(shù)據(jù)居中對齊沒有明確的邊界，閱讀起來就會降低效率。
經(jīng)過調(diào)整后的下一張圖中，我們就能看到，當(dāng)數(shù)據(jù)對齊設(shè)計后，數(shù)據(jù)之間自動形成了規(guī)整的線，便于視線的流動。
8.設(shè)計視覺層級，引導(dǎo)讀者視線
通過調(diào)整標(biāo)題、標(biāo)簽的字體，邊框線的設(shè)計、底色的運用，從而計出合理的視覺層級，引導(dǎo)讀者的視線流動曲線。例如下圖：
9. 堅持使用簡單的矩陣布局，盡量減少視覺噪音
講了很多通過表格style來提高表格可讀性的方法，但是我們同時需要謹(jǐn)記的是，表格的主體是表格中所承載的數(shù)據(jù)信息，在進行表格的設(shè)計時，設(shè)計師 們尤其要注意去除所有非必要的視覺元素，讓用戶將所有的注意力集中在數(shù)據(jù)信息上，而不是無關(guān)的邊框、底色等。所有的視覺元素應(yīng)該為更好的幫助用戶閱讀而服 務(wù)，除此之外，再精美的設(shè)計都是對表格的破壞。
下圖是個極端的例子，無謂的邊框設(shè)計，大大降低了這張表格的可讀性。
第3點中我們提高，在取舍表格的內(nèi)容時，要盡量精簡指標(biāo)，減少用戶一次性接收的信息量過于龐大，尤其不要超出用戶的視覺范圍，通過 拖拽的等方式查閱表格。但在實際想運用中，表格指標(biāo)過多的情況，還是經(jīng)常出現(xiàn)。但實在無法精簡指標(biāo)的時候我們能怎樣提高表格的可讀性呢，以下幾個方法或許 能有所幫助。
10.固定表頭、標(biāo)題列
當(dāng)在閱讀數(shù)據(jù)龐大的表格時，讀者不得不通過拖拽橫向或縱向滾動條來閱讀數(shù)據(jù)，固定表格的表頭或行標(biāo)題列，能幫助讀者在閱讀過程中仍清晰的知曉單元格數(shù)據(jù)的屬性。比如百度的涅槃系統(tǒng)提供了豐富的數(shù)據(jù)列，而如果缺少表頭的說明恐怕會很快遺忘掉該列數(shù)據(jù)是什么。
11.提供自定義選擇
由于一份數(shù)據(jù)報表，往往需要滿足各種不同的角色在不同情況下的需求，因而在數(shù)據(jù)內(nèi)容上，一般采取寧多勿少的原則，即系統(tǒng)提供盡可能詳細(xì)的數(shù)據(jù)給用 戶，由此就造成了表格指標(biāo)過多，難以在一個屏幕內(nèi)完整展示，導(dǎo)致需要橫向拉伸，極大的降低了表格的可讀性。在這個問題上，我們采取的方法是將所有的指標(biāo)名 稱羅列在表格上方，并提供復(fù)選框選擇，在默認(rèn)情況下僅展示最常用、最重要的幾個指標(biāo)（如下圖）。這樣做的好處是，首先，用戶能在表格上方看多所有的指標(biāo)名 稱，避免了原來需要橫向拖拽才能瀏覽到所有指標(biāo)的情況；其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。
12. 提供搜索和篩選
提供表格搜索和篩選是幫助讀者根據(jù)自身需求減少數(shù)據(jù)量的有效工具，用戶通過輸入自己所需的特殊條件，從而快速得到目標(biāo)數(shù)據(jù)條目。
13.提供排序
通過數(shù)據(jù)排序的方式，可以快捷的發(fā)掘出關(guān)注的信息，很好的幫助讀者發(fā)現(xiàn)信息條目之間的關(guān)系，提高關(guān)鍵條目的優(yōu)先級。這個方法不但在數(shù)據(jù)行多時適用，在數(shù)據(jù)量并不那么大時也同樣適用。
1. 從用戶閱讀表格的目標(biāo)出發(fā)設(shè)計表格的內(nèi)容和布局
2. 從提高用戶閱讀速度的功能角度出發(fā)進行表格的視覺設(shè)計，避免過度設(shè)計
3. 當(dāng)表格指標(biāo)、數(shù)據(jù)過多時，提供一些自定義的工具幫助用戶自助選擇出最需要的數(shù)據(jù)條目
藍(lán)藍(lán)設(shè)計的小編 http://www.skdbbs.com