文：阿蜜果

日期：2011-10-19

轉(zhuǎn)載請(qǐng)注明出處

你常上的網(wǎng)站是哪些呢？

我使用的博客網(wǎng)站有blogjava（技術(shù)博客）、QQ空間（能與朋友分享的博客文章）、新浪博客，購(gòu)物網(wǎng)站有當(dāng)當(dāng)網(wǎng)（買(mǎi)書(shū)）、淘寶網(wǎng)（給朋友買(mǎi)禮物）、京東網(wǎng)（買(mǎi)電器），門(mén)戶網(wǎng)站是新浪、騰訊網(wǎng)，常用的搜索引擎是百度和Google……我之所以成為這些網(wǎng)站的相對(duì)忠實(shí)用戶，我想與這些網(wǎng)站良好的用戶體驗(yàn)以及為它們?yōu)樘嵘脩趔w驗(yàn)的不斷努力有關(guān)。

在20世紀(jì)90年代HTML誕生時(shí)，HTML的第一個(gè)官方版本是由IETF（互聯(lián)網(wǎng)工程任務(wù)組）推出的HTML2.0，當(dāng)時(shí)，網(wǎng)頁(yè)還比較簡(jiǎn)單，以展示文字信息為主，但隨著HTML的發(fā)展，網(wǎng)頁(yè)內(nèi)容越來(lái)越豐富，也越來(lái)越錯(cuò)綜復(fù)雜，在功能相似的基礎(chǔ)上，提升用戶體驗(yàn)是提升競(jìng)爭(zhēng)優(yōu)勢(shì)和投資回報(bào)率的關(guān)鍵手段。

最近翻看兩年前買(mǎi)的卻沒(méi)有翻看的一本由（美）Jesse James Garrett編寫(xiě)的《用戶體驗(yàn)的要素》，這本作者努力精簡(jiǎn)的薄薄的書(shū)（僅167頁(yè)，不是大開(kāi)本的，而且圖表很多，因?yàn)槭欠g過(guò)來(lái)的，一頁(yè)紙上只有2/3的地方有內(nèi)容）很快的吸引了我，書(shū)中的很多觀點(diǎn)都激起了我的共鳴。

1、 什么是用戶體驗(yàn)

用戶體驗(yàn)并不是指一件產(chǎn)品本身是如何工作的，而是“產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用”的，也就是人們?nèi)绾?#8220;接觸”和“使用”它。

2、 用戶體驗(yàn)的重要性

不同廠商的榨汁機(jī)、電水壺、電磁爐、咖啡機(jī)等都會(huì)給人不同的用戶體驗(yàn)。例如我家里有一個(gè)榨汁機(jī)，功能好像還挺多，但用起來(lái)復(fù)雜得很，簡(jiǎn)單的功能不能讓大家一目了然，要逼著人去看功能說(shuō)明書(shū)，某次我回去，看到它還是嶄新的，問(wèn)父母用過(guò)為什么還那么新呢，父母答：“因?yàn)楸容^難用，所以都不愿意用，于是才那么新！”

例如，現(xiàn)在的電水壺、電飯煲基本都是一鍵式，將水往電水壺里面一放一按鈕，就開(kāi)始工作了，當(dāng)水燒開(kāi)時(shí)會(huì)自動(dòng)關(guān)閉，不用手動(dòng)干預(yù)。

再例如，從前的洗衣機(jī)基本都是半自動(dòng)的，洗滌完后要手動(dòng)的漂洗、脫水，很是繁瑣，而現(xiàn)在去商場(chǎng)看，這種半自動(dòng)的洗衣機(jī)已經(jīng)被淘汰得差不多了，基本都是全自動(dòng)洗衣機(jī)，衣服一放進(jìn)去，出來(lái)時(shí)已經(jīng)是脫好水的衣服了，只要拿去晾曬就OK了。

如此種種，不一而舉。在提升用戶體驗(yàn)的路上，廠商都一步步往前邁進(jìn)，他們都意識(shí)到了用戶體驗(yàn)的重要性，試想如果需要用戶在一次次嘗試、失敗、反復(fù)看說(shuō)明書(shū)后才明白你的產(chǎn)品如何使用，當(dāng)他還要買(mǎi)其它的產(chǎn)品時(shí)，他很可能會(huì)選擇別的廠商用戶體驗(yàn)更好的商品。在產(chǎn)品功能相當(dāng)?shù)那闆r下，于細(xì)微處見(jiàn)競(jìng)爭(zhēng)力。

而網(wǎng)站，因?yàn)樗?#8220;自助式”的產(chǎn)品，一般的網(wǎng)站都沒(méi)有可以實(shí)現(xiàn)閱讀的說(shuō)明書(shū)，沒(méi)有操作培訓(xùn)和討論會(huì)，用戶只能依靠自己的智慧和經(jīng)驗(yàn)，來(lái)面對(duì)這個(gè)網(wǎng)站，用戶被困在某個(gè)地方，必須靠自己找到出路。讓用戶在體驗(yàn)網(wǎng)站、使用網(wǎng)站的過(guò)程中越少的面對(duì)這樣的困境、迷惑，才能讓用戶更愿意在你的網(wǎng)站駐足，更愿意下一次來(lái)光臨你的網(wǎng)站。

用作者的話說(shuō)：“用戶體驗(yàn)對(duì)你很重要，其中一個(gè)最大的理由是：它對(duì)你的用戶很重要。如果沒(méi)有給他們一個(gè)積極的體驗(yàn)，他們不會(huì)使用你的網(wǎng)站。如果沒(méi)有用戶，你能得到的只是一臺(tái)藏在某個(gè)角落里，布滿了灰塵的網(wǎng)絡(luò)服務(wù)器，無(wú)聊地等待著去完成永遠(yuǎn)不會(huì)到來(lái)的請(qǐng)求。”

3、 用戶體驗(yàn)的要素

作者將設(shè)計(jì)用戶體驗(yàn)的工作分解成各個(gè)組成要素，以幫助我們更好地了解整個(gè)問(wèn)題。

3.1 戰(zhàn)略層

該層不僅僅包括了經(jīng)營(yíng)者想從網(wǎng)站得到什么，還包括了用戶想要得到什么。就網(wǎng)上書(shū)店的例子而言，一些戰(zhàn)略目標(biāo)是顯而易見(jiàn)的：用戶想要買(mǎi)書(shū)，我們想要賣(mài)出書(shū)。另一些目標(biāo)可能并不是那么容易說(shuō)清楚的。

戰(zhàn)略層關(guān)注的目標(biāo)是來(lái)自企業(yè)外部的用戶需求，以及與之對(duì)應(yīng)的網(wǎng)站的期望目標(biāo)。這些網(wǎng)站目標(biāo)可以是網(wǎng)頁(yè)目的（例如今年100萬(wàn)的銷售收入）或其它類型的目標(biāo)（讓讀者了解快女參賽選手的基本情況）等。

以當(dāng)當(dāng)網(wǎng)為例，它前期的戰(zhàn)略層需求應(yīng)該是：為用戶提供一個(gè)方便網(wǎng)上購(gòu)書(shū)的平臺(tái)（當(dāng)當(dāng)網(wǎng)在購(gòu)書(shū)方面做得成功之后，也開(kāi)始從事百貨、電子產(chǎn)品的工作）。

3.2 范圍層

網(wǎng)站的特性和功能構(gòu)成了網(wǎng)站的范圍層，決定某些功能是否成為該網(wǎng)站的功能之一，就是范圍層需要解決的問(wèn)題。

在信息空間方面，范圍是以內(nèi)容需求的形式出現(xiàn)：對(duì)各種內(nèi)容元素的要求的詳細(xì)描述。

例如，當(dāng)當(dāng)網(wǎng)要分類展示各種圖書(shū)的列表（包括書(shū)的封面、作者、出版日期、出版社、圖書(shū)介紹等），如下圖所示：   

以及按銷量圖書(shū)排行、最新上架圖書(shū)等信息。這些都屬于范圍層需要確定的內(nèi)容。

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

該層用于設(shè)計(jì)用戶如何到達(dá)某個(gè)頁(yè)面，并且在他們做完事情之后能去哪個(gè)地方。

在軟件方面，結(jié)構(gòu)層關(guān)注交互設(shè)計(jì)，即系統(tǒng)如何響應(yīng)用戶的請(qǐng)求。在信息空間方面，結(jié)構(gòu)層則是信息架構(gòu)在信息空間中內(nèi)容元素的分布。

以當(dāng)當(dāng)網(wǎng)為例，從點(diǎn)擊購(gòu)買(mǎi)書(shū)開(kāi)始，進(jìn)入提交訂單成功需要三個(gè)步驟，第一步是確認(rèn)購(gòu)物車內(nèi)容，顯示購(gòu)買(mǎi)的商品：   

    第二步是“確認(rèn)訂單信息”，如下圖所示：
   

    在上圖的頁(yè)面中，展示了用戶當(dāng)前設(shè)置的“收貨人信息”、“送貨方式”、“付款方式”、“商品清單”、“是否需要發(fā)票”和“是否使用禮品卡/禮券”，這些信息都可以在該頁(yè)面進(jìn)行修改，而這些信息，有一些同樣的購(gòu)物網(wǎng)站可能會(huì)通過(guò)多個(gè)步驟的頁(yè)面展示，但多個(gè)步驟如果操作不是很方便，會(huì)讓網(wǎng)站在這一步步中提高了購(gòu)買(mǎi)放棄率，筆者覺(jué)得當(dāng)當(dāng)?shù)挠唵翁峤唤缑孢€是比較方便的，這也是這么多年來(lái)一直是它網(wǎng)站忠實(shí)用戶的一部分原因。

3.4 框架層

     框架層用于優(yōu)化設(shè)計(jì)布局，以達(dá)到這些元素的最大的效果和效率。例如使你需要的時(shí)候，能記得標(biāo)識(shí)并找到購(gòu)物車的按鈕。

     不管是軟件界面還是信息空間，我們必須要完成信息設(shè)計(jì)：一種促進(jìn)理解的信息表達(dá)方式。在軟件產(chǎn)品那邊，框架層還包括了界面設(shè)計(jì)，或者也可以說(shuō)安排好能讓用戶與系統(tǒng)的功能產(chǎn)生互動(dòng)的界面元素。對(duì)于信息空間方面來(lái)說(shuō)，這種界面就是導(dǎo)航設(shè)計(jì)：屏幕上的一些元素的組合。

     例如在下圖的框架結(jié)構(gòu)中，上搜索，左分類、右內(nèi)容的框架是購(gòu)物網(wǎng)站常用的結(jié)構(gòu)，卓越、京東等網(wǎng)站基本都采用這種方式，展示“搜索”和“購(gòu)買(mǎi)”按鈕的都位于右邊，更方便勢(shì)力所及和鼠標(biāo)操作的方便，這些都是框架層需要定義的內(nèi)容：    

3.5 表現(xiàn)層

     在表現(xiàn)層，我們看到的是一系列的網(wǎng)頁(yè)，由圖片和文字組成，有一些圖片是可以點(diǎn)擊的，從來(lái)執(zhí)行某種功能，例如進(jìn)入到購(gòu)物車。一些圖片只是圖片，用于展示書(shū)的封面、網(wǎng)站logo等。

    不管是軟件產(chǎn)品還是信息空間，在表現(xiàn)層的關(guān)注點(diǎn)都是一樣的：視覺(jué)設(shè)計(jì)，或者說(shuō)最終產(chǎn)品的外觀。這層不但包括網(wǎng)頁(yè)內(nèi)容的位置安排，還包括網(wǎng)站的總體色調(diào)等內(nèi)容，例如當(dāng)當(dāng)網(wǎng)以橙色為主色調(diào)，京東商城以紅色為主色調(diào)，blogjava和CSDN以藍(lán)色為主色調(diào)等。