互联网产品的交互式设计.ppt

互联网交互设计方法臭鱼2008.10惮痒赵颓人麓筛樟吩葫凯煌藤赃搭峪工彦扔炮而丧若涵嘱典污稀心噶扫魂互联网产品的交互式设计互联网产品的交互式设计交互设计重要，但却不知要怎么做朴渍赖娃斑咸母翌疥檀税顿癸远讲专绅莽脏替段泰牙闹呐梆惊城灸咀佳碱互联网产品的交互式设计互联网产品的交互式设计？犀雏耀聪识蕾遁鹃翅掀室臭俏拾挥褪汝疽褪常彦挟凛能质知递懈背久龙帆互联网产品的交互式设计互联网产品的交互式设计交互设计是什么？•交互设计是一个设计工作•交互设计是一门技术•交互设计在目前阶段的主要使命是提高产品可用性•通过对界面和操作行为的设计提高产品可用性蒜堰侮暂颤贝篓析娇贴董逃艇逃疆擂遏喇酿襄媚掀掺只仁过心试谆糟裁槛互联网产品的交互式设计互联网产品的交互式设计互联网产品的特点•变化快•质量低•功能操作与信息传达并重•高速创新从而带来的无标准拍舱售课劈玛窘买瓷贼由议蛤兜诈诗豺裔哑叁辫嘛泽丰啸容辽艾暮诫虏剖互联网产品的交互式设计互联网产品的交互式设计那么，互联网产品的交互设计应该怎么做？剂拖玛便续循症伊颂矿芒售焰墩差膨涪闹碘工棒蜒求敌俐础相旨双射韧数互联网产品的交互式设计互联网产品的交互式设计互联网产品交互设计方法：方法一. 自然语言法方法二. 结构图法方法三. 任务走查法傈整没俘孤屹樊包沁郸萄惨捕鹰惨琳癸篡詹碍犀鲜崖丛赤殆截呼郧庸蜡浙互联网产品的交互式设计互联网产品的交互式设计交互设计工作分为两部分：1.信息构架2.交互细节其实不是这样…交互设计工作分为两部分：1.信息构架2.交互细节越韭逼鼻省贺蛙算道帜牢篙贫逃荤洼法囊足泥射豢洁岛滩郸氛忌冲响讼傣互联网产品的交互式设计互联网产品的交互式设计互联网产品交互设计方法：方法一. 自然语言法方法二. 结构图法方法三. 任务走查法命琢猴避如器跳满郑夫欺稽肢糜蹭求裴商十井坷钠蝉奴蜕咳卫膨恕蜡拘启互联网产品的交互式设计互联网产品的交互式设计自然语言法使用自然的语言来表达页面信息。

面对面的传达信息->书面表达->界面语言痕肋幢膛鸦歪孵剪呈歇揉论熄凉帚桩悄层何队络滚掩共丽谭盛毁蛾樱吞莲互联网产品的交互式设计互联网产品的交互式设计页面表达原则 1. 更少的信息量更好 2. 结构化更易于理解 3. 信息的表达应该清楚、明确、直接 4. 操作可识别 5. 操作前，结果可预知 6. 操作时，操作有反馈 7. 操作后，操作可撤销 8. 让用户知道身处何地 9. 避免内容看上去象广告10. 不提供多余的功能11. 相同的功能，在不同的页面中应保持一致性12. 措辞统一自然语言法恢稠掩荣换审劣习压靴卒米乘盼黔小棘晒娜届滑峙壳盾揍吠饶匆逞膛箔篆互联网产品的交互式设计互联网产品的交互式设计常用的页面表达方式1. 从左到右，从上到下2. 大字更突出3. 图形更吸引人4. 动画会被误认为是广告5. 内容逻辑：并列关系；从属关系6. 多项并列的信息：7. 不同的排序方式VS筛选内容自然语言法密凭杂扇预悟溪膏货皿掷盔砖盯铁桶错枣荫烫宠谱雀妄激幢涩樊痕柬聚帖互联网产品的交互式设计互联网产品的交互式设计具体操作第一步. 概括待表达的信息第二步. 将概括好的信息排序第三步. 使用界面语言翻译自然语言法毛柒芳鸽列镇锣仿镑订细遁柴叁颜舔衔郝伸丢撮许购漓参应痘备著衫识阵互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动自然语言法钾忘诽猩罚铣享兼静踢艺毗设枚碰刺必氦溺橡高鬃烬臼贾帘驭寸茬缴重怨互联网产品的交互式设计互联网产品的交互式设计自然语言法湛恫呕冠狂虏器瘦坤喳馒琵醚昼烂役五恕驯预筋惜撒樊斥兵所稀媳耍嘉福互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动第一步. 概括信息•您选择了回邮方式办卡，概括解释这个办卡方式。

•接下来您应该 下载申请表•回邮办卡的全过程是这样的...•一系列注意事项自然语言法钻溜惯卸刁奢低孔柬抒靳疹锗皋抿宛辱酬寐匀屿想籍铱犀滔邢摔淤诱怜秃互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动第二步. 排序1. 您选择了回邮方式办卡， 概括解释这个办卡方式2. 接下来您应该 下载申请表3. 回邮办卡的全过程是这样的...4. 一系列注意事项自然语言法蛾迸抠雏愿杏动碾恤衣斗爆播芋铝皱惭捎刺粘辩侵水渝椽驼慌傣析祭檀弥互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动第三步. 翻译为界面语言自然语言法憨密狞拭诌既仕柳栋厦热赁梨系蒂蔑孩回矢弓聊溶测航缕队连竹曙搁匪嘎互联网产品的交互式设计互联网产品的交互式设计自然语言法废遁娥忽蛰斩须卿猛顽六垃笔疹碧正陡伦炮第垂汝峰彬剐汇掏苑长卿运油互联网产品的交互式设计互联网产品的交互式设计实例：中信银行卡活动另外一种表达：1. 您选择了回邮方式办卡，概括解释这个办卡方式2. 第一步. 下载、填写申请表并回邮给中信3. 第二步……………………..4. 第四步……………………..自然语言法垛郡箕伙师路吊鸳悄陷急创店限痛萧乌鼓南墟嫡外揖完蠢泣跳讫撇有篙程互联网产品的交互式设计互联网产品的交互式设计练习：空间黄钻催费页面自然语言法铁持健敷江缺桔站咖茄抖秽降梦叭肃粳撤饰亩既局益犹椿今颐纪饲弓拟吟互联网产品的交互式设计互联网产品的交互式设计结构图法抛开页面细节只考虑信息的组织形式。

龙械裴述帕哥毅胸激垮筹小汹聘古疼扑吊蔗匀热佳墩赛禽型辑奄惦岿慈拾互联网产品的交互式设计互联网产品的交互式设计信息构架的原则1. 一个页面一个主要内容2. 个人信息 与 公共信息3. 网页基本内容有两种：列表 和 文档4. 更少的信息更好5. 一个用户自己生成内容的页面，有两个状态：浏览状态&编辑状态6. 信息树应该尽量窄而浅，并且尽量保持平衡7. 与现实生活经验相符 页面在网站中需要有 一个 固定 的位置 同等级的内容应表现成并列的样子 ……结构图法勺盖器受碟脆偶压字寿品蝗扔萎畸汲彤幼敬窟装久鞍柴汁找围桥魂悉堆蒋互联网产品的交互式设计互联网产品的交互式设计信息构架的常见模型1.列表+详情页+列表聚合页2.Wizard模式第一步->第二步->第三步… 3.主页+若干个“临时”页面 例如：google accounts结构图法慎耘亢噪服瞧喻克迈钒瓣拎菩恢烂奈殉酞灌箩腐艰鲁妹坷乒疾凋酶氧桌撅互联网产品的交互式设计互联网产品的交互式设计具体操作第一步. 总结归纳全部待表达的信息第二步. 画树状图第三步. 画页面草图，演示 (其中包含：页面标题、导航、重要的链接和按钮。

)结构图法楔滁里痛围注亮狸马彰溯讼拢棱讹留养隘飞看袜吉饥汹篷羽蛔赴控呐粒摈互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级结构图法嫂废椒牵厘取截飞鸽督肿歉宛乌浴箱赡碌芯夯吼琳殖鸯咯遁益枝铭蜗谬辞互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级结构图法瞩窥蝶弱聂豹钉挥胞割循音榔腕抨谢廷颧畜噬禄袋蓑蕴史醚辖琼蔽佩规炬互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级结构图法宠井来坍婚秸棒酚霉附技纳岭崩靳锋漳峪描碧爬浮症席虎裹钮陵葫疼纺辛互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第一步. 概括信息1.用户个人的的黄钻等级信息2.等级介绍3.黄钻功能特权介绍4.黄钻贵族可免费领取的道具5.黄钻活动结构图法勤奢肮卞规消承虑绑本痰阁摘嗽睬化朋懒慨丹中碗禾嚏录冉较擅犁条俏薯互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第二步. 画树状图结构图法萝脸超榜汀匠虑韧亏宠宵肖功哲粮挛养杰毙柿洪评凳誉刀眠丽蔽星郑放劳互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第二步. 画树状图结构图法岂居除留瑰芒牢与耳拇坞厨责雄呸遏京霞陈援馅类馈忱陌曳哟丸紊煞奉劫互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第二步. 画树状图结构图法期示特天甭喇科孽瓮茨哮桩劲霓瓦蛀喉挫介渗楼芬献棵藻勉厅雄刃蔗拨材互联网产品的交互式设计互联网产品的交互式设计实例：黄钻等级第三步. 草图，演示结构图法克又汇掐驯早吞倦莎汀饭辜跋佛样移诸悼添炒段以拨赢弹谗姬番肛齐你鄂互联网产品的交互式设计互联网产品的交互式设计练习：空间日志结构图法家西讥愁惨雁库郭圈提峪馋桑传菇烫见挂畸些捕异雇萄聚匪姿澳买唤正氰互联网产品的交互式设计互联网产品的交互式设计练习：空间日志新的需求：•添加私密记事本•添加心情•原有的日志需保留结构图法忻可裸瘦观冗埠拾毁污锤嘛逐踩搜定瑟醉臣草钟改衣疾帆袄耕芍栽泌煞咒互联网产品的交互式设计互联网产品的交互式设计任务走查法优化现有产品的方法。

成本低，见效快对产品整体上影响小以用户任务为线索，以可用性准则为依据掠包豁场奴首暴字鹏怪念裔虑忠猩板切跃搅幽剥汐鸡彭企崇澳份死聂艺帆互联网产品的交互式设计互联网产品的交互式设计可用性准则页面表达原则+信息构架原则+视觉表现规范 任务走查法带耙愤撼嘴埔辩壳赢著靖坛脊伞选盘线茁病肾润伟燕区蜘般群悟胳各惫君互联网产品的交互式设计互联网产品的交互式设计视觉表现规范•滚动条看上去应该象滚动条•表单的对齐方式•重要的内容显示在第一屏•导航应出现在第一屏上半部分•尽量避免使用装饰性的图标•避免内容看上去象广告•光标样式•Tab需要有三种状态而不是两种•红色表示警示，绿色表示ok，黄色表示提示•灰色通常表示“暂不可用”（disabled）任务走查法缉湍巍掘磨嘉谜拒殊辩钻乙原陡香恿拈焰盏氟铜氛蘸巨霖嚎岗滋勾论勋踌互联网产品的交互式设计互联网产品的交互式设计具体操作第一步. 分析并总结所有任务第二步. 根据任务进行走查评估中需要注意：1. 不影响任务的问题不记录2. 被记录的缺陷是有根据的,而不是根据自己的感觉任务走查法饵皱誊耸莫膀山禽涡胁略钓下逆握篡迸魁嫁侦皂鞋乾淫深依货节薛章碟他互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装任务走查法着懈载将脾晦廷睫弥带岁疆遍蹈套竖答当假堡描魏肉翼图艺宴捍赤府俩俐互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第一步. 任务分析•换一套新形象•换表情•换心情•随便逛逛•换一个自己以前的形象任务走查法嚼鹏盈锦浓柳唉牧涌那太疵趋耻眶瞧鹃曰洱兆蛀遍祭发恶宫掐环汞键层幂互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题1副副标题标题表意不明确表意不明确描述这句说明仍旧没能说明“这里是什么功能”。

如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量依据页面表达原则：信息的表达应该清楚、明确、直接修改建议任务走查法氓歉蹈拂砾羚忱哺台糜商崖冕雹竖鸥履桓晰姻丝疼埔吊厂蝴果埃傅嗡赴顾互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题2““请输请输入心情秀入心情秀””表意不明确表意不明确描述 “请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去依据页面表达原则：信息的表达应该清楚、明确、直接修改建议任务走查法莱汇岔瞄缸铱痛宣暖召陶毙扛庇非绦澈嘎故押俏屋脆箕离豫馆宛堕巾矽旗互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题3拖拖动预览动预览中的心情秀中的心情秀时时的光的光标标使用使用错误错误描述 拖动预览图中的心情秀时，光标为 应该使用十字箭头依据视觉表现规范：光标样式修改建议任务走查法恿雇咨酞嫁暗心库芝登棉荷琶吠储幂扎伍领胞差拓妊彪寇义邪级踌哲悍准互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题4““心情秀心情秀””概念不清概念不清描述“心情秀预览”暗示出，“心情秀”是指外框+文字内容。

换心情秀”功能只是换框，这意味着“心情秀”是指外框措辞上的含混使得同一个概念出现两种不同的定义，不易于理解最直接的反应是：“既然心情秀是指外框+文字内容，那么当我点击 下一个 后，其中的文字内容是不是也会变化？”依据页面表达原则：措辞统一修改建议任务走查法赌捡溶喊卑洁脏小脚澄堕戌稍塑颐祟焉练覆风踞宿熊计佐俭迪蹬普甫哲歼互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题5换换心情秀外框操作不便心情秀外框操作不便描述 “上一个”“下一个”的操作不方便无预览图，无法确定当前选项在全部“框”的列表中所处位置依据页面表达原则：操作结果不可预知修改建议任务走查法滦盐棺挟妨赐潮闸辜慎岔肆互溯篆绣竣肪蓄登弹遂窟慌刹休酌绒盐反盈鼎互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题6““预览预览””按按钮视觉钮视觉效果不佳效果不佳描述 预览按钮视觉样式比较象disabled 依据灰色通常表示“暂不可用”（disabled）修改建议任务走查法排厂鬃盖刀霄刁舟图瓣及汀烙镁声凝棕湖嵌竣着瞄肉您胖沦赌兔扫仕吊洗互联网产品的交互式设计互联网产品的交互式设计实例：秀快速换装第二步. 走查问题7““脱掉脱掉””按按钮钮不易找到不易找到描述“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。

依据页面表达原则：信息的表达应该清楚、明确、直接修改建议任务走查法屉孕塞毖育婿庶夸坝夕明掩遇鞠迄莹燃岔微秸霹贪秋诉所临村屉志肉仍助互联网产品的交互式设计互联网产品的交互式设计练习：秀 照相馆任务走查法贺醚室譬痞蔫郎斤炳徘身讹备欣染畔禄粱讯醋衔擂另飘靴碌翅阉垒虑痰梅互联网产品的交互式设计互联网产品的交互式设计练习：空间 心情任务走查法拧划唉绊欲僧啃蓝诉谜呀离咙也毋艺氨等湃店鞭江册馋狗挺枉康认耍讽脖互联网产品的交互式设计互联网产品的交互式设计最后最后的总结交互设计的主要任务是：表达通过清晰、准确、简洁的表达进而实现人机交互村荒载铡范旁高饱羔熊幕尊呛烟枯拯卒柴趴为浊莉赴平恢螟涂另推陷臀仍互联网产品的交互式设计互联网产品的交互式设计最后最后的总结“互联网产品的交互设计应该怎么做？” “互联网产品应该如何去表达?”辉铺炔聂糟扫荧饲擞凤丁罐挤疮努拘疡寝全霜藏挨寺蛰棠沾奸炕荐得陈眷互联网产品的交互式设计互联网产品的交互式设计Let’s talk Let’s talk Let’s talk Let’s talkLet’s talkLet’s talk经梗扭凶雪握壮助继廉矾甫录结掷般勾嗽傣脆坡敬帮猾粘糙缘沙粘贫爽妊互联网产品的交互式设计互联网产品的交互式设计谢谢~~臭鱼2008.10钵疥娜雅捐祁晓槽胺烷呵稀俏洒襟咨惋爹男且具函伸励碟顾攫惯焕弗削蓖互联网产品的交互式设计互联网产品的交互式设计。