移动界面交互设计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.移动设备小屏幕与终端特殊性对界面与交互设计的影响,移动设备小屏幕的准确率问题、热区和死角,平板电脑的热区和死角,尽对于那些起到界面导航作用的交互元素(例如“菜单”、“返回”、“关闭”等),以及用来完成分享、收藏、编辑、删除等功能的按钮,通常可以将它们放置
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 移动 界面 交互 设计 ppt 课件

链接地址:https://www.31ppt.com/p-1353719.html