5★ - 騰訊大講堂4個(gè)步驟總結(jié)交互設(shè)計(jì)流程

圖片來(lái)自 人人都是產(chǎn)品經(jīng)理

文:?jiǎn)躺?| 轉(zhuǎn)自微信公眾號(hào)騰訊大講堂


良好的用戶體驗(yàn)包含很多內(nèi)容:服務(wù)、產(chǎn)品、參與者的感受等等,顯然產(chǎn)品功能的強(qiáng)大、界面的美觀并不能完全概括體驗(yàn)。體驗(yàn)還包含在產(chǎn)品與用戶之間的互動(dòng)、產(chǎn)品與場(chǎng)景的交互、產(chǎn)品對(duì)用戶的情緒上的影響等等的細(xì)枝末節(jié)中。

交互設(shè)計(jì)是設(shè)計(jì)人與產(chǎn)品接觸的動(dòng)態(tài)時(shí)間軸上的每一次接觸,從一開始的靠近、到產(chǎn)生共鳴、贊美,在每一個(gè)接觸行為的背后都有需要關(guān)注的用戶情緒、需要理解的用戶認(rèn)知??突?· 梅隆大學(xué)設(shè)計(jì)學(xué)院的John Zimmerman等提出了一個(gè)設(shè)計(jì)過(guò)程發(fā)現(xiàn)和汲取知識(shí)的流程框架:

Define(定義)、Discover(發(fā)現(xiàn))、Synthesize(綜合)、Construct(建構(gòu))、Refine(精煉)和 Reflect(反思)六個(gè)過(guò)程,這個(gè)流程的每一步驟都確立在前一個(gè)步驟的基礎(chǔ)上。

認(rèn)知用戶、定義設(shè)計(jì)的過(guò)程總是千頭萬(wàn)緒的,各個(gè)流程之間也是交叉進(jìn)行的,商業(yè)設(shè)計(jì)的具體實(shí)踐中很難真的遵循如此明確的流程。源于對(duì)具體設(shè)計(jì)問(wèn)題的理解,大致可以將交互設(shè)計(jì)的過(guò)程分成四個(gè)步驟:


1. 識(shí)別需求,模擬場(chǎng)景(define、discover)

2. 理清設(shè)計(jì)機(jī)會(huì)、定義功能(synthesize、construct)

3. 交互流程與原型圖(construct、refine)

4. 反思評(píng)估、規(guī)范化(refine、reflect)


明晰的設(shè)計(jì)模式幫助產(chǎn)品從概念構(gòu)想到完成品的整套過(guò)程。正如繪畫作品希望傳達(dá)給觀者情感內(nèi)涵一樣,交互設(shè)計(jì)也是借由產(chǎn)品與用戶進(jìn)行持續(xù)性的對(duì)話來(lái)創(chuàng)造產(chǎn)品的使用體驗(yàn)。




一. 識(shí)別需求,模擬場(chǎng)景


1.1 判別問(wèn)題和機(jī)遇

設(shè)計(jì)師接觸到需求任務(wù)的時(shí)候,先與產(chǎn)品經(jīng)理進(jìn)行溝通,搞清以下問(wèn)題:

產(chǎn)品想做什么?

用戶是誰(shuí)?

用戶的使用目標(biāo)是什么?

產(chǎn)品商業(yè)目標(biāo)和用戶使用目標(biāo)一致嗎?


設(shè)計(jì)師應(yīng)該抱持著懷疑批判的態(tài)度來(lái)審視產(chǎn)品的“愿景”,對(duì)于產(chǎn)品經(jīng)理提供的商業(yè)目標(biāo)與用戶目標(biāo)是否一致,是不確定的。為了具體量化這種不確定性,可以通過(guò)一些具體的問(wèn)題:產(chǎn)品想要給誰(shuí)做?功能對(duì)用戶有用嗎?有過(guò)類似的產(chǎn)品嗎?有沒(méi)有用戶反饋?

通過(guò)詢問(wèn)潛在用戶、產(chǎn)品經(jīng)理、為產(chǎn)品提供服務(wù)的第三方、了解現(xiàn)有數(shù)據(jù)等等途徑,設(shè)計(jì)嘗試了解用戶訴求和商業(yè)目標(biāo),綜合多種信息渠道后,如果覺(jué)得產(chǎn)品的商業(yè)目標(biāo)和用戶來(lái)到產(chǎn)品的目標(biāo)是不一致的,那么產(chǎn)品是否值得做就需要再討論。

如果判斷產(chǎn)品商業(yè)目標(biāo)和用戶目標(biāo)一致,那么設(shè)計(jì)師需要做的就是在用戶需求和商業(yè)利益之間取得平衡。為了能夠更加深入的了解目標(biāo)用戶的行為,做出人本設(shè)計(jì)的產(chǎn)品,就需要構(gòu)建典型的“用戶行為模型”,也可以說(shuō)是講個(gè)典型的用戶故事。


1.2 模擬典型場(chǎng)景故事

為了再現(xiàn)真實(shí)的用戶需求,需要模擬出真實(shí)的用戶場(chǎng)景。場(chǎng)景包含了用戶可能會(huì)施行的動(dòng)作,也包含用戶隨著時(shí)間的進(jìn)行所產(chǎn)生的情緒體驗(yàn)等。

優(yōu)秀的場(chǎng)景故事必須富含豐富的細(xì)節(jié),幫助設(shè)計(jì)師更加準(zhǔn)確的預(yù)期用戶的行為。在故事的構(gòu)建過(guò)程中,有兩點(diǎn)可以幫助設(shè)計(jì)師豐富、細(xì)化故事情境:

故事中包含哪些元素;

故事有哪幾個(gè)節(jié)點(diǎn)。


1.2.1 ?故事元素

故事元素指的是典型場(chǎng)景的什么用戶、什么心情、什么行為之類,幫助故事實(shí)際情境描述的更詳盡。下面列舉了故事中的元素。



1.2.2 故事的節(jié)點(diǎn)

故事的情節(jié)按照時(shí)間軸的推進(jìn),一系列行為的演化著,有一些關(guān)鍵情節(jié)可以被挑出,拆分關(guān)鍵情節(jié)就可以組成故事脈絡(luò)。在產(chǎn)品的故事中,這些關(guān)鍵情節(jié)就是用戶與產(chǎn)品的每個(gè)觸點(diǎn),將故事劃分為一個(gè)一個(gè)的節(jié)點(diǎn),可以清晰的了解用戶的行為步驟。

典型的故事場(chǎng)景的描述有兩大好處:一是對(duì)場(chǎng)景的敘述,可以讓設(shè)計(jì)師一開始就將注意集中在創(chuàng)造新想法、解決問(wèn)題和實(shí)現(xiàn)用戶目標(biāo)上面,也就是“以人為本”,而不是技術(shù)如何實(shí)現(xiàn);二是故事本身的時(shí)間、情節(jié)特性,非常符合交互設(shè)計(jì)的流程演化,可以對(duì)應(yīng)時(shí)間節(jié)點(diǎn)上的過(guò)程描述。


1.3 數(shù)據(jù)驗(yàn)證

用戶(Person)在具體場(chǎng)景(Case)下的行為(behavior)清楚了。如果想更清晰更全面的完善典型“用戶畫像”,或者解釋一些舉棋不定的地方,可以尋找收集項(xiàng)目相關(guān)的現(xiàn)有平臺(tái)、其他類似平臺(tái)的歷史數(shù)據(jù)。分析數(shù)據(jù)背后的原因,對(duì)決定設(shè)計(jì)方向的非常有用。


第一階段回顧:分析商業(yè)目標(biāo),描述了典型的用戶模型、通過(guò)故事細(xì)化了用戶的心理模型和行為模型。




二. 理清設(shè)計(jì)機(jī)會(huì)、定義功能


2.1 產(chǎn)品觸達(dá)用戶入口

在講述典型故事的時(shí)候,設(shè)計(jì)師已經(jīng)了解到用戶實(shí)際場(chǎng)景中困難、痛點(diǎn)。然后開始設(shè)計(jì)之后,進(jìn)行角色轉(zhuǎn)換。

是不是應(yīng)該在用戶覺(jué)得最有痛點(diǎn)的地方提供產(chǎn)品的入口呢?

這樣用戶對(duì)于產(chǎn)品的接受度和嘗試欲望是不是最高的呢?

如果用戶錯(cuò)過(guò)了這個(gè)推送入口,那還有沒(méi)有其他方式作為“觸類旁通”的辦法?


預(yù)先設(shè)想產(chǎn)品最好的使用場(chǎng)景,可以幫助產(chǎn)品最大程度的觸達(dá)用戶。


2.2 收斂和發(fā)散功能思維

調(diào)研也好,無(wú)限接近用戶使用場(chǎng)景也好,都是為了建立“同理心”?!巴硇摹钡捏w驗(yàn)幫助設(shè)計(jì)師搞清楚產(chǎn)品對(duì)于用戶來(lái)說(shuō):

有什么用?

那些功能最有用?

產(chǎn)品初期的腦暴中,可能會(huì)有很多很多關(guān)于產(chǎn)品的功能想法。這個(gè)階段可以通過(guò)一些方法來(lái)幫助設(shè)計(jì)師密集的探索新的想法:

廣泛的繪制草圖、記錄想法

順延故事脈絡(luò)發(fā)散額外的線索

思維導(dǎo)圖


這個(gè)階段是創(chuàng)造性的階段,一開始可能是雜亂五章的,通過(guò)不同的反思、歸類、驗(yàn)證,可以逐漸歸類出特定的方案。在篩選的過(guò)程中,典型的收斂方法是將諸多想法逐個(gè)剔除直到剩下最佳想法為止。往往這些篩選條件是由人性、技術(shù)、美感三個(gè)條件混合組成。

保證產(chǎn)品的簡(jiǎn)潔性、最重要功能的好體驗(yàn)是非常重要的。根據(jù)重要的設(shè)計(jì)節(jié)點(diǎn)篩選痛點(diǎn)功能,確定功能優(yōu)先級(jí)。


2.3 主要功能任務(wù)

對(duì)于新設(shè)計(jì)的產(chǎn)品來(lái)說(shuō),用戶執(zhí)行任務(wù)是具象而零散的,設(shè)計(jì)師將任務(wù)分解和重組之后將用戶行為歸納為主要任務(wù),可以較為清楚而全面的囊括用戶的需求、情緒、動(dòng)機(jī)、目標(biāo)和行為。

在整個(gè)主任務(wù)中,任務(wù)步驟被清晰的劃分,不同的決策指向不同的任務(wù)流程。任務(wù)分析是銜接分析和設(shè)計(jì)階段的關(guān)鍵步驟。


2.4 業(yè)務(wù)流程圖

流程圖綜合表達(dá)主任務(wù)的過(guò)程和決策分析的情況。交互設(shè)計(jì)師使用業(yè)務(wù)流程圖梳理清楚主任務(wù)的所有環(huán)節(jié),展示產(chǎn)品入口、用戶動(dòng)作之間的關(guān)聯(lián),根據(jù)不同決策而產(chǎn)生的頁(yè)面跳轉(zhuǎn)。

業(yè)務(wù)流程圖的合理性對(duì)于產(chǎn)品的整個(gè)環(huán)節(jié)包括后期開發(fā)都是非常重要的。創(chuàng)建流程圖的過(guò)程中可以更清晰的了解系統(tǒng)所涉及的范疇,形成心智圖景(mental representation)。



第二階段回顧:交互設(shè)計(jì)師通過(guò)綜合分析、發(fā)散收斂思維、提煉精化的過(guò)程,理清了流程中各個(gè)組件的關(guān)系,形成完整的產(chǎn)品圖景。




三. 交互流程與原型圖

業(yè)務(wù)流程圖已經(jīng)分類任務(wù)場(chǎng)景,下一步就是基于主要任務(wù)進(jìn)行界面原型設(shè)計(jì),原型設(shè)計(jì)要求需要準(zhǔn)確的展示用戶所需的信息,表達(dá)清楚各個(gè)頁(yè)面的跳轉(zhuǎn)關(guān)系。


3.1 主頁(yè)面的方案

從用戶任務(wù)出發(fā),聚焦用戶注意。對(duì)于一個(gè)產(chǎn)品來(lái)說(shuō),有一到兩個(gè)不等的頁(yè)面是產(chǎn)品最為重要的頁(yè)面,這個(gè)頁(yè)面展示了產(chǎn)品的主要功能,用戶在這個(gè)頁(yè)面執(zhí)行主要任務(wù)。同時(shí)主要頁(yè)面的用戶體驗(yàn)也承擔(dān)了產(chǎn)品主要體驗(yàn)的塑造。主頁(yè)面作為設(shè)計(jì)的重點(diǎn)是應(yīng)該被反復(fù)打磨的。

如何設(shè)計(jì)主頁(yè)面:

主頁(yè)面的內(nèi)容是哪些?

內(nèi)容的主次排序是怎樣的?

根據(jù)不同的思路將內(nèi)容按照主次順序設(shè)計(jì)

多種方案的對(duì)比、演繹、進(jìn)化

設(shè)計(jì)方案的過(guò)程中和后期都可以跟不同的人進(jìn)行溝通、討論,不同的人看待問(wèn)題的角度不同,這樣會(huì)啟發(fā)新的靈感

是否帶給用戶產(chǎn)品的歸屬感和關(guān)懷體驗(yàn)。


上述幾個(gè)步驟可以將界面零散的信息逐漸演化清楚為方案,在演化的最初不一定是標(biāo)準(zhǔn)的交互方案,可以是草稿的方式,快速的進(jìn)行方案的推進(jìn)演化。等待方案完善之后再用axure等界面軟件清晰的表達(dá)構(gòu)思。


3.2 支線流程的完善

主要流程中的主界面擺到清晰之后,輔助功能就會(huì)在方案形成過(guò)程中逐漸清楚。子流程的設(shè)計(jì)要注意在產(chǎn)品層級(jí)不要太深,在用戶需要使用的情境適當(dāng)出現(xiàn)。信息的表達(dá)上應(yīng)該清晰完整,還是應(yīng)該注意主次關(guān)系。


3.3 對(duì)細(xì)節(jié)的關(guān)注

對(duì)細(xì)節(jié)的關(guān)注和理解,才是獲得更高級(jí)體驗(yàn)的方法。用戶愿意使用尊重和理解他們的產(chǎn)品,也就是與產(chǎn)品產(chǎn)生積極的情感體驗(yàn)。想要滿足這種共鳴性更高的體驗(yàn)也有一些方式可以遵循:

具有代入感,也就是產(chǎn)品符合用戶角色;

沉浸感,執(zhí)行某一任務(wù)的過(guò)程中用戶可以進(jìn)入一種專注的狀態(tài);

高度的可感知,操作、反饋、提示都是明確而清晰的。


第三階段回顧:主界面的打磨,細(xì)節(jié)體驗(yàn)的關(guān)注都是塑造良好體驗(yàn)的方法,好的產(chǎn)品應(yīng)該讓用戶感知豐富、情感投入。




四. 反思評(píng)估、規(guī)范化

反思和規(guī)范是設(shè)計(jì)的最后一步,這個(gè)過(guò)程可以從全局來(lái)審視自己的設(shè)計(jì)過(guò)程,找出需要改進(jìn)的方法。規(guī)范化的案例可以更好的幫助后續(xù)別的產(chǎn)品的設(shè)計(jì),節(jié)約時(shí)間和資源。


4.1 可用性原則的檢查

文案的表達(dá),錯(cuò)誤的反饋,一致性原則,除去冗余的信息等等,這些都是在反復(fù)審視稿件中能夠不斷改進(jìn)的地方。

下面是一些可用的信息架構(gòu)原則和頁(yè)面表達(dá)原則,可以作為流程圖和頁(yè)面檢查的標(biāo)準(zhǔn)。

信息構(gòu)架的原則:

一個(gè)頁(yè)面一個(gè)主要內(nèi)容;

個(gè)人信息&公共信息;

更少的信息更好;

同等級(jí)的內(nèi)容應(yīng)表現(xiàn)成并列的樣子;

信息樹應(yīng)該盡量窄而淺,并且盡量保持平衡;

與現(xiàn)實(shí)生活經(jīng)驗(yàn)相符。


頁(yè)面表達(dá)原則:

更少的信息量更好。

結(jié)構(gòu)化更易于理解。

信息的表達(dá)應(yīng)該清楚、明確、直接。

操作可識(shí)別。

操作前,結(jié)果可預(yù)知。

操作時(shí),操作有反饋。

操作后,操作可撤銷。

讓用戶知道身處何地。

避免內(nèi)容看上去象廣告。

不提供多余的功能。

相同的功能,在不同的頁(yè)面中應(yīng)保持一致性。

措辭統(tǒng)一。


4.2 專家評(píng)審

在自己審視交互方案流程也基本順暢合理的時(shí)候,可以將方案發(fā)給專家評(píng)審,這里的專家既可以指有更豐富工作經(jīng)驗(yàn)的設(shè)計(jì)師,也可以是更加熟悉這款產(chǎn)品使用背景的產(chǎn)品經(jīng)理,讓他們了解設(shè)計(jì)方案,指出存在的問(wèn)題,修改細(xì)節(jié),更好的呈現(xiàn)。



4.3 開發(fā)跟進(jìn)

在原型設(shè)計(jì)完成之后的視覺(jué)、重構(gòu)、前端開發(fā)中,時(shí)時(shí)跟進(jìn),把控產(chǎn)品方向跟最初交互設(shè)計(jì)方案一致也是幫助用戶體驗(yàn)的重要一環(huán)。

第四階段回顧:全面審視設(shè)計(jì)流程,通過(guò)專家評(píng)審等方式改進(jìn)方案,規(guī)范總結(jié)設(shè)計(jì)方法。




總結(jié)

我們平時(shí)所談到的“用戶中心”的設(shè)計(jì)流程大致包含了:策略和用戶分析階段(UCA, User-Centered Analysis,即策略和用戶分析階段)和設(shè)計(jì)實(shí)施階段(UCD,User-Centered Design,即整合了設(shè)計(jì)、評(píng)估和實(shí)施、評(píng)估兩個(gè)階段)。交互設(shè)計(jì)其實(shí)恰好是貫穿了分析和實(shí)施階段的橋梁,交互設(shè)計(jì)師無(wú)限的接近真實(shí)用戶場(chǎng)景,尋找更加合理設(shè)計(jì)的答案,可以為產(chǎn)品的更好體驗(yàn)提供實(shí)實(shí)在在的幫助。

作者:?jiǎn)躺?,騰訊FIT金融市場(chǎng)部交互一枚,對(duì)探究人的認(rèn)知、合理規(guī)劃人機(jī)邏輯抱有極大的熱忱,目前持續(xù)研究中,歡迎探討,郵箱:1016415863@qq.com

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評(píng)論 6 540
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,275評(píng)論 3 428
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,904評(píng)論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評(píng)論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,368評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,736評(píng)論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評(píng)論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,919評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,481評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,235評(píng)論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,427評(píng)論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評(píng)論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,656評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評(píng)論 1 294
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,160評(píng)論 3 398
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,380評(píng)論 2 379

推薦閱讀更多精彩內(nèi)容