本文主要为了给想了解命名规范的朋友解解惑, 切图的命名规范给人的第一印象就是全英文, 看不懂, 让很多人望而却步, 当你有所了解之后, 你就会发现其实没那么复杂
一. 概述
一款产品的落地, 必将先经历过需求分析产品定位项目拟定功能分析原型设计设计稿输出, 接下来再到开发, 切图标注是设计与开发需要沟通的步骤之一
问题 1: 切图与标注是什么?
切图: APP 切图是实现设计效果的重要环节, 开发们在实现的过程中需要计算好各个元素的位置, 排布, 然后再调用我们切好的图进行填充其存在是为了程序提高产品的开发效率和团队协作
标注: 标注能够帮助其他团队理解设计页面的布局关系模块大小颜色与字体规范等等
注意: 区分 iOS 与 Android 的规范
问题 2: 为什么要制定规范?(规范存在的意义)
1. 方便修改与迭代
对于项目而言, 产品的优化迭代是必要的, 除非打算放弃治疗
有很多人对于文档的命名是这样的:
遇到突发情况, 比如你完成了设计后, 突然要你改动哪个 icon, 要找起来也是相当麻烦养成良好的命名习惯很重要, 比如可以利用版本命名, 亦或时间命名都可以更清晰地标明
2. 方便更快捷查找
对于个人而言, psd 文件有时候需要修改, 整齐规范的 psd 文档是不是在修改图层的时候更容易找到该图层呢?
以上来自网络, 图层命名没有固定性
3. 方便设计团队沟通
如果设计团队有一套完整的设计规范, 那是再好不过如果没有这样完整设计系统, 那么我们就得自己通过沟通制定一套规范, 才能让沟通更加高效建议可以多看看网易 GoogleQQ 等企业的设计规范进行学习
4. 方便程序开发沟通
曾经与程序员沟通过需求, 有些程序员需要你切好图, 标注好, 命名好给他们, 有些程序员只需要你的设计档, 他们自行切图标注, 所以设计时与开发沟通尤为重要但是无论如何, 规范的命名是最有效的沟通
二. 关于切图命名与标注的那些事
像以前的设计输入都是手动输出, 如今有了各种软件与插件, 给设计师提供了更高效与快捷的方式去解决切图问题但是软件只是辅助特性, 某些模块的切图利用软件插件并不能满足程序所需要的尺寸, 这时候还是需要人工来切图
这里安利下个人工作中使用的应用
标注与切图工具
PxCook(像素大厨): 是一款 pc/mac 上的软件, 个人经常使用, 具有与 ps 衔接的切图, 标注也比较方便快捷, 还能直接导入 psd 文档与图片, 自动识别当前像素比例判断是什么设备
Cuttman: 是一款运行在 ps 中的插件, 能够自动将你需要的图层进行输出, 方便你在 pciosAndroid 等端上使用本人使用过, 是比较小也快捷的插件
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. 数据一定要效验, 例如: 字符型转数字型, 如果转换失败一定要有缺省值; 服务端响应数据是否有效判断
来源: http://sc.chinaz.com/info/180303205604.htm