和设计规范要点.pdf

相信很多人都在开发设计 APP 时会遇到很多界面上的问题，要以多大尺寸来设计？分 辨率是多少？该怎么切图给开发等等 下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们 所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循 一个原则，便捷开发、自适应强的开发模式 IOS 篇 一、尺寸及分辨率 iPhone 界面尺寸： 320*480 、640*960 、 640*1136 iPhone6 ：4.7 英寸 (1334 ×750) ，iPhone6 Plus ：5.5 英寸 (1920 ×1080) 设计图单位：像素 72dpi 。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手 机来设计，比较方便预览效果，一般用 640*960 或者 640*1136 的尺寸来设计，现在 iphone6 和 plus 出来后有很多人会使用 6 的设计效果。 如果是我来做的话，我会使用 640 ×1136 ，对 plus 做单独的修改适配，因为 plus 的屏 幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法 的话希望大家可以分享一下。 Ps：作图的时候确保都是用形状工具 (快捷键： U)画的，这样更方便后期的切图或者尺 寸变更。 二、界面基本组成元素 iPhone 的 app 界面一般由四个元素组成，分别是：状态栏 (status bar) 、导航栏 (navigation) 、主菜单栏 (submenu) 、内容区域 (content) 。 这里取用 640*960 的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。 状态栏 (status bar) ：就是我们经常说的信号、运营商、电量等显示手机状态的区域， 其高度为： 40px 导航栏 (navigation) ：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮， 其高度为： 88px 主菜单栏 (submenu ，tab) ：类似于页面的主菜单，提供整个应用的分类内容的快速跳 转，其高度为： 98px 内容区域 (content) ：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高 度为： 734px 至于我们经常说的 iPhone5/5s 的 640*1136 的尺寸，其实就是中间的内容区域高度增 加到 910px 。 PS：在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航 栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计 iOS7 风 格的界面的时候多多注意下 ~ 三、字体大小 iPhone 上的字体英文为： HelveticaNeue 。至于中文 Mac 下用的是黑体， Win 下则为 华文黑体 ( 最新字体称为黑体 - 简 ) 。 下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。 四，切图 切图是 APP 设计中的一个重要过程，关系到 APP 的界面实现，及各种适配性还有各种 性能 IOS 在没 6plus 前，我们只需要提供两种图，普通图及视网膜屏幕图。 以 640 ×1136 （640 ×960 是一样的）做的设计图的话就会好办一点。直接出设计图上 的原大小图标，比如我们命名一个图片叫 img-line.png ，我们给开发的图就要改变这 个名字叫 img-line@2x.png 就是在后缀名前加上 @2x 表示视网膜屏的图， iPhone4 的 还需要把这个图尺寸按比例缩小 50% ，得到正真的 img-line.png 。然后把这两个图移 交给开发， iPhone6 的图在规范里是与 5s 使用的是一样的，也是 @2x 图。有些 UI 则 需要做适当的适配，比如拉长，拉高，这个开发会去做。 对于 IPhone6 plus 的话范里给出