移动界面交互设计ppt课件.ppt

《移动界面交互设计ppt课件.ppt》由会员分享，可在线阅读，更多相关《移动界面交互设计ppt课件.ppt（59页珍藏版）》请在三一办公上搜索。

1、移动互联网终端操作界面与交互设计研究,梅雪,目录,1,移动设备界面尺寸和基本组成元素,2,移动设备小屏幕与终端特殊性对界面与交互设计的影响,3,移动互联网终端文字的字体与编排,4,移动互联网终端界面与交互设计模式概括与创新,1.移动设备界面尺寸和基本组成元素,移动设备界面尺寸 VS.移动设备基本组成元素,1.移动设备界面尺寸和基本组成元素,移动设备界面尺寸,iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮主菜单栏：类似于页面的主菜单，

2、提供整个应用的分类内容的快速跳转内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起,1.移动设备界面尺寸和基本组成元素,移动设备界面尺寸,iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。,1.移动设备界面尺寸和基本组成元素,移动设备界面尺寸,1.移动设备界面

3、尺寸和基本组成元素,1.移动设备界面尺寸和基本组成元素,Iphone图标尺寸,1.移动设备界面尺寸和基本组成元素,Android手机尺寸,1.移动设备界面尺寸和基本组成元素,Android手机尺寸,1.移动设备界面尺寸和基本组成元素,Android手机图标尺寸,1.移动设备界面尺寸和基本组成元素,Android手机系统分辨率占有率,1.移动设备界面尺寸和基本组成元素,Android1、尺寸及分辨率Android 界面尺寸：480 x800、720 x1280、1080 x1920. Android 比 iPhone 的尺寸多了很多套，建议取用720 x1280这个尺寸，这个尺寸 720 x12

4、80中显示完美，在 1080 x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。这样的手机屏幕尺寸是：5寸 即屏幕对角线是5英寸。2、界面基本组成元素Android 的 APP 界面和 iPhone 的基本相同：状态栏，导航栏、主菜单栏以及中间的内容区域.,1.移动设备界面尺寸和基本组成元素,AndroidHOLO风格,将下方的主菜单移动到了导航栏下面，这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。,1.移动设备界面尺寸和基本组成元素,移动设备界面尺寸,iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜

5、单栏、内容区域状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角与界面元素的布局手机的移动特征对设计的影响,F式布局用户浏览网页的一般模式：先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)

6、“知道是什么”然后扫描一下页面的顶部（导航栏，搜索栏）“了解用法”下一步，用户的视线下移，开始阅读下一行的内容。用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,WEB端界面元素的布局,F式布局,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,WEB端界面元素的布局,F式布局-眼动热点图,热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,WEB端界面元素的布局,F式布局- 从上到下 从左到右,按照逻辑，我们得出以下结论：品牌标志和导航应该放在页面的顶部，这是用户对网

7、站的第一印象。在内容结构中，图片更容易获得关注。用户浏览完图片后，下一个关注点便是标题。用户会大致的浏览文本，但是往往不会通读。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,WEB端界面元素的布局,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,手机本身的物理特征受限对设计的影响,用户体验。UX指用户体验，UX设计指以用户体验为中心的设计。人与系统交互时的感觉就是用户体验。UX设计师研究和评估一个系统的用户体验，关注与该系统的易用性，价值体现，实用性，高效性等。例如，研究一个电子商务站点的结账（checkout）流程，看看流程是否对用户友好易用；研究子系统的组件，比如研究用户在

8、填写Web表单的时候如何更加高效和舒服。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,热区：点击区域的成功率比较高的区域。死角：点击区域的成功率很低的区域。所以在设计当中，要尽量将最重要的界面交互元素放置在热区范围当中。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,淘宝UED针对中国人的实验,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,淘宝UED针对中国人的实验,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热

9、区和死角,在右手持机的状况下，有效触控区域位于屏幕的左下方。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,底部原则：移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部.,底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏幕上进行操作的时候，手指下方的内容部分将会被遮挡住；只有将交互控制元素放在内容区域的下方，才能让这种负面效应降至最低。其实这是一条具有广泛适用性的设计原则，我们可以在很多其他类型的设备中看到这种原理的体现，例如iPod、计算器、带有实体键盘的普通手机、电子秤等，无不是内容在上，控制在下。,2.移动设备小屏幕与终端特

10、殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,淘宝UED针对中国人的实验,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,对于iPhone中的客户端应用，尽量将重要的交互对象及导航结构放在界面底部。对于Android中的客户端应用，尽量将重要的交互对象及导航结构放在界面顶部,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,平板电脑的热区和死角,由于平板电脑持机方式不同，热区的位置也有所变化。iPad的拿法在很大程度上取决于整个人的姿态。我们在站着的时候，需要一手持机一手操作；坐在桌

11、前的时，我们往往会用一只手像支架一样从侧面架住iPad，而另外一只手用来戳戳点点 持机的那只手通常会握住机身的上半部分，因为这样最符合杠杆原理；相应的，拇指热区基本会位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相对较大，用户很难像使用iPhone那样瞄上一眼就能看到界面当中的几乎全部内容。用户通常会首先将目光聚焦于iPad界面的顶部区域，所以我们的设计方案也要相应的在这一点上符合用户习惯。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,平板电脑的热区和死角,在iPad及同类平板设备的应用当中，主要的交互控制对象应该被放置在界

12、面的左上角或右上角，以便拇指可以很容易的触摸到。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,平板电脑的热区和死角,尽量避免将交互元素放在屏幕顶端正中间的位置，否则用户在进行操作的时候，手掌会将很大一部分内容遮住。 实际上，任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,平板电脑的热区和死角,尽对于那些起到界面导航作用的交互元素(例如“菜单”、“返回”、“关闭”等)，以及用来完成分享、收藏、编辑、删除等功能的按钮，通常可以将它们放置

13、在界面顶部。对于那些用于浏览或预览内容的控制元素来说，界面底部是最佳位置。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动互联网终端界面元素的布局,（1）由于手机用户大多数情景下是单手操作手机，所以要考虑到产品的重要功有是否能单手完成，并且要注意在同一个产品中，手势操作种类不要太多，不要用同一个手势实现不同操作。例如现在流行的侧边滑出栏导航。如果设计了左滑可呼出侧边栏导航那么左侧滑动就不能返回上一级，否则会引引起用户的混乱。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动互联网终端界面元素的布局,（2）由于移动终端用户使用场景复杂，往往有很多干扰，要尽量减轻用户的记忆负

14、荷和学习成本。在设计客户端的过程中，要求逻辑简单统一，达成目标的操作步骤要尽量少。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动互联网终端界面元素的布局,（3） 移动应用客户端的界面层次最好不要超过3级，否则网站信息架构容易混乱。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动互联网终端界面元素的布局,（4）要善于利用移动终端除了视觉以外的的其他感觉通道信息，例如听觉、触觉，用户也许会一边使用手机，一边做其它事，并非一直盯着屏幕看，所以要使用声音和振动等方式提示用户。,2.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动互联网终端界面元素的布局,（5）由于移动设

15、备常常处于不同的网速中，所以要对交互速度和缓慢的下载速度做出有针对性的设计解决方案。特别要注意不要在移动应用中滥用图片，图片下载速度比文字要慢的多，而且很费流量。 另一方面，要给用户提供反馈。需要让用户知道下载进行到一个什么样的阶段，还需要多长时间等，在等待时间里展示些小动画等有趣的东西，这样做虽然不能加快他们的浏览速度，但可以使用户不至于在无聊中等待。,3.移动互联网终端文字的字体与编排,字体的选择文字的编排文字的层级关系设计,3.移动互联网终端文字的字体与编排,字体的选择与大小,iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑

16、体。下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小，像素为单位，也就是大家在PS里的文字像素大小。,3.移动互联网终端文字的字体与编排,字体的选择与大小,Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。,3.移动互联网终端文字的字体与编排,文字的编排,（1） 留足空间字体之间的空间对字体的影响是非常巨大的，甚至超过了字母本身对字体的影响。如果字母间距过窄，将会导致文本阅读困难。（2）行宽行宽是指一行文字的长度。在上文我们已经讨论过，一行显示14个左右的中文字符比

17、较恰当。,3.移动互联网终端文字的字体与编排,文字的编排,（3）宽松行距、紧密行距行距是行与之间的空隙，如果行距太紧密，会让视线难以从上一行的行尾过渡到下一行行首。但行距要是太宽松，字间距又会开始形成队列。行距通常以1.4em为标准，但在电脑屏上显示，这样的距离显得过于紧密。不过，在移动端行宽变短相应也该缩小行距，1.4em是一个恰当的选择。,3.移动互联网终端文字的字体与编排,文字的编排,（4）不要忽视起伏边起伏边是指一段文字的边缘。现在大多数中文网站都是居左对齐，所以会导至每行右边沿参差不齐。当视线从上一行行尾扫视到下一行行首时，最好要让大脑可以估计下一次跳跃的距离和角度，假如文字左侧边缘

18、是平的，那么间距保持一致，就能加快阅读速度。由此有一条很重要的规则就是不应当将两三行以上的文字居中对齐。两端对齐的意思是把文字设置成每行文字所占空间是相等的，采用这种方式，两侧都不会产生起伏边。但是两端对齐也有缺点，那就是文字间产生的间隙不一样宽。甚至有时一行中只有几个字，而在下一行则填满了，非常不协调。更窄的行宽会加重两端对齐的问题，因此两端对齐的文字在移动端是难以阅读的，所以绝对不能在移动端使用两端对齐。,3.移动互联网终端文字的字体与编排,文字的层级关系设计,文字间的层能够告诉用户哪些是主要信息，哪些是次要信息，引导用户的阅读次序和主次。如果网页中的文字层次不分明会让用户感到混乱厌烦、不

19、知所措，没有主次关系，使用户没有读下云的欲望，用户体验差。谈到层级关系时，在HTML代码语言中我们通常是指的H1到H6这六个层级。另外还有一种特殊的层次也会影响我们的阅读，即字母间距应当小于字间距，字间距又得小于行间距，行间距要小于段落间距。要注意这些特殊层次才能在移动端创造最佳阅读体验。,4.移动互联网终端界面与交互设计模式概括与创新,移动互联网终端界面与交互设计模式概括移动互联网终端界面与交互设计的创新,4.移动互联网终端界面与交互设计模式概括与创新,移动互联网终端界面与交互设计模式概括,内容优先：界面布局应以内容为核心，提供符合用户期望的内容。为触摸而设计：界面的交互系统以自然手势为基础

20、建构，符合人体工学并保持一致性。转换输入方式：使用各种手机的设备特性和设计手段，减少在应用内的文字输入。流畅性：保持应用交互的手指及手势的操作流、用户的注意流和界面反馈转场的流畅性。,4.移动互联网终端界面与交互设计模式概括与创新,移动互联网终端界面与交互设计模式概括,多通道设计：发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感。（多通道设计是指系统的输入和输出都可以由视觉、听觉、触觉等来协作完成）易学性：保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的线索就能让用户清楚地知道其操作方式。为中断而设计：考虑应用的使用情境，确保在各

21、个产出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出。智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。,4.移动互联网终端界面与交互设计模式概括与创新,为触摸而设计,建立手势交互规范在一个移动应用中，手势的统一性非常重要。同一页面内，尽量不要多用几个手势操作。让用户在应用的任何界面中都知道怎么使用手势，并达到预期的结果。这需要设计师提供一套基于应用信息架构的手势规范，它将是导航与交互的基础。,4.移动互联网终端界面与交互设计模式概括与创新,为触摸而设计,触控目标的尺寸大小最小可用的UI目标大小的手指元素是：食指常用操作应有7 7毫米1毫米的间距拇指常用操作应有8 8毫米

22、2毫米的间距各类型的表单组件应该有5毫米的最小间距,可触区域必须大于77 mm尽量大于 99mm,4.移动互联网终端界面与交互设计模式概括与创新,转换输入方式,减少文本输入，转化输入形式在数字输入过程中，常常会把文字的输入转化为基本的手势输入。手势操作会以更快的形式进行输入，提升了输入的效率。如天猫客户端的价格输入转化为手势拔动。简化输入选项，变填空为选择在设置输入或者对于一些已知项目的输入中，尽量把用户要输入的内容变成选择。日期、地址等本身可以转化为选择项的内容，尽量使用选择输入。使用手机已有的传感器输入使用语音、扫描识别（二维码、条码、文字等）减少用户的输入，给用户提供便利。,4.移动互联

23、网终端界面与交互设计模式概括与创新,移动互联网终端界面与交互设计的创新,多通道更轻量的设计利用留白和卡片式设计只用一种字体使用更简洁的配色方案,手势分层的界面动态效果,4.移动互联网终端界面与交互设计模式概括与创新,多通道更轻量的设计,“扁平化设计” 去除了多余的倾斜和阴影，在 app 中采用一种更加轻量化的美学，界面更简单，只关注获取核心信息，抛开所有无用的设计元素。,4.移动互联网终端界面与交互设计模式概括与创新,利用留白和卡片式设计,以前，人们会使用线条和各种分隔符号来区分界面上的不同区域，但实际上这种方式现在看来会显得过于拥挤。在设计中去掉线条通过留白和卡片的方式呈现内容，可以创造出更

24、干净的界面。,4.移动互联网终端界面与交互设计模式概括与创新,只用一种字体,减少屏幕上字体的数量才能真正发现排版的力量。设计师不需要使用多种字体，只用一种字体，配上斜体、加粗、改变字号等手段，也可以分辨不同区域的内容。使用单一字体有助于增强品牌的统一性，优化全平台的体验。此外，用户也更喜欢单一字体所带来的简洁性。,4.移动互联网终端界面与交互设计模式概括与创新,使用更简洁的配色方案,自 2013年 扁平化设计开始普及以来，使用更简洁的配色方案就成为一种趋势。设计师和用户都倾向于使用更少的颜色，以保持界面的干净。 正确使用颜色可以营造情境，将用户的注意力引导到合适的位置，强调关键功能，提高整个使

25、用 app 过程中的体验。此外还能增强用户对于品牌的辨识度。,4.移动互联网终端界面与交互设计模式概括与创新,手势,很多手势是符合用户的直觉的，比如当需要删除某个东西时，不论年龄性别的用户都会想到把这个东西扔出屏幕。手势可以显著提升产品的使用体验，帮助用户以更少的点击完成更多交互。,4.移动互联网终端界面与交互设计模式概括与创新,分层的界面,以前，用户界面都是拟物化的，从事物本身选取素材，比如电子日历长得和纸质桌面日历一样，把 app 图标设计成立体的，按键音也模仿传统电话。现在，扁平化设计通过分层的方式来表现事物的深度和层次，创造一种更加 “有形” 的感觉。,我们的现实世界是 3D 的，以前人们习惯的界面也是拟物的，所以在进行扁平化设计时可能会出现的一个风险就是 “过于扁平”，导致用户的不适应，而分层设计就是解决这个问题的方法，把一个物件放在另一个物件的上方，充分利用纵向的层次，帮助用户理清不同物件之间的关系，把注意力放在特定的位置。,4.移动互联网终端界面与交互设计模式概括与创新,动态效果,设计中动态效果的使用可以促进用户的参与，并适当强调某些元素。 动态效果可以将用户的注意力吸引到特定区域，或者让他们不要注意某个区域。通过视觉上的反馈，它可以增加用户的参与度，取悦用户，甚至让他们感到惊叹。,OVER,