Dec 3rd in Articles by Collis

這可能是網(wǎng)頁設(shè)計(jì)里最不吸引人的部分，但是信息設(shè)計(jì)絕非最不重要。定位和吸收信息是最精華的網(wǎng)絡(luò)任務(wù)，它遠(yuǎn)遠(yuǎn)超過了購(gòu)買、娛樂和交流這些自身已包括了相當(dāng) 一部分信息設(shè)計(jì)的項(xiàng)目。用戶如何發(fā)現(xiàn)然后利用信息本身受到信息如何架構(gòu)并展現(xiàn)的影響。因此每一個(gè)網(wǎng)頁設(shè)計(jì)師應(yīng)該把自己裝備合格并被告知如何去做到這一點(diǎn)。
作者: Collis

大家好！我開始在這個(gè)網(wǎng)上寫教程是因?yàn)閹啄昵巴ㄟ^閱讀Photoshop教程，我走上了設(shè)計(jì)的道路。我希望這個(gè)站點(diǎn)可以幫助并激勵(lì)其他人！你們可以在Twitter上找到我！

網(wǎng)頁設(shè)計(jì)三部曲系列
這篇文章是網(wǎng)頁設(shè)計(jì)三部曲系列中的一部分，以下是其他文章的鏈接（目前已發(fā)布的）

網(wǎng)頁設(shè)計(jì)三部曲
9個(gè)信息設(shè)計(jì)要訣讓你成為更牛的網(wǎng)頁設(shè)計(jì)師
網(wǎng)頁設(shè)計(jì)師應(yīng)該知道的 6個(gè)界面設(shè)計(jì)要點(diǎn)
為你的網(wǎng)絡(luò)工具箱準(zhǔn)備的8個(gè)點(diǎn)子、技術(shù)和竅門

1 - 有條不紊
信息設(shè)計(jì)是一個(gè)網(wǎng)站越大則越復(fù)雜的問題。但即使是一個(gè)小網(wǎng)站也會(huì)因?yàn)橛袟l不紊，循序漸進(jìn)的發(fā)現(xiàn)應(yīng)該怎樣組織網(wǎng)站的內(nèi)容而獲益。以下有些簡(jiǎn)單的步驟你可能愿意嘗試：

理解網(wǎng)站的內(nèi)容、流程和目的
整理一堆你根本不知道是什么的東西是很難的。所以你的第一個(gè)任務(wù)是掃一遍網(wǎng)站的內(nèi)容、流程和目的。一個(gè)網(wǎng)站的內(nèi)容是指文字、圖像、視頻和其他你為吸引人光 顧你的站點(diǎn)而放上去的東西。一個(gè)網(wǎng)站的流程是指用戶和網(wǎng)站完成交互所需要的任務(wù)和工作流。而站點(diǎn)的目標(biāo)指的是客戶和用戶的目標(biāo)。

所以對(duì)于一個(gè)簡(jiǎn)單的餐廳范例，你可能發(fā)現(xiàn)你已經(jīng)有了1-20頁左右的文字，你知道用戶會(huì)試圖完成一些任務(wù)例如預(yù)定席位。你可能也知道了用戶在這個(gè)站點(diǎn)的目 標(biāo)是弄清楚這個(gè)餐廳有什么菜，餐廳在哪兒和是否還有空位，然后可能會(huì)預(yù)定席位。最后，客戶的目標(biāo)可能是滿足用戶，同時(shí)也讓他們看到一些他們經(jīng)營(yíng)的特色產(chǎn) 品。

確定優(yōu)先級(jí)和尋找用戶路徑
一旦你牢牢把握了進(jìn)入網(wǎng)站是怎么回事，你可以開始確定信息的優(yōu)先級(jí)，然后弄明白用戶是如何游覽網(wǎng)站的。他們會(huì)以什么路徑去完成他 們的目標(biāo)？哪些頁面是最重要的？哪些應(yīng)該在一開始就被看到而哪些只是補(bǔ)充信息？

即使是一個(gè)像餐廳網(wǎng)站那樣簡(jiǎn)單的例子，也有很多方法去設(shè)置信息。例如你可能把今日特色菜品直接放到主頁上，或者你可能把它們放到預(yù)定的流程里，或者你可能把它們放到菜單里。類似的，你會(huì)發(fā)現(xiàn)針對(duì)不同客戶的目標(biāo)，你也可能為頁面內(nèi)容設(shè)置不同的優(yōu)先級(jí)。也許客戶告訴你這家餐館很難找到，所以你需要把如何找到該餐館做成單獨(dú)的一頁并設(shè)置成較高的優(yōu)先級(jí)。
整理信息
理解進(jìn)入網(wǎng)站后是怎么回事，而且清楚的掌握了不同元素之間的關(guān)系、用戶會(huì)想要怎樣和它們打交道，還有每個(gè)模塊不同的優(yōu)先級(jí)以后，你現(xiàn)在可以整理一下網(wǎng)站的信息。這種整理不僅包含給頁面分類──例如弄明白“關(guān)于公司”適合放在“關(guān)于”標(biāo)簽下──而且還包含對(duì)你已經(jīng)放置的內(nèi)容提出疑問和重新安排。有時(shí)候你可能發(fā)覺合并多個(gè)頁面、打破一個(gè)長(zhǎng)段落、把一些文字變成更簡(jiǎn)單的圖表演示或是其他的重新安排會(huì)更好。

開發(fā)一個(gè)網(wǎng)站地圖或計(jì)劃來分級(jí)排列這些信息。雖然網(wǎng)站地圖通常只是一些說明頁面的框框，你可以在所有解釋站點(diǎn)是如何設(shè)置的專門信息上花點(diǎn)心思，包括首頁的快速鏈接，不同部分可能的聯(lián)系，還有用戶訪問網(wǎng)站地圖的可能途徑。

重新組織以后有很多關(guān)于市場(chǎng)的信息，現(xiàn)在我們覺得維基是一個(gè)最有效的管理方式。

2 - 跳出框來思考

復(fù)雜度合理的站點(diǎn)可以用很多種方法重新組織安排。我曾經(jīng)無數(shù)次組織重構(gòu)過一個(gè)網(wǎng)站：FlashDen . 我都記不清有多少次我盯著菜單看，然后把它重新排列。在一些例子里我們只是把頁面放到不同的小組和集合中，那樣它們看起來更有邏輯，而在其他方面我們引進(jìn) 更多跳出限制的想法。

例如，幾個(gè)月前這個(gè)菜單變得過于復(fù)雜，所以我們?nèi)サ袅艘欢迅芭钏伞钡牟藛雾?xiàng)，然后建立了一個(gè)博客來存放如今看來充斥著菜單的競(jìng)爭(zhēng)對(duì)手、新聞、子站點(diǎn)鏈接和其他頁面?，F(xiàn)在我們發(fā)現(xiàn)有很多我稱之為“流浪者”──菜單里沒有主頁──的頁面。從信息設(shè)計(jì)的角度來說，流浪者是可怕的──即便是我都不記得如何找到他們。這次的解決方案是建立一個(gè)維基系統(tǒng)，把最上層的內(nèi)容頂?shù)阶钋懊娴牟藛紊?，然后使用維基自帶的搜索、標(biāo)記和分類功能來放置深層的信息。

我在FlashDen的經(jīng)歷的關(guān)鍵一點(diǎn)，是信息的組織并不一定就意味著要把它放到菜單、次級(jí)菜單。你會(huì)發(fā)現(xiàn)一些信息不該放到站點(diǎn)上，或者它需要一個(gè)子站點(diǎn)，或者你該做點(diǎn)兒別的什么。通過FlashDen，我有了一個(gè)從三年前至今我依然在尋找的、新的組織方法和解決方案的優(yōu)勢(shì)。

作為一個(gè)高效率的信息設(shè)計(jì)師，找到最佳方案經(jīng)常需要跳出那些框框來思考。當(dāng)然我說"跳出框來思考"比做起來容易多了！有時(shí)候我們甚至被看不到的框給限制了。前些時(shí)候我聽說了一個(gè)試驗(yàn)：把一堆跳蚤放到一個(gè)玻璃盒子里，一段時(shí)間內(nèi)它們只能跳那么高。當(dāng)把容器移走時(shí)，這些蟲子依然只跳限制的高度那么高，它們甚至沒有意識(shí)到他們可以逃走了，如果它們想逃的話。

所以你該如何克服你看不見的框子？簡(jiǎn)單！你需要那些沒有被和你相同問題限制住的人的幫助。對(duì)于復(fù)雜的信息設(shè)計(jì)來，我會(huì)經(jīng)常詢問其他人關(guān)于組織的想法，只告訴他們大概的問題而不是站在我的位置上。必須承認(rèn)的是，一個(gè)程序員的想法或是一個(gè)用戶的觀點(diǎn)經(jīng)常能讓你驚喜，因?yàn)樗麄兊目捶ê湍阕约和耆煌?，而且不被同一類的思想所阻礙。

如果誰有一個(gè)超大網(wǎng)站，那就是Chevron 。你會(huì)怎樣組織所有的信息呢？

3 - 保持你的結(jié)構(gòu)平衡

當(dāng)你在從事大量信息的組合時(shí)，會(huì)出現(xiàn)一個(gè)顯而易見的問題：你的導(dǎo)航該做多深或是多廣。深度即分類和子類一共有多少層，廣度則是指每一層有多少項(xiàng)。技巧就是去找到平衡。如果單獨(dú)一個(gè)層有太多項(xiàng)──特別是頂層，你就是在冒讓用戶感到困惑的險(xiǎn)。另外如果一個(gè)用戶必須點(diǎn)擊很多層才能進(jìn)入，你則是在冒失去他們的險(xiǎn)。

一個(gè)很好的規(guī)則是保持每一層的選項(xiàng)數(shù)在4-8左右。如果你在頂層有8項(xiàng)，每一個(gè)有8層子分類，你就有足夠的空間給512個(gè)頁面的網(wǎng)站了。當(dāng)然事情很少自動(dòng)的平衡這么好。所以再次的，你需要注意你不能厚此薄彼。例如一個(gè)有100多頁網(wǎng)頁的站點(diǎn)，如果你把聯(lián)系放到頂級(jí)的某個(gè)地方，有可能不會(huì)達(dá)到8個(gè)子類和8個(gè)子子類。更可能的是聯(lián)系會(huì)成為一個(gè)很簡(jiǎn)單的部分──即使是對(duì)一個(gè)復(fù)雜的站點(diǎn)來說。

反過來說如果你不把類似聯(lián)系的東西放到頂層，你可能會(huì)有一個(gè)更平衡的信息層次，無論如何這將會(huì)使如何找到聯(lián)系信息變的更加困難，所以你還是在冒險(xiǎn)，使重要的用戶任務(wù)完不成。對(duì)這個(gè)專門問題，一個(gè)簡(jiǎn)單的解決方案可能是增加“快速鏈接”，在首頁的某處你給用戶一些選項(xiàng)來跳過通常導(dǎo)航所示深層的結(jié)構(gòu)。

在NETTUS我們決定放置案例和源程序按鈕來方便用戶的習(xí)慣。

4 - 針對(duì)掃描、快速閱讀和跳過的設(shè)計(jì)

我不知道你是怎樣，但我確實(shí)很少完整的閱讀一個(gè)網(wǎng)頁。不管是看說明、條例和條件還是一些平常的文字，大多數(shù)情況下我都是掃描、快速閱讀和跳過。假設(shè)我不是唯一一個(gè)這樣做的人，那么把頁面設(shè)計(jì)的易于以這種吸收信息的形式就是說的通的了。

別把重要信息捆綁在一堆文字里──應(yīng)該強(qiáng)調(diào)它。別最后給用戶一整段話──把它們用標(biāo)題、副標(biāo)題、項(xiàng)目符號(hào)、圖標(biāo)或是其他什么分開！想想用戶會(huì)怎樣使用你的站點(diǎn)然后把它設(shè)計(jì)的易于他們使用。

一個(gè)很好的為用戶消費(fèi)而設(shè)計(jì)的實(shí)例是我們的姊妹站點(diǎn)NETTUTS ，一個(gè)你們大多數(shù)人知道的、發(fā)布網(wǎng)絡(luò)開發(fā)主題教程的站點(diǎn)?，F(xiàn)在我們注意到，早先NETTUTS上的大部分人第一次會(huì)把教程從右掃到尾，試圖尋找到一個(gè)例子的鏈接或是源程序代碼，然后他們可以決定到底這個(gè)教程是不是值得首先閱讀。一旦我們意識(shí)到這一點(diǎn)，增加特別的例子和源程序按鈕然后把它們一致放到教程的頂部是一件很容易的事。這個(gè)簡(jiǎn)單的調(diào)整，符合我們迎合用戶消費(fèi)模式的設(shè)計(jì)，而且給我們帶來了很多良好反饋。

PatternTap 是一個(gè)尋找創(chuàng)意、閱讀他人的設(shè)計(jì)文章和文字信息的好地方。

5 - 設(shè)計(jì)需要被讀到的文字

我不確定我是否正在變老，或者僅僅是因?yàn)槲野阉械臅r(shí)間花在屏幕前而變得挑剔，但最近當(dāng)我的確常常為展示給我不吸引我去讀的文字而困擾。站點(diǎn)設(shè)計(jì)的目的通常是去轉(zhuǎn)交信息，而它們大多是書面文字，所以應(yīng)該優(yōu)先把精力集中在它的展示上。

使用過小的字號(hào)、文字和背景色之間的低對(duì)比度，或是在深色背景上用很細(xì)的文字，這些都是我們（多數(shù)情況下是我）都該引以為恥的設(shè)計(jì)之罪。但是除此之外，有其他方法可以使你設(shè)計(jì)出真正讓訪問者去閱讀的文字。以這種設(shè)計(jì)為目標(biāo)，使用標(biāo)題、副標(biāo)題、邊界、引用文字和其他吸引眼球的技術(shù)布局，讓用戶關(guān)注文字并來吸引他們看下去。

一個(gè)指導(dǎo)用戶逛遍全站的簡(jiǎn)單例子-ThemeForest的4個(gè)步驟指南。

6 - 引導(dǎo)用戶通過并通讀頁面

之前我提過用戶路徑──即用戶可能遍歷一個(gè)站點(diǎn)的路徑集合。里面的很多路徑會(huì)和用戶行為有關(guān)，但是規(guī)劃一下，你可以選擇引導(dǎo)用戶通讀單個(gè)頁面，并且通過多個(gè)頁面。一旦你知道了特定的路徑，你可以通過視覺的引領(lǐng)和鏈接來幫他們沿著那條路徑走下去。

例如FlashDen,當(dāng)新用戶訪問時(shí)，我們的目的是帶著他們注冊(cè)、尋找文件、打款然后把這些文件買下來。所以我們?cè)谑醉撋舷冉o他們一個(gè)4個(gè)步驟過程的說明。在我們的下一步的重新設(shè)計(jì)中，我希望讓這條讓網(wǎng)站得以運(yùn)作的核心路線更加明顯。注意在這條路徑里我沒有用4個(gè)頁面來描述，而是用4個(gè)任務(wù)。例如找到文件可以包含用戶瀏覽一打頁面，但這是一個(gè)獨(dú)立的任務(wù)。用戶路徑并不需要成為通過頁面的集合，它們可以僅僅包括一些集合任務(wù)！

Steve Krug 的極有價(jià)值的書！

7 - 別把事情搞太復(fù)雜

簡(jiǎn)單相對(duì)于復(fù)雜更利于用戶應(yīng)該是不言而喻的。然而把設(shè)計(jì)搞的過于復(fù)雜實(shí)在太容易了。我知道我常常把事情做的看起來更復(fù)雜了，因?yàn)槲以陧撁嫔鲜褂昧烁嘁曈X元 素（壞Collis， 壞Collis！）。另外一宗過度復(fù)雜的罪過是在按鈕上使用不需要的文字然后要求去行動(dòng)。Steven Krug 在他杰出的著作別讓我思考 中給了一個(gè)例子，一個(gè)虛擬就業(yè)網(wǎng)站使用了如下的按鈕：

工作機(jī)會(huì)
空缺職位
工作機(jī)會(huì)令拉瑪
其中一個(gè)很清楚，一個(gè)還算明顯，還有一個(gè)──天知道是什么。

信息可以用文字之外的方法展示！

8 - 信息可視化

作為設(shè)計(jì)者，我們比其他人更明白良好視覺的價(jià)值。并且有很多把數(shù)據(jù)、概念、信息表格化或是可視化的機(jī)會(huì)。本文就是以一個(gè)界面設(shè)計(jì)、信息設(shè)計(jì)和美學(xué)設(shè)計(jì)的關(guān)聯(lián)，這樣一個(gè)基本圖表開的頭，你一定會(huì)過目不忘。這些圖片不僅分割了文字，而且它們會(huì)令我們記得更清楚，同時(shí)也給了你一個(gè)讓頁面更生動(dòng)的機(jī)會(huì)。

DoshDosh 關(guān)于信息可視化、表格和作者所謂的信息圖表 有一篇有趣的文章非常值得一看，即使它只是看到精彩生動(dòng)的例子。

感謝Analytics，分析的路徑和目標(biāo)從未像現(xiàn)在這樣簡(jiǎn)單。

9 - 分析你的信息設(shè)計(jì)

信息設(shè)計(jì)屬于很難一次成功的事情。所以一旦你建立了一個(gè)站點(diǎn)，你應(yīng)該分析它看看人們?nèi)绾问褂煤徒邮苣切┬畔?、他們是如何行?dòng)的，還有你該改進(jìn)設(shè)計(jì)的哪些地方。

這方面Google Analytics是一個(gè)很棒的工具。例如我早先提到的用戶路徑，Analytics使用Goals功能讓你可以通過頁面跟蹤這些路徑。你建立一系列頁面以后，Analytics會(huì)報(bào)告用戶在每一個(gè)點(diǎn)上訪問（以及外部的點(diǎn)擊）它的百分比。

其他你能用的分析功能還有搜索項(xiàng)目跟蹤，可以讓你看見用戶在搜索你的網(wǎng)站時(shí)的搜索范圍。知道用戶在找什么可以告訴你哪些信息是更實(shí)際有用的！

Article copyright by Collis Collis版權(quán)所有

作者: Collis
譯者：UCD翻譯小組， Torry；
校審：Angela
原文地址：http://psdtuts.com/articles/9-information-design-tips-to-make-you-a-better-web-designer/