手机客户端切图命名规则

UI系列干货-切图命名我们都知道UI设计切图是最重要的设计输出物，切图输出的命名规范不规范也直接影响到工程师对设计效果的还原度。

网上也有很多这样的教程，大多比较笼统，今天我们就从两个方面0基础教你学会切图和命名的方法。

切 图一、设计切图的原则设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。

其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作量。

所以我们要在程序里放置多套切图，然后让程序判断「主人」的手机是什么型号，显示不同的切图。

这样才能够完美地呈现给用户最好的体验。

最后，输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。

所以切图输出应当做到切图精准、便与协同和压缩大小。

1. 切图资源尺寸必须为偶数众所周知，智能手机的屏幕大小都是偶数值，比如iPhone 7的屏幕分辨率是750*1334 px。

切图资源尺寸必须为双数，是为了保证切图资源在工程师开发时是高清显示。

因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机上被分为两份各0.5px。

所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果差距甚远。

图片2. 图标切图输出多个平台尺寸在切图资源输出中，图标切图输出是至关重要的部分。

在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。

为了适配大分辨率手机（例如iPhone 7plus），图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iPhone 手机的各种plus版本（后边会有文章专门讲解关于适配的问题）。

@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。

浅析app设计：切图的命名规范与标注说明写这篇文章也是总结了以前刚接触时候遇到的问题，还有来自其他朋友的提问。

关于切图的命名规范给人的第一印象就是全英文，看不懂，让很多人望而却步，当你有所了解之后，你就会发现其实没那么复杂。

本文主要为了给想了解命名规范的朋友解解惑。

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

问题1：切图与标注是什么？切图：APP切图是实现设计效果的重要环节，开发们在实现的过程中需要计算好各个元素的位置，排布，然后再调用我们切好的图进行填充。

其存在是为了程序提高产品的开发效率和团队协作。

标注：标注能够帮助其他团队理解设计页面的布局关系、模块大小、颜色与字体规范等等。

注意：区分iOS与Android的规范问题2：为什么要制定规范？（规范存在的意义）1、方便修改与迭代对于项目而言，产品的优化迭代是必要的，除非打算放弃治疗。

有很多人对于文档的命名是这样的：遇到突发情况，比如你完成了设计后，突然要你改动哪个icon，你要找起来也是相当麻烦。

养成良好的命名习惯很重要，比如可以利用版本命名，亦或时间命名都可以更清晰地标明。

2、方便更快捷查找对于个人而言，psd文件有时候需要修改，整齐规范的psd文档是不是在修改图层的时候更容易找到该图层呢？（以上来自网络，图层命名没有固定性）3、方便设计团队沟通如果设计团队有一套完整的设计规范，那是再好不过。

如果没有这样完整设计系统，那么我们就得自己通过沟通制定一套规范，才能让沟通更加高效。

建议可以多看看网易、Google、QQ等企业的设计规范进行学习。

4、方便程序开发沟通曾经与程序沟通过需求，有些程序需要你切好图，标注好，命名好给他们，有些程序只需要你的设计档，他们自行切图标注，所以设计时与开发沟通尤为重要。

但是无论如何，规范的命名是最有效的沟通。

二、关于切图命名与标注的那些事像以前的设计输入都是手动输出，如今有了各种软件与插件，给设计师提供了更高效与快捷的方式去解决切图问题。

竭诚为您提供优质文档/双击可除app界面命名规范篇一：app界面切图命名和文件整理规范app界面切图命名和文件整理规范切图命名英文缩写三个原则：1较短的单词可通过去掉“元音”形成缩写2较长的单词可取单词的头几个字母形成缩写3此外还有一些约定成俗的英文单词缩写.第一部分：iosapp界面设计切图命名规范第二部分：手机app切图文件整理和技巧分享篇二：ios和android的app界面设计规范ios和android的app界面设计规范字数876阅读96439评论36喜欢344记录一下ios和andoird的界面设计规范，方便进行标准的产品设计，并与设计师顺畅沟通ios篇界面尺寸设备iphone6plusiphone6iphone5/5s/5ciphone4/4sipad1/2ipa dmini分辨率750×1334px640×1136px640×960px1024×768px1024×768px状态栏高度导航栏高度标签栏高度60px40px40px40px40px20px20px132px88px88px88px88px44px44px147px98px98px98px98px49px49px1242×2208pxipad3/4/air/air2/mini22048×1536pxpaste_image.png图标尺寸设备iphone6plusiphone6iphone5/5s/5ciphone4/4sipad1/2ipadminiappstore程序应用主屏幕spotlight工具栏和标签栏搜索导航栏75*75px44*44px75*75px44*44px75*75px44*44px25*25px22 *22px25*25px22*22px1024*1024px180*180px144×144px87×87px75*75px66*66px1024*1024px120*120px144×144px58*58px1024*1024px120*120px144×144px58*58px1024*1024px120*120px144×144px58*58px1024*1024px90*90px1024*1024px90*90px 72*72px50*50px72*72px50*50pxipad3/4/air/air2/mini21024*1024px180*180px144×144px100*100px50*50px44*44px字体iphone上的字体英文为：helveticaneue至于中文，mac 下用的是黑体-简，win下则为华文黑体，所有字体要用双数字号。

切图命名规范 [命名规范]命名规范版本：编写： 1. 通用命名规则 l 在所有命名中，都应使用标准的英文单词或缩写。

不得使用拼音或拼音缩写，除非该名字描述的是中文特有的内容，如半角、全角,声母、韵母等。

l 所有命名都应遵循达意原则，即名称应含义清晰、明确。

l 所有命名都不易过长，常量变量应控制在规定的长度20以内，函数30以内。

l 所有命名都应尽量使用全称。

l 大小写规则 l 类型标识符是保留字，应当全部小写。

l Win32API类型常常全部大写，并且遵循诸如Windows.pas或其他API单元中关于特定类型名的规则。

l 对于其他变量名，第一个字母应大写，其他字母则大小写交错。

(即：如查变量名由多个单词构成每个词首字母大写) 下面是一些例子： var MyString:string; //保留字 WindowsHandle:HWND;//Win32API类型 I:Integer; //在System单元中引入的类型标识ICount:Integer; //在System单元中引入的类型标识 l 如何定义一个元件类型前缀：从元件类型名中移去T前缀。

例如TButton变成Button。

除了第一个元音，删去所有元音字母。

例如，Button变成bttn，Edit变成edt。

压缩双字母。

例如，bttn变成btn。

如发生冲突，则在某一元件前缀中加入一个元音。

例如在TBatton 元件的前缀中加入元音变为batn，以区别TButton的前缀。

不过，上述规则首先得保证前缀名称必须符合习惯，做到见名知意，如:TDDEClientConv控件的前缀就是一个例外。

注意：元件的前缀是为了表示出元件的类型，是按钮，还是标签等等，因此没有必要为每一个特别元件类建立一个元件前缀，如:TMyButton的元件前缀仍为btn。

2. 常量(Constants)和变量(Variable) 2.1. 常量常量的名称应当能够表达出它的用途。

APP切图详细规范终极指南2015-03-11 分类：UI设计围观31698次我们都知道一套完整的App 通常会有很多张切图，不管是iPhone 需要1x、2x、3x 图档，Android 需要至少3 种hdpi、xhdpi、xxhdpi。

在庞大的切图数量下如何让负责套图的RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。

所以，制定一套非常有效而方便的APP切图命名规范非常有用的。

下面就跟随小编来详细了解APP切图命名的流程和命名规范。

ios切图尺寸规则目前iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是不是感觉好恐怖？但是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~美术交付给开发的资料有1、标注图（以640为宽度尺寸为基准标注）2、 2x切图（以640为宽度尺寸为基准切图）3、 3x切图（以1280为宽度尺寸为基准切图）开发看到这份标注图，可以自己用上面的数字，乘以1.5得出3X的数字。

1.为什么3x切图要以1280来为宽度？其实iPhone6+的尺寸1242*2208作为3X，怎么算都又难记又不能整除，我们直接640*2得到1280跟1242相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差别的。

2.为什么只设宽度？为了保持长宽比例。

iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这不要紧，千万别去改高度，手机屏幕是可以上下滑动的嘛。

不可以滑动必须保证一屏显示的除外，手动去调整好了。

3.为什么开发不是乘以2而是乘以1.5来算尺寸和字号？因为大屏手机就是要显示更多内容而存在的。

纯等比放大界面看起来傻大傻大的，实验证明1.5倍是正好的。

Android切图尺寸规则px（像素）是我们UI设计师在PS里使用的（不解释），同时也是手机屏幕上所显示的（也不解释）dp是开发写layout的时候使用的尺寸单位，sp是开发写layout时关于字体的字号单位，且dp与sp总为1：1关系。

竭诚为您提供优质文档/双击可除iphone6切图规范篇一：ios界面设计尺寸规范ios界面设计尺寸规范一、尺寸及分辨率iphone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。

ipad界面尺寸：1024*768、2048*1536等。

单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。

ps：作图的时候确保都是用形状工具（快捷键：u）画的，这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素iphone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。

640*960的尺寸设计下这些元素的尺寸。

状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px[下图说明：]至于我们经常说的iphone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

ps：在最新的ios7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计ios7风格的界面的时候多多注意下~三、字体大小heitisc（黑体-简，黑体-简的英文名称为heitisc。

heiti为黑体的拼音，sc代表简体中文（simplifiedchinese）），是macosxsnowleopard（版本10.6）包含的简体中文字型，也是iphoneos3.0（版本4.0后改名为ios）及ipodnano第五代以来的预设简体中文字型。

UI切图管理规范1切图命名规范UI切图命名格式为：“aaa_bbbb_cccc”。

其中“aaa”为切图类型；“bbbb”为模块名称；“cccc”为具体名称。

其间用“_”分割。

其他情况：当三级仍无法具体标识切图时，可延伸至四级。

例如“aaa_bbbb_cccc_dddd”。

iOS以在切图命名末位加“@2x”或“@3x”等标识来区分不同像素的同一张图片。

例如：“aaa_bbbb_cccc@2x”、“aaa_bbbb_cccc@3x”。

详见3.1。

Android则以drawable-mdpi，drawable-hdpi，drawable-xhdpi，drawable-xxhdpi等文件夹来区分不同像素的同一张图片。

详见3.2。

2切图类型和格式2.1图标切图命名以“ico”开头；后缀为“png”格式。

例如：首页公告图标切图应命名为“ico_home_notice.png”2.2背景切图命名以“bg”开头；后缀为“png”格式。

例如：首页标题栏背景切图应命名为“bg_home_title.png”。

2.3图片切图命名以“img”开头；后缀为“jpg”格式。

例如：广告栏轮播图应命名为“img_adv_name.jpg”2.4按钮切图命名以“btn”开头；后缀为“png”格式。

按钮一般分为两种状态：点击状态和未点击状态。

例如：缴费页面确定按钮点击状态的切图应命名为“btn_pay_confirm_onclick.png”;未点击状态的切图应命名为“btn_pay_confirm_unclick.png”2.5标签切图命名以“tab”开头；后缀为“png”格式。

标签一般分为两种状态：选中状态和未选中状态例如：首页标签选中状态的切图应命名为“tab_home_onselected.png”未选中状态的切图应命名为“tab_home_unselected.png”3切图尺寸规范3.1iOS尺寸规范3.1.1iPhone界面尺寸3.1.2iPhone图标尺寸3.2Android尺寸规范3.2.1Android SDK模拟机尺寸3.2.2Android图标尺寸3.2.3Android系统dp/sp/px换算表。

iOS界面设计切图小结2013-08-29 21:17:-巧克力.Net-点击数:54更多01.基本尺寸（1）界面实际设计时按：∙iPhone4、4s：640px*960px∙iPhone5: 640px*1136px∙iPad：1536px*2048px(2) 图标：∙1024px*1024px 圆角180px∙提交1024px*1024px 方角png格式图片2.图形部件及字体（1）为显示清晰∙所有图形部件尺寸必须为偶数∙样式中阴影、发光、描边的数值也必须为偶数（2）为方便用户点击∙所有可点击的部件需大于88px*88px∙若图片本身不够，可在切图时补足空白像素例如：（3）为减小程序体积建议尽量使用可平铺图案设计界面（4）苹果默认字体在pc上没有完全一样的字体，Hiragino Sans GB苹果丽黑最相近一般做效果图时，用Hiragino Sans GB（包括中英文）代替即可，也可以用方正黑体代替∙所有字体使用偶数字号进行设计∙苹果丽黑有W3、W6两种粗细的字体附下载地址：苹果丽黑（5）系统可以做到如下字体效果即，向特定方向1px（做效果图时做2px的效果）投影，需给出字体颜色、阴影颜色。

一般不建议按钮上的文字做特殊效果。

如果必要，需将字体和按钮一起切图。

（6）导航栏中的文字一般为40点W63.切图提示(1）所有切图必须为偶数先根据Retina屏幕切图（即640960/6401136/1536*2048），后将切图缩为普通屏幕尺寸。

（有特殊图片需要单独制作）（2）可平铺部件切图时可如下图：带圆角按钮切图时可如下图同理并在效果图中标出具体大小标注软件推荐：dorado（3）导航栏和标签栏下的阴影程序可以自动生成，可不切，如图：若不满意默认阴影效果，可以单独切2px宽的阴影，如图：如有异形阴影如：需切整条阴影，并与攻城师说明。

（4）所有按钮需有两种状态——正常状态和按下状态（6）一般情况下切图格式为png24∙若个别图片jpg 比png 小很多，可用jpg ∙ 但欢迎页、icon 必须为png ，在不影响显示效果的前提下，可以考虑用png84.命名（1）图片命名后缀∙根据Retina 屏幕的切图文件名后加@2x ，普通屏幕尺寸不用加。