一套完整的產(chǎn)品設(shè)計(jì)流程是怎樣的?

這是我目前在知乎點(diǎn)贊最高的回答,本文會(huì)用簡(jiǎn)明扼要的文字講解一下產(chǎn)品設(shè)計(jì)流程,底部還會(huì)附有推薦書(shū)籍和相關(guān)案例。

人機(jī)交互與產(chǎn)品設(shè)計(jì)已經(jīng)在西方國(guó)家發(fā)展了半個(gè)多世紀(jì),已經(jīng)研究出了相當(dāng)多的方法理論。國(guó)內(nèi)跟進(jìn)沒(méi)有很久,再加上前幾年野蠻生長(zhǎng),導(dǎo)致很多人對(duì)這一領(lǐng)域缺乏系統(tǒng)認(rèn)知。而設(shè)計(jì)流程,又是系統(tǒng)認(rèn)知中的基礎(chǔ)。

這里我根據(jù)留英所學(xué)和大廠工作經(jīng)驗(yàn),整理了一套在國(guó)際上被廣為認(rèn)可的,而且在國(guó)內(nèi)具有一定可行性的產(chǎn)品設(shè)計(jì)流程

線上一張圖:

大綱

準(zhǔn)備階段 ——

1. 定性研究?Qualitative Research

針對(duì)可能使用你的產(chǎn)品的人,可以是問(wèn)卷、訪談…

2. 確定人物角色?Persona

即產(chǎn)品的典型用戶,可以有一種或幾種。

3. 問(wèn)題腳本?Problem Scenario

羅列人物角色在使用產(chǎn)品時(shí)可能遇到的問(wèn)題,可以整理成一個(gè)故事便于別人理解。

4. 動(dòng)作腳本?Action Scenario

像寫故事一樣,寫人物角色在使用你設(shè)計(jì)好的產(chǎn)品時(shí),發(fā)生的細(xì)節(jié)。注意,這個(gè)時(shí)候你的產(chǎn)品概念模型已經(jīng)基本成型了,這個(gè)概念模型是通過(guò)解決問(wèn)題腳本里的問(wèn)題而得出的。

輸出階段——

5. 畫線框圖?Wireframe

這個(gè)線框圖是通過(guò)把動(dòng)作腳本里的概念模型轉(zhuǎn)化成視覺(jué)模型得到的。

6. 交互原型?Prototype

做出來(lái)好像可以用的東西,有很多原型工具可以利用。

評(píng)測(cè)階段——

7. 專家評(píng)測(cè)?Expert Evaluation

至少兩名設(shè)計(jì)師或?qū)换ピO(shè)計(jì)比較了解的人通過(guò)反復(fù)測(cè)試原型。找到問(wèn)題后修改線框圖并更新原型。

8. 用戶評(píng)測(cè)?User Evaluation

讓用戶使用原型,可以給他們一些任務(wù)去完成。根據(jù)用戶在使用過(guò)程中的問(wèn)題和建議進(jìn)行進(jìn)一步修改。

方法

1. 定性研究?Qualitative Research

無(wú)論你用何種形式做調(diào)查,你的目的是了解用戶的五個(gè)方面。假設(shè)體驗(yàn)進(jìn)階公眾號(hào)是一款產(chǎn)品:

行為?Activities

例如用戶多久打開(kāi)一次體驗(yàn)進(jìn)階、一次閱讀多久?

態(tài)度?Attitudes

例如用戶怎樣看待這個(gè)體驗(yàn)進(jìn)階?

資質(zhì)?Aptitudes

例如體驗(yàn)進(jìn)階用戶的學(xué)歷背景怎樣?

動(dòng)力?Motivation

例如體驗(yàn)進(jìn)階用戶為什么使用該產(chǎn)品?

技能?Skills

例如用戶對(duì)同類產(chǎn)品或平臺(tái)設(shè)備是否熟悉?

2. 人物角色?Persona

如果你的定性研究有所成功,這時(shí)你應(yīng)該對(duì)你的用戶有所了解了。根據(jù)上文中的五個(gè)方面,你需要挑揀出最典型的一個(gè)或幾個(gè)形象。例如體驗(yàn)進(jìn)階讀者的人物角色可能有:剛上路的設(shè)計(jì)新人、具有探索欲的產(chǎn)品經(jīng)理、尋找轉(zhuǎn)型方向的UI設(shè)計(jì)師……

你不但要確定這些人物角色(Persona)的主要特點(diǎn),還要確定他們的需求和目的。為了增加真實(shí)性,可以給人物角色(Persona)取名字,選一張照片,細(xì)化他們的背景資料。

以下是范例:

上圖來(lái)源:https://dribbble.com/shots/6197926-Persona


上圖來(lái)源:https://dribbble.com/shots/4864252-Woman-User-Persona-UX

3. 問(wèn)題腳本?Problem Scenario

基于你對(duì)人物角色(Persona)的理解,你應(yīng)該已經(jīng)可以設(shè)想出他們?cè)谑褂卯a(chǎn)品中可能遇到的問(wèn)題了。你可以為每一個(gè)人物角色列一個(gè)問(wèn)題單,也可以把它們整理到一個(gè)簡(jiǎn)短的故事里。

以下是一個(gè)案例:

Macomb 先生和夫人都是退休老師,現(xiàn)在已經(jīng)60多歲了。他們的社會(huì)保障支票是他們收入的重要組成部分。他們剛剛賣掉了自己的大房子,搬到一間小公寓里。

他們知道,他們現(xiàn)在需要做的許多雜事之一就是告訴社會(huì)保障局他們已經(jīng)搬家了。他們不知道最近的社會(huì)保障處在哪里,而且他們走路或開(kāi)車越來(lái)越困難。

如果足夠簡(jiǎn)單和安全,他們希望使用計(jì)算機(jī)將其舉動(dòng)通知社會(huì)保障局。但是,他們對(duì)于通過(guò)計(jì)算機(jī)執(zhí)行這樣的任務(wù)有些擔(dān)心。他們從未在工作中使用計(jì)算機(jī)。

然而,他們的兒子 Steve 去年給了他們一臺(tái)計(jì)算機(jī),為他們安裝了計(jì)算機(jī),并向他們展示了如何使用電子郵件和訪問(wèn)網(wǎng)站。

他們從未去過(guò)社會(huì)安全管理局的網(wǎng)站,所以他們不知道它的組織方式。此外,他們也不愿在線提供個(gè)人信息,因此他們想知道以這種方式告訴代理機(jī)構(gòu)新地址的安全性。

上文來(lái)源:https://www.usability.gov/how-to-and-tools/methods/scenarios.html

4. 動(dòng)作腳本?Action Scenario

首先你要為已列出的問(wèn)題想好可能的解決方案,然后寫一個(gè)簡(jiǎn)短的故事把這些解決方案囊括進(jìn)去。寫成故事的好處是代入感較強(qiáng),對(duì)別人來(lái)說(shuō)容易理解。國(guó)內(nèi)比較推崇故事版,但是把所有情景畫出來(lái)的效率是非常低的。

在畫設(shè)計(jì)之前把用戶動(dòng)作通過(guò)文字腳本寫出來(lái)有一個(gè)很大的好處,那就是明確了主要的用戶路徑。以下是一個(gè)案例:

約瑟夫在他的辦公室,需要為他的商務(wù)會(huì)議預(yù)定一家酒店,該酒店將在紐約舉行。?商務(wù)會(huì)議將在四天內(nèi)舉行。

他很忙,由于他還有很多其他工作要做,因此需要在他逗留期間盡快找到一個(gè)可以睡覺(jué)的地方。

他打開(kāi)我們的網(wǎng)站,知道他想去的城市的日期和名稱??吹胶芏鄺l目后,他注意到他想在中心附近的一家旅館里住,因?yàn)榭蛻魰?huì)議將在該地區(qū)舉行。他還需要滿足其他條件:靠近地鐵站,附近有一些餐館。

他找到了一個(gè)地方并將其預(yù)訂。

他收到確認(rèn)。

上文來(lái)源:https://medium.com/@Kristijan197/hci-method-user-groups-and-scenarios-8904ad706e93

5. 畫線框圖?Wireframe

這個(gè)時(shí)候你對(duì)你的交互方案已經(jīng)有了一個(gè)比較抽象的想法了,現(xiàn)在只要把它具象化就好了。線框圖大家都比較了解,這里就不多說(shuō)了。

上圖來(lái)源:https://dribbble.com/shots/6194759-Upshift-wireframe/attachments

上圖來(lái)源:https://dribbble.com/shots/7084851-CRM-System-UX-Process

其實(shí)線框圖不一定很糙,有的人甚至喜歡直接上色開(kāi)始視覺(jué)。這一步需要畫到什么程度呢,我之前有發(fā)過(guò)一篇文章:交互方案改畫到程度(關(guān)注體驗(yàn)進(jìn)階公眾號(hào)回復(fù)jhfa即可查看)。

6. 交互原型?Prototype

如果是比較重要的項(xiàng)目,可以叫上開(kāi)發(fā)一起來(lái)灰度測(cè)試。但是即便是這樣,也建議設(shè)計(jì)稿出來(lái)后,就可以立即做一個(gè)底成本的交互原型。

可以使用的原型工具還是很多的,例如 Axure RP 、 InVision 等。即便沒(méi)有專業(yè)工具,用 PPT 也可以搞出來(lái),只要做出一個(gè)可以交互的東西就行了。

一個(gè)原型是不可能實(shí)現(xiàn)所有功能的,所以你要確定幾個(gè)可以走通的功能,讓給用戶能夠順利在指定路徑上完成一系列任務(wù)。

上圖來(lái)源:https://dribbble.com/shots/6194759-Upshift-wireframe/attachments
上圖來(lái)源:https://dribbble.com/shots/4757077-Newslist-Interactions

7. 專家評(píng)測(cè)?Expert Evaluation

原型完成后召集至少兩三個(gè)設(shè)計(jì)師或者對(duì)交互比較了解的人,使用并評(píng)測(cè)原型。你可以將原型所關(guān)注的幾個(gè)任務(wù)列出來(lái),以免專家不知道原型哪部分可交互哪部分不可交互。

比較常用的評(píng)測(cè)方法是啟發(fā)式評(píng)估法(Heuristic Evaluation),而這種方法比較常見(jiàn)的標(biāo)準(zhǔn)是尼爾森交互設(shè)計(jì)法則(Nielsen Heuristic):

1. 系統(tǒng)狀態(tài)是否可見(jiàn)?Visibility of system status

2. 系統(tǒng)是否符合現(xiàn)實(shí)世界的習(xí)慣??Match between system and the real world

3.?用戶是否能自由地控制系統(tǒng)?User control and freedom

4.?統(tǒng)一與標(biāo)準(zhǔn)?Consistency and standards

5.?錯(cuò)誤防范?Error prevention

6.?減輕低用戶的記憶負(fù)擔(dān)?Recognition rather than recall

7.?靈活性和效率?Flexibility and efficiency of use

8.?美觀簡(jiǎn)潔?Aesthetic and minimalist design

9.?幫助用戶認(rèn)知、了解錯(cuò)誤,并從錯(cuò)誤中恢復(fù)?Help users recognize, diagnose, and recover from errors

10.?幫助文檔?Help and documentation

如何使用啟發(fā)式評(píng)估法?

1. 列出問(wèn)題:專家們各自將自己發(fā)現(xiàn)問(wèn)題列出來(lái),并將之與對(duì)應(yīng)的法則相關(guān)聯(lián),或者根據(jù)法則來(lái)查找問(wèn)題。例如“系統(tǒng)狀態(tài)是否可見(jiàn)”在這一條產(chǎn)品上是否體現(xiàn)完善,有哪些問(wèn)題?

2. 各自評(píng)估:然后專家們分別給自己的問(wèn)題進(jìn)行分級(jí),大家要使用統(tǒng)一的標(biāo)準(zhǔn)。

3. 統(tǒng)一討論:專家們把問(wèn)題整合起來(lái)一起討論,遇到意見(jiàn)不統(tǒng)一的適合投票表決或者采用平均值。

評(píng)級(jí)標(biāo)準(zhǔn)非常多,你也可以設(shè)計(jì)自己的標(biāo)準(zhǔn)。我認(rèn)為比較簡(jiǎn)單好用的是 Jeff Robin 問(wèn)題分級(jí):

4級(jí) ·?致命問(wèn)題:無(wú)法使用產(chǎn)品的某一部分

3級(jí) · 重度問(wèn)題:難以完整使用產(chǎn)品的某一部分

2級(jí) · 中度問(wèn)題:大部分情況下能夠使用,但需要付出較大努力

1級(jí) ·?輕度問(wèn)題:偶爾發(fā)生且容易解決,或者問(wèn)題并不在產(chǎn)品的主要功能上

提醒:評(píng)測(cè)完后別忘記依據(jù)問(wèn)題的重要程度修改優(yōu)化設(shè)計(jì)稿和原型!

8. 用戶評(píng)測(cè)?User Evaluation

原型通過(guò)專家評(píng)測(cè)后,你可以找一些典型用戶使用原型。你可以把任務(wù)列給他們,讓他們自己嘗試完成任務(wù)。中間遇到的問(wèn)題可以記錄下來(lái),設(shè)計(jì)師通過(guò)觀察來(lái)進(jìn)行評(píng)分。

用戶最好是尋找符合人物角色(Persona)的目標(biāo)人群和真實(shí)用戶,這樣得出的結(jié)論是最可靠的。不過(guò),大多數(shù)情況下,產(chǎn)品的可用性問(wèn)題都是“功能隱藏太深”、“文字描述不清晰”等通俗問(wèn)題,一般人也能作為用戶在測(cè)試中發(fā)現(xiàn)足夠多的問(wèn)題。

比較常用的用戶評(píng)測(cè)方法是可用性測(cè)試:

1. 完成任務(wù):讓用戶根據(jù)一張任務(wù)列表使用產(chǎn)品

2. 記錄問(wèn)題:一名觀察員在旁觀察記錄問(wèn)題

3. 填寫問(wèn)卷:用戶完成任務(wù)后,填寫問(wèn)卷

4. 整理問(wèn)題:整理記錄下來(lái)的問(wèn)題并分類分級(jí)

除此之外,也有很多其它方式,例如 Focusing Group 、Think Aloud 和 Probing 等,但核心都離不開(kāi)可用性問(wèn)題。

那么,還有一個(gè)問(wèn)題,需要多少用戶才能做評(píng)測(cè)呢?怎么也要幾十上百個(gè)?其實(shí)只要五名用戶就可以發(fā)現(xiàn)80%的可用性問(wèn)題

如果你不相信,尼爾森在2000年就做過(guò)實(shí)驗(yàn),有數(shù)據(jù)為證:

數(shù)據(jù)來(lái)源:https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

有趣的是,用戶評(píng)測(cè)的結(jié)果可能和專家評(píng)測(cè)的結(jié)果相差很遠(yuǎn)。我以設(shè)計(jì)師都身份做過(guò)很多次可用性測(cè)試,每次都能發(fā)現(xiàn)意想不到的問(wèn)題,因?yàn)橛脩粢暯呛驮O(shè)計(jì)視角完全不同。

如果感興趣可以去閱讀我之前寫的文章:產(chǎn)品設(shè)計(jì)的用戶視角(關(guān)注公眾號(hào)體驗(yàn)進(jìn)階,回復(fù)yhsj即可查看)。

再次提醒:每次評(píng)測(cè)完后都要依據(jù)問(wèn)題的重要程度修改優(yōu)化設(shè)計(jì)稿和原型!

總結(jié)

這個(gè)流程,也不是單線程的。其中有些步驟,僅僅只是為了進(jìn)行下一步;另外一些,卻會(huì)對(duì)后面好幾個(gè)步驟產(chǎn)品影響。有幾個(gè)環(huán)節(jié),是又是可以循環(huán)好幾輪來(lái)優(yōu)化方案。

不過(guò),這些東西很難用文字表述出來(lái),最好是自己在實(shí)踐中體會(huì)。如果一定要展現(xiàn)出來(lái)給大家看看,那就是下面這張流程圖了:

如果每次產(chǎn)品上線前都把步驟做好了,測(cè)試來(lái)幾輪,不一定耗費(fèi)多少時(shí)間,但是效果絕對(duì)出乎你的意料。即便是再資深的產(chǎn)品專家和設(shè)計(jì)大神,都不可能算無(wú)遺漏,而數(shù)據(jù)永遠(yuǎn)是可靠的。

如果說(shuō)實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),那么用戶則是檢驗(yàn)產(chǎn)品體驗(yàn)的唯一標(biāo)準(zhǔn)。

案例

我一直想要把好的方法介紹給更多人,國(guó)內(nèi)對(duì)評(píng)測(cè)這一塊了解甚少,所以值得做一些事情。之前的幾篇產(chǎn)品評(píng)測(cè)文章,都是用這套方法做出來(lái)的,后臺(tái)回復(fù)【uxtest】即可查看案例(麥當(dāng)勞、聯(lián)通、微信、招行…)。

歡迎持續(xù)關(guān)注,也可以進(jìn)群加入我們,共同探索。

總結(jié)

如果每次產(chǎn)品上線前都把步驟做好了,測(cè)試來(lái)幾輪,不一定耗費(fèi)多少時(shí)間,但是效果絕對(duì)出乎你的意料。即便是再資深的產(chǎn)品專家和設(shè)計(jì)大神,都不可能算無(wú)遺漏,而數(shù)據(jù)永遠(yuǎn)是可靠的。

如果說(shuō)實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),那么用戶則是檢驗(yàn)產(chǎn)品體驗(yàn)的唯一標(biāo)準(zhǔn)。

更多相關(guān)閱讀

本文很多內(nèi)容都可以在《About Face》里看到,作者艾倫·庫(kù)伯 Alan Cooper 從 1992 年就創(chuàng)立了交互設(shè)計(jì)咨詢公司??梢?jiàn)美國(guó)對(duì)產(chǎn)品體驗(yàn)的研究有多久遠(yuǎn),那一年我剛好出生,家里的電腦還是 DOS 組裝臺(tái)式機(jī)。

這本書(shū)被人成為“交互圣經(jīng)”,是有道理的,我在讀研時(shí)這本書(shū)就在推薦閱讀的頭部位置,教授也多次提到或引用里面的內(nèi)容。

但是,我并不推薦閱讀!因?yàn)檫@本書(shū)自身的用戶體驗(yàn)并不好,比較晦澀難懂。如果你沒(méi)有一點(diǎn)學(xué)術(shù)基礎(chǔ)很難看得下去,而且翻譯水平有限,中文版還不一定比英文版更好理解。

如果你還是想要挑戰(zhàn)一下,也非常歡迎。


感謝閱讀,我是一名在華為和騰訊工作過(guò)的設(shè)計(jì)師,畢業(yè)于英國(guó)約克大學(xué)人機(jī)交互。關(guān)注我的公眾號(hào)體驗(yàn)進(jìn)階。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容