UI设计之标注与切图

标注

内容：

1、文字：大小、字体、粗细、颜色、不透明度

2、布局控件属性：控件高度、背景色、透明度、描边和圆角大小

3、间距：图标文字列表等都间距、控件之间都距离和左右边距

4、列表：列表都高度、颜色、内容上下间距等

5、段落：行距

6、全局属性：如导航栏文字大小、颜色页面左右边距、默认间距

切图

无法用代码实现的内容需要切图，主要切@2x和@3x图

注意：

1、切图输出格式：png24位、png8位、jpg3种格式

2、同一模块内，切图大小应保持一致

3、切图输出大小必须保持为偶数（为了适配，改变图片大小时不会出现小数情况）

4、为了减小包的大小、所有切图尽量压缩后再给开发

下载安装蓝湖

进入蓝湖官网点击下载插件：https://lanhuapp.com/

点击下载都插件图标即可自动安装到Photoshop软件中

然后打开Photoshop，点击【窗口】-【扩展功能】-【蓝湖】

打开蓝湖后需要输入蓝湖得账户密码进行登录，如果没有账号需要在蓝湖官网先进行注册

登录之后选择设计尺寸、上传的项目等

选择“选中的画板”，在图中拉出参考线，然后沿着参考线画出画板，创建画板后换回移动工具

给需要切图的图标进行命名

切图的命名格式

页面-位置-功能简品-状态

注意：

1、不能使用中文命名

2、不能以数字开头

标记切图

标记切图时可设置固定大小

不是同一个图层的图

切图前需要选中图层进行分组，然后选择该分组进行切图

标记完成后选中画板点击上传

上传成功后到浏览器蓝湖上找到相应的项目查看上传的画板，点击上方的切图图标可以下载切图

常用英文命名单词