2011-11-22 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
閱讀瞬間發(fā)生了什么？
當(dāng)閱讀行為發(fā)生時(shí)，如果能進(jìn)入人腦，你會(huì)發(fā)現(xiàn)復(fù)雜的處理過(guò)程在瞬間發(fā)生。所以在談?wù)撛O(shè)計(jì)之前，讓我們先來(lái)看看閱讀表格時(shí)，人的大腦都會(huì)處理哪些任務(wù)。
? 閱讀標(biāo)題
：用戶(hù)在閱讀表格時(shí)通常會(huì)簡(jiǎn)單略過(guò)行或列的表頭。
? 通讀全篇
：用戶(hù)也許會(huì)先花時(shí)間掃描全篇，了解表格的整體結(jié)構(gòu)，數(shù)據(jù)分類(lèi)以及復(fù)雜性。
? 視覺(jué)搜索
：為了找到數(shù)據(jù)，用戶(hù)會(huì)順著一行或者一列直到發(fā)現(xiàn)交叉點(diǎn)的有用信息，當(dāng)用戶(hù)對(duì)表格的結(jié)構(gòu)熟悉，或者上下文的表格結(jié)構(gòu)相同的時(shí)候，視覺(jué)搜索會(huì)更迅速的完成。
? 信息提取
：找到目標(biāo)數(shù)據(jù)后，用戶(hù)就從表中提取了一條基本信息。
? 理解
：用戶(hù)傾向用他們已有的知識(shí)去理解已從表格中獲取的信息。
? 確定類(lèi)別和趨勢(shì)
：用戶(hù)會(huì)從感知層面對(duì)相似的數(shù)據(jù)進(jìn)行歸類(lèi)并尋找變化趨勢(shì)。
? 比較
：用戶(hù)將會(huì)比較數(shù)據(jù)，并發(fā)現(xiàn)規(guī)律。
? 推斷
：為了更深層次的理解數(shù)據(jù)變化，用戶(hù)往往會(huì)推斷一些結(jié)論
? 解釋
：用戶(hù)將會(huì)從自身的知識(shí)庫(kù)中提取信息，來(lái)解釋數(shù)據(jù)的意義。
? 回憶
：用戶(hù)會(huì)需要記住表格中的一些信息，以便在將來(lái)使用這些信息。
? 決策
：用戶(hù)會(huì)以他們對(duì)數(shù)據(jù)含義的解釋為基礎(chǔ)，進(jìn)行相關(guān)決策。
什么影響了表格的可用性？
表格是否好用，取決于讀表人是否熟悉表格結(jié)構(gòu)，以及表格數(shù)據(jù)的復(fù)雜性和表格的設(shè)計(jì)與其目標(biāo)是否相符。
在1977年Ehrenberg發(fā)表的啟發(fā)性文章“算數(shù)入門(mén)（Rudiments of Numeracy）”中，作者這樣定義一個(gè)好的表格的標(biāo)準(zhǔn)，“數(shù)據(jù)的規(guī)律性和例外情況應(yīng)該一目了然，至少看一次后，人們就知道他們的含義”。他的觀(guān)點(diǎn)是人們總是在不斷的閱讀表格，好的表格設(shè)計(jì)應(yīng)該讓人們?cè)谑煜そY(jié)構(gòu)的基礎(chǔ)上，很容易的就理解信息。而理解的含義就是明白數(shù)據(jù)之間的相互關(guān)系。
設(shè)計(jì)指南
當(dāng)你已經(jīng)確認(rèn)了需要展示的數(shù)據(jù)信息，并且了解了表格設(shè)計(jì)的目的和在閱讀時(shí)人們頭腦中發(fā)生的一切，遵循如下的指南會(huì)讓你的表格更有效。
1. 滿(mǎn)足閱讀者的期望
閱讀者對(duì)表格越熟悉，他們就能越快的提取有用信息。滿(mǎn)足閱讀者的期望，我們就應(yīng)該遵循表格在不同使用目的下的一貫的設(shè)計(jì)風(fēng)格，例如我們?cè)趫?bào)紙的表格中會(huì)采用的藝術(shù)字體就永遠(yuǎn)不該出現(xiàn)在年度報(bào)告的數(shù)據(jù)表格中。
下面兩幅表格展現(xiàn)的是英格蘭銀行2010年年報(bào)中完全相同的一組數(shù)據(jù)信息，然而，我們大多會(huì)選擇閱讀后者，因?yàn)樗惹罢邆鬟f了更清楚的信息。
在這里，讀者預(yù)期的關(guān)鍵因素是一個(gè)閱讀年報(bào)的人可能已經(jīng)有過(guò)大量的閱讀經(jīng)驗(yàn)，并形成了年報(bào)信息展示的期望形式。事實(shí)上年報(bào)出版物中包含了大量有用的和重要的數(shù)據(jù)，而閱讀這些數(shù)據(jù)的人們往往不再看上下文或者其他內(nèi)容。
鑒于此，我們需要采用其他年報(bào)慣用的展示方式，以符合讀者的閱讀習(xí)慣，保證數(shù)據(jù)展示的清晰準(zhǔn)確。請(qǐng)注意，下表中更清晰的那副，是基本上完全根據(jù)英格蘭銀行2010年年報(bào)格式制作，是清晰展示數(shù)據(jù)表格的優(yōu)秀樣本。
2. 依據(jù)設(shè)計(jì)目標(biāo)，合理排序
結(jié)構(gòu)化安排表格中的數(shù)據(jù)將有助于達(dá)到設(shè)計(jì)目的。如果表格的目的是比較中心城市的人口數(shù)量，那么我們就應(yīng)該按照從大到小的順序而不是開(kāi)頭字母的順序排列數(shù)據(jù)。如果目的是展現(xiàn)學(xué)院一年以來(lái)的成本增長(zhǎng)情況，那么就應(yīng)該按照時(shí)間安排數(shù)據(jù)。
表格中的項(xiàng)目應(yīng)該通過(guò)某種排序的手段來(lái)滿(mǎn)足閱讀者的興趣。我們來(lái)看下面的兩個(gè)表格，左面的展示了世界上最高的十座山峰，鑒于“高度”最受關(guān)注，那么表格的項(xiàng)目就是按照這個(gè)字段降序排列的。這樣最受關(guān)注的信息能夠排在表格的最前面。
然而，如果讀者實(shí)際關(guān)注的是山峰首次登頂?shù)臅r(shí)間，那么在左面的表格中，讀者就需要費(fèi)一番力氣去找到第一個(gè)被登頂?shù)纳椒濉ｏ@然右側(cè)的表格排序方式將會(huì)更合理。
請(qǐng)注意，最被關(guān)注的字段應(yīng)該放在最左面，越往左面排，重要性應(yīng)該越高，雖然最左面的一列往往保留給項(xiàng)目名稱(chēng)或者關(guān)鍵字段，其后應(yīng)該按順序排列其他項(xiàng)目數(shù)據(jù)或數(shù)值。
3. 移除無(wú)用元素
為了保證快速瀏覽，集中展現(xiàn)最重要的數(shù)據(jù)，請(qǐng)避免在表格周邊堆砌各種不相干元素。如果想讓表格中的數(shù)據(jù)自己說(shuō)話(huà)，就不要讓他被周邊的裝飾所淹沒(méi)。在下面的黑白表格中，每一個(gè)數(shù)據(jù)上還有自己的單元格邊框，這通常是HTML語(yǔ)言中默認(rèn)的表現(xiàn)形式，但卻給表格中的數(shù)據(jù)帶來(lái)了不必要的雜亂感覺(jué)。
各種無(wú)用元素應(yīng)該從表格的單元格、行、列、表頭甚至表格周邊內(nèi)容中移除，以使表格呈現(xiàn)其本來(lái)面目。去除各種裝飾后，表格的各個(gè)部分的重要性都將得到提升。例如在表格1b中，作為人們最感興趣的一列，當(dāng)年的經(jīng)營(yíng)業(yè)績(jī)被簡(jiǎn)單清晰的突出顯示，而其總和也被輕微的加粗。表3a就是一個(gè)非常典型的例子，由于使用了多余的單邊各邊框，使得數(shù)字和背景之間缺乏差異化，大大降低了有效信息在噪音中的比例，相比之下，表3b就好了很多。
4. 創(chuàng)造視覺(jué)層級(jí)
我們可以使用格式排版來(lái)標(biāo)注重點(diǎn)并引導(dǎo)讀者注意力，例如標(biāo)題可以放大或者加粗，高亮可以引起注意。視覺(jué)記號(hào)可以使表格變得易讀，使讀者知道哪些內(nèi)容更重要。
下面的英格蘭銀行2010年年報(bào)的一組信息被分成了兩個(gè)表格，但仍然體現(xiàn)為一個(gè)整體。紫色的表頭清晰的給出了標(biāo)題，標(biāo)題行僅用了一次表頭（2009、2010）和單位（英鎊）。兩個(gè)表格采用同種顏色加粗的字體作為標(biāo)題，清晰而相互獨(dú)立。兩表各自的最后一行也采用了同樣顏色的下劃線(xiàn)。
兩個(gè)表格僅僅通過(guò)2010年一列的背景顏色相互連接，這不但實(shí)現(xiàn)了表格的聯(lián)通，而且突出了2010年數(shù)據(jù)的重要性。表頭以及最后一行的加總數(shù)據(jù)采用了粗重字體，并使用了行裝飾線(xiàn)，能夠?qū)б喿x者的注意力到這些數(shù)據(jù)信息，因?yàn)?010年度的匯總數(shù)據(jù)是這個(gè)表格中最重要的數(shù)據(jù)。
閱讀者可以不費(fèi)力氣的找到表格中的重要信息，以下的路徑就表現(xiàn)出在分析相關(guān)表頭和標(biāo)簽（紫色）和數(shù)據(jù)（黑色和灰色）過(guò)程中，讀者目光掃描分成了三個(gè)快速獨(dú)立的動(dòng)作，而路徑變粗的部分就是讀者關(guān)注點(diǎn)所在。
5. 大多數(shù)人只看整數(shù)
用四舍五入后的整數(shù)填充表格更容易閱讀并關(guān)注變化趨勢(shì)，雖然這樣對(duì)于專(zhuān)家們的科學(xué)數(shù)據(jù)來(lái)說(shuō)會(huì)不太，但是大多數(shù)表格是為公眾制作的，他們不需要那樣的細(xì)節(jié)。表格設(shè)計(jì)者應(yīng)該在考慮數(shù)據(jù)用途的基礎(chǔ)上來(lái)決定是否進(jìn)行四舍五入。統(tǒng)計(jì)學(xué)家Howard Wainer也建議我們，多數(shù)情況下，都不需要使用超過(guò)一位小數(shù)。
多余的數(shù)字是另外一種形式的無(wú)用元素，在那些讀者對(duì)絕對(duì)沒(méi)有興趣的情況下，多余的細(xì)節(jié)會(huì)降低讀者視覺(jué)掃描的速度。
例如：找到最接近8500米的山峰，第二章表格要遠(yuǎn)比第一個(gè)表格容易。山的高度到毫米顯然沒(méi)有必要，他使得讀者誤認(rèn)為這些數(shù)據(jù)的確是經(jīng)過(guò)精準(zhǔn)測(cè)量，然而事實(shí)有可能不是這樣。根據(jù)讀者的需要提供數(shù)據(jù)的準(zhǔn)確程度，并不會(huì)削弱數(shù)據(jù)的有效性。當(dāng)然又少部分人會(huì)質(zhì)疑第二章表格的準(zhǔn)確性，但是大部分人會(huì)想山峰的高度能夠被測(cè)量的如此嗎？（山峰每年移動(dòng)的距離就遠(yuǎn)不止于此），甚至還會(huì)對(duì)從整體上對(duì)數(shù)據(jù)的有效性以及及時(shí)性提出質(zhì)疑。
6. 為讀者做好計(jì)算
盡可能的不要讓讀者費(fèi)心去進(jìn)行數(shù)學(xué)計(jì)算或者思維轉(zhuǎn)換，而應(yīng)該通過(guò)在每一行或列的末尾提供匯總信息，例如“合計(jì)”或者“平均值”，這將大大提升理解和判斷速度。
在英格蘭銀行2010年度報(bào)告中，盡管我們不能通過(guò)改變數(shù)據(jù)來(lái)達(dá)到讀者的期望，但是在其他同樣的報(bào)告中，我們?cè)谀┪苍黾右涣杏杏玫臄?shù)據(jù)，以避免用戶(hù)在比較各年度數(shù)據(jù)的時(shí)候，還需要自行計(jì)算增長(zhǎng)或減少的幅度。下面第一個(gè)表格6a已經(jīng)增加了總資產(chǎn)和總負(fù)債數(shù)據(jù)，而表格6b則在右側(cè)增加了新的一列，使我們更容易分析出哪些領(lǐng)域的經(jīng)營(yíng)成果發(fā)生了實(shí)質(zhì)性變動(dòng)。
7. 保證前后風(fēng)格一致
在表格中尋找信息時(shí)，讀者希望前后采用同樣風(fēng)格，你應(yīng)該保證對(duì)同類(lèi)元素使用同樣的字體，對(duì)同類(lèi)數(shù)據(jù)使用同種對(duì)齊方式，還有諸如“列標(biāo)題”等各種突出顯示元素的一致性?？匆幌孪旅娴谋砀?a，他展示了和前面表格1b同樣的英格蘭銀行2010年度數(shù)據(jù)信息。但是使用了有區(qū)分的表頭字體，標(biāo)簽以及加總格式，表頭采用了居中格式而不是和數(shù)據(jù)一樣右對(duì)齊，加總數(shù)據(jù)也沒(méi)有與數(shù)據(jù)嚴(yán)格對(duì)齊，同時(shí)為了區(qū)別資產(chǎn)和負(fù)債表格，他分別采用了不同顏色的字體，和表格中間粗細(xì)不同的線(xiàn)條。而所有這些實(shí)際上都讓我們產(chǎn)生一種不連貫的感覺(jué)，從而給瀏覽表格，把握重點(diǎn)帶來(lái)難度。
8. 有條理的對(duì)齊
有意識(shí)的采用對(duì)齊格式將使表格更加易讀，請(qǐng)注意將所有的數(shù)字，逗號(hào)，小數(shù)點(diǎn)彼此對(duì)齊，同時(shí)調(diào)整表格結(jié)構(gòu)，使數(shù)據(jù)和單元格以及整個(gè)表格都是對(duì)仗整齊的。
我們來(lái)看下面8a的表格中英格蘭銀行2010年度數(shù)據(jù)是如何排列的，然后再對(duì)照一下表1b。在8a中，數(shù)據(jù)是水平居中的，標(biāo)簽也錯(cuò)位了并沒(méi)有和表頭對(duì)齊，這些使表格各種組成元素成為了分散的個(gè)體，降低了表格數(shù)據(jù)作為整體的前后連貫性和瀏覽效率，不僅是2009和2010年之間，就連行與行之間的數(shù)據(jù)也很難進(jìn)行比較，因?yàn)樗麄儧](méi)有對(duì)齊。8b中的情況就好了很多，我們可以清晰的看出表格數(shù)據(jù)采用的對(duì)齊標(biāo)尺。在沒(méi)有對(duì)齊的情況下，各行各列的數(shù)據(jù)寬度拉的越大，瀏覽閱困難。
9. 采用適當(dāng)對(duì)比度，區(qū)分?jǐn)?shù)據(jù)和背景
為了增加易讀性，請(qǐng)保證表格前景和背景色之間足夠的對(duì)比度，尤其是當(dāng)表格的行或者列采用了陰影的情況下。
保證前后合適的對(duì)比度，對(duì)于閱讀者非常重要，通常人們通過(guò)給行或列加上顏色來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)，但是顏色選擇失當(dāng)將會(huì)使前景與背景混雜，反而會(huì)降低數(shù)據(jù)的可區(qū)分度。比較一下表格9a和9b。9a采用了藍(lán)色，但數(shù)據(jù)文字和表格背景的對(duì)比水平較低，而9b的對(duì)比度較高，更加易讀，因?yàn)檠劬Ω菀讌^(qū)分重要數(shù)據(jù)。表格行或者列的陰影應(yīng)該剛好足夠引導(dǎo)目光沿著直線(xiàn)瀏覽，而不能過(guò)于突出。而表頭與主體相比也該足夠醒目，但是不能影響了數(shù)據(jù)在前景作為主體的展示效果。
10. 給列數(shù)減肥
由于人們的視覺(jué)記憶有限，而且橫向很難檢索復(fù)雜信息，在可能的情況下，請(qǐng)盡量減少列的數(shù)量，如果需要的話(huà)，可以將表格分為兩個(gè)。這樣做是為了能讓閱讀者盡可能少的記憶和回憶信息。對(duì)于每一列，讀者都需要記住上下文并瀏覽下面各行信息，讀者可以很容易的縱向?yàn)g覽單行數(shù)據(jù)，但橫向?yàn)g覽跨列數(shù)據(jù)時(shí)卻相對(duì)困難。也正是為此，一般情況下，我們會(huì)隔行突出顯示，而不是用列來(lái)引導(dǎo)目光瀏覽的方向。
當(dāng)我們?cè)谧珜?xiě)wikipedia上的Trafford條目時(shí)，有一個(gè)1801至1991年的人口變化表格10a，他包含有2行20列，讀者必須記住有關(guān)信息，并且不停的對(duì)照表頭和數(shù)值來(lái)確認(rèn)他們的關(guān)系，否則他們就無(wú)法獲得趨勢(shì)信息。
而在表格10b中，同樣的信息被改用多行來(lái)展示，讀者可以很容易的從上到下瀏覽并掌握人口變化的規(guī)律。非正常的信息也能很快被發(fā)現(xiàn)，例如19世紀(jì)中期之后的人口爆炸。同時(shí)，看一下10b是如何按照世紀(jì)來(lái)給行數(shù)據(jù)分類(lèi)的，采用精心設(shè)計(jì)的周邊點(diǎn)綴，示意性的的將各組分開(kāi)，同時(shí)又未影響整體列數(shù)據(jù)的展示效果。
11. 讓數(shù)據(jù)更易于比較
相對(duì)于上下比較來(lái)說(shuō)，人們似乎更習(xí)慣于左右比較。鑒于此，構(gòu)建你的表格讓他更易于列與列之間的比較。而且這種情況下，人們可以很快的瀏覽縱向數(shù)據(jù)，雖然有時(shí)也會(huì)使用手指作為引導(dǎo)。
在表格10a和10b中我們已經(jīng)了解到，當(dāng)數(shù)據(jù)處于一列的時(shí)候，人們很容的可以比較數(shù)據(jù)并發(fā)現(xiàn)趨勢(shì)。瀏覽者可以快速的從上之下掃描縱向數(shù)據(jù)，而對(duì)于長(zhǎng)距離的橫向數(shù)據(jù)，瀏覽就會(huì)遇到困難。然而我們?cè)賮?lái)看一下表格11a，去掉了所有的裝飾框，當(dāng)我們比較2009年和2010年數(shù)據(jù)的時(shí)候，數(shù)據(jù)橫向擺放要比11b中的上下擺放容易的多。
那么我們什么時(shí)候應(yīng)該采用橫向或者縱向的擺位呢？這里，我們首先應(yīng)該遵守第10條，盡量減少列的數(shù)量，由于人們通常認(rèn)為不同的列之間展示的是不同的數(shù)據(jù)類(lèi)別，表格11a看上去是兩個(gè)組數(shù)據(jù)，而11b看上去則好像是8組數(shù)據(jù)。為了讓大腦的短期記憶更好的處理數(shù)據(jù)，表格應(yīng)該選擇盡量少的數(shù)據(jù)組數(shù)，因此2009和2010的兩組數(shù)據(jù)采用同樣是兩組的擺放形式時(shí)，閱讀的體驗(yàn)是最好的，比較起來(lái)最容易。
另外一個(gè)例子，當(dāng)我們的行數(shù)與列數(shù)相等的時(shí)候，我們就迫使大腦進(jìn)行分組，如表格11c是一個(gè)簡(jiǎn)單的算術(shù)乘法表，沒(méi)有表頭而且行列間距相同。而表格11d我們縮小了行間距，增大了列間距，11e我們縮小了列間距而增大了行間距，在11d和11e中，我們?nèi)匀挥械韧男辛袛?shù)量——6行6列，但是分組暗示更加明顯，便于人們區(qū)分不同的條目。
因此，應(yīng)該最先考慮的是減少列的數(shù)量，但當(dāng)其他情況都相同的情況下，對(duì)于大量同組數(shù)據(jù)應(yīng)該選擇縱向擺放，更容易發(fā)現(xiàn)規(guī)律和趨勢(shì)。而不同組別的少量數(shù)據(jù)條目采用左右放置更好。按照這樣的方式組織你的數(shù)據(jù)，你會(huì)發(fā)現(xiàn)其中的益處，別總是采用一種明暗交替的方式來(lái)設(shè)計(jì)你的表格了。
（待續(xù)）
【本文由VenturTech 授權(quán)譯言網(wǎng)呈現(xiàn)，如需轉(zhuǎn)載請(qǐng)與VenturTech聯(lián)系】
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com