《IOS设计规范》doc版.doc

一款APP的设计稿从设计到切图 第一部分 项目立项阶段在项目设计之初，就该进行项目归档整理，一般是是“项目名称+版本序列”第二部分 PhotoshopIOS的各种分辨率。1.640*960 iPhone 4时代的尺寸，我最开始用这个尺寸设计，还是拟物的时代呢(基本上现在应该没人用这个尺寸设计了吧)；2.640*1136 iPhone5/5S/5C，一更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了；3.750*1334iPhone6 目前是我做设计稿的设计尺寸，iPhone的尺寸，向下可以适配iPhone4，iPhone5，向上可以适配iPhone6 plus；我记得iPhone6推出后，我问我的设计总监(从业12年)应该用什么尺寸设计，他是就用iPhone6的尺寸吧，好适配，切出来就是2x了，上下都能照顾到。所以，我推荐做设计稿的时候使用iPhone6的尺寸进行设计。iPhone6的尺寸其实相比于以前的5来说很多地方并没有变化，只是高度也就是内容显示区域发生了变化。下面是IPhone 6的空白文档，我建立了参考线。里面已经设置好了参考线，文档建立之初就设置好参考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。上下的参考线很容易设置，因为是根据iPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对的，究竟是设置为左右30px还是24px比较好，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范，第三部分 标注下面讲标注的问题，页面怎么标，标哪里，可能我涉及不到所有类型页面，但举一反五足够了；切片输出以及切片命名我们下期再说(如果有错误，请一定要及时帮我指出，我不想误人子弟)。标注是重中之重，工程师能不能完整的还原设计稿，很大一部分取决于标注；如果不清楚你该怎么标，别怕丢人(我知道有些设计师，特别是刚接触工作的设计师并不敢张嘴去问)，一定要和工程师沟通！包括怎么标，怎么切。每个工程师实现效果的方法不同，我在这里所说的，是我的标注习惯，也就是我们工程师的开发习惯，但应该适用于大部分的设计师和工程师。不需要每一张效果图都进行标注，你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可；当然，这要看跟你配合的工程师的习惯，比如我现在搭档的两位IOS工程师，一位要求我全都要标注，另一位要求我标注代表性页面就好(记得标注之前一定要沟通清楚)。这里要说一句，PxCook虽然可以自动读取颜色，但是还不能对PSD文档里设置的透明度读取，所以如果你用了透明色，推荐你用文字标注直接写出来原色值以及透明度。基本上我并不使用PXCook里面的颜色标注工具，而是使用文字标注工具，因为要标识两种色值，PxCook只能显示一种色值。一般我的习惯是PS和标注软件同时打开，因为有时候标注软件并不能完全的把PSD文件里的东西标注出来，所以标注也要灵活运用，如果无法标注，就到PS里查看一下，然后再使用文字标注说明一下。如果你有更好的标注软件，欢迎推荐给我以及更多人！标注颜色是使用16进制，还是RGB：都用得到，要看实现什么东西。索性把16进制和RGB都给标出来，也省的工程师一遍遍找了。建议标注颜色时，两种色值表达都标上(16进制&RGB)。你需要标注的内容1.文字需要提供：字体大小(px),字体颜色；2.3.顶部标题栏的背景色值，透明度；4.5.标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值；6.7.内容显示区域的背景色(如果是全部页面白色，那就和工程师说一句就好啦)；8.9.底部Tab bar的背景色值。10.因为页面的种类成千上万，我想每种页面都讲一下，但是不现实，所以我希望可以举一反三。下面的是一个比较普通的首页页面，但是基本上一款APP中应该标的元素都有了 一般页面你需要标注这些地方所有元素统一距离屏幕最左24px(这种全局性的数据可以直接和工程师沟通，也可以标注，推荐标注出来)1.标题栏：背景色，标题栏文字大小，文字颜色(不再赘述)；2.Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了;3.菜单图标：图标的大小和图标的可点击区域不一定一致，也就是说，图标可以很小，但是工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，你标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上。在设计的时候就要考虑可点击区域的范围，比如X宝购物车页面左侧的小圈，可点击区域要比实际小圈尺寸大很多。这种类型的图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。至于图标的间距，因为有些时候可能设计师不能完全做到1px不差，所以我基本不标，交给工程师，设置为等距离(还是要和你的搭档沟通怎么去标注）；4.模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。5.图片+文字：这个应该比较常见，只标注一个单位(图+文)就可以了。图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软件里除了横屏撑满的图，基本上所有的图片都要标注宽高。图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出。Tab Bar这个位置其实比较特殊，你可以单独标注图标大小+文字大小；还可以图标文字算作一个控件，整个切出来；我们工程师的习惯是用整个的，也就是图标+文字算作一个ICON，所以我基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下，看他是什么开发习惯)。关于列表页类型的标注问题普通的列表有两种方法(去问你的搭档，他喜欢用什么方法)：1.标出行高，行内元素居中；2.标出行内元素，元素上下间距，确定行高；每种元素的位置如何确定：通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元素距离左侧100px。标注这个东西没有固定的方法，工程师的开发习惯不同，标注方法还不同呢。该怎么标注虽然可以在网上找到方法，但那不一定适合你，一定和自己的搭档勤沟通，方法是死的，人是活的。所有的页面其实都差不多，标文字，标图片，标间距，标区域；这一期的东西，我希望可以举一反三的去运用，总归就是那点东西，练习着标注半天就能熟练了。第四部分 切片资源的输出来说说切片资源的输出问题吧，我询问了工程师关于切图方面的问题，整理出来，所以本期应该还算是干货；这一期不会教你一个页面一个页面的切，毕竟授人以鱼不如授人以渔，我会把一些需要注意的地方，某些规范以及方法写出来，希望可以做到举一反三。前几期讲了准备工作和标注的问题；切图其实和标注一样，没什么特别固定的规范，工程师的开发水平不同，要求的切图也不同所以切之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。全局性的切图常见问题 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12px；所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现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了。理论上为了达到最好的视觉效果，你应该输出三套尺寸，我推荐输出三种尺寸的切片资源。我的工程师搭档要求我给两套尺寸就可以，也就是1x 2x的两种尺寸，因为我们没有6 plus的测试机，所以看不到效果，据他说应该不会太失真，但是为了保证效果，我还是给三套尺寸。1x 2x 3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。实现原理我觉得设计师不用掌握的太过深入，知道这些足够了。共用资源的图片，输出一张就可以类似这种重复的按钮之类的，只要提供一张共用的资源就可以了；上面的文字是技术写上去的。理论上按照最佳视觉效果，你应该提供多尺寸的图片；但通常我只提供最大尺寸的一张图片即可，这一点要和你的搭档沟通好，却问他需要什么方式。切片的输出格式文件存储为Web所用格式PNG 24，PNG 8，JPG在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG。欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8；PDF，SVGIOS原生支持的两种矢量图片格式，但是支持的一般，并不能保证100%把所有图片效果渲染出来；所以，为了保险起见，推荐还是使用位图吧。如果以后技术提升，100%支持SVG和PDF这种矢量格式图，那个时候也许不用提供这么多套尺寸了图标的点击区域最小点击区域问题：IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1 point等于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧（人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm左右合适)。据说这个尺寸下，不容易出现误操作，误点击；小于这个尺寸，点击就会变的有些不太准确，一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的所以现在来做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难，会很不灵敏。图片图标的不同状态每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态。关于切图的工具，其实我用的最多的还是PS；之前推荐过的标注切图工具PxCook，它标注很好用，但是切图只能输出1x，2x两种尺寸，如果没要求你提供3x，这个软件还是非常方便的，如果你在做图的时候就命好名称，把PSD直接放到这个软件里，就可以直接导出切片了(自己去研究研究)。切片的命名规则命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但是大致还是有迹可循的，一般是：切片种类+功能+图片描述（可有可无）+状态.png名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，以下划线连接。举个例子：一个首页的处于正常状态的确定按钮btn_sure_nor.pngbtn_sure_nor2x.png切片种类是按钮（btn）；功能是确定(sure)；状态是normal(正常)我通常是以这种命名方式进行命名，如果你的公司有设计文档，去看看之前留下的命名规范，如果没有，那就去问工程师吧。Tab bar(底部栏)说说Tab bar这里，因为比较特殊。如果单纯的只有图标，自然是只切图标就好了；早上和工程师沟通，这里该怎么切，工程师给的建议是如果是图标+文字的模式，图标最好单独切，文字后面程序加上去。另外记住，同一模块的图标切片大小保持一致，上图的四个图标本身尺寸并不相同，但是切图的时候你需要切出相同尺寸的阴影大小，便于工程师开发使用。以下是常用命名，这是我的命名习惯，并不是规范，所以要灵活(原谅我不堪的英语水平吧，实在不知道就用拼音命名)。你可以把这张命名规则的图片另存下去，没事可以看一看。记住，该怎么切图，还是要和你的工程师搭档去沟通一下。关于切片，就讲到这里吧，有什么疑问可以留言这系列不是教你一张一张怎么切，而是说的一种工作方法和注意事项，希望可以帮到你第五部分 工作常用数据这篇是系列的完结篇，我会把一些工作常用数据写一写，如果你想知道更加全面的数据，那就百度一下iOS人机指导手册，我相信做为设计师的你有自己查找资料的能力，因为各项数据过多，我想写但是没那么多时间。APP的设计不是读几篇文章就能明白的，想要完整掌握设计方法和规范，唯一的途径还是多做多练多交流；设计来不得半点马虎和偷懒，所以还在设计之路上前进的人，务必要努力。不懂和不会的，不能怕丢人，务必要去向你的搭档请教。你需要使用的字体：如果是用Mac设计的小伙伴，直接就用苹果黑体字就好了；不过用Windows的就没那么幸运了，PC上还没和iPhone默认字体效果完全一样的字体，通常都是拿其他字体代替。苹果丽黑 Hiragino Sans GB W3(普通)/W6(粗体) 比较接近iPhone字体的一款字体，这是我之前一直使用的设计字体。黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体，比较贴近iPhone手机字体，目前在用。关于字体大小的问题顶部操作栏文字大小：34-38px标题文字大小：28-34px正文文字大小：26-30px辅助性文字大小：20-24pxTab bar文字大小：20px文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数。你需要知道的IPhone设计尺寸(这里是一个整屏的尺寸包括了状态栏)320*480 iPhone 3GS (我没见过3GS实体机，只在网上见过图片，但你需要知道这个尺寸)640*960 iPhone 4/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(启动页面)的各项尺寸，咋一看是不是吓一跳