搜索
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*44PX05IOS黄金栅格系统苹果开发了一套黄金比例栅格系统，可以在你的图标上很好地确定元素的尺寸和对齐。不过，即使在原生应用的图标上，苹果的设计师们也没有严格按照这个栅格系统来设计。所以，如果你的图标元素不严格完全对齐栅格可以表现得很好，那么打破规则约束，自由发挥吧。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系统手机去掉了实体键，把功能键也放在了屏幕中，高度与菜单栏高度一样：96PX小建议:不管是IOS系统还是Android系统，字体大小设定都不是最死的，我们可以在PC端做好效果图后导到自己的手机里看一下实际效果。