美文网首页
标注命名规范

标注命名规范

作者: 东边有只喵 | 来源:发表于2018-04-02 18:13 被阅读0次

咳咳... 升级打怪啦...

前言:规范的命名方式可以提高客户端程序员的开发效率和团队协作。

标识符号命名原则:尽可能用最少的字符而又能完整的表达标识符的含义。

此文主要从3方面来叨叨:

一、切图的基本认识

二、切图的文件整理

三、切图的命名规则

一、基本认识

1,切图是什么?

在app中切图,与在web中切图大致是一样的。开发同学在实现过程中,需要计算好每一个元素的位置,然后再调用我们切好的图进行填充。

2,切图的格式要求

一般元素切图png24,启动或引导页切图png8

3,iOS和Android分别需要几套切图?

iOS屏幕精度分成Retina和非Retina2种,而Android的屏幕精度主要分为mdpi 360 ,   hdpi 480 ,     xhdpi 720   3种

4,iOS和Android切图分别命名格式?

在这五套切图种,提供一套最大的,可以辛苦开发同学通过常用比例自动缩小到其余4套。

通常我们常用的切图最大精度切图,就是android中的xhdpi=iOS的retain@2x这两套

不论何种方法,一定要保证设计元素的4PX原则

二、文件整理

掌握好整理文件和上传的方法,有一份清晰的切图文档,能高效地开展开发和视觉之间的沟通

如何整理我们的切图,从两方面来

1.正确精准的命名(参照切图命名 前缀+位置、组件、用途+后缀)

2.归纳切图类别

我们完成的页面有几十个,每个页面又有零零散散的图标,把他们一个个拿出来,必定有很多重复标注。在iOS中要求的icon又大多是44px的,所以很多都是可以在不同页面里通用的,学会归纳也能提升效率。

· 通用文件归纳法:比如类目icon,你可以把这些常用的类目图标,都整理在一个文件包中。只要是用到类目的,哪怕是不同的页面,开发也能在一个文件包中找,

· 控件归纳法

像一些常用的控件,比如navi,toolbar,setting,tab-bar等,也可以整理成一个通用的切图包

3.一个页面一个包

纵使我们归纳总结,但零零散散的切图,不可能完全分类。于是剩下的一些,我们就需要按照一个页面也个文件包的方式,来整理切图,这样不管是开发要拿,或是你要更新,都在这个统一的地方交接就行了

4,切图时注意点击区域

切图时可以把点击区域一起切,并在页面标注上相应的标明

三、切图命名

Android切图用“_”分割,iOS切图命名用“-”分割

切图的命名分为三部分:前缀+(位置、组件、用途)+后缀

下面区分一下什么是前缀;什么是位置、组件、用途;什么是后缀?

· 前缀:用来快速知道切图的类别

如:ic——icon    

      bg——background

      btn——button

      di——divider

      img——image

      cl——color

· 位置,组件,用途

common:公共标识 (img_commom_bg共同背景)

tab:选项卡( ic_tab_setting设置)

notify:状态栏,通知栏 (btn_notify_download通知栏下载按钮)

dialog对话框(bg_dialog_blur模糊化的对话框背景)

menu菜单(bg_menu_save保存菜单背景)

anim用于动画(img_anim_loading01   loading动画第一帧)

pop用于弹出框(img_pop_bg弹出框背景)

mask用于遮罩层(img_dialog_mask对话框上层遮罩)

circle圆圈(img_circle_avatar圆形头像)

· 后缀:用奥表示切图的颜色,透明度,状态等    后缀状态的命名最好为全拼

normal 默认状态    

例:btn_cancle_normal取消按钮默认状态

pressed按下状态    

例:btn_cancle_pressed取消按钮按下状态

focused获得焦点    

例:btn_cancle_focused取消按钮获得焦点,高亮时

selected选中状态   

例:btn_cancle_seleced取消按钮选中时

enabled不能点击    

例:btn_cancle_enabled取消按钮不可用

white白色               

例:bg_white白色背景

tra 透明度               

例:bg_banner_green_tra30 banner背景绿色透明度30%

level层次,水平      

例:img_status_level60状态为60的时候

相关文章

  • 标注命名规范

    咳咳... 升级打怪啦... 前言:规范的命名方式可以提高客户端程序员的开发效率和团队协作。 标识符号命名原则:尽...

  • 适合各厂使用的 MySQL 团队开发规范,太详细了,建议收藏!

    数据库对象命名规范 数据库对象 数据库对象全局命名规范 数据库命名规范 表命名规范 字段命名规范 索引命名规范 视...

  • 安卓的切图规范

    Android UI 切图命名规范、标注规范及单位描述 很多UI设计师做APP切图都会有两套,一套是Android...

  • 代码书写规范

    res命名规范: src中命名规范: 习惯命名:

  • 一份详尽的移动端UI设计规范(全是干货哦!)

    文章中汇总了包括切图、 标注、 字体 、图层命名等很多干货信息 移动端UI设计规范 http://blog.csd...

  • Android开发中的优化方案

    一、命名规范 代码规范先从命名规范开始,Android的命名规范主要涉及:Java源代码,xml文件,图片资源。 ...

  • Swift--规范编程

    命名规范 注释规范 声明 代码排版 命名规范 常用命名方法 匈牙利命名,一般只是命名变量,原则是: 变量名 = 类...

  • Flutter 代码规范

    命名规范 命名规范中包括了文件以及文件夹的命名规范,常量和变量的命名规范,类的命令规范。Dart 中只包含这三种命...

  • 入门13 CSS综合

    CSS编码规范 命名规范:语义化标签优先;基于功能命名、基于内容命名、基于表现命名;简略、明了、无后患 书写规范:...

  • 规范文档

    1.命名规范2.注释规范3.代码规范4.目录规范 1.命名规范 通用规范通用规范是在整个项目中,所有的命名都需要遵...

网友评论

      本文标题:标注命名规范

      本文链接:https://www.haomeiwen.com/subject/aivxhftx.html