移动设备的界面设计尺寸规范.pdf

移动设备的界面设计规范 作图的时候确保都是用形状工具 （快捷键：U）画的，这样更方便后 期的切图或尺寸变更 关于页面比例，请按照 ios 以及 android 制作两套尺寸页面 IOS 篇 1、尺寸及分辨率 iPhone 界面尺寸： 320×480、640×960、640×1136 （以上单位都是像素，至于分辨率一般网页 UI 和移动 UI 基本上都是 72 ppi ） 本次使用 640×1136 的尺寸设计。 2、界面基本组成元素 iPhone 的 APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中 间的内容区域 这里取用 640× 1136 的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸： 状态栏：信号、运营商、电量等显示手机状态的区域，其高度为： 40 px 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为： 88 px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为： 98 px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为： 910 px P.S. 在最新的 iOS8 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导 航栏合在了一起 3、字体大小 iPhone 上的字体英文为： HelveticaNeue 至于中文， Mac下用的是黑体 - 简， Win 下则为华文黑体。 字体大小请保持在 24px~36px 之间（具体大小，请作图后放置手机中观看实际效果 ） 4 、按钮大小 ：点击区域（包括按钮 +空白区域）需要 44*44px Android 篇 1、尺寸及分辨率 Android 界面尺寸： 480 ×800、720×1280、1080×1920… （单位：像素） Android 比 iPhone 的尺寸多了很多套，本次设计建议取用 720×1280 这个尺寸，这 个尺寸 720×1280 中显示完美，在 1080×1920 中看起来也比较清晰；切图后的图片文件 大小也适中，应用的内存消耗也不会过高。 2、界面基本组成元素 Android 的 APP 界面和 iPhone 的基本相同：状态栏、导航栏、主菜单栏以及中间的 内容区域。 Android 中我们取用 720×1280 的尺寸设计： 状态栏高度为： 50 px 导航栏高度为： 96 px 主菜单栏高度为： 96 px 内容区域高度为： 1038 px （1280-50-96-96=1038 ） 若 Android 功能键移到了屏幕中，高度也是和菜单栏一样的： 96 px 3、字体大小 Android 上的字体为： Roboto ，是 android 原生的字体，与微软雅黑很像。 字体大小范围为 16px~32px （具体大小，请作图后放置手机中观看实际效果） 4 、按钮大小 ：点击区域（包括按钮 +空白区域）需要 44*44px 要求篇 1、突出设计重点，减少识别误区 2、界面简洁，体现重要信息 3、使用普通接受习惯，不轻易尝试新的设计 4 、需要标注尺寸，颜色值，字体大小 5、psd 文件图层清晰，名称分组清楚，删除不必要的图层 6、logo 图标请单独提供，尺寸 512*512，输出矢量图 7、需要提供按钮等点击效果样式设计图