春节专题!App 设计系列之切图的命名规范与标注说明 - 2017最新注册送白菜网-注册送白菜无需申请

春节专题!App 设计系列之切图的命名规范与标注说明

2018/02/19 6684

写这篇文章也是总结了以前刚接触的时候遇到的问题,还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文,看不懂,让很多人望而却步,当你有所了解之后,你就会发现其实没那么复杂。本文主要为了给想了解命名规范的朋友解解惑。

一. 概述

一款产品的落地,必将先经历过需求分析、产品定位、项目拟定、功能分析、原型设计、设计稿输出,接下来再到开发,切图、标注是设计与开发需要沟通的步骤之一。

问题1:切图与标注是什么?

切图:APP切图是实现设计效果的重要环节,开发们在实现的过程中需要计算好各个元素的位置,排布,然后再调用我们切好的图进行填充。其存在是为了程序提高产品的开发效率和团队协作。

标注:标注能够帮助其他团队理解设计页面的布局关系、模块大小、颜色与字体规范等等。

注意:区分iOS与Android的规范。

问题2:为什么要制定规范?(规范存在的意义)

1. 方便修改与迭代

对于项目而言,产品的优化迭代是必要的,除非打算放弃治疗。

有很多人对于文档的命名是这样的:

遇到突发情况,比如你完成了设计后,突然要你改动哪个icon,要找起来也是相当麻烦。养成良好的命名习惯很重要,比如可以利用版本命名,亦或时间命名都可以更清晰地标明。

2. 方便更快捷查找

对于个人而言,psd文件有时候需要修改,整齐规范的psd文档是不是在修改图层的时候更容易找到该图层呢?

△ 以上来自网络,图层命名没有固定性

3. 方便设计团队沟通

如果设计团队有一套完整的设计规范,那是再好不过。如果没有这样完整设计系统,那么我们就得自己通过沟通制定一套规范,才能让沟通更加高效。建议可以多看看网易、Google、QQ等企业的设计规范进行学习。

4. 方便程序开发沟通

曾经与程序员沟通过需求,有些程序员需要你切好图,标注好,命名好给他们,有些程序员只需要你的设计档,他们自行切图标注,所以设计时与开发沟通尤为重要。但是无论如何,规范的命名是最有效的沟通。

二. 关于切图命名与标注的那些事

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

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

标注与切图工具

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后缀名,安卓的切图不需要加,不过有些安卓开发需要切图后缀加上尺寸。

四. 基本命名规范一览

名词命名:

  • bg(backgrond): 背景
  • nav(navbar):导航栏
  • tab(tabbar):标签栏
  • btn(button):按钮
  • img(image):图片
  • del(delete):删除
  • msg(message):信息
  • icon:图标
  • content:内容
  • left/center/right:左/中/右
  • logo:标识
  • login:登录
  • register:注册
  • refresh:刷新
  • banner:广告
  • link:链接
  • user:用户
  • note:注释
  • bar:进度条
  • profile:个人资料
  • ranked:排名
  • error:错误

操作命名:

  • close:关闭
  • back:返回
  • edit:编辑
  • download:下载
  • collect:收藏
  • comment:评论
  • play:播放
  • pause:暂停
  • pop:弹出
  • audio:音频
  • video:视频

状态命名:

  • selected:选中
  • disabled:无法点击
  • highlight:点击时
  • default:默认
  • normal:一般
  • pressed:按下
  • slide:滑动

五. 题外话-Android编码规范建议18条

分享来自网络知识。 适合手机app设计师和android 工程师阅读。

  • java代码中不出现中文,最多注释中可以出现中文。
  • 局部变量命名、静态成员变量命名只能包含字母,单词首字母除第一个外,都为大写,其他字母都为小写。
  • 常量命名只能包含字母和_,字母全部大写,单词之间用_隔开。
  • 图片尽量拆分成多个可重用的图片。
  • 服务端可以实现的,就不要放在客户端。
  • 引用第三方库要慎重,避免应用大容量的第三方库,导致客户端包非常大。
  • 处理应用全局异常和错误,将错误以邮件的形式发送给服务端。
  • 图片的处理。
  • 使用静态变量方式实现界面间共享要慎重。
  • Log(系统名称、模块名称、接口名称,详细描述)。
  • 单元测试(逻辑测试、界面测试)。
  • 不要重用父类的handler,对应一个类的handler也不应该让其子类用到,否则会导致message.what冲突。
  • activity中在一个View.OnClickListener中处理所有的逻辑。
  • strings.xml中使用%1$s实现字符串的通配。
  • 如果多个Activity中包含共同的UI处理,那么可以提炼一个CommonActivity,把通用部分将由它来处理,其他activity只要继承它即可。
  • 使用button+activitgroup实现tab效果时,使用Button.setSelected(true),确保按钮处于选择状态,并使activitygroup的当前activity与该button对应。
  • 如果所开发的为通用组件,为避免冲突,将drawable/layout/menu/values目录下的文件名增加前缀 18.数据一定要效验,例如:字符型转数字型,如果转换失败一定要有缺省值; 服务端响应数据是否有效判断。

总结

其实管理文件也是门学问,它能让你省下没必要耗费的时间与精力。沟通也是能够帮助你更好的与团队,不同部门更高效地推进项目的开展。

每个公司都有自己的命名和输出模式的,以上是和大家交流下自己工作中的方法和心得,希望对大家有所帮助。如果觉得以上有什么补充的,欢迎大家留言告知,不胜感激。

作者微信号:JJ865477301

欢迎关注作者的微信公众号:「JAYGO」

「超全面!设计新手必备的切图指南」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计2017最新注册送白菜网,设计师必备: http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.madebygrip.com/app-name-conventions-slice

sketch UI 界面设计 转场动效 平面设计 交互设计师 设计师 扁平化设计 设计师专访 排版布局 职场 用户体验设计 设计流程 视觉设计 素材下载 配色 web前端开发 海报设计 AI教程 设计理论 设计规范 产品设计 字体下载 神器下载 设计趋势 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 注册送白菜官网 在这里