交互規(guī)劃的流程

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

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

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

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

1. 使命剖析

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

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

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

主要使命1

子使命1

進(jìn)程1

進(jìn)程2

子使命2

進(jìn)程1

進(jìn)程2

主要使命2

…

以動感相冊為例，使命剖析列表如下：

1.閱讀相冊

1) 閱讀相冊列表

2) 挑選相冊

3) 閱讀相片

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

1) 添加相片

a) 挑選已有相冊

b) 挑選相片

c) 擺放次序

d) 添加字幕文字

e) 挑選動畫效果

2) 添加模板

a) 閱讀模板

b) 挑選模板

3) 添加音樂

a) 閱讀音樂列表

I. 試聽音樂

II. 挑選音樂

b) 添加新音樂

I. 打開本地文件

II. 挑選音樂

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

5) 命名（略）…

6) 保存（略）…

3.修改相冊（略）…

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

2. 頁面流程

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

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

以動感相冊為例，頁面流程如下：

頁面幾乎是把使命剖析照搬過來了。所以上一步做好了，這一步很輕松，并且越往后越輕松。

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

3. 頁面布局

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

以動感相冊為例，頁面布局如下：

總布局，即通用布局，適合一切頁面。

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

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

4. 原型規(guī)劃

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

下面是動感相冊的低保真原型圖。

5. 規(guī)劃闡明

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

小結(jié)

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