切图、标注篇

对于一个新手而言，我之前花一周多的时间做完了一套共计五十页的网页项目，期间遇到了很多问题（切图不知道切啥，标注不知道咋标等等 哈哈），现在将这些问题归纳总结一下，方便提高以后的工作效率。

一、前提声要：

我所在的公司电脑不能联网只能在远程上联网，所以蓝湖不能使用，切图标注只能使用单机的软件 这里标注我使用的MARKMAN。

二、工作流程：

当拿到原型图后开始梳理原型图看看有没有逻辑性错误（否则后面还得改），然后与领导沟通当没有错误时开始布局设计。（此间：因没有实战经验导致很多类似的布局像素没有一致致使标注很乱后期非常麻烦）。再此提醒大家：1做任何板块都拉好辅助线做到像素明确（因为后面会有很多板块是重复的并且后期都需要标注，所以不能同一样式的板块像素不同！）2编组命名（方便后面切图命名）3设计的时候要组件化、套路化（能重复的就重复：包括按钮、字体、输入框、对话框、浮层、表格、布局等等 否者后面标注会超级乱）4切图的时候要规范命名并且将不同类别打组使得内容清晰（方便与程序员对接）5紧接着就是标注。

 

（整个过程可以撰写一个规范文档，将设计重复的内容列出来便于对接与规范自己的设计）

例如：

 

三、切图细节：

（除了文字、表格等等程序员等能够实现的功能外其他全部需要切图）在这期间 我采用最多的方法是 直接右键导出png（这样的好处是图片有遮罩效果的、有投影、发光、等等各种效果的都可以一键导出），还有一办法就是你切出没有效果的图片，后期标出即可（自我感觉比较麻烦）

切好图之后就是命名了-我的方法是按照每一个布局打好组命名，将里面的控件按照大白话命名的 哈哈 但是我查询了一下命名的原则 虽然都是手机界面的，还是简单记录一下。 

举一些例子：

标签栏图标命名：tab（控件）—ico（功能描述）—（状态描述）.png

工具栏图标：toolbar控件—ico—（功能描述）—（状态描述）.png

启动页:_568h@2x.png    Launchimage_logo.png

登录页背景：login_bg.png

登录页icon：login_logo_png

登录页按钮：login_btn_nor.png

登录页按钮选中状态：login_btn_pre.png

主页：home—ico——（功能描述）—（状态描述）.png

列表：list_ ico——（功能描述）—（状态描述）.png

以下是常见的名称：

 以下是：文件夹的命名

以上这些我目前还没用到，我自己的感觉是用中文命名清楚让前端能看懂就可以了（我也不知道这样对不对 哈哈 有什么隐患的话希望大家能给我提出来）

 四、标注篇

a标注原则：从左到右、从上到下、就近原则、禁止跨层标注

b可以按照间隙、大小、样式分开标注（前提是标注点太多的时候、如果不多可以标注一张页面上）

c居中的元素可以不标注

d通栏的宽度可以不标注

1、文字标注

字号、大小、颜色 必须有 其他还包括段落文字的透明度、行高（如果文字设定范围需要标注热区或者最多多少个字符）

2、按钮标注

a颜色形状单一的可以只标注不切图

b如果不单一需要（标注渐变颜色、高度、宽度、圆角的属性、描边的大小颜色、投影的（不透明度、色值、距离、大小））或者说直接切图（标出宽高、间距即可）

c对于一些控件、如button按钮、列表，随时问自己有没特殊状态、如按压状态、无效状态、选中状态等等、如果你没有标明，开发会默认没有这些效果。

d标注按钮需要标注左右的间距 以及按钮的高度即可 （宽度需要适配）

3、热区标注

标注时划分的热区是切图热区 保证同一层级icon切图大小一致。

一般情况下图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例为4：3、16：9。很多设计师不理解适配的原理，所以很容易将一些控件给出固定的尺寸大小。（这些我也不是太理解目前）

4、表格标注

表格需要标出表格的大小、间隙，几行几列以及每一列的宽度 （均分则不用）

 

 

设计结束了，发现了一块好用的离线标注软件（pxcook）。。。。

先安装插件-adobe air-再安装pxcook（支持ios、安卓、web）

 最后、建议平常的文件夹这样分类：原型图、设计稿、标注稿、切图、GUI。

感谢大家的观看，如果有哪些错误希望提出来，感谢。