设计切图与页面标注
时间：2023-10-03 14:54:01 | 来源：网站运营
时间：2023-10-03 14:54:01 来源：网站运营
设计切图与页面标注：
页面切图
切图原则：- 切图资源尺寸必须为双数
- 切图输出考虑适配
- 为了提升APP使用速度，尽量降低图片文件大小
- 可点击部件应当注意其点击区域不小于88px
- 可点击部件要把相关状态都切图输出
切片的输出格式：- 文件：web
- 位图：png24，,png8，jpg
- 矢量图：PDF，svg
切图命名规则：
组件_类别_功能_状态@2x.png
eg:tabbar_icon_home_defalt@2x.png
模块_类别_功能_状态@2x.png
eg:mail_icon_search_pressed@2x.png
2倍图：icon_alipay@2x.png——iphone4/4s/5/5s/6/6s/7
3倍图：icon_alipay@3x.png——iphone6p/6sp/7p
mac/window——JPGEmini
windows——PNGoo
mac——ImageAlpha
页面标注
- 文字：字体大小，字体颜色
- 布局控件属性：控件宽高，背景颜色，透明度，描边，圆角大小
- 列表：列表高宽，列表颜色，列表内容上下间距
- 间距：控件之间的距离，左右边距
- 段落文字：字体大小，字体颜色，行距
- 全部属性：如导航栏文字大小，颜色，左右边距，默认间距等
Mac——sketch插件measure
windows——pxcook/markman
前段时间在优设网看到一篇文章，作者说他习惯用三个页面来标注
- 横向布局：解释元素左右的内外间距和横向宽度
- 纵向布局：解释元素的上下间距和高度
- 视觉样式：字体、字号、行高、颜色、透明度、圆角……
这样的标注可能会让开发们泪流满面吧
在线咨询
