如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，?請(qǐng)點(diǎn)這里 

長(zhǎng)期以來(lái)我就有對(duì)幾年來(lái)交互設(shè)計(jì)的心得進(jìn)行總結(jié)整理的想法?；氐街袊?guó)來(lái)親身體會(huì)到不少同行，主要是交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師對(duì)于交互設(shè)計(jì)的困惑，以及其他行業(yè)對(duì)于交互設(shè)計(jì)的誤解和濫用。后來(lái)我在小范圍內(nèi)開(kāi)設(shè)了一個(gè)關(guān)于交互設(shè)計(jì)的講座；現(xiàn)在把它整理成文，希望與同行切磋，共同進(jìn)步。

這篇文章是我?guī)啄陙?lái)在美國(guó)從事交互設(shè)計(jì)工作的一個(gè)經(jīng)驗(yàn)總結(jié)。當(dāng)時(shí)我們遵循以用戶(hù)為中心（User-Centered-Design, 簡(jiǎn)稱(chēng)UCD）的設(shè)計(jì)原則，每一個(gè)項(xiàng)目都是不折不扣的按所有UCD的步驟進(jìn)行。下面總結(jié)的交互設(shè)計(jì)的方法，是從UCD的過(guò)程中提煉出來(lái)，也就是說(shuō)，同樣適用于任何非UCD的設(shè)計(jì)過(guò)程。

交互設(shè)計(jì)的流程

如果一提到交互設(shè)計(jì)，你就想到畫(huà)線(xiàn)框圖或原型圖，那你只對(duì)了五分之一。交互設(shè)計(jì)是一個(gè)過(guò)程，從開(kāi)始到結(jié)束有一套系統(tǒng)的流程。原型圖只是其中的一個(gè)環(huán)節(jié)。

當(dāng)接到一個(gè)設(shè)計(jì)項(xiàng)目，怎么開(kāi)始？都應(yīng)該做哪些工作？怎樣盡可能的保證交付物滿(mǎn)足既定的功能以及用戶(hù)體驗(yàn)層面的易用性？

第一步，是任務(wù)分析，列出界面所要完成的所有任務(wù)。第二步按各任務(wù)確定頁(yè)面流程，建立信息架構(gòu)。接下來(lái)是創(chuàng)建統(tǒng)一的頁(yè)面布局包括分區(qū)等。然后在頁(yè)面布局的基礎(chǔ)上進(jìn)行原型設(shè)計(jì)，可以是低保真和高保真的原型圖。最后編寫(xiě)設(shè)計(jì)說(shuō)明。

下面以設(shè)計(jì)一款動(dòng)感相冊(cè)界面為例，逐步講解各個(gè)環(huán)節(jié)。

1. 任務(wù)分析

第一步任務(wù)分析。這里要做的是對(duì)于將要設(shè)計(jì)的這個(gè)新界面的所有任務(wù)的分析，也就是用戶(hù)在界面上能進(jìn)行的所有操作。這個(gè)分析在功能需求的基礎(chǔ)上進(jìn)行，需求方一般提供一個(gè)功能點(diǎn)的列表。

任務(wù)分析最常見(jiàn)的是任務(wù)列表，另外有任務(wù)流程和任務(wù)場(chǎng)景等。下面以任務(wù)列表為例。

列出所有主要任務(wù)，以及每個(gè)主要任務(wù)的子任務(wù)。再把子任務(wù)細(xì)分到各個(gè)步驟。形成下面這個(gè)列表。

主要任務(wù)1

子任務(wù)1

步驟1

步驟2

子任務(wù)2

步驟1

步驟2

主要任務(wù)2

…

以動(dòng)感相冊(cè)為例，任務(wù)分析列表如下：

1. 瀏覽相冊(cè)

1) 瀏覽相冊(cè)列表

2) 選擇相冊(cè)

3) 瀏覽照片

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

1) 添加照片

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

b) 選擇照片

c) 排列順序

d) 添加字幕文字

e) 選擇動(dòng)畫(huà)效果

2) 添加模板

a) 瀏覽模板

b) 選擇模板

3) 添加音樂(lè)

a) 瀏覽音樂(lè)列表

I. 試聽(tīng)音樂(lè)

II. 選擇音樂(lè)

b) 增加新音樂(lè)

I. 打開(kāi)本地文件

II. 選擇音樂(lè)

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

5) 命名（略）…

6) 保存（略）…

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

任務(wù)列表包括所有功能點(diǎn)，并對(duì)每一個(gè)功能點(diǎn)的邏輯關(guān)系進(jìn)行整合。必要時(shí)會(huì)對(duì)各任務(wù)的使用頻率和其它影響設(shè)計(jì)的重要因素進(jìn)行分析，這里不做解釋了。

2. 頁(yè)面流程

任務(wù)分析完成后，進(jìn)入設(shè)計(jì)的第一步，即設(shè)計(jì)頁(yè)面流程。頁(yè)面流程是設(shè)計(jì)的開(kāi)始，也是重要的一環(huán)。它決定整個(gè)界面的信息架構(gòu)和操作邏輯。

頁(yè)面流程是上一步任務(wù)分析的自然轉(zhuǎn)化。一般來(lái)說(shuō)，一個(gè)主要任務(wù)就是一個(gè)頁(yè)面，其它子任務(wù)也可以轉(zhuǎn)化為頁(yè)面。

頁(yè)面幾乎是把任務(wù)分析照搬過(guò)來(lái)了。所以上一步做好了，這一步很輕松，而且越往后越輕松。

3. 頁(yè)面布局

第三步頁(yè)面布局是具體頁(yè)面設(shè)計(jì)的開(kāi)始，在上一步知道有哪些頁(yè)面需要進(jìn)行設(shè)計(jì)后，這里對(duì)頁(yè)面進(jìn)行劃分，對(duì)內(nèi)容進(jìn)行組織。最重要的一點(diǎn)是確定頁(yè)面分區(qū)。

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

頁(yè)面布局賦予零碎的內(nèi)容以邏輯性，以分區(qū)的形式把頁(yè)面各區(qū)域所對(duì)應(yīng)的功能區(qū)確定下來(lái)，減少具體設(shè)計(jì)時(shí)的隨意性。這是設(shè)計(jì)嚴(yán)謹(jǐn)與否的表現(xiàn)所在。把類(lèi)似的操作放在一起，對(duì)于用戶(hù)來(lái)說(shuō)是可以預(yù)見(jiàn)的，用戶(hù)能夠判斷哪個(gè)操作在哪個(gè)區(qū)域，減少盲目尋找?guī)?lái)的困難和疑惑。

4. 原型設(shè)計(jì)

這一步是大家熟知的，即具體頁(yè)面的設(shè)計(jì)。這一步設(shè)計(jì)把所有的界面元素表現(xiàn)出來(lái)?？梢杂械捅Ｕ婧透弑Ｕ嬖蛨D。低保真即是線(xiàn)框圖，高保真多是接近最終效果圖。

5. 設(shè)計(jì)說(shuō)明

最后一步需要做的是對(duì)所有頁(yè)面進(jìn)行詳細(xì)的描述，包括對(duì)頁(yè)面上所有元素進(jìn)行說(shuō)明，比如默認(rèn)狀態(tài)，跳轉(zhuǎn)頁(yè)面，字號(hào)字體，尺寸等。這里就不解釋了。這是交給開(kāi)發(fā)人員的文檔，以及測(cè)試人員進(jìn)行測(cè)試的依據(jù)。

小結(jié)

交互設(shè)計(jì)是一個(gè)過(guò)程，它不僅僅是畫(huà)線(xiàn)框圖。交互設(shè)計(jì)最關(guān)鍵的兩個(gè)環(huán)節(jié)是頁(yè)面流程和頁(yè)面布局，前者建立清晰的架構(gòu)和嚴(yán)密的邏輯，后者整合零散的信息并確定分明的主次關(guān)系。這一切都是為了我們的終極目標(biāo)——讓我們的界面符合用戶(hù)的預(yù)期，不帶給他們?nèi)魏蔚囊馔?。一切都在用?hù)的意料之中。

（注：本文來(lái)自公眾號(hào)UI設(shè)計(jì)）

 

藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com?)是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)?、 cs界面設(shè)計(jì)?、 ipad界面設(shè)計(jì)?、 包裝設(shè)計(jì)?、 圖標(biāo)定制?、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?、平面設(shè)計(jì)服務(wù)