交互規(guī)劃的流程

如果一提到交互規(guī)劃，你就想到畫線框圖或原型圖，那你只對(duì)了五分之一。交互規(guī)劃是一個(gè)進(jìn)程，從開端到結(jié)束有一套體系的流程。原型圖僅僅其間的一個(gè)環(huán)節(jié)。

當(dāng)接到一個(gè)規(guī)劃項(xiàng)目，怎么開端？都應(yīng)該做哪些作業(yè)？怎樣盡可能的保證交給物滿意既定的功用以及用戶體會(huì)層面的易用性？

第一步，是使命剖析，列出界面所要完結(jié)的一切使命。第二步按各使命確認(rèn)頁(yè)面流程，樹立信息架構(gòu)。接下來(lái)是創(chuàng)立統(tǒng)一的頁(yè)面布局包含分區(qū)等。然后在頁(yè)面布局的基礎(chǔ)上進(jìn)行原型規(guī)劃，能夠是低保真和高保真的原型圖。最終編寫規(guī)劃闡明。

下面以規(guī)劃一款動(dòng)感相冊(cè)界面為例，逐步講解各個(gè)環(huán)節(jié)。

1. 使命剖析

第一步使命剖析。這兒要做的是關(guān)于將要規(guī)劃的這個(gè)新界面的一切使命的剖析，也便是用戶在界面上能進(jìn)行的一切操作。這個(gè)剖析在功用需求的基礎(chǔ)上進(jìn)行，需求方一般供給一個(gè)功用點(diǎn)的列表。

使命剖析最常見的是使命列表，別的有使命流程和使命場(chǎng)景等。下面以使命列表為例。

列出一切主要使命，以及每個(gè)主要使命的子使命。再把子使命細(xì)分到各個(gè)進(jìn)程。構(gòu)成下面這個(gè)列表。

主要使命1

子使命1

進(jìn)程1

進(jìn)程2

子使命2

進(jìn)程1

進(jìn)程2

主要使命2

…

以動(dòng)感相冊(cè)為例，使命剖析列表如下：

1.閱讀相冊(cè)

1) 閱讀相冊(cè)列表

2) 挑選相冊(cè)

3) 閱讀相片

2. 創(chuàng)立新相冊(cè)

1) 添加相片

a) 挑選已有相冊(cè)

b) 挑選相片

c) 擺放次序

d) 添加字幕文字

e) 挑選動(dòng)畫效果

2) 添加模板

a) 閱讀模板

b) 挑選模板

3) 添加音樂(lè)

a) 閱讀音樂(lè)列表

I. 試聽音樂(lè)

II. 挑選音樂(lè)

b) 添加新音樂(lè)

I. 打開本地文件

II. 挑選音樂(lè)

4) 預(yù)覽（略）…

5) 命名（略）…

6) 保存（略）…

3.修改相冊(cè)（略）…

使命列表包含一切功用點(diǎn)，并對(duì)每一個(gè)功用點(diǎn)的邏輯聯(lián)系進(jìn)行整合。必要時(shí)會(huì)對(duì)各使命的使用頻率和其它影響規(guī)劃的重要因素進(jìn)行剖析，這兒不做解說(shuō)了。

2. 頁(yè)面流程

使命剖析完結(jié)后，進(jìn)入規(guī)劃的第一步，即規(guī)劃頁(yè)面流程。頁(yè)面流程是規(guī)劃的開端，也是重要的一環(huán)。它決議整個(gè)界面的信息架構(gòu)和操作邏輯。

頁(yè)面流程是上一步使命剖析的自然轉(zhuǎn)化。一般來(lái)說(shuō)，一個(gè)主要使命便是一個(gè)頁(yè)面，其它子使命也能夠轉(zhuǎn)化為頁(yè)面。

以動(dòng)感相冊(cè)為例，頁(yè)面流程如下：

頁(yè)面幾乎是把使命剖析照搬過(guò)來(lái)了。所以上一步做好了，這一步很輕松，并且越往后越輕松。

注意這個(gè)流程圖應(yīng)該包含一切將要規(guī)劃的新頁(yè)面，一個(gè)不少，一個(gè)不多。它不僅確認(rèn)頁(yè)面內(nèi)容，頁(yè)面數(shù)量，還確認(rèn)各頁(yè)面之間的聯(lián)系。如果在后來(lái)規(guī)劃具體頁(yè)面原型時(shí)，發(fā)現(xiàn)這個(gè)流程圖多了或少了頁(yè)面，或許頁(yè)面聯(lián)系發(fā)生了改變，闡明你的功夫不到家（這個(gè)比較難，我一般不苛求咱們的規(guī)劃師）。根據(jù)原型圖來(lái)創(chuàng)立或許修改頁(yè)面流程圖，不是在做規(guī)劃，而是在寫規(guī)劃闡明。

3. 頁(yè)面布局

第三步頁(yè)面布局是具體頁(yè)面規(guī)劃的開端，在上一步知道有哪些頁(yè)面需求進(jìn)行規(guī)劃后，這兒對(duì)頁(yè)面進(jìn)行劃分，對(duì)內(nèi)容進(jìn)行安排。最重要的一點(diǎn)是確認(rèn)頁(yè)面分區(qū)。

以動(dòng)感相冊(cè)為例，頁(yè)面布局如下：

總布局，即通用布局，適合一切頁(yè)面。

具體頁(yè)面布局，在不與總布局沖突的情況下，有更細(xì)節(jié)的布局。

頁(yè)面布局賦予零碎的內(nèi)容以邏輯性，以分區(qū)的形式把頁(yè)面各區(qū)域所對(duì)應(yīng)的功用區(qū)確認(rèn)下來(lái)，減少具體規(guī)劃時(shí)的隨意性。這是規(guī)劃謹(jǐn)慎與否的體現(xiàn)所在。把相似的操作放在一起，關(guān)于用戶來(lái)說(shuō)是能夠預(yù)見的，用戶能夠判別哪個(gè)操作在哪個(gè)區(qū)域，減少盲目尋覓帶來(lái)的困難和疑惑。

4. 原型規(guī)劃

這一步是咱們熟知的，即具體頁(yè)面的規(guī)劃。這一步規(guī)劃把一切的界面元素體現(xiàn)出來(lái)。能夠有低保真和高保真原型圖。低保真即是線框圖，高保真多是接近最終效果圖。

下面是動(dòng)感相冊(cè)的低保真原型圖。

5. 規(guī)劃闡明

最終一步需求做的是對(duì)一切頁(yè)面進(jìn)行具體的描述，包含對(duì)頁(yè)面上一切元素進(jìn)行闡明，比如默許狀況，跳轉(zhuǎn)頁(yè)面，字號(hào)字體，尺寸等。這兒就不解說(shuō)了。這是交給開發(fā)人員的文檔，以及測(cè)驗(yàn)人員進(jìn)行測(cè)驗(yàn)的根據(jù)。

小結(jié)

交互規(guī)劃是一個(gè)進(jìn)程，它不僅僅是畫線框圖。交互規(guī)劃最關(guān)鍵的兩個(gè)環(huán)節(jié)是頁(yè)面流程和頁(yè)面布局，前者樹立明晰的架構(gòu)和緊密的邏輯，后者整合零星的信息并確認(rèn)清楚的主次聯(lián)系。這一切都是為了咱們的終極目標(biāo)——讓咱們的界面契合用戶的預(yù)期，不帶給他們?nèi)魏蔚囊馔�。一切都在用戶的意料之中�?/p>