第一篇：設(shè)計(jì)鼠標(biāo)交互教學(xué)設(shè)計(jì)

第四課 設(shè)計(jì)鼠標(biāo)交互

武安市十一中學(xué)杜海洲

一、課例描述

《設(shè)計(jì)鼠標(biāo)交互》是河北教育出版社和河北教育音像出版社出版的《信息技術(shù)2》第一單元“第四課”所涉及的內(nèi)容。

教學(xué)對象是初中二年級學(xué)生，他們已經(jīng)過一段時(shí)間的學(xué)習(xí)，基本掌握了flash的基本知識和操作技能。但對于大部分學(xué)生來說，還沒有真正地把信息技術(shù)知識和所掌握的關(guān)于flash操作的基本技能應(yīng)用到實(shí)際問題中。故組織該項(xiàng)活動旨在讓學(xué)生在flash制作的過程中去發(fā)現(xiàn)操作中還存在的問題，以期進(jìn)一步學(xué)習(xí)；同時(shí)，能夠利用所學(xué)信息技術(shù)知識應(yīng)用于實(shí)踐問題的解決與表達(dá)，能夠充分利用遠(yuǎn)程教育資源獲取信息。

二、教學(xué)內(nèi)容分析

《信息技術(shù)2》第一單元第四課所涉及的是集成flash各種操作的內(nèi)容。學(xué)生不但要學(xué)會如何使用flash這個(gè)軟件，還要學(xué)會制作多媒體課件，通過制作課件更好地掌握flash軟件的各種使用技巧。

教學(xué)目標(biāo)：

【知識與能力領(lǐng)域】

（1）能綜合運(yùn)用flash的知識和操作技能創(chuàng)作一份多媒體課件

（2）認(rèn)識flash動作腳本是實(shí)現(xiàn)flash動畫交互性的重要工具

（3）能利用網(wǎng)絡(luò)資源進(jìn)行信息獲取、加工整理以及呈現(xiàn)交流

【感情領(lǐng)域】

學(xué)會綜合運(yùn)用信息技術(shù)的知識與技能解決實(shí)際問題，激發(fā)學(xué)習(xí)信息技術(shù)學(xué)科的興趣。

【發(fā)展領(lǐng)域】

（1）掌握協(xié)作學(xué)習(xí)的技巧，培養(yǎng)強(qiáng)烈的社會責(zé)任心，學(xué)會與他人合作溝通。（2）學(xué)會自主發(fā)現(xiàn)、自主探索的學(xué)習(xí)方法。

（3）學(xué)會在學(xué)習(xí)中反思、總結(jié)，調(diào)整自己的學(xué)習(xí)目標(biāo)，在更高水平上獲得發(fā)展。

三、教學(xué)重點(diǎn)、難點(diǎn)

重點(diǎn)：多媒體課件的設(shè)計(jì)與設(shè)計(jì)思想的體現(xiàn)（制作）難點(diǎn)：動作腳本AS的靈活使用

四、教學(xué)策略(解決的方法)（1）組成合作學(xué)習(xí)小組：從第一節(jié)課開始，教學(xué)中即要求學(xué)生組成了2人的小組進(jìn)行協(xié)作學(xué)習(xí)，小組內(nèi)成員較為熟悉，并逐漸適應(yīng)協(xié)作學(xué)習(xí)，但協(xié)作學(xué)習(xí)的技巧、與他人的溝通能力還有待進(jìn)一步提高。在教學(xué)過程中，教師要實(shí)時(shí)監(jiān)控學(xué)生的協(xié)作學(xué)習(xí)情況，并組織成果交流會，讓學(xué)生交流學(xué)習(xí)心得與體會，使小組的協(xié)作學(xué)習(xí)走向成熟。

（2）以“任務(wù)驅(qū)動式”為教學(xué)原則，確定協(xié)作學(xué)習(xí)的內(nèi)容： 圍繞任務(wù)把各教學(xué)目標(biāo)和內(nèi)容有機(jī)地結(jié)合在一起，使學(xué)生置身于提出問題、思考問題、解決問題的動態(tài)過程中進(jìn)行協(xié)作學(xué)習(xí)。學(xué)生通過協(xié)作，完成任務(wù)的同時(shí)，也就完成了需要達(dá)到的學(xué)習(xí)目標(biāo)的學(xué)習(xí)。

五、教學(xué)準(zhǔn)備

搜集、保存制作課件需要的文字、聲音、視頻、圖片等素材，包括格式為ASF的“題西林壁”視頻文件。

六、教學(xué)過程和設(shè)計(jì)思路

（一）任務(wù)分析

設(shè)計(jì)制作“古詩二首”多媒體課件，把詩文朗誦、背景音樂、動畫畫面、字幕和交互控制按鈕有機(jī)結(jié)合。指導(dǎo)學(xué)生分析課件（包括用到哪些素材、設(shè)計(jì)什么按鈕、需要幾個(gè)場景等）

（二）素材準(zhǔn)備

以小組為單位分工合作搜集、保存制作課件需要的文字、聲音、視頻、圖片等素材，包括格式為ASF的“題西林壁”視頻文件。

（三）設(shè)計(jì)主界面、制作動畫（1）主界面

新建Flash文檔，建立“標(biāo)題”、“按鈕”“背景”三個(gè)圖層，分別加入課件標(biāo)題、兩個(gè)按鈕好背景。美化背景，使背景能很好的襯托課件標(biāo)題。

（2）制作動畫

制作《游山西村》和《題西林壁》動畫（3）添加腳本實(shí)現(xiàn)交互

在每個(gè)場景添加一個(gè)層，命名為“AS”，選擇最后一幀將其轉(zhuǎn)化為關(guān)鍵幀，打開動作面板輸入腳本：stop()控制動畫停止。

在主界面的兩個(gè)按鈕分別添加動作腳本實(shí)現(xiàn)跳轉(zhuǎn)

給“播放”按鈕添加動作腳本實(shí)現(xiàn)播放、停止、重放、返回功能

（四）檢查、調(diào)試腳本

在動作面板中使用“語法檢查”工具，檢查動作腳本中的語法錯(cuò)誤，如果有腳本錯(cuò)誤，將顯示在輸出面板中，修改腳本。反復(fù)檢查、調(diào)試，直至確認(rèn)腳本正確。

（五）小組展示

各小組把自己的作品通過網(wǎng)絡(luò)教室軟件展示給其他小組，教師給予評價(jià)。

七、教學(xué)過程流程圖

本次教學(xué)的流程可歸納為5個(gè)步驟：

任務(wù)分析——素材準(zhǔn)備（課下）——制作動畫——成果交流——教師、學(xué)生評價(jià)、板書設(shè)計(jì)：

第四課

設(shè)計(jì)鼠標(biāo)交互（制作多媒體課件）

一、素材的取得途徑

1、圖形圖像的制作途徑

2、聲音的制作途徑

3、視頻的制作途徑

二、制作過程中要注意以下三點(diǎn)：

1、制作過程應(yīng)嚴(yán)格遵循多媒體制作流程。

2、多媒體是準(zhǔn)確的科學(xué)內(nèi)容和鮮明完整的藝術(shù)形式的作品。

3、設(shè)計(jì)思路以簡要明快、功能齊全為基調(diào)

一、注意以下三點(diǎn)：

1、制作過程中應(yīng)嚴(yán)格遵循多媒體教學(xué)軟件制作流程。

2、多媒體教學(xué)軟件不是教材的翻版，而是一個(gè)豐富、準(zhǔn)確的科學(xué)內(nèi)容和鮮明完整的藝術(shù)形式的作品。

3、設(shè)計(jì)思路以簡要明快、功能齊全為基調(diào)

二、素材的取得可以通過多種途徑

1、圖形圖像的制作途徑

2、聲音的制作途徑

3、視頻的制作途徑

第二篇：初中信息技術(shù)設(shè)計(jì)鼠標(biāo)交互教學(xué)設(shè)計(jì)（精選）

第四課

設(shè)計(jì)鼠標(biāo)交互

用Flash制作網(wǎng)絡(luò)動畫課件開展多媒體網(wǎng)絡(luò)教學(xué)，已逐漸成為當(dāng)前國內(nèi)外計(jì)算機(jī)輔助教學(xué)的新趨勢，國內(nèi)許多教育網(wǎng)站均發(fā)布大量的Flash網(wǎng)絡(luò)交互動畫課件。交互式動畫就是允許觀眾對影片進(jìn)行控制的動畫。交互式動畫在動畫與觀眾之間形成一種互動，使觀眾可以參與到動畫中來。例如對按鈕元件，通過鼠標(biāo)的移入或移出制作出不同的響應(yīng)效果。此外，還可以通過為按鈕編寫腳本語言，使按鈕具有控制影片的播放或者鏈接到指定的網(wǎng)頁中去的功能。這是傳統(tǒng)動畫所不具備的，在Flash中卻能輕松實(shí)現(xiàn)。

本課通過制作古詩二首《題西林壁》、《游山西村》的多媒體課件，使學(xué)生掌握使用Flash制作鼠標(biāo)交互動畫的方法。

本課建議課時(shí)1課時(shí)。1．關(guān)于場景設(shè)計(jì)

制作多媒體課件要以課件腳本為依據(jù)，編寫課件腳本是制作多媒體課件的前提。教材的“任務(wù)分析”中設(shè)計(jì)了本課件的三個(gè)場景，并分別涉及了場景的內(nèi)容、按鈕的功能和使用的媒體等。課件制作時(shí)，按照三個(gè)場景的設(shè)計(jì)，做出相應(yīng)得內(nèi)容，實(shí)現(xiàn)相應(yīng)功能即可。

2．視頻導(dǎo)入Flash 制作《題西林壁》課件，是將題西林壁的視頻文件直接導(dǎo)入到Flash庫中。在這應(yīng)注意在Flash中導(dǎo)入視頻文件不能是大文件，因?yàn)镕lash處理視頻的功能不是很好，導(dǎo)入視頻后反而會變大，只有損失畫面質(zhì)量才能變成小文件。導(dǎo)入時(shí)，品質(zhì)一般設(shè)75，數(shù)值越低畫面越差，當(dāng)然文件生成后也越小；關(guān)鍵幀間隔設(shè)24，數(shù)值越低畫面越好，但文件生成后很大。

3．交互式動畫

交互式動畫是由觸發(fā)動作的事件、事件的目標(biāo)和觸發(fā)事件的動作3個(gè)因素組成的，例如單擊按鈕后，影片開始播放這一事件。其中，單擊是觸發(fā)動作的事件，按鈕是事件的目標(biāo)，影片開始播放是觸發(fā)事件的動作。換句話說，事件、目標(biāo)和動作構(gòu)成了一個(gè)交互式動畫。

在Flash中，事件包括鼠標(biāo)事件、鍵盤事件和幀事件三種。信息島“鼠標(biāo)事件”介紹了各種鼠標(biāo)事件。目標(biāo)包括時(shí)間軸、按鈕元件和影片剪輯元件三種。而動作就是指控制影片的一系列腳本語言，所以說腳本語言的編寫也就是各種動作的編寫。

4．關(guān)于動作面板

所有腳本語言的編寫均在動作面板中完成。選擇“窗口——開發(fā)面板——?jiǎng)幼鳌被蛑苯影碏9快捷鍵打開動作面板。

動作面板共有三個(gè)窗口組成，左上角為動作工具欄，以樹狀結(jié)構(gòu)顯示Flash支持的所有腳本語言。左下角為信息工具欄，顯示當(dāng)前的選擇，也就是要附加腳本語言的對象和已經(jīng)附加腳本語言的對象的信息。右邊為腳本編輯區(qū)，編輯與顯示腳本語言的窗口。

5．腳本語言的編寫方式

在編寫腳本語言時(shí)，既可以通過直接在腳本編輯區(qū)中輸入字符編寫，也可以通過在動作工具欄中選擇項(xiàng)目進(jìn)行編寫。單擊動作工具欄中的項(xiàng)目文件夾，可展開或收縮文件夾。在展開的項(xiàng)目文件夾中包含多個(gè)腳本項(xiàng)目，通過雙擊進(jìn)行選擇。此外，還可以通過添加動作按鈕，將新項(xiàng)目添加到腳本中。

6．關(guān)于腳本語言

本課信息島“Flash中的腳本語言”介紹了Flash的三類動作腳本語言。本課活動中涉及到了幀動作和按鈕動作腳本語言。活動中的動作腳本很簡單，只要用來控制動畫、按鈕的播放、停止、重放等。教師指導(dǎo)學(xué)生結(jié)合信息島“鼠標(biāo)事件”和“常用播放控制函數(shù)”內(nèi)容來理解、掌握活動中使用到的腳本。

7．關(guān)于知識鏈接

本課知識鏈接介紹了制作Loading的方法。有興趣的學(xué)生可以根據(jù)介紹，為自己制作的動畫添加Loading，并理解腳本語言。

【文本資源】 淺談Flash課件制作

一、學(xué)校對課件制作的困惑

多媒體教學(xué)在我們的日常教學(xué)活動中，已經(jīng)越來越被廣大教師，學(xué)生所接受。由于多媒體教學(xué)的本身具有的特點(diǎn)，使教師改變了憑借一張嘴，一支粉筆的教學(xué)方法。使學(xué)生改變了被動式的的學(xué)習(xí)習(xí)慣。總之，多媒體在教學(xué)上的應(yīng)用，對傳統(tǒng)教學(xué)方式方法是一個(gè)很大的沖擊。這種教學(xué)方式方法已經(jīng)在全國普遍開展。但是，在大部分地區(qū)存在著一個(gè)很有爭議的問題。這個(gè)問題就是：多媒體課件由誰來做？一種觀點(diǎn)認(rèn)為，應(yīng)該由講課教師來作。這種做法的優(yōu)點(diǎn)很多，因?yàn)橹v課教師非常了解本課的知識結(jié)構(gòu)，知識點(diǎn)，重難點(diǎn)等。利用課件可以充分的把這些主要的知識體現(xiàn)在學(xué)生面前。另一種觀點(diǎn)認(rèn)為，制作課件應(yīng)該由專任教師來完成。這種做法的優(yōu)點(diǎn)在于，專任教師可以充分利用自己所掌握的多媒體知識，在學(xué)生面前展現(xiàn)豐富多彩的感官刺激。并且可以把講課教師從繁重的制作課件的勞動中解放出來。每一位教師不一定都掌握基本的制作課件的知識，學(xué)習(xí)其知識，定然會增加精力的付出；不學(xué)其知識，定然無法展現(xiàn)自己的教學(xué)目標(biāo)。

這兩種觀點(diǎn)在學(xué)校領(lǐng)導(dǎo)層中不斷的展開討論。那么現(xiàn)在，也無法明確的判斷那一種方法最有利于教師和學(xué)生的發(fā)展。至此，出現(xiàn)了有的學(xué)校規(guī)定誰講課誰做課件，有的學(xué)校設(shè)有專門的多媒體教師，來負(fù)責(zé)課件的制作。

二、課件制作的工具

網(wǎng)絡(luò)上有許多使用Flash制作的教學(xué)課件。由于Flash具有的強(qiáng)大的編輯動畫的能力，已經(jīng)在學(xué)校中廣為使用。現(xiàn)在，絕大部分課件都是用Flash完成的。Flash能夠迅速的進(jìn)入校園，有以下幾個(gè)優(yōu)勢：首先是本身的優(yōu)勢，也就是制作動畫和交互性的優(yōu)勢。其次是Flash語言編輯的能力。再次就是可以分開打包拿走，最后就是Flash代表的已經(jīng)不僅僅是絕對意義上的一個(gè)軟件了，而是深入到千家萬戶的動畫藝術(shù)

三、教學(xué)課件的特點(diǎn)

教學(xué)課件不同于其他的演示材料或動畫。因?yàn)槠渲饕菫榻逃虒W(xué)服務(wù)，所以具備本身的一些獨(dú)特的特點(diǎn)。

1． 嚴(yán)肅正式

教育教學(xué)是百年大事，絲毫馬虎不得。課件中絕對不可以出現(xiàn)搞笑等情節(jié)。

2．條理性強(qiáng)

教育教學(xué)本身就要求符合邏輯性，課件作為教學(xué)的附屬，也應(yīng)遵循這一點(diǎn)。

3．技術(shù)性低

課件中如沒有必要使用特殊效果的化，應(yīng)盡量不使用。一面吸引學(xué)生的注意力，使學(xué)生的精力分散。4．學(xué)科滲透

每一個(gè)單一學(xué)科的課件，應(yīng)注意學(xué)科滲透。把相關(guān)的知識利用課件這一形式，快速，靈活的展現(xiàn)在同學(xué)們面前，從側(cè)面提高學(xué)生的學(xué)習(xí)興趣及對各方面知識的積累。

四、制作課件必須注意的幾點(diǎn)

制作課件的技術(shù)要求相對來說不高。但是由于其特殊的用途，我們在制作課件的時(shí)候也應(yīng)該注意以下幾點(diǎn)：

1． 文字

課件制作中文字的使用應(yīng)盡量用宋體，黑體，等常見的，正規(guī)的字體。特別是小學(xué)課件中，應(yīng)該與課本上的文字字體相統(tǒng)一。這是十分重要的。避免實(shí)用系統(tǒng)以外的字體。

2．音樂

課件中的音樂，應(yīng)理解為純背景音樂（講解的聲音除外）。聽覺上的刺激只是起到輔助作用，（音樂課件除外）用于調(diào)節(jié)學(xué)習(xí)過程中的空白。所以，在選擇音樂的時(shí)候，要與主體有密切的關(guān)聯(lián)。還有在沒有必要的情況下，不要使用流行的，廣為流傳的音樂或歌曲。原因是，當(dāng)學(xué)生聽到這種音樂或歌曲的時(shí)候，因?yàn)槭质煜ぃ瑵撘庾R中會隨著音樂或歌曲的節(jié)奏欣賞或默唱，分散學(xué)生的注意力，課件的作用就發(fā)揮不出來了。

3．色彩

制作課件中要注意畫面色彩的問題。計(jì)算機(jī)上呈現(xiàn)的色彩與通過投影儀投射的色彩有很大的差距，在投射的過程中各種色彩的明度純度等特性值不斷下降。這就造成了投射后的畫面色彩模糊。我們在制作中應(yīng)在不破壞統(tǒng)一色調(diào)的基礎(chǔ)上，盡量增加各種顏色的純度，明度等因素，這樣播放的時(shí)候，可以避免出現(xiàn)模糊不清的效果。

4．效果

繁多眩目的特殊效果在課堂教學(xué)中無關(guān)緊要，甚至?xí)鸬较喾吹淖饔谩Ｕn件效果要求只要流暢，平實(shí)就可以。

5．“妥協(xié)”

我們在制作課件的時(shí)候，也要學(xué)會妥協(xié)。對于一篇課文的理解，每個(gè)人都會有不同的解釋。課件制作教師與講課教師必然會存在很大的分歧。如何解決這種矛盾，那就需要妥協(xié)。還有，有的講課教師由于沒有動畫制作的基本知識，所以有時(shí)候要求的標(biāo)準(zhǔn)很高，常常聽到要求課件制作老師作的象《貓和老鼠》一樣，當(dāng)要求超出課件制作教師所掌握的知識或超出制作軟件達(dá)到的效果的時(shí)候，課件制作教師要耐心解釋，以達(dá)到共識。

6．技術(shù)

制作課件不需要太多的高級技術(shù)。因?yàn)檎n件的操作主要由講課教師來完成。它的情況與互動性動畫有直接區(qū)別。

綜上所述，教學(xué)課件的制作要以講課者的思維結(jié)構(gòu)來實(shí)現(xiàn)。把復(fù)雜的演示過程，清晰的，具體的，全程的體現(xiàn)在屏幕上，使學(xué)生接受。這一過程的實(shí)現(xiàn)要做到講課教師和制作課件的協(xié)調(diào)統(tǒng)一。

第三篇：第四課 設(shè)計(jì)鼠標(biāo)交互教學(xué)實(shí)錄

第四課 設(shè)計(jì)鼠標(biāo)交互教學(xué)實(shí)錄

武安市十一中學(xué) 杜海洲

生：（起立）老師好！師：同學(xué)們好！請坐下。

師：截止到今天我們學(xué)習(xí)了幾個(gè)動畫制作軟件了呢？ 生：兩個(gè)，一個(gè)是幻燈片powerpoint一個(gè)是flash。

師：說對了，以前學(xué)到的powerpoint是．課堂演示型動畫，這種類型的多媒體教學(xué)軟件一般來說是為了解決某一學(xué)科的教學(xué)重點(diǎn)與教學(xué)難點(diǎn)而開發(fā)的，它注重對學(xué)生的啟發(fā)、提示，反映問題解決的全過程，主要用于課堂演示教學(xué)。而flash是學(xué)生自主學(xué)習(xí)型，這種類型的多媒體教學(xué)軟件具有完整的知識結(jié)構(gòu)，能反映一定的教學(xué)過程和教學(xué)策略，提供相應(yīng)的形成性練習(xí)供學(xué)生進(jìn)行學(xué)習(xí)評價(jià)，并設(shè)計(jì)許多友好的界面讓學(xué)習(xí)者進(jìn)行人—機(jī)交互活動。今天我們就使用flash制作一個(gè)人機(jī)交互的多媒體課件。

師板書：

1、制作多媒體課件

師：俗話說：工欲善其事必先利其器，沒有準(zhǔn)備好的仗是打不好的，在今天的學(xué)習(xí)內(nèi)容中我們要明確課件有哪幾大板塊構(gòu)成，每個(gè)板塊包括哪幾部分，每部分涉及什么具體內(nèi)容，整個(gè)過程如何在各部分中體現(xiàn)出來等

生1答：需要三個(gè)場景

生2答：需要設(shè)計(jì)播放、停止、返回、重放幾個(gè)按鈕 生3答：還需要一些素材準(zhǔn)備例如圖像、音頻、文字等 生……

師：同學(xué)們分析的很好，不知道你們在課下準(zhǔn)備的怎么樣了都是通過什么途徑找到的呢？

生1：通過百度能找到一些內(nèi)容比如圖片、文字，但有些我們找不到比如詩文的朗誦音頻

生2：我們是自己錄制的

師：恩，很好，“多媒體素材”是多媒體課件中用到的各種聽覺的和視覺的材料，也就是多媒課件中用于表達(dá)一定思想的各種元素，它包括圖形、動畫、圖像、文本和聲音等。素材的準(zhǔn)備工作，一般主要包括文本的錄入，圖形、圖像的獲取和制作，動畫的制作，視頻的截取和聲音的編輯，然后以一定的文件格式存儲，以備調(diào)用。搜集素材應(yīng)根據(jù)腳本的需要來進(jìn)行，素材的取得可以通過多種途徑。例如圖形圖像的制作途徑：（1）、軟件中的繪圖工具（2）、掃描輸入（3）、現(xiàn)有素材庫（4）、INTERNET上的圖片（5）、視頻幀捕獲（6）、利用圖形圖像合成軟件。視頻的制作途徑：（1）、攝像機(jī)拍攝后采集（2）、從錄像帶、影碟上捕獲（3）、INTERNET上下載。聲音的制作途徑：（1）、音效庫（2）、從錄音帶、錄像帶、影碟上截取（3）、話筒錄音。像剛才同學(xué)搜集素材的方法就很好。有的小組沒有準(zhǔn)備完整你們愿意把自己的成果分享給其他小組嗎？

生一起回答：愿意

師：好，下面我們以小組為單位按照課本的步驟制作課件，制作過程中要注意以下三點(diǎn)：

1、制作過程中應(yīng)嚴(yán)格遵循多媒體教學(xué)軟件制作流程。

2、多媒體教學(xué)軟件不是教材的翻版，而是一個(gè)豐富、準(zhǔn)確的科學(xué)內(nèi)容和鮮明完整的藝術(shù)形式的作品。

3、設(shè)計(jì)思路以簡要明快、功能齊全為基調(diào)

學(xué)生開始制作（教師巡視指導(dǎo)）

在下課前五分鐘，找設(shè)計(jì)完成的小組展示成果

師：剛才第二小組制作的課件非常好，他們制作的交互性強(qiáng)、操作靈活、視聽效果也非常好，在實(shí)際制作中，一個(gè)課件往往被分割成一系列模塊，分別進(jìn)行設(shè)計(jì)制作，最后總裝生成一個(gè)可執(zhí)行的應(yīng)用程序。在總裝后，還須進(jìn)行全面的測試，測試的目的最主要是檢測程序是否可以順利的運(yùn)行，內(nèi)部連接是否正確，各種聲音、動畫是否可以正常播放等等，以免使用時(shí)出錯(cuò)。其他小組沒有完成的課下要及時(shí)做完，有信心沒有？

生齊答：有

師：好，這節(jié)課就上到這里，下課。生：（起立）老師再見！師：同學(xué)們再見！

第四篇：交互設(shè)計(jì)心得整理

交互設(shè)計(jì)心得整理

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

這篇文章是我?guī)啄陙碓诿绹鴱氖陆换ピO(shè)計(jì)工作的一個(gè)經(jīng)驗(yàn)總結(jié)。當(dāng)時(shí)我們遵循以用戶為中心（User-Centered-Design, 簡稱UCD）的設(shè)計(jì)原則，每一個(gè)項(xiàng)目都是不折不扣的按所有UCD的步驟進(jìn)行。下面總結(jié)的交互設(shè)計(jì)的方法，是從UCD的過程中提煉出來，也就是說，同樣適用于任何非UCD的設(shè)計(jì)過程。交互設(shè)計(jì)的流程

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

當(dāng)接到一個(gè)設(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ì)一款動感相冊界面為例，逐步講解各個(gè)環(huán)節(jié)。1.任務(wù)分析

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

任務(wù)分析最常見的是任務(wù)列表，另外有任務(wù)流程和任務(wù)場景等。下面以任務(wù)列表為例。列出所有主要任務(wù)，以及每個(gè)主要任務(wù)的子任務(wù)。再把子任務(wù)細(xì)分到各個(gè)步驟。形成下面這個(gè)列表。主要任務(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ù)列表包括所有功能點(diǎn)，并對每一個(gè)功能點(diǎn)的邏輯關(guān)系進(jìn)行整合。必要時(shí)會對各任務(wù)的使用頻率和其它影響設(shè)計(jì)的重要因素進(jìn)行分析，這里不做解釋了。2.頁面流程

任務(wù)分析完成后，進(jìn)入設(shè)計(jì)的第一步，即設(shè)計(jì)頁面流程。頁面流程是設(shè)計(jì)的開始，也是重要的一環(huán)。它決定整個(gè)界面的信息架構(gòu)和操作邏輯。頁面流程是上一步任務(wù)分析的自然轉(zhuǎn)化。一般來說，一個(gè)主要任務(wù)就是一個(gè)頁面，其它子任務(wù)也可以轉(zhuǎn)化為頁面。

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

頁面幾乎是把任務(wù)分析照搬過來了。所以上一步做好了，這一步很輕松，而且越往后越輕松。注意這個(gè)流程圖應(yīng)該包括所有將要設(shè)計(jì)的新頁面，一個(gè)不少，一個(gè)不多。它不僅確定頁面內(nèi)容，頁面數(shù)量，還確定各頁面之間的關(guān)系。如果在后來設(shè)計(jì)具體頁面原型時(shí)，發(fā)現(xiàn)這個(gè)流程圖多了或少了頁面，或者頁面關(guān)系發(fā)生了變化，說明你的功夫不到家（這個(gè)比較難，我一般不苛求我們的設(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í)的隨意性。這是設(shè)計(jì)嚴(yán)謹(jǐn)與否的表現(xiàn)所在。把類似的操作放在一起，對于用戶來說是可以預(yù)見的，用戶能夠判斷哪個(gè)操作在哪個(gè)區(qū)域，減少盲目尋找?guī)淼睦щy和疑惑。4.原型設(shè)計(jì) 這一步是大家熟知的，即具體頁面的設(shè)計(jì)。這一步設(shè)計(jì)把所有的界面元素表現(xiàn)出來。可以有低保真和高保真原型圖。低保真即是線框圖，高保真多是接近最終效果圖。下面是動感相冊的低保真原型圖。

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

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

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

第五篇：交互設(shè)計(jì)檔案

交互設(shè)計(jì)師的基本素質(zhì)

首先，談?wù)勎覀€(gè)人對交互設(shè)計(jì)師基本素質(zhì)的看法。從我個(gè)人的理解來看，可以簡單歸納為九字訣：“聽、看、想、說、磨、做、驗(yàn)、寫、講”（如圖1.1）。

圖1.1 1）聽：做一個(gè)交互設(shè)計(jì)師，最重要的一點(diǎn)就是要懂得傾聽（這里蘊(yùn)藏了一個(gè)隱晦的性格屬性：謙虛！）。通常情況下，我們不是用戶，所以很難 100%代表用戶，更左右不了老板，所以我們首先要有聽的本事，把來自用戶的、老板的、PD的、視覺的、前端的、開發(fā)的、測試的、市場的、業(yè)界的等各方面的聲音都聽過來，聽進(jìn)去。

2）看：99%的情況下，交互不是一蹴而就的創(chuàng)造工作，它是站在前人肩膀上不斷迭代更新的行為過程。我這里指的“看”是要求設(shè)計(jì)師能博覽、能泛獵，看到好的，見過差的，什么都略懂，交互才能變得很美??

3）想：交互是思考的輸出產(chǎn)物和表現(xiàn)形式。當(dāng)設(shè)計(jì)師將之前聽到的和看到的內(nèi)容在頭腦中加以整理、分析，經(jīng)過發(fā)散的創(chuàng)造性碰撞和嚴(yán)謹(jǐn)?shù)倪壿嬚撟C后，逐漸得到了相對靠譜的交互產(chǎn)物。這個(gè)思索分析的過程貫穿于交互設(shè)計(jì)工作流程的每個(gè)環(huán)節(jié)。

4）說：一個(gè)能說會道的人不一定是一個(gè)優(yōu)秀的交互設(shè)計(jì)師，但一個(gè)優(yōu)秀的交互設(shè)計(jì)師必然是一個(gè)善于準(zhǔn)確表達(dá)自己想法和觀點(diǎn)的人。在這一點(diǎn)上，我堅(jiān)持交互是一門分享的學(xué)科，需要的是開放的性格和良好的溝通技巧。

5）磨：耐心、技巧、熱情的綜合表現(xiàn)。在一個(gè)項(xiàng)目的進(jìn)程中，不可避免的會面臨很多的挑戰(zhàn)，優(yōu)秀的交互設(shè)計(jì)師善于發(fā)揮“磨”的精神，他們懷揣對交互專業(yè)的無比熱情，以無所不用其極的技巧，耐心的纏死一個(gè)又一個(gè)質(zhì)疑方，最終讓大家認(rèn)同并幫助推動設(shè)計(jì)的實(shí)現(xiàn)。通常來說，一個(gè)優(yōu)秀的交互設(shè)計(jì)師會是一個(gè)優(yōu)秀的Idea推銷員。

6）做：交互設(shè)計(jì)師專業(yè)度的核心表現(xiàn)。俗語說得好，是騾子是馬，牽出來遛遛。對于交互設(shè)計(jì)師來說，之前的環(huán)節(jié)做得再好、再完美，也只是停留在設(shè)計(jì)師自己的腦子里，游蕩于聽眾們的耳膜間。如果理論落實(shí)不到實(shí)際，那所有的想法都只是空中樓閣，你之前所有的努力都只是在佐證你的空泛和不切實(shí)際。所以我們不僅要能 “做”，更要“做”得漂亮，“做”得完美！我一直都是這樣認(rèn)為：“做”決定了一個(gè)交互設(shè)計(jì)師是不是靠譜，決定了一個(gè)交互設(shè)計(jì)師的高度，是一個(gè)交互設(shè)計(jì)師最根本的專業(yè)素質(zhì)。

7）驗(yàn)：用戶體驗(yàn)設(shè)計(jì)，最終是要落實(shí)到用戶的身上的。客觀中立的驗(yàn)證、分析、評估能力是一個(gè)優(yōu)秀交互設(shè)計(jì)師的重要素質(zhì)。無論個(gè)人還是團(tuán)隊(duì)，設(shè)計(jì)的成果都需要通過精準(zhǔn)的測試才能算得上合乎標(biāo)準(zhǔn)，此時(shí)，一顆平常心和一雙敏銳的眼睛是設(shè)計(jì)師最需要的。

8）寫：分析、歸納和總結(jié)能力的綜合表現(xiàn)。一個(gè)項(xiàng)目，無論成功還是失敗，總是有很多地方值得設(shè)計(jì)師本人或后來人借鑒。交互設(shè)計(jì)之路不是一座苛求零失誤的獨(dú)木橋，但絕對是一條要求零“重復(fù)”失誤的單行線。評價(jià)一個(gè)設(shè)計(jì)師的專業(yè)度，很重要的一環(huán)就是看他能不能多犯前人從來沒有犯過的錯(cuò)誤，并能有效總結(jié)給后來人。于是，他就成了大家，路就這樣被趟了出來??

9）講：演講能力。這里所指的是在項(xiàng)目后期進(jìn)行的交流分享。一個(gè)專業(yè)的交互設(shè)計(jì)師會站在宏觀的高度上，以平和的心態(tài)同他人溝通，驗(yàn)證自己先前設(shè)計(jì)的合理性、全面性和科學(xué)性，更好的提高自己的專業(yè)能力，為今后的交互設(shè)計(jì)做好準(zhǔn)備。

·交互專業(yè)度的具象化表現(xiàn)

剛才講了很多，但總體來說還是偏理論，還是讓人摸不著頭腦，虛幻的概念最大的優(yōu)勢在于它的顛簸不破和四平八穩(wěn)，誰也揪不住它的小辮子。但這不是我的風(fēng)格，更不是我寫這篇文章的初衷，我希望的是拋磚引玉，給大家?guī)硪恍┱嬲饬x上能直接使用的東西。所以，接下來，我們來些“干貨”，玩點(diǎn)簡單粗暴的??

圖1.2

根據(jù)阿里巴巴目前的產(chǎn)品開發(fā)流程（如圖1.2），交互設(shè)計(jì)是大環(huán)節(jié)中的一個(gè)小點(diǎn)，拋開雜亂的干擾信息，單純考量交互設(shè)計(jì)師在過程中的參與度，我們就能得到一個(gè)理想化的交互設(shè)計(jì)行為流（如圖1.3）：

圖1.3 流程沒什么好講的，更沒什么好爭辯的，無非也就是增加一個(gè)、減少一個(gè)、偷換概念、細(xì)分歸納之類的忽悠。我這里想和大家分享的是流程中每個(gè)環(huán)節(jié)的專業(yè)輸出物，我有一個(gè)激進(jìn)的想法：如果某人能精準(zhǔn)的完成某些公認(rèn)的標(biāo)準(zhǔn)化輸出物，那他99%可以被稱為是一個(gè)“專業(yè)”的75分交互設(shè)計(jì)師了，剩下的 1%，也許是拼RP??

這里，我先簡單交代一下即將涉及到的流程節(jié)點(diǎn)、對應(yīng)輸出物的圖形色塊的代表含義。

1）流程環(huán)節(jié)說明（如圖1.4）：

圖1.4 2）流程環(huán)節(jié)各輸出物說明（如圖1.5）：

圖1.5 在我看來，一個(gè)專業(yè)的交互設(shè)計(jì)師，在一個(gè)理想化產(chǎn)品設(shè)計(jì)的過程中，有一些是屬于必須的輸出物，有一些屬于最好有（推薦）的輸出物，還有一些屬于可有可無的輸出物。同時(shí)，根據(jù)項(xiàng)目的實(shí)際情況和參與角色的分工情況，存在一些交互設(shè)計(jì)師可能需要負(fù)責(zé)的輸出物，具體細(xì)節(jié)我將在下面逐一介紹。1）需求獲取階段：

此階段通常來說會由PD等外部資源發(fā)起，輸出物主要是FRD文檔和時(shí)間計(jì)劃文檔，用以描述問題、提出初步目標(biāo)，假想可能的解決方案、預(yù)估資源并梳理時(shí)間計(jì)劃等。當(dāng)然，對于從UED內(nèi)部發(fā)起的項(xiàng)目，這兩部分的輸出也可以由交互設(shè)計(jì)師完成，屬于可能責(zé)任輸出物； 2）需求分析階段：

歷史數(shù)據(jù)的關(guān)注和分析階段，基于項(xiàng)目本身，要針對競爭對手、行業(yè)現(xiàn)狀等做詳盡的收集和分析，其中的關(guān)鍵考核點(diǎn)是要做必要的頭腦風(fēng)暴，獲取發(fā)散而全面的信息集合。在此階段，競爭分析報(bào)告和頭腦風(fēng)暴輸出物是交互設(shè)計(jì)師專業(yè)度的重要表現(xiàn)。

3）用戶訪談階段：

對于一些條件允許的項(xiàng)目，我們建議能在項(xiàng)目初期尋求一些用戶的信息，定義一些用戶的屬性，這些對于之后的交互設(shè)計(jì)都會是堅(jiān)實(shí)的基礎(chǔ)。一個(gè)高專業(yè)度的交互設(shè)計(jì)師甚至?xí)鲃咏槿朐L談問卷的設(shè)定工作，客觀的參與調(diào)研報(bào)告輸出的全過程。

4）需求修正階段：

專業(yè)的交互設(shè)計(jì)師通常不甘于淪為一個(gè)純粹的資源，抗拒被動的接受命令。我們之前經(jīng)歷的需求分析和用戶訪談都是為掌控主動權(quán)而做的準(zhǔn)備。如今，我們有理有據(jù)，應(yīng)該主動出擊，和需求方討論研究需求的合理性、可行性，明確最終的修正目標(biāo)，并對達(dá)成目標(biāo)所涉及的重點(diǎn)突破點(diǎn)有理性的分析判斷，篩選出各設(shè)計(jì)點(diǎn)的優(yōu)先級。5）設(shè)計(jì)草稿階段

項(xiàng)目目標(biāo)和設(shè)計(jì)方向確定下來后，我們將進(jìn)入核心的設(shè)計(jì)環(huán)節(jié)。作為交互設(shè)計(jì)師的“殺手锏”，交互流程和線框草圖當(dāng)然一個(gè)都不能少，但此時(shí)我更想強(qiáng)調(diào)一項(xiàng)輔助性質(zhì)的調(diào)研分析工作。從交互的角度來看，在大流程大框架敲定的情況下，交互設(shè)計(jì)師通常會投入更多的精力在一些核心的設(shè)計(jì)點(diǎn)，也就是我們在需求修正階段確認(rèn)的設(shè)計(jì)重點(diǎn)。此時(shí)，專業(yè)的設(shè)計(jì)師絕對不會拍腦袋設(shè)計(jì)，更不會想當(dāng)然出方案，而是會針對這些核心點(diǎn)做業(yè)界調(diào)研和分析，為自己即將進(jìn)行的設(shè)計(jì)尋求一個(gè)足夠?qū)拸V厚實(shí)的肩膀。6）設(shè)計(jì)細(xì)化階段

第一階段的設(shè)計(jì)工作將在此階段性輸出。我們回顧一下，截止此時(shí)的設(shè)計(jì)產(chǎn)物有：用戶調(diào)研報(bào)告、FRD確認(rèn)文檔、交互流程、線框草圖、核心設(shè)計(jì)調(diào)研分析、核心設(shè)計(jì)詳細(xì)說明、交互流程整體說明等。基本上，一個(gè)交互設(shè)計(jì)師的專業(yè)度，已經(jīng)可以根據(jù)此時(shí)的輸出物數(shù)量、質(zhì)量看出個(gè)大概齊了 7）專家評審階段

一個(gè)專業(yè)的交互設(shè)計(jì)師，要謙虛。此刻，我們進(jìn)入小范圍專家評審的階段了，三個(gè)臭皮匠還頂一個(gè)諸葛亮呢，更何況是參與評審的專家呢。此時(shí)設(shè)計(jì)師的專業(yè)度就體現(xiàn)在 “聽”、“說”和“想”這三訣上，耐心的做好評審記錄，有理有據(jù)的同專家們進(jìn)行專業(yè)溝通，并確認(rèn)最終的結(jié)論和方向。8）設(shè)計(jì)優(yōu)化階段

經(jīng)歷了專家團(tuán)的考驗(yàn)，又該抖擻精神重新上路了，沒什么好說的，把過程做好了，你的專業(yè)度也就到位了。設(shè)計(jì)優(yōu)化階段的投入度和產(chǎn)出將直接影響到后續(xù)Demo及測試的效果，和最終設(shè)計(jì)也息息相關(guān)，各位交互設(shè)計(jì)師們，千萬別打瞌睡了！

9）仿真Demo開發(fā)階段

終于到了仿真Demo的模型化階段啦，這時(shí)盡管并沒有直接的交互輸出物，但還是需要交互設(shè)計(jì)師用百分百的挑刺精神，協(xié)助視覺和前端精準(zhǔn)的達(dá)成我們之前的設(shè)計(jì)，嚴(yán)格保證最佳的輸出效果。10）測試驗(yàn)證階段

仿真Demo出來之后，將進(jìn)入最后的測試驗(yàn)證階段，根據(jù)項(xiàng)目的實(shí)際情況，可能是QA測試，也可能是用戶測試，總之，這個(gè)環(huán)節(jié)能幫助設(shè)計(jì)師最后把關(guān)設(shè)計(jì)的合理性，專業(yè)如你，一定要親自跟進(jìn)測試并給出最終的評估報(bào)告，哪些點(diǎn)是前期沒有考慮周全的？那些點(diǎn)是成功的？哪些點(diǎn)是必須立即改進(jìn)的？哪些點(diǎn)能以后再說？哪些?? 11）完成設(shè)計(jì)階段

最后的設(shè)計(jì)階段，根據(jù)之前的測試驗(yàn)證評估報(bào)告，交互設(shè)計(jì)師要對所有之前的輸出做一次嚴(yán)格的檢查和修正，完成最后的輸出。

12）開發(fā)上線階段

盯緊視覺設(shè)計(jì)師和前端工程師吧，最關(guān)鍵的時(shí)候終于到了，經(jīng)歷了那么多紛繁復(fù)雜的環(huán)節(jié)，我們等的就是上線的這一瞬間。當(dāng)然，千萬別忘了后續(xù)的跟蹤和分析，這能為你的專業(yè)度加分不少哦 ·總結(jié)和展望

綜上所述，我們已經(jīng)整理出來了體現(xiàn)交互設(shè)計(jì)師專業(yè)度的過程輸出物了，總結(jié)一下：以75分交互設(shè)計(jì)師的標(biāo)準(zhǔn)來看，我們的專業(yè)度能通過以下的關(guān)鍵輸出物衡量：FRD目標(biāo)確認(rèn)文檔、競爭分析報(bào)告、頭腦風(fēng)暴產(chǎn)出物、項(xiàng)目初期用戶調(diào)研報(bào)告、核心設(shè)計(jì)點(diǎn)調(diào)研及分析報(bào)告、專家評審報(bào)告和評估報(bào)告、原型測試報(bào)告、交互流程圖及詳細(xì)說明文檔、頁面線框圖、核心設(shè)計(jì)點(diǎn)說明文檔和最后的跟蹤分析報(bào)告。

基本上，所有的輸出物都是反復(fù)易稿的結(jié)果，都是細(xì)碎過程的迭代輸出，都飽含了設(shè)計(jì)師辛勤的工作投入。所有有夢想的交互設(shè)計(jì)師們，請正確的審視這些輸出物，珍惜自己的付出，它們不光是單板的形式教條，它們更是證明自己專業(yè)度最有利的武器！

被很多同學(xué)都質(zhì)疑過：那么多的輸出物，平時(shí)做需求怎么可能全部做出來？每當(dāng)此時(shí)，我的回答都是一樣的：“是的，找借口總是很容易的。大家的確都很忙碌，按季度來說，基本上每個(gè)人都會經(jīng)手大大小小幾十個(gè)需求，但我們真的忙碌到輸出一個(gè)高質(zhì)量設(shè)計(jì)的精力都沒有了嗎？還是我們打心里就本著做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互設(shè)計(jì)這個(gè)職業(yè)最可悲之處??

作者信息：本文http://