互動媒體設計講義

1、思考目錄q 互動媒體設計互動媒體設計 q 界面設計原則界面設計原則q 界面交互設計界面交互設計q 視覺呈現(xiàn)設計視覺呈現(xiàn)設計q 使用性測試使用性測試互動？誰和誰互動？通過什么互動？如何互動？互動？誰和誰互動？通過什么互動？如何互動？交互媒體設計：用戶界面設計（界面之間的關系和流交互媒體設計：用戶界面設計（界面之間的關系和流程）程） 、交互方式和視覺形式、交互方式和視覺形式步驟：結(jié)構(gòu)設計、交互設計、視覺設計步驟：結(jié)構(gòu)設計、交互設計、視覺設計互動媒體設計交互界面的發(fā)展交互界面的發(fā)展 人機交互界面的發(fā)展過程 命令行 圖形用戶界面GUI（Graphical User Interface） WIMPWIM

2、P(Windows,Icon,Menu,Pointing device 蘋果公司全鼠標下拉式菜單操作) NUINUI（Net User Interface）:遠程訪問和執(zhí)行，更加大眾化 CSCWCSCW(computer supported cooperative work計算機協(xié)同工作) 同步、分布式同步、異步、分布式異步 多用戶界面 多通道人機界面（Multi Mode Interface） VIRVIR（Virtual Information Room） 交互界面的技術交互界面的技術 人機交互界面技術背景 標準 JPEG靜態(tài)圖像壓縮標準， MPEG動態(tài)圖像壓縮標準，DVD規(guī)格，W3C 多

3、通道交互技術（追蹤、統(tǒng)計分析、識別） 觸摸 、眼動跟蹤、姿勢識別、語音識別、表情識別、手寫識別、 虛擬現(xiàn)實（特點：直接性、非精確性、雙向性、自然性）交互設備交互設備 交互輸入輸出設備輸入鍵盤 鼠標 跟蹤球 操縱桿 觸摸屏 光筆 數(shù)字化輸入板浮動鼠標（6度電磁探測器） 手持操縱器 力矩球（空間球） 數(shù)據(jù)手套輸出陰極射線管顯示器 液晶顯示器 頭盔顯示器目錄q 互動媒體設計互動媒體設計 q 界面設計原則界面設計原則q 界面交互設計界面交互設計q 視覺呈現(xiàn)設計視覺呈現(xiàn)設計q 使用性測試使用性測試設計原則設計原則 人查找時：以自我為中心 瀏覽時：掃描的閱讀方式 操作時：依習慣做事操作時：依習慣做事點擊時

4、：不確定性點擊時：不確定性 設計原則設計原則 界面設計原則可控性：用戶處于控制地位，掌握所有操作的主動性用戶處于控制地位，掌握所有操作的主動性 一致性一致性: : 提供穩(wěn)定的感覺使界面變得熟悉和可預知（用提供穩(wěn)定的感覺使界面變得熟悉和可預知（用戶習慣）戶習慣） 互動性互動性: :給于用戶反饋給于用戶反饋, ,引導用戶參與引導用戶參與 （系統(tǒng)反應時間15s,3s）可學習性：讓用戶逐漸成長，成為高手可學習性：讓用戶逐漸成長，成為高手 簡易性簡易性: :將呈現(xiàn)的信息減到極限，突出重點將呈現(xiàn)的信息減到極限，突出重點 差異性差異性: :不同用戶需求是不同的不同用戶需求是不同的1.1. 視覺上的美與舒適視

5、覺上的美與舒適 設計原則設計原則 用戶處于控制地位用戶處于控制地位用戶開始操作可信性可預期性穩(wěn)定而快速的響應靈活性 設計原則設計原則 一致性一致性產(chǎn)品結(jié)構(gòu)的一致和業(yè)界習慣的一致操作行為一致命令的名稱統(tǒng)一視覺呈現(xiàn)一致窗口方式一致與生活保持一致設計改動設計原則設計原則互動性互動性反饋性參與性直接性更新性召喚感親和力 設計原則設計原則 可學習性可學習性 鮮明性引導性空間有效性邏輯性恢復性幫助性 設計原則設計原則 簡易性簡易性操作少簡潔快捷方式文案簡單正確使用留白直觀簡易不同于簡陋設計原則設計原則 差異性差異性不同熟練程度用戶不同年齡用戶不同地區(qū)用戶不同專業(yè)背景的用戶殘障用戶可兼容性：瀏覽器 屏幕尺寸

6、 色彩動態(tài)性設計原則設計原則視覺上的美和舒適視覺上的美和舒適清晰舒適獨特 產(chǎn)品開發(fā)產(chǎn)品開發(fā)案例：案例：WinXP用戶處于控制地位：自定義背景，多種預覽選擇用戶處于控制地位：自定義背景，多種預覽選擇一致性一致性: : 統(tǒng)一界面方式和按鈕方式統(tǒng)一界面方式和按鈕方式 互動性互動性: :狀態(tài)表示，按鈕質(zhì)感處理狀態(tài)表示，按鈕質(zhì)感處理視覺上的美和舒適視覺上的美和舒適 :鮮亮色彩、立體感、圖標簡易簡易: :將呈現(xiàn)的信息減到極限：人性的賬戶管理，直觀批將呈現(xiàn)的信息減到極限：人性的賬戶管理，直觀批預覽預覽差異性差異性: :不同用戶需求是不同的：不同分辨率，多語言不同用戶需求是不同的：不同分辨率，多語言目錄q 互

7、動媒體設計互動媒體設計 q 界面設計原則界面設計原則q 界面交互設計界面交互設計q 視覺呈現(xiàn)設計視覺呈現(xiàn)設計q 使用性測試使用性測試交互設計交互設計交互設計交互設計 用戶需求搜集：調(diào)查問卷用戶需求搜集：調(diào)查問卷 焦點小組焦點小組(程度程度) 用戶提案用戶提案用戶分級用戶分級 用戶任務分解用戶任務分解交互設計和描述交互設計和描述: 結(jié)構(gòu)圖結(jié)構(gòu)圖 流程圖流程圖 頁面圖頁面圖 交互設計交互設計導航與定位系統(tǒng)導航與定位系統(tǒng) 欄目欄目/菜單導航菜單導航關鍵頁面的導航關鍵頁面的導航分類目錄和列表分類目錄和列表搜索框的導航搜索框的導航相關內(nèi)容相關內(nèi)容窗口方式窗口方式其他導航方式其他導航方式我在哪里？我在哪里

8、？我去過哪里？我去過哪里？我可以去哪里我可以去哪里?交互設計交互設計 菜單菜單菜單組織單一菜單 多重菜單：相關聯(lián)的內(nèi)容在同一界面窗口中橫向并置多重菜單：相關聯(lián)的內(nèi)容在同一界面窗口中橫向并置（文件（文件 打印打印 屬性）屬性） 樹狀菜單欄：極限樹狀菜單欄：極限4-8個選項，個選項，3-4層層菜單式樣（文字/圖標）全屏菜單全屏菜單 2下拉菜單欄下拉菜單欄 3 彈出菜單彈出菜單 4工具欄工具欄 5版塊菜單版塊菜單設計原則一致 分層 分組 排序 快捷鍵 反饋當前狀態(tài) 幫助交互設計交互設計界面窗口界面窗口基本構(gòu)成標題區(qū) 菜單區(qū) 快捷圖標區(qū) 工具區(qū) 工作區(qū)/信息區(qū)控制區(qū) 移動區(qū) 大小區(qū) 滾動區(qū) 窗口方式滾

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

10、多選一、界面位置固定 數(shù)據(jù)輸入界面：用戶輸入數(shù)據(jù)內(nèi)容數(shù)據(jù)輸入界面：用戶輸入數(shù)據(jù)內(nèi)容命令語言界面：用戶按照文法，輸入命令給系統(tǒng)命令語言界面：用戶按照文法，輸入命令給系統(tǒng) 唯一性、一致性、平等性、經(jīng)濟性、允許修改查詢界面：用戶輸入查詢條件，系統(tǒng)輸出結(jié)果查詢界面：用戶輸入查詢條件，系統(tǒng)輸出結(jié)果1.自然語言界面：模糊性、學習性自然語言界面：模糊性、學習性交互設計交互設計典型互動典型互動搜索搜索列表和最終頁列表和最終頁注冊和登陸注冊和登陸用戶反饋和留言用戶反饋和留言個性定制個性定制成功、失敗、提示成功、失敗、提示簡約簡約明確明確習慣習慣興奮興奮交互設計交互設計幫助系統(tǒng)幫助系統(tǒng)人出錯原因感知誤導 記憶誤導

11、 響應時間過快或過慢設計原則完整性 一致性 連續(xù)性 簡易性 可維護性幫助系統(tǒng)類型（線上/線下）1.1. 用戶手冊用戶手冊 2 2培訓培訓 3 3 演示演示 4 4問答（問答（faq,faq,郵箱，電話，問答郵箱，電話，問答平臺等）平臺等）交互設計交互設計手機界面手機界面常用導航方式拖動 菜單 列表現(xiàn)在在哪兒現(xiàn)在在哪兒 以前去過哪兒以前去過哪兒 將來應該將來應該/能夠去哪兒能夠去哪兒 怎么去怎么去 怎么回怎么回 目錄q 互動媒體設計互動媒體設計 q 界面設計原則界面設計原則q 界面交互設計界面交互設計q 視覺呈現(xiàn)設計視覺呈現(xiàn)設計q 使用性測試使用性測試視覺設計視覺設計視覺設計視覺設計主調(diào)主調(diào):

12、:統(tǒng)一統(tǒng)一 對比對比 視覺中心視覺中心 形象形象 色彩色彩 肌理肌理版式：比例版式：比例 分欄分欄 版面率版面率 跳躍率跳躍率 邊角邊角造型元素：線造型元素：線 面面 字體字體動態(tài)排版動態(tài)排版 文件格式文件格式 界面規(guī)范界面規(guī)范視覺設計視覺設計鏈接鏈接 鏈接的組織鏈接的組織文字鏈接文字鏈接圖片或圖標鏈接圖片或圖標鏈接按鈕鏈接按鈕鏈接視覺設計視覺設計圖標圖標優(yōu)勢/劣勢快速識別 美觀 便于記憶 國際化 / 最初不易掌握和理解設計原則整體 隱喻 簡單（不多于20種，造型簡單，輪廓清晰而不生硬 ）尺寸 國際化（不要使用人臉/手，非通用字母） 美觀（立體感，質(zhì)感）圖標類型1.程序程序 2數(shù)據(jù)數(shù)據(jù) 3 命

13、令命令 4控制控制 5開關開關 6狀態(tài)顯示狀態(tài)顯示目錄q 互動媒體設計互動媒體設計 q 界面設計原則界面設計原則q 界面交互設計界面交互設計q 視覺呈現(xiàn)設計視覺呈現(xiàn)設計q 使用性測試使用性測試產(chǎn)品測試產(chǎn)品測試界面評估界面評估評估方法自己的評估 專家評估 VIP用戶評估 可用性測試 理論評估可用性測試5-8個典型用戶 5-8個典型情境下的典型任務關注：失敗率 失誤率 速度評分標準評分標準1 課題設計的定位20%2 交互設計的完整和流暢30%3 最終呈現(xiàn)效果40%4 使用性測試的完整和正確10%題目：動畫管理與播放器設計與實現(xiàn)n參考QQ音樂播放器，實現(xiàn)如下功能：n動畫電影的播放、搜索、推薦n動畫電影分類：多種分類方法n字幕同步播放n注意：封面設計要求采用場景式要求：n提交文件：n每組同學提交一個以學號姓名為名