用實(shí)戰(zhàn)案例，帶你解讀經(jīng)典書籍《用戶體驗(yàn)要素》

第一次接觸用戶體驗(yàn)要素這本書還是好幾年前了，當(dāng)時看這本書還不是很深刻，有些地方甚至看不懂，完全沒有概念.前陣子重新翻看了一下這本書，發(fā)現(xiàn)和現(xiàn)在的思考點(diǎn)有了很多共鳴.我結(jié)合書上的內(nèi)容和自己的理解與想法現(xiàn)在把它分享出來～希望能對你有所幫助。

我們整天都在說用戶體驗(yàn)，設(shè)計師要站在用戶的角度思考問題，幫助用戶解決問題，優(yōu)化產(chǎn)品操作流程及視覺層級的排布，作為設(shè)計師我們這么做的目的到底是什么，我們?yōu)槭裁匆獮榱艘粋€體驗(yàn)細(xì)節(jié)和產(chǎn)品去討論，去爭執(zhí)。

因?yàn)槲覀兪巧虡I(yè)設(shè)計師，商業(yè)設(shè)計師要站在公司的角度去思考問題，我們通過用戶體驗(yàn)優(yōu)化主要解決兩個問題，一個是商機(jī)，一個是品牌.怎么樣通過設(shè)計讓用戶行為路徑變短變效率，直接影響用戶的留存，這個產(chǎn)品的體驗(yàn)好與不好影響著品牌在用戶心中的印象.之前在做UI設(shè)計師的時候一直都沒有思考過關(guān)于品牌對于一個設(shè)計師關(guān)聯(lián)到底有多大，移動端上的產(chǎn)品不像很多實(shí)體，實(shí)體產(chǎn)品主要是依靠它的廣告，實(shí)體店，質(zhì)量，價格，包裝，功能和使用等來給用戶建立品牌形象的.而移動端，主要依靠這個產(chǎn)品的內(nèi)容，或是一個完整的操作流程的體驗(yàn)結(jié)合線下來體驗(yàn)的.體驗(yàn)的好與不好直接會和商機(jī)和品牌形象聯(lián)系上。

商機(jī)：優(yōu)化操作步驟，提高效率，提高轉(zhuǎn)換率 例接送機(jī)簡表單設(shè)計。

品牌：提高用戶對品牌的認(rèn)知，愉悅的用戶體驗(yàn)會給用戶留下深刻的品牌印象及信任感。

戰(zhàn)略層：產(chǎn)品的目標(biāo)方向，想要用戶在產(chǎn)品上做什么事情，帶來的收益是什么。

范圍層：產(chǎn)品整體的功能類別，圍繞著戰(zhàn)略層這個產(chǎn)品都該有哪些功能。

結(jié)構(gòu)層：根據(jù)戰(zhàn)略目標(biāo)以及功能思考產(chǎn)品核心功能應(yīng)該在哪里出現(xiàn)，以及大致的體驗(yàn)流程。

框架層：頁面的具體功能擺放，信息布局，整體頁面交互流程。

表現(xiàn)層：頁面最終給用戶呈現(xiàn)的視覺效果。

產(chǎn)品的整體產(chǎn)出到用戶使用，它是通過戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層及表現(xiàn)層一步一步實(shí)現(xiàn)的.他們之間都有著緊密的關(guān)系，如果從戰(zhàn)略層錯了，那整個產(chǎn)品都會失敗，如果是功能與用戶預(yù)期的不一樣，不是用戶想要的，相同的也會失敗.所以從第一步開始就至關(guān)重要。

戰(zhàn)略層

開始做設(shè)計前要先想清楚這兩件事情

怎么樣引導(dǎo)用戶達(dá)成用戶目標(biāo)從而完成公司戰(zhàn)略目標(biāo)，只有當(dāng)用戶實(shí)現(xiàn)了目標(biāo)公司才能實(shí)現(xiàn)戰(zhàn)略目標(biāo)。

用戶需求可通過：問卷調(diào)查、用戶訪談、焦點(diǎn)小組、市場調(diào)查、現(xiàn)場調(diào)研等方法來提取核心點(diǎn)。

隨著公司的不斷壯大，它的戰(zhàn)略也會發(fā)生改變，戰(zhàn)略可能是一個大戰(zhàn)略會細(xì)分到不同的小戰(zhàn)略，他們的目標(biāo)都是在這個大戰(zhàn)略的基礎(chǔ)上。

范圍層

當(dāng)把用戶需求和產(chǎn)品目標(biāo)轉(zhuǎn)變成產(chǎn)品應(yīng)該提供給用戶什么樣的內(nèi)容和功能時，戰(zhàn)略就變成了范圍層。

定義項(xiàng)目范圍包含2個方面，即產(chǎn)品功能和產(chǎn)品內(nèi)容，功能與內(nèi)容針對不同類型的產(chǎn)品，有的是2者都重要，有的更重功能，有的更重內(nèi)容，根據(jù)產(chǎn)品戰(zhàn)略，它們的權(quán)重是不一樣的。

比如，QQ音樂，簡書，keep等它們更重內(nèi)容.比如騰訊地圖，支付寶等更重功能。

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

有了戰(zhàn)略級目標(biāo)和產(chǎn)品的核心功能，這時候我們要在結(jié)構(gòu)層里梳理出產(chǎn)品功能的信息框架，按照戰(zhàn)略強(qiáng)相關(guān)的功能優(yōu)先展示，哪個頁面該展示哪些功能，以及展示的順序和大體的流程.交互設(shè)計師把控信息架構(gòu)的合理性，以及前后關(guān)系操作起來是否高效。

框架層

我們通過框架層的定義，這時候就可以開始細(xì)化頁面的信息框架了.交互設(shè)計師在設(shè)計交互流程圖的時候會考慮很多的設(shè)計點(diǎn)，如何將功能信息有效的組織起來，信息之間的關(guān)系如何排布，在當(dāng)前的場景下應(yīng)該使用什么樣的交互控件，功能樣式統(tǒng)一性，用戶使用起來是否方便，前后之間的邏輯等問題，交互流程圖是需要反復(fù)思考和驗(yàn)證的。

表現(xiàn)層

到了表現(xiàn)層，UI設(shè)計師會根據(jù)產(chǎn)品的戰(zhàn)略，功能，以及內(nèi)容，根據(jù)市場的調(diào)研分析，使用人群等來判斷這塊產(chǎn)品從視覺上要傳達(dá)給用戶什么樣的設(shè)計感覺出來，比如專業(yè)的，親民接地氣的，高大上的，二次元的等視覺表現(xiàn)形式.在設(shè)計當(dāng)中利用顏色及空間劃分視覺層級，通過不同平臺思考設(shè)計表現(xiàn)形式，梳理控件樣式形成規(guī)范性及統(tǒng)一性.整體視覺樣式盡量做減法，讓用戶輕松看到核心內(nèi)容以及核心操作。

我們來舉個例子，當(dāng)然這個只是一個大致的樣子，實(shí)際上一個產(chǎn)品從無到有遠(yuǎn)比這個要復(fù)雜的多，每一層要素都會拆解出不同的點(diǎn)來具體分析具體應(yīng)用，都會有專業(yè)的團(tuán)隊(duì)去應(yīng)用分析.下面幾步只是一個示意，大家看一下就好。

滴滴專車案例

這個很有意思，前一陣子看了阿里的一片文章，17年設(shè)計師發(fā)展趨勢，不去定義UI，或是UE設(shè)計師，而是叫UXD。其實(shí)我們在互聯(lián)網(wǎng)公司，很多時候已經(jīng)區(qū)分不出UI和UE了，我們都是在做設(shè)計體驗(yàn)提升的事情，視覺要參與到交互，交互也要參與到視覺，只是大家會有一個偏重，討論的內(nèi)容也都是如何優(yōu)化設(shè)計，優(yōu)化流程，所以設(shè)計師不該只給自己定義到一個只會畫圖或是畫線框圖的角色，要擴(kuò)充橫向的維度，才會更加專業(yè)。

阿里那篇文章：《2017年設(shè)計師該如何轉(zhuǎn)型？來看阿里UED掌門人的演講！》

歡迎關(guān)注滴滴創(chuàng)意設(shè)計中心：

「設(shè)計師讀書筆記系列」

1. 《設(shè)計師讀書筆記連載系列之<簡約至上>》
2. 《設(shè)計師讀書筆記連載系列之<Don’t Make Me Think>》
3. 《設(shè)計師讀書筆記連載系列之<設(shè)計師要懂心理學(xué)>》
4. 《取其精華！設(shè)計師讀書筆記系列之<ABOUT FACE 3交互設(shè)計精髓>》
5. 《取其精華！設(shè)計師讀書筆記連載系列之《設(shè)計中的設(shè)計》》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com