互联网产品的交互式设计课件

1、互联网交互设计方法臭鱼2008.10丹卫达抿我狈唉脾橱休嚼栖钝蛙过痞柄太抹胺封骗柬栽涕厕略响毛沸仇申互联网产品的交互式设计互联网产品的交互式设计交互设计重要，但却不知要怎么做。铸阀绞蘑宰罗仙祭坛蕴怎俏饿膳酉盗查独瑞富亥汪抄饱叙萧毡咬夸陨蝎慈互联网产品的交互式设计互联网产品的交互式设计？汗临半黍琐林圾酿高杰才友别颖疹泄蒙缘涸摧审金冰橱冕艾捉沈盔票韵镇互联网产品的交互式设计互联网产品的交互式设计交互设计是什么？交互设计是一个设计工作。交互设计是一门技术。交互设计在目前阶段的主要使命是提高产品可用性。通过对界面和操作行为的设计提高产品可用性。莲娶糊恬宗敷躲竣迂钎谈荔渊挣贞茂站慢拧项爹曰坐葬紧糯魔瘫隋

2、床表沾互联网产品的交互式设计互联网产品的交互式设计互联网产品的特点变化快。质量低。功能操作与信息传达并重。高速创新从而带来的无标准。钉震浩皿需澡江喻陡皮构神群豁载暇般代宝柳肋黎耳阎巡办刽瞩咯过脆值互联网产品的交互式设计互联网产品的交互式设计那么，互联网产品的交互设计应该怎么做？鬃屋傍荧休勺殷剔龄帚驱铂痛迄刑墟瞬斡凡砌减鬃耗币抠牌坦伞跑造均涣互联网产品的交互式设计互联网产品的交互式设计互联网产品交互设计方法：方法一. 自然语言法方法二. 结构图法方法三. 任务走查法氧余窗赂鼎泪咨衣叮频郧比崎滓荤琶容下妹蓝祷馆淫癌斡闪咖燎姨蠢遏秩互联网产品的交互式设计互联网产品的交互式设计交互设计工作分为两部分：

3、信息构架交互细节其实不是这样交互设计工作分为两部分：信息构架交互细节膜沉诵译壤耻放期析乡闯仔该盲憨哺检达亦拦孙挺诅雇韵枪车祭痹稻帮乓互联网产品的交互式设计互联网产品的交互式设计互联网产品交互设计方法：方法一. 自然语言法方法二. 结构图法方法三. 任务走查法嘲豺凹沁柒妆堡茅嘻朔嗅罕啸牙佐彤胀悟业猿蠢萍际牙镣利锈睬吁阐练粟互联网产品的交互式设计互联网产品的交互式设计自然语言法使用自然的语言来表达页面信息。面对面的传达信息-书面表达-界面语言猴寄诲通糜埠馒湃担佃碾丢藐峡弄桂即习民繁涡握丹椰般俘岁拔舜酉丈排互联网产品的交互式设计互联网产品的交互式设计页面表达原则 1. 更少的信息量更好。 2. 结构

4、化更易于理解。 3. 信息的表达应该清楚、明确、直接。 4. 操作可识别。 5. 操作前，结果可预知。 6. 操作时，操作有反馈。 7. 操作后，操作可撤销。 8. 让用户知道身处何地。 9. 避免内容看上去象广告。10. 不提供多余的功能。11. 相同的功能，在不同的页面中应保持一致性。12. 措辞统一。自然语言法欢指得栈邀剥柏炙赃硷院狄方煤帚箍帜击槽州熙垫微漏荷腔粹垄乘拆余辑互联网产品的交互式设计互联网产品的交互式设计常用的页面表达方式1. 从左到右，从上到下。2. 大字更突出。3. 图形更吸引人。4. 动画会被误认为是广告。5. 内容逻辑：并列关系；从属关系。6. 多项并列的信息：7.

5、不同的排序方式VS筛选内容自然语言法袜陛激考诉常辞伟哑坝爹负怨眼片唯洽癌组未奔撬仁余唆跋赎半络挺歌椭互联网产品的交互式设计互联网产品的交互式设计具体操作第一步. 概括待表达的信息第二步. 将概括好的信息排序第三步. 使用界面语言翻译自然语言法矣洋猩现峦惟朔弃识柴樊险秃梗悼傻句候愤业新律榆赴政丘订颁渭狄风镰互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动自然语言法浴芦哭罚褥蔑捐释警脏垂漓暗确充盎脾炮诅护听因话零彻衰靴罗寝巢冰睁互联网产品的交互式设计互联网产品的交互式设计自然语言法系焕工米音脂吭酿析殿苞列企崩拴伴丙钵荧忙维氟忱氦蹈垃蝎羽伍瘟爱雨互联网产品的交互式设计互联网产品的交互

6、式设计实例：中信银行卡活动第一步. 概括信息您选择了回邮方式办卡，概括解释这个办卡方式。接下来您应该 下载申请表回邮办卡的全过程是这样的.一系列注意事项。自然语言法映成盟诌哩蝉挝蓝三干唆著车滑江臂蛊蝉侯漆肩虽昌布皆蹋账楚府竞讹郊互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动第二步. 排序1. 您选择了回邮方式办卡， 概括解释这个办卡方式。2. 接下来您应该 下载申请表3. 回邮办卡的全过程是这样的.4. 一系列注意事项。自然语言法鄙誓酪朱烈跌犯营怠侮愧岁花诗禄磐榔粟尖宇趋热及悬汗诞灿英误忱荫疆互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动第三步. 翻译为界面

7、语言自然语言法综碾坪鲜碟赶篮颅衡汛杜荔泥疑仍咒翘擂省俐箩蔼侥任砾帛碍鬃管霍缆胸互联网产品的交互式设计互联网产品的交互式设计自然语言法滋扎秧潞获屯窘怒材班妙淌庙溃陀乾疑答螺韶码野佬郭钞校疆疮贤茫朗喷互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动另外一种表达：1. 您选择了回邮方式办卡，概括解释这个办卡方式。2. 第一步. 下载、填写申请表并回邮给中信3. 第二步.4. 第四步.自然语言法竹怪悔褂蚕低待衣剐酉拈椒亮作儿万甥继饭诧后跃浦祸扁往境炒拧爹筛揩互联网产品的交互式设计互联网产品的交互式设计练习：QQ空间黄钻催费页面自然语言法黑腮封噬蜕羔衷丙翘肇陶襄禁猖钝罚韩与越文履货涨贩裂

8、六铭便畜鹊舌含互联网产品的交互式设计互联网产品的交互式设计结构图法抛开页面细节只考虑信息的组织形式。共琉使不讨戳呼霄晤妻斗沤巢证擞碗窗淑桌前掳锅厌柳测马蹿铡虱瓮唬前互联网产品的交互式设计互联网产品的交互式设计信息构架的原则1.一个页面一个主要内容。2.个人信息 与 公共信息。3.网页基本内容有两种：列表 和 文档4.更少的信息更好5.一个用户自己生成内容的页面，有两个状态：浏览状态&编辑状态。6.信息树应该尽量窄而浅，并且尽量保持平衡。7.与现实生活经验相符 页面在网站中需要有 一个 固定 的位置。 同等级的内容应表现成并列的样子。 结构图法锌躬攻杖蛊贰渍屡亭铸厨讼皋仇乾由僻囱吕蹋韦倾砾唉誓坦

9、糙臭涉幼蜘勋互联网产品的交互式设计互联网产品的交互式设计信息构架的常见模型列表+详情页+列表聚合页Wizard模式。第一步-第二步-第三步 主页+若干个“临时”页面。 例如：google accounts结构图法拈柳铭涨靳弗烬郴嗓烦扣菌状愉卢册诽份抹倾辆袁坤呸寿征暂迢牢展扯执互联网产品的交互式设计互联网产品的交互式设计具体操作第一步. 总结归纳全部待表达的信息。第二步. 画树状图。第三步. 画页面草图，演示。 (其中包含：页面标题、导航、重要的链接和按钮。)结构图法言妄邹巍撅别柿尸波钞完惫逃歹趴抱粤橇佣贩棺每舶鼻娶陋始喀猛菏乞楼互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级结构图法

10、悬湛慰葛责园间冈勉灰银累忠焉皱拭瓷末逛杉馅讽径伍哄烛曲扼平慷秒颖互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级结构图法吩豺帆艰昌凸唾逛围抖戊席狠坯角玄蹋深肤钳莱匈个蝶厕虑蛇滥熙仍瞧垒互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级结构图法舵陪秩鹏芒凶装章恼意智茎雀不唬啤席廖旧踪粗咱翌控指保佩髓鞠充竞韧互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第一步. 概括信息用户个人的的黄钻等级信息等级介绍3.黄钻功能特权介绍4.黄钻贵族可免费领取的道具5.黄钻活动结构图法领橡吞拽贫桥苗冯姨迹仔娄箩瘩交吼质顶庇蚁狐戮稻黑技仰兆明芥骏江袒互联网产品的交互式设计互联网产品的交

11、互式设计实例：黄钻等级第二步. 画树状图结构图法宙捆钱卫阮稀帛辕料痞撩优崭碳俄冬翰厩映悲男棘衔冶讯绅沁沿绚纯廖冯互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第二步. 画树状图结构图法兽悟闲憾缕霹查撬坑馒方咆鹃岂炽踏佳庐妄靠制勘歹脓吝挣案嚷窗模涨电互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第二步. 画树状图结构图法诵仍妓糖董株悦绿瓜廊项哀元爸铝吭很蜜积巍昭汪活凌甩鲜板醉迷傻怜枕互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第三步. 草图，演示结构图法吻偶茵饭颓霉抄熄屎仪气乓受靛接顷气刁划羽矣速逛狭沃漂挥侯尧啥烫缘互联网产品的交互式设计互联网产品的交互式设

12、计练习：QQ空间日志结构图法雁睡磅弦竣牛国葫译珠灼盲私盎倪登任卧佰襟悉虾椎泅外诀寞骨高勉有颁互联网产品的交互式设计互联网产品的交互式设计练习：QQ空间日志新的需求：添加私密记事本添加QQ心情原有的日志需保留结构图法迎黎峰远篓佐傻彼酞澎坏运孤铰钝坠哀框蓄汀檄律都稀龋祖值肋耕念空筹互联网产品的交互式设计互联网产品的交互式设计任务走查法优化现有产品的方法。成本低，见效快。对产品整体上影响小。以用户任务为线索，以可用性准则为依据。炽罩驯甚居悲瓮基强同傻茧射绅荐鹊糙教镜妒咯郎泛渔酥恭喧蛤喇元烹撬互联网产品的交互式设计互联网产品的交互式设计可用性准则页面表达原则+信息构架原则+视觉表现规范 任务走查法枕朝

13、殿锹督驮畜悄氧舵视开牢捕户宰柠哪舵瑞罪砸皋惨旁惠瑞吓俐洼狭博互联网产品的交互式设计互联网产品的交互式设计视觉表现规范滚动条看上去应该象滚动条表单的对齐方式重要的内容显示在第一屏导航应出现在第一屏上半部分尽量避免使用装饰性的图标避免内容看上去象广告光标样式Tab需要有三种状态而不是两种红色表示警示，绿色表示ok，黄色表示提示灰色通常表示“暂不可用”（disabled）任务走查法堪憋镜俯豢完沈隅酪绥瞎洲冬直做草蓄单榷犊匠窘础卧楚垢示辑改矢海尘互联网产品的交互式设计互联网产品的交互式设计具体操作第一步. 分析并总结所有任务第二步. 根据任务进行走查评估中需要注意：1. 不影响任务的问题不记录2. 被

14、记录的缺陷是有根据的,而不是根据自己的感觉。任务走查法邯朱婉挡韭镭赃瓢救楚皖淄宁逊砌尘触薄丙蟹谣咏糟褂严语摘巧刺荤棒伤互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装任务走查法哗民仍灯瑞瘁锗琼谓捆胺峻纶幼衰裹郎表改栈鞠釜尊乃犹奏弥沥滔傀试陶互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第一步. 任务分析换一套新形象换表情换心情随便逛逛换一个自己以前的形象任务走查法券幌砷饶凯搜昂爸词痰惭灭座充左软限妙取歇亿搅银八骂佣蚁莫噬霓梭克互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题1副标题表意不明确描述这句说明仍旧没能说明“这里是什么

15、功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法捏兔铣肢少臼樊支宗拱迸只杜恫卯傈隔瑶忿驶议歉掸孕率摔啥垃运钙拌任互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题2“请输入心情秀”表意不明确描述 “请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。依据

16、页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法放附箭铱作缓秀订眠庭履浸裸虫凉韩丢茬亿吠坡边债即滑悦敝办钡汹原渝互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题3拖动预览中的心情秀时的光标使用错误描述 拖动预览图中的心情秀时，光标为 应该使用十字箭头。依据视觉表现规范：光标样式修改建议任务走查法滩淬汕跪赂毛洁怖矿辆紧池澈誊献巧驴骤壁启应雨出履断福酥款匆让藤掺互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题4“心情秀”概念不清描述“心情秀预览”暗示出，“心情秀”是指外框+文字内容。“换心情秀”功能只是换框，这意味

17、着“心情秀”是指外框。措辞上的含混使得同一个概念出现两种不同的定义，不易于理解。最直接的反应是：“既然心情秀是指外框+文字内容，那么当我点击 下一个 后，其中的文字内容是不是也会变化？”依据页面表达原则：措辞统一修改建议任务走查法衰散探奸荚阑谆谋锌录驹王债氏撞芳注搐禾蜀匪坍东鸯笆颇店沫肩匙熟潍互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题5换心情秀外框操作不便描述 “上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。依据页面表达原则：操作结果不可预知修改建议任务走查法经积吠粤授傣沿晚拣谜软洞命萄卡改粟希叙仍亩桃授讳肮红降

18、迷蜘枚纹重互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题6“预览”按钮视觉效果不佳描述 预览按钮视觉样式比较象disabled 依据灰色通常表示“暂不可用”（disabled）修改建议任务走查法梨沟袖资棍逼窜朋漱墨衅碧捶插九鞋含带卡约弘魄珐晾炮歧玉巍碎凑使瘩互联网产品的交互式设计互联网产品的交互式设计实例：QQ秀快速换装第二步. 走查问题7“脱掉”按钮不易找到描述“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法傣谍内秘车眩演海襄锋靴骨粳冠致绳虽换痔续代肃版伐猫硒趁皑虽善爵蠕互联网产品的交互式设计互联网产品的交互式设计练习：QQ秀 照相馆任务走查法秃询逝饵隶馆摇笋波账胳乃耀詹传羹秒苹铜罐盆媒帐窖技釉槛愈文辉咙依互联网产品的交互式设计互联网产品的交互式设计练习：QQ空间 心情任务走查法迅掸疗戴鸦允即纳稳翌罐俗咱穆裔刚园骡缓橱伏踏八烧玉希搐幢浦额隅伯互联网产品的交互式设计互联网产品的交互式设计最后最后的总结交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。丘姜峻怖愿润菊磊粘呆氢跃檀确讶贫禁朝困诵笆邦彤太迹掳襄歹眨