交互設計的方法「最新」

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

　　交互設計的流程

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

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

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

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

　　1. 任務(wù)分析

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

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

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

　　主要任務(wù)1

　　子任務(wù)1

　　步驟1

　　步驟2

　　子任務(wù)2

　　步驟1

　　步驟2

　　主要任務(wù)2

　　…

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

　　1. 瀏覽相冊

　　1) 瀏覽相冊列表

　　2) 選擇相冊

　　3) 瀏覽照片

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

　　1) 添加照片

　　a) 選擇已有相冊

　　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) 預覽(略)…

　　5) 命名(略)…

　　6) 保存(略)…

　　3. 修改相冊(略)…

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

　　2. 頁(yè)面流程

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

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

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

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

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

　　3. 頁(yè)面布局

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

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

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

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

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

　　4. 原型設計

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

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

　　5. 設計說(shuō)明

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

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

Flash的交互動(dòng)畫(huà)設計10-10

游戲交互界面設計的思考11-11

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

深度剖析游戲中的交互設計12-13

Flash的交互動(dòng)畫(huà)設計介紹07-28

flash怎么設計帶有交互場(chǎng)景的動(dòng)畫(huà)08-02

Adobe交互設計師概述09-10

Adobe交互設計師考試大綱08-23

動(dòng)作腳本交互式動(dòng)畫(huà)設計08-07

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