保姆级教程!超详细的UI切图命名规范优设网

较短的单词可以通过去掉“元音”形成缩写。

较长的单词可以以单词的头部几个字母形成缩写。

还有一些约定成俗的英文单词缩写。

通用切图命名:组件_类别_功能_状态@2x.png

举例:tabbar_icon_home_default@2x.png

(对应中文:标签栏_图标_主页_默认@2x.png)

模块特有切图命名:模块_类别_功能_状态@2x.png

举例:bill_icon_search_pressed@2x.png

(对应的中文为:账单_图标_搜索_默认@2x.png)

「控件/组件」:比较独立的可以操作界面元素。如状态栏、搜索栏、弹出窗口等。

「模块」:一般指页面中的部分区块,也有指背景图。如背景、按钮、icon都是模块。

「功能」:一般指的是页面或者模块中,需要操作或点击的某个点,如上图,发现页中的搜索icon。

「状态」:一般指当前切图的状态区分,像按钮的话,有默认状态、点击时状态、按下状态、不可点击状态等,网页上按钮还有悬停状态。

注意:所有命名只能为小写英文字母,不要为了好看或者像平时打英语一样,首字母是大写之类的,也不可以为中文,不然对于开发来说,是没有意义的,因为他们还是得自己再改一遍。

注意:ios切图需要在命名后加上@2x、@3x后缀名,安卓的切图不需要加,不过有些安卓开发需要切图后缀加上尺寸。

组件(系统控件库)

资源类型

功能命名

常见状态

界面命名

位置排序

注:所有命名全部为小写英文字母。

我们的目标是让开发直接拿我们的切图进行使用,不能够随意修改名称,但是我们要知道,开发小哥哥的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的。所以命名全部用小写的英文字母是最基本的规则。

启动界面

启动图片:default.png

启动:logodefault.png

如:default.png\defoult@2x.png\default-568@2x.png

输入框:login_input.png

输入框选中状态:login_input_pre.png

导航栏按钮(nav)命名

nav_功能描述.png

如:nav_menu.png\nav_menu_pre.png(同按钮选中前后两种状态命名)

按钮命名(btn可重复使用按钮)

一般:normalbtn_xxx_nor.png

点击:highlightbtn_xxx_hig.png

不能点击:disabledbtn_xxx_disa.png

按下:pressedbtn_xxx_pre.png

选中:selectedbtn_xxx_sel.png复数选择出现机会不高

btn_功能属性或色彩均可.png

如:btn_blue.png\btn_blue.9.png蓝色按钮

其他命名

图标:icon_xxx.png

图片:pic_xxx.png或是img_xxx.png

照片:pho_xxx.png

左侧导航命名leftbar_功能描述.png

如:leftbar_info.png\leftbar_info_pre.png个人中心

底部选项卡按钮(TabBar)

命名Tab_功能描述.png

如:tab_set.Png\nav_set_pre.png设置

主页命名

命名home_功能属性+描述.png

ps:描述可用英文或拼音开头字母组合等

列表页命名规则

命名List_功能属性+描述.png

如:list_menu_collect.png列表页收藏按钮

以上是总结了切图的命名规范,之后再详谈切图规范。

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

THE END
1.你还在管app叫「诶屁屁」吗?英文里的四种缩写形式「诶屁屁」的错误,其实是因为不了解英文中的几种缩略方式。 大家中学在学语法的时候都学过 “abbreviation” 这个词,也就是「缩写」。但是我们没有被告诉的是,abbreviation 亦有广义与狭义之分。广义的 abbreviation 所包含的,除了狭义的 abbreviation之外,尚有contraction,acronym,initialism等形式,而这些缩略形式的读法https://www.jianshu.com/p/792a46f417b3
2.MVPVIP……这些常见的英文缩写你知道它的全称吗?你是不是经常见到 EMS, DIY, MVP 这些英文缩写呢?或许你知道它们的意思,但是你知道它们的全称吗? 俗话说:知己知彼才能百战百胜。下回看到了全称我们也能迅速反应出这是神马才是这些缩写最好的打开方式,赶快来学习吧~ 1. CET 大学英语考试 (College English Test) https://www.tingclass.net/show-564-394277-1.html
3.gmp常见英文缩写(通用8篇)篇3:gmp常见英文缩写 为了使语言简练而对词语加以简化、缩略成了新词语产生的途径之一。将一个词缩短是现代英语的一种普遍构词现象[5]。而在刚刚过去的20世纪, 科学技术的飞速发展, 新事物、新概念、新技术层出不穷, 大大超过了以前若干个世纪。社会生活节奏空前加快, 国际间的交往比过去任何时期都更频繁, 所有https://www.360wenmi.com/f/file3vhnz1xp.html
4.17个最常用的摄影缩写词,单反上的英文全搞定!火速收藏在摄影中给,我们常用到一些英文缩写,例如AWB,IS,RGB即使对于经验丰富的摄影师,这么多的缩写也会比较困惑。下面是摄影中常用到的英文缩写,希望可以对你有所帮助。 A 光圈优先通常缩写为A或者Av,这将会允许你调整光圈值,相机会调节快门速度,从而达到正确的曝光。 AF AFhttps://www.douban.com/note/692676942/
5.数学符号与术语缩写大全一些英文词的标准缩写 dsg333的专栏 6789 有些词可能共用一些缩写。带星号的缩写或词来源于PeopleSoft标准。 The following standard word abbreviations should be used in naming records, fields, and SQRs: Word(s) Abbreviation Description Abbreviate Abb 常见的英文缩写 calm365的专栏 1万+ 常见的英文缩写https://blog.csdn.net/qwertyupoiuytr/article/details/53997666
6.酒店常用中英文缩写6篇(全文)发短信常用的英文缩写 第4篇 我们常用首字母缩写,此外,单独的字母也可能取代听起来类似的单词。看看这些例子: OIC - Oh I see BFN - Bye for now LOL - Laughing out loud ASAP - As soon as possible BTW - By the way JK - Just kidding https://www.99xueshu.com/w/filebyei3bw5.html
7.英语单词的一般缩写规则JackYang辅音结尾:英文单词缩写一般以辅音结尾,而不以元音结尾。例如,“American”缩写为“Am”,而不是“Ame”或“Amer”;“Medicine”或“Medical”缩写为“Med”;“European”缩写为“Eur”等。但也有例外,如“Science”缩写为“Sci”,这可能是因为元音“I”之后又是元音“E”的缘故。 https://www.cnblogs.com/BlogNetSpace/p/18293404
8.生物学杂志投稿指南题名应简洁恰当,中文题名不宜超过20个汉字,英文题名也应尽量控制在10个实词,尽量避免不常见的缩写。英文题名仅首单词的首字母大写(专有名词除外)。每篇论文(包括文献和摘要)不超过6000字为宜。来稿应有中英文题名、中英文摘要(摘要要求300~500字,以第三人称表述)、中英文关键词 (一般选择通用性强的词, 3~5个http://www.swxzz.com/CN/column/column6.shtml