做好體驗(yàn)設(shè)計(jì)需要先了解整個(gè)用戶產(chǎn)品使用的過(guò)程，然后才能針對(duì)性做設(shè)計(jì)。這篇文章，作者系統(tǒng)分析了體驗(yàn)設(shè)計(jì)的方法和設(shè)計(jì)，希望能幫到大家。

在軟件產(chǎn)品設(shè)計(jì)過(guò)程中，用戶體驗(yàn)的設(shè)計(jì)是一個(gè)不可忽視的課題。

對(duì)于互聯(lián)網(wǎng)產(chǎn)品，用戶是否喜歡我們的產(chǎn)品，取決于他使用產(chǎn)品所獲得的好處，也取決于他在產(chǎn)品中獲得的體驗(yàn)。

而用戶的體驗(yàn)往往會(huì)影響用戶的口碑，口碑影響產(chǎn)品的成敗，產(chǎn)品的成敗也影響了產(chǎn)品經(jīng)理的利益。

對(duì)于B端軟件產(chǎn)品，由于業(yè)務(wù)特性讓產(chǎn)品設(shè)計(jì)人員更加關(guān)注業(yè)務(wù)需求和多角色協(xié)同流程，往往忽視了終端用戶的訴求和單一用戶視圖。

不好的體驗(yàn)往往會(huì)影響項(xiàng)目的交付和公司的形象，從而影響了公司的利益。

既然用戶體驗(yàn)這么重要，那我們應(yīng)該如何做好用戶體驗(yàn)設(shè)計(jì)呢？

一、影響用戶體驗(yàn)的三要素

體驗(yàn)以用戶為中心，那么我們就以用戶的視角觀察一下產(chǎn)品的體驗(yàn)。

假設(shè)某天因?yàn)橛脩趔w驗(yàn)設(shè)計(jì)的問(wèn)題困擾你，你想通過(guò)”人人都是產(chǎn)品經(jīng)理“找到相關(guān)的文章為你解決問(wèn)題提供解幫助。

于是你打開(kāi)網(wǎng)站，點(diǎn)擊搜索，輸入關(guān)鍵字，敲擊回車(chē)后，瀏覽目標(biāo)文章，通過(guò)簡(jiǎn)要說(shuō)明找到可能讓你關(guān)注的文章后，點(diǎn)擊查看文章，如果滿足你的要求時(shí)，你還可能會(huì)收藏備用。

整個(gè)過(guò)程中，會(huì)涉及到以下三種體驗(yàn)要素：

1. 別讓我等

用戶的耐心是非常用限的，一方面是生命是有限的，另一個(gè)更主要的方面是傳統(tǒng)媒體教育的結(jié)果。我們打開(kāi)圖書(shū)、打開(kāi)電視時(shí)得到的都是即使的體驗(yàn)。

此外，像電腦瀏覽器可以同時(shí)找開(kāi)多個(gè)頁(yè)簽，手機(jī)可以多窗口的切換等技術(shù)的支持也讓用戶習(xí)慣了在有限的時(shí)間內(nèi)追求體驗(yàn)程度最大化。

許多研究表明，用戶最滿意的網(wǎng)頁(yè)打開(kāi)時(shí)間是2秒以下，等待12秒以上絕大多數(shù)用戶會(huì)關(guān)閉網(wǎng)頁(yè)（通過(guò)進(jìn)度條等手段可以延長(zhǎng)至38秒），用戶也更傾向于認(rèn)為打開(kāi)速度較快的網(wǎng)站質(zhì)量更高、更可信、也更有趣。

2. 別讓我想

懶惰是人性的組成部分，用戶不喜歡被迫進(jìn)行思考或?qū)W習(xí)。

當(dāng)用戶觸達(dá)你的網(wǎng)站時(shí)，發(fā)現(xiàn)網(wǎng)頁(yè)一團(tuán)糟，不知道里面是干什么的，也懶的學(xué)習(xí)，于是他眼都不眨一下的關(guān)掉了網(wǎng)站。

這個(gè)絕對(duì)不是用戶的錯(cuò)，他會(huì)開(kāi)電腦，用鼠標(biāo)和鍵盤(pán)，會(huì)打開(kāi)瀏覽器進(jìn)入到你的網(wǎng)站。

所以留給產(chǎn)品經(jīng)理的問(wèn)題是：怎么留住到來(lái)的用戶？

3. 別讓我煩

網(wǎng)站效率低，會(huì)令人煩躁，用戶完成任務(wù)難度與所需步驟成平方正比。

一次又一次的重復(fù)操作絕對(duì)不是用戶想要的，如何進(jìn)行高效的設(shè)計(jì)縮短用戶完成任務(wù)的路徑是產(chǎn)品經(jīng)理要面臨的挑戰(zhàn)。

二、合理規(guī)劃任務(wù)流程

從用戶角度理解完用戶體驗(yàn)之后，我們?cè)購(gòu)漠a(chǎn)品的角度規(guī)劃產(chǎn)品功能。設(shè)計(jì)之前，我們需要依據(jù)場(chǎng)景合理規(guī)劃任務(wù)流程。

任務(wù)流程是”需求“到“設(shè)計(jì)”之間的連接線，用戶使用你的產(chǎn)品時(shí)，一般都有特定的需求。

所以用戶需要在合理的引導(dǎo)下完成任務(wù)，滿足自己的需求。合理指要符合用戶的心智即要符合用戶的思維習(xí)慣與行動(dòng)習(xí)慣。

這里介紹C端產(chǎn)品設(shè)計(jì)中非常經(jīng)典的一款用戶體驗(yàn)分析工具“用戶故事地圖”：

1. 用戶故事地圖

用戶故事地圖可以幫助產(chǎn)品經(jīng)理分析用戶在使用產(chǎn)品時(shí)為了達(dá)成某個(gè)目的的關(guān)鍵步驟和動(dòng)線，并據(jù)此從場(chǎng)景的角度來(lái)拆解設(shè)計(jì)軟件的功能點(diǎn)。

用戶的操作動(dòng)線在每個(gè)層面被拆解，以得到第一級(jí)別的場(chǎng)景，即Activity。

再?gòu)牡谝患?jí)場(chǎng)景進(jìn)一步拆解出第二級(jí)場(chǎng)景，即Back Bone ,它就像敘述故事的骨架。

在二級(jí)場(chǎng)景下，可以進(jìn)一步更加細(xì)致地列出所有相關(guān)的功能點(diǎn)，即用戶任務(wù)User Task。

用戶地圖中的最小顆粒度就是用戶任務(wù)。

用戶任務(wù)即敏捷開(kāi)發(fā)中的用戶故事（User Story）,每個(gè)用戶故事可以用“作為（誰(shuí)），我想要（什么），這是為什么（為什么）”這樣的結(jié)構(gòu)進(jìn)行描述。

以下為某購(gòu)物平臺(tái)用戶下單購(gòu)物的簡(jiǎn)化用戶故事地圖如下：

2. 主要任務(wù)和次要任務(wù)

按照優(yōu)先級(jí)和迭代計(jì)劃將用戶任務(wù)進(jìn)行分組就可以得到Release One、Release Two、Release Three…。

每個(gè)Release就是迭代中的一個(gè)沖刺（Sprint）。按照任務(wù)與用戶的目標(biāo)期望達(dá)成度可以將任務(wù)分為主要任務(wù)和次要任務(wù)。主要任務(wù)指完成用戶目標(biāo)必須需要的任務(wù)，次要任務(wù)是出于部分用戶的分支需求，亦或是出于商業(yè)的需求。

Release One由主要任務(wù)組成，要以理解為這套產(chǎn)品的第一個(gè)最小可執(zhí)行版本（MVP)。

三、基于三要素的用戶體驗(yàn)設(shè)計(jì)

清楚了任務(wù)流程和版本功能點(diǎn)后，我們需要考慮如何將必要的信息有效組織起來(lái)分門(mén)別類(lèi)的呈現(xiàn)給用戶，別讓用戶想，讓用戶快速找到自己想要的信息。

同時(shí)，我們還需要考慮對(duì)界面的信息進(jìn)行排列和一系列的引導(dǎo)，別讓用戶煩，幫助用戶快速理解信息并完成任務(wù)。

最后，我們需要通過(guò)一定的技術(shù)實(shí)現(xiàn)方式解決用戶等的問(wèn)題。

下面我們逐一展開(kāi)分析：

1. 解決用戶想的問(wèn)題：讓用戶快速找到自己想要的信息；減少用戶思考和學(xué)習(xí)的成本

1）Logo

a）我們辨別一個(gè)人，并不需要記住他從頭到腳的所有細(xì)節(jié)，最重要的是看他的臉；當(dāng)我們辨別一個(gè)產(chǎn)品時(shí)，最重要的是通過(guò)Logo。Logo能讓用戶輕松的知道產(chǎn)品是什么。

b）Logo的旁邊或下面會(huì)有細(xì)化的規(guī)格或分類(lèi)，提供更具體的信息告訴用戶當(dāng)前模塊/頻道是什么。

c）Logo旁邊或下面有時(shí)還會(huì)有一個(gè)簡(jiǎn)明扼要的Slogan，告訴用戶產(chǎn)品能夠給客戶提供什么樣的服務(wù)，帶來(lái)什么樣價(jià)值。

比如下圖所示：

2）關(guān)注用戶任務(wù)，給予正確的指引

導(dǎo)航設(shè)計(jì)是信息組織與分類(lèi)的基礎(chǔ)，在產(chǎn)品設(shè)計(jì)中扮演著重要的角色。虛擬的網(wǎng)絡(luò)世界沒(méi)有現(xiàn)實(shí)現(xiàn)世界中明顯的方向感，不明確的導(dǎo)航和位置容易導(dǎo)致用戶迷失，成功的導(dǎo)航設(shè)計(jì)可以自我解釋?zhuān)層脩羟宄恼J(rèn)識(shí)信息結(jié)構(gòu)和自己所處的位置，能為用戶清楚的解釋我從哪里來(lái)，我現(xiàn)在在哪里，我能到哪里去。

設(shè)計(jì)導(dǎo)航時(shí)，要注意深廣度平衡與導(dǎo)航形式選擇：

a）導(dǎo)航層級(jí)的數(shù)目稱為深度，每層級(jí)中包含的選項(xiàng)數(shù)稱為廣度。

導(dǎo)航深度建議不超過(guò)5層，過(guò)深的導(dǎo)航容易流失用戶，一些細(xì)小的信息隱藏過(guò)深用戶很難發(fā)現(xiàn)，而且過(guò)深的層級(jí)關(guān)系也容易讓用戶迷失方向。

與深度相比，廣度導(dǎo)航更利于用戶發(fā)現(xiàn)信息，但廣度超過(guò)7個(gè)選項(xiàng)，用戶就很難記住，一次性展示過(guò)多選項(xiàng)會(huì)讓用戶患上選擇恐懼癥，很難選出哪一項(xiàng)是自己要的。

如下圖所示：

b）就移動(dòng)端產(chǎn)品來(lái)說(shuō)，主要導(dǎo)航的形式包括底部的Tab導(dǎo)航、標(biāo)簽式導(dǎo)航、陀式導(dǎo)航、抽屜式導(dǎo)航、宮格式導(dǎo)航和列表式導(dǎo)航。

Tab導(dǎo)航比較常見(jiàn)，對(duì)于僅有3~5個(gè)常用功能的產(chǎn)品，直接將功能選項(xiàng)暴露在產(chǎn)品首頁(yè)。

標(biāo)簽式導(dǎo)航一般位于界面頂部，比底部Tab導(dǎo)航更具有擴(kuò)展性，常與Tab導(dǎo)航組合使用，Tab導(dǎo)航做為一級(jí)功能分類(lèi)，標(biāo)簽導(dǎo)航做為二級(jí)擴(kuò)展分類(lèi)。

陀式導(dǎo)航與Tab導(dǎo)航類(lèi)似，不同之處在于會(huì)有一個(gè)非常突出的選項(xiàng)，這個(gè)選項(xiàng)通常為主要觸發(fā)按扭。

抽屜式導(dǎo)航通過(guò)點(diǎn)擊屏幕呼出側(cè)邊欄導(dǎo)航內(nèi)容，感覺(jué)像拉抽屜一樣拉出菜單，常用于主要功能突出，次要功能使用頻次較低的產(chǎn)品。

宮格式導(dǎo)航將產(chǎn)品主要功能集中于首頁(yè)，每個(gè)功能都是一個(gè)獨(dú)立的入口，適用于體量大、功能多的產(chǎn)品。

列表導(dǎo)航常用于二級(jí)導(dǎo)航，結(jié)構(gòu)清晰便于分組，適用于需要分組的功能或內(nèi)容。

如下圖所示：

導(dǎo)航是面向整個(gè)產(chǎn)品功能的，對(duì)于單一場(chǎng)景的用戶需要完成目標(biāo)任務(wù)，還需要做好任務(wù)引導(dǎo)的設(shè)計(jì)。

使用向?qū)Э丶瓿煽缭蕉鄠€(gè)界面的用戶任務(wù)，是一種常用的方法，這種控件多用于web端，引導(dǎo)用戶完成多步操作。

在同一界面中對(duì)用戶進(jìn)行引導(dǎo)，可以使用相似性引導(dǎo)、方向性引導(dǎo)和運(yùn)動(dòng)元素引導(dǎo)這三種方法讓用戶自然順暢的完成操作步驟。

相似性引導(dǎo)就是如果大小、色彩、形態(tài)等因素相似，那么這些因素就可以牽引用戶的視覺(jué)。

方向性引是對(duì)操作步驟較多的任務(wù)時(shí)，利用有指向性的箭頭進(jìn)行方向性引導(dǎo)（包括箭頭和無(wú)形引導(dǎo)）。

運(yùn)動(dòng)元素引導(dǎo)就是使用元素的動(dòng)態(tài)效果引導(dǎo)用戶視線，帶領(lǐng)用戶走到下一步。

如下圖所示：

色彩、形態(tài)相似的引導(dǎo)

方向性引導(dǎo)

運(yùn)動(dòng)元素引導(dǎo)（添加成后的動(dòng)態(tài)效果）

要想讓用戶不花費(fèi)很多精力閱讀，而是通過(guò)掃描一下界面找出吸引其注意力的內(nèi)容，特別對(duì)于信息量大的界面，就就要求設(shè)計(jì)人員組織好這些信息，并進(jìn)行精心的設(shè)計(jì)。

這里提供三個(gè)層面的參考幫助設(shè)計(jì)人員提高產(chǎn)品的用戶體驗(yàn)：

a）讓界面層次清晰：界面清晰實(shí)際上就是界面簡(jiǎn)潔易懂、有重點(diǎn)、有邏輯、有層次。

首先，我們需要將大段的信息分解成易于理解的信息模塊，再將這些模塊依據(jù)用戶的瀏覽習(xí)慣排列優(yōu)先級(jí)并放置到相應(yīng)的界面位置上。

其次，在視覺(jué)呈現(xiàn)上通過(guò)間距、分割線、卡片，讓用戶能夠區(qū)分不同模塊并突出模塊之間的邏輯關(guān)系；模塊的內(nèi)容，存在重要程度不同和邏輯關(guān)系嵌套的，可以在視覺(jué)呈現(xiàn)上體現(xiàn)出差異。

最后，可以通過(guò)不同的樣式幫助用戶辨別不同層級(jí)的信息。

如下圖所示：

b）突出重點(diǎn)信息：通過(guò)強(qiáng)化某些設(shè)計(jì)元素，如加大加粗、運(yùn)用色彩比對(duì)、添加背景色、適度留白等方式強(qiáng)調(diào)界面的重點(diǎn)信息，然后讓非重點(diǎn)的信息稍加弱化從而使界面的重點(diǎn)信息自然而然的跳出來(lái)。

如下圖所示：

c）隱藏次要信息：隨著產(chǎn)品功能的增加，界面上的元素也越來(lái)越，為了不影響新手和中間用戶，需要將次要的信息隱藏起來(lái)，待用戶需要時(shí)再次他們展示出來(lái)。

隱藏次要信息不僅可以讓界面重點(diǎn)信息更加突出，也會(huì)減少?gòu)?fù)雜信息對(duì)用戶的干擾，幫助用戶更便捷的操作。

如下圖所示：

3）盡可能降低用戶學(xué)習(xí)成本

探討界面交互體驗(yàn)設(shè)計(jì)問(wèn)題時(shí)，我們可以遵循尼爾森的十大可用性原則，其中在解決用戶想的問(wèn)題上主要包括如下六條：

a）隱喻原則：在提到隱喻原則之前，有必要提及一下擬物化的視覺(jué)。最直接借鑒現(xiàn)實(shí)世界的方式就是擬物化，通過(guò)模擬現(xiàn)實(shí)中的物體，使用戶產(chǎn)生熟悉感，讓信息與功能更加易于識(shí)別和理解。

隨著大家對(duì)電子產(chǎn)品接受度越來(lái)越高，擬物化細(xì)節(jié)過(guò)于復(fù)雜，會(huì)讓用戶感覺(jué)累，從而設(shè)計(jì)師抽象出物體中最有特征的部分，將繁雜的視覺(jué)元素進(jìn)行簡(jiǎn)化處理，由擬物化轉(zhuǎn)向扁平化。

而擬物化的界面設(shè)計(jì)有一定的局限性，并不是界面中的每個(gè)元素在現(xiàn)實(shí)世界中都可以找到對(duì)應(yīng)的物品，設(shè)計(jì)師通過(guò)用戶熟悉的語(yǔ)句、短語(yǔ)、符號(hào)來(lái)表達(dá)意思，遵循真實(shí)現(xiàn)世界的認(rèn)知、習(xí)慣、讓信息呈現(xiàn)更加自然，易于辨別和接受，這就是隱喻原則。

例如：播放器的功能按扭，如下圖所示：

b）防錯(cuò)原則：避免錯(cuò)誤的發(fā)生要好過(guò)出錯(cuò)后再給提示。設(shè)計(jì)時(shí)，要先考慮如何避免錯(cuò)誤的發(fā)生，其次再檢查校驗(yàn)異常。

例如：在填寫(xiě)表單時(shí)，可以通地提示文字避免用戶填寫(xiě)錯(cuò)誤，填寫(xiě)完成后可以檢查用戶填寫(xiě)信息是否準(zhǔn)確。

c）一致性原則：同樣的情景、環(huán)境下，用戶進(jìn)行相同操作，結(jié)果應(yīng)該一致。系統(tǒng)或平臺(tái)的風(fēng)格應(yīng)保持一致。當(dāng)用戶已經(jīng)習(xí)慣了固有的規(guī)范，我們?cè)O(shè)計(jì)時(shí)應(yīng)遵循慣例，不要盲目標(biāo)新立異。

例如：下圖的我的圖標(biāo)放第一個(gè)位置是不是有些別扭？

d）記憶原則：讓系統(tǒng)的相關(guān)信息在需要的時(shí)候顯示出來(lái)，減輕用戶的記憶負(fù)擔(dān)。

例如：大部分APP搜索的時(shí)候，會(huì)保留用戶最近使用過(guò)的搜索關(guān)鍵詞。

e）簡(jiǎn)約設(shè)計(jì)：用戶的信息交互內(nèi)容不應(yīng)該包含無(wú)關(guān)或沒(méi)必要的信息；增加或強(qiáng)化一些信息意味著弱化另一些信息。

f）容錯(cuò)原則：錯(cuò)誤信息應(yīng)用通俗易懂的語(yǔ)言說(shuō)明，而不是只向用戶提示錯(cuò)誤代碼，提示信息應(yīng)包含解決方案。例如：訪問(wèn)網(wǎng)站報(bào)告404的錯(cuò)誤。

2. 解決用戶煩的問(wèn)題：讓用戶快速理解信息并完成任務(wù)，縮短完成路徑幫助用戶偷懶。

1）靈活易用：系統(tǒng)中往往中級(jí)用戶較多，而初高級(jí)用戶較少。所以系統(tǒng)設(shè)計(jì)應(yīng)為大多數(shù)人設(shè)計(jì)，同時(shí)兼顧少數(shù)人的需求，做到靈活易用。

2）及時(shí)的反饋：系統(tǒng)應(yīng)該在合理的時(shí)間、用正確的方式向用用戶提示或反饋目前系統(tǒng)在做什么、發(fā)生了什么。與用戶保持溝通和信息傳遞，不會(huì)讓用戶感到失控和焦慮。

3）回退原則：用戶因不小心誤操作，需要有一個(gè)功能讓程序恢復(fù)到錯(cuò)誤發(fā)生之前的狀態(tài)。對(duì)于誤操作概率高的用戶，讓他有反悔的機(jī)會(huì)，會(huì)讓他感到有安全感。比如，大部分商城下單后，可以在一定條件下取消訂單。

4）減少功能性，視覺(jué)聽(tīng)覺(jué)的騷擾：減少?gòu)V告、走馬燈一類(lèi)的效果吸引用戶將視線移開(kāi)，讓用戶分心并且煩躁。

5）減少用戶產(chǎn)品使用過(guò)程中感受到的壓力：不要為了增加用戶關(guān)注度而強(qiáng)迫他們?nèi)プ鏊麄儾魂P(guān)心的事。

3. 等：界面設(shè)計(jì) & 技術(shù)方案

加載比較大的頁(yè)面元素內(nèi)容，復(fù)雜的操作運(yùn)算（涉及后臺(tái)運(yùn)算或數(shù)據(jù)的調(diào)用）、代碼非最優(yōu)方案導(dǎo)致加載頁(yè)面或某個(gè)操作需要消耗太多時(shí)長(zhǎng)。這時(shí)候我們解決方案有：

1）技術(shù)方案

a）減少Http請(qǐng)求數(shù)

b）使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN)

c）壓縮網(wǎng)頁(yè)元素

d）把樣式放在網(wǎng)頁(yè)的Head部分

e）把腳本文件放在網(wǎng)頁(yè)底部

f）把樣式和腳本放在外部文件中

g）減少DNS查詢次數(shù)

h）緩存Ajax

2）交互設(shè)計(jì)

對(duì)于某些特殊的情況確實(shí)需要消耗大量時(shí)間時(shí)，可以通過(guò)進(jìn)度條或加載動(dòng)畫(huà)手段將加載需要的時(shí)間，處理的數(shù)據(jù)數(shù)量等信息展示給用戶，讓用戶可以收到反饋，有預(yù)期，減少用戶等待時(shí)產(chǎn)生的確定性。

四、結(jié)語(yǔ)

做好用戶交互體驗(yàn)需要先了解整個(gè)用戶產(chǎn)品使用的過(guò)程，再引導(dǎo)用戶完成任務(wù)，完成任務(wù)的過(guò)程不要讓用戶等、不要讓用戶學(xué)習(xí)和思考，縮短任務(wù)完成的路徑幫助用戶偷懶，這樣才能捕獲用戶的獲心，讓你的產(chǎn)品更具有粘性。