赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
3.2K 0 0

写篇文章也是总结以前刚接触的时遇到的问题,还有来自其他朋的提问。关切图的命名规范第印象是全英文,看不懂,让很多望而却步,你有所了解后,你会发现其实没那么复杂。本文主要为了想了解命名规范朋友解解惑。

一. 概述

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

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

切图:APP切图是实现设计效要环节,开发们在实现过程需要计算好各个元素位,排布,然后再调用我们切好图进填充。其存在是为了程序提高品开发效率和团队协作。

标注:标注能够帮助其他团理设计页面的局关系、模块大小、颜与字规范等等。

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

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

1. 方便修改与迭代

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

很多人对于文档的命这样的:

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

遇到突发况,比如完了设后,突然改动哪icon,找起也相当麻烦。养良好的命习惯很重,比如可以利用版本命,亦或时间命都可以清晰标明。

2. 方便捷查找

对于人言,psd文件时候需修改,整齐规范的psd文档不修改图层的时候易找到该图层呢?

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

△ 以自网络,图层命固性

3. 方便设团队沟通

如果设团队一套完整的设规范,那再好不过。如果这样完整设系统,那么我们就得自己通过沟通制一套规范,能让沟通加高效。建议可以多看看网易、Google、QQ企业的设规范行学习。

4. 方便程序发沟通

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

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

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

像以前设计输入都是手动输出,如今有了各软件与插件,设计师提供了更高效与快捷去解决切图问题。是软件是辅助特性,某些模块切图利用软件插件并不能满足程序所需要尺寸,这时候是需要工来切图。

里安下个人工中使用的应用。

标注与切图工具

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

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

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

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

Sketch其在输出资源一块也挺方便,不个人工上用的最还是Photoshop,喜欢的朋以自行研究。

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

三. 命名规范

命名规范并不是唯,工作上需要命名也不相,是唯目是要晰。以下命名规则为工作较为常用三规则,为大家罗列出来。

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

切图命英文缩写三原则:

  • 短的单词通去掉「元音」形成缩写。
  • 较的单词可取单词的几字母形缩写。
  • 此外还有一些约定成俗的英文词缩写。
三种命名规则

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

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

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

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

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

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

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

3. 产模_场景_二级场景_状态.png

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

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

名词解析

「景和二景」:一指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」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:搜索体系由哪些元素组成?有哪些常见的功能模块?如何建立和优化搜索体系?这篇超全面的总结让你系统认识搜索体系。 ...
搜索
从16年刚到 ofo 的时候我心中就有一个巨大的疑惑,像 ofo 这样一个简单的出行类产品还能怎么设计呢?纵观周围很多出行类 App...
情感化设计
Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为「启发式」,因为它们是广泛的经验法则,而不是特定的可用性...
交互设计
iPhone 诞生之后,世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分...
iPhone
虽然近期令人眼前一亮的新工具没有那么多,但是很多已有的工具在迭代更新的新版本,也非常的强大,令人眼前一亮。这些工具从...
干货合集
越来越多的品牌和企业开始在自家的网站和营销推广中使用吉祥物,今天的文章我们结合实例来聊一聊吉祥物的运用。 在设计的过...
ui设计
如今很多 UI 设计师不是正在做动效,就正在学着做动效。 动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果,使用 ...
UI动效
编者按:用户访谈是了解用户最常见也最重要的一种方式,但是为什么有团队做的用户访谈并没有发挥它应有的作用呢?造成这个结...
UX设计