《用戶體驗(yàn)要素》這本書，按照產(chǎn)品的整個(gè)生命過程耍铜，清晰展示了關(guān)于用戶體驗(yàn)的五個(gè)要素。
從用戶體驗(yàn)出發(fā)陡舅，產(chǎn)品設(shè)計(jì)五要素分別是：戰(zhàn)略層伴挚、范圍層、結(jié)構(gòu)層颅眶、框架層田弥、表現(xiàn)層。
首先是產(chǎn)品設(shè)計(jì)五要素的整體框架圖：
五要素解讀：
為做出一款產(chǎn)品，我們依據(jù)Why-How-What黃金圈法則只泼，從內(nèi)到外將問題拆分為一下3類：
1. 為什么做请唱？—— “我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品？”（戰(zhàn)略層）
我們的產(chǎn)品目標(biāo)是什么聚至？我們的目標(biāo)用戶是誰孽惰？我們?yōu)橛脩艚鉀Q什么問題（需求）？
2. 做什么？—— “我們要開發(fā)的是什么狂鞋？”（范圍層）
我們的產(chǎn)品定位是什么潜的？功能型產(chǎn)品，還是內(nèi)容型產(chǎn)品信不？相應(yīng)地應(yīng)該擁有哪些功能和內(nèi)容？
3. 怎么做硫戈？——“我們?nèi)绾芜_(dá)到上述抽象層面所確定的問題下硕？”（結(jié)構(gòu)層、框架層霜幼、表現(xiàn)層）
我們的產(chǎn)品具體做成什么樣子誉尖？要如何呈現(xiàn)給用戶?
可以看到，從前兩層到后三層萝衩，我們的關(guān)注點(diǎn)從抽象的決策和范圍問題没咙，轉(zhuǎn)移到更能影響最終用戶體驗(yàn)的具體因素上祭刚，下面分別具體介紹這五個(gè)體驗(yàn)要素。
（一） 戰(zhàn)略層
成功的用戶體驗(yàn)涡驮，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”捉捅。知道企業(yè)和用戶雙方對(duì)產(chǎn)品的目標(biāo)和期許，有助于促進(jìn)各方面戰(zhàn)略的確立和制定寄月。
這一層我們要回答兩個(gè)問題：
- 我們要通過這個(gè)產(chǎn)品得到什么无牵？
- 我們的用戶要通過這個(gè)產(chǎn)品得到什么？
相對(duì)應(yīng)的克懊，我們就要確定企業(yè)的產(chǎn)品目標(biāo)和用戶需求。
（1）產(chǎn)品目標(biāo)
比如說墙懂，替公司賺錢或是省錢扮念；用戶量積累到什么級(jí)別；還有王健林的那句“比方說我先掙它一個(gè)億”场躯。當(dāng)然旅挤，產(chǎn)品目標(biāo)的確立應(yīng)該要建立在了解其影響力的基礎(chǔ)上粘茄。
一個(gè)基礎(chǔ)目標(biāo)就是品牌識(shí)別：
- 一方面，是較為淺層的視覺設(shè)計(jì)柒瓣，即：商標(biāo)芙贫、色調(diào)和字體設(shè)計(jì)。
- 另一方面魂仍，更深層的拣挪，是用戶在與產(chǎn)品交互時(shí)，（有意或無意）刻印在用戶腦海中關(guān)于企業(yè)的品牌形象赊舶。
為了衡量產(chǎn)品目標(biāo)是否實(shí)現(xiàn)赶诊，也需要設(shè)立一些成功標(biāo)準(zhǔn)：
- 好的標(biāo)準(zhǔn)甫何，既能夠與用戶行為綁定，又能通過某些設(shè)計(jì)影響用戶行為辙喂。
（2）用戶需求
比如說巍耗，淘寶的購物車功能，用戶希望可以與親朋好友共享購物車的商品灸蟆，就是一個(gè)用戶需求亲族。
研究用戶需求要關(guān)注用戶群體的差異性，明確人群是誰和他們的對(duì)應(yīng)需求是什么斋枢，警惕“我們即用戶”的思維誤區(qū)知给。
這里我們只簡(jiǎn)單列出一些可以進(jìn)行用戶研究的方法：
1.市場(chǎng)調(diào)研方法：如問卷調(diào)查涩赢、焦點(diǎn)小組等，用來收集用戶普遍觀點(diǎn)和感知
2.現(xiàn)場(chǎng)調(diào)查：了解日常生活情景中的用戶行為
3.用戶測(cè)試：用來測(cè)試（低/高）保真原型怯邪，觀察用戶反應(yīng)
經(jīng)過研究后花墩，進(jìn)行用戶細(xì)分，將用戶劃分成較小的搂捧、有共同需求的小組懂缕。對(duì)于典型用戶搪柑，通過創(chuàng)建用戶畫像，即：將代表用戶真實(shí)需求的虛擬人物弱睦，與人物照片渊额、個(gè)人資料垒拢、以及用戶需求等關(guān)聯(lián)求类。
（二） 范圍層
當(dāng)把產(chǎn)品目標(biāo)和用戶需求轉(zhuǎn)變?yōu)楫a(chǎn)品應(yīng)該提供給用戶什么樣的功能或內(nèi)容時(shí)屹耐，戰(zhàn)略就變成了范圍。
范圍層的意義在于：為產(chǎn)品設(shè)立邊界寿弱，讓參與者更能明白做出來的產(chǎn)品是什么樣的按灶，也避免給產(chǎn)品不斷加入新功能，造成產(chǎn)品冗余地沮。要知道羡亩，增加需求可比克制需求要容易的多畏铆。
這一層，我們要回答：我們要開發(fā)什么楷怒？
（1）功能型產(chǎn)品
（2）功能型產(chǎn)品
- 以功能型產(chǎn)品來說：做什么功能瓦灶？不做什么功能贼陶？哪些功能先做？哪些功能可以放在后續(xù)版本迭代時(shí)再做烘贴？
- 針對(duì)內(nèi)容型產(chǎn)品撮胧，也有類似的要求。
這時(shí)就牽扯到锻离，當(dāng)功能太多時(shí)纳账，確立需求優(yōu)先級(jí)的問題捺疼。這時(shí)，可以利用戰(zhàn)略層的用戶畫像可以將虛擬人物放到一個(gè)故事中卧秘，確定用戶的使用場(chǎng)景官扣。
（三） 結(jié)構(gòu)層
在定義好用戶需求并排列好優(yōu)先級(jí)之后惕蹄，我們對(duì)最終產(chǎn)品會(huì)擁有什么特性已經(jīng)有了清楚的圖像。但是遭顶，這些需求如何將分散的片段組成一個(gè)整體泪蔫，就是結(jié)構(gòu)層的問題撩荣，即：確定概念結(jié)構(gòu)。
這部分包括兩方面：“交互設(shè)計(jì)”和“信息架構(gòu)”
（1）交互設(shè)計(jì)考慮的是跳轉(zhuǎn)邏輯逛拱，即：針對(duì)用戶操作台猴，產(chǎn)品要怎樣反應(yīng)來配合用戶操作。
這里就設(shè)計(jì)及到一個(gè)“概念模型”的概念旁舰，就是說：將產(chǎn)品的某個(gè)特性處理成用戶熟悉的概念嗡官。如：電商中購物車的概念模型就來自于超市的購物車衍腥，對(duì)應(yīng)可以給它“放東西纳猫、拿東西出來”芜辕，電商中的購物車也就擁有“添加商品块差、從購物車刪除”這樣的形式。
這里要注意兩方面的問題：
- 不用將概念模型明確傳達(dá)給用戶憨闰，譬如：網(wǎng)站想向真實(shí)雜志那樣状蜗，設(shè)置“翻頁”界面。
- 不要輕易打破用戶默認(rèn)的思維習(xí)慣鹉动，譬如： 微博發(fā)送新內(nèi)容的“添加”按鈕從頁面最下菜單欄的中間轧坎，切換到首頁的右上角。
（2）信息架構(gòu)考慮的是內(nèi)容的分類組織方式泽示，讓用戶能夠高效缸血、有效地游覽內(nèi)容。
這里涉及到結(jié)構(gòu)化內(nèi)容械筛，可以把一個(gè)個(gè)產(chǎn)品內(nèi)容當(dāng)做一個(gè)節(jié)點(diǎn)node捎泻，然后將這些節(jié)點(diǎn)有序的組織起來。
具體的結(jié)構(gòu)方式有：層級(jí)結(jié)構(gòu)族扰、矩陣結(jié)構(gòu)、自然結(jié)構(gòu)定欧、線型結(jié)構(gòu)等渔呵，我們可以根據(jù)自己的產(chǎn)品特點(diǎn)來進(jìn)行針對(duì)性的設(shè)計(jì)。
（四） 框架層
在框架層砍鸠，確定詳細(xì)的界面外觀扩氢、導(dǎo)航和信息設(shè)計(jì)。
（1）界面設(shè)計(jì)：為用戶提供“做某事”的能力爷辱，即實(shí)現(xiàn)確定的“具體功能”录豺。
對(duì)可交互控件選擇合適的位置布局，這些控件能夠讓用戶容易理解和接受饭弓，從而幫助他完成任務(wù)双饥。
（2）導(dǎo)航設(shè)計(jì)：為用戶提供“去某個(gè)地方的能力”。
簡(jiǎn)單來說弟断，就是幫用戶找到方向感咏花。《Dno't Make Me Think》一書中，Steve Krug 拿用戶在購物商場(chǎng)依據(jù)商場(chǎng)導(dǎo)航系統(tǒng)尋找商品的一系列體驗(yàn)流程做類比昏翰；但另一方面苍匆，網(wǎng)絡(luò)不同于物理空間，在網(wǎng)絡(luò)中棚菊，用戶本身就是“迷路的”浸踩。因此，我們要通過導(dǎo)航設(shè)計(jì)统求，具體化網(wǎng)站的層次結(jié)構(gòu)检碗，來彌補(bǔ)用戶缺失的空間感，營造出“位置”的感覺球订。
導(dǎo)航有明顯的兩個(gè)用途：幫助我們找到想要的任何東西后裸，告訴我們現(xiàn)在身在何處。
- 除此之外冒滩，它還有以下功能：
1. 告訴我們這里有什么，即：通過讓層次結(jié)構(gòu)可視化浪谴，實(shí)現(xiàn)導(dǎo)航體現(xiàn)內(nèi)容
2. 告訴我們?nèi)绾问褂镁W(wǎng)站开睡，即：良好的導(dǎo)航機(jī)制會(huì)告訴你，從哪里開始苟耻，你能進(jìn)行哪些選擇
3. 它給了我們對(duì)于網(wǎng)站建造者的心篇恒，即：規(guī)劃的當(dāng)?shù)膶?dǎo)航會(huì)給用戶留下好印象
（3）信息設(shè)計(jì)：考慮的是如何把設(shè)計(jì)元素粘合到一起，為用戶呈現(xiàn)出有效的信息溝通凶杖。
頁面布局是將信息設(shè)計(jì)胁艰、導(dǎo)航設(shè)計(jì)和界面設(shè)計(jì)放置到一起，形成一個(gè)統(tǒng)一架構(gòu)的地方智蝠。使用線框圖是對(duì)一個(gè)頁面所有組成部分腾么、以及它們?nèi)绾谓M合到一起、最直觀的描述杈湾。
線框圖和原型的區(qū)別：
線框圖
是產(chǎn)品設(shè)計(jì)的低保真呈現(xiàn)方式解虱。它有三個(gè)簡(jiǎn)單直接而明確的目標(biāo)：
- 呈現(xiàn)主體信息群
- 勾勒出結(jié)構(gòu)和布局
- 用戶交互界面的主視覺和描述
線框的視覺特性：通常只需要使用線條、方框和灰階色彩填充（不同灰階標(biāo)明不同層次）就可以完成漆撞。
原型
制作原型的目標(biāo)非常明確：
原型必須是可交互的殴泰，并且盡可能貼合最終用戶界面的高保真模型。按鈕被按下時(shí)浮驳，相應(yīng)的操作必須被執(zhí)行悍汛，對(duì)應(yīng)頁面也必須出現(xiàn)，盡可能地完整模仿產(chǎn)品體驗(yàn)至会。
原型的視覺特征：
（五） 框架層
是最貼近用戶的層次离咐，關(guān)注感知設(shè)計(jì)，即：感知呈現(xiàn)問題奋献，滿足用戶的感官（視覺）感受健霹。
