ios设计规范版

1、«ios设计规范doc版«ios设计规范doc版一款APP的设计稿从设计到切 图 第一部分 项目立项阶段 在项目设计之初，就该进行项 目归档整理，一般是是项目名称+版本序列”第二部分Photoshop IOS的各种分辨率。1.640*960 iPhone 4时代的尺寸，我最开始用这个尺寸设 计，还是拟物的时代呢（基本上现在应该没人用这个尺寸设计 了吧）；2.640*1136 iPhone5/5S/5c , 一更新，咱们设计也得 跟着与时俱进（应该还有人用这个设计尺寸），进入扁平的时代了 ；3.750*1334 iPhone6目前是我做设计稿的设计尺寸，iPhone的尺寸，向

2、下可以适配 iPhone4, iPhone5,向上可以 适配iPhone6 plus;我记得iPhone6推由后，我问我的设计总 监（从业12年）应该用什么尺寸设计，他是就用iPhone6的尺寸吧，好适配，切由来就是 2x 了，上下都能照顾到。所以，我推荐做设计稿的时候使用iPhone6的尺寸进行设计。iPhone6的尺寸其实相比于以前的 5来说很多地方并没有 变化，只是高度也就是内容显示区域发生了变化。下面是IPhone 6的空白文档，我建立了参考线。里面已经设置好了参考线，文档建立之初就设置好参 考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。上下的参考线很容易设置，因为

3、是根据 iPhone自身系统 设置的，左右的参考线我习惯设置为 24px,也就是显示内容 距离边框的距离。这不是绝对的，究竟是设置为左右 30Px还是24Px比较好， 通过对国内国外各种 APP的对比，觉得24Px更适合一些， 不宽不窄，这个完全是设计师个人的设计习惯，所以不要当 成什么规范，第三部分 标注 下面讲标注的问题，页面怎么标，标哪里，可能我涉及不到所有类型页面，但举一反五 足够了 ；切片输生以及切片命名我们下期再说（如果有错误，请一定要及时帮我指由，我不想误人子弟）。标注是重中之重，工程师能不能完整的还原设计稿，很 大一部分取决于标注；如果不清楚你该怎么标，别怕丢人（我知道有些设计

4、师，特别是刚接触工作的设计师并不敢张嘴去 问），一定要和工程师沟通！包括怎么标，怎么切。每个工程师实现效果的方法不同，我在这里所说的，是 我的标注习惯，也就是我们工程师的开发习惯，但应该适用 于大部分的设计师和工程师。不需要每一张效果图都进行标注，你标注的页面能保证 工程师开发每个页面的时候都能顺利进行即可；当然，这要 看跟你配合的工程师的习惯，比如我现在搭档的两位IOS工 程师，一位要求我全都要标注，另一位要求我标注代表性页面就好（记得标注之前一定要沟通清楚 ）。这里要说一句，PxCook虽然可以自动读取颜色，但是还 不能对PSD文档里设置的透明度读取， 所以如果你用了透明 色，推荐你用文字

5、标注直接写由来原色值以及透明度。基本上我并不使用 PXCook里面的颜色标注工具，而是使 用文字标注工具，因为要标识两种色值，PxCook只能显示一种色值。一般我的习惯是 PS和标注软件同时打开， 因为有时候标 注软件并不能完全的把 PSD文件里的东西标注由来， 所以标 注也要灵活运用，如果无法标注，就到 PS里查看一下，然 后再使用文字标注说明一下。如果你有更好的标注软件，欢迎推荐给我以及更多人！标注颜色是使用16进制，还是RGB:都用得到，要看实现什么东西。索性把16进制和RGB都给标由来，也省的工程师一遍遍 找了。建议标注颜色时，两种色值表达都标上（16进制3.菜单图 标：图标的大小和图

6、标的可点击区域不一定一致，也就是说，图 标可以很小，但是工程师可以把可点击区域设置的很大，这 样标注和切图的时候就要注意，你标注的是可点击区域的大 小，切图切的也是可点击区域的大小，也就是用透明区域去 补上。在设计的时候就要考虑可点击区域的范围，比如X宝购物 车页面左侧的小圈，可点击区域要比实际小圈尺寸大很多。这种类型的图标需要标注图标点击区域大小，图标距离 屏幕最左最右以及上下的距离。至于图标的间距，因为有些时候可能设计师不能完全做到 1px不差，所以我基本不标，交给工程师，设置为等距离（还是要和你的搭档沟通怎么去标注）；4.模块间隔： 这个位置其实不是太重要，我习惯标注上这里，麻烦能少则

7、少。5.图片+文字：这个应该比较常见，只标注一个单位 （图+文）就可以了。 图片需要标注宽高，因为工程师要设置图片区域，从后 台调取，可以这么说，软件里除了横屏撑满的图，基本上所 有的图片都要标注宽高。图片距离上下左右的距离，文字大小颜色，这里的文字 其实算两个控件，标题文字以及说明文字，需要单独标由。Tab Bar这个位置其实比较特殊， 你可以单独标注图标大 小+文字大小；还可以图标文字算作一个控件，整个切由来； 我们工程师的习惯是用整个的，也就是图标+文字算作一个ICON ,所以我基本不怎么标注单独的图标（这里可以和你的 搭档去沟通一下，看他是什么开发习惯）。关于列表页类型的标注问题普通的

8、列表有两种方法（去问你的搭档，他喜欢用什么方法 ):1.标由行高，行内元素居中；2.标由行内元素，元素上下间距，确定行高；每种元素的位置如何确定：通常标注的都是元素距离屏幕最左侧的距离，比如上图的 图标元素距离左侧 24px ,文字元素距离左侧 100Px。标注这个东西没有固定的方法，工程师的开发习惯不同， 标注方法还不同呢。该怎么标注虽然可以在网上找到方法，但那不一定适合 你，一定和自己的搭档勤沟通，方法是死的，人是活的。所有的页面其实都差不多，标文字，标图片，标间距， 标区域；这一期的东西，我希望可以举一反三的去运用，总 归就是那点东西，练习着标注半天就能熟练了。第四部分切片资源的输生来说

9、说切片资源的输生问题 吧，我询问了工程师关于切图方面的问题，整理由来，所以 本期应该还算是干货；这一期不会教你一个页面一个页面的切，毕竟授人以鱼不如授人以渔，我会把一些需要注意的 地方，奥些规范以及方法写由来，希望可以做到举一反三。前几期讲了准备工作和标注的问题；切图其实和标注一 样，没什么特别固定的规范，工程师的开发水平不同，要求 的切图也不同所以切之前务必要和你的工程师搭档沟通一 下，该如何去切才能配合他的开发。全局性的切图常见问题 你的所有设计尺寸，包括图 形效果，应该尽量使用偶数。技术开发使用的尺寸是设计稿像素尺寸的一半，也就是 说，如果你用24Px的字体，技术那边就是设置为12px;

10、所以标注的时候务必使用偶数，为了保证最佳的设计效果，避 免由现0.5像素的虚边。 切图尺寸应该提供几套？ico_car.png （iPhone2G,3G, 3GS 使用）ico_car2x.png （iPhone4/5/6 优先力截止匕 尺寸图片，不是必须使用这个尺寸，是优先加载调用这个尺 寸。）ico_car3x.png （iPhone6 plus使用的尺寸）可以简单的 理解为倍数关系（其实是为了满足不同分辨率， 我觉得不用过 于深究），如果你使用IPhone 6尺寸做设计稿，那么切片输由 就是2x,缩小2倍就是1x,扩大1.5倍就是3x 了。理论上为了达到最好的视觉效果，你应该输由三套尺寸

11、， 我推荐输由三种尺寸的切片资源。我的工程师搭档要求我给两套尺寸就可以，也就是1x2x的两种尺寸，因为我们没有 6 plus的测试机，所以看不 到效果，据他说应该不会太失真，但是为了保证效果，我还 是给三套尺寸。1x 2x 3x是开发工具 Xcode软件需要的 UI资源， 命好名称后，IOS设备会自动的选取合适尺寸。实现原理我觉得设计师不用掌握的太过深入，知道这些足够了。共用资源的图片，输由一张就可以类似这种重复的按钮之类的，只要提供一张共用的资源就可以了；上面的文字 是技术写上去的。理论上按照最佳视觉效果，你应该提供多尺寸的图片； 但通常我只提供最大尺寸的一张图片即可，这一点要和你的 搭档沟

12、通好，却问他需要什么方式。切片的输由格式 文件-存储为Web所用格式PNG 24, PNG 8, JPG在JPG和PNG两种格式图片大小相差不 是很大的情况下，推荐使用 PNG;如果图片大小相差很大， 使用JPGo欢迎页面，ICON 一定要使用PNG格式，在不影响视觉 效果的前提下，可以考虑使用 PNG 8 ; PDF , SVG IOS原生 支持的两种矢量图片格式，但是支持的一般，并不能保证 100%把所有图片效果渲染由来；所以，为了保险起见，推荐还是使用位图吧。如果以后技术提升，100%支持SVG和PDF这种矢量格式 图，那个时候也许不用提供这么多套尺寸了 图标的点击 区域最小点击区域问题

13、：IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44point（点），在设备上1 point等于1像素，所以转换成像素就 是44*44像素，换算成物理尺寸大概是7mm左右吧（人机工效学研究中得由的结论：用食指操作，触击范围在 7mm左右合适；用拇指操作，范 围在9mm左右合适）。据说这个尺寸下，不容易由现误操作，误点击；小于这个 尺寸，点击就会变的有些不太准确，一向注重用户体验的苹 果公司定义这个最小点击尺寸也不是没根据的 所以现在来做设计，为了图标精致，你可以把图标做的小一些，但 是切图输生的时候，要考虑用户点击难易度的问题，所以， 切图的时候，涉及到需要点击的小图标的时候，普通屏幕

14、还 是切44Px大小，高清屏就需要切 88px,不够的地方用透明 区域补全，否则用户点击的时候会比较困难，会很不灵敏。图片图标的不同状态每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输生。比如按钮有正常（normal）,按下（pressed）,选中（selected）, 禁用（disabled）等多种状态。关于切图的工具，其实我用的最多的还是 PS;之前推荐 过的标注切图工具 PxCook,它标注很好用，但是切图只能 输由1x, 2x两种尺寸，如果没要求你提供 3x,这个软 件还是非常方便的，如果你在做图的时候就命好名称，把 PSD直接放到这个软件里，就可以直接导由切片了 （自

15、己去研 究研究）。切片的命名规则 命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但是大致 还是有迹可循的，一般是：切片种类+功能+图片描述（可有可无）+状态.png名称应使 用英文命名（中文不识别，推荐小写字母 ），不要以数字或者 符号当作开头，以下划线连接。举个例子：一个首页的处于正常状态的确定按钮 btn_sure_nor.png btn_sure_nor2x.png切片种类是按钮（btn）;功能是确定 （sure）;状态是normal（正常）我通常是以这种命名方式进行 命名，如果你的公司有设计文档，去看看之前留下的命名规 范，如果没有，那就去问工程师吧。T

16、ab bar（底部栏）说说Tab bar这里，因为比较特殊。如果单纯的只有图标，自然是只切图标就好了 ；早上和工程师沟通，这里该怎么切，工程师给的建议是如果是图标+文字的模式，图标最好单独切，文字后面程序加上去。另外记住，同一模块的图标切片大小保持一致，上图的 四个图标本身尺寸并不相同，但是切图的时候你需要切由相 同尺寸的阴影大小，便于工程师开发使用。以下是常用命名，这是我的命名习惯，并不是规范，所以要灵活（原谅我不堪的英语水平吧，实在不知道就用拼音命 名）。你可以把这张命名规则的图片另存下去，没事可以看一记住，该怎么切图，还是要和你的工程师搭档去沟通一 下。关于切片，就讲到这里吧，有什么疑问

17、可以留言 这 系列不是教你一张一张怎么切，而是说的一种工作方法和注 意事项，希望可以帮到你 第五部分 工作常用数据 这 篇是系列的完结篇，我会把一些工作常用数据写一写，如果 你想知道更加全面的数据，那就百度一下iOS人机指导手册， 我相信做为设计师的你有自己查找资料的能力，因为各项数 据过多，我想写但是没那么多时间。APP的设计不是读几篇文章就能明白的，想要完整掌握 设计方法和规范，唯一的途径还是多做多练多交流；设计来 不得半点马虎和偷懒，所以还在设计之路上前进的人，务必 要努力。不懂和不会的，不能怕丢人，务必要去向你的搭档请教。你需要使用的字体：如果是用Mac设计的小伙伴，直接就用苹果黑体字

18、就好了； 不过用 Windows的就没那么幸运了， PC上还没和iPhone默 认字体效果完全一样的字体，通常都是拿其他字体代替。苹果丽黑 Hiragino Sans GB W3（普通）/W6（粗体）比较接 近iPhone字体的一款字体，这是我之前一直使用的设计字 体。黑体-简STHeitiSC-Light Mac里面拷由来的苹果黑体,比较贴近iPhone手机字体，目前在用。关于字体大小的问题顶部操作栏文字大小：34-38px 标题文字大小：28-34px 正文文字大小：26-30px 辅助性文字大小：20-24px Tab bar 文字大小：20px 文字大小只是一个范围，这要根据设计的视觉

19、效果来 决定，不要死记硬背，但是切记，字体大小要用偶数。你需要知道的IPhone设计尺寸（这里是一个整屏的尺寸包 括了状态栏）320*480 iPhone 3GS （我没见过3GS实体机，只 在网上见过图片，但你需要知道这个尺寸）640*960 iPhone4/4s （4时代的设计尺寸）640*1136 iPhone 5/5s/5c （5时代的 设计尺寸，虽然现在由来6/6 plus,但还有人再用这个尺寸设 计）750*1334 iPhone 6 （目前最新的设计尺寸，基本上现在 做IOS的APP设计，用这个的应该最多 ）1242*2208 iPhone6 plus （这是标准分辨率，也就是设计需要的尺寸；另外还存在物理分辨率是1080*1920 ,这并不需要深入理解。plus还涉及到横屏，横屏是是没有状态栏的，设计横屏时 可以参考iPad的设计模式）这些IOS系统的用户操作界面， 你只需要在百度 “IOS用户操作界面 PSD素材”就可以下载 到，里面包含了各种控件 （图标，按钮，系统各项尺寸），我会把它们的JPG图片上传，因为 PSD文件过大，而我不喜欢上传网盘，这里不再赘述了。你需要提交的启动页面这是开发工具Xcode提供的Launchimage(启动页面)的各项尺寸，咋一看是不是吓一跳？ 工程师是按照IOS的系统版本来设置的，但你是设计师，你 是按照IPho