首頁

交互設(shè)計(jì)之尼爾森的十大可用性原則

純純

系統(tǒng)應(yīng)該在合適的時(shí)間內(nèi)通過適當(dāng)?shù)姆答?始終讓用戶了解正在發(fā)生的事情——尼爾森


自我理解:用戶無論在界面上做什么,都應(yīng)該及時(shí)告知他發(fā)生了什么或者進(jìn)展到什么程度??梢岳斫鉃槿伺c人的溝通,界面需要及時(shí)告訴我們做了什么,現(xiàn)在是什么情況。


a.  這種告知應(yīng)該是及時(shí)的。

加載任務(wù)在互聯(lián)網(wǎng)中是最常見的,在加載過程中應(yīng)當(dāng)及時(shí)傳達(dá)加載過程,減少用戶的心理等待時(shí)間。在外部加載總時(shí)間無法優(yōu)化的時(shí)候,使用何種方式能有更好的用戶體驗(yàn)是設(shè)計(jì)時(shí)需要考慮的。

undefined

undefined

undefined


b.  應(yīng)當(dāng)告知用戶你在哪里

你的界面需要引導(dǎo)用戶來操作,即作為用戶應(yīng)該清楚的明白我在什么位置,我下一步可以去做什么操作。

現(xiàn)在app的很多設(shè)計(jì)基礎(chǔ)包括頂部的導(dǎo)航分欄和底部的tab bar都是為了告訴用戶他在哪里。

在做一些概念設(shè)計(jì)時(shí)候,如果單純是為了更好的視覺效果,就對這些基礎(chǔ)分欄進(jìn)行大刀闊斧的設(shè)計(jì),最終導(dǎo)致了好看是好看,可是用戶都不知道這頁面是干什么的結(jié)果,很明顯是違背了最基本的交互原則 狀態(tài)可見原則。

undefined


c.  應(yīng)當(dāng)告知用戶事情怎么樣了

用戶在你的界面是要做什么事情,這是你在設(shè)計(jì)之前應(yīng)該思考的問題。

如何把用戶要做的這件事情更好的呈現(xiàn)給用戶,反饋給用戶以及有哪些信息需要反饋給用戶都是你要從交互的角度思考的,這包括過去發(fā)生的信息和即將發(fā)生的信息,也包括正向反饋和負(fù)向反饋。(這種操作是否成功了?這種操作進(jìn)展到什么程度了?如果這樣操作會(huì)有什么后果?點(diǎn)擊之后會(huì)達(dá)到什么頁面?這里是否可以點(diǎn)擊?)


很多概念性的設(shè)計(jì)很酷,從交互的角度上來看也是因?yàn)榻缑鎸π畔⑦M(jìn)行了很好的反饋,比如下面的設(shè)計(jì)就是對登山的信息進(jìn)行了很直觀的反饋。(來自設(shè)計(jì)設(shè)計(jì)師anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的環(huán)境里面,不同的界面也有不同的外部環(huán)境。盡量保證界面在自己產(chǎn)品定義的風(fēng)格里面,如果有機(jī)會(huì)還原真實(shí)世界的狀態(tài)也很好。


a.  根據(jù)用戶制定產(chǎn)品語言

在制定產(chǎn)品語言時(shí),要了解產(chǎn)品的用戶人群,使用相對應(yīng)的用戶群體所熟悉的文字語言 圖形語言  板式結(jié)構(gòu)  配色方法。要讓我們的用戶覺得這個(gè)產(chǎn)品很符合自己,而不是讓一個(gè)老大爺去滑滑梯的感覺。一般來講即便是同一產(chǎn)品,在國內(nèi)外的產(chǎn)品語言也是有所不同的。

a. 模擬真實(shí)環(huán)境

產(chǎn)品在一些展示上模仿現(xiàn)實(shí)世界的樣子,可以讓用戶快速接受,并感受到真實(shí)易懂。不僅僅局限于靜態(tài)外觀的模仿,還包括模擬真實(shí)物品的動(dòng)態(tài)效果 聲音等 都能給用戶良好的使用體驗(yàn)

很多逼真的動(dòng)效也是來自真實(shí)世界的映照。比如下面的可樂瓶的晃動(dòng)就和真實(shí)世界很接近,讓用戶有很強(qiáng)的代入感。(作品來自設(shè)計(jì)師dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:為了不讓用戶進(jìn)入一個(gè)錯(cuò)誤的場景或者結(jié)果,對于一些特殊操作應(yīng)該給予撤回重做,讓用戶能夠充分的確定接下來的行為。

a.  返回到原始狀態(tài)

可以理解為悔棋,即已經(jīng)發(fā)生的行為返回到原始的頁面狀態(tài),這個(gè)條件的設(shè)置也應(yīng)該有一些條件的限制,不能一直無限返回。





自我理解:君子常常言行一致,好的產(chǎn)品也是一樣。保持為一個(gè)統(tǒng)一的整體,包括產(chǎn)品內(nèi)部和產(chǎn)品外部,也包括線上和線下。


a.  與競品保持一致

很多人講現(xiàn)在的同一類產(chǎn)品的同質(zhì)化現(xiàn)象嚴(yán)重,其背后也是有一定原因的。相同或相似產(chǎn)品的用戶習(xí)慣保持一致,即意味著用戶需要更少的時(shí)間去學(xué)習(xí)甚至不需要學(xué)習(xí)。從產(chǎn)品設(shè)計(jì)上講,用戶使用越方便易用,產(chǎn)品設(shè)計(jì)的越成功。和相關(guān)主流競品做出比較大差異化設(shè)計(jì)時(shí)候,雖然擺脫了同質(zhì)化的問題,但是很多常規(guī)操作卻需要用戶重新學(xué)習(xí),這樣帶來的后果很有可能就是用戶流失。所以,沒有充分的理由,請與競品保持一致。



b.  請建立一套完整的規(guī)范

一套完整的規(guī)范包括組件 色彩 間距  版塊結(jié)構(gòu) 等。規(guī)范可以讓你的產(chǎn)品一致性更強(qiáng),你要讓用戶能夠?qū)δ愕漠a(chǎn)品產(chǎn)生一定的規(guī)范性印象,當(dāng)他看到一張頁面就能聯(lián)想到這是什么產(chǎn)品。

undefined


c.  請保持產(chǎn)品迭代的一致性

現(xiàn)在隨著互聯(lián)網(wǎng)市場的不斷穩(wěn)定,很多產(chǎn)品進(jìn)入了穩(wěn)定的迭代期。但是在迭代期也應(yīng)該以保持產(chǎn)品語言 用戶使用習(xí)慣的一致性為一大重要原則,版本的迭代也應(yīng)該逐步進(jìn)行,不要急功近利。盡量保持原有的設(shè)計(jì)元素一致性,新功能的創(chuàng)新也盡量不要損害原有用戶的使用體驗(yàn)。


自我理解:再發(fā)生錯(cuò)誤之前采取措施來避免。


a. 引導(dǎo)用戶,不要讓錯(cuò)誤出現(xiàn)。

很多app迭代更新之后會(huì)有操作指引,目的就是為了讓用戶學(xué)習(xí),減少錯(cuò)誤操作。很多引導(dǎo)頁也有相類似的功能。


b. 給予提示,尤其是用戶在做一些重要操作的時(shí)候

一些重要的敏感操作,產(chǎn)品通過二次詢問得到用戶的確認(rèn),




自我理解:能讓你的軟件產(chǎn)品來記住,就不要讓你的用戶來記。盡可能的在設(shè)計(jì)產(chǎn)品的時(shí)候,不要讓用戶去記憶,把用戶當(dāng)傻瓜。

a 記住用戶的使用操作記錄

這個(gè)記錄不單單是在某一設(shè)備上,一般來講都是跨設(shè)備進(jìn)行同步。用戶在使用的時(shí)候不用來回調(diào)整,體驗(yàn)感是很強(qiáng)。

 


b  讓用戶選擇信息而不是填寫

填寫是一件成本極大的事情,很多用戶不愿意在這上面花費(fèi)時(shí)間。所以產(chǎn)品在設(shè)計(jì)的時(shí)候要盡量讓用戶去選,而不是去寫。

undefined

c 自動(dòng)讀取

思考產(chǎn)品一些功能的使用場景,有沒有自動(dòng)智能化的需要。即不用問候產(chǎn)品使用者,自動(dòng)提供解決方案。注意,這里講的是提供方案,不是解決方案。提供大多數(shù)的解決方案,可以節(jié)省使用者的交互步驟或者瀏覽時(shí)間等,也是易用性高的表現(xiàn)。

d 提供適量的信息

其實(shí)另外一個(gè)交互定律法則(以后會(huì)講)其實(shí)提到了選擇的數(shù)量,移動(dòng)端的選項(xiàng)一般不會(huì)超過五個(gè),超過五個(gè)用戶的頭腦就會(huì)混亂。所以要考慮信息的擺放位置在哪里,一方面是需求決定的,另一方面也應(yīng)該控制每一個(gè)選項(xiàng)的數(shù)量,不要讓用戶感到焦慮。


自我理解:一般來講產(chǎn)品的用戶群體是多樣化,用戶的使用熟悉度也是有差別的。要照顧到絕大多數(shù)用戶群體的使用體驗(yàn),所謂的高頻是每一個(gè)用戶群體比較常使用。


a.  設(shè)置快捷/重復(fù)入口

講產(chǎn)品常用或者主打的功能放在產(chǎn)品容易操作的位置或者重復(fù)出現(xiàn),用戶可以高效的完成自己的需求。

一般來講用戶的使用頻率越高越要放在操作熱區(qū)和表面,反之亦然。

b.  用戶自定義常用功能

照顧到不同用戶對于某些功能的需求不同,對產(chǎn)品的部分功能進(jìn)行用戶自定義化操作,提高用戶使用的靈活性。


c.  給用戶默認(rèn)選項(xiàng)

將用戶經(jīng)常使用的選項(xiàng)作為默認(rèn),減少用戶操作時(shí)間,達(dá)到靈活高效的目的。像淘寶都會(huì)設(shè)置默認(rèn)的收貨地址,每次下單不用每次都輸入,十分高效。(當(dāng)然也有翻車的時(shí)候)



自我理解:互聯(lián)網(wǎng)用戶閱讀產(chǎn)品的一個(gè)很重要的特點(diǎn)就是快。即不是來閱讀不是來看,而是掃一眼。所以要求頁面上的內(nèi)容能夠清晰可見,方便用戶快速捕捉到自己喜歡閱讀的信息,減少不必要的干擾,簡潔高效。

a.  清晰的板塊劃分

把頁面內(nèi)容的優(yōu)先級(jí)別進(jìn)行分級(jí),清晰的板塊劃分將會(huì)引導(dǎo)用戶操作。還可以將頁面的主推內(nèi)容向用戶展示,避免用戶分不清重點(diǎn)。


b.  減少視覺噪音

注意頁面的主角是誰,在平面設(shè)計(jì)中也有相同的概念。不要讓背景或者裝飾嘩眾取寵,而影響主要信息的傳遞,視覺設(shè)計(jì)是來輔助業(yè)務(wù)表達(dá)的。如果核心需求沒有傳遞好,那就會(huì)單純地成為一件藝術(shù)品,而不是設(shè)計(jì)作品。所以在設(shè)計(jì)過程中,要權(quán)衡視覺點(diǎn),減少不必要的噪音干擾。


c. 嚴(yán)格遵守設(shè)計(jì)的四大基本原則:親密  對比  重復(fù)   對齊

落實(shí)到界面上包括間距 字號(hào) 字重 版式節(jié)奏 。其實(shí)看到看到很多界面做的不精彩不優(yōu)美,就是基礎(chǔ)性的原則就沒有完全落實(shí)貫徹。這里就不舉例,基本所有的設(shè)計(jì)都要遵守的原則,很重要,很重要,很重要。


undefined


自我理解:要考慮到頁面可能發(fā)生意外,錯(cuò)誤發(fā)生后要及時(shí)彌補(bǔ)。


a.  提供清晰地說明和解決方案

考慮到可能會(huì)達(dá)到的錯(cuò)誤界面。在發(fā)生的錯(cuò)誤結(jié)果上,使用明確清晰的語言告知錯(cuò)誤的原因,并給予解決方案。

自我理解:要考慮到頁面可能發(fā)生意外,錯(cuò)誤發(fā)生后要及時(shí)彌補(bǔ)。這一部分其實(shí)主要進(jìn)行一些說明,讓用戶操作方便,相當(dāng)于使用說明書。

a.  無需文檔

進(jìn)行新頁面的設(shè)計(jì)盡量直觀清晰,符合用戶習(xí)慣,無需引導(dǎo)即可使用。

b.  一次性提示

改版引導(dǎo)或者新功能引導(dǎo)給予一定的提示

c.  常駐性提示

對于產(chǎn)品的操作性功能或者操作必須注意到的問題,產(chǎn)品需要進(jìn)行一定說明

d.  幫助文檔

用來解釋一些常見問題。



文章來源:站酷    作者:花城丶

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



超實(shí)用的12個(gè)UI設(shè)計(jì)法則,大神都在用!

周周

想要制作一個(gè)漂亮,可用和高效的UI不是一件容易的事情,這不僅需要設(shè)計(jì)師有一定的審美能力,更需要花費(fèi)大量的時(shí)間,并且在設(shè)計(jì)的過程中還要不斷進(jìn)行修訂和調(diào)整,直到自己和你的客戶滿意。這個(gè)過程我自己也曾經(jīng)感受過很多次。 

今天老王將跟大家分享快速提升UI水平的8個(gè)技巧,通過一些易于實(shí)踐的小技巧來進(jìn)行簡單的視覺調(diào)整,從而改善你要?jiǎng)?chuàng)建的視覺效果,希望能為你在設(shè)計(jì)項(xiàng)目中提供幫助。

10大交互設(shè)計(jì)原則,大廠都在用

周周

本文講述交互設(shè)計(jì)用的最多的原則——尼爾森十大可用性原則。

手把手教你撰寫交互設(shè)計(jì)文檔(保姆級(jí)教程)

周周

前言:為什么要寫交互設(shè)計(jì)文檔?交互設(shè)計(jì)文檔有什么用?


第一,交互設(shè)計(jì)師的交互設(shè)計(jì)文檔就好像UI設(shè)計(jì)師的PSD文件一樣用于保存記錄自己的設(shè)計(jì)思路,但交互設(shè)計(jì)師負(fù)責(zé)的任務(wù)不僅僅停留在頁面當(dāng)中,還包括產(chǎn)品的需求分析、用戶畫像、競品分析、產(chǎn)品數(shù)據(jù)分析、用戶交互邏輯等等..我們都可以寫在交互設(shè)計(jì)文檔中做記錄,為我們的交互設(shè)計(jì)提供依據(jù)。(其實(shí)就是避免開發(fā)懟你問你設(shè)計(jì)依據(jù)是啥,你就馬上把分析擺他臉上,避免尷尬)


第二點(diǎn)是交互設(shè)計(jì)師作為產(chǎn)品的上游(一般開發(fā)流程是產(chǎn)品經(jīng)理負(fù)責(zé)收集需求給予交互設(shè)計(jì)師進(jìn)行交互設(shè)計(jì),撰寫交互設(shè)計(jì)文檔,然后文檔評(píng)審?fù)ㄟ^后,UI同學(xué)負(fù)責(zé)UI設(shè)計(jì),接著提供前端同學(xué)進(jìn)行界面開發(fā),后端同學(xué)則根據(jù)交互稿搭建框架和業(yè)務(wù)邏輯,開發(fā)完成后進(jìn)行測試,反饋測試結(jié)果,如此循環(huán),因此交互設(shè)計(jì)師一般處于產(chǎn)品線的上游階段),撰寫一份標(biāo)準(zhǔn)和規(guī)范的交互設(shè)計(jì)文檔是非常重要的,因?yàn)槲覀冃枰媒换ピO(shè)計(jì)文檔去表達(dá)我們的設(shè)計(jì)思路,通過交互文檔我們可以讓UI同學(xué)知道頁面需要給用戶表達(dá)什么情緒,達(dá)到怎樣的目的,告訴前端同學(xué)頁面跳轉(zhuǎn)邏輯以及交互模塊怎么寫,幫助后端同學(xué)清晰搭建后臺(tái)框架與數(shù)據(jù)庫以及產(chǎn)品業(yè)務(wù)邏輯是怎么樣的,最后測試童鞋還會(huì)拿著你的交互稿進(jìn)行單元測試,編寫測試用例,所以只有我們先把文檔寫好了,才能避免后面產(chǎn)品開發(fā)出現(xiàn)問題。


第三點(diǎn)也是最重要的一點(diǎn)就是未來我們用于跳槽加薪面試作品。內(nèi)行看門道,外行看熱鬧,如果你面試交互設(shè)計(jì)師的時(shí)候還是帶著一條長長的JPG或者是網(wǎng)上千篇一律排版的PDF作品集,在面試官眼中顯得不入行(或許你會(huì)遇到性格好的面試官,畢竟千人千面,面試特別看人),因?yàn)閷I(yè)的交互設(shè)計(jì)師在平時(shí)工作中為了避免干擾UI同學(xué)設(shè)計(jì),只會(huì)使用黑白灰做交互稿,也很少做成一條長長的PNG或JPG,我們可以適當(dāng)包裝作品集,但如果過度了會(huì)讓人覺得不落地,或許只停留在剛?cè)胄须A段,所以在技術(shù)面試,我們可以拿著我們的交互設(shè)計(jì)文檔跟面試官敘述產(chǎn)品從需求層面怎樣思考完成交互設(shè)計(jì)的,解決了用戶什么痛點(diǎn),最后取得了什么樣的成果,得到了怎樣的數(shù)據(jù),我相信成功幾率會(huì)大很多。(PS:用交互設(shè)計(jì)文檔進(jìn)行面試前請注意把公司機(jī)密信息做脫敏處理,避免發(fā)生糾紛)


1、交互文檔包含什么內(nèi)容?以及怎樣撰寫交互文檔?


說了那么多,那究竟交互設(shè)計(jì)文檔包含哪些內(nèi)容?


一般來講,一個(gè)基礎(chǔ)、規(guī)范的交互設(shè)計(jì)文檔應(yīng)該包含文檔封面、更新文檔、設(shè)計(jì)說明文檔、業(yè)務(wù)流程圖、交互原型、垃圾桶等模塊,當(dāng)然了,這些模塊也不是永恒不變的,有些是必須要,有些是選擇性添加的,至于這些模塊有什么功能和怎樣進(jìn)行撰寫,這篇文章會(huì)逐一分享給大家~


(說明:作者比較習(xí)慣使用Axure軟件撰寫交互設(shè)計(jì)文檔,大家可以根據(jù)自身愛好或者公司規(guī)定進(jìn)行選擇(例如sketch、figma、PS等等..都是可以的)。這里要引用一句話:軟件僅僅是工具,并不能限制我們的思維,好的工具能讓我們走得更快但不能使我們走得更遠(yuǎn)——沃·茲基碩德。


1.1、文檔封面(必須)


文檔封面就相當(dāng)于一本書的封面一樣,用于記錄產(chǎn)品名稱、版本號(hào)、日期以及文檔負(fù)責(zé)人(這樣開發(fā)童鞋就能精準(zhǔn)找到你進(jìn)行撕X),只要能展示以上信息,其他信息(例如產(chǎn)品經(jīng)理是誰等..)可以自行添加。


1.2、更新日志(必須)


以前我都習(xí)慣把更新日志放到產(chǎn)品文檔后面,但是隨著工作時(shí)間變久,我發(fā)現(xiàn)開發(fā)童鞋在SVN上打開設(shè)計(jì)文檔后第一時(shí)間就是查看更新日志,所以后來把這一頁提了上來。(是的,設(shè)計(jì)文檔也是需要跟產(chǎn)品一樣不斷優(yōu)化迭代的)


更新日志主要用于記錄產(chǎn)品迭代修改的內(nèi)容,讓開發(fā)同學(xué)快速了解這次迭代修改了什么內(nèi)容,他需要做哪些工作。我的更新日志特別簡單,就只有日期、變更內(nèi)容、所在頁面以及備注四個(gè)字段,這里唯一注意的是,日期必須是最新修改的內(nèi)容放在上面,以前的日期在下面,很多同學(xué)每次迭代的時(shí)候會(huì)在下面列進(jìn)行內(nèi)容添加,這樣開發(fā)同學(xué)每次都必須滾到最下面查看信息,大哥,你是交互設(shè)計(jì)師,專業(yè)一點(diǎn)好嗎。


1.3、產(chǎn)品項(xiàng)目背景(必須)


產(chǎn)品項(xiàng)目背景是一個(gè)項(xiàng)目的核心關(guān)鍵,告訴所有的團(tuán)隊(duì)成員我們要做一個(gè)什么樣的產(chǎn)品,需要?jiǎng)?chuàng)造什么樣的價(jià)值,就好比我們寫作文時(shí)的中心句,時(shí)刻提醒著我們要不忘初心,為團(tuán)隊(duì)成員開發(fā)項(xiàng)目指明方向。


前段時(shí)間有個(gè)同學(xué)來問我,他們本來是剛開始是做校園教育系統(tǒng)的,但是隨著產(chǎn)品慢慢迭代,功能逐漸強(qiáng)大了,最近老板希望在系統(tǒng)中加上財(cái)務(wù)功能,本來用戶學(xué)習(xí)成本就高,如果再加上去會(huì)不會(huì)適得其反?雖然我不知道那位同學(xué)的老板產(chǎn)品戰(zhàn)略是啥,背后是怎樣思考的,但是在我看來這樣的行為就不能是不忘初心,這頂多能算不忘出薪吧。(拒絕諧音梗從我做起)


好了,至于里面產(chǎn)品背景、產(chǎn)品目標(biāo)以及定位的內(nèi)容應(yīng)該如何撰寫?對,我抄的。一般情況下,這些內(nèi)容我們都能夠在項(xiàng)目立項(xiàng)文檔或者在招投標(biāo)書上就能找到,我們不用親自寫(但可以加以設(shè)計(jì)),再不行也能找到產(chǎn)品經(jīng)理去了解。


或者你會(huì)說,小公司既沒有立項(xiàng)、也沒有招投標(biāo)書,產(chǎn)品經(jīng)理也是你,那該怎么辦?那么你就得發(fā)揮出自己當(dāng)年高考的作文水平,積極了解清楚產(chǎn)品背景定位,努力完成這一部分,因?yàn)樾畔⒌膫鬟f是有消耗性的,只有我們作為產(chǎn)品的上游做好了,才能為團(tuán)隊(duì)成員后面的努力提供方向。



1.4、產(chǎn)品需求(必須)


產(chǎn)品需求列表用于記錄產(chǎn)品需要做哪些【功能點(diǎn)】,這些功能點(diǎn)我們一般能在產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理上獲得,我們收集需求后需要對其按照重要程度P0、P1、P2等級(jí)進(jìn)行分類,我分類的原則是KANO法則(不知道的同學(xué)可以百度),P0等級(jí)是非做不可的需求,例如像微信的聊天,淘寶的支付功能等,P1是錦上添花的需求,時(shí)間緊迫的話可以下次再做的,例如微信的語音、視頻聊天等..,排到最后Pn就是一些不必要可做可不做,就算做了也沒太大影響的功能,就可以與領(lǐng)導(dǎo)層商討是否確認(rèn)要做。(例如炸屎,你們現(xiàn)在還有人炸屎嗎?什么?炸屎你都不知道?那當(dāng)我沒說)


1.5、用戶畫像(可選)


所謂知己知彼百戰(zhàn)不殆,通過用戶畫像我們可以快速了解產(chǎn)品目標(biāo)用戶群體特征,分析目標(biāo)用戶群體的期望、需求、動(dòng)機(jī)等,再根據(jù)用戶場景去進(jìn)行設(shè)計(jì),有了用戶畫像的支撐,能避免我們在設(shè)計(jì)過程中出現(xiàn)一些不必要的因素,例如我們目標(biāo)用戶是中老年人的話,那么按鈕、字體就應(yīng)該適當(dāng)?shù)姆糯?、排版簡單明了,而針對青少年就可以偏個(gè)性化風(fēng)格設(shè)計(jì)。


當(dāng)然,如果是小公司的話可能沒有那么多的資源去做用戶的調(diào)研,在這里分享一下我當(dāng)年在創(chuàng)業(yè)公司經(jīng)常使用的一種快速獲取用戶畫像的方法,既快速又特別專業(yè)。


這里需要借助一個(gè)網(wǎng)站:艾瑞數(shù)據(jù)(https://index.iresearch.com.cn),打開后選擇自己產(chǎn)品的類型(例如學(xué)習(xí)教育類),網(wǎng)站會(huì)把該類型的產(chǎn)品按照用戶數(shù)量從高到低展示給你,然后我們選擇一個(gè)差不多的競品點(diǎn)擊去查看他們的用戶特征,最后Ctrl C+Ctrl V到我們的文檔中,完成。


1.6、競品分析(可選)


競品分析相信大家都特別熟悉,我之前的文章也教過大家怎么進(jìn)行詳細(xì)的競品分析,這里就不細(xì)講了,雖然在交互文檔中競品分析可做可不做,但是在產(chǎn)品初期階段我們?nèi)绻J(rèn)真做競品分析的話能夠快速了解產(chǎn)品業(yè)務(wù)、熟悉用戶的使用習(xí)慣,同時(shí)當(dāng)我們在做交互原型的時(shí)候能提供快速借(cao)鑒(xi),因此有條件的同學(xué)還是建議盡量做一下。


1.7、數(shù)據(jù)分析(可選)


數(shù)據(jù)分析時(shí)交互設(shè)計(jì)師必不可少的一項(xiàng)技能,也是驗(yàn)證設(shè)計(jì)成果的重要因素。如果缺少了數(shù)據(jù)分析而單憑個(gè)人主觀因素的話,我們難以說明設(shè)計(jì)效果的好壞,畢竟現(xiàn)實(shí)中會(huì)出現(xiàn)各種意想不到的情況。


 所謂“無對比,不分析”,一般數(shù)據(jù)分析都是通過數(shù)值進(jìn)行對比,去查看數(shù)據(jù)相對是上升、下降、還是持平,是否跟當(dāng)初設(shè)計(jì)預(yù)期的一樣,對于初期的產(chǎn)品會(huì)更關(guān)注產(chǎn)品的一些DAU(日活數(shù))、GMV(成交總額)、以及支付人數(shù)等,因?yàn)檫@些數(shù)據(jù)的增減是直接影響到整個(gè)產(chǎn)品的存活,如果產(chǎn)品的DAU不斷下降的話,那你就要馬上查找原因,及時(shí)調(diào)整,避免惡性循環(huán)。


一般情況下,像日活數(shù)那些簡單的數(shù)據(jù)可以直接問后臺(tái)同學(xué)就能獲得,而用戶某些環(huán)節(jié)的存活率、轉(zhuǎn)化率等就需要利用【數(shù)據(jù)埋點(diǎn)】,市場上也有很多第三方做數(shù)據(jù)埋點(diǎn)的,例如神策數(shù)據(jù)、Growing IO等,這里就不展開說了,但是面試的時(shí)候你能說出這些就會(huì)顯得很專業(yè)。


1.8、信息架構(gòu)(必須)


信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層,就像產(chǎn)品的骨架一樣,而信息架構(gòu)設(shè)計(jì)就是對產(chǎn)品信息進(jìn)行構(gòu)架、歸類的設(shè)計(jì),信息架構(gòu)能夠防止我們對產(chǎn)品功能點(diǎn)遺漏,同時(shí)也可以通過產(chǎn)品大體的信息架構(gòu)觀察出產(chǎn)品設(shè)計(jì)是否合理。


一般來說(干貨來了),產(chǎn)品架構(gòu)分支可以分為度和層,而好產(chǎn)品的信息架構(gòu)在廣度和層度都是恰到好處,下面我舉兩個(gè)反例大家就懂了:


  1.產(chǎn)品架構(gòu)的廣度太廣(不懂的看下圖):信息架構(gòu)的廣度太廣意味著頁面的承載信息量特別的多,沒有側(cè)重點(diǎn),這樣用戶點(diǎn)進(jìn)頁面后會(huì)思考很久而不知所措,最經(jīng)典的就是某某寶和某同城,新用戶進(jìn)入到首頁真的模棱兩可。


    2.產(chǎn)品架構(gòu)的層太深:信息架構(gòu)的層太深會(huì)導(dǎo)致另外一個(gè)問題就是頁面非常的多,要找到一些功能的話操作非常的困難,最常見的就是某些視頻的取消會(huì)員流程(包括當(dāng)年的ofo退費(fèi)),你們是不是為了退費(fèi)或者取消某APP會(huì)員百度過很多次?(反過來思考,如果某些功能你不想被用戶發(fā)現(xiàn),但是又必不可少的話應(yīng)如何設(shè)計(jì),你懂得)


1.9、業(yè)務(wù)流程圖(可選)


繪制業(yè)務(wù)流程圖的目的就是:梳理并分析優(yōu)化業(yè)務(wù)流程。我知道很多同學(xué)做UI設(shè)計(jì)師的時(shí)候可以完全不管業(yè)務(wù),直接做設(shè)計(jì),但是作為交互設(shè)計(jì)師了解產(chǎn)品業(yè)務(wù)是非常重要的,因?yàn)椴涣私鈽I(yè)務(wù)你就無法完成交互設(shè)計(jì),優(yōu)化業(yè)務(wù)場景。


舉個(gè)例子:在教育考試系統(tǒng)中一般流程是:教育局出通知→學(xué)生報(bào)名考試→老師審核→報(bào)名通過→老師編排學(xué)生考試名單→學(xué)生開始考試對號(hào)入座→教育局公布成績→學(xué)生查詢成績→考試結(jié)束,看這一些列的流程,因?yàn)殛P(guān)聯(lián)特別多,如果對業(yè)務(wù)不熟悉的話設(shè)計(jì)起來會(huì)非常的不便,如果前期因?yàn)闃I(yè)務(wù)流程不熟悉而設(shè)計(jì)出錯(cuò)誤的交互稿的話,后面就會(huì)特別麻煩。


那么如何去繪制完整的業(yè)務(wù)流程:


  1. 如果你的產(chǎn)品經(jīng)理比較專業(yè)的話,可能會(huì)直接給你一個(gè)現(xiàn)成的業(yè)務(wù)流程圖,那樣就能省事很多。

  2. 要是沒有產(chǎn)品經(jīng)理的話,最直接的就是問用戶,這里介紹我最常用的方法就是“一聽二問三確認(rèn)”。一聽:先聽客戶代表或者業(yè)務(wù)方的介紹。聽得過程中,不打斷對方,以最簡單的方式勾出主體脈絡(luò),即基本要素中的角色、活動(dòng)、協(xié)作關(guān)系梳理出即可。二問:完成上一步后,就可以進(jìn)行提問了。主要是沿著流程進(jìn)行發(fā)問,重點(diǎn)放在分支、產(chǎn)物關(guān)系上。看看是否存在分支的情況,各協(xié)作之間是否有交付物。一邊問,一邊修正。三確認(rèn):最后一步就是自己講一遍流程,和客戶代表或者業(yè)務(wù)專家進(jìn)行最后的確認(rèn)。


1.10、交互原型(必須)


幾乎可以說,上面所有的東西都是為了完成交互原型做鋪墊的,我相信對大家來講交互原型都非常熟悉,但是給大家分享幾個(gè)經(jīng)常犯錯(cuò)的點(diǎn)。


【1】頁面盡量只采用黑白灰配色,避免干擾UI同學(xué)設(shè)計(jì)。這是大家經(jīng)常犯錯(cuò)的一個(gè)點(diǎn),畢竟很多同學(xué)以前是UI出身,做交互稿時(shí)也順便配配色,這樣會(huì)非常影響UI同學(xué)設(shè)計(jì)的(不在其位不謀其政,你做UI的時(shí)候也不希望有人在旁邊指指點(diǎn)點(diǎn)吧),所以我們做交互稿時(shí)只采用黑白灰就夠了,灰度大小就代表信息的重要程度,簡潔規(guī)范即可。


【2】頁面的跳轉(zhuǎn)用連線表示其實(shí)就很方便了,真正厲害的人不會(huì)到處炫技。有些同學(xué)在交互稿上各種跳轉(zhuǎn)、動(dòng)態(tài)面板、中繼器等花里胡哨一大堆,這樣開發(fā)同學(xué)看起來特別的難受,所以很多時(shí)候用連線的方式表示往往是最簡單明了的。


【3】如果涉及到多端設(shè)計(jì)(IOS、Andriod、PC端)的話,除非產(chǎn)品非常龐大,不然就放在同一個(gè)設(shè)計(jì)文檔中,避免以后評(píng)審還要弄多個(gè)文件。


【4】創(chuàng)建一個(gè)適合自己的組件庫,在日常設(shè)計(jì)中,80%的控件是可以重復(fù)利用的,做一個(gè)合適的組件庫能節(jié)省大量時(shí)間(我整理了工作多年的B端以及移動(dòng)端常用的組件,你們需要也可以分享給你們)。


1.11、垃圾桶(可選)


做交互文檔時(shí)垃圾桶就相當(dāng)于后悔藥,因?yàn)橐恍╉撁嫒绻麆h掉保存后是不能還原了的,因此在改稿時(shí)如果一些暫時(shí)不需要的頁面可以丟到垃圾桶中,避免到最后用回以前的方案時(shí)重新再做浪費(fèi)時(shí)間。


最后總結(jié)


好啦,文章分享的內(nèi)容比較多,但是并不是每一部分都非做不可,文檔也并不是絕對的規(guī)范,每一家公司交互設(shè)計(jì)師的職責(zé)可能都不太相同,所以大家可以根據(jù)自身需求因地制宜,曾經(jīng)有人說過,設(shè)計(jì)的本質(zhì)并不是把簡單的事情做復(fù)雜,而是把復(fù)雜的事情做簡單,所以我希望有一天你們能把交互設(shè)計(jì)文檔做到很簡單,而把產(chǎn)品做得非常好,然后跟我分享經(jīng)驗(yàn),這才是我寫文章的初心。


文章來源:站酷 作者:北沐而川

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


移動(dòng)端交互控件規(guī)范總結(jié):彈窗(二)

周周

以下內(nèi)容主要以 iOS 官方設(shè)計(jì)指南和網(wǎng)絡(luò)上的相關(guān)文章為參考,但同時(shí)也包含個(gè)人理解與思考,并非絕對、唯一的標(biāo)準(zhǔn)。

交互設(shè)計(jì)|產(chǎn)品細(xì)節(jié)體驗(yàn)筆記

周周

隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展,每一個(gè)軟件背后都有一個(gè)優(yōu)秀的項(xiàng)目團(tuán)隊(duì)和公司,騰訊或是阿里巴巴,他們旗下的APP我們也耳熟能詳,但是關(guān)于每個(gè)軟件的細(xì)節(jié)之處我們應(yīng)該大多數(shù)都沒有關(guān)注到,每個(gè)產(chǎn)品的人性化設(shè)計(jì)為我們增加了方面,想要了解和學(xué)習(xí)的崽崽們可以看看哦!

表單篇 | 掌握基本原則,幫你設(shè)計(jì)出更優(yōu)質(zhì)的表單!

周周

表單是UI設(shè)計(jì)中很常見的元素,不管是PC端還是移動(dòng)端,表單幾乎是無法規(guī)避的UI控件,用戶可以通過表單完成線上購物、信息交換、文章訂閱等任務(wù),使用范疇極為廣泛且牽扯到方方面面。

UI設(shè)計(jì)師交互設(shè)計(jì)-被忽視的UX產(chǎn)品文案

周周

在很多體驗(yàn)設(shè)計(jì)師的認(rèn)知中,產(chǎn)品界面上的文案是設(shè)計(jì)中最細(xì)枝末節(jié)的事,往往會(huì)被忽視。大部分時(shí)候,能讓用戶理解的文案就是合格的。而什么是好的文案,沒有一致的評(píng)價(jià)標(biāo)準(zhǔn),在復(fù)雜的業(yè)務(wù)場景中也很難做出判斷。

淺析用戶體驗(yàn)四維度

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn),是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。

 

解讀用戶體驗(yàn),可以有很多視角。本文提供一個(gè)以人為本的視角:用戶體驗(yàn)四維度。具體如下。

 

HI X:Human Interface Experience,人與界面的交互體驗(yàn)。

HC X:Human Content Experience,人與內(nèi)容的交互體驗(yàn)。

HH X:Human Human Experience,人與人的交互體驗(yàn)。

HB X:Human Brand Experience,人與品牌的交互體驗(yàn)。


用戶體驗(yàn)四維度

 

 

01 四維度的概念

 

怎樣判斷一款產(chǎn)品有幾個(gè)維度?這就要從四維度的概念說起。

 

1. HI X(人與界面的交互體驗(yàn))

 

HI X 是指用戶在瀏覽、閱讀、操作界面過程中產(chǎn)生的主觀感受。

 

HI X 既受信息架構(gòu)、交互設(shè)計(jì)和UI設(shè)計(jì)的影響,也受根需求和功能架構(gòu)的影響。主要依托手機(jī)和電腦的互聯(lián)網(wǎng)產(chǎn)品,天然存在界面。所以,HI X 屬于基礎(chǔ)屬性,所有產(chǎn)品都有。

 

2. HC X(人與內(nèi)容的交互體驗(yàn))

 

HC X 是指用戶在消費(fèi)內(nèi)容時(shí),內(nèi)容本身帶給用戶的主觀感受。

 

這里的內(nèi)容,既包括衣服、鞋子等實(shí)體商品,也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴(yán)選等電商產(chǎn)品,以及公眾號(hào)、Instagram、抖音等 UGC 產(chǎn)品,都具備 HC X 屬性。

 

3. HH X(人與人的交互體驗(yàn))

 

HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時(shí)產(chǎn)生的主觀感受,或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。

 

所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間,是指當(dāng)用戶扎堆或溝通交流時(shí),交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間,是指當(dāng)產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務(wù)時(shí),產(chǎn)品工作人員的服務(wù)行為帶給用戶的主觀感受。

 

關(guān)于第一層含義,不管是更強(qiáng)調(diào)社區(qū)屬性的產(chǎn)品,比如天涯社區(qū)、豆瓣小組、百度貼吧,還是更強(qiáng)調(diào)內(nèi)容屬性的產(chǎn)品,比如公眾號(hào)、微博、小紅書的筆記,都具備 HH X 屬性。

 

關(guān)于第二層含義,常見的 HH X 由客服人員提供。如果是電商產(chǎn)品,提供人員還包括快遞員和售后人員等。

 

4. HB X(人與品牌的交互體驗(yàn))

 

HB X 是指當(dāng)用戶想起、談?wù)撈鹌放疲蚴褂闷放频漠a(chǎn)品、體驗(yàn)品牌的服務(wù)時(shí),品牌帶給用戶的主觀感受。

 

只要一款產(chǎn)品做成了品牌,它就有 HB X 屬性。

 

HB X 會(huì)直接影響到我們是否信任、喜歡一個(gè)品牌,以及是否會(huì)使用它的產(chǎn)品和服務(wù)。所以,我們對 HB X 往往會(huì)有一個(gè)抓重點(diǎn)的綜合評(píng)價(jià)。就像一個(gè)外向活潑的女生,雖然在外向程度方面和一個(gè)內(nèi)向安靜的男生不一致,但雙方也可能會(huì)選擇在一起,因?yàn)閮?nèi)向、外向并非雙方關(guān)注的重點(diǎn)。

 

因?yàn)?HB X 牽涉到對品牌的綜合評(píng)價(jià),所以就像工作都有一段試用期、戀愛都有一段了解期一樣,HB X 的形成往往也需要較長時(shí)間,通常至少要 3~5 年。

 

 

02 四維度的價(jià)值

 

每一個(gè)維度,各有什么價(jià)值?

 

1. HI X(人與界面的交互體驗(yàn))

 

作為基礎(chǔ)屬性,HI X 的價(jià)值主要體現(xiàn)在以下兩方面。

如果是一款只具有 HI X 屬性的工具型產(chǎn)品,比如視頻會(huì)議產(chǎn)品 Zoom,那于這款產(chǎn)品而言,HI X 就是一切,這款產(chǎn)品的成敗也幾乎完全取決于 HI X。

 

如果是一款同時(shí)具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品,比如 B 站、快手這些視頻類產(chǎn)品,那此時(shí)的 HI X 就會(huì)扮演一個(gè)類似交通出行(基礎(chǔ)設(shè)施)的角色。如果 HI X 比較差,這個(gè)“出行”過程就會(huì)像出去玩時(shí)的塞車一樣,讓人難受;如果 HI X 很優(yōu)秀,這個(gè)“出行”過程就會(huì)像準(zhǔn)點(diǎn)的高鐵、飛機(jī)一樣,又快又爽。

 

2. HC X(人與內(nèi)容的交互體驗(yàn))

 

HC X 主要從內(nèi)容層面影響用戶滿意度。

 

如果 HC X 比較好,用戶消費(fèi)時(shí)的決策時(shí)間就會(huì)被大大縮減,同時(shí)用戶滿意度也會(huì)比較高。比如淘寶上就有一些原創(chuàng)設(shè)計(jì)、質(zhì)量不錯(cuò)、價(jià)格不貴的精品小店,很受歡迎。我們?nèi)ゾW(wǎng)易嚴(yán)選、優(yōu)衣庫天貓旗艦店這些質(zhì)量不錯(cuò)、設(shè)計(jì)不錯(cuò)、價(jià)格適中的店鋪買 東西時(shí),也會(huì)很快很省心。

 

以上說的是電商產(chǎn)品,對于 UGC 類的內(nèi)容產(chǎn)品,也是類似的道理。比如站酷上的首頁推薦和編輯推薦,相對而言,HC X 比較不錯(cuò),所以看這些內(nèi)容的用戶也會(huì)比較多。

 

3. HH X(人與人的交互體驗(yàn))

 

HH X 是用戶情緒的最大影響因素,在情感方面對用戶具有最大吸引力。物以類聚,人以群分。HH X 良好的產(chǎn)品,會(huì)像一場談笑風(fēng)生、其樂融融的聚會(huì),吸引用戶去扎堆。

 

良好的 HH X 往往意味著良好的氛圍,它不僅能帶給我們諸如輕松、愉快等積極情緒,還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果,就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好,具體而言就是彈幕氛圍比較歡樂友好,這樣的氛圍帶給用戶的感覺是比較好的,用戶也喜歡在 B 站就著彈幕看視頻。

 

4. HB X(人與品牌的交互體驗(yàn))

 

HB X 事關(guān)品牌能不能以正面形象住進(jìn)用戶心里。

良好的 HB X,往往意味著良好的品牌美譽(yù)度和忠誠度。HB X 良好的產(chǎn)品,就像你信任和喜歡的男/女朋友一樣,他/她會(huì)在你心里占據(jù)一定的分量和地位,讓你樂意介紹給家人和朋友認(rèn)識(shí)。比如蘋果的 Mac,就有很高的品牌美譽(yù)度和忠誠度,用戶也很樂意把 Mac 推薦給身邊的朋友。

 

 

03 四維度的關(guān)系

 

四維度之間存在怎樣的關(guān)系?

 

1. HI X 是另外三個(gè)維度的基礎(chǔ)

 

HI X 作為基本維度,相當(dāng)于“水之源,木之本”。如果把用戶體驗(yàn)四維度比作一個(gè)金字塔的話,塔底的基石一定是 HI X,塔尖則是 HB X。

 

2. HC X 通常是 HH X 的基礎(chǔ)

 

HH X 的產(chǎn)生,通常離不開 HC X。也就是說,通常得有一個(gè)合適的“內(nèi)容”或“主題”,才能把人聚攏過來。比如結(jié)婚的時(shí)候,你可以邀請到很多親朋好友來參加婚禮,但在平時(shí),你很難邀請到這么多人。我們在 B 站看視頻的時(shí)候,彈幕通常比較歡樂友好,氛圍不錯(cuò),但如果沒有這些視頻,也就不會(huì)有這些彈幕,以及不錯(cuò)的社區(qū)氛圍。

 

3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎(chǔ)

 

HC X、HH X 和 HI X 一樣,都可以成就 HB X。

 

以早期 Keep 為例,剛開始只有課程這個(gè)功能,也就是說只有 HI X 和 HC X 這兩個(gè)屬性。其中,HI X 還可以,HC X 比較優(yōu)秀。在此基礎(chǔ)上,慢慢發(fā)展出了社區(qū)功能(HH X 屬性),而且做得不錯(cuò)。再往后,有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下,Keep 有了不錯(cuò)的品牌美譽(yù)度和忠誠度。也就是說,HC X、HH X 和品牌精神等因素,一起成就了良好的 HB X。

 

4. HB X 也可以僅有 HI X 這一個(gè)基礎(chǔ)

 

有些產(chǎn)品并不具有 HC X 和 HH X 這兩個(gè)屬性,而是僅有 HI X 這一個(gè)屬性。單憑一個(gè)良好的 HI X,也可以成就良好的 HB X。

 

比如 Zoom,作為一款開視頻會(huì)議的工具應(yīng)用,它最初只有 HI X 這一個(gè)屬性。但是因?yàn)楹芎糜?,HI X 很優(yōu)秀,所以如今的 Zoom 即便沒有內(nèi)容(HC X)和社區(qū)(HH X)屬性,依然成了一個(gè)在全球都很受歡迎的品牌,擁有了不錯(cuò)的 HB X。

 

總的來說,在四維度的金字塔里面,它們的關(guān)系如下圖所示。


用戶體驗(yàn)四維度的金字塔關(guān)系

文章來源:站酷  作者:Snow Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


詳解|用戶體驗(yàn)地圖,到底該如何使用?

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn)地圖是什么 | WHAT

用戶體驗(yàn)地圖(Experience Maps)旨在通過描述用戶歷程和故事,使設(shè)計(jì)師、產(chǎn)品經(jīng)理等項(xiàng)目成員更好地了解用戶和洞察訴求。所以對于用戶體驗(yàn)地圖,我們可以將其定義為以下內(nèi)容:

- 是一種描述用戶故事的可視化工具;

- 是一種幫助設(shè)計(jì)師、產(chǎn)品經(jīng)理等更好地了解用戶的共創(chuàng)工具;

- 從用戶視角出發(fā),直觀展現(xiàn)產(chǎn)品流程各個(gè)觸點(diǎn)上用戶的痛點(diǎn)、需求和情緒;

- 用戶體驗(yàn)地圖繪制的形式并不唯一,可以根據(jù)項(xiàng)目需求,增減內(nèi)容。


undefined  

△ 途家 App 用戶租房 · 用戶體驗(yàn)地圖案例



通常在接觸到需求之后,設(shè)計(jì)師就可以開始梳理現(xiàn)有流程、使用用戶體驗(yàn)地圖了。要注意的是:

- 需要梳理的功能不分大小,都可以使用;

- 做之前,務(wù)必要先調(diào)研和訪談?dòng)脩羰褂卯a(chǎn)品的情況。

建議時(shí)長:

- 重要項(xiàng)目:120~180 分鐘- 日常項(xiàng)目:60~120分鐘

參與者:

- 必選:設(shè)計(jì)師、產(chǎn)品- 可選:研發(fā)、市場、其他

工具:

- 電腦或白板+便利貼

 

為什么需要用戶體驗(yàn)地圖 | WHY

需要發(fā)現(xiàn)和拆解產(chǎn)品現(xiàn)有問題,梳理用戶流程時(shí)使用用戶體驗(yàn)地圖,可以在聚焦階段,整合用戶訴求和業(yè)務(wù)訴求,共創(chuàng)機(jī)會(huì)點(diǎn),找出解決方案,通常在以下場景中使用:

- 新產(chǎn)品設(shè)計(jì):需要對需求進(jìn)行拆解和優(yōu)先級(jí)排序;

- 產(chǎn)品優(yōu)化:發(fā)現(xiàn)產(chǎn)品現(xiàn)有問題,洞察設(shè)計(jì)發(fā)力點(diǎn)。

 

由此可見,在設(shè)計(jì)過程中使用用戶體驗(yàn)地圖作為設(shè)計(jì)工具,有以下益處:

- 更好的以用戶視角來看產(chǎn)品的體驗(yàn);

- 通過共創(chuàng),項(xiàng)目成員達(dá)成共識(shí);

- 確認(rèn)觸點(diǎn),作為我們的設(shè)計(jì)方向;

- 通過用戶痛點(diǎn)找到機(jī)會(huì)點(diǎn);

- 幫助梳理產(chǎn)品流程。


undefined


△ 用戶體驗(yàn)地圖共創(chuàng)現(xiàn)場

 

用戶體驗(yàn)地圖操作流程 | HOW

我們通常會(huì)將流程分成4 個(gè)階段:定義原則和目的 —— 梳理階段流程 —— 洞察痛點(diǎn) —— 尋找機(jī)會(huì)點(diǎn)。


1. 定義原則和目的

首先要了解我們做用戶體驗(yàn)地圖的原因和目的,包括用戶是誰、解決什么問題、用戶的目標(biāo)、產(chǎn)品的整體目標(biāo)、限定條件等等,對用戶群體、整個(gè)項(xiàng)目背景和共創(chuàng)任務(wù)目標(biāo)有清晰、全面的認(rèn)知。


undefined


2. 梳理階段流程 

首先是劃分階段,將用戶的行為拆分成幾個(gè)大的階段,在整理時(shí)要注意:

- 在整個(gè)產(chǎn)品的范圍之內(nèi)盡量把故事、流程講完整;- 以廣度優(yōu)先,而非深度,不要過早的沉浸到細(xì)節(jié)中。

接下來我們要將主要階段拆分成單個(gè)任務(wù),并梳理具體的任務(wù)和觸點(diǎn),羅列出過程中的任務(wù)和各個(gè)觸點(diǎn),要做到事無巨細(xì)。


undefined


然后根據(jù)任務(wù)和觸點(diǎn),整理對應(yīng)的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進(jìn)行梳理,客觀的描述事實(shí),切勿自說自話或是將自己的情緒代入其中,也不要急于猜想與分析。


undefined


3. 洞察痛點(diǎn)

這一步需要我們匯總用戶的痛點(diǎn),并將痛點(diǎn)分級(jí),洞察用戶痛點(diǎn)背后的真實(shí)訴求。這個(gè)過程中可以先讓大家在一定時(shí)間內(nèi)寫出自己的想法,每一條寫在一張卡片上,做到先相互不干擾,之后再統(tǒng)一整理和總結(jié)。


undefined


4. 尋找機(jī)會(huì)點(diǎn)

通過上述總結(jié),思考新的機(jī)會(huì)點(diǎn)、解決方案、優(yōu)化整體流程,并對新流程下的功能做優(yōu)先級(jí)排序??梢酝ㄟ^準(zhǔn)備一些問題來刺激大家腦爆出更多的內(nèi)容,比如:用戶還有其他選擇么?怎么做用戶才能更爽?其他用戶來到這里該怎么處理?等等。在這個(gè)階段需要:

- 對內(nèi)容進(jìn)行對標(biāo)、討論,把公認(rèn)的點(diǎn)保留下來,無用的點(diǎn)剔除出局;- 根據(jù)實(shí)際情況和項(xiàng)目成本、進(jìn)度等條件,對新流程下的功能做優(yōu)先級(jí)排序。


undefined


 

如何為過程提效 |TIPS

在實(shí)際的工作過程中,因?yàn)轫?xiàng)目時(shí)間都非常緊張,繪制這樣一個(gè)完整的用戶體驗(yàn)地圖比較耗費(fèi)時(shí)間,所以推薦大家?guī)讉€(gè)提效的技巧,既可以減少時(shí)間浪費(fèi),也可以提高共創(chuàng)質(zhì)量:

1. 事前

充分做好用戶調(diào)研,提前準(zhǔn)備好用戶地圖模板,可以在開始之前的一到兩天發(fā)給參會(huì)人員,讓所有人對產(chǎn)品有一個(gè)整體梳理和思考,有助于提高大家的產(chǎn)出質(zhì)量。

2. 事中

如果是優(yōu)化的產(chǎn)品,可以將設(shè)計(jì)稿 demo 或者線上產(chǎn)品截圖打印出來,這樣可以增強(qiáng)大家的代入感,有利于想法的輸出。

3. 事后

整理電子版體驗(yàn)地圖,需要跟隨產(chǎn)品的演進(jìn)進(jìn)行更新,上傳到項(xiàng)目共享空間隨時(shí)查看。

文章來源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



日歷

鏈接

個(gè)人資料

存檔