十步交互設(shè)計(jì)方法

2016-02-16

2314

梳理業(yè)務(wù)邏輯以及產(chǎn)品需求文檔

理清業(yè)務(wù)邏輯是交互設(shè)計(jì)的第一步，你必須得擁有非常清晰的邏輯思維，因?yàn)槟承┊a(chǎn)品往往伴隨著海量的功能、大量的模塊、錯(cuò)綜復(fù)雜的交互流程以及難以理解的業(yè)務(wù)技術(shù)背景，這些都是對(duì)設(shè)計(jì)師邏輯思維的一個(gè)挑戰(zhàn)。如果你沒(méi)有清晰的清晰的邏輯思維，那可能就不適合做交互設(shè)計(jì)了。

一些快速梳理業(yè)務(wù)邏輯和功能文檔的心得：

當(dāng)我們拿到PRD時(shí)先快速閱讀一遍，快速閱讀的目的是讓你大概了解客戶的需求和業(yè)務(wù)邏輯，在你心中形成一個(gè)模糊的需求模型，這樣會(huì)提高你的效率。
準(zhǔn)備一張紙和一支筆，把客戶的業(yè)務(wù)流程一步一步地畫(huà)下來(lái)，在畫(huà)業(yè)務(wù)流程的時(shí)候多問(wèn)產(chǎn)品和自己幾個(gè)為什么，為什么客戶會(huì)有這樣的需求？產(chǎn)生需求的場(chǎng)景是什么？為什么會(huì)出現(xiàn)這樣的問(wèn)題？問(wèn)題的概率大嗎？等等（上訴問(wèn)題如果有條件的話可以專門(mén)做一次客戶調(diào)研）。問(wèn)題弄明白后，把問(wèn)題和問(wèn)題的答案一并記錄到對(duì)應(yīng)的流程節(jié)點(diǎn)上。當(dāng)你認(rèn)認(rèn)真真地畫(huà)完一遍后整個(gè)業(yè)務(wù)邏輯也就差不多弄懂了。接下來(lái)再把整個(gè)流程看一遍，然后閉上眼去回憶和思考整個(gè)流程。如你當(dāng)你閉上眼能夠順利地理清整個(gè)流程，那么你也就弄懂了整個(gè)業(yè)務(wù)邏輯了。
冥想，把自己想成一個(gè)真實(shí)的用戶，帶著需求和場(chǎng)景繼續(xù)去回憶整個(gè)業(yè)務(wù)流程。

確定核心任務(wù)并確定任務(wù)優(yōu)先級(jí)

在講核心任務(wù)前，我想先用一張圖來(lái)闡述用戶需求的實(shí)現(xiàn)過(guò)程（如下圖）。

如上圖，任務(wù)是由設(shè)計(jì)師為了滿足用戶需求所設(shè)計(jì)出來(lái)的，用戶要想實(shí)現(xiàn)他的需求就得去完成產(chǎn)品為他所設(shè)計(jì)的任務(wù)，這就好比在游戲中做任務(wù)一樣，你只有完成了游戲任務(wù)你才能得到游戲的獎(jiǎng)勵(lì)和升級(jí)。對(duì)于某項(xiàng)任務(wù)來(lái)講又需要具體的行為去完成它，這就形成了任務(wù)的操作流程。需求、任務(wù)、行為這三者之間就形成了行為驅(qū)動(dòng)任務(wù)，多項(xiàng)任務(wù)去實(shí)現(xiàn)用戶需求的關(guān)系。

那么什么又是核心任務(wù)呢？于一個(gè)產(chǎn)品來(lái)說(shuō)，大量最終用戶希望通過(guò)這個(gè)產(chǎn)品去完成的任務(wù)被稱為核心任務(wù)；對(duì)于一個(gè)功能模塊來(lái)講，大量用戶會(huì)經(jīng)常使用某些功能去完成的任務(wù)稱為核心任務(wù)。

為什么需要確定核心任務(wù)？核心任務(wù)是大部分用戶大部分時(shí)間使用產(chǎn)品完成的任務(wù)，這正是為用戶帶來(lái)驚喜，為他們創(chuàng)建良好體驗(yàn)的絕佳機(jī)會(huì)，用戶在使用產(chǎn)品的過(guò)程中對(duì)核心任務(wù)的期望會(huì)越來(lái)越高。通過(guò)了解用戶的核心任務(wù)，你會(huì)更容易地去改進(jìn)產(chǎn)品，對(duì)所需資源按優(yōu)先度排序，把資源和時(shí)間投到核心任務(wù)上去，而不是花大量時(shí)間去改進(jìn)那些用戶不經(jīng)常使用的功能。前段時(shí)間寫(xiě)過(guò)一篇文章《任務(wù)優(yōu)先級(jí)的重要性》，實(shí)例講解了核心任務(wù)的重要性。

如何確定核心任務(wù)？由于核心任務(wù)會(huì)隨著用戶需求的改變而改變，而用戶需求又會(huì)隨著目標(biāo)用戶的變化而變化，所以說(shuō)你首先得弄明白自己產(chǎn)品最終用戶群體的類型。在確定了目標(biāo)用戶群體后，接下來(lái)就是確定他們的需求（這一步梳理功能需求文檔的時(shí)候就完成了），確定用戶需求后你就很清楚這個(gè)功能模塊中用戶經(jīng)常使用的功能是什么，他們?cè)谑褂眠@些功能時(shí)的痛點(diǎn)是什么。如果你是在改進(jìn)一款現(xiàn)有的產(chǎn)品，不要坐著去YY用戶的需求，站起來(lái)找?guī)讉€(gè)實(shí)際使用的用戶做個(gè)簡(jiǎn)單的調(diào)研，這樣很快就可以確定用戶的實(shí)際需求所在。接下來(lái)就是根據(jù)需求去確定核心任務(wù)，要永遠(yuǎn)記住任務(wù)是為了完成用戶的需求，它看起來(lái)很像在描述一個(gè)產(chǎn)品的功能。舉一個(gè)簡(jiǎn)單的例子，用戶的需求是希望能和好友一起聽(tīng)歌，我們?cè)O(shè)計(jì)出來(lái)的任務(wù)可能就是“分享一首歌給好友并同步播放”、“查看好友的歌單并一起聽(tīng)歌”

設(shè)計(jì)任務(wù)流程圖

任務(wù)流程圖是由用戶目標(biāo)作為導(dǎo)向來(lái)設(shè)計(jì)的，它描述的是用戶實(shí)現(xiàn)某一目標(biāo)所需要完成的任務(wù)，這些任務(wù)彼此間按照先后順序和條件連成一條線，這樣就形成了任務(wù)流程圖。舉一個(gè)最簡(jiǎn)單的購(gòu)物流程，我的目標(biāo)是購(gòu)買一件男士羽絨服，我需要完成的任務(wù)如下：登陸網(wǎng)站—尋找男士羽絨服—確定購(gòu)買對(duì)象—選擇物品參數(shù)—加入購(gòu)物車—結(jié)算—付款。設(shè)計(jì)任務(wù)流程時(shí)要不斷思考和嘗試如何讓用戶完成更少的任務(wù)去實(shí)現(xiàn)它的需求。在實(shí)際工作中，這部分工作通常由產(chǎn)品經(jīng)理完成，或者是交互設(shè)計(jì)師配合產(chǎn)品經(jīng)理完成。

設(shè)計(jì)行為流程圖

行為流程圖是完成某項(xiàng)任務(wù)所需要進(jìn)行的具體操作。上面的的購(gòu)物流程中每項(xiàng)任務(wù)都對(duì)應(yīng)著具體的行為流程，拿結(jié)算來(lái)講，用戶會(huì)經(jīng)過(guò)如下的這些操作：

和同行交流中發(fā)現(xiàn)很多人并沒(méi)有任務(wù)流程和行為流程的概念，會(huì)把他們混為一談一起去設(shè)計(jì)，個(gè)人認(rèn)為這樣是不好的，因?yàn)閷?duì)于架構(gòu)非常復(fù)雜的產(chǎn)品來(lái)講，一起設(shè)計(jì)會(huì)使你的思維在整體流程與具體行為之間不斷地跳躍，思路會(huì)變得很亂，設(shè)計(jì)出來(lái)的流程可能會(huì)是相當(dāng)復(fù)雜的。

交互邏輯的完善

在用戶完成某項(xiàng)任務(wù)的時(shí)候，不同場(chǎng)景下不同的選擇或操作會(huì)帶來(lái)不同的交互反饋和結(jié)果，這個(gè)過(guò)程中，我們就需要去完善這些交互邏輯。以下是我在完善交互邏輯時(shí)經(jīng)常考慮的方面：

1.是非條件的判斷：

是非條件是交互流程中最常見(jiàn)的一種條件判定，大家應(yīng)該都懂的，還是舉京東付款的例子，點(diǎn)擊結(jié)算了會(huì)判斷你是否有默認(rèn)的收貨地址，如果沒(méi)有就得添加，如果有就默認(rèn)選擇。

2.網(wǎng)絡(luò)信號(hào)

大家可能會(huì)認(rèn)為網(wǎng)絡(luò)信號(hào)不就是在沒(méi)有網(wǎng)絡(luò)的時(shí)候給用戶一個(gè)提示嘛，沒(méi)有什么好注意和設(shè)計(jì)的。非也，在沒(méi)網(wǎng)時(shí)一個(gè)好的處理方式會(huì)給用戶帶來(lái)意想不到的驚喜，在這個(gè)設(shè)計(jì)上被微信感動(dòng)過(guò)，微信在沒(méi)有網(wǎng)絡(luò)時(shí)依然能發(fā)朋友圈，而且會(huì)記住你發(fā)布的時(shí)間，在有網(wǎng)絡(luò)時(shí)系統(tǒng)自動(dòng)幫你按照之前的時(shí)間戳發(fā)布出去。想想，如果這里我們只是做簡(jiǎn)單的處理，沒(méi)有網(wǎng)絡(luò)時(shí)就不能發(fā)朋友圈，用戶會(huì)有什么樣的感受呢？還有，對(duì)于工具型產(chǎn)品，斷網(wǎng)情況下的處理方式是非常重要的。比如說(shuō)你正在填寫(xiě)一個(gè)表單，這個(gè)時(shí)候網(wǎng)絡(luò)斷了，該怎么辦呢？

3.任務(wù)中斷

這種情況是經(jīng)常會(huì)遇見(jiàn)的交互場(chǎng)景，上面說(shuō)的網(wǎng)絡(luò)中斷也可能導(dǎo)致任務(wù)中斷的發(fā)生。任務(wù)中斷可能由外部不可抗力因素或者自身需求改變等引起，在任務(wù)中斷時(shí)我們需要去判斷中斷任務(wù)的原因并給出相應(yīng)的反饋，舉一個(gè)點(diǎn)外賣的例子，在餓了么點(diǎn)外賣時(shí)我到付款這一步時(shí)突然覺(jué)得菜點(diǎn)錯(cuò)了想重新選擇一下，于是我放棄了付款，然后返回到了訂單詳情頁(yè)面，再次點(diǎn)擊返回就回到了首頁(yè)，這時(shí)我會(huì)很迷茫，為啥就回到首頁(yè)了呢，我又得重新去尋找一遍餐廳，同樣的情況，百度和美團(tuán)取消付款后在訂單頁(yè)面點(diǎn)擊返回時(shí)則是回到了之前所選的店家頁(yè)面。

4.需求改變

在用戶執(zhí)行任務(wù)的時(shí)候需求可能會(huì)發(fā)生改變，這種情況在工具型產(chǎn)品中很常見(jiàn)，舉個(gè)例子，下面為某BI工具的數(shù)據(jù)配置界面，我本來(lái)想做一個(gè)多種線型的組合圖（數(shù)據(jù)配置界面如圖2），做著做著我想切換成餅圖（數(shù)據(jù)配置界面如圖3），最后我又想再切換為組合圖。餅圖和組合圖的數(shù)據(jù)配置方式是有一些區(qū)別的，在它們之間相互切換時(shí)，數(shù)據(jù)的放置會(huì)發(fā)生怎樣的變化呢，再切換回來(lái)的時(shí)候是否與之前的保持一致？

圖一

圖二

5.交互邏輯之間的沖突

這種情況在架構(gòu)復(fù)雜的產(chǎn)品中是很常見(jiàn)的，你在前面為某一任務(wù)定下的交互邏輯可能會(huì)與后面某一任務(wù)的交互邏輯發(fā)生沖突，這一點(diǎn)我就不舉例說(shuō)明了。對(duì)于這一問(wèn)題，不斷去完善團(tuán)隊(duì)的設(shè)計(jì)規(guī)范可以有效的避免這些問(wèn)題的發(fā)生

設(shè)計(jì)屏幕流程圖

行為流程圖設(shè)計(jì)完后，這個(gè)過(guò)程就是根據(jù)行為流程圖去設(shè)計(jì)具體的屏幕流，具體的方法如下：

逐一從行為流程圖中去提取屏幕，梳理每個(gè)流程節(jié)點(diǎn)，列舉這個(gè)節(jié)點(diǎn)上應(yīng)該具有的支撐信息，去判斷這些信息出現(xiàn)的情景和方式從而確定界面的形式，把每個(gè)節(jié)點(diǎn)確定后，將他們串成線就成為了屏幕流程圖。以下是京東付款流程的一個(gè)實(shí)例。

如上圖，拿是否有收貨信息這個(gè)節(jié)點(diǎn)來(lái)舉例，用戶進(jìn)入購(gòu)物車點(diǎn)擊結(jié)算后首先得判斷是否有收貨信息，如果有就得讓用戶去選擇收貨地址，如果沒(méi)有就得讓用戶去添加。收貨信息包含：“收貨人、收貨地址、聯(lián)系方式、備用聯(lián)系方式、郵箱”，這些信息是用來(lái)支撐整個(gè)付款流程的，但它又不是每次都需要填寫(xiě)，它屬于整個(gè)付款流程的子任務(wù)，如果說(shuō)讓用戶到另一個(gè)頁(yè)面去完成這個(gè)任務(wù)這樣可能會(huì)打斷用戶的行為流，頁(yè)面間的跳轉(zhuǎn)可能會(huì)讓用戶搞不清楚自己所處的狀態(tài)，所以把填寫(xiě)收貨信息做成一個(gè)彈窗式的表單為好。通過(guò)這樣分析后，就確定了“是否有收貨信息”這個(gè)節(jié)點(diǎn)的界面出現(xiàn)的情景和形式。

界面原型設(shè)計(jì)

這一步就是對(duì)每一個(gè)屏幕做具體的界面設(shè)計(jì)了，做界面原型設(shè)計(jì)時(shí)最重要的就是把握住具體平臺(tái)的設(shè)計(jì)規(guī)范以及一些通用的設(shè)計(jì)原則和自己團(tuán)隊(duì)所定下的設(shè)計(jì)規(guī)范。這里我就不多講具體的設(shè)計(jì)規(guī)范和原則了，一方面去熟讀各大平臺(tái)的設(shè)計(jì)規(guī)范，另一方面在實(shí)際的工作中多去總結(jié)。以下為界面設(shè)計(jì)時(shí)需要注意的問(wèn)題：

你是否遵循了設(shè)計(jì)規(guī)范？
界面是否具有層次感？
這個(gè)界面上，你最想讓用戶干什么？
在用戶操作之前你如何讓他明白操作之后會(huì)發(fā)生什么？
邊緣和角落是否被有意識(shí)地放置著交互元素？
錯(cuò)誤信息的反饋應(yīng)該以怎樣的形式？
與其他類似功能是否保持了交互的統(tǒng)一性？
分辨率的變化對(duì)界面造成的影響是什么？
這個(gè)圖標(biāo)的寓意合理嗎？
內(nèi)容是否出現(xiàn)在了該出現(xiàn)的時(shí)機(jī)與地方？
在這個(gè)界面上，用戶是否清楚知道他當(dāng)前的狀態(tài)？
是否給用戶提供更高級(jí)的觸發(fā)器方便用戶快捷操作？
這里是否應(yīng)該有一個(gè)動(dòng)效讓界面變得更加優(yōu)雅？
文案設(shè)計(jì)是否合理？
該怎么預(yù)防用戶犯錯(cuò)？

界面間具體交互方式的確定

在完成界面原型設(shè)計(jì)后我們就需要確定界面間具體的交互方式了，它描述的就是用戶向界面上某一監(jiān)聽(tīng)區(qū)域所發(fā)出的指令，在用戶發(fā)出指令后界面會(huì)出現(xiàn)什么樣的反饋，移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),廣州響應(yīng)式網(wǎng)站這些反饋出現(xiàn)后用戶怎么繼續(xù)執(zhí)行任務(wù)。在確定交互方式時(shí)我們需要特別注意的就是遵循各大平臺(tái)的設(shè)計(jì)規(guī)范以及用戶的行為習(xí)慣。拿IOS來(lái)舉例，下圖為IOS的標(biāo)準(zhǔn)手勢(shì)（來(lái)自iOS設(shè)計(jì)規(guī)范）

需要注意以下幾點(diǎn)（來(lái)之IOS設(shè)計(jì)規(guī)范）

不要給標(biāo)準(zhǔn)手勢(shì)賦予不同的行為

除非你的應(yīng)用是游戲，否則重新定義標(biāo)準(zhǔn)手勢(shì)會(huì)使用戶迷惑，且增加使用難度。

不要?jiǎng)?chuàng)建和標(biāo)準(zhǔn)手勢(shì)功能相似的手勢(shì)操作

用戶已經(jīng)習(xí)慣了標(biāo)準(zhǔn)手勢(shì)的行為，沒(méi)有必要讓用戶學(xué)習(xí)達(dá)到同樣效果的不同操作。

可以用復(fù)雜手勢(shì)作為完成某任務(wù)的快捷方式，但不能是唯一觸達(dá)方式

最好給用戶提供一些簡(jiǎn)單、直接的方式完成某操作，即使這種方法需要額外的動(dòng)作。簡(jiǎn)單的手勢(shì)能讓用戶集中于當(dāng)前的體驗(yàn)和內(nèi)容，而不是交互操作本身。

除非是游戲，否則避免定義新的手勢(shì)

在游戲或其他沉浸式的應(yīng)用中，操作手勢(shì)也是有趣體驗(yàn)的一部分。但是在普通應(yīng)用中，幫助用戶達(dá)成目標(biāo)要比操作本身重要的多，所以最好使用標(biāo)準(zhǔn)手勢(shì)，盡量避免讓用戶去發(fā)掘和記憶新的操作。

在特定的環(huán)境中，可以考慮使用多指操作

雖然復(fù)雜的操作并不一定適用于所有應(yīng)用，但對(duì)用戶會(huì)花大量時(shí)間使用的應(yīng)用來(lái)說(shuō)可以豐富體驗(yàn)，例如游戲或創(chuàng)建內(nèi)容環(huán)境。但因?yàn)榉菢?biāo)準(zhǔn)手勢(shì)可發(fā)現(xiàn)性差，要盡量少用，移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),廣州響應(yīng)式網(wǎng)站并且不要讓這類手勢(shì)成為完成任務(wù)的唯一方式

細(xì)節(jié)設(shè)計(jì)

在做完界面原型設(shè)計(jì)后整個(gè)設(shè)計(jì)過(guò)程基本完成了，接下來(lái)為了讓產(chǎn)品的體驗(yàn)變得更加優(yōu)雅，我們需要去進(jìn)行一些微交互上的設(shè)計(jì)，比如說(shuō)一些界面加載動(dòng)畫(huà)、頁(yè)面跳轉(zhuǎn)方式、出錯(cuò)提示、頁(yè)面過(guò)渡效果等等。這個(gè)過(guò)程也是非常重要的，好的細(xì)節(jié)設(shè)計(jì)會(huì)讓你的產(chǎn)品上升幾個(gè)層次。

舉一個(gè)新版百度地圖的例子

上圖是百度地圖搜索結(jié)果頁(yè)面的展示方式，搜索結(jié)果分為地圖標(biāo)記點(diǎn)和具體信息條目出現(xiàn)在同一個(gè)屏幕上，這里用戶可能存在兩種需求，一種是優(yōu)先查看地圖標(biāo)記點(diǎn)，一種是優(yōu)先查看具體條目，我通常時(shí)兩者間相互切換查看。這兩者間轉(zhuǎn)換的具體交互方式如圖所示，向上滑動(dòng)搜索結(jié)果面板時(shí)，搜索結(jié)果面板和頂部Navigation Bar拼接成為另一個(gè)頁(yè)面。向下滑動(dòng)搜索面板時(shí)，搜索結(jié)果的條目被收起，只向用戶展示標(biāo)記點(diǎn)地圖。這種頁(yè)面間的轉(zhuǎn)場(chǎng)方式相比之前很好地降低了兩種不同展現(xiàn)形式之間的隔閡。

可交互原型制作

上訴10步完成后最后一步就是制作可交互的原型了，我并沒(méi)有把它算在真正的交互設(shè)計(jì)的過(guò)程中，因?yàn)樗雌饋?lái)更像一門(mén)純技能的活，這里不多講了，扒一扒我平時(shí)使用的原型工具，“Axure、Pixate、墨刀、Adobe animate、AE、PS、AI”等等。原型制作玩后，拿在手上盡情的享受這種成就感吧。

關(guān)注我們：在查找公眾號(hào)中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號(hào)