移动界面交互设计课件

目录1移动设备界面尺寸和基本组成元素2移动设备小屏幕与终端特殊性对界面与交互设计的影响3移动互联网终端文字的字体与编排4移动互联网终端界面与交互设计模式概括与创新第1页/共59页1.移动设备界面尺寸和基本组成元素移动设备界面尺寸VS.移动设备基本组成元素第2页/共59页1.移动设备界面尺寸和基本组成元素移动设备界面尺寸iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的P.S.在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起第3页/共59页1.移动设备界面尺寸和基本组成元素移动设备界面尺寸

iphone6plusUI物理版是iphone6plus实际的屏幕像素。

iphone6plusUI设计版是我们截屏iphone6plus的界面在ps中去量，发现的尺寸。

iphone6plusUI放大版是iphone6plus的尺寸等比放大1.5倍得出的分辨率。第4页/共59页1.移动设备界面尺寸和基本组成元素移动设备界面尺寸第5页/共59页1.移动设备界面尺寸和基本组成元素第6页/共59页1.移动设备界面尺寸和基本组成元素Iphone图标尺寸第7页/共59页1.移动设备界面尺寸和基本组成元素Android手机尺寸第8页/共59页1.移动设备界面尺寸和基本组成元素Android手机尺寸第9页/共59页1.移动设备界面尺寸和基本组成元素Android手机图标尺寸第10页/共59页1.移动设备界面尺寸和基本组成元素Android手机系统分辨率占有率第11页/共59页1.移动设备界面尺寸和基本组成元素Android1、尺寸及分辨率Android界面尺寸：480x800、720x1280、1080x1920...Android比iPhone的尺寸多了很多套，建议取用

720x1280

这个尺寸，这个尺寸720x1280中显示完美，在1080x1920中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

这样的手机屏幕尺寸是：5寸即屏幕对角线是5英寸。2、界面基本组成元素Android的APP界面和iPhone的基本相同：状态栏，导航栏、主菜单栏以及中间的内容区域.第12页/共59页1.移动设备界面尺寸和基本组成元素AndroidHOLO风格将下方的主菜单移动到了导航栏下面，这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。第13页/共59页1.移动设备界面尺寸和基本组成元素移动设备界面尺寸iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的P.S.在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起第14页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角与界面元素的布局手机的移动特征对设计的影响第15页/共59页F式布局用户浏览网页的一般模式：先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)——“知道是什么”

然后扫描一下页面的顶部（导航栏，搜索栏）——“了解用法”

下一步，用户的视线下移，开始阅读下一行的内容。

用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响WEB端界面元素的布局第16页/共59页F式布局2.移动设备小屏幕与终端特殊性对界面与交互设计的影响WEB端界面元素的布局第17页/共59页F式布局-眼动热点图热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响WEB端界面元素的布局第18页/共59页F式布局-从上到下从左到右按照逻辑，我们得出以下结论：品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。在内容结构中，图片更容易获得关注。用户浏览完图片后，下一个关注点便是标题。

用户会大致的浏览文本，但是往往不会通读。2.移动设备小屏幕与终端特殊性对界面与交互设计的影响WEB端界面元素的布局第19页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响手机本身的物理特征受限对设计的影响用户体验。UX指用户体验，UX设计指以用户体验为中心的设计。人与系统交互时的感觉就是用户体验。UX设计师研究和评估一个系统的用户体验，关注与该系统的易用性，价值体现，实用性，高效性等。例如，研究一个电子商务站点的结账（checkout）流程，看看流程是否对用户友好易用；研究子系统的组件，比如研究用户在填写Web表单的时候如何更加高效和舒服。第20页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角热区：点击区域的成功率比较高的区域。

死角：点击区域的成功率很低的区域。所以在设计当中，要尽量将最重要的界面交互元素放置在热区范围当中。第21页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角淘宝UED针对中国人的实验第22页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角淘宝UED针对中国人的实验第23页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角在右手持机的状况下，有效触控区域位于屏幕的左下方。第24页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角底部原则：移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部.底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏幕上进行操作的时候，手指下方的内容部分将会被遮挡住；只有将交互控制元素放在内容区域的下方，才能让这种负面效应降至最低。其实这是一条具有广泛适用性的设计原则，我们可以在很多其他类型的设备中看到这种原理的体现，例如iPod、计算器、带有实体键盘的普通手机、电子秤等，无不是内容在上，控制在下。第25页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角淘宝UED针对中国人的实验第26页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角对于iPhone中的客户端应用，尽量将重要的交互对象及导航结构放在界面底部。对于Android中的客户端应用，尽量将重要的交互对象及导航结构放在界面顶部第27页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角平板电脑的热区和死角由于平板电脑持机方式不同，热区的位置也有所变化。iPad的拿法在很大程度上取决于整个人的姿态。我们在站着的时候，需要一手持机一手操作；坐在桌前的时，我们往往会用一只手像支架一样从侧面架住iPad，而另外一只手用来戳戳点点……

持机的那只手通常会握住机身的上半部分，因为这样最符合杠杆原理；相应的，拇指热区基本会位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相对较大，用户很难像使用iPhone那样瞄上一眼就能看到界面当中的几乎全部内容。用户通常会首先将目光聚焦于iPad界面的顶部区域，所以我们的设计方案也要相应的在这一点上符合用户习惯。第28页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角平板电脑的热区和死角在iPad及同类平板设备的应用当中，主要的交互控制对象应该被放置在界面的左上角或右上角，以便拇指可以很容易的触摸到。第29页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角平板电脑的热区和死角尽量避免将交互元素放在屏幕顶端正中间的位置，否则用户在进行操作的时候，手掌会将很大一部分内容遮住。

实际上，任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。第30页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动设备小屏幕的准确率问题、热区和死角平板电脑的热区和死角尽对于那些起到界面导航作用的交互元素(例如“菜单”、“返回”、“关闭”等)，以及用来完成分享、收藏、编辑、删除等功能的按钮，通常可以将它们放置在界面顶部。对于那些用于浏览或预览内容的控制元素来说，界面底部是最佳位置。第31页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（1）由于手机用户大多数情景下是单手操作手机，所以要考虑到产品的重要功有是否能单手完成，并且要注意在同一个产品中，手势操作种类不要太多，不要用同一个手势实现不同操作。例如现在流行的侧边滑出栏导航。如果设计了左滑可呼出侧边栏导航那么左侧滑动就不能返回上一级，否则会引引起用户的混乱。第32页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（2）由于移动终端用户使用场景复杂，往往有很多干扰，要尽量减轻用户的记忆负荷和学习成本。在设计客户端的过程中，要求逻辑简单统一，达成目标的操作步骤要尽量少。第33页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（3）移动应用客户端的界面层次最好不要超过3级，否则网站信息架构容易混乱。第34页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（4）要善于利用移动终端除了视觉以外的的其他感觉通道信息，例如听觉、触觉，用户也许会一边使用手机，一边做其它事，并非一直盯着屏幕看，所以要使用声音和振动等方式提示用户。第35页/共59页2.移动设备小屏幕与终端特殊性对界面与交互设计的影响移动互联网终端界面元素的布局（5）由于移动设备常常处于不同的网速中，所以要对交互速度和缓慢的下载速度做出有针对性的设计解决方案。特别要注意不要在移动应用中滥用图片，图片下载速度比文字要慢的多，而且很费流量。

另一方面，要给用户提供反馈。需要让用户知道下载进行到一个什么样的阶段，还需要多长时间等，在等待时间里展示些小动画等有趣的东西，这样做虽然不能加快他们的浏览速度，但可以使用户不至于在无聊中等待。第36页/共59页3.移动互联网终端文字的字体与编排字体的选择文字的编排文字的层级关系设计第37页/共59页3.移动互联网终端文字的字体与编排字体的选择与大小iPhone上的字体英文为：HelveticaNeue至于中文，Mac下用的是黑体-简，Win下则为华文黑体。下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小，像素为单位，也就是大家在PS里的文字像素大小。第38页/共59页3.移动互联网终端文字的字体与编排字体的选择与大小Android上的字体为：

Droidsansfallback

，是谷歌自己的字体，与微软雅黑很像。同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。第39页/共59页3.移动互联网终端文字的字体与编排文字的编排（1）留足空间字体之间的空间对字体的影响是非常巨大的，甚至超过了字母本身对字体的影响。如果字母间距过窄，将会导致文本阅读困难。（2）行宽行宽是指一行文字的长度。在上文我们已经讨论过，一行显示14个左右的中文字符比较恰当。第40页/共59页3.移动互联网终端文字的字体与编排文字的编排（3）宽松行距、紧密行距行距是行与之间的空隙，如果行距太紧密，会让视线难以从上一行的行尾过渡到下一行行首。但行距要是太宽松，字间距又会开始形成队列。行距通常以1.4em为标准，但在电脑屏上显示，这样的距离显得过于紧密。不过，在移动端行宽变短相应也该缩小行距，1.4em是一个恰当的选择。第41页/共59页3.移动互联网终端文字的字体与编排文字的编排（4）不要忽视起伏边起伏边是指一段文字的边缘。现在大多数中文网站都是居左对齐，所以会导至每行右边沿参差不齐。当视线从上一行行尾扫视到下一行行首时，最好要让大脑可以估计下一次跳跃的距离和角度，假如文字左侧边缘是平的，那么间距保持一致，就能加快阅读速度。由此有一条很重要的规则就是不应当将两三行以上的文字居中对齐。两端对齐的意思是把文字设置成每行文字所占空间是相等的，采用这种方式，两侧都不会产生起伏边。但是两端对齐也有缺点，那就是文字间产生的间隙不一样宽。甚至有时一行中只有几个字，而在下一行则填满了，非常不协调。更窄的行宽会加重两端对齐的问题，因此两端对齐的文字在移动端是难以阅读的，所以绝对不能在移动端使用两端对齐。第42页/共59页3.移动互联网终端文字的字体与编排文字的层级关系设计

文字间的层能够告诉用户哪些是主要信息，哪些是次要信息，引导用户的阅读次序和主次。如果网页中的文字层次不分明会让用户感到混乱厌烦、不知所措，没有主次关系，使用户没有读下云的欲望，用户体验差。谈到层级关系时，在HTML代码语言中我们通常是指的H1到H6这六个层级。另外还有一种特殊的层次也会影响我们的阅读，即字母间距应当小于字间距，字间距又得小于行间距，行间距要小于段落间距。要注意这些特殊层次才能在移动端创造最佳阅读体验。第43页/共59页4.移动互联网终端界面与交互设计模式概括与创新移动互联网终端界面与交互设计模式概括移动互联网终端界面与交互设计的创新第44页/共59页4.移动互联网终端界面与交互设计模式概括与创新移动互联网终端界面与交互设计模式概括内容优先：界面布局应以内容为核心，提供符合用户期望的内容。为触摸而设计：界面的交互系统以自然手势为基础建构，符合人体工学并保持一致性。转换输入方式：使用各种手机的设备特性和设计手段，减少在应用内的文字输入。流畅性：保持应用交互的手指及手势的操作流、用户的注意流和界面反馈转场的流畅性。第45页/共59页4.移动互联网终端界面与交互设计模式概括与创新移动互联网终端界面与交互设计模式概括多通道设计：发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感。（多通道设计是指系统的输入和输出都可以由视觉、听觉、触觉等来协作完成）易学性：保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的线索就能让用户清楚地知道其操作方式。为中断而设计：考虑应用的使用情境，确保在各个产出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出。智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。第46页/共59页4.移动互联网终端界面与交互设计模式概括与创新为触摸而设计建立手势交互规范在一个移动应用中，手势的统一性非常重要。同一页面内，尽量不要多用几个手势操作。让用户在应用的任何界面中都知道怎么使用手势，并达到预期的结果。这需要设计师提供一套基于应用信息架构的手势规范，它将是导航与交互的基础。第47页/共59页4.移动互联网终端界面与交互设计模式概括与创新为触摸而设计触控目标的尺寸大小最小可用的UI目标大小的手指元素是：食指常用操作应有7×7毫米1毫米的间距

拇指常用操作应有8×8毫米2毫米的间距

各类型的表单组件应该有5毫米的最小间距可触区域必须大于7×7mm尽量大于9×9mm第48页/共59页4.移动互联网终端界面与交互设计模式概括与创新转换输入方式减少文本输入，转化输入形式在数字输入过程中，常常会把文字的输入转化为基本的手势输入。手势操作会以更快的形式进行输入，提升了输入的效率。如天猫客户端的价格输入转化为手势拔动。简化输入选项，变填空为选择在设置输入或者对于一些已知项目的输入中，尽量把用户要输入的内容变成选择。日期、地址等本身可以转化为选择项的内容，尽量使用选择输入。使用手机已有的传感器输入使用语音、扫描识别（二维码、条码、文字等）减少用户的输入，给用户提供便利。。第49页/共59页4.移动互联网终端界面与交互设计模式概括与创新移动互联网终端界面与交互设计的创新多通道更轻量的设计利用留白和卡片式设计只用一种字体使用更简洁的配色方案手势分层的界面动态效果第50页/共59页4.移动互联网终端界面与交互设计模式概括与创新多通道更轻量的设计“扁平化设计”去除了多余的倾斜和阴影，在app中采用一种更加轻量化的美学，界面更简单，只关注获取核心信息，抛开所有无用的设计元素。第51页/共59页4.移动互联网终端界面与交互设计模式概括与创新利用留白和卡片式设计以前，人们会使用线条和各种分隔符号来区分界面上的不同区域，但实际上这种方式现在看来会显得过于拥挤。在设计中去掉线条通过留白和卡片的方式呈现内容，可以创造出更干净的界面。第52页/共59页4.移动互联网终端界面与交互设计模式概括与创新只用一种字体减少屏幕上字体的数量才能真正发现排版的力量。设计师不需要使用多种字体，只用一种字体，配上