标注及切图.pptx

;添加文字 添加文字 添加文字 ;在项目设计之初，就该进行项目归档整理。（项目名称+版本序列） 标注工具：Mark man、Pc Cook等 切图工具： Cutterman ??一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高。 ;页面标注 标注是重中之重，工程师能不能完整的还原设计稿，很大一部分取决于标注。 不需要每一张效果图都进行标注，你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可。;颜色标注：建议标注颜色时，两种色值表达都标上(16进制RGB)。 标注内容： 1.文字需要提供：字体大小(px),字体颜色； 2.顶部标题栏的背景色值，透明度； 3.标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值； 4.内容显示区域的背景色(如果是全部页面白色，那就和工程师沟通)； 5.底部Tab bar的背景色值。 ;标注区域： 所有元素统一距离屏幕最左24px(全局性的数据可以直接和工程师沟通，也可以标注，推荐标注出来) 1.标题栏：背景色，标题栏文字大小，文字颜色(不再赘述)； 2.Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了; 3.菜单图标： 图标的大小和图标的可点击区域不一定一致 也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。; 比如X宝购物车页面的小图标，实际切图要比图标大（88PX） 这种类型的图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。 至于图标的间距，因为有些时候可能 设计师不能完全做到1px不差，所以基本不用标，交给工程师让他们去处理，其实等距排列的图标不需要标间距，因为工程师还要动态适应不同的屏幕，标了间距也是白标（适当也要做沟通）;4.模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。 5.图片+文字：这个应该比较常见，只标注一个单位(图+文)就可以了。 图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软件里除了横屏撑满的图，基本上所有的图片都要标注宽高。 图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出。  Tab Bar： 这个位置其实比较特殊，你可以单独标注图标大小+文字大小；还可以图标文字算作一个控件，整个切出来； 有些单位的工程师的习惯是用整个的，也就是图标+文字算作一个ICON，所以这种情况就基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下，看他是什么开发习惯)。;列表页类型的标注问题;普通的列表有两种方法： 1.标出行高，行内元素居中； 2.标出行内元素，元素上下间距，确定行高； 每种元素的位置如何确定： 通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元素距离左侧100px。 标注这个东西没有固定的方法，工程师的开发习惯不同，标注方法也不同。 所有的页面标注总结起来就是：标文字，标图片，标间距，标区域；;切片资源的输出;② ?切图尺寸应该提供几套？;理论上，为了达到最好的视觉效果，应该输出三套尺寸，推荐输出三种尺寸的切片资源。 但有的公司要求给两套尺寸就可以，也就是@1x @2x的两种尺寸， ③共用资源的图片，输出一张就可以，如下图;④切片的输出格式 文件→存储为Web所用格式;图格式：PNG 24，PNG 8，JPG 在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG。 欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8；;⑤图标的点击区域;所以现在做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难，会很不灵敏。 ⑥图片图标的不同状态 每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。 ;切片的命名规则 命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但是大致还是有迹可循的，一般是： 切片种类+功能+图片描述（可有可无）+状态.png 名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接。 举个例子：一个首页的处于正常状态的确定按钮 btn_sure_nor.png btn