移动界面交互设计选编.pptVIP

移动互联网终端操作界面与交互设计研究 梅雪 目录 1 移动设备界面尺寸和基本组成元素 2 移动设备小屏幕与终端特殊性对界面与交互设计的影响 3 移动互联网终端文字的字体与编排 4 移动互联网终端界面与交互设计模式概括与创新 1.移动设备界面尺寸和基本组成元素 移动设备界面尺寸 VS. 移动设备基本组成元素 1.移动设备界面尺寸和基本组成元素 移动设备界面尺寸 iPhone的APP界面一般由四个元素组成，分别是： 状态栏、导航栏、主菜单栏、内容区域 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的 P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起 1.移动设备界面尺寸和基本组成元素 移动设备界面尺寸 iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。 1.移动设备界面尺寸和基本组成元素 移动设备界面尺寸 1.移动设备界面尺寸和基本组成元素 1.移动设备界面尺寸和基本组成元素 Iphone图标尺寸 1.移动设备界面尺寸和基本组成元素 Android手机尺寸 1.移动设备界面尺寸和基本组成元素 Android手机尺寸 1.移动设备界面尺寸和基本组成元素 Android手机图标尺寸 1.移动设备界面尺寸和基本组成元素 Android手机系统分辨率占有率 1.移动设备界面尺寸和基本组成元素 Android 1、尺寸及分辨率 Android 界面尺寸：480x800、720x1280、1080x1920... Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸，这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。  这样的手机屏幕尺寸是：5寸 即屏幕对角线是5英寸。 2、界面基本组成元素 Android 的 APP 界面和 iPhone 的基本相同：状态栏，导航栏、主菜单栏以及中间的内容区域. 1.移动设备界面尺寸和基本组成元素 Android HOLO风格 将下方的主菜单移动到了导航栏下面，这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。 1.移动设备界面尺寸和基本组成元素 移动设备界面尺寸 iPhone的APP界面一般由四个元素组成，分别是： 状态栏、导航栏、主菜单栏、内容区域 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的 P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 移动设备小屏幕的准确率问题、热区和死角 与界面元素的布局 手机的移动特征对设计的影响 F式布局 用户浏览网页的一般模式： 先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)——“知道是什么” 然后扫描一下页面的顶部（导航栏，搜索栏）——“了解用法” 下一步，用户的视线下移，开始阅读下一行的内容。 用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 WEB端界面元素的布局 F式布局 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 WEB端界面元素的布局 F式布局- 眼动热点图 热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 WEB端界面元素的布局 F式布局- 从上到下 从左到右 按照逻辑，我们得出以下结论： 品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。 在内容结构中，图片更容易获得关注。 用户浏览完图片后，下一个关注点便是标题。 用户会大致的浏览文本，但是往往不会通读。 2.移动设备小屏幕与终端特殊性对界面与交互设计的影响 WEB端界面元素的布局 2.移动设备小屏幕与终端特殊性对