移动界面交互设计.ppt

F式布局- 眼动热点图 热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 WEB端界面元素的布局 F式布局- 从上到下 从左到右 按照逻辑，我们得出以下结论： 品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。 在内容结构中，图片更容易获得关注。 用户浏览完图片后，下一个关注点便是标题。 用户会大致的浏览文本，但是往往不会通读。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 WEB端界面元素的布局 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 手机本身的物理特征受限对设计的影响 用户体验。UX指用户体验，UX设计指以用户体验为中心的设计。人与系统交互时的感觉就是用户体验。 UX设计师研究和评估一个系统的用户体验，关注与该系统的易用性，价值体现，实用性，高效性等。例如，研究一个电子商务站点的结账（checkout）流程，看看流程是否对用户友好易用；研究子系统的组件，比如研究用户在填写Web表单的时候如何更加高效和舒服。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 热区：点击区域的成功率比较高的区域。死角：点击区域的成功率很低的区域。 所以在设计当中，要尽量将最重要的界面交互元素放置在热区范围当中。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 淘宝UED针对中国人的实验 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 淘宝UED针对中国人的实验 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 在右手持机的状况下，有效触控区域位于屏幕的左下方。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 底部原则：移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部. 底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏幕上进行操作的时候，手指下方的内容部分将会被遮挡住；只有将交互控制元素放在内容区域的下方，才能让这种负面效应降至最低。 其实这是一条具有广泛适用性的设计原则，我们可以在很多其他类型的设备中看到这种原理的体现，例如iPod、计算器、带有实体键盘的普通手机、电子秤等，无不是内容在上，控制在下。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 淘宝UED针对中国人的实验 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 对于iPhone中的客户端应用，尽量将重要的交互对象及导航结构放在界面底部。 对于Android中的客户端应用，尽量将重要的交互对象及导航结构放在界面顶部 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 平板电脑的热区和死角 由于平板电脑持机方式不同，热区的位置也有所变化。iPad的拿法在很大程度上取决于整个人的姿态。我们在站着的时候，需要一手持机一手操作；坐在桌前的时，我们往往会用一只手像支架一样从侧面架住iPad，而另外一只手用来戳戳点点…… 持机的那只手通常会握住机身的上半部分，因为这样最符合杠杆原理；相应的，拇指热区基本会位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相对较大，用户很难像使用iPhone那样瞄上一眼就能看到界面当中的几乎全部内容。用户通常会首先将目光聚焦于iPad界面的顶部区域，所以我们的设计方案也要相应的在这一点上符合用户习惯。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 平板电脑的热区和死角 在iPad及同类平板设备的应用当中，主要的交互控制对象应该被放置在界面的左上角或右上角，以便拇指可以很容易的触摸到。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 平板电脑的热区和死角 尽量避免将交互元素放在屏幕顶端正中间的位置，否则用户在进行操作的时候，手掌会将很大一部分内容遮住。 实际上，任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的