交互設(shè)計的方法「最新」

　　交互設(shè)計是一個過程，它不僅僅是畫線框圖。下面是YJBYS小編整理的交互設(shè)計的方法，希望對你有幫助!

　　交互設(shè)計的流程

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

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

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

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

　　1. 任務(wù)分析

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

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

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

　　主要任務(wù)1

　　子任務(wù)1

　　步驟1

　　步驟2

　　子任務(wù)2

　　步驟1

　　步驟2

　　主要任務(wù)2

　　…

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

　　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. 修改相冊(略)…

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

　　2. 頁面流程

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

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

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

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

　　注意這個流程圖應(yīng)該包括所有將要設(shè)計的新頁面，一個不少，一個不多。它不僅確定頁面內(nèi)容，頁面數(shù)量，還確定各頁面之間的關(guān)系。如果在后來設(shè)計具體頁面原型時，發(fā)現(xiàn)這個流程圖多了或少了頁面，或者頁面關(guān)系發(fā)生了變化，說明你的功夫不到家(這個比較難，我一般不苛求我們的設(shè)計師)。根據(jù)原型圖來創(chuàng)建或者修改頁面流程圖，不是在做設(shè)計，而是在寫設(shè)計說明。

　　3. 頁面布局

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

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

　　總布局，即通用布局，適合所有頁面。

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

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

　　4. 原型設(shè)計

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

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

　　5. 設(shè)計說明

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

【交互設(shè)計的方法「最新」】相關(guān)文章：

Flash的交互動畫設(shè)計10-10

游戲交互界面設(shè)計的思考11-11

交互設(shè)計與公共環(huán)境設(shè)計的關(guān)系06-30

深度剖析游戲中的交互設(shè)計12-13

Flash的交互動畫設(shè)計介紹07-28

flash怎么設(shè)計帶有交互場景的動畫08-02

Adobe交互設(shè)計師概述09-10

Adobe交互設(shè)計師考試大綱08-23

動作腳本交互式動畫設(shè)計08-07

幼兒園最新環(huán)境設(shè)計方法08-22