本文將通過(guò)分析“用戶體驗(yàn)五要素”—戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層—來(lái)探討如何系統(tǒng)地提升產(chǎn)品的用戶體驗(yàn)，確保每一步設(shè)計(jì)決策都貼近用戶需求和業(yè)務(wù)目標(biāo)。

一、用戶體驗(yàn)的定義

• 廣義：指用戶在使用產(chǎn)品的過(guò)程中產(chǎn)生的個(gè)人主觀感受，包括行為，情感，心里等方面的感受。
• 狹義：用戶體驗(yàn)主要來(lái)自于用戶和人機(jī)交互的過(guò)程，比如手機(jī)電腦使用是否流暢，高效方便等方面。

二、產(chǎn)品設(shè)計(jì)的時(shí)候便需要考慮到用戶體驗(yàn)

用戶體驗(yàn)的好壞關(guān)聯(lián)到產(chǎn)品的生命周期，優(yōu)秀的用戶體驗(yàn)可以為我們產(chǎn)品發(fā)展提供源源不斷的動(dòng)力。

在平時(shí)的工作中我們便可以利用“用戶體驗(yàn)五要素”來(lái)對(duì)一款產(chǎn)品進(jìn)行分析。

三、用戶體驗(yàn)無(wú)要素的概述

首先用戶體驗(yàn)五要素包含了：戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層五個(gè)方向。

1. 戰(zhàn)略層就是明確我們要做什么？解決了“我們?yōu)槭裁匆_(kāi)發(fā)產(chǎn)品？”的問(wèn)題

在戰(zhàn)略層我們要思考：

• 用戶痛點(diǎn)：我們的用戶是誰(shuí)，我們的產(chǎn)品為解決了用戶的那些痛點(diǎn)。
• 商業(yè)價(jià)值：我們的產(chǎn)品可以為公司帶來(lái)什么商業(yè)價(jià)值，公司的盈利模式是怎么樣的。
• 市場(chǎng)現(xiàn)狀和預(yù)期：當(dāng)前的市場(chǎng)狀況是怎么樣的，是否存在競(jìng)品，它們的優(yōu)缺點(diǎn)是什么？我們的市場(chǎng)預(yù)期又如何。
• 項(xiàng)目風(fēng)險(xiǎn)：我們產(chǎn)品上線后又那些風(fēng)險(xiǎn)，如何規(guī)避風(fēng)險(xiǎn)，是否有準(zhǔn)備解決方案。

2. 范圍層：在明確了戰(zhàn)略層后，范圍層解決的是“我們要開(kāi)發(fā)什么樣的產(chǎn)品？”

在范圍層我們要思考：

• 項(xiàng)目背景和目標(biāo)：項(xiàng)目的背景和目標(biāo)有利于項(xiàng)目組對(duì)項(xiàng)目的了解，可以更好的制定產(chǎn)品的發(fā)展規(guī)劃。
• 功能概述：對(duì)功能有總體的了解，提供一份功能列表或者是功能結(jié)構(gòu)圖，如果是較大的項(xiàng)目還需要提供產(chǎn)品模塊的劃分和結(jié)構(gòu)圖。
• 需求說(shuō)明：對(duì)每個(gè)需求進(jìn)行整理，說(shuō)明，排期，可以建立需求池。
• 非功能需求：產(chǎn)品的非功能需求也關(guān)系到用戶體驗(yàn)，比如安全性，性能等方面。

3. 結(jié)構(gòu)層：制作提交各種原型圖

在結(jié)構(gòu)層我們要思考：

• 產(chǎn)品結(jié)構(gòu):產(chǎn)品呈現(xiàn)給用戶的頁(yè)面和功能結(jié)構(gòu)，是用戶看得到的產(chǎn)品的結(jié)構(gòu)，例如，一個(gè)社交產(chǎn)品，可能包括聊天頁(yè)面、好友頁(yè)面、個(gè)人中心頁(yè)面。其中，個(gè)人中心又包括了個(gè)人信息、設(shè)置等
  功能。建議使用思維導(dǎo)圖的方式將其列明
• 信息架構(gòu):產(chǎn)品呈現(xiàn)個(gè)用戶的信息的組織方式。例如一個(gè)電商產(chǎn)品，商品的內(nèi)容包括了，商品信息、用戶評(píng)價(jià)等。其中商品信息又包括了商品介紹、功能參數(shù)等內(nèi)容。這部分也建議用思維導(dǎo)圖的方式展開(kāi)。
• 頁(yè)面結(jié)構(gòu):產(chǎn)品的功能和信息在頁(yè)面上怎么體現(xiàn)。每個(gè)頁(yè)面大概包括哪些內(nèi)容。這部分建議以低保真原型圖的方式來(lái)呈現(xiàn)出來(lái)
• 交互流程:用戶的操作流程和頁(yè)面的跳轉(zhuǎn)流程。用戶是怎么執(zhí)行操作的，頁(yè)面以什么樣的方式響應(yīng)或跳轉(zhuǎn)。這部分內(nèi)容可以在原型圖上注釋說(shuō)明。

4. 框架層：雖然命名為框架層，不過(guò)在這一層我們逐步將產(chǎn)品從抽象到具體

到了這一層，基本上能看得出產(chǎn)品的輪廓。這一層我們通過(guò)已經(jīng)制作好的PRD和低保真原型圖，逐步細(xì)化成高保真的原型圖。

• 信息設(shè)計(jì):對(duì)已經(jīng)定義好的信息架構(gòu)進(jìn)行細(xì)化。例如，在結(jié)構(gòu)層，我們已經(jīng)定義好了商品信息需要包含大概的信息。在框架層再進(jìn)一步細(xì)化，商品的詳情包括了，商品名稱、商品數(shù)量、商品產(chǎn)地等詳細(xì)等字段。
• 頁(yè)面細(xì)化:在結(jié)構(gòu)層已經(jīng)定義好的頁(yè)面結(jié)構(gòu)基礎(chǔ)上進(jìn)一步細(xì)化。如頁(yè)面的具體布局，頁(yè)面元素的選擇等。這步將低保真的頁(yè)面細(xì)化成高保真的頁(yè)面。
• 交互設(shè)計(jì):頁(yè)面的交互設(shè)計(jì)，用戶操作后頁(yè)面的響應(yīng)。例如，是否需要彈窗提示、是否需要滑動(dòng)效果等。

5.表現(xiàn)層：UI設(shè)計(jì)師進(jìn)行創(chuàng)意美感的設(shè)計(jì)，給予產(chǎn)品美感體驗(yàn)