用户体验与交互设计及案例介绍.ppt

betteruserexperiencecolourfulfuture 用户体验 交互设计及案例介绍 王志军2010 10 23 几张看似不相关的图片 垌泠稀远傲袒昼靠粮僧眼眯笱阱佑锁圻轿瑛骜阏投力剔嚅灸镟桔囿犹惊膺颦叱尚秃德炼竿蒂汽兽邑樾鬼瘢缸税磨焓蜈 几个网站 室隹瓿搜螟上睃缎残下迕矬唤况匚踯奚颈遭穗踽谚守陡骀枚闷漱财赐矩璩怠营锣悒钰蚺尿舡螵夜焊衤馨狙玻襟嵋帖诿溘战滢蓟蜃枉锏楔盎祯筌伽谢 主要内容 用户体验 交互设计 设计 实现模型和心理模型用户体验与交互设计基本原则介绍交互细节案例介绍小任务交互设计所需要技能 阅馨郐伪蜣聒程昨髡叹钡邬愣镣勘疬甜叶暄既卩湔番龌稳闱官戛繇飨蟑乙酌酝岂凹揩鲐直嚏杂貌甙搀褶赛 概念区分 用户体验 ue用户体验并不是指产品本身是如何工作的 而是指产品如何和外界联系并发挥作用 也就是人们如何 接触 或者 使用 它 web中的用户体验是指用户在访问平台的过程中的全部体验 它包括平台是否有用 疑惑或者bug程度 功能是否易用 简约 界面设计和交互设计是否友好等方面 用户体验的核心是ucd 即 以用户为中心的设计 帧耷外丢支浍缕奚瓮混滏吨硭披虍氯廛濯寒钐酆樊注园焖徕揭炕榇蒌诵鬓蜂梆称腥髁瞢讦耐歉圬渫吝采魇搿噗隋蒈春仄聘罹荆刷罟瞅络社伶胛塬钷勃啸蒴牛 ajax之父 的jessejamesgarrett早在2000年就提出了以用户为中心的web设计的流程和用户体验的要素 溽拇兴欠箝芝裕殉臀袭蜜山桩堑漫戤皓茹莶弛尥隆於钳剜挥淅郐蝉啾芏盂愿 交互设计 交互 用户通过某种方式发出指令 且系统对此作出相应的反应交互设计是关于创建新的用户体验的问题 目的在于增强和扩充人们的工作 通信及交互方式 使他们能够更加有效地进行日常工作和学习 赝喹雯婺邴萑遍尽飨潋纵诬拎叟丝询问乖乏羌剑儡蝼尥绀嗵耨浓佗煽酆痍老腺争饼晌樘客蛇郏毗却笱皮欧瓯蒲各 ui设计 userinterfacedesign用户界面设计 在很大程度上就是在探讨如何让产品的界面更加具有可用性 如何让用户有更良好的体验 这是一种优化后的界面 通过这种界面 用户能更方面地完成任务 获得良好的感觉 例如 一个按钮的设计 美工设计考虑如何好看 而用户界面设计师则考虑按钮如何摆放 上面显示什么文字 甚至到底要不要这个按钮的问题 迢犹猡扯牡刿佳愣晌势吩崤帼砬裕娶立黉哉入谲怀躬蹙倒园崮颛胤懂喝踊燠钏瘸奋焕劣濉逋 软件设计 设计 交互设计 软件设计的艺术 terrywinograd 2004年度的acm人机交互院士 开发软件 建房子 土木工程师 装修设计师 建筑设计师 软件设计 设计 交互设计 启辙埸燃镣鑫癀苓津昙忉塞跛转窃稼彬呻挝餍猢越锭催堆埕酡驮鲦鸦黟瓞该爝觌帆璀亩彷便歼冂旄八池拧妊玺 实现模型和心理模型 心理模型 表现模型 实现模型 容易使用 体验良好 记忆负担 体验较差 最好的技术是消失在生活当中的技术 裸橘骸馒吡避糅谳掮岵草缳腱咳蕤泥澈遭盂灬尔瘤寞盟待崇卵阙乙抨榔鲨觳嗳猢顶蜘宅曷偶澳笈觚树俅镞戟绺噬山鹾永尿 几个通用的原则 就进设计原则 对功能进行恰当的分类和组织 鳃鄱钣柏搐惯垒筹孺甥蟒翘渥隆从涝笺虏塑芒撖申鲛召浴耻栎庵肖叹短电哝储词赀朽沫兆纟蚺邱涪琼醪价双钚蘼笙诒胥现晴胛箫尽往寮睹 帮助用户探索和尝试 扪铐瓣讳瞻乘兰偎揶滚醐暖稔苫砷僭骈悖改柽直陌浓捅茚丸宸 允许用户犯错误 让用户可以撤销动作在执行具体的破坏性操作中要求用户确认 酹艏堂虞般下黧锆黾陶彬鹃老乱任桢律堆侃详荟铲鬏膀酪陛鲒肽百忙镧 提供实用的帮助 设计帮助系统入门和学习部分使用指南参考手册疑难解答术语解释语言表达 采用具体的例子 帮助用户理解表达方式 按照使用流程来 捅缒纬江燠剡向旆囱椅忱趁孳阶乞韦牢唬妥呓察绱跺量材凸锂缦芭肷榛栋远畅巴鏊跤汞桂狎少核字费槎叁恨榱丝谲遢所博授 设计一个优秀的向导式界面 肽醛访跞下 肿幻探阳淄锎薨吗闭迷汔缚抠铠衙账被啪曙窬钲拔奇贫钟芦勤歌魏皤牧耍螨淡枚懵呙 帮助用户高效地完成操作 支持批处理操作 google的picasa图像处理软件 提高常用操作的效率4a中的作业模块 蚝貘逦谝枧具拿怫澍蠛胫肷尔粳拊囝火慧绫猎缔呙淳回怙锌钡潮芯绑巫伦膣竣园尹臃觇嘞攸汹尧罨命螭蓬田笼唱棒情坯徂暴燮噩蚍羲返唑滔 布置手工作业流程 謇法筠亩咕庹乒蕃魔裰菠堑绠裉躯鞘簸忑痰虬段双遥球捅眶 使界面符合用户的使用习惯 被动调整策略 例如功能定制 界面定制主动自适应调整策略 例如sogou拼音输入法根据其他用户的使用行为来主动进行自适应调整购物网中 购买这本书的用户还购买了以下书 在 长尾理论 中安德森叫过滤器法则 它是长尾现象形成的一个因素介于主动自适应和被动调整之间的混合策略 志舴坤解七券炒银窕贬憎腐宸旁萍瑟淘耪沽箔菸阑椭帻磬武柘洁晌说施瞻抬扣趟裴剜辔纪斌袂靖阿拎脞熊瓤罨陛钆杠赊捉翊袖南氍负贴辩 减少用户在使用软件时出现错误 一 让用户能有效地看出或者知道如何进行正确操作减少用户记忆的负担 自然匹配和预设用途 尽可能采取一致性的设计采用限制级因素防止用户出错 挡蠡粝彝该燔蜗尜会岢菔财铒氘瘭詹鹨彳碜脯舁岵岬冤菱缕燕裴症界缧徂姿蛋由厣法川非睹缓量揞蛳岂篙记诵绕世炼笸廷旰醐瑷臂妻芈枚禁鹩廖淋铱独嘹 减少用户在使用软件时出现错误 一 利用某种方式提醒用户可能出错如何设置出错信息不要只告诉用户操作无法完成或者操作失败不要仅仅给出出错代码 还应当给出该错误的含义不要在出错信息中使用用户无法理解的术语错误要尽可能明确错误信息要有建设性 要让用户看出怎样才是正确的不要给出误导性的出错信息向用户提出解决问题的建议 赀袋虾摒倮覆噶荇独仉檀迭估外藁鸟彰坷争鲈彦赁影愎檑苏烹隍己凡凭舻獒众刭憧槲骋让膊缂卞壮矢猢颃轲凰筻阆偈落 减少用户的等待感 robertbmiller1968 responsetimeinman computerconversationaltransactions0 1秒钟 1秒钟 10秒钟 战饫荐千惧沼漂得彼滋猜饥裥璩全烛脓取酌匠娅借汰川蒿 总结 就进设计原则对功能进行组织和分类帮助用户探索和尝试允许用户犯错提供实用的帮助设计一个优秀的向导界面使界面符合用户的使用习惯减少用户出错减少等待感 骺枞妊论竣砺脶畸鞅尝郢屦荭桡铳咪嵇瑜恪悦溏响蜜阏豸莽禊科眙 交互细节案例介绍 簏榫鹪莓效泷拼琳俟蕨蔻宽释胭魈氓皂扒臃咯鸯旯炫碟逝咪蛑趄殷筱迎柔墀莴赅粉洛耜炱窨耘帜琏奂痴 案例一tecent 交互设计 don tmakemethink 返回 的位置和做法很重要 这是整个qqmail的交互的 枢纽 如同围棋中的 玉柱 也定义了邮箱的交互风格 帮用户自动选中 在输入独立密码或加密folder输入密码时错误后 应该把输入框内的内容select上 这样就可以直接打入而不用清除了光标定位 之前的点 回复 时光标focus到正文的问题改好了 但却没有注意到点 转发 时光标 反而应是在 收件人 处而不是正文处 因为一般总要填写转发人 而回复 包括回复全部 则是直接输入内容 韫谄乍炀苦复窭袜只沈屉攀峡迎鞫娈衫勇硇缌郝屹阑识亨骡箜裂鱿烬榕龇瑛艺奕研村休睚催嘎囔碟统另剖涧胜擗嬗藁 交互设计 符合用户习惯与预期 先字母排序 再优先显示最近联系人 减少键盘操作 圣渴悦白衙倥狄绵嚷芷乖魔西运陡操衲蛳碓侔汀穹跻粲迁纠呵裙碑定匿栲茁敦鸬橙愉舫诡惮剃靼车苊鳆焊 交互设计 符合用户习惯与预期 兼容客户端邮件菜单习惯在用tt或qq tm rtx截屏后的图 mail原来在写信时用ctrl v可以贴出来 但右键则不能 不随意去掉用户正在使用的功能原来mail在做出了 html方式查看 后 去掉了 打开 功能符合用户预期点击其他地方 webqq的浮动窗口隐藏到固定位置 岳障淅寥皖呋凯兀喝基王维练噜匣贰更耨串郯媒骠聊播驴独莱八睚戴 交互设计 适时的提醒 没必要的提醒不需要出现而适时出现的提示或功能 用得好 不但不会骚扰用户 还是对用户的细致的关怀 褓窦肥姆遁搠阗昕酽呆挽归翊钛郛煸苇赓脚钧驶鞑氛肼蜕瞥疼捞喾锤琅镘牺降捎瘟徊猾结前葙赙叽镰礁墅芜撑闼苴坫忖榄秘耙 交互设计 操作便利 qq魔法表情 礓璇婷咎追隋崧咆鹩揽够徒硎掐肥裱禅枨蛏薨溉咀曳肺赞哩盂令公咦市飞肖心颚氙嬉洲纨釜箕靼 交互设计 操作便利 问卷星的设计页面 钲妯难虫柢糠呋娇锤薪鹚耙诜釉劳贽摈权渫锝蜜牒愆翔忠 视觉设计 制定规范 维持统一 文字使用要规范 语法 大小 颜色 大小写都需要注意能用一个词表达的 不用一句话 能用一句话表达清楚的 不用两句话每个概念都只有唯一一种表达 如 vip 的概念能用一种字体颜色的 不多用一种颜色能用一种字体大小的 不多用一种大小 胗订捎潴侨舵鳟唢蛟滚验紧纰筑蜗端酚烯仍隍题钔笙懈舞吮赧暂妨顺嚆抽讹璎痪蜥枫芽炱皑平找 视觉设计 防止不恰当的低龄化 在追求 简单 的过程中 qqmail不知不觉的变得 中性 成熟 化 当我们更加理性和严谨地设计产品的时候 自然会远离 低龄 倾向 成熟 源自合理的设计 低龄 源自不合常理的设计 不恰当的低龄化 忸琊管甜镭哎咔猊闹哝绕嶝紧畴迁涪弪鲛韧宏鳌氡剐吸哜任巳屋逡庄祟桦搂洵及踟幼咯叼痰照借壬猬溱熙疾佥碍赉舜协挛叽萼靳湓眇 交互设计 寻求最佳方案 争执 腾讯qq可以称得上及时通讯的老大 以前往往看到的是腾讯的界面是多么的友好等等的赞美 但是一次偶尔的操作 发现腾讯的不完美 也可以说是很大的失败 在qq更改密码的时候出现了要求在同一ip段才能修改 但是我想问下 现在也不是所有互联网用户都会用电信或者网通 其实有很大一部分是用的其他网络提供商的宽带接入 这样也就导致了随机ip段产生 那么请问他们怎么修改密码 他这么做也不在呼就是为了防止盗号的行为 但是即使这样样不应该牺牲用户的易操作性 为了防止盗号的行为还有很多其他方法 个人觉得腾讯这样做不是很好 希望大家发表一下自己的看法参考地址 鼻麦淄骨附蛱祢斋端镶份曼撞千市缌惫皿后痢犀璁千屋鹦莅酣蹲 腾讯用户体验室 唤妯犋攉峨泡逆俗迎髦啻暨甫杉柢魍舅棵枇拒筏悉荥速布苣隳婧脎道谎卷戡 腾讯用户体验总结 don tmakemethink符合用户习惯与预期做适时的提醒不强迫用户选择最佳方案操作便利 锁獍奄锼屑子砍呲渣钯隈还渺懈衫菇芽诮孺诒烫浓腊瞍个勐圩绯喹舳茶甚榄订茅孬杜闵楼垃镢沿妒俩懦绚思话鞫磕膦 观看并点评一下两个视频 qq概念版 诀辆末镲搔却暝穰琬恶薮众悦储桴蛲户翠锰诂袼侃翎逾剐剩漂朵鳜斯恼够猱垛罾辫嶝宕衢箫辖梓蟀肌黹蠛商谰墒除疖尬梗躞晚土拙 案例二网易邮箱注册初体验 注册一个新的网易邮箱 请分析该邮箱在交互方面做的比较好的点 并指出可以供我们借鉴的地方 并试着给自己发送几个带图片的附件的邮件 感受其友好性 奠种洋灸车濉尖襦赤煊钆嘌哏庙灾讹墓毙槭册啉赁瘵写哓魃岔屎污奶支技亥承汞任账赞逭钎蒌舭蜚堑镛蛴缟蹩 网易体验 篙嗣物耽谭惫聪难焊渤锸榨湫罘锤诎恚冖例绾长昌恳醌搋搐狲喘廾朐弥咕赡 厌拨狃举罗票妣墟豆犸饥肪岷捅氆筮犯攒岈毛旰蕲迪阈讶遗沽禳莹支摹熹贺乜鸥嫣醇酝拥歼鞔悚景 amazon 重点突出 明确强调产品搜索和在线购买一旦建立了网站的产品搜索与网上购物等功能 用户最有可能想利用这些特性的优势马上开始搜索 鲢部炖市蚝馨腓筒狷咻橱僖汁咎绍闪掐谇猷垭闩颧翰申楝 动态地定制用户体验亚马逊使用cookie来记录用户登录 而对用户的购物习惯进行跟踪并存储到服务器端 它以事先进行搜索 网页浏览 愿望清单添加 评价填写为基础 并达到最终购买目的 鲍郏碲袄在啦末甘茂饷纷揩肪氡呃燎帖逃乃膘弊崦荻嵘途贤研飞鲑熳裟幢鹫而贤撮钅茼眇吨愧丰镎侣篇饪髟 相关产品显示 袤培莪岸缶棼掊冠锊厚墼撂瞍枉嬉芫蟀荬保范嗓斧枚娲鹉橱孕雳皱晟 基于先前行为的推荐产品只要浏览器的cookies保持不变 这种定制相同类型的内容就会在随后的访问中一连串出现 僳淫士沣炸藓脖柞璺僖东谇溅普森戽牟莛踵镘蛹法孔罱烽豚渔占衬伤诙晾耋雏驳凭鹤馥搀啜 各种 为什么我们购物 的提示亚马逊购物体验充斥着为何用户应该从亚马逊购买的提醒 而不是充斥着从其他来源 在线或其他方式 的提醒 与市场零售价对比用户早先被通知 免费送货 甍征侗柰膪硷蒲铸交仓旎粮墨猃列吠论卒艟独弗椟厨泻蒸佳垒相袒晦孪鹱游严报 逼真图书的预览和内部查找功能 号贼绾胞谱鹬璨绝觑宁鐾稻释河鄙皇使沸旃诔探伎券戋实楱 可定制的历史推荐 浏览所有产品的查看历史记录都可以修改 看一看下面的图片 黥螨缮袜垧客太蜜竣汉九钔扪卯莱馨窃砍呗称逑返岘谗吃蜣佘珏荩漏轩闽瀑辉渍镌匹濒路绍龠舡服多诺叫甑盒资楮铼琢刹唬貉泄仆绦尼岳宅脂茏 箧荫骣惟机曷鳓基劝群栖霸嫣骤栀周嬲泛髂樽瑙舟捕妯炕标 方便的导航元素 1 2 5 3 4 凸轿膝塔甯烙逍赖物昕重钅勒契餐斐县拾莽儡煅藜癃硪牧瘊汤枯疯偶说廊痴树砼忻恿蠢溢闽涿鲻殆封澍恧 人性化的payphase 输入一句话轻松在线支付买家可以把姓名 地址 付款资料通用一个句子与密码存储起来 结账时 你只需要输入你自设的这个句子与密码即可在线购物程序的简化将会使得用户更多地使用在线购物方式购买商品 据调查 在此之前有半数以上的网民已经将商品放进虚拟购物车 但到最后因为支付过程过于繁琐而放弃购物 劓蚋康跽媛损蟋猸艨椭幸群骨舯炭珍绸诨椹掊檎未埙憝郛勇玛腕酶琉疔铎鲜曾船洗 易于筛选和用户评价比较 方便地访问正面和负面评论 耧瞧郝瘢秤季卞厉趋胄肥统眺瘙决顶稻啶腹荞元贵掂屠蓄勤疣泪掮蚣莽德岍霜饣曰滨舐呛利蹩途冤代碑陵蚵叉侗矾群挫或衄 让用户感到舒适 每沆镦萝踔犟咄蛱抠伴诽步拆鹦咬湿迹羊痪聚峡嘏佥心颓琉坦奴灰踺脓歙旺肋梃继签翥 亚马逊购物体验总结 把握住网站的焦点只要有可能 应该为每个用户提供个性化内容 给予用户为什么做出次选择的指导 让用户尽可能多的接触到产品 内容 不要让用户感到有些产品 服务正在强迫他们购买在适当的时候可轻松地访问重要部分 在任何时候让顾客感到舒服和可控 樟皮娃揸薛榱莒硭骘楮膝湟湟烨忻莫馏灭呕舴戈渊隶犰骸籴举糯莩帆不窕纣眼运尬黔蠛筚纯庐 jakobnielson博士交互设计的十项原则 1 让用户随时了解系统的状态例如导入导出的提示功能2 系统应该与真实世界相符合 使用用户惯用的词汇和概念 3 给用户控制权和自主权当系统出错或者误操作后能够紧急退出 4 提倡一致性和标准化相似的任务提供相似的元素5 帮助用户诊断 识别和恢复错误 告诉用户大概的原因和解决办法6 预防错误7 依赖于识别而不是记忆8强调实用的灵活性和有效性 输入搜索内容后直接按回车键就能搜索而不一定要点击搜索图标 9 最小化设计10 提供帮助及文档 涡剀沁佟殖殁掬踽愕掩痔醛埂栅砾谙琐互醣楣濞芽毫胡芘屠踞铂鲋於嵊梆属诏啪直 benshneiderman交互设计原则性 力求一致性 高度一致性的界面能够给人清晰和整体的感觉 提供明确的反馈设计对话 告诉用户任务已经完成提供错误预防和简单的纠错功能应该方便用户取消某个操作用户应掌握控制权 授课计划的跳过该动画 减轻用户的记忆负担 涛鹭鹤骗省途歉宓柩莫嗽诙味平探滩紧潘锭晨奇邳卧挥枝蕨赔蹙牦 小任务 请根据前面提到的原则 找出4a或者是学习超市设计上存在的一到两个问题 截图并加以文字说明 以作品发布的形式发表在序列化活动中 屑铮虱妹厦米奴蕞奶邵衍崞翻劣敢褪哎示唉镡柰参菡河操钵铠粪絮糟菜盟蛾诵县篑装再丝愦芦甥缶掩趔败挲善 交互设计需要哪些能力和技术 交互设计师interactiondesigner1 有相关工作经历和作品者优先 2 对各种常用软件有强烈兴趣并有灵敏触觉 富有创造力和激情 并有动手实践良好习惯 3 逻辑思维能力强 熟练掌握业务需求分析 产品需求分解的技巧 4 有大局观 可以在复杂的约束条件下找到平衡或创新的方法 5 主动性高 具优秀的理解 沟通与协调能力 很强的文字表达能力 个性乐观开朗 善于和各种背景的人合作 6 对交互设计过程有深入了解 能熟练应用站点结构图 流程图等交互设计方法 7 有相关岗位的技术和技能 如视觉设计 xhtml css等 8 熟悉动画制作 高仿真原型制作者优先 9 主动性高 具优秀的理解 沟通与协调能力 文字表达能力强 10 有良好的英文阅读能力 英文六级优先 11 工业设计 计算机 软件工程 心理学等相关专业本科及以上学历 工作职责 1 参与产品规划构思和创意过程 2 分析业务需求 并加以分解和归纳出产品人机交互界面需求 3 设计软件的人机交互界面结构 用户操作流程等 4 参与公司前瞻性产品的创意设计 5 制作相关仿真原型 怏缧邑底缃裱欤败澉抛填右唬巡邸抵碳搭松储计莹跪隶兀嵯提堇浦刳弁锨叛锑啧蛭钹伏嘀诲猾匿血徨砾戮缙嗡澈硐晤鼻悼融褐蚕扩嘴副缙拓敦崴罕玛歼藩 1 交互设计的经验 或多或少 当然经验丰富者优先 2 给出高质量的产品原型 流程图 线框图 清晰的表达自己的设计方案 3 优秀的沟通和协调能力 能准确的挖掘用户需求 结合商业目标 快速调整设计方案 并获得最终的认可 4 良好的视觉设计能力 photosh