移动平台设计规范.ppt

UI平台设计规范,尺寸规范之IOS篇,01尺寸及分辨率,iPhone界面尺寸：320*480640*960640*1136750*13341080*1920iPad界面尺寸：1024X*7682048*1536单位都是PX（像素，网页UI与移动端UI分辨率一般都只要72）设计的时候不是每一个尺寸都做一套，一般采用750X1334的尺寸进行设计,02界面基本组成元素,iPhone的APP界面一般都由4个元素组成,状态栏,导航栏,主菜单栏,内容区域,我们通常是采用750*1334的尺寸进行设计，在这个尺寸下个各个元素也有尺寸要求,我们经常说的信号、运营商、电量等显示手机状态的区域，高度：40PX显示我们当前界面的名称，包含想要的功能或者页面的跳转按钮，高度：88PX页面的主菜单，提供整个应用的分类内容的快速跳转，高度：98PX展示应用提供的相应内容，布局变更非常频繁，高度为：1108PX,状态栏,导航栏,主菜单栏,内容区域,状态栏高度：54PX（40PX）导航栏高度：132PX（88PX）标签栏高度：146PX（98PX）,iPhoneplus的尺寸不一样,在最新的IOS风格中，苹果已经慢慢弱化状态栏的存在，将状态栏和导航栏结合在一起，不过尺寸的高度还是没变的，界面设计的时候需要多注意一下,03风格延伸,04字体大小,iPhone上的字体英文为HelveticaNenu，一种纤细简单的文字，中文为一种比较细黑体（常用苹方体、华文细黑、冬青黑体，不是微软雅黑）A：导航栏标题：medium34px；B：按钮和表头：light34pxC：表格标签：Regular28px；D：Tab页图标标签：Regular20px,我的音乐：34PX我的、淘歌、发现：30PXMUXXX：34PX本地音乐：30PX泡沫、邓紫棋：24PX,举例说明,05图标尺寸大小,图标都按照最大1024*1024进行设计，之后按照比例进行缩小、调整高光部分与圆角不需要做，ios系统自动生成程序应用120*120PX主屏幕114*114PXSpotlight搜索87*87PX标签栏75*75PX工具栏和导航栏44*44PX,05IOS黄金栅格系统,苹果开发了一套黄金比例栅格系统，可以在你的图标上很好地确定元素的尺寸和对齐。不过，即使在原生应用的图标上，苹果的设计师们也没有严格按照这个栅格系统来设计。所以，如果你的图标元素不严格完全对齐栅格可以表现得很好，那么打破规则约束，自由发挥吧。,06UI的布局概述,1、可点击对象的区域：尺寸不要小于44*44px;2、将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从左到右的用户来说，更贴近屏幕左侧位置容易引起关注的；3、利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来说，更能吸引目光，看上去更加重要；,07UI的手势交互概述,07UI的手势交互概述,尺寸规范之Android篇,01尺寸及分辨率,Android界面尺寸：482*800720*12801080*1920Android的尺寸比IOS要多很多套，建议采用720*1280这个尺寸进行设计Android的APP界面与IOS基本相同：状态栏、导航栏、主菜单栏以及中间的内容,状态栏高度：50PX导航栏高度：96PX主菜单栏高度：96PX内容区域高度：1038PXAndroid规范没有IOS标准，现在很多Android系统手机去掉了实体键，把功能键也放在了屏幕中，高度与菜单栏高度