您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

提高表格可讀性的一些技巧

表格的應(yīng)用

  由于工作原因,經(jīng)常接觸到表格。我們發(fā)現(xiàn),表格不但廣泛的運(yùn)用在各類(lèi)數(shù)據(jù)收集和分析,同時(shí)通過(guò)表格這樣一種二維矩陣來(lái)整理和陳列信息時(shí)(即便最后的展示方式并非一個(gè)典型的表格樣式),能夠很好的表達(dá)信息之間的邏輯關(guān)系,易于幫助理解橫縱信息之間的關(guān)系。

  在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用中,表格橫縱相互獨(dú)立又相互關(guān)聯(lián)的模式尤其適用于:

  1.組織和展示大量的信息

  表格簡(jiǎn)單的結(jié)構(gòu)不但能包含大量的信息,且同時(shí)保證信息的可讀性,便于讀者快速掃描信息、從大量的條目中找到所需的信息。

  2.展示對(duì)比性信息

  通過(guò)合理的布局,表格能清晰的展示出同類(lèi)對(duì)比信息,便于讀者分辨不同條目信息之間的關(guān)聯(lián)和區(qū)別,從而關(guān)注到關(guān)鍵、問(wèn)題條目。

  總的來(lái)說(shuō),一個(gè)構(gòu)造清晰的表格布局,將大大提升讀者對(duì)信息的接收速度和理解程度

  例如下圖中蘋(píng)果官網(wǎng)對(duì)不同型號(hào)mac book的信息陳列方式,就采用了表格的結(jié)構(gòu),清晰的展示了4款不同的macbook,及各自的性能、售價(jià)等屬性,同時(shí)讀者第一眼就可以掃描到并理解表格結(jié)構(gòu),橫向是4款macbook的排列,縱向分別列出了各自的屬性,然后進(jìn)一步就可以根據(jù)自己的興趣點(diǎn)就4款macbook的不同屬性進(jìn)行對(duì)比,信息完整且便于掃描。

pic_17

  如上所述,表格常用來(lái)展示大量的、對(duì)比性的信息,因此提高表格的可讀性、便于用戶快速掃描,是表格設(shè)計(jì)的關(guān)鍵。本文僅就筆者閱讀過(guò)的幾篇關(guān)于表格設(shè)計(jì)的文章結(jié)合工作中的一些拙見(jiàn),整理成文,分享如下。

  表格的要素

  研究如何提高表格可讀性之前,我們先簡(jiǎn)要闡述下表格的組成要素,這里我們暫且這么總結(jié):表格 = 標(biāo)題 + 表頭 + 行標(biāo)簽 + 單元格數(shù)據(jù)(信息),如下圖

pic_05

  表格標(biāo)題是對(duì)表格整體的描述,應(yīng)包含表格數(shù)據(jù)的來(lái)源及屬性,使讀者對(duì)表格內(nèi)容有所認(rèn)識(shí),例如數(shù)據(jù)收集的日期、地區(qū)及其表格數(shù)據(jù)的其他屬性。

  行標(biāo)簽和列標(biāo)簽(表頭) 是對(duì)本行/本列數(shù)據(jù)的描述,可以理解為是表格的骨架,是用戶快速掃描并接收表格布局的關(guān)鍵要素。

  單元格數(shù)據(jù)(單元格信息)這里就不在多說(shuō),是表格的主體內(nèi)容。

   提高表格可讀性的一些技巧

   1. 根據(jù)表格的用途,設(shè)計(jì)表格的布局

  如下圖,兩張表格中所包含的數(shù)據(jù)完全相同,是關(guān)于10座山峰的高度和人類(lèi)登頂年份數(shù)據(jù)。不同的是他們的成列方式:表1a根據(jù)山峰的高度排序陳列,而表1b則根據(jù)人類(lèi)登頂山峰的年份排序陳列,一眼之下,這兩張表無(wú)設(shè)計(jì)優(yōu)劣高下之分,決定使用兩站表中的哪一張的根據(jù)是這組數(shù)據(jù)的用途,如果這張表是用于向讀者展示世界上的TOP 10山峰,則山峰的高度則是重點(diǎn)信息,a表的展示方式會(huì)更加合適;反之,如果這張表意在展示10大高峰中,哪座山峰是人類(lèi)最先登頂?shù)?,人?lèi)先后登頂?shù)臅r(shí)間順序是讀者的主要興趣點(diǎn),則表b就更加適用。

pic_23

   2. 減少讀者計(jì)算

  其實(shí)類(lèi)似上一點(diǎn),表格的指標(biāo)也不是永遠(yuǎn)固定的,而是從讀者閱讀表格的目的出發(fā),調(diào)整所需展示的指標(biāo)。在原始數(shù)據(jù)的基礎(chǔ)上給出差值、總計(jì)等分析性的數(shù)據(jù),可以直達(dá)用戶閱讀的目標(biāo),而盡量減少用戶心算或者線下處理的過(guò)程。例如下圖展示了2010年與2009年兩年的公司財(cái)政報(bào)表,查看兩年的具體數(shù)據(jù)當(dāng)然必要,但深入分析,讀者之所以要并列查看兩年的數(shù)據(jù),目的在于對(duì)比兩年的數(shù)據(jù)變化,因此將指標(biāo)變化情況列出能幫助用戶更快的達(dá)成目標(biāo)。

pic_29

  3.精簡(jiǎn)指標(biāo),創(chuàng)造信息層級(jí)

  盡量減少或壓縮指標(biāo)數(shù)量,避免出現(xiàn)用戶不需要的數(shù)據(jù),默認(rèn)只展示用戶所必須的信息,用戶需要的非重點(diǎn)輔助信息可以通過(guò)提供深入細(xì)節(jié)的入口(彈窗、下拉)等形式來(lái)解決,僅在用戶需要時(shí)進(jìn)行提供。創(chuàng)造信息層級(jí),避免無(wú)主次的鋪出所有信息,干擾用戶快速掃描定位目標(biāo)條目。例如易迅的“我的訂單”列表中,就將用戶的信息、訂單狀態(tài)跟蹤信息進(jìn)行了默認(rèn)隱藏,同時(shí)通過(guò)鏈接色很好的提示了進(jìn)一步細(xì)節(jié)信息的入口,在用戶需要時(shí),可以方便的查閱。

pic

  4.不留空白單元格

  當(dāng)表格單元格中沒(méi)有相應(yīng)數(shù)據(jù)時(shí),要避免直接留出空白單元格??瞻讍卧袢菀自斐勺x者的困惑甚至誤解,讀者會(huì)搞不清楚到底是沒(méi)有數(shù)據(jù),還是根本沒(méi)有值?正確做法,沒(méi)有數(shù)據(jù)的顯示0,給沒(méi)有值的單元格劃線或者打叉。如下圖:

pic_53

  5.斑馬條的運(yùn)用

  橫向或縱向的斑馬線以及懸停高亮底色能夠很好的引導(dǎo)用戶的視線,避免在閱讀時(shí)出現(xiàn)錯(cuò)行、迷失的情況:斑馬線會(huì)使得行與行的界限更為分明,尤其對(duì)數(shù)據(jù)列較多時(shí)的橫向引導(dǎo)得到加強(qiáng),這樣看行內(nèi)的內(nèi)容時(shí)不容易錯(cuò)行,而懸停變色行主要是配合操作交互,明確區(qū)分出光標(biāo)所在的行。

pic_35

  6.高亮重點(diǎn)信息,提高閱讀速度

  通過(guò)合理的使用icon、背景色等視覺(jué)元素高亮重點(diǎn)信息,能夠提高用戶的閱讀速度,幫助讀者更快定位重點(diǎn)信息,例如下表中利用紅綠的上下箭頭很好的向用戶表達(dá)了年度財(cái)務(wù)的變化情況。

pic_29

  7.對(duì)齊,便于用戶快速瀏覽

  對(duì)比的數(shù)據(jù)如果有了明確的對(duì)齊方式,會(huì)大大提升數(shù)據(jù)的瀏覽效率,增加對(duì)比的效果。通常,我們將數(shù)據(jù)右對(duì)齊,便于對(duì)比:通過(guò)數(shù)字位數(shù)的長(zhǎng)短即可對(duì)比數(shù)字的量級(jí)和大小;文字左對(duì)齊,符合人們閱讀從左到右的習(xí)慣;而對(duì)一些固定長(zhǎng)度的狀態(tài)文字(如已完成,待支付等)采用居中對(duì)齊,使這些狀態(tài)文字更突出。

  像下面的圖中,如果數(shù)據(jù)居中對(duì)齊沒(méi)有明確的邊界,閱讀起來(lái)就會(huì)降低效率。

pic_59

  經(jīng)過(guò)調(diào)整后的下一張圖中,我們就能看到,當(dāng)數(shù)據(jù)對(duì)齊設(shè)計(jì)后,數(shù)據(jù)之間自動(dòng)形成了規(guī)整的線,便于視線的流動(dòng)。

pic_65

  8.設(shè)計(jì)視覺(jué)層級(jí),引導(dǎo)讀者視線

  通過(guò)調(diào)整標(biāo)題、標(biāo)簽的字體,邊框線的設(shè)計(jì)、底色的運(yùn)用,從而計(jì)出合理的視覺(jué)層級(jí),引導(dǎo)讀者的視線流動(dòng)曲線。例如下圖:

pic_71

  9. 堅(jiān)持使用簡(jiǎn)單的矩陣布局,盡量減少視覺(jué)噪音

  講了很多通過(guò)表格style來(lái)提高表格可讀性的方法,但是我們同時(shí)需要謹(jǐn)記的是,表格的主體是表格中所承載的數(shù)據(jù)信息,在進(jìn)行表格的設(shè)計(jì)時(shí),設(shè)計(jì)師們尤其要注意去除所有非必要的視覺(jué)元素,讓用戶將所有的注意力集中在數(shù)據(jù)信息上,而不是無(wú)關(guān)的邊框、底色等。所有的視覺(jué)元素應(yīng)該為更好的幫助用戶閱讀而服務(wù),除此之外,再精美的設(shè)計(jì)都是對(duì)表格的破壞。

  下圖是個(gè)極端的例子,無(wú)謂的邊框設(shè)計(jì),大大降低了這張表格的可讀性。

pic_47

  第3點(diǎn)中我們提高,在取舍表格的內(nèi)容時(shí),要盡量精簡(jiǎn)指標(biāo),減少用戶一次性接收的信息量過(guò)于龐大,尤其不要超出用戶的視覺(jué)范圍,通過(guò)拖拽的等方式查閱表格。但在實(shí)際想運(yùn)用中,表格指標(biāo)過(guò)多的情況,還是經(jīng)常出現(xiàn)。但實(shí)在無(wú)法精簡(jiǎn)指標(biāo)的時(shí)候我們能怎樣提高表格的可讀性呢,以下幾個(gè)方法或許能有所幫助。

  10.固定表頭、標(biāo)題列

  當(dāng)在閱讀數(shù)據(jù)龐大的表格時(shí),讀者不得不通過(guò)拖拽橫向或縱向滾動(dòng)條來(lái)閱讀數(shù)據(jù),固定表格的表頭或行標(biāo)題列,能幫助讀者在閱讀過(guò)程中仍清晰的知曉單元格數(shù)據(jù)的屬性。比如百度的涅槃系統(tǒng)提供了豐富的數(shù)據(jù)列,而如果缺少表頭的說(shuō)明恐怕會(huì)很快遺忘掉該列數(shù)據(jù)是什么。

pic_77

  11.提供自定義選擇

  由于一份數(shù)據(jù)報(bào)表,往往需要滿足各種不同的角色在不同情況下的需求,因而在數(shù)據(jù)內(nèi)容上,一般采取寧多勿少的原則,即系統(tǒng)提供盡可能詳細(xì)的數(shù)據(jù)給用戶,由此就造成了表格指標(biāo)過(guò)多,難以在一個(gè)屏幕內(nèi)完整展示,導(dǎo)致需要橫向拉伸,極大的降低了表格的可讀性。在這個(gè)問(wèn)題上,我們采取的方法是將所有的指標(biāo)名稱羅列在表格上方,并提供復(fù)選框選擇,在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)(如下圖)。這樣做的好處是,首先,用戶能在表格上方看多所有的指標(biāo)名稱,避免了原來(lái)需要橫向拖拽才能瀏覽到所有指標(biāo)的情況;其次,用戶可以根據(jù)自己的需要,自由的選擇顯示所需指標(biāo),隱藏不必要指標(biāo),減少干擾。

pic_83

  12. 提供搜索和篩選

  提供表格搜索和篩選是幫助讀者根據(jù)自身需求減少數(shù)據(jù)量的有效工具,用戶通過(guò)輸入自己所需的特殊條件,從而快速得到目標(biāo)數(shù)據(jù)條目。

pic_89

  13.提供排序

  通過(guò)數(shù)據(jù)排序的方式,可以快捷的發(fā)掘出關(guān)注的信息,很好的幫助讀者發(fā)現(xiàn)信息條目之間的關(guān)系,提高關(guān)鍵條目的優(yōu)先級(jí)。這個(gè)方法不但在數(shù)據(jù)行多時(shí)適用,在數(shù)據(jù)量并不那么大時(shí)也同樣適用。

pic_95

  總結(jié)

  1. 從用戶閱讀表格的目標(biāo)出發(fā)設(shè)計(jì)表格的內(nèi)容和布局

  2. 從提高用戶閱讀速度的功能角度出發(fā)進(jìn)行表格的視覺(jué)設(shè)計(jì),避免過(guò)度設(shè)計(jì)

  3. 當(dāng)表格指標(biāo)、數(shù)據(jù)過(guò)多時(shí),提供一些自定義的工具幫助用戶自助選擇出最需要的數(shù)據(jù)條目

  參考資料

  http://www.blueidea.com/design/doc/2011/8658.asp

  http://www.poluoluo.com/jzxy/201111/147874.html

  http://blog.rexsong.com/?p=10271

  http://ued.baidu.com/?p=763

  http://designshack.net/articles/css/15-tips-for-designing-terrific-tables/

  http://www.noupe.com/design/data-tables-in-modern-web-design.html

  http://patternry.com/p=data-table/

  http://www.thinkui.co.uk/resources/effective-design-of-data-tables/

  http://www4.unescobkk.org/education/efatraining/module-a4/3-data-transformation-and-presentation/

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id1604.html
12個(gè)糟糕的移動(dòng)網(wǎng)站體驗(yàn)錯(cuò)誤
設(shè)計(jì)禁用狀態(tài)二三事
圖趣網(wǎng)微信
建議反饋
×