互動媒體設(shè)計講義概要

目錄互動媒體設(shè)計

界面設(shè)計原則界面交互設(shè)計視覺呈現(xiàn)設(shè)計使用性測試互動媒體設(shè)計講義概要互動？誰和誰互動？通過什么互動？如何互動？交互媒體設(shè)計：用戶界面設(shè)計（界面之間的關(guān)系和流程）、交互方式和視覺形式步驟：結(jié)構(gòu)設(shè)計、交互設(shè)計、視覺設(shè)計互動媒體設(shè)計互動媒體設(shè)計講義概要交互界面的發(fā)展

人機交互界面的發(fā)展過程

命令行

圖形用戶界面GUI（GraphicalUserInterface）WIMP(Windows,Icon,Menu,Pointingdevice蘋果公司全鼠標下拉式菜單操作)NUI（NetUserInterface）:遠程訪問和執(zhí)行，更加大眾化

CSCW(computersupportedcooperativework計算機協(xié)同工作)

同步、分布式同步、異步、分布式異步多用戶界面多通道人機界面（MultiModeInterface）VIR（VirtualInformationRoom）互動媒體設(shè)計講義概要交互界面的技術(shù)

人機交互界面技術(shù)背景

標準JPEG靜態(tài)圖像壓縮標準，MPEG動態(tài)圖像壓縮標準，DVD規(guī)格，W3C多通道交互技術(shù)（追蹤、統(tǒng)計分析、識別）觸摸、眼動跟蹤、姿勢識別、語音識別、表情識別、手寫識別、虛擬現(xiàn)實（特點：直接性、非精確性、雙向性、自然性）互動媒體設(shè)計講義概要交互設(shè)備

交互輸入輸出設(shè)備輸入鍵盤鼠標跟蹤球操縱桿觸摸屏光筆數(shù)字化輸入板浮動鼠標（6度電磁探測器）手持操縱器力矩球（空間球）數(shù)據(jù)手套輸出陰極射線管顯示器液晶顯示器頭盔顯示器互動媒體設(shè)計講義概要目錄互動媒體設(shè)計

界面設(shè)計原則界面交互設(shè)計視覺呈現(xiàn)設(shè)計使用性測試互動媒體設(shè)計講義概要設(shè)計原則

人查找時：以自我為中心瀏覽時：掃描的閱讀方式操作時：依習慣做事點擊時：不確定性

互動媒體設(shè)計講義概要設(shè)計原則

界面設(shè)計原則可控性：用戶處于控制地位，掌握所有操作的主動性

一致性:提供穩(wěn)定的感覺使界面變得熟悉和可預(yù)知（用戶習慣）

互動性:給于用戶反饋,引導(dǎo)用戶參與（系統(tǒng)反應(yīng)時間<15s,3s）可學(xué)習性：讓用戶逐漸成長，成為高手

簡易性:將呈現(xiàn)的信息減到極限，突出重點

差異性:不同用戶需求是不同的視覺上的美與舒適

互動媒體設(shè)計講義概要設(shè)計原則

用戶處于控制地位用戶開始操作 可信性 可預(yù)期性 穩(wěn)定而快速的響應(yīng) 靈活性

互動媒體設(shè)計講義概要設(shè)計原則

一致性產(chǎn)品結(jié)構(gòu)的一致 和業(yè)界習慣的一致 操作行為一致 命令的名稱統(tǒng)一 視覺呈現(xiàn)一致 窗口方式一致 與生活保持一致 設(shè)計改動互動媒體設(shè)計講義概要設(shè)計原則互動性反饋性 參與性 直接性 更新性 召喚感 親和力

互動媒體設(shè)計講義概要設(shè)計原則

可學(xué)習性

鮮明性 引導(dǎo)性 空間有效性 邏輯性 恢復(fù)性 幫助性

互動媒體設(shè)計講義概要設(shè)計原則

簡易性操作少 簡潔 快捷方式 文案簡單正確 使用留白 直觀 簡易不同于簡陋互動媒體設(shè)計講義概要設(shè)計原則

差異性不同熟練程度用戶 不同年齡用戶 不同地區(qū)用戶 不同專業(yè)背景的用戶殘障用戶 可兼容性：瀏覽器屏幕尺寸色彩 動態(tài)性互動媒體設(shè)計講義概要設(shè)計原則視覺上的美和舒適清晰舒適獨特

互動媒體設(shè)計講義概要產(chǎn)品開發(fā)案例：WinXP用戶處于控制地位：自定義背景，多種預(yù)覽選擇一致性:統(tǒng)一界面方式和按鈕方式

互動性:狀態(tài)表示，按鈕質(zhì)感處理視覺上的美和舒適:鮮亮色彩、立體感、圖標簡易:將呈現(xiàn)的信息減到極限：人性的賬戶管理，直觀批預(yù)覽差異性:不同用戶需求是不同的：不同分辨率，多語言互動媒體設(shè)計講義概要目錄互動媒體設(shè)計

界面設(shè)計原則界面交互設(shè)計視覺呈現(xiàn)設(shè)計使用性測試互動媒體設(shè)計講義概要交互設(shè)計交互設(shè)計

用戶需求搜集：調(diào)查問卷焦點小組(程度)用戶提案用戶分級用戶任務(wù)分解交互設(shè)計和描述:結(jié)構(gòu)圖流程圖頁面圖

互動媒體設(shè)計講義概要交互設(shè)計導(dǎo)航與定位系統(tǒng)

欄目/菜單導(dǎo)航 關(guān)鍵頁面的導(dǎo)航 分類目錄和列表 搜索框的導(dǎo)航 相關(guān)內(nèi)容 窗口方式 其他導(dǎo)航方式我在哪里？我去過哪里？我可以去哪里? 互動媒體設(shè)計講義概要交互設(shè)計

菜單菜單組織單一菜單多重菜單：相關(guān)聯(lián)的內(nèi)容在同一界面窗口中橫向并置（文件〉打印〉屬性）

樹狀菜單欄：極限4-8個選項，3-4層菜單式樣（文字/圖標）全屏菜單2下拉菜單欄3彈出菜單4工具欄5版塊菜單設(shè)計原則一致分層分組排序快捷鍵反饋當前狀態(tài)幫助互動媒體設(shè)計講義概要交互設(shè)計界面窗口基本構(gòu)成標題區(qū)菜單區(qū)快捷圖標區(qū)工具區(qū)工作區(qū)/信息區(qū)控制區(qū)移動區(qū)大小區(qū)滾動區(qū)窗口方式滾動式2單一式3分裂式4瓦片式5重疊式6彈出式

互動媒體設(shè)計講義概要交互設(shè)計典型互動界面:數(shù)據(jù)輸入設(shè)計原則簡約：用戶輸入最少明確習慣：一致性興奮可學(xué)習性：用戶輸入靈活性反饋錯誤監(jiān)測和修正輸入方式問答式2菜單選擇3填表輸入4直接操作5光學(xué)識別6聲音表格設(shè)計原則一致分組和留白指導(dǎo)性文字光標移動方便反饋幫助對齊互動媒體設(shè)計講義概要交互設(shè)計典型互動界面:輸入界面類型問答式對話：系統(tǒng)啟動、自然語言、用戶回答鏈接、圖標和按鈕菜單：用戶多選一、界面位置固定

數(shù)據(jù)輸入界面：用戶輸入數(shù)據(jù)內(nèi)容命令語言界面：用戶按照文法，輸入命令給系統(tǒng)

唯一性、一致性、平等性、經(jīng)濟性、允許修改查詢界面：用戶輸入查詢條件，系統(tǒng)輸出結(jié)果自然語言界面：模糊性、學(xué)習性互動媒體設(shè)計講義概要交互設(shè)計典型互動搜索列表和最終頁注冊和登陸用戶反饋和留言個性定制成功、失敗、提示 簡約明確習慣興奮互動媒體設(shè)計講義概要交互設(shè)計幫助系統(tǒng)人出錯原因感知誤導(dǎo)記憶誤導(dǎo)響應(yīng)時間過快或過慢設(shè)計原則完整性一致性連續(xù)性簡易性可維護性幫助系統(tǒng)類型（線上/線下）用戶手冊2培訓(xùn)3演示4問答（faq,郵箱，電話，問答平臺等）互動媒體設(shè)計講義概要交互設(shè)計手機界面常用導(dǎo)航方式拖動菜單列表現(xiàn)在在哪兒以前去過哪兒將來應(yīng)該/能夠去哪兒怎么去怎么回互動媒體設(shè)計講義概要目錄互動媒體設(shè)計

界面設(shè)計原則界面交互設(shè)計視覺呈現(xiàn)設(shè)計使用性測試互動媒體設(shè)計講義概要視覺設(shè)計視覺設(shè)計主調(diào):統(tǒng)一對比

視覺中心形象色彩肌理版式：比例分欄版面率跳躍率邊角造型元素：線面字體動態(tài)排版文件格式界面規(guī)范互動媒體設(shè)計講義概要視覺設(shè)計鏈接

鏈接的組織文字鏈接圖片或圖標鏈接按鈕鏈接 互動媒體設(shè)計講義概要視覺設(shè)計圖標優(yōu)勢/劣勢快速識別美觀便于記憶國際化/最初不易掌握和理解設(shè)計原則整體隱喻簡單（不多于20種，造型簡單，輪廓清晰而不生硬）尺寸國際化（不要使用人臉/手，非通用字母）美觀（立體感，質(zhì)感）圖標類型程序2數(shù)據(jù)3命令4控制5開關(guān)6狀態(tài)顯示互動媒體設(shè)計講義概要目錄互動媒體設(shè)計

界面設(shè)計原則界面交互設(shè)計視覺呈現(xiàn)設(shè)計使用性測試互動媒體設(shè)計講義概要產(chǎn)品測試界面評估評估方法自己的評估專家評估VIP用戶評估可用性測試理論評估可用性測試5-8個典型用戶5-8個典型情境下的典型任務(wù)關(guān)注：失敗率失誤率速度互動媒體設(shè)計講義概要評分標準1課題設(shè)計的定位20%2交互設(shè)計的完整和流暢30%3最終呈現(xiàn)效果40%4使用性測試的完整和正確10%互動媒體設(shè)計講義概要題目：《動畫管理與播放器》設(shè)計與實現(xiàn)參考QQ音樂播放