cindylu設(shè)計(jì)具有豐富交互的應(yīng)用系統(tǒng)

1、設(shè)計(jì)具有豐富交互的應(yīng)用系統(tǒng)DESIGN RICH INTERACTIVEAPPLICATIONS(Cindy), Ph.D., CHFPAlbridge Solutions, Inc.An Affiliate of Pershing, a BNYM Company1認(rèn)識(shí)鄰座1. 名字2. 工作和負(fù)責(zé)領(lǐng)域3. 希望從本工作坊學(xué)到什么4. 每組選擇1-2個(gè)實(shí)際工作中的項(xiàng)目供小組作為討論豐富交互設(shè)計(jì)的實(shí)例2工作坊學(xué)習(xí)目標(biāo)1. 認(rèn)識(shí)豐富交互2. 學(xué)會(huì)豐富交互的設(shè)計(jì)原理3. 學(xué)習(xí)如何設(shè)計(jì)豐富交互3課程安排 一AGENDA PART I什么是具有豐富交互的應(yīng)用？(10) 為什么它能增強(qiáng)用戶體驗(yàn)? (5)豐

2、富交互的基本設(shè)計(jì)原理 (40)討論 (20）小結(jié) (5)1.2.3.4.5.休息 （30分鐘）4課程安排二AGENDA PART II次的交互設(shè)計(jì)原理 （20）其他考慮的因素 (10)設(shè)計(jì)過程（10） 練習(xí) （30）小組展示 (25）總結(jié)（10）1.2.3.4.5.6.5什么是具有豐富交互的應(yīng)用系統(tǒng)？WHAT IS RICH INTERACTION?1. 新浪網(wǎng)2.6什么是具有豐富交互的應(yīng)用系統(tǒng)？WHAT IS RICH INTERACTION?7豐富交互- 定義RICH INTERACTIONS¢ 豐富交互1. 簡單直接的交互2. 多種交互形式3. 具有桌面應(yīng)用系統(tǒng)的特性¢

3、; 豐富網(wǎng)絡(luò)應(yīng)用 Rich Internet Applications (RIAs)8為什么豐富交互增強(qiáng)了戶體驗(yàn)？WHY USERS EXPERIENCE IS ENHANCED豐富富有9討論 桌面應(yīng)用程序 網(wǎng)頁應(yīng)用程序 移動(dòng)裝置：智能，平板電腦10為什么豐富交互增強(qiáng)了用戶體驗(yàn)？WHY USERS EXPERIENCE IS ENHANCED1. 直接的體驗(yàn)2. 簡單快捷3. 連續(xù)參與4. 愉快的體驗(yàn)11直接 + 簡單 + 快捷 + 參與 + 愉快豐富交互設(shè)計(jì)原理1. 直接交互2. 簡單輕便3. 保持同頁4. 提供邀請(qǐng)5. 顯示過渡6. 立即反應(yīng)Make it directKeep light

4、-weightedStay on the same pageProvide an invitationUse transitionsReact immediately參考：“Designing Web Interfaces” by Bill Scott & Theresa Neil12直接交互13直接交互14直接交互15直接交互16簡單輕便“一號(hào)直達(dá)，用一個(gè)賬號(hào)，不需要切換，即可直達(dá)所有互聯(lián)網(wǎng) 服務(wù)”17參考：推出全新首頁及移動(dòng)操作系統(tǒng)簡單輕便1819簡單輕便20保持同頁21¢ 設(shè)計(jì)模式: Master/保持同頁22提供邀請(qǐng)23提供邀請(qǐng)24提供邀請(qǐng)25提供邀請(qǐng)26顯示過程27

5、顯示過渡28顯示過程29顯示過渡30顯示過渡31立即反應(yīng)32立即反應(yīng)33立即反應(yīng)34立即反應(yīng)35豐富交互設(shè)計(jì)原理1. 直接2. 簡單輕便3. 在同頁完4. 提示能5. 顯示中間過程6. 立即反應(yīng)36參考:“Designing Web Interfaces” by Bill Scott & Theresa Neil3738394041討論¢ 運(yùn)用小組的實(shí)際例子討論互動(dòng)設(shè)計(jì)原理1. 直接交互2. 簡單輕便3. 保持同頁4. 提供邀請(qǐng)5. 顯示過程6. 立即反應(yīng)42直接的體驗(yàn)簡單快捷 連續(xù)參與 愉快的體驗(yàn)BREAK43交互設(shè)計(jì)原理的層次44參考： About Face 3(Alan

6、 Cooper, Robert Reimann, and Dave Cronin)界面設(shè)計(jì)原理行為設(shè)計(jì)原理概念設(shè)計(jì)原理設(shè)計(jì)價(jià)值使用環(huán)境用戶能力用戶動(dòng)機(jī)用戶目標(biāo)設(shè)計(jì)價(jià)值¢ 對(duì)使用者有幫助，有價(jià)值¢ 不能對(duì)使用者有害¢ 有目的¢ 優(yōu)雅 簡單，和諧45464748概念設(shè)計(jì)原理¢ 是否適合所設(shè)計(jì)的¢ 使用者¢ 使用場(chǎng)合 機(jī)場(chǎng)安檢 公路收費(fèi) 大廳 在 辦公室 商店¢ 支持流程¢ 技術(shù)平臺(tái)中495051參考：iOS Human Interface Guidelines52參考：iOS Human Interface

7、Guidelines行為和界面設(shè)計(jì)¢ 目的是減少使用者的工作 思維 記憶與發(fā)現(xiàn) 視覺 體力 學(xué)習(xí)原理量1. 直接2. 簡單輕便3. 在同頁完能4. 提示5. 顯示中間過程 536. 立即反饋5455Page 5662界面設(shè)計(jì)原理¢ 可實(shí)現(xiàn)¢ 組件可重復(fù)使用¢ 瀏覽器的兼容性(accessibility)¢無63瀏覽器的兼容性64豐富互動(dòng)的技術(shù)和平臺(tái)RICH INTERACTION TECHNOLOGIES AND PLATFORM¢ Adobe Flash¢ Java¢ Microsoft Silverlight&

8、#162; HTML56566從哪入手？瀑布開發(fā)過程交付準(zhǔn)備客戶驗(yàn)收編碼測(cè)試敏捷開發(fā)過程67Sprint2回顧計(jì)劃2Sprint 1計(jì)劃1Sprint 0 Shared Vision定義需求 概要 詳細(xì)分析 設(shè)計(jì) 設(shè)計(jì)目標(biāo)導(dǎo)向設(shè)計(jì)GOAL-DIRECTED DESIGN問題與目標(biāo)解決方案實(shí)施范圍現(xiàn)有利益相關(guān)用戶考慮約束限制條件CSS支持元素：理想體需功能流程結(jié)構(gòu)：布局導(dǎo)航模式關(guān)鍵場(chǎng)景68參考：About Face 3 (Allan Cooper, Robert Reimann, and David Cronin)支持詳細(xì)設(shè)計(jì)行為視覺語言品牌框架驗(yàn)求需求建模者人物設(shè)計(jì)人與環(huán)境場(chǎng)景設(shè)計(jì)研究要點(diǎn)理解

9、需要解決的問題與目標(biāo)建立互動(dòng)框架設(shè)計(jì)互動(dòng)評(píng)估和測(cè)試1.2.3.4.69交互設(shè)計(jì)70設(shè)計(jì)原理人物，場(chǎng)景，需求交互設(shè)計(jì)建立互動(dòng)框架詳細(xì)設(shè)計(jì)71建立互動(dòng)框架72詳細(xì)設(shè)計(jì)73選擇多項(xiàng)74757677 設(shè)計(jì)模式分析搜索¢ 自動(dòng)完成¢ 實(shí)時(shí)建議¢ 實(shí)時(shí)搜索¢ 完善搜索78 問題分析搜索¢ 問題： 找到需要的¢ 搜索范圍： 已知或未知¢ 已知的 部分：¢ 希望的結(jié)果： 花最小的力氣 以最快的速度找到 準(zhǔn)確的 提供多項(xiàng)選擇供參考79自動(dòng)完成80自動(dòng)完成8182構(gòu)建原型¢ 目的設(shè)計(jì)概念 評(píng)價(jià) 測(cè)試 作為開發(fā)的基礎(chǔ)¢ 形式 靜態(tài) 交互8384用戶測(cè)試¢ 目的 使用者是否能理解我們的設(shè)計(jì)？ 使用者能順利完成想要做的事嗎？ 有什么設(shè)計(jì)漏洞？能找到需要的功能嗎？設(shè)計(jì)的流程是否與用戶的理解的流程一致？呈