在找實習(xí)的過程中，算是有緣吧，交互設(shè)計走進(jìn)了我的視野，不過課堂上學(xué)習(xí)的這方面只是太少了，于是到圖書館惡補了一下。

下面是The Elements of User Experience一書中的主要理論，做為菜鳥的我也不知道這個理論的正確性和可操作性如何，但看起來還是很有條理的。

本書將UE（User Experience，即用戶體驗）分為五個層面和兩個角度，圖示如下：

注：圖中的用詞可能和我們經(jīng)常使用的概念不一致。

以下一一來做簡略的闡述。

五個層面：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層。這五層從抽獎逐漸到具體。

兩個角度：網(wǎng)頁作為軟件界面（左半部分）和網(wǎng)頁作為超文本系統(tǒng)（右半部分）。

原則一：較高的層依賴于它臨近的較低的層，后者決定前這的方向和思路。但較高層有時會促使較低層做出調(diào)整。

原則二：每個層面的工作要在下個層面結(jié)束之前結(jié)束。

1 戰(zhàn)略層

你要明確用戶需求和網(wǎng)站目標(biāo)。

用戶需求：用戶要從這個網(wǎng)站得到什么？

網(wǎng)站目標(biāo)：我們要從這個網(wǎng)站得到什么？

網(wǎng)站目標(biāo)諸如賺錢、省錢、品牌效應(yīng)和頁面瀏覽量等。用戶需求的確認(rèn)就十分復(fù)雜了，通常使用的獲取方法有用戶細(xì)分、市場調(diào)研、現(xiàn)場調(diào)查、用戶測試和創(chuàng)建角色（下圖）等。

2 范圍層

帶著‘我們想要什么’、‘我們的客戶想要什么’的明確認(rèn)識，我們就能弄清楚如何去滿足所有這些戰(zhàn)略目標(biāo)。當(dāng)我們把用戶需求和網(wǎng)站目標(biāo)轉(zhuǎn)變?yōu)榫W(wǎng)站應(yīng)該提供給用戶什么樣的內(nèi)容和功能時，戰(zhàn)略就變成了范圍。

你要明確功能規(guī)格和內(nèi)容需求。

2.1 功能規(guī)格

功能規(guī)格類似軟件工程中的相應(yīng)概念。

很多功能規(guī)格并沒有反映實際的產(chǎn)品，甚至程序員都覺得撰寫和閱讀功能規(guī)格是浪費時間，不如寫代碼。實際上，功能規(guī)格應(yīng)該強調(diào)“維護(hù)”和“及時更新”的重要性，隨時保持功能規(guī)格和開發(fā)的同步。

撰寫的普遍原則有：

1. 積極：不要使用“用戶不能……”字樣，而改用“如果用戶……我們就把他引導(dǎo)至……”
2. 具體：“網(wǎng)站要使殘疾人可用”不如“網(wǎng)站要遵守美國殘疾人法案第508條……”
3. 客觀：“網(wǎng)站風(fēng)格應(yīng)該是時尚的”不如“網(wǎng)站風(fēng)格應(yīng)符合企業(yè)的品牌指南文檔……”

2.2 內(nèi)容需求

內(nèi)容需求倒不像軟件工程中那么正式，內(nèi)容設(shè)計者要坐下來仔細(xì)考量資料來源，決定哪些信息必須納入需求。

內(nèi)容需求常常伴隨著功能需求。一些需求是適用于整個網(wǎng)站的，如品牌需求，如支持IE6/Windows等。另一些需求只適用于特殊。而這些需求最用之不竭的源泉總是來自用戶本身。這些需求分為三類：

1. 最顯而易見的，用戶口述的，他們想要的；
2. 有時候用戶口述的并不是一個好主意，但是它會帶我們通向下一個版本的需求：用戶實際需要的。
3. 用戶不知道他們是否需要的。

內(nèi)容需求應(yīng)該對每一個特性的規(guī)模進(jìn)行預(yù)估，如文字的規(guī)模、圖片的大小、下載的文件大小和音頻特性等。設(shè)計一個提供縮略圖的網(wǎng)站和一個提供攝影作品的網(wǎng)站是截然不同的。另外還要確定更新頻率，從戰(zhàn)略層面上講，就是你希望用戶多長時間來訪一次？頻率并不是越頻繁越好，你需要在用戶期望和投資之間權(quán)衡。

需求是要確定優(yōu)先級的，準(zhǔn)則由戰(zhàn)略層提供。

3 結(jié)構(gòu)層

分為交互設(shè)計和信息架構(gòu)。這一層要為網(wǎng)站創(chuàng)建一個概念結(jié)構(gòu)，將分散的需求變?yōu)橐粋€整體。

重點是確定每個將要呈現(xiàn)給用戶的選項 的模式和順序。交互設(shè)計關(guān)注的是將要影響用戶執(zhí)行和完成任務(wù)的選項，而信息架構(gòu)關(guān)注的是將信息表達(dá)給用戶的選項。不過它們關(guān)心的都是理解用戶、用戶的工作方式和思考方式。

3.1 交互設(shè)計

交互設(shè)計描述“可能的用戶行為”，定義“系統(tǒng)如何配合和響應(yīng)”之。

用戶對于“交互組件將如何工作”的觀點稱為概念模型。好的概念模型能確保一致性。以電子商務(wù)網(wǎng)站來講，“購物車”是其常用的概念模型，這個比喻實際上影響著它的視覺設(shè)計和操作方式，于是用戶把它當(dāng)作一個容器，并“放進(jìn)東西”到里面，或“拿出東西”。系統(tǒng)就需要設(shè)計相應(yīng)的功能。假設(shè)用“訂單”來替換這個概念模型，那么就可能要用“編輯”、“添加”和“刪除”的概念了，那么“結(jié)賬”也要變成“寄出訂單”了，這對中國人來說是很陌生的。

但我們沒必要將概念模型明確地告訴用戶，只需讓他們在體驗中記住這些概念，這也就是一致性的體現(xiàn)了。使用概念模型的另一個誤區(qū)是過分生活化，比如將網(wǎng)站就設(shè)計成一本書，但這樣的書“翻閱”起來的體驗其實不怎么好。

另外一個重要的部分就是錯誤處理。你只能

1. 將系統(tǒng)設(shè)計成不可能犯錯，但這并不簡單；
2. 使錯誤難以發(fā)生或自動糾錯。如Word的自動行首字母大寫（真的不好用）；
3. 提供手動改錯。如Undo功能。

3.2 系統(tǒng)架構(gòu)

信息架構(gòu)著重于設(shè)計組織分類和導(dǎo)航結(jié)構(gòu)。

首先要求創(chuàng)建分類體系。創(chuàng)建方式可以是從上到下也可以是從下到上。分類中的各個節(jié)點之間的關(guān)系可以是線性關(guān)系（如書、文章）、層級關(guān)系等。具體的分類原則與戰(zhàn)略和需求密切相關(guān)。

4 框架層

在充滿概念的結(jié)構(gòu)層中形成了大量的需求，這些需求來自戰(zhàn)略目標(biāo)的需求。而在框架層，我們要進(jìn)一步提煉這些結(jié)構(gòu)，確定具體詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計。

在軟件方面，我們通過界面設(shè)計確定框架——按鈕、輸入框等的領(lǐng)域，涉及提供給用戶做某些事的能力。

在信息方面，導(dǎo)航設(shè)計專門設(shè)計用于呈現(xiàn)信息的界面形式，涉及提供給用戶去某個地方的能力。

而信息設(shè)計則兼顧兩個方面，涉及傳達(dá)想法給用戶。

4.1 界面設(shè)計

成功的界面設(shè)計是讓用戶一眼就看到最重要的東西，不重要的或許根本就沒放在那。最大的挑戰(zhàn)就是，弄清用戶不需要知道哪些，并減少其可視性。對程序員來說，思路是相反的，程序要一定要考慮邊界輸入，而這種思路在界面設(shè)計是絕對錯誤的，一個給出少量極端情況的界面對大多數(shù)人來說，一定是設(shè)計不良的界面。同時，并不是控件越大就越重要，如果你充分理解了用戶的任務(wù)和目標(biāo)，那么很多選項可以放到“顯示更多細(xì)節(jié)”里面，很多默認(rèn)值都是合適的。

4.2 導(dǎo)航設(shè)計

導(dǎo)航設(shè)計的三個基本目標(biāo)：

1. 提供給用戶一種在不同地方跳轉(zhuǎn)的方法，導(dǎo)航元素應(yīng)該選擇那些能促進(jìn)用戶完成任務(wù)的鏈接。
2. 導(dǎo)航設(shè)計要傳達(dá)出這些元素或鏈接之間的關(guān)系。傳達(dá)出其中一些比較重要、它們之間的差異、那些選擇對用戶是有利的等信息。
3. 導(dǎo)航設(shè)計必須傳達(dá)出它的內(nèi)容和用戶的當(dāng)前瀏覽頁的關(guān)系。用戶可以從中了解那些內(nèi)容也許對我有幫助。

多數(shù)網(wǎng)站都使用了多重導(dǎo)航系統(tǒng)，常見有一下幾類：

• 全局導(dǎo)航，覆蓋整個網(wǎng)站的通路，但不意味著它要出現(xiàn)在每個頁面。不管你想去哪，都能從全局導(dǎo)航到那里。
• 局部導(dǎo)航，到附近的地方，如到達(dá)父節(jié)點、子節(jié)點和兄弟節(jié)點。
• 輔助導(dǎo)航，可能是一些常去的地方和推薦的地方。
• 上下文導(dǎo)航，嵌入到頁面內(nèi)容中，用戶不用去找導(dǎo)航欄。
• 友好導(dǎo)航，用戶通常不需要，如聯(lián)系信息、人人網(wǎng)小調(diào)查和法律聲明等。
• 網(wǎng)站地圖，顧名思義。
• 索引表，ABCDEFG……或其他索引方法。

4.3 信息設(shè)計

這常常很難入手，因為它本來就很模糊。

有時候信息設(shè)計是和視覺有關(guān)的。比如用餅圖好還是用柱狀圖好呢，用還是用來表達(dá)搜索的概念呢。還有時候涉及到分組和整理散亂信息。如人人網(wǎng)的安全保護(hù)頁面：

5 表現(xiàn)層

在這一層，內(nèi)容、功能和美學(xué)匯集到一起來，滿足其他四個層面的目標(biāo)。

視覺設(shè)計不單是美術(shù)，因為每個人對美感有不同的見解，評判視覺設(shè)計方案是應(yīng)集中在“它是否運作良好”。比如視覺設(shè)計是否給予了之前各層面支持效果。網(wǎng)站的外觀破環(huán)了結(jié)構(gòu)還是增強了結(jié)構(gòu)。

一些常用的手段有：

1. 對比，位置對比、顏色對比等。
2. 保持一致性，包括內(nèi)部一致性（在網(wǎng)站的不同地方設(shè)計是相同的）和外部一致性（網(wǎng)站在同一個企業(yè)的其他產(chǎn)品中，反映類似的設(shè)計）。
3. 配色方案和排版，這是品牌目標(biāo)達(dá)成的常用途徑。

單單這一層，其實還有很多內(nèi)容，這里只介紹一些基本概念，其他的深入知識，并不是我所具備的。

總結(jié)

看了這些理論我才發(fā)現(xiàn)用戶體驗并不是我們想像的只是設(shè)計那么簡單。

當(dāng)然，理論只是理論，很多情況下，一個企業(yè)永遠(yuǎn)處在緊急情況下個開發(fā)團隊真的很多，很多時候都會以“節(jié)省項目時間和金錢”的名義對UE問題敷衍了事，在中國更是如此。但這樣最后很可能得到一個滿足所有技術(shù)需求卻無人問津的網(wǎng)站，更糟糕的是，最后你可能會發(fā)布一個明知已經(jīng)被損壞卻沒有機會（時間和金錢）修復(fù)的網(wǎng)站。

這是一些觀后感和體會，拋磚引玉，希望大家發(fā)言和拍磚。