交互設(shè)計(jì)的方法

時間：2025-11-12 15:55:15 賽賽計(jì)算機(jī)輔助設(shè)計(jì) 我要投稿

相關(guān)推薦

交互設(shè)計(jì)的方法

　　交互設(shè)計(jì)是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。以下是小編整理的交互設(shè)計(jì)的方法，歡迎閱讀。

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

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

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

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

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

　　1. 任務(wù)分析

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

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

　　2. 頁面流程

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

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

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

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

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

　　3. 頁面布局

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

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

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

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

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

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

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

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

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

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

　　相關(guān)信息

　　交互設(shè)計(jì)的相關(guān)信息包含交互，使用，交互設(shè)計(jì)和可用性（usability）四個方面。

　　提到“交互”，感覺是參與交互的雙方更加對等，實(shí)際上，引入“交互”這個詞的意義，就在于交互對象地位的提升。來自《超越人機(jī)交互》一書Terry Winograd先生所說：“就是把計(jì)算機(jī)的長處和人的長處相結(jié)合，而不是讓計(jì)算機(jī)模擬人，正是這個想法把我引入了HCI領(lǐng)域”；AlanCooper先生在UI Design的訪談中也同樣提到：“關(guān)鍵在于，讓人去做他勝任的事情是一件非常好的事。讓人做人擅長做的事情，而讓計(jì)算機(jī)做計(jì)算機(jī)真正擅長的事情�！睂换ο蟮闹匾曈欣谧屓撕徒换ο蟮年P(guān)系更合理，從而得到人和交互對象相得益彰的相處方式。

　　可用性是交互設(shè)計(jì)的基本而且重要的指標(biāo)，它是對可用程度的總體評價(jià)。也是從用戶角度衡量產(chǎn)品是否有效、易學(xué)、安全、高效、好記、少錯的質(zhì)量指標(biāo)。

　　同時，交互設(shè)計(jì)的目標(biāo)不止于此，它還要考慮用戶的期望（Donald Norman先生說到期望設(shè)計(jì)是交互設(shè)計(jì)的下一站）和體驗(yàn)，可用性保證產(chǎn)品可用，基本功能完備且方便；而體驗(yàn)在于給用戶一些與眾不同的或者意想之外的感覺。也就是說，“可用”是產(chǎn)品應(yīng)該做到的，理所應(yīng)當(dāng)?shù)模绑w驗(yàn)”則是額外的驚喜和收獲。

　　ISO9241/11中的定義是：可用性是一個多因素概念，涉及到容易學(xué)習(xí)、容易使用、系統(tǒng)的有效性、用戶滿意，以及把這些因素與實(shí)際使用環(huán)境聯(lián)系在一起針對特定目標(biāo)的評價(jià)。

　　主要內(nèi)容

　　交互設(shè)計(jì)是一門特別關(guān)注以下內(nèi)容的學(xué)科：

　　1、定義產(chǎn)品的行為和使用密切相關(guān)的產(chǎn)品形式。

　　2、預(yù)測產(chǎn)品的使用如何影響產(chǎn)品與用戶的關(guān)系，以及用戶對產(chǎn)品的理解。

　　3、探索產(chǎn)品、人和物質(zhì)、文化、歷史之間的對話。

　　交互設(shè)計(jì)從“目標(biāo)導(dǎo)向”的角度解決產(chǎn)品設(shè)計(jì)：

　　1、要形成對人們希望的產(chǎn)品使用方式，以及人們?yōu)槭裁聪胗眠@種產(chǎn)品等問題的見解。

　　2、尊重用戶及其目標(biāo)。

　　3、對于產(chǎn)品特征與使用屬性，要有一個完全的形態(tài)，而不能太簡單。

　　4、展望未來，要看到產(chǎn)品可能的樣子，它們并不必然就像當(dāng)前這樣。

【交互設(shè)計(jì)的方法】相關(guān)文章：