用户体验、用户习惯、交互设计课件

用户体验、用户习惯、交互设计.pptx,用户体验、用户习惯、交互设计.pptx,一、什么是用户体验？,用户体验,（,User Experience,，简称,UE,）是一种,纯主观,的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其,用户体验,的共性是能够经由良好设计的实验来认识到的。,一、什么是用户体验？用户体验（User Experience,Peter Morville,在,2004,年一篇关于,用户体验的文章，他认为信息架构包含了三部分，及用户,(user),、内容,(content),和上下文,(context),。在此基础上整理出用户体验蜂窝图：,二、如何评价用户体验的好坏？,Peter Morville 在2004年,价值点,有用性,满意度,可及性,可靠性,可发现性,易用性,用户体验蜂窝图,价值点有用性满意度可及性可靠性可发现性易用性用户体验蜂窝图,useful(,有用性,),：,产品所包含的功能是否能够满足用户的需求。,usable(,易用性,),：,包含易学性和效率性。,desirable(,满意度,),：,功能是否满足用户的各种情感体验，可参考,情感化设计。,valuable(,价值点,),：,设计的产品是否有商业价值。,findable(,可发现性,),：,是否提供良好的导航和定位元素，能很快的找到所需信息，并知道自身所在的位置。,accessible(,可及性,),：,更确切的说法是无障碍性。,credible(,可靠性,),：,产品是否能让用户信任，是否有安全感。,useful(有用性)：产品所包含的功能是否能够满足用户的需,三、常见的用户体验问题,1.,超长的页面下载时间,如果页面下载时间超过,30,秒,很难有用户会喜欢你的网站,2.,无限制地使用,flash,和图片,适当的用一些图片及,flash,可以增加网站的生动性,增加视觉冲击力,.,但无限制的使用,flash,及图片,.,会造成页面文件超大,占用浏览者的,cpu,资源,并且不利于页面更新及搜索引擎对网站的抓取。,3.,网站页面过长,在一个网站的首页,能看到第三屏内容的人只有,10%,以下,，,一个过长的网站很容易引起浏览者的视觉疲劳,更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了,。,三、常见的用户体验问题1.超长的页面下载时间2.无限制地使用,4.,不友好的导航,不友好的导航是最影响用户操作的,不能让用户很方便的找到自己想到的内容,.,用户来到一个页面不知如何返回上一页,不知道当前页面是在哪个栏目下的,.,5.,过期的信息,6.,死连接或连接错误,7.,孤立的页面,用户不知用什么方法返回首页,.,8.,页面没有视觉差异,页面没有视觉差异,页面设计很,平,缺少,层次感,缺少视觉冲击力和亮点,.,或者视觉冲击力突出的并不是网站的主体内容,.,4.不友好的导航5.过期的信息6.死连接或连接错误7.孤立,四、用户浏览网页的习惯,1.,对比图像，文字更具吸引力,2.,眼球的第一运动聚焦于网页的左上角,3.,根据视觉锁定，一栏格式比多栏格式拥有更好的表现力,4.,简短的段落相对于长段落来说有更好的表现力,5.,人们大都只浏览网页的小部分内容,6.,用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边,四、用户浏览网页的习惯1.对比图像，文字更具吸引力,五、尼尔森,F,形状网页浏览模式,Step1:,用户会把目光停留在页面的左上角。,Step2:,用户会从左上角第一行横向浏览。,Step3:,用户会继续往下进行左右横向浏览，但是浏览宽度比上一步短了很多。,Step4:,用户会从左上角向下进行浏览。,对照此图可以得到以下结论：,图,1,五、尼尔森F形状网页浏览模式Step1:用户会把目光停留在页,尼尔森实验室经过长时间的研究测试，给出了不同类型网站的用户浏览热图，用来更加形象生动的解释这一理论。,一般类网页,商务类网页,搜索类网页,三个不同类型网页热图，,红色,是浏览者停留时间最长的区域，,黄色,次之，,蓝色,表示较少关注，,灰色,基本不关注。可以看到三张热图都表现出了,F,形状。,尼尔森实验室经过长时间的研究测试，给出了不同类型网站,不同的应用：,作为广告商：,主要目的是宣传，引起关注。,1.,依据,F,形状网页浏览热图，网页顶部和左边的广告更能吸引眼球。,2.,现在培养的客户都会对类似广告的图片或文字视觉上本能地忽略，因此广告不易太花哨。,3.,研究表明，读者常忽视大部分的横幅广告，视线往往只停留几分之一秒。因此需创新广告位，合理配置网站广告形式。,对于信息类网站：,主要目的是传达读者感兴趣的信息，以保持足够的网站吸引力。,1.,读者在阅读文章的时候并不是逐字逐句，而会习惯跳跃扫视，因此，关键信息,Highlight,出来更易于读者把握重要信息。,2.,标题的设置要精炼，且要传达足够的信息量。这是读者决定是否阅读这篇文章的关键。另还可增加副标题作为补充，如果副标题仍不够吸引，基本上我们就不会感兴趣去点击了。,不同的应用：作为广告商：主要目的是宣传，引起关注。,六、,2013,年交互设计的主流,扁平化设计,扁平化设计,拟扁平化设计,长投影设计,1.,扁平化设计,从整体的角度来讲，扁平化设计是一种极简主义美学，附以明亮柔和的色彩，最后配上粗重醒目，而风格又复古的字体。扁平化设计简化了诸如按钮、图标一类的界面元素。大图片取代了动效。,“扁平化设计”有着鲜明的视觉效果,整个界面的配色平均会采用到,6-8,种颜色,(,这个对于开发团队的挑战极大,),，页面效果更加绚丽、明亮。它所使用的元素之间有着,清晰的层次和布局,，这使得用户能直观的了解每个元素的作用以及交互方式。在需要展现强大信息流的界面内，它让用户,最大程度地减少学习使用成本,。仅仅凭借用户的直觉就大概能够明白每个对象、按钮的作用。,六、2013年交互设计的主流扁平化设计扁平化设计拟扁平化设,扁平化大图,扁平化图标,扁平化大图扁平化图标,2.,拟扁平化设计,“,似扁平化设计,”(Almost Flat Design),是以扁平化设计为基础，但是添加了一些简单的效果，比如简单的投影，基本的渐变。,3.,长投影设计,“,长投影设计,”,图标设计中使用较多，一般是一道,45,度角的阴影从图标中延伸而出，最近的图标设计，大部分都采用,”,长投影设计,”,。,2.拟扁平化设计,“类扁平化设计”已成为一种必然趋势，,它到底好在哪里？,1.,具备非常好的兼容性，能很好的适配到不同的终端上。,2.,具备优秀的组织和展现信息的能力，把纷繁复杂的内容和功能有效的组织起来，以简单但合理的方式排列,，最终使用户界面变得简单易用,。,3.,更适合屏幕较小的智能终端，它有更少的按钮和选项，使整个界面干净整洁、条理清晰，让用户减少认知障碍，降低用户的学习成本。,“类扁平化设计”已成为一种必然趋势，它到底好在哪里？1.具备,