要做好體驗(yàn)設(shè)計(jì)，首先要了解用戶(hù)產(chǎn)品的整個(gè)使用過(guò)程，然后才能有目的地進(jìn)行設(shè)計(jì)。本文系統(tǒng)分析了感受設(shè)計(jì)的方法和設(shè)計(jì)，希望對(duì)大家有所幫助。

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

對(duì)因特網(wǎng)商品而言，用戶(hù)是否喜歡我們的產(chǎn)品，取決于他使用產(chǎn)品所獲得的好處，以及他在商品中所獲得的感受。

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

對(duì)于 B 端軟件產(chǎn)品，由于業(yè)務(wù)特點(diǎn)，產(chǎn)品設(shè)計(jì)者更注重項(xiàng)目需求和多角色協(xié)同流程，通常忽略了終端用戶(hù)的需求和單一客戶(hù)的視圖。

經(jīng)驗(yàn)不佳通常會(huì)影響項(xiàng)目的交付和企業(yè)的形象，從而影響企業(yè)的利益。

因?yàn)轭櫩腕w驗(yàn)如此重要，那么我們應(yīng)該怎樣做好用戶(hù)體驗(yàn)設(shè)計(jì)？

第一，影響用戶(hù)體驗(yàn)的三要素

感受用戶(hù)至上，那么我們就從用戶(hù)的角度來(lái)觀(guān)察商品的感受。

假定有一天因?yàn)橛脩?hù)體驗(yàn)設(shè)計(jì)的問(wèn)題困擾著你，你想通過(guò)“人人都是產(chǎn)品經(jīng)理”找到相關(guān)文章來(lái)幫助你解決問(wèn)題。

所以你打開(kāi)網(wǎng)頁(yè)，點(diǎn)擊搜索，輸入關(guān)鍵字，打回車(chē)，瀏覽目標(biāo)文章，通過(guò)簡(jiǎn)要的說(shuō)明找到可能讓你關(guān)注的文章，然后點(diǎn)擊查看文章，如果符合你的要求，你也可以收集備用。

在整個(gè)過(guò)程中，涉及到以下三個(gè)感覺(jué)因素：

1. 別讓我等

用戶(hù)的耐心是非常有限的。一方面，生命是有限的，另一方面，傳統(tǒng)媒體教學(xué)的結(jié)果是更重要的。當(dāng)我們打開(kāi)書(shū)籍和電視時(shí)，我們得到的只是我們的感受。

此外，瀏覽器可以同時(shí)打開(kāi)多個(gè)頁(yè)面簽名，手機(jī)可以轉(zhuǎn)換多個(gè)窗口等技術(shù)的支持也使用戶(hù)習(xí)慣于在有限的時(shí)間內(nèi)最大化自己的感受水平。

許多研究發(fā)現(xiàn)，用戶(hù)最滿(mǎn)意的網(wǎng)頁(yè)打開(kāi)時(shí)間是 2 秒以下，等待 12 大多數(shù)用戶(hù)會(huì)在幾秒鐘內(nèi)關(guān)閉網(wǎng)頁(yè)(可以通過(guò)進(jìn)度條等方式延長(zhǎng)到 38 秒)，用戶(hù)也更傾向于認(rèn)為開(kāi)放速度快的網(wǎng)站質(zhì)量更高，更可靠，更有趣。

2. 別讓我想

懶惰是人性的一部分，顧客不喜歡被迫思考或?qū)W習(xí)。

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

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

所以留給產(chǎn)品經(jīng)理的問(wèn)題是：如何留住客戶(hù)？

3. 別讓我煩

站點(diǎn)效率低下，會(huì)讓人煩躁，顧客達(dá)到目標(biāo)的難度與所需步驟成平方正比。

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

第二，合理規(guī)劃任務(wù)攻略

在從顧客的角度了解了顧客體驗(yàn)之后，我們?cè)購(gòu)漠a(chǎn)品的角度來(lái)規(guī)劃產(chǎn)品功能。在設(shè)計(jì)之前，我們應(yīng)該根據(jù)情況合理地規(guī)劃任務(wù)策略。

任務(wù)策略是“需求”到“設(shè)計(jì)”的連接線(xiàn)，用戶(hù)在使用您的產(chǎn)品時(shí)，一般都有特定的需求。

因此，用戶(hù)需要在合理的指導(dǎo)下實(shí)現(xiàn)目標(biāo)，滿(mǎn)足自己的需要。合理意味著要符合用戶(hù)的思維習(xí)慣和行動(dòng)習(xí)慣。

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

1. 使用者故事地圖

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

為了獲得第一級(jí)的其它場(chǎng)景，客戶(hù)的操作動(dòng)線(xiàn)在各個(gè)方面被拆解， Activity。

然后從一級(jí)場(chǎng)景中進(jìn)一步拆解二級(jí)場(chǎng)景，即 Back Bone , 這就像是講故事的骨架。

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

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

在敏捷開(kāi)發(fā)中，客戶(hù)任務(wù)就是用戶(hù)故事。（User Story）, 每一個(gè)用戶(hù)的故事都可以用“作為(誰(shuí))，我想要(什么)，這是為什么(為什么)”這樣的結(jié)構(gòu)來(lái)描述。

下面是一個(gè)購(gòu)物平臺(tái)用戶(hù)下單購(gòu)物的簡(jiǎn)化用戶(hù)故事地圖：

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

通過(guò)按照優(yōu)先級(jí)和迭代計(jì)劃對(duì)用戶(hù)任務(wù)進(jìn)行分組，即可獲得 Release One、Release Two、Release Three …。

每個(gè) Release 這就是迭代中的沖刺之一。（Sprint）。根據(jù)任務(wù)和用戶(hù)的目標(biāo)期望，任務(wù)可以分為主要任務(wù)和次要任務(wù)。主要任務(wù)是指完成客戶(hù)目標(biāo)所必需的任務(wù)，次要任務(wù)是出于部分用戶(hù)的分支需求或商業(yè)需求。

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

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

在了解了任務(wù)策略和版本功能點(diǎn)之后，我們需要考慮如何有效地組織和向客戶(hù)展示必要的信息，不要讓客戶(hù)考慮，讓用戶(hù)快速找到自己想要的信息。

與此同時(shí)，我們也要考慮對(duì)網(wǎng)頁(yè)信息的排列和一系列的引導(dǎo)，不要讓顧客煩惱，幫助用戶(hù)快速理解信息，實(shí)現(xiàn)目標(biāo)。

最后，我們需要通過(guò)某種技術(shù)來(lái)解決用戶(hù)等問(wèn)題。

以下我們將逐一進(jìn)行分析：

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

1）Logo

a）當(dāng)我們識(shí)別一個(gè)人時(shí)，我們不需要記住他全身的所有細(xì)節(jié)。最重要的是看他的臉。當(dāng)我們識(shí)別一個(gè)產(chǎn)品時(shí)，最重要的是通過(guò)它。 Logo。Logo 可以讓用戶(hù)很容易地知道什么是產(chǎn)品。

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

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

如圖所示：

關(guān)注顧客的任務(wù)，給予正確的指導(dǎo)。

導(dǎo)航設(shè)計(jì)是信息組織和分類(lèi)的基礎(chǔ)，在產(chǎn)品設(shè)計(jì)中起著重要的作用。虛擬網(wǎng)絡(luò)世界在世界上沒(méi)有明顯的定位感，導(dǎo)航和位置不明確容易導(dǎo)致用戶(hù)迷失。成功的導(dǎo)航設(shè)計(jì)可以自我解釋?zhuān)層脩?hù)清楚地了解信息結(jié)構(gòu)和自己的位置，清楚地解釋我從哪里來(lái)，我現(xiàn)在在哪里，我可以去哪里。

在設(shè)計(jì)導(dǎo)航時(shí)，要注意深度平衡和導(dǎo)航方式的選擇：

a）導(dǎo)航層次的數(shù)量叫做深層，每個(gè)層次所包含的選項(xiàng)數(shù)量叫做廣度。

建議不要超過(guò)導(dǎo)航深度 5 層次，導(dǎo)航太深容易流失用戶(hù)，有些微小的信息隱藏得太深，用戶(hù)很難找到，而且層次太深的關(guān)系也很容易讓用戶(hù)迷失方向。

廣度導(dǎo)航比深度更有利于用戶(hù)發(fā)現(xiàn)信息，但是廣度超過(guò)了 7 顧客很難記住一個(gè)選項(xiàng)，一次展示過(guò)多的選項(xiàng)會(huì)使用戶(hù)患上選擇困難，很難選擇哪一個(gè)是自己想要的。

如圖所示：

b）就手機(jī)產(chǎn)品而言，主要導(dǎo)航形式包括底部。 Tab 導(dǎo)航，標(biāo)簽導(dǎo)航，陀型導(dǎo)航，抽屜導(dǎo)航，宮格導(dǎo)航和目錄導(dǎo)航。

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

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

陀式導(dǎo)航與 Tab 類(lèi)似的導(dǎo)航，不同之處在于會(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ú)立的入口，適用于體積大、功能多的商品。

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

導(dǎo)航是針對(duì)整個(gè)產(chǎn)品的功能，對(duì)于單一場(chǎng)景的用戶(hù)來(lái)說(shuō)，需要完成目標(biāo)任務(wù)，并且需要設(shè)計(jì)任務(wù)引導(dǎo)。

一種常用的方法是使用指導(dǎo)控件完成跨越多個(gè)頁(yè)面的客戶(hù)任務(wù)，這種控件多用于 web 終端，引導(dǎo)用戶(hù)完成多步操作。

在同一頁(yè)面中引導(dǎo)用戶(hù)，可以使用相似性引導(dǎo)、方向引導(dǎo)、運(yùn)動(dòng)元素引導(dǎo)三種方法，讓用戶(hù)自然流暢地完成操作過(guò)程。

相似性指導(dǎo)是指如果大小、顏色、形狀等因素相似，那么各種因素都能吸引顧客的視覺(jué)。

方向引導(dǎo)是指在操作過(guò)程較多的任務(wù)之后，使用方向性箭頭進(jìn)行方向引導(dǎo)(包括箭頭和無(wú)形引導(dǎo))。

運(yùn)動(dòng)性元素引導(dǎo)就是利用元素動(dòng)畫(huà)特效來(lái)引導(dǎo)用戶(hù)的視野，帶領(lǐng)用戶(hù)進(jìn)入下一步。

顏色、形狀相似的引導(dǎo)

方向性引導(dǎo)

引導(dǎo)運(yùn)動(dòng)元素(添加后的動(dòng)畫(huà)效果)

如果客戶(hù)想通過(guò)掃描界面來(lái)找到吸引他們注意力的內(nèi)容，而不是花費(fèi)大量的精力去閱讀，尤其是對(duì)于信息量大的頁(yè)面，他們需要設(shè)計(jì)師組織這些信息并仔細(xì)設(shè)計(jì)。

以下是幫助設(shè)計(jì)者提高產(chǎn)品使用體驗(yàn)的三個(gè)層次的參考：

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

首先，我們需要將大量的信息轉(zhuǎn)換成易于理解的信息模塊，然后根據(jù)用戶(hù)的瀏覽習(xí)慣優(yōu)先將這些模塊排列在相應(yīng)的界面位置。

其次，在視覺(jué)呈現(xiàn)中，用戶(hù)可以通過(guò)間隔、分隔線(xiàn)和卡片來(lái)區(qū)分不同的模塊，突出模塊之間的邏輯關(guān)系；如果模塊內(nèi)容有不同的重要性和嵌套的邏輯關(guān)系，可以在視覺(jué)呈現(xiàn)上體現(xiàn)差異。

最后，可以通過(guò)不同的風(fēng)格幫助用戶(hù)識(shí)別不同層次的信息。

b）突出關(guān)鍵信息:通過(guò)加強(qiáng)一些設(shè)計(jì)風(fēng)格來(lái)強(qiáng)調(diào)頁(yè)面的關(guān)鍵信息，如加粗、使用顏色檢查、添加背景顏色、適當(dāng)留白等。，然后稍微弱化非關(guān)鍵信息，這樣頁(yè)面的關(guān)鍵信息自然就會(huì)彈出來(lái)。

c）隱藏次要信息:隨著產(chǎn)品功能的增加，界面上的元素也越來(lái)越多。為了不影響新手和中間客戶(hù)，有必要隱藏次要信息，并在客戶(hù)需要的時(shí)候再次呈現(xiàn)。

隱藏次要信息不僅可以使界面的關(guān)鍵信息更加突出，而且可以減少?gòu)?fù)雜信息對(duì)用戶(hù)的影響，幫助用戶(hù)更加方便地操作。

盡可能降低顧客的學(xué)習(xí)成本

在討論界面交互體驗(yàn)設(shè)計(jì)問(wèn)題時(shí)，我們可以遵循尼爾森十大可用性原則，其中以下六項(xiàng)主要用于解決用戶(hù)想要的問(wèn)題:

a）隱喻原則:在提到隱喻原則之前，有必要提到擬物化的視覺(jué)。借鑒現(xiàn)實(shí)世界最直觀(guān)的方法就是擬物化。通過(guò)模擬現(xiàn)實(shí)中的物體，用戶(hù)可以有一種熟悉感，使信息和功能更容易識(shí)別和理解。

隨著人們對(duì)電子設(shè)備的接受度越來(lái)越高，擬物化的細(xì)節(jié)過(guò)于復(fù)雜，會(huì)讓用戶(hù)感到疲憊。然后設(shè)計(jì)師抽象出物體中最有特色的部分，簡(jiǎn)化復(fù)雜的視覺(jué)元素，從擬物化變成扁平化。

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

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

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

例如：在填寫(xiě)表格時(shí)，可以通過(guò)文本提醒用戶(hù)不要填寫(xiě)錯(cuò)誤，填寫(xiě)后可以檢查用戶(hù)是否填寫(xiě)正確信息。

c）一致性原則:在相同的場(chǎng)景和環(huán)境下，客戶(hù)進(jìn)行相同的操作，結(jié)果應(yīng)該是一致的?；蛘呦到y(tǒng)平臺(tái)的風(fēng)格要一致。當(dāng)客戶(hù)習(xí)慣了固有的規(guī)范，我們?cè)谠O(shè)計(jì)的時(shí)候要遵循慣例，不要盲目獨(dú)特。

例如：下圖中我的圖標(biāo)放在第一個(gè)位置是不是有點(diǎn)別扭？

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

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

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

f）容錯(cuò)原則:錯(cuò)誤信息應(yīng)用通俗易懂的語(yǔ)言表達(dá)，而不僅僅是提醒用戶(hù)錯(cuò)誤的代碼，消息提示應(yīng)該包括解決方案。例如，訪(fǎng)問(wèn)網(wǎng)站報(bào)告 404 的錯(cuò)誤。

2. 解決用戶(hù)煩惱的問(wèn)題：讓用戶(hù)快速理解信息，實(shí)現(xiàn)目標(biāo)，縮短完成路徑，幫助用戶(hù)偷懶。

1)靈活易用:系統(tǒng)中往往有更多的中級(jí)客戶(hù)，而初級(jí)和高級(jí)用戶(hù)更少。因此，系統(tǒng)設(shè)計(jì)應(yīng)該為大多數(shù)人設(shè)計(jì)，同時(shí)兼顧少數(shù)人的需求，使其靈活易用。

2)及時(shí)反饋:系統(tǒng)應(yīng)該在合理的時(shí)間以正確的方式提醒用戶(hù)或反饋系統(tǒng)目前正在做什么和發(fā)生的事情。與用戶(hù)保持溝通和信息傳遞，不會(huì)讓用戶(hù)感到失控和不安。

3)退貨原則:客戶(hù)需要一個(gè)功能，讓程序恢復(fù)到錯(cuò)誤發(fā)生前的狀態(tài)，因?yàn)樗麄儾恍⌒恼`操作了。對(duì)于誤操作概率高的用戶(hù)來(lái)說(shuō)，讓他們有機(jī)會(huì)反悔，這會(huì)讓他們感到安全。比如大部分商場(chǎng)下單后，訂單可以在一定條件下取消。

降低功能、視覺(jué)和聽(tīng)覺(jué)的騷擾：降低廣告、走馬燈等效果，吸引用戶(hù)移開(kāi)視線(xiàn)，使用戶(hù)分心和煩躁。

減輕用戶(hù)在使用產(chǎn)品時(shí)所感受到的壓力：不要為了增加用戶(hù)的關(guān)注而強(qiáng)迫他們?nèi)プ鏊麄儾辉诤醯氖虑椤?/p>

3. 等待：界面設(shè)計(jì) & 技術(shù)規(guī)范

載入較大的頁(yè)面元素內(nèi)容，操作計(jì)算復(fù)雜(涉及后臺(tái)計(jì)算或數(shù)據(jù)調(diào)用)、由于代碼不是最佳方案，所以需要花費(fèi)太多的時(shí)間來(lái)加載頁(yè)面或某個(gè)操作。此時(shí)，我們的解決方案是：

1）技術(shù)規(guī)范

a）降低 Http 請(qǐng)求數(shù)

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

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

d）在網(wǎng)頁(yè)上放置風(fēng)格 Head 部分

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

f）在外部文檔中放置樣式和腳本

g）降低 DNS 查詢(xún)頻次

h）緩存 Ajax

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

當(dāng)一些特殊情況真的需要花費(fèi)大量時(shí)間時(shí)，可以通過(guò)進(jìn)度條或加載動(dòng)畫(huà)向用戶(hù)展示加載時(shí)間、處理數(shù)據(jù)數(shù)量等信息，讓用戶(hù)在等待時(shí)能夠收到反饋和預(yù)期，從而降低客戶(hù)的確定性。

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

要做好客戶(hù)互動(dòng)體驗(yàn)，首先要了解用戶(hù)產(chǎn)品的整個(gè)使用過(guò)程，然后引導(dǎo)用戶(hù)實(shí)現(xiàn)目標(biāo)。不要讓用戶(hù)等待完成任務(wù)的過(guò)程，不要讓用戶(hù)學(xué)習(xí)和思考，縮短任務(wù)結(jié)束的路徑，幫助用戶(hù)偷懶，從而捕捉用戶(hù)的內(nèi)心，讓你的產(chǎn)品更有粘性。

作者：refurbish ； 公眾號(hào)：Bruce 林拼搏頻道

本文由 @refurbish 原發(fā)布于每個(gè)人都是產(chǎn)品經(jīng)理，未經(jīng)許可禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議

本文僅代表作者觀(guān)點(diǎn)，版權(quán)歸原創(chuàng)者所有，如需轉(zhuǎn)載請(qǐng)?jiān)谖闹凶⒚鱽?lái)源及作者名字。

免責(zé)聲明：本文系轉(zhuǎn)載編輯文章，僅作分享之用。如分享內(nèi)容、圖片侵犯到您的版權(quán)或非授權(quán)發(fā)布，請(qǐng)及時(shí)與我們聯(lián)系進(jìn)行審核處理或刪除，您可以發(fā)送材料至郵箱：service@tojoy.com