我是怎麼看《用戶體驗五要素》的？
《用戶體驗要素》的作者Jesse James Garrett是美國用戶體驗諮詢公司Adaptive Path的創始人之一，2005年他發表了《Ajax：A New Approach to Web Applications》這篇文章，標誌著Ajax的誕生，因此他在又被稱為「Ajax之父」。《用戶體驗要素》的中文版第1版比英文版整整晚了6年，英文版在2001年就出了，國內常見的是2010年出版的中文版第2版，書里的概念在互聯網設計界廣為流傳，非常值得閱讀。
讀這本書要注意透過現象看本質，也就是通過它描述的那些分層看清楚作者到底在寫什麼，而不是分析產品的時候用所謂的「五要素」去嵌套，只能看懂分層理論卻不知道該怎麼應用到產品上，那只是紙上談兵。
用戶體驗
20年前的互聯網世界遠沒有今天這麼繁華，用戶可以挑選的互聯網產品種類其實並不多，因此初代互聯網世界的產品設計師們往往過分關注產品本身，力求以優質的產品在市場佔據競爭優勢，而忽略了用戶群的真實需求。
後來互聯網產品越來越豐富，企業開始拚命爭搶有限的用戶資源，因為供需關係的變化，用戶的訴求變得越來越珍貴起來，因此作者結合業內的討論也提出了「以用戶為中心」的設計方法論，認為「用戶體驗就是商機」，並且認為轉化率是比客戶忠誠度更加易於測量的有效手段。
初次閱讀本書的讀者很容易陷入「用戶體驗做好了就是設計做好了」這種新手觀念里，其實「以用戶為中心」也只是企業在市場上的一種競爭策略，它和「以產品為中心」這種理念相比並沒有必然的好壞之分，只能說現在的時代更適合「以用戶為中心」的設計方法論，所以企業為了賺錢就採用了，它實際上還是為了商業利益服務的。
五要素
作者提出的產品設計的五要素是圍繞著網站來構建的，目前的互聯網產品包含網站、h5頁面、app、公眾號、小程序等許多種類，很多新型的互聯網產品在作者寫這本書的時候壓根沒有出現，所以作者只考慮了網站。如果大家要參考裡面的設計方法，必須要考慮到這些設計方法的局限性，不要盲目抄襲。
戰略層
1.產品目標
①商業目標：企業為了達成盈利的目的需要產品滿足的目標，互聯網產品里多以商家廣告、用戶變現、平台抽成的形式存在；
②品牌識別：書里只是簡單提起品牌的事，其實品牌的識別在界面上往往是以LOGO或者小標的形式呈現的，而整體的品牌形象塑造必然和整個企業的方方面面都聯繫在一起，設計師對品牌塑造的作用並不大；
③成功標準：這是指產品內可以用於考核的KPI數據指標，目前業內已經有了成熟的考核手段，基本上從業兩年以上的成熟產品經理對數據的埋點追蹤、項目預算、項目時間表這種基本工作都能處理的很好。
2.用戶需求
①用戶細分：絕大多數互聯網產品都是在現有市場的紅海里掙扎，要想精準籠絡目標用戶群，就必須為你的目標用戶進行垂直細分。書里提到的人口統計學和調研都是大企業才能搞定的調研方法，比如三星在做手機的時候就曾經採納過人種學家的建議，但是這種方法消耗人力資源和錢都比較多，中小型企業的設計師懂得發問卷和用戶訪談就足夠了；
②可用性和用戶研究：這裡提到了一些具體的調研方法，比如問卷調查、用戶訪談、焦點小組、現場調查，很多方法都挺實用的，但是書里並沒有詳細解釋怎麼實現這些套路，大家想學的話用不著讀這本書，百度搜一下關鍵詞就會有特別詳細的步驟可供參考；
③創建人物角色：就是俗稱的人物建模或者用戶畫像，它本質上是給你的目標用戶群一個典型的人物側寫，讓你搞清楚用戶的特性和需求。人物建模是一種典型的歸納總結，用一個虛擬的人物模型把你的全部用戶群收納歸類，基本上就可以搞清楚你的主流用戶對產品有哪些訴求了。
戰略層的制定一般都是由企業或者團隊高層負責的，在中小型團隊里因為人員層級較淺，基本上每個員工都擁有對戰略的建議權，但是決策權仍然會掌握在老大手裡，所以這本書雖然是推薦給交互設計師來學習的，產品的目標制定卻是專門針對產品經理，普通的設計師看看用戶需求里提到的用戶調研和人物建模就夠了。
值得一提的是，書里提到產品目標和用戶需求經常被定義在一個正式的戰略文檔或者願景文檔中，這裡的「戰略文檔或者願景文檔」指的就是需求文檔，它通常由產品經理撰寫，限定了產品的商業目標和用戶需求，這是產品經理日常工作中的一項基本功，也是下文範圍層重點要做的事情。
範圍層
功能規格：這指的是產品所包含的功能和流程。戰略層獲得的用戶需求只是一種虛浮的描述，要想把用戶想要的東西實現出來，必須要落實到具體的功能上，如何將需求落實到功能就需要產品經理來劃定範圍，這在日常工作中通常是以需求文檔的形式呈現的。
內容需求：這指的是產品內需要運營支持的內容信息。比如說新聞類產品，哪怕我們設計好了這款產品的全部功能，它的核心還是供讀者閱讀的新聞內容，這些新聞內容不是設計師能設計出來的，而是內容團隊原創或者從其他媒體平台上轉接來的——我們可以設計上傳新聞、分享新聞、下載新聞的功能，但是新聞內容無法憑空設計出來，這就是產品對內容的需求。
要理解範圍層其實非常簡單，它本質上就是把虛無縹緲的需求變成踏實可見的功能。
比如說企業希望增加用戶的活躍度，這是項目團隊接到的企業需求，但是這只是一種「意向」或者說「想法」，你不可能對著界面念一句「求你增加活躍度！」它就真的能增加活躍度了，要想在產品上把需求實現出來，就要把需求轉化為功能，比如說在消息欄不斷推送一些能增加活躍度的信息，或者開闢一個社區模塊，又或者添加搖一搖的功能等等，這些都是增加活躍度的方法。
需求來源於企業和用戶的訴求，他們想要什麼決定了設計師要做什麼東西出來，但是同一種需求的實現形式五花八門。比如用戶想要在社交產品上和陌生異性更多交流，有的產品直接在首頁上發布各類美女的圖片，有的產品會添加「耳語」這種純聲音的隨機聊天窗口，有的產品會根據LBS找到附近想要聊天的陌生異性。
戰略層只是找到企業和用戶的訴求，把它們想要達成的目標明確化；範圍層要做的事情就是給功能和內容劃定範圍，告訴設計師具體要實現什麼東西，然後經過刪減分組排布（可參考《簡約至上》）後形成產品的雛形——我們的產品到底要實現哪些功能，在範圍層就以需求文檔的形式明確出來了。
結構層
1.交互設計
書里提到的交互設計和目前的互聯網交互設計概念有很大的不同。作者認為交互設計應該重點關注用戶的行為，核心是幫助軟體開發者為網頁的使用者提供更好的用戶體驗，但是在如今的互聯網行業，交互設計師的主職工作卻是信息架構和界面設計，互聯網產品也在網站之外衍生了超多的新品類（比如app、公眾號等等），所以書里的概念目前僅供參考吧。
2.信息架構
樹形結構：互聯網產品的導航通常呈現出樹狀圖的形式，從上至下的信息架構能完整地容納產品的所有內容。信息架構的基本單位是節點，比如說微信的「發現」就是一處節點，通過它可以打開下一層級的「朋友圈」、「遊戲」、「小程序」等新節點，這樣層層嵌套，就會形成微信的全部信息架構。
矩陣結構：偶爾會有產品呈現矩陣結構，這種結構的優勢是可以讓帶著不同需求的用戶各自找到他們想要的東西。比如說大眾點評的分面導航，它在同一層級里採用了多種不同的分類方式，用戶可以在餐品分類、推薦美食、吃飯地點這些選項里任意選擇，都可以通往他想要的店鋪，這就是矩陣結構。
線性結構：線性結構的特點是每一步都只有一個出口和一個入口，用戶在當前頁面要麼返回，要麼進行下一步，所以他只能沿著「一條線」不斷往下前進。比如說註冊賬號，設計師在註冊流程里往往只給用戶「步驟1」、「步驟2」、「步驟3」、「完成」這類提示，用戶除了繼續註冊就只能選擇離開，沒有多餘的東西分散他的精力，這就是線性結構的典型使用場景。
書里還提到了自然結構和自下而上的信息架構，這種結構現在已經很少見了，算是被互聯網時代淘汰了吧，對設計師的參考價值不大。
結構層的要點是為產品劃分層級結構。如果說戰略層告訴了我們要實現哪些目標，範圍層限定了我們要做哪些功能，結構層就是為這些功能劃分層級、建立流程，就像微信里有海量的功能，但是它的信息架構第一層級只有四個標籤（微信、通訊錄、發現、我），其他功能都被嵌套在這四個標籤里，它的海量功能其實有著非常嚴謹的包含關係。
框架層
1界面設計
界面設計要做的全部事情就是選擇正確的界面元素。界面元素的種類繁多，書里列舉了複選框、單選框、文本框、下拉菜單、多選菜單、按鈕等一系列網站設計中常用的控制項，在2001年的時候這些控制項就已經出現了，至今仍在大量使用，但是作者寫這本書的時候並沒有預料到目前的互聯網行業有多麼繁榮，所以近些年出現的很多新控制項都沒在書里。
目前ios平台和安卓平台都有完善的設計規範可供參考，網上也可以找到海量的控制項模板，只要耐心積累，多觀察其他界面的設計優劣，這些基本功很容易就能打結實的。
另外有一點要注意，在2008年移動互聯網盛行以前，界面設計指的工作崗位往往是由一位設計師獨立承擔的，這就是廣義的UI設計師（User Interface：用戶界面），那時的UI設計師主要負責的設計任務就是網站的界面設計，他們的工作核心就是「實現功能」——把產品經理在範圍層劃定的功能實現到界面上來。
但是在2008年移動互聯網盛行以後，UI設計師的工作職責就逐漸開始細分起來了，國內的互聯網行業以北上廣深這些一線城市的名企為首，把UI設計師徹底分為了交互設計師和視覺設計師，交互設計師負責信息架構和界面框架，視覺設計師負責視覺效果和切圖，我們在幾年前常聽到的「UI設計師」就是指一個人就把界面從交互到視覺都實現出來的設計師，現在基本上已經劃分為交互和視覺兩大塊了。
所以大家在讀這本書的時候尤其要注意，不要把書里的界面設計師和現在我們所講的界面設計師混為一談，它們名字一樣，負責的崗位職責卻各有不同，你要搞清楚自己乾的活到底是框架層還是表現層，關鍵看你到底做了那些事，而不是你的崗位名稱叫什麼。
2導航設計
導航指的就是指引用戶前往他想要去的地方的指路牌，產品里的導航形式有很多，每年也都會有些新的導航出來，它在框架層也是設計框架的要點之一，大家最常見的就是分類導航和分面導航，這點沒什麼可說的。
書里提到了很多導航的邏輯形式，比如全局導航、局部導航、上下文導航、網站地圖等等，我認為新手學習導航最好的辦法就是多畫信息架構，你在網上或者應用商店找那麼幾十個產品畫出他們的信息架構，臨摹下他們的導航展示形式，自然就慢慢摸會了。
不要看不起這種笨辦法，笨辦法往往有奇效而且並不怎麼降低你學習的效率，如果你總是琢磨這些邏輯性的東西，企圖看懂了文章就掌握了技能，這隻能騙騙你自己，將來下筆的時候還是不知道該怎麼畫。
3信息設計
書里對信息的設計寫了幾頁的篇幅，總共就提到了兩個關鍵點：「信息排序」和「分類整理」。每個界面上呈現的信息都有重要程度上的排序，優先展示重要的信息，把不重要的信息隱藏起來，同類信息進行歸類，這些都是我們常用的信息整理方法。
作者是根據網站的界面來寫這篇文章的，所以他認為在做信息設計的時候要把整個界面的信息都結合起來考慮，但是在某些網站或者app裡面，有時候一張頁面裡面可能會有多個設計團隊分別處理裡面的模塊（大企業的分工制度很完善），比如整個首頁一部分劃給你做商城，一部分話給我做社交，這時候的信息設計就是局部的信息設計了，合起來的時候還是要考慮整體信息呈現的一致性的。
另外，對於條目的信息設計是更細緻的功夫，這尤其考驗設計師對用戶的把握。比如商城的推送往往和價格結合在一起，文章的閱讀經常會有閱讀量的展示，遊戲和應用是按照下載量在排行榜展示的，這些都是因為用戶對這些數據比較關注，所以設計師才會把它們呈現在外面。
4線框圖
很多人會懷疑，線框圖還需要專門練習嗎，只要懂得繪製鉛筆畫，任何人都能用線框把界面繪製出來，這似乎是一種初上手就能學會的技術，這也是大多數人覺得交互設計師和產品經理入行不需要門檻的原因。
在這本書里，線框圖的講解只佔了不到四頁的篇幅，作者似乎並不看重它的作用，實際上線框圖沒有那麼簡單，它是把設計師對用戶的了解、對功能的剖析、對界面的設計呈現出來的最終結果，我贊同作者的看法，線框圖是對頁面中所有組成部分最直觀的描述，只要能把它畫出來就算把功能落實了。
但是遺憾的時候，目前互聯網行業的交互設計師還是需要練習繪製線框圖的，不僅要練習繪製，還要懂得怎麼把線框圖變成完整的交互文檔，這並不是為了更好的呈現想法，而是為了減少溝通成本。
公司的員工各司其職，你不能指望運營同事和研發同事能通過一張簡單的線框圖理解你的全部意思，完整的交互文檔必須有完備的標註，考慮到各種異常情況的應對，頁面跳轉的關係，甚至是精確到像素級別的線框圖形（部分大企業有這種要求，中小型企業的產品界面往往是落到視覺設計師手裡的時候才會精確到像素級），這些詳細的描述都是為了更好地減少溝通成本。
完備的標註能夠削減大量潛在的風險，一方面幫助系統提前解決掉大量BUG，另一方面也能避免因漏洞產生的損失，這些都是很有必要的，線框圖可以說是前面從戰略層、範圍層、結構層到框架層最終凝練出的界面成果，是產品成型的最後一道防線，希望大家不要掉以輕心。
表現層
創建感知體驗
作者眼中的表現層包含了所有用戶能接觸到的感官體驗，包括拿到電腦的觸感、耳朵里聽到的開機聲音、眼睛裡看到的多彩畫面，這些都屬於表現層的一部分，對於工業產品來說表現層代表了用戶對產品形成的印象，而對於互聯網產品來說，考慮到表現層基本上只要考慮視覺效果就可以了。
視覺焦點：人類的視覺焦點會隨著界面元素不斷移動，焦點的移動軌跡會沿著「動畫 > 圖片 > 關鍵字 > 普通內容」的順序前進，優先會被動畫吸引，其次才會被圖片和標題吸引（由此你可以知道那些總在網頁右下角彈出來的動畫廣告有多煩了吧~~屠龍寶刀，點擊就送！），在閱讀的時候會沿著「F型」的軌跡移動。
對比和一致性：視覺的對比和一致性在任何視覺教學課程、藝術學院的授課里都有詳細的闡釋，就連那些講「PPT該如何製作」的視頻里也充斥著各種講解，對比和一致性的確是視覺領域最常用的概念，這就是老生常談了，這裡不講。
配色方案和排版：整套的配色方案應該和品牌形象結合在一起，不懂得取色的可以用取色板調節，這些視覺的設計方法網上有超多的大神可以教授，就不用在這本書里尋求指路明燈了，與其在這裡看它的文段，還不如在站酷上找個高手學兩招管用呢。
值得注意的是，書里提到的網站柵格方法至今還有很多企業在用（因為真的很好用），即使是移動端的app也可以使用柵格的辦法保持一致性。柵格只是一種讓界面元素保持一致性的設計方法，並不是什麼神秘兮兮的高科技工具，原理就是把整個界面切割成統一規格的方塊，對初創團隊來說沒那麼必要，有它過年沒它也過年——但是視覺規範還是要制定的，可以大幅度減少後期的修改成本。
要素的應用
馬拉松和短跑：書里提到的這兩種產品形態，馬拉松指的是長期迭代的產品（多供給於C端），短跑指的是一次性交付的產品（多供給於B端或者硬體設備），作者之所以在書中會對那些企業家舉馬拉松和短跑的例子，是因為傳統企業售賣的產品往往是離手便交易完成的一次性交付的產品，比如買瓶水或者買個蘋果，買定離手就算交易完成了，但是用戶體驗類型的產品需要「圈住」用戶，網站要不斷的有用戶訪問才會產生價值，所以作者用馬拉松和短跑的例子勸說那些傳統企業家，他做的網站和傳統的商品是完全不同的兩碼事。
目前互聯網行業的產品大多都是「馬拉松型」的，需要不斷迭代才能維持住競爭力，一次性交付的產品大多是硬體設備或者針對B端的打包服務，但是隨著競爭的愈發激烈，這種一次性交付的產品也逐漸向著迭代型產品過渡了。
比如原本買完就算交易完成的B端後台系統，現在從一次性買斷變成了不斷推出後續服務，簽訂長期合同；手機從十年前的買定離手，變成了買到手裡後系統可以不斷更新，只是更新頻率沒有app那麼高，像蘋果或者小米就總會隔段時間就來個更新，以前可沒有這種事。這不是這些廠家主動迎合互聯網浪潮產生的變化，而是市場競爭加劇，不這麼變公司就活不下去了，所以產品的更新往往是因為市場的更新，作者在文中也是這個意思，產品從短跑變成了馬拉松。
最後總結
相信大家也看出來了，所謂的用戶體驗五要素的分層理論，其實目前的互聯網企業里已經有了相當嫻熟的應用，它就是你的日常工作，只是從範圍層變成了俗稱的需求文檔，從框架層變成了俗稱的交互文檔，各方各面其實在工作中都可以看到它的影子。
這就是設計方法論，它提出的是一種概念而不是具體的指導方法，你可以從這些文章里學習到設計的理論，卻不能從職場新手變為成熟的工作者，如果你想更好地完成交互設計工作，還是多積累些需求文檔和交互文檔的工作經驗吧。
推薦閱讀：