用户体验页面表达及的设计通用原则教学课件

案例分析过分追求花俏的效果，却忘了你做这个产品：是给谁用的？它的核心需求？产品设计是发现需求、满足需产品设计是发现需求、满足需求，而不是创造需求！求，而不是创造需求！案例分析1.厕所2.移动、联通手机号3.黄金回收、加工4.刻章5.照相6.相机出租7.房屋出租8.煎饼果子史上业务最全的公厕（武汉）决定不做什么，往往比决定决定不做什么，往往比决定做什么更重要！做什么更重要！案例分析产品设计的出发点、运营模式是非常正确的，但是新的产品线的迭代上线，导致以往体验性非常好的产品，给忠实用户造成可怕的体验。-Are you ready？-OK!这两句话很简单，产品设计人员在设计每一个功能点时都需要全面考虑。案例分析导航早就过时了，但是没有人来升级、替换。逆水行舟，不进则退逆水行舟，不进则退同样适用于互联网产品设计。这也是为什么同样产品线，不同公司的用户群数量截然不同的原因之一。案例分析这是哪？导航很“文雅”，但是用户不明白。不按套路不按套路(大众习惯)出出牌牌只会让人感觉别扭！相当别扭！创新，并不是让你这样来做。案例分析按照自己的思维“拍脑袋”策划，那么用户恨不得拍你的脑袋！不要给用户不想要的东西，任何没用的东西对用户都是一种伤害。%&*￥#*#￥以上案例在生活中Verycommon,verymuch！以上案例好玩吗？好笑吗？是不是都是低级错误？是不是让人难以置信？其实这些都发生在你我的身上，而且就在现在。小结发现需求，而不是创造需求。决定不做什么，往往比决定做什么更重要！产品迭代，你是否真的准备好了。产品及时更新。你是否真正了解什么是产品创新。按照自己的思维“拍脑袋”策划，那么用户恨不得拍你的脑袋！不要给用户不想要的东西，任何没用的东西对用户都是一种伤害。OK，切入正题，我们部门要做的就是 Better User Experience 主要内容用户体验？交互设计？设计？实现模型和心理模型用户体验与交互设计基本原则介绍交互细节案例介绍交互设计所需要技能概念用户体验：UE(User Experience)用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。Web中的用户体验是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。用户体验的核心是UCD，即“以用户为中心的设计”。等到忙完这一阵子，我们部门逐步建立自己的用户体验设计中心（UserExperienceDesignCenter）*_*“AJAX之父”的Jesse James Garrett早在2000年就提出了以用户为中心的Web设计的流程和用户体验的要素。战略层战略层网站目标和用户需求网站目标和用户需求(老板居多老板居多)成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对网站的期许和目标，有助于确立用户体验各方面战略的制定。(很多都是老板提的需求、马云就是一个需求PM。)范围层范围层功能规格和内容需求功能规格和内容需求（产品经理）（产品经理）带着“我们想要什么”、“我们的用户想要什么的”的明确认识，我们就能弄清楚如何去满足所有这些战略的目标。当把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时，战略就变成了范围。结构层结构层交互设计与信息架构交互设计与信息架构（产品经理）（产品经理）在收集完用户需求并将其排列好优先级别之后，我们对于最终产品将会包括什么特性已经有了清楚的了解。然而，这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层：为网站创建一个概念结构。框架层框架层界面设计、导航设计和信息设计界面设计、导航设计和信息设计（美工、产品经理）（美工、产品经理）在充满概念的结构层中开始形成了大量的需求，这些需求都是来自我们的战略目标的需求。在框架层，我们要更进一步地提炼这些结构，确定很详细的界面外观、导航和信息设计，这能结构变得更实在。表现层表现层视觉设计视觉设计（美工、产品经理、技术）（美工、产品经理、技术）在这个五层模型的顶端，我们把注意力转移到网站用户会先注意到的那些方面：视觉设计，这里，内容、功能和美学汇集到一起来产生一个最终设计，这将满足其他四个层面的所有目标。概念交互设计交互：用户通过某种方式发出指令，且系统对此作出相应的反应。从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的交互设计技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的用户方向感、成就感、使用频率、黏性等很多都和交互设计有直接关系。最常见、最容易忽略、最典型的交互设计的例子概念貌似有点模糊？概念UI设计(UserInterfaceDesign)用户界面设计，在很大程度上就是在探讨如何让产品的界面更加具有可用性，如何让用户有更良好的体验。这是一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉。例如：一个按钮的设计，美工设计考虑如何好看，而产品经理、用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题。关于用户体验用户体验各要素的设计和交互设计、界面设计不同：它是一种比交互设计和界面设计更上位的设计，界面设计和交互设计侧重于从功能的实现出发，而用户体验设计则重点关注用户使用过程中的感受，是一种以用户为中心的，综合功能设计、交互设计、界面设计、导航设计和视觉设计等，它要求设计者(产品经理、美工)站在一个更宏观的高度，整体把握用户与这些设计要素之间的关系。从而给产品的最终用户带来良好的体验。产品经理和美工真是太伟大了！软件设计，设计，交互设计软件设计的艺术TerryWinograd(2019年度的ACM人机交互院士)开发软件建房子土木工程师装修设计师建筑设计师软件设计设计交互设计土木工程师土木工程师关心工程的实现。（技术）装修设计师装修设计师则考虑的是在现有空间中如何美化。（美工）建筑工程师建筑工程师则关心的是房屋居住者的感受。（产品经理、美工）实现模型和心理模型心理模型表现模型实现模型容易使用，体验良好记忆负担，体验较差最好的技术是消失在生活当中的技术心理模型：心理模型：产生于用户头脑中的关于一个产品应该具有的概念和行为的知识。这种知识可能源自于对产品的概念和行为的一种期望。（看电影）实现模型：实现模型：是产品的内部结构和工作原理，他存在于设计人员的头脑中。（放电影）表现模型：表现模型：是指产品的最终外观以及产品呈现给用户后，用户通过观看或使用后而形成的关于产品如何工作和使用的知识。几个通用的原则就近设计原则对功能进行恰当的分类和组织通用原则-帮助用户探索和尝试通用原则-允许用户犯错误让用户可以撤销动作。在执行具体的破坏性操作中要求用户确认。通用原则-提供实用的帮助设计帮助系统入门和学习部分使用指南参考手册疑难解答术语解释语言表达：采用具体的例子，帮助用户理解表达方式：按照使用流程来。通用原则-使界面符合用户的使用习惯被动调整策略：例如功能定制，界面定制。主动自适应调整策略：例如sogou拼音输入法。根据其他用户的使用行为来主动进行自适应调整购物网中，购买这本书的用户还购买了以下书。在长尾理论中安德森叫过滤器法则，它是长尾现象形成的一个因素。介于主动自适应和被动调整之间的混合策略。通用原则-减少用户在使用过程中出现错误让用户能有效地看出或者知道如何进行正确操作减少用户记忆的负担；自然匹配和预设用途；尽可能采取一致性的设计采用限制级因素防止用户出错通用原则-减少用户在使用过程中时出现错误利用某种方式提醒用户可能出错如何设置出错信息不要只告诉用户操作无法完成或者操作失败不要仅仅给出出错代码，还应当给出该错误的含义不要在出错信息中使用用户无法理解的术语错误要尽可能明确错误信息要有建设性，要让用户看出怎样才是正确的不要给出误导性的出错信息向用户提出解决问题的建议通用原则-减少用户的等待感0.1秒钟、1秒钟、10秒钟如果响应时间是0.1秒，用户感觉不到任何延迟，即0.1秒是让用户感觉到系统立即做出了反应的时间上限。1秒钟是让用户思维不被中断的上限。但大于1秒钟时用户将会感到延迟。10秒钟时让用户的注意力保持在对话过程中的上限。通用设计原则-小结就近设计原则对功能进行组织和分类帮助用户探索和尝试允许用户犯错提供实用的帮助使界面符合用户的使用习惯减少用户出错减少等待感交互细节案例介绍创立于2019年亚马逊公司总部位于美国华盛顿州的西雅图，目前它己成为全球商品品种最多的网上零售商。亚马逊及其它销售商为客户提供数百计品种独特的全新、翻新及二手商品，如图书、影视、音乐、数码电子产品、家居园艺用品、玩具、婴幼儿用品、食品、服饰、鞋类等产品，其规模和销售额都是全球领先的。亚马逊致力于成为全球以客户为中心的公司，以使人们能在网上找到与发掘任何他们想购买的商品，并力图提供最低的价格。除了销售产品外，亚马逊也提供网络服务，亚马逊网络服务(Amazon Web Services)为亚马逊的开发客户提供基于其自有的后端技术平台、通过互联网提供的基础架构服务。利用该技术平台，开发人员可以实现几乎所有类型的业务。亚马逊网络服务所提供服务的案例包括：亚马逊弹性计算网(Amazon EC2)、亚马逊简单队列服务(Amazon Simple Queue Service)、亚马逊灵活支付服务(Amazon FPS)等。案例一百度、人人网交互设计符合用户习惯与预期先字母排序，再优先显示最近联系人，减少键盘操作。交互设计符合用户习惯与预期说三句“我认为”、“我猜测”，不如一次真正意义的用户调研。交互设计适时的提醒没必要的提醒不需要出现而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关怀一些用户真的需要提醒，并且不仅仅针对初期用户。交互设计操作便利QQ魔法表情视觉设计制定规范，维持统一文字使用要规范，语法，大小，颜色，大小写都需要注意能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话每个概念都只有唯一一种表达。如”服务通”、“付费排名”等概念能用一种字体颜色的，不多用一种颜色能用一种字体大小的，不多用一种大小交互设计寻求最佳方案没有最好，只有更好腾讯QQ可以称得上及时通讯的老大，以前往往看到的是腾讯的界面是多么的友好等等的赞美。但是一次偶尔的操作，发现腾讯的不完美，也可以说是很大的失败。在QQ更改密码的时候出现了要求在同一IP段才能修改，但是我想问下，现在也不是所有互联网用户都会用电信或者网通。其实有很大一部分是用的其他网络提供商的宽带接入。这样也就导致了随机IP段产生。那么请问他们怎么修改密码？他这么做也不外乎就是为了防止盗号的行为，但是即使这样也不应该牺牲用户的易操作性。为了防止盗号的行为还有很多其他方法。反正个人认为腾讯这样做不是很好。百度、腾讯用户体验总结Dontmakemethink符合用户习惯与预期做适时的提醒不强迫用户选择最佳方案操作便利案例二网易邮箱注册初体验课下尝试注册一个新的网易邮箱，分析该邮箱在交互方面做的比较好的点(尤其第一次进入邮箱)，并考虑哪些可以供我们借鉴。试着给自己发送几个带图片的附件的邮件，感受其友好性。网易体验行业先驱的交互设计原则JakobNielson博士简介JakobNielson是尼尔森诺曼集团的主要负责人之一，他被美国新闻与世界报道杂志誉为”Web可用性方面的世界顶尖专家”。他的Alertbox专栏从2019年就开始在互联网上发布了(网站地址是：wwwuseltcom)。Nielsen博士曾经是Sun公司杰出的工程师。他写过很多书，包括畅销全球的DesigningWebUsability一书。JakobNielson博士交互设计的十项原则1.让用户随时了解系统的状态。2.系统应该与真实世界相符合（使用用户惯用的词汇和概念）。新浪微博手机客户端的开关键3.给用户控制权和自主权。当系统出错或者误操作后能够紧急退出4.提倡一致性和标准化。相似的任务提供相似的元素5.帮助用户诊断、识别和恢复错误，告诉用户大概的原因和解决办法。6.预防错误。7.依赖于识别而不是记忆。8.强调实用的灵活性和有效性。输入搜索内容后直接按回车键就能搜索而不一定要点击搜索图标。9最小化设计。乔布斯估计很郁闷10.提供帮助及文档。BenShneiderman（本施奈德曼）交互设计原则性力求一致性：高度一致性的界面能够给人清晰和整体的感觉。提供明确的反馈设计对话，告诉用户任务已经完成提供错误预防和简单的纠错功能应该方便用户取消某个操作用户应掌握控制权减轻用户的记忆负担现任马里兰大学计算机科学系教授，兼任该校人机交互实验室主任。作为用户界面设计的先驱，他的著作和研究闻名于世。交互设计需要哪些能力和技术？交互设计师InteractionDesigner1.有相关工作经历和作品者优先；2.对各种常用软件有强烈兴趣并有灵敏触觉，富有创造力和激情，并有动手实践良好习惯；3.逻辑思维能力强，熟练掌握业务需求分析、产品需求分解的技巧；4.有大局观，可以在复杂的约束条件下找到平衡或创新的方法；5.主动性高，具优秀的理解、沟通与协调能力，很强的文字表达能力；个性乐观开朗，善于和各种背景的人合作；6.对交互设计过程有深入了解，能熟练应用站点结构图、流程图等交互设计方法；7.有相关岗位的技术和技能，如视觉设计、XHTML/CSS等；8.熟悉动画制作、高仿真原型制作者优先；9.主动性高，具优秀的理解、沟通与协调能力，文字表达能力强；10.有良好的英文阅读能力，英文六级优先；11.工业设计、计算机、软件工程、心理学等相关专业本科及以上学历。工作职责1.参与产品规划构思和创意过程；2.分析业务需求，并加以分解和归纳出产品人机交互界面需求；3.设计软件的人机交互界面结构、用户操作流程等；4.参与公司前瞻性产品的创意设计；5.制作相关仿真原型。产品经理需要充电了交互设计需要哪些能力和技术？1.交互设计的经验，或多或少，当然经验丰富者优先。2.给出高质量的产品原型，流程图，线框图，清晰的表达自己的设计方案。3.优秀的沟通和协调能力，能准确的挖掘用户需求，结合商业目标，快速调整设计方案，并获得最终的认可。4.良好的视觉设计能力，Photoshop，Dreamweaver等设计工具熟练运用，能给出高保真度的原型。熟悉XHTML，Javascript，ActionScript者优先。5.基本的程序开发知识，确保你在前期设计时能综合开发成本，给出高效可行的设计方案。6.人机交互，软件工程，工业设计，视觉传达，或者相关设计学科的学历。我们并不注重学历，当然高学历者优先。7.英文，能阅读专业资料，能应付日常工作中和外籍同事的交流。（日文也可以，我们也在招日文站的设计师。）8.在各个有趣的网站都有自己的注册帐号。眼界是能力的基础。9.最重要的一条：学习的心态！美工需要充电了Colourful Future！谢谢！