如何設(shè)計(jì)表格 本文由網(wǎng)站設(shè)計(jì)師陳漢聰編譯，轉(zhuǎn)載請(qǐng)注明出處
文章編號(hào)：05072 2005年12月24日
【譯者的話】 表格也需要設(shè)計(jì) ? 廢話！表格當(dāng)然需要設(shè)計(jì)！我們經(jīng)常看到一些雜志或新聞報(bào)道中，整個(gè)版面都已經(jīng)搞得很漂亮，但里面的一些表格卻應(yīng)付了事，影響了整個(gè)版面的美感。所以我們強(qiáng)調(diào)設(shè)計(jì)表格，并不是心血來(lái)潮，也不是為了讓你在老板面前裝忙，而是為了解決一個(gè)更實(shí)際的問題：讓里面的數(shù)據(jù)更清晰易懂，當(dāng)然，它同樣非常吸引人。而設(shè)計(jì)一個(gè)清晰、簡(jiǎn)潔、漂亮的表格涉及一些基本技巧，看看我們是怎么做的？
作為一名廚師或家庭主婦，你每天都要和雞蛋面粉之類的東西打交道。你看到有一道菜需要用 1/4 杯淀粉，而你手上只有湯匙。請(qǐng)快速算一下， 1/4 杯的淀粉等于多少湯匙的用量？你很聰明，在冰箱上貼上一張用量換算表，你只要看一眼，就可以讓你對(duì)做菜時(shí)的各種用量換算一清二楚。 換算表非常實(shí)用，而這些數(shù)據(jù)都需要在一張不大的表格上列出。如果你將這些換算表送給那些需要的顧客，他們可能會(huì)長(zhǎng)久地將你這張表格貼在廚房里（既然是長(zhǎng)久地貼在廚房里，為什么你不順便在這張表格上寫上你公司的名字地址，順便做一下廣告？）。 當(dāng)然，為了能夠讓這張換算表能夠讓人貼出來(lái)，表格的設(shè)計(jì)必須美觀實(shí)用。其中的關(guān)鍵就是我們要組織好數(shù)據(jù)及讓這些數(shù)據(jù)清晰易懂。在本文中，看看我們是如何將一張難以卒讀的表格變成主婦們的好幫手。
圖 1 上圖為原設(shè)計(jì)的表格及我們修改后的表格
圖 2 原來(lái)的設(shè)計(jì)放上紅蘿卜洋蔥干嘛？雖然它是用于廚房，
但表格的主題是換算，不是食物 原來(lái)的設(shè)計(jì)尺寸為 4 × 7 英寸 ，表格后面還附上磁鐵便于粘貼。一眼望去，色彩還挺鮮艷，數(shù)據(jù)也很詳盡，但它的整版面顯得很復(fù)雜，也不吸引人。造成這種后果的原因是原來(lái)的設(shè)計(jì)師并沒有對(duì)版面上的空間進(jìn)行精心處理。
圖 3 原設(shè)計(jì)到底有什么毛病？ 這個(gè)設(shè)計(jì)首先的問題就是節(jié)奏混亂，在上圖左中，我們可以看到，元素的排列既有右對(duì)齊，又有左對(duì)齊，還有居中對(duì)齊。而上圖中我們所標(biāo)的箭頭可以看到，各個(gè)元素的方向感是發(fā)散的，而且毫無(wú)規(guī)律，缺乏協(xié)調(diào)。而上圖右標(biāo)出的藍(lán)色區(qū)域可以讓我們知道這個(gè)設(shè)計(jì)的第三個(gè)缺點(diǎn)：缺少視覺焦點(diǎn)，多余的空間太多，沒有那一個(gè)元素特別突出。 從圖3右中我們還可以看到，由于留白空間與各個(gè)元素所占的區(qū)域幾乎相等，不能形成對(duì)比，所以使到整個(gè)設(shè)計(jì)毫無(wú)生氣。 我們?cè)賮?lái)考察一下原設(shè)計(jì)中所使用的字體。原設(shè)計(jì)中使用了 Helvetica 字體，這種字體可以說是一種萬(wàn)能字體，幾乎那里都可以使用。但它在字體尺寸較小及分辨率較低的時(shí)候，就不容易看清。
圖 4 原設(shè)計(jì)所使用的 Helvetica 字體，并不適合字體較小的情況下使用 Helvetica 字體用作標(biāo)題時(shí)是一種不錯(cuò)的選擇。但對(duì)較小的字體則不是很適合。從上圖我們可以看到，這種字體的弧線伸得太長(zhǎng)，使到與鄰近的地方過于緊密，所以字體尺寸比較小時(shí)，看起來(lái)就象閉合了一樣。特別是象 a 、 e 、 s 這幾個(gè)字母很容易互相混淆（上圖圓圖）。 用大小一樣的數(shù)字表示分?jǐn)?shù)絕對(duì)不是一種好的選擇，因?yàn)槿狈哟胃?，而且很容易與相鄰的數(shù)字搞混，使到看的人要小心分辨。 來(lái)看我們新設(shè)計(jì)的字體選擇
圖 5 新設(shè)計(jì)中所用的字體 表格中的字體最重要的就是要清晰，而且字體構(gòu)成要簡(jiǎn)單——直線、平滑的轉(zhuǎn)角及沒有多余的襯線。而表格的風(fēng)格可以通過其它元素體現(xiàn)。
圖 6 Myriad Pro 字體給人一種開闊感 我們新設(shè)計(jì)中采用的是 Myriad Pro 字體，這種字體線條較短，交接位沒有太多變化，關(guān)鍵一點(diǎn)是，它的弧線呈開放形，所以就算字體尺寸較小時(shí)同樣可以讓人看得一清二楚。你可以再對(duì)比一下 Myriad Pro 與 Helvetica 字體觀察它們兩者之間的區(qū)別。 Myriad Pro 字體中還包含了表示分?jǐn)?shù)的數(shù)字，分?jǐn)?shù)的大小是按原尺寸比例縮小，整個(gè)分?jǐn)?shù)的高度與原來(lái)的數(shù)字的高度相同。如果你觀察得夠細(xì)的話，你還可以看到 Myriad Pro 分?jǐn)?shù)中的那條斜線比 Helvetica 更斜一點(diǎn)（也比你鍵盤上的那根斜線要斜）。這種分?jǐn)?shù)一眼就能被人看清。 在原設(shè)計(jì)中那種表格看起來(lái)好象是關(guān)于烹飪的東西，但其實(shí)我們的主要處理對(duì)象是數(shù)字。所以我們要將數(shù)字處理得好一些，用行和列來(lái)組織好，然后將數(shù)字的距離拉開。
圖 7 原設(shè)計(jì)和新設(shè)計(jì)的數(shù)字排列對(duì)比 在原圖的設(shè)計(jì)中，是將各個(gè)數(shù)據(jù)當(dāng)成一個(gè)句子整行輸入的。所以所有的元素都顯得擁擠不堪，而且由于缺乏變化，顯得刻板，也不容易閱讀。 而我們修改后的數(shù)字則顯得開闊清晰。每一行的距離都相等，而每一列都按類對(duì)齊，如加侖、夸脫、品脫等計(jì)量單位。留意每一列都是右對(duì)齊。 我們要進(jìn)一步深化設(shè)計(jì)：
圖 8 將數(shù)字與單位形成對(duì)比 我們將數(shù)字與單位在視覺上分開。我們將單位的字體及顏色變細(xì)變灰，這樣可以使整個(gè)版面增加深度，并形成兩個(gè)層次感。
圖 9 新設(shè)計(jì)的數(shù)字排列方式 我們?cè)谏蠄D中的數(shù)字保留黑體，而作為重量元素的計(jì)量單位則選擇灰度?，F(xiàn)在所形成的差別有良好的視覺效果，使到數(shù)字更容易辨認(rèn)，同時(shí)也更吸引。注意上圖中分隔的技巧：每一行是以空間來(lái)間開，而行與行之間是以細(xì)線分開。 現(xiàn)在我們要對(duì)整個(gè)版面進(jìn)行排版了。將圖表放在版面的中間可以創(chuàng)造出焦點(diǎn)，而一些其它信息則作為補(bǔ)充性元素處理。
圖 10 新設(shè)計(jì)的版面構(gòu)成 上圖 1 中，表格的數(shù)據(jù)是主要的信息，我們將它放在版面的中間，這樣使別人第一眼就可以接觸這些信息。上圖 2 中，我們加上標(biāo)題，由于不是主要的信息，我們采用一種低調(diào)的字體。上圖 3 中，加上圖片，而這些圖片必須要與表格的主題相關(guān)。而且圖片的風(fēng)格要一致，各自的大小要差不多。 為了讓版面更加吸引人，我們還要加上一張人物圖片，它所起到的作用是引導(dǎo)人們觀看。
圖 11 加入下方元素 上圖 1 的下方是要列出印刷這張表格的贊助單位，由于這是另一個(gè)信息內(nèi)容，與上面的信息無(wú)關(guān)，所以我們需要使該區(qū)域與上面形成差別。我們采用另一種顏色背景。上圖 2 中，加上人物圖片是為了使這兩個(gè)區(qū)域聯(lián)系起來(lái)，起到“架橋”的作用。人物的不規(guī)則輪廊也軟化了整個(gè)表格中所呈現(xiàn)的硬直線的感覺。上圖 3 中我們加了公司的信息，這些信息的字體與題目的字體一致，而且字體尺寸較小，是為了保持一種低調(diào)但仍能被輕易看到的效果。 整個(gè)版面已經(jīng)出來(lái)了，但我們還要談?wù)勗O(shè)計(jì)版面中各個(gè)元素的關(guān)系。我們?cè)谠O(shè)計(jì)中要緊記一點(diǎn)就是你的頁(yè)面上到底有什么東西，你要考慮如何將顏色、數(shù)值、尺寸及排列互相產(chǎn)生關(guān)聯(lián)，以便使整個(gè)設(shè)計(jì)顯得更加有機(jī)統(tǒng)一。
圖 12 三個(gè)元素的關(guān)系，下方背景顏色來(lái)自人物上的顏色
圖 13 想不到吧，它們?nèi)呖墒怯型粋€(gè)高度哦 上面兩張圖表示出了各個(gè)元素之間的關(guān)系。頁(yè)邊距的距離與玻璃杯的寬度相等，所以圖片周圍的空間并不會(huì)造成互相沖突，而且使到注意力能夠集中在表格上。杯子、面粉及人物面孔尺寸一樣，甚至各自的陰影也差不多。在版面中，三者的中間線都一樣，這種設(shè)計(jì)手法既可以使整個(gè)版面顯得統(tǒng)一，而且也能夠輕易地使各個(gè)元素聯(lián)系起來(lái)。而我們下方區(qū)域的背景及文字的顏色是在人物上取色的。 我們?cè)谠O(shè)計(jì)中每一步都不是隨意的。你從中受到啟發(fā)了嗎？ 設(shè)計(jì)中所用的顏色數(shù)值如下：
（全文完）
