UI——day14.标注切图

1. 适配原则

   适配原则∶文字流式、控件弹性、图片等比缩放

   1. 文字流式：

      文字根据屏幕宽度自动换行

   2. 控件弹性

      左右对齐

   3. 图片等比缩放

   

2. 标注内容

   1. 文字:字体、大小、粗细、颜色、不透明度
   2. 布局控件属性:控件的宽高、背景色、透明度、描边和圆角大小
   3. 间距:图标文字列表等的间距、控件之间的距离和左右边距
   4. 列表︰列表的高度、颜色、内容上下间距等
   5. 段落:行距
   6. 全局属性︰如导航栏文字大小、颜色，页面左右边距，默认间距

3. 页面切图

   1.什么时候需要切图

   Tip:只要是没有办法通过代码来实现的就需要切图

   什么是代码无法实现的呢?

   比如图标，比如经过变形的字体等

   2.切图格式

   1. 切图输出格式: png24位、png8位、jpg3种格式
   2. 同—模块内，切图大小应保持—致
   3. 切图输出大小必须保持为偶数
   4. 为了减小包的大小，所有切图尽量压缩后在给开发

   3.切图如何命名呢?

   页面-位置-功能简拼-状态(home_nav_search_nor@2x.png)

   4.命名常用单词：

   启动页面: default
   顶部导航: nav
   左侧导航: leftnav
   工具栏: toolbar
   状态栏: statusbar
   背景: bg
   按钮: button
   照片: photo
   图片: img
   图标: icon
   个人资料: porfile
   用户:user
   弹出:pop
   返回:back
   刷新: refresh
   删除: delete
   编辑: edit
   下载: download
   内容: content
   广告: banner
   登录: login
   注册: register
   标题: title
   提示信息:msg
   链接: link
   注释: note
   标志: logo
   主页: home
   列表: list
   设置: set
   更多: more
   取消:cancel
   按钮常态:nor
   按钮选中:sel
   按钮突出: hig
   按钮不可用:dis

4. 标注切图的工具

   取消:cancel
   按钮常态:nor
   按钮选中:sel
   按钮突出: hig
   按钮不可用:dis

5. 标注切图的工具

切图工具：cutterman、Pxcook、蓝湖