移动界面交互设计素材

移动互联网终端操作界面与交互设计研究梅雪目录1移动设备界面尺寸和基本组成元素2移动设备小屏幕与终端特殊性对界面与交互设计的影响3移动互联网终端文字的字体与编排4移动互联网终端界面与交互设计模式概括与创新1.移动设备界面尺寸和基本组成元素移动设备界面尺寸VS.移动设备基本组成元素1.移动设备界面尺寸和基本组成元素移动设备界面尺寸iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的P.S.在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起1.移动设备界面尺寸和基本组成元素移动设备界面尺寸iphone6plusUI物理版是iphone6plus实际的屏幕像素。iphone6plusUI设计版是我们截屏iphone6plus的界面在ps中去量，发现的尺寸。iphone6plusUI放大版是iphone6plus的尺寸等比放大1.5倍得出的分辨率。1.移动设备界面尺寸和基本组成元素移动设备界面尺寸1.移动设备界面尺寸和基本组成元素1.移动设备界面尺寸和基本组成元素Iphone图标尺寸1.移动设备界面尺寸和基本组成元素Android手机尺寸1.移动设备界面尺寸和基本组成元素Android手机尺寸1.移动设备界面尺寸和基本组成元素Android手机图标尺寸1.移动设备界面尺寸和基本组成元素Android手机系统分辨率占有率1.移动设备界面尺寸和基本组成元素Android1、尺寸及分辨率Android界面尺寸：480x800、720x1280、1080x1920...Android比iPhone的尺寸多了很多套，建议取用720x1280这个尺寸，这个尺寸720x1280中显示完美，在1080x1920中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。这样的手机屏幕尺寸是：5寸即屏幕对角线是5英寸。2、界面基本组成元素Android的APP界面和iPhone的基本相同：状态栏，导航栏、主菜单栏以及中间的内容区域.1.移动设备界面尺寸和基本组成元素AndroidHOLO风格将下方的主菜单移动到了导航栏下面，这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。1.移动设备界面尺寸和基本组成元素移动设备界面尺寸iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的P.S.在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角与界面元素的布局手机的移动特征对设计的影响F式布局用户浏览网页的一般模式：先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)——“知道是什么”然后扫描一下页面的顶部（导航栏，搜索栏）——“了解用法”下一步，用户的视线下移，开始阅读下一行的内容。用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响WEB端界面元素的布局F式布局2.移动设备小屏幕与终端特殊性对界面与交互设计的影响WEB端界面元素的布局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.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角平板电脑的热区和死角尽对于那些起到界面导航作用的交互元素(例如“菜单”、“返回”、“关闭”等)，以及用来完成分享、收藏、编辑、删除等功能的按钮，通常可以将它们放置在界面顶部。对于那些用于浏览或预览内容的控制元素来说，界面底部是最佳位置。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（1）由于手机用户大多数情景下是单手操作手机，所以要考虑到产品的重要功有是否能单手完成，并且要注意在同一个产品中，手势操作种类不要太多，不要用同一个手势实现不同操作。例如现在流行的侧边滑出栏导航。如果设计了左滑可呼出侧边栏导航那么左侧滑动就不能返回上一级，否则会引引起用户的混乱。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（2）由于移动终端用户使用场景复杂，往往有很多干扰，要尽量减轻用户的记忆负荷和学习成本。在设计客户端的过程中，要求逻辑简单统一，达成目标的操作步骤要尽量少。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（3）移动应用客户端的界面层次最好不要超过3级，否则网站信息架构容易混乱。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（4）要善于利用移动终端除了视觉以外的的其他感觉通道信息，例如听觉、触觉，用户也许会一边使用手机，一边做其它事，并非一直盯着屏幕看，所以要使用声音和振动等方式提示用户。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（5）由于移动设备常常处于不同的网速中，所以要对交互速度和缓慢的下载速度做出有针对性的设计解决方案。特别要注意不要在移动应用中滥用图片，图片下载速度比文字要慢的多，而且很费流量。另一方面，要给用户提供反馈。需要让用户知道下载进行到一个什么样的阶段，还需要多长时间等，在等待时间里展示些小动画等有趣的东西，这样做虽然不能加快他们的浏览速度，但可以使用户不至于在无聊中等待。3.移动互联网终端文字的字体与编排字体的选择文字的编排文字的层级关系设计3.移动互联网终端文字的字体与编排字体的选择与大小iPhone上的字体英文为：HelveticaNeue至于中文，Mac下用的是黑体-简，Win下则为华文黑体。下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小，像素为单位，也就是大家在PS里的文字像素大小。3.移动互联网终端文字的字体与编排字体的选择与大小Android上的字体为：Droidsansfallback，是谷歌自己的字体，与微软雅黑很像。同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。3.移动互联网终端文字的字体与编排文字的编排（1）留足空间字体之间的空间对字体的影响是非常巨大的，甚至超过了字母本身对字体的影响。如果字母间距过窄，将会导致文本阅读困难。（2）行宽行宽是指一行文字的长度。在上文我们已经讨论过，一行显示14个左右的中文字符比较恰当。3.移动互联网终端文字的字体与编排文字的编排（3）宽松行距、紧密行距行距是行与之间的空隙，如果行距太紧密，会让视线难以从上一行的行尾过渡到下一行行首。但行距要是太宽松，字间距又会开始形成队列。行距通常以1.4em为标准，但在电脑屏上显示，这样的距离显得过于紧密。不过，在移动端行宽变短相应也该缩小行距，1.4em是一个恰当的选择。3.移动互联网终端文字的字体与编排文字的编排（4）不要忽视起伏边起伏边是指一段文字的边缘。现在大多数中文网站都是居左对齐，所以会导至每行右边沿参差不齐。当视线从上一行行尾扫视到下一行行首时，最好要让大脑可以估计下一次跳跃的距离和角度，假如文字左侧边缘是平的，那么间距保持一致，就能加快阅读速度。由此有一条很重要的规则就是不应当将两三行以上的文字居中对齐。两端对齐的意思是把文