UI设计师在设计好界面之后,一些设计图还有位置距离都需要标出,这样程序员在写代码的时候才可以更加方便的进行编写。我们可以用pxcook进行标注用,再用cuterman进行切图,最后根据命名的规则进行命名。pxcook本身也可以进行切图,但是在2x和3x进行切图的时候,需要多次操作,不太方便,而cuterman很好的解决了这个问题。
进入官网,下载软件,pxcook是一个单独的软件,可以标注和切图,但是cuterman是一个插件,在ps里面使用。
下载好之后,点开软件,创建项目
按照需求设置
拖入psd文件,双击打开,可以看见左边的一排工具,常用的有智能标注,还有颜色读取以及热区标注。
用鼠标拖动出现黑线,那么就可以进行标注。
标注的原则:从左到右、从上到下、就近原则、禁止跨层级标注,标注时可以按照位置、大小、样式分开标注、方便后续工作开展,如需要特殊说明需要写note。页面元素居中可以不标。通栏宽度不标注(标签栏、导航栏、安全距离等)。
文字在标注的时候按照字号,而非行高标注。如果文字需要点击要标注热区
关于按钮的标注等颜色单一,形状规矩的图标可以直接标注属性,不切图。浏览量、点赞数量等ICON后面有数字的,需要标注固定图标间距
打开PS,点击窗口,拓展功能,可以找到cuterman
点击之后进行设置,选中安卓的和苹果的按钮,选择2x和3x的,以及有三个x的都要选上。
对需要切图的图层进行建组,建好组之后进行命名,就可以导出了。(命名规则:控件_类别_页面_功能_状态)
点击导出后,过一下,就可以看见出现两个文件夹,一个是安卓的一个是苹果的
点开安卓的之后又会有三个格式的文件夹,之后导出的文件都会在里面显示。
你学会了吗?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.