文章以番茄工作法的工具產(chǎn)品為案例，來聊聊用戶體驗(yàn)要素應(yīng)用。

應(yīng)用用戶體驗(yàn)要素五大層次，自下而上的做一次產(chǎn)品設(shè)計(jì)，以番茄工作法的工具產(chǎn)品為案例，體驗(yàn)理論與實(shí)踐的結(jié)合，設(shè)計(jì)輔助用戶更便捷的使用番茄工作法的APP，以下簡(jiǎn)稱番茄xx。

首先，放一張用戶體驗(yàn)要素五大層級(jí)圖：

接下來，自下而上，按照層級(jí)逐步設(shè)計(jì)產(chǎn)品。

戰(zhàn)略層-產(chǎn)品目標(biāo)與用戶需求

戰(zhàn)略層內(nèi)容如下：

番茄XX的戰(zhàn)略層內(nèi)容

番茄工作法介紹 ：

“番茄工作法是簡(jiǎn)單易行的時(shí)間管理方法，是由弗朗西斯科·西里洛于1992年創(chuàng)立的一種相對(duì)于GTD更微觀的時(shí)間管理方法。

使用番茄工作法，選擇一個(gè)待完成的任務(wù)，將番茄時(shí)間設(shè)為25分鐘，專注工作，中途不允許做任何與該任務(wù)無關(guān)的事，直到番茄時(shí)鐘響起，然后在紙上畫一個(gè)X短暫休息一下（5分鐘就行），每4個(gè)番茄時(shí)段多休息一會(huì)兒。”

? ? ?————以上來自百度百科

產(chǎn)品定位為工具產(chǎn)品，用來輔助用戶使用番茄工作法來進(jìn)行日常工作、學(xué)習(xí)。

產(chǎn)品目標(biāo)：

1. 商業(yè)目標(biāo)，通過產(chǎn)品增加收入達(dá)到盈利；
2. 建立“讓用戶高效工作學(xué)習(xí)的工具”品牌印象；
3. 活躍用戶能夠達(dá)到人均XX使用頻率等等，可追蹤的指標(biāo)；

用戶需求：

首先確定我們針對(duì)的用戶群體，有拖延癥或者易受干擾、無法在一段時(shí)間集中注意力高效學(xué)習(xí)工作的人群，因此用戶需要一個(gè)工具輔助用戶進(jìn)行時(shí)間管理，制定明確的目標(biāo)任務(wù)，并經(jīng)過一次或多次集中注意力精力完成任務(wù)。

范圍層-功能規(guī)格和內(nèi)容需求

根據(jù)戰(zhàn)略層信息，產(chǎn)品核心功能為制定任務(wù)設(shè)置任務(wù)屬性，啟動(dòng)任務(wù)及任務(wù)結(jié)束的整個(gè)生命周期流程；

在此基礎(chǔ)上，為了刺激鼓勵(lì)用戶使用，引導(dǎo)用戶維護(hù)任務(wù)列表，每日結(jié)束之前引導(dǎo)用戶做次日任務(wù)計(jì)劃（可從任務(wù)列表中選擇或者直接新增），以此培養(yǎng)用戶習(xí)慣并激勵(lì)用戶持續(xù)使用；

同時(shí)為了滿足用戶成就感，需要有用戶對(duì)應(yīng)任務(wù)完成的統(tǒng)計(jì)功能；

核心功能以外，提供用戶的期望功能或驚喜功能作為增值服務(wù)，用來達(dá)到產(chǎn)品收入目標(biāo)，例如更加個(gè)性化的任務(wù)屬性設(shè)置功能，產(chǎn)品初期不作為重點(diǎn)目標(biāo)。

番茄xx范圍層：

結(jié)構(gòu)層-交互設(shè)計(jì)與信息架構(gòu)

功能型產(chǎn)品在結(jié)構(gòu)層的工作是范圍層功能的交互設(shè)計(jì)，關(guān)注于描述“可能的用戶行為”，同時(shí)定義“系統(tǒng)如何配合和響應(yīng)”這些用戶行為。

交互設(shè)計(jì)與信息架構(gòu)的方法與關(guān)注點(diǎn)

以此設(shè)計(jì)番茄xx核心任務(wù)生命周期流程

框架層-界面設(shè)計(jì)/導(dǎo)航設(shè)計(jì)與信息設(shè)計(jì)

涉及提供給用戶做某些事的能力，屬于界面設(shè)計(jì)；

涉及給用戶去哪個(gè)地方的能力，則屬于導(dǎo)航設(shè)計(jì)；

傳達(dá)想法給用戶，就是信息設(shè)計(jì)；

關(guān)于概念模型

• 習(xí)慣和反射是我們與這個(gè)世界交互時(shí)的各種基礎(chǔ)，違背用戶習(xí)慣，并不僅僅是浪費(fèi)時(shí)間那么簡(jiǎn)單，而是會(huì)給用戶帶來挫折感，使得一件下意識(shí)就能完成的事情變的難以忍受的緩慢；
• 界面要與自身保持一致，保持內(nèi)部的一致性，例如兩個(gè)特征使用同一概念模型，或兩個(gè)概念模型的統(tǒng)一模塊，應(yīng)保持一致；
• 有效的使用比喻，就是要減少用戶在“理解和使用你的產(chǎn)品功能”時(shí)對(duì)猜測(cè)的要求。提供一定上下文，幫助用戶更好的猜測(cè)你所采用的比喻試圖代表什么特征。

界面設(shè)計(jì)

結(jié)構(gòu)層決定了哪個(gè)功能在哪個(gè)界面上完成，界面設(shè)計(jì)則是要決定這些功能在界面上如何被用戶認(rèn)知到。

• 讓用戶一眼看到“最重要的東西”，不重要的東西不應(yīng)該被注意到；
• 一個(gè)設(shè)計(jì)良好的界面，要組織好用戶最常用的行為，同時(shí)讓這些界面元素用最容易方式獲取和使用；
• 合理運(yùn)用一些標(biāo)準(zhǔn)的界面元素，復(fù)選框、單選框、下拉列表等；

導(dǎo)航設(shè)計(jì)

導(dǎo)航設(shè)計(jì)的三個(gè)目標(biāo)：

• 必須提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法；
• 必須傳達(dá)出這些元素和它們所包含內(nèi)容間的關(guān)系；
• 必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系；

最常見的導(dǎo)航系統(tǒng)例如全局導(dǎo)航、局部導(dǎo)航、輔助導(dǎo)航、上下文導(dǎo)航、友好導(dǎo)航、網(wǎng)站地圖、索引表等，不同導(dǎo)航的特點(diǎn)不同，應(yīng)用的合適的場(chǎng)景下。

信息設(shè)計(jì)

不管何時(shí)，系統(tǒng)都應(yīng)給用戶提供正確使用網(wǎng)站的信息；

指示標(biāo)識(shí)：幫用戶理解“他們?cè)谀膬骸币约啊八麄兡苋ツ膬骸薄?/p>

線框圖是整合框架層全部三種要素的方法。

基于以上內(nèi)容產(chǎn)出線框圖：

表現(xiàn)層-感知設(shè)計(jì)

感知設(shè)計(jì)，包含產(chǎn)品內(nèi)部同類流程的一致性、與外部同類概念的模型的一致性、配色的方案與排版、產(chǎn)品的風(fēng)格建立等等。

本文由 @hugh.zhao 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議