BACK >
关于切图命名与标注的那些事
作者:吾诺翰卓    浏览次数:641    日期:2018-03-01

像以前的设计输入都是手动输出,如今有了各种软件与插件,给设计师提供了更高效与快捷的方式去解决切图问题。但是软件只是辅助特性,某些模块的切图利用软件插件并不能满足程序所需要的尺寸,这时候还是需要人工来切图。

这里安利下个人工作中使用的应用。

标注与切图工具

PxCook(像素大厨):是一款pc/mac上的软件,个人经常使用,具有与ps衔接的切图,标注也比较方便快捷,还能直接导入psd文档与图片,自动识别当前像素比例判断是什么设备。

高端网站设计

Cuttman:是一款运行在ps中的插件,能够自动将你需要的图层进行输出,方便你在pc、ios、Android等端上使用。本人使用过,是比较小也快捷的插件。

Sketch其实在输出资源这一块也挺方便,不过个人工作上用的最多还是Photoshop,喜欢的朋友可以自行研究。

在设计过程中要注意:旧版设计文件千万别删!这是很重要的point,希望所有设计同胞重视,千万别揣摩你的公司上层、领导还是甲方需求,因为你永远也预料不到他们最终决定会不会就是第一版。(不过这里的前提是,保留还不错的设计,摒弃掉自己都认为不足的部分)

三. 命名规范

命名规范并不是唯一的,工作上需要的命名也不相同,但是唯一的目的就是要清晰。以下的命名规则为工作中较为常用的三种规则,为大家罗列出来。

命名规则——命名也就是需要告诉开发,文件是什么、在哪里、第几页、什么状态。

切图命名英文缩写三个原则:

较短的单词可通过去掉「元音」形成缩写。

较长的单词可取单词的头几个字母形成缩写。

此外还有一些约定成俗的英文单词缩写。

三种命名规则

以下三种命名规则供大家参考,具体需求还是要和开发沟通。

1. 产品模块_类别_功能_状态.png

高端网站设计

例:发现_图标_搜索_点击状态

2. 场景_模块_状态.png

高端网站设计

例:登录_按钮_默认状态

3. 产品模块_场景_二级场景_状态.png

高端网站设计

按钮_个人_设置_默认状态

名词解析

「场景和二级场景」:一般指app的一级页面与二级页面。例如:个人页-场景,个人页里的设置页-二级场景。

「模块」:一般指页面中的部分区块,也有指背景图。如背景、按钮、icon都是模块。

「功能」:一般指的是,页面或者模块中,需要操作或点击的某个点。如上图,发现页中的搜索icon。

「状态」:一般指当前切图的状态区分,像按钮的话,有默认状态、点击时状态、按下状态、不可点击状态等,网页上按钮还有悬停状态。

注意:所有命名只能为小写英文字母,不要为了好看或者像平时打英语一样,首字母是大写之类的,也不可以为中文,不然对于开发来说,是没有意义的,因为他们还是得自己再改一遍。

注意:ios切图需要在命名后加上@2x、@3x后缀名,安卓的切图不需要加,不过有些安卓开发需要切图后缀加上尺寸。

杭州吾诺瀚卓总部高端网站设计