交互設(shè)計(jì)基本概念匯總課件

1、 數(shù)字媒體學(xué)院 于成龍交互設(shè)計(jì)基礎(chǔ)概念 數(shù)字媒體學(xué)院 于成龍交互設(shè)計(jì)交互設(shè)計(jì)初學(xué)遇到的問(wèn)題 剛?cè)虢换ピO(shè)計(jì)這一行當(dāng)，不知從何下手。出現(xiàn)這個(gè)問(wèn)題有兩個(gè)原因： 一是交互設(shè)計(jì)師沒(méi)有可視性強(qiáng)的產(chǎn)物，交互設(shè)計(jì)師的產(chǎn)物一般是線框圖、流程圖、信息架構(gòu)圖、說(shuō)明文檔等等，但這些東西既不如視覺設(shè)計(jì)稿華麗精美，也不如程序代碼高貴冷艷，在外行人看來(lái)初級(jí)交互設(shè)計(jì)師和高級(jí)交互設(shè)計(jì)師畫的好像都差不多，輕易看不出你修煉到了幾層功力； 第二個(gè)原因是交互設(shè)計(jì)是跨學(xué)科的專業(yè)，需要學(xué)的太多太雜，今天這位大神說(shuō)要學(xué)好PS，明天那位大神又說(shuō)要學(xué)程序，后天又有大神說(shuō)要學(xué)心理學(xué)，blablabla信息量太大、太亂就會(huì)導(dǎo)致這種不知所措的局面。交

2、互設(shè)計(jì)初學(xué)遇到的問(wèn)題交互設(shè)計(jì)師知識(shí)架構(gòu)圖交互設(shè)計(jì)師知識(shí)架構(gòu)圖交互設(shè)計(jì)師知識(shí)架構(gòu)圖需求分析 一般來(lái)說(shuō)，交互設(shè)計(jì)的第一個(gè)環(huán)節(jié)就是需求分析，需求分析主要指用戶研究、場(chǎng)景劇本、角色創(chuàng)建以及需求提煉。 首先，用戶研究的方法包括用戶訪談、調(diào)查問(wèn)卷、觀察、焦點(diǎn)訪談等。 其次，創(chuàng)建人物角色和場(chǎng)景劇本將有利于設(shè)計(jì)團(tuán)隊(duì)始終圍繞用戶目標(biāo)進(jìn)行設(shè)計(jì)，保證你的設(shè)計(jì)以用戶為中心，當(dāng)然，人物角色和場(chǎng)景劇本不是憑空想象的，而是基于充分的用戶研究提煉出來(lái)的。 以上兩塊知識(shí)在About Face 4:交互設(shè)計(jì)精髓這本書里都有詳細(xì)的介紹，大家一定要把這本書看完看懂。 最后，需求提煉這塊，可以從“人、系統(tǒng)、環(huán)境”三個(gè)角度進(jìn)行分析提煉，

3、但是需要注意的是，這三個(gè)角度可以看成是一個(gè)公式，要學(xué)會(huì)靈活運(yùn)用，針對(duì)不同的任務(wù)、對(duì)象，會(huì)用不同的名詞，比如針對(duì)一個(gè)實(shí)物產(chǎn)品，這個(gè)公式就變成“人、物、場(chǎng)景”，針對(duì)一個(gè)任務(wù)則是“人、目標(biāo)、場(chǎng)景”等等。交互設(shè)計(jì)師知識(shí)架構(gòu)圖需求分析交互設(shè)計(jì)師知識(shí)架構(gòu)圖信息架構(gòu)和流程設(shè)計(jì)這一塊需要掌握的知識(shí)有：流程圖和信息架構(gòu)圖的繪制、心理學(xué)、邏輯學(xué)。流程圖和信息架構(gòu)圖都是為了表達(dá)交互設(shè)計(jì)的整體邏輯路徑的工具，一張好的流程圖或信息架構(gòu)圖對(duì)于團(tuán)隊(duì)溝通和開拓思維都是很有幫助的。推薦兩本書：高效溝通設(shè)計(jì)之道、交互設(shè)計(jì)指南。心理學(xué)和邏輯學(xué)可以說(shuō)是交互設(shè)計(jì)師最重要的內(nèi)功，看起來(lái)比較高大上，可能會(huì)無(wú)從下手，但千萬(wàn)不要逃避和盲目亂學(xué)

4、，要進(jìn)行系統(tǒng)的、循循漸進(jìn)的學(xué)習(xí)。比如心理學(xué)你可以依次學(xué)習(xí)色彩心理學(xué)、設(shè)計(jì)心理學(xué)、認(rèn)知心理學(xué)、行為心理學(xué)，交互設(shè)計(jì)師是以人為中心的，琢磨人的認(rèn)知、記憶心理對(duì)于提高你的設(shè)計(jì)質(zhì)量至關(guān)重要，推薦的書籍有唐納德諾曼的設(shè)計(jì)心理學(xué)，埃森克的認(rèn)知心理學(xué)。交互設(shè)計(jì)師知識(shí)架構(gòu)圖信息架構(gòu)和流程設(shè)計(jì)交互設(shè)計(jì)師知識(shí)架構(gòu)圖原型設(shè)計(jì)原型設(shè)計(jì)是交互設(shè)計(jì)師最主要的工作之一，也是交互設(shè)計(jì)師的最佳練兵場(chǎng)，因此，需要在這一塊儲(chǔ)備大量的知識(shí)，比如交互范式、設(shè)計(jì)原則、平臺(tái)規(guī)范、排版和草圖繪畫。交互范式指交互方式(參考下圖)、交互元素(比如操作、窗口、控件、菜單、對(duì)話框)等。這些都是基本功，很多同學(xué)自信學(xué)有所成了，但面試的時(shí)候一問(wèn)控件的種

5、類和區(qū)別就胡亂回答一通，這是沒(méi)有系統(tǒng)學(xué)習(xí)的后果。交互設(shè)計(jì)師知識(shí)架構(gòu)圖原型設(shè)計(jì)交互設(shè)計(jì)師知識(shí)架構(gòu)圖原型設(shè)計(jì) 設(shè)計(jì)原則，這里指的是交互設(shè)計(jì)原則。平臺(tái)規(guī)范。從終端上看，平臺(tái)分為PC、手機(jī)、平板電腦等，從系統(tǒng)上看又分為Windows,Mac,IOS,Windows Phone,Android等，每一個(gè)平臺(tái)都有相應(yīng)的設(shè)計(jì)規(guī)范，想做交互設(shè)計(jì)師就得先把他們掌握了，另外，這些規(guī)范通常都是英文，而中文的最新翻譯一般都比較難找，并且網(wǎng)友的翻譯有參差不齊的風(fēng)險(xiǎn)，所以親們一定要學(xué)好英語(yǔ)，這點(diǎn)也很重要!排版和草圖繪畫。受過(guò)專業(yè)的排版訓(xùn)練的交互設(shè)計(jì)師會(huì)有很大的優(yōu)勢(shì)，因?yàn)榕虐娌粌H需要一定的審美感覺，也需要扎實(shí)的視覺理論基礎(chǔ)

6、和邏輯思維甚至心理學(xué)理論，排版其實(shí)也是一種交互設(shè)計(jì)，是讀者與作品在視覺上的交互。另外草圖繪畫是一個(gè)加分項(xiàng)，畫的一手漂亮的草圖會(huì)讓團(tuán)隊(duì)溝通更加高效，不過(guò)，這里的草圖不是素描草圖，不是對(duì)某一個(gè)物品進(jìn)行精雕細(xì)琢，而是簡(jiǎn)筆畫。交互設(shè)計(jì)師知識(shí)架構(gòu)圖原型設(shè)計(jì)交互設(shè)計(jì)師知識(shí)架構(gòu)圖可用性測(cè)試 理論終究是不夠的，學(xué)習(xí)理論之后，要進(jìn)行大量的實(shí)踐來(lái)鞏固，再總結(jié)出自己的一套流程與方法。交互設(shè)計(jì)師知識(shí)架構(gòu)圖可用性測(cè)試交互設(shè)計(jì)師知識(shí)架構(gòu)圖視覺設(shè)計(jì)與程序設(shè)計(jì)基礎(chǔ)加分項(xiàng)，既是加分項(xiàng)，也是基本功。不是說(shuō)必須學(xué)好視覺和代碼，但多少會(huì)一點(diǎn)對(duì)你有很大的好處，比如有利于與團(tuán)隊(duì)的其他人員溝通，有利于選擇更合理更現(xiàn)實(shí)的交互方案。PS、AI

7、、Axure、PPT和AE、C/Java，HTML+CSS+Javascript。交互設(shè)計(jì)師知識(shí)架構(gòu)圖視覺設(shè)計(jì)與程序設(shè)計(jì)交互設(shè)計(jì)師知識(shí)架構(gòu)圖視覺設(shè)計(jì)與程序設(shè)計(jì)基礎(chǔ)加分項(xiàng)，既是加分項(xiàng)，也是基本功。不是說(shuō)必須學(xué)好視覺和代碼，但多少會(huì)一點(diǎn)對(duì)你有很大的好處，比如有利于與團(tuán)隊(duì)的其他人員溝通，有利于選擇更合理更現(xiàn)實(shí)的交互方案。PS、AI、Axure、PPT和AE、C/Java，HTML+CSS+Javascript。交互設(shè)計(jì)師知識(shí)架構(gòu)圖視覺設(shè)計(jì)與程序設(shè)計(jì)交互設(shè)計(jì)師知識(shí)架構(gòu)圖交互設(shè)計(jì)師知識(shí)架構(gòu)圖交互設(shè)計(jì)師做什么？交互設(shè)計(jì)師做什么？交互設(shè)計(jì)師做什么？ 交互設(shè)計(jì)師在整個(gè)開發(fā)過(guò)程中扮演著關(guān)鍵角色。作為一個(gè)項(xiàng)目團(tuán)隊(duì)

8、的一部分，他們通常會(huì)進(jìn)行以下活動(dòng)：交互設(shè)計(jì)師做什么？ 交互設(shè)計(jì)師在整個(gè)開發(fā)過(guò)程中交互設(shè)計(jì)師做什么？組織、宣傳設(shè)計(jì)策略 盡管這里的界限是模糊的，但有一點(diǎn)是肯定的：一個(gè)交互設(shè)計(jì)師需要知道她/他為誰(shuí)設(shè)計(jì)，以及他們的目標(biāo)是什么。通常，這些由信息架構(gòu)師和用戶研究人員 提供。反過(guò)來(lái)，一個(gè)交互設(shè)計(jì)師將評(píng)估設(shè)計(jì)目標(biāo)，展開設(shè)計(jì)策略。他們或單獨(dú)工作，或與其他設(shè)計(jì)師合作。設(shè)計(jì)策略幫助團(tuán)隊(duì)成員在什么樣的交互能幫助用戶實(shí)現(xiàn)目 標(biāo)方面達(dá)成共識(shí)。確定和構(gòu)建交互框架 當(dāng)交互設(shè)計(jì)師有一個(gè)刺激他/她設(shè)計(jì)的好的想法時(shí)，他/她可以開始構(gòu)思這個(gè)界面，如何用它來(lái)輔助必要的交互活動(dòng)。在這里細(xì)節(jié)是魔鬼。有些專業(yè)人員會(huì)在便簽本或者是寫字板上繪制這些互動(dòng)設(shè)計(jì)；而另一些則選擇用軟件應(yīng)用程序來(lái)幫助他們；有些人會(huì)選擇團(tuán)隊(duì)合作，有些人則獨(dú)立工作。這些都基于交互設(shè)計(jì)師本身以 及他們的工作流程。交互設(shè)計(jì)師做什么？組織、宣傳設(shè)計(jì)策略交互設(shè)計(jì)師做什么？交互雛形 根據(jù)不同項(xiàng)目，交互設(shè)計(jì)師下一個(gè)步會(huì)開始創(chuàng)建雛形。一個(gè)團(tuán)隊(duì)創(chuàng)建交互雛形的方式有很多，其中包括：xhtml/css雛形創(chuàng)建模式，紙面雛形創(chuàng)建模式，甚至protocasting。隨時(shí)關(guān)注 對(duì)于一個(gè)已入行的交互設(shè)計(jì)師而言，最大的挑戰(zhàn)之一是這個(gè)行業(yè)的發(fā)展速度。每天，新的設(shè)