移动平台设计规范.ppt

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