• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 春节专题!App 设计系列之切图的命名规范与标注说明

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

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含切图工具,切图标注,命名规范,经验分享,设计标注等相关知识,希望在学习及工作中可以帮助到您

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

一. 概述

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

问题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.数据一定要效验,例如:字符型转数字型,如果转换失败一定要有缺省值; 服务端响应数

您可能想查找下面的文章:

  • 春节专题!App 设计系列之切图的命名规范与标注说明
  • UI实战教程!从零开始做APP 系列之切图标注篇

相关文章

  • 2017-08-06UCenter Home 站点添加统计代码
  • 2018-08-23如何做出用户不反感的错误提示?来看这篇总结!
  • 2018-08-23酷站两连发!日本免费人物图库+全能型在线GIF编辑优化网站
  • 2018-08-23杜蕾斯让人高潮迭起的海报,你也能快速做出来!
  • 2017-08-06Web开发中盒子居中的几种方法
  • 2018-08-23用品牌基因法,三步帮你搞定图标设计!
  • 2017-08-06淘宝店铺鼠标经过放大效果跟幻灯片的使用原理差不多
  • 2018-08-23超全面的移动端UI 设计规范整理汇总
  • 2018-08-23水彩自学第二集:水彩纸常见问题及测评
  • 2018-08-23这个博主靠P图收获了100多万粉丝,原因竟然是…

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
    • 看似简单的几个动效,在APP中实现过程并不简单
    • 提高易用性!设计师应该了解的“用户记忆理论”
    • .html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别
    • 电商大招!三步教你搞定情人节活动专题页设计及玩法!
    • CSS--overflow:hidden在项目实例中使用心得分享
    • 网站设计经验 建设网站常犯错误汇总
    • 网站使用单页设计还是多页设计?这篇文章帮你理智分析
    • 免费高效!用 Paddy 让你的 Sketch 学会自动排版!
    • 印象深刻!日本有哪些让人称赞的设计细节?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有