《用戶體驗要素》封面

面對“這張圖、這本書”以及“用戶體驗要素（五層次模型）”，如何評價？

——答：了不起的核心工作邏輯！

另存→保存→打印

2000-03-30（我讀初一）,本書作者Jesse James Garrett（簡稱：JJ）繪制了一個三維模型，就是上圖“用戶體驗要素（the elements of user experience）”用于解決“交互設計”的“用戶體驗”問題，幫助了成千上萬的設計師、開發(fā)者開展工作。

用戶體驗，真的是個很難理解、更難把控的東西！這個關乎“用戶行為、用戶心理”的感性指標，常常讓交互設計初學者“既迷茫，也抓狂”，本文、本書，堪稱：指南。

1.先了解一下，這是一個什么問題：

（1）什么是交互設計？

答：交互設計，是要創(chuàng)建和設計“人”與“產(chǎn)品、服務”之間有意義的關聯(lián)，從而達成使用者的目標。

（注意，定義即目的。）

交互設計，實際上是一個特別年輕的工種，它與“用戶行為、用戶心理”有關，通過“界面設計、交互設計”使得“可用性”和“用戶體驗”得達到較高標準。交互設計，廣泛涉及到一系列學科，例如：人類工程學、心理學、認知科學、信息學、工程學、計算機科學、軟件工程、社會學、人類學、語言學、美學等。這個工種，實際上在“工作內(nèi)容、工作方法”至今也沒有定論，但在目標上，它要求最終設計的成品，能同時滿足“可用性”和“用戶體驗”的高標準。

（2）為何做交互設計？

答：交互設計，是要創(chuàng)建和設計“人”與“產(chǎn)品、服務”之間有意義的關聯(lián)，從而達成使用者的目標。

（重復，目的即定義。）

從用戶角度來說，交互設計是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。交互設計還涉及到多個學科，以及和多領域多背景人員的溝通。

總結一下，要“可用性”高，且“用戶體驗”良好，這恐怕是個大難題！

2.JJ解決問題的思路？

實際上，在“網(wǎng)頁開發(fā)、軟件設計”的全部工作流程中JJ的“用戶體驗要素（五層次模型）”都已經(jīng)成為通用的工具模型。

之前人們的大部分方法論，恐怕大部分“要么太瑣碎（關注細節(jié)）、要么太漫長（關注能力）”，直到JJ提出了這個“既有系統(tǒng)性、又有實踐性”的方案！

這個方案的核心思路，是：抽象、模型！

——作者用“可視化”模型，來發(fā)現(xiàn)問題、解構問題。通過這個“精彩的模型”進行抽象，將“底層的工作邏輯”和“表層的工作方法”一并呈現(xiàn)給大家，然后從本質上回答了“問題到底：是什么、為什么、怎么樣？”這實在是了不起！

可能有人問，有多了不起？

大家不妨想象一下，我們常說“授人以魚，不如授人以漁”，其實是想表達“方法”的作用，而作者了不起的地方是：

結構化“漁”，告訴你底層邏輯，明白：為什么？

模型化“漁”，展示你底層規(guī)律，預見：怎么樣？

JJ進行結構化、模型化的過程中，有2個關鍵的“深度思考”（也是最有價值的挑戰(zhàn)）：

（1）深度挖掘，由表及里，剖析了“戰(zhàn)略層→范圍層→結構層→框架層→表現(xiàn)層”這個“自下而上”建立的模型，是如何發(fā)生“連鎖反應”的。

（2）將“網(wǎng)頁設計”與“軟件開發(fā)”作必要區(qū)分，從而“統(tǒng)籌”和“辨析”各種“易混淆”的概念，從而清晰地解構了工作任務，梳理出科學的流程。

說實話，這種“手術刀”一樣的視角，橫切、縱切，隨心所欲看到事物結構的本事，讓人佩服、值得學習。完成“橫切”和“縱切”之后，JJ得以向大家展示“全貌”和“結構”，接下來，具體說明結構作用的機理和規(guī)律就容易了。

3.JJ解決問題的方法？

（這段干貨超有用！感謝“小V企培”團隊，集中討論，團隊智慧，建議小伙伴們保存下來。）

有了“橫切”和“縱切”，接下來說明問題就變得相對輕松了。

（1）戰(zhàn)略層

主要解決“我們要不要做這個項目”的問題，回答的過程，就是尋找商業(yè)模式、發(fā)掘用戶需求的過程。

①商業(yè)目的（我們想要什么？）

②用戶需求（用戶想要什么？）

在這個層次，其實是不分“網(wǎng)頁”和“軟件”的（即：不縱切），因為無論網(wǎng)頁、軟件，都需要考慮這兩個問題。

（2）范圍層

在“戰(zhàn)略層”，確定了“商業(yè)目的”和“用戶需求”之后，其實“大致范圍”就定了，但“范圍”的“具體界限（或者說外延）”還沒有確定，這就是“范圍層”的意義：

①功能規(guī)格（做哪些功能？）

②內(nèi)容需求（給哪些內(nèi)容？）

（3）結構層

前面“范圍層”已經(jīng)列出了功能、內(nèi)容清單，接下來，就需要研究一下，這個“功能匯總”和“內(nèi)容匯總”如何有效組織起來，總不能隨便扔地上吧？又不是開跳蚤市場？——所以，超市的商品，是需要“分門別類”且“符合邏輯”的，類似于是“物流管理”的，這個活兒，交給“結構層”。

①交互設計（應為：功能設計）

②信息架構（仍叫：信息架構）

（4）框架層

說白了，“結構層”只是整理了一下“功能”和“內(nèi)容”，甚至，這個“整理”是個思維過程，并不是個具體行為。接下來，“框架層”才是那個真正“設計貨架、擺放商品”的人，而且還需要“設計路徑、規(guī)劃流程”，這個部分，才是用戶能看到的部分。

①界面設計

②導航設計

——③信息設計：無論是“軟件的界面”還是“網(wǎng)頁的導航”，其底層設計，是信息設計。這一步，不同于“結構層”的思維處理，是需要形成具體文檔的，即：信息架構圖。

（5）表現(xiàn)層

（建議改為：視覺層）

這層的工作，是視覺設計，也是很多初學者以為的“美工環(huán)節(jié)”，實際上，視覺設計的范疇，肯定會超過美術范疇。在方法上，有“對比/一致”的要求。在具體內(nèi)容上，包含：配色、字體、繪圖等。做的成熟了，還需要形成企業(yè)VI、CI系統(tǒng)。

JJ在論述時，還反復強調了“連鎖效應”，即：不僅有下層與上層的決定，也有上層對下層的反作用，交叉印證、連鎖反應。因此，能否進行“考慮成分、設計周密”的流程管理，將直接決定項目成敗。

4.敲黑板 劃重點

最后，提示大家，在本書當中JJ還分享了很多具體操作技能，包括且不限于：

降低閱讀負擔、聲音的妙用、有效呈現(xiàn)、UCD（用戶中心設計）、UED（用戶體驗設計）、戰(zhàn)略層決策、可視化文檔、FAQs、功能規(guī)格、內(nèi)容需求、場景、內(nèi)容清單、節(jié)點（node）、視覺詞典、配色方案、排版設計……

基于用戶體驗要素的交互設計流程-來自網(wǎng)絡