《用户界面设计原则及案例介绍》由会员分享,可在线阅读,更多相关《用户界面设计原则及案例介绍(55页珍藏版)》请在金锄头文库上搜索。
1、用户体验、交互设计及案例介绍ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印几张看似不相关的图片ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印几个网站ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印主要内容用户体验?交互设计?设计?实现模型和心理模型用户体验与交互设计基本原则介绍交互细节案例介绍小任务交互设计所需要技能ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未
2、经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印概念区分用户体验:UE用户体验并不是指产品本身是如何工作的,而是指产品如何和外界联系并发挥作用,也就是人们如何“接触“或者“使用”它。Web中的用户体验是指用户在访问平台的过程中的全部体验,它包括平台是否有用,疑惑或者bug程度,功能是否易用、简约,界面设计和交互设计是否友好等方面。用户体验的核心是UCD,即“以用户为中心的设计”。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印“AJAX之父”的Jesse James Garrett早在2000年就提出了以用户为中
3、心的Web设计的流程和用户体验的要素ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互设计交互:用户通过某种方式发出指令,且系统对此作出相应的反应交互设计是关于创建新的用户体验的问题,目的在于增强和扩充人们的工作、通信及交互方式,使他们能够更加有效地进行日常工作和学习。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印UI设计UserInterfaceDesign用户界面设计,在很大程度上就是在探讨如何让产品的界面更加具有可用性,如何让用户有更良好的体
4、验。这是一种优化后的界面,通过这种界面,用户能更方面地完成任务,获得良好的感觉。例如:一个按钮的设计,美工设计考虑如何好看,而用户界面设计师则考虑按钮如何摆放,上面显示什么文字,甚至到底要不要这个按钮的问题。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印软件设计,设计,交互设计软件设计的艺术TerryWinograd(2004年度的ACM人机交互院士)开发软件建房子土木工程师装修设计师建筑设计师软件设计设计交互设计ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同
5、意,不得转印实现模型和心理模型心理模型表现模型实现模型容易使用,体验良好记忆负担,体验较差最好的技术是消失在生活当中的技术ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印几个通用的原则就近设计原则对功能进行恰当的分类和组织ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印帮助用户探索和尝试ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印允许用户犯错误让用户可以撤销动作在执行具体的破坏
6、性操作中要求用户确认。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印提供实用的帮助设计帮助系统入门和学习部分使用指南参考手册疑难解答术语解释语言表达:采用具体的例子,帮助用户理解表达方式:按照使用流程来。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印设计一个优秀的向导式界面ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印帮助用户高效地完成操作支持批处理操作(google的pic
7、asa图像处理软件)提高常用操作的效率4A中的作业模块ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印布置手工作业流程ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印使界面符合用户的使用习惯被动调整策略:例如功能定制,界面定制主动自适应调整策略:例如sogou拼音输入法根据其他用户的使用行为来主动进行自适应调整购物网中,购买这本书的用户还购买了以下书,在长尾理论中安德森叫过滤器法则,它是长尾现象形成的一个因素介于主动自适应和被动调整之间的混合策略ZPE
8、DU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印减少用户在使用软件时出现错误(一)让用户能有效地看出或者知道如何进行正确操作减少用户记忆的负担;自然匹配和预设用途;尽可能采取一致性的设计采用限制级因素防止用户出错ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印减少用户在使用软件时出现错误(一)利用某种方式提醒用户可能出错如何设置出错信息不要只告诉用户操作无法完成或者操作失败不要仅仅给出出错代码,还应当给出该错误的含义不要在出错信息中使用用户无法理解的术语错误
9、要尽可能明确错误信息要有建设性,要让用户看出怎样才是正确的不要给出误导性的出错信息向用户提出解决问题的建议ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印减少用户的等待感Robert B miller 1968 Response time in man-computer conversational transactions0.1秒钟、1秒钟、10秒钟ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印总结就近设计原则对功能进行组织和分类帮助用户探索和尝试
10、允许用户犯错提供实用的帮助设计一个优秀的向导界面使界面符合用户的使用习惯减少用户出错减少等待感ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互细节案例介绍ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印案例一Tecent交互设计Dontmakemethink“返回”的位置和做法很重要:这是整个QQMail的交互的“枢纽”,如同围棋中的“玉柱”,也定义了邮箱的交互风格。帮用户自动选中:在输入独立密码或加密folder输入密码时错误后,应该把输入框内的
11、内容select上,这样就可以直接打入而不用清除了光标定位:之前的点回复时光标focus到正文的问题改好了,但却没有注意到点转发时光标,反而应是在收件人处而不是正文处,因为一般总要填写转发人,而回复(包括回复全部)则是直接输入内容.ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互设计符合用户习惯与预期先字母排序,再优先显示最近联系人,减少键盘操作。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互设计符合用户习惯与预期兼容客户端邮件菜单习惯在用T
12、T或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来,但右键则不能。不随意去掉用户正在使用的功能原来mail在做出了“HTML方式查看”后,去掉了“打开”功能符合用户预期点击其他地方,WEBQQ的浮动窗口隐藏到固定位置ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互设计适时的提醒没必要的提醒不需要出现而适时出现的提示或功能,用得好,不但不会骚扰用户,还是对用户的细致的关怀ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互
13、设计操作便利QQ魔法表情ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互设计操作便利问卷星的设计页面ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印视觉设计制定规范,维持统一文字使用要规范,语法,大小,颜色,大小写都需要注意能用一个词表达的,不用一句话。能用一句话表达清楚的,不用两句话每个概念都只有唯一一种表达。如”VIP”的概念能用一种字体颜色的,不多用一种颜色能用一种字体大小的,不多用一种大小ZPEDU.ORGZPEDU.ORG讲义版权由中培教
14、育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印视觉设计防止不恰当的低龄化在追求“简单”的过程中,QQMail不知不觉的变得“中性”、“成熟”化。当我们更加理性和严谨地设计产品的时候,自然会远离“低龄”倾向。“成熟”源自合理的设计,“低龄”源自不合常理的设计。 不恰当的低龄化ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印交互设计寻求最佳方案争执:腾讯QQ可以称得上及时通讯的老大,以前往往看到的是腾讯的界面是多么的友好等等的赞美。但是一次偶尔的操作,发现腾讯的不完美,也可以说是很大的失败。在QQ更改密码
15、的时候出现了要求在同一IP段才能修改,但是我想问下,现在也不是所有互联网用户都会用电信或者网通。其实有很大一部分是用的其他网络提供商的宽带接入。这样也就导致了随机IP段产生。那么请问他们怎么修改密码?他这么做也不在呼就是为了防止盗号的行为,但是即使这样样不应该牺牲用户的易操作性。为了防止盗号的行为还有很多其他方法。个人觉得腾讯这样做不是很好。希望大家发表一下自己的看法参考地址:http:/ 看一看下面的图片。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意
16、,不得转印讲义版权由中培教育所有,未经同意,不得转印方便的导航元素方便的导航元素(1)(2)(5)(3)(4)ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印人性化的PayPhase输入一句话输入一句话 轻松在线支付轻松在线支付买家可以把姓名/地址/付款资料通用一个句子与密码存储起来。结账时,你只需要输入你自设的这个句子与密码即可在线购物程序的简化将会使得用户更多地使用在线购物方式购买商品。据调查,在此之前有半数以上的网民已经将商品放进虚拟购物车,但到最后因为支付过程过于繁琐而放弃购物。ZPEDU.ORGZPEDU.ORG
17、讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印易于筛选和用户评价比较易于筛选和用户评价比较方便地访问正面和负面评论方便地访问正面和负面评论ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印让用户感到舒适ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印亚马逊购物体验总结把握住网站的焦点只要有可能,应该为每个用户提供个性化内容。给予用户为什么做出次选择的指导。让用户尽可能多的接触到产品(内容)。不要让用户感到有些产品/服
18、务正在强迫他们购买在适当的时候可轻松地访问重要部分。在任何时候让顾客感到舒服和可控。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印Jakob Nielson博士交互设计的十项原博士交互设计的十项原则则1.让用户随时了解系统的状态例如导入导出的提示功能2.系统应该与真实世界相符合(使用用户惯用的词汇和概念)3.给用户控制权和自主权当系统出错或者误操作后能够紧急退出。4.提倡一致性和标准化相似的任务提供相似的元素5.帮助用户诊断、识别和恢复错误。告诉用户大概的原因和解决办法6.预防错误7.依赖于识别而不是记忆8强调实用的灵活
19、性和有效性:输入搜索内容后直接按回车键就能搜索而不一定要点击搜索图标。9最小化设计10.提供帮助及文档ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印Ben Shneiderman交互设计原则性交互设计原则性力求一致性:高度一致性的界面能够给人清晰和整体的感觉。提供明确的反馈设计对话,告诉用户任务已经完成提供错误预防和简单的纠错功能应该方便用户取消某个操作用户应掌握控制权(授课计划的跳过该动画)减轻用户的记忆负担ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,
20、不得转印交互设计需要哪些能力和技术?交互设计师交互设计师 Interaction Designer1.有相关工作经历和作品者优先;2.对各种常用软件有强烈兴趣并有灵敏触觉,富有创造力和激情,并有动手实践良好习惯;3.逻辑思维能力强,熟练掌握业务需求分析、产品需求分解的技巧;4.有大局观,可以在复杂的约束条件下找到平衡或创新的方法;5.主动性高,具优秀的理解、沟通与协调能力,很强的文字表达能力;个性乐观开朗,善于和各种背景的人合作;6.对交互设计过程有深入了解,能熟练应用站点结构图、流程图等交互设计方法;7.有相关岗位的技术和技能,如视觉设计、XHTML/CSS等;8.熟悉动画制作、高仿真原型制
21、作者优先;9.主动性高,具优秀的理解、沟通与协调能力,文字表达能力强;10.有良好的英文阅读能力,英文六级优先;11.工业设计、计算机、软件工程、心理学等相关专业本科及以上学历。工作职责:1.参与产品规划构思和创意过程;2.分析业务需求,并加以分解和归纳出产品人机交互界面需求;3.设计软件的人机交互界面结构、用户操作流程等;4.参与公司前瞻性产品的创意设计;5.制作相关仿真原型。ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印1.交互设计的经验,或多或少,当然经验丰富者优先。 2.给出高质量的产品原型,流程图,线框图,清晰
22、的表达自己的设计方案。 3.优秀的沟通和协调能力,能准确的挖掘用户需求,结合商业目标,快速调整设计方案,并获得最终的认可。 4.良好的视觉设计能力,Photoshop,Dreamweaver等设计工具熟练运用,能给出高保真度的原型。熟悉XHTML,Javascript,ActionScript者优先。 5.基本的程序开发知识,确保你在前期设计时能综合开发成本,给出高效可行的设计方案。 6.人机交互,软件工程,工业设计,视觉传达,或者相关设计学科的学历。我们并不注重学历,当然高学历者优先。 7.英文,能阅读专业资料,能应付日常工作中和外籍同事的交流。(日文也可以,我们也在招日文站的设计师。) 8.在各个有趣的网站都有自己的注册帐号。眼界是能力的基础。 9.最重要的一条:学习的心态!ZPEDU.ORGZPEDU.ORG讲义版权由中培教育所有,未经同意,不得转印讲义版权由中培教育所有,未经同意,不得转印