手机APP切图命名规则

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。

AppUI命名常见规范1、常见界⾯、控件、功能、状态命名集合：APP产品经理、APP设计师、APP开发⼯程师，包括H5前端开发⼈员都可以记住的⽂件命名规范。

界⾯命名整个主程序App搜索结果Search results活动Activity信息Messages ⾸页Home应⽤详情App detail探索Explore⾳乐Music软件Software⽇历Calendar联系⼈Contacts新闻News游戏Game相机Camera控制中⼼Control center笔记Notes管理Management照⽚Photo健康Health天⽓Weather发现Find视频Video邮件Mail⼿表Watch个⼈中⼼Personal center设置Settings地图Maps锁屏Lock screen系统控件库状态栏Status bar搜索栏Search bar提醒视图Alert view弹出视图Popovers 导航栏Navigation bar表格视图Table view编辑菜单Edit menu开关Switch标签栏Tab bar分段控制Segmented选择器Pickers弹窗Popup⼯具栏Tool bar活动视图Activity view滑杆Sliders扫描Scanning功能命名确定Ok添加Add卸载Uninstall选择Select默认Default查看View搜索Search更多More取消Cancel删除Delete暂停Pause刷新Refresh关闭Close下载Download继续Continue发送Send最⼩化Min等待Waiting导⼊Import前进Forward最⼤化Max加载Loading导出Export重新开始Restart菜单Menu安装Install后退Back更新Update资源类型图⽚Image滚动条Scroll进度条Progress线条Line图标Icon标签Tab树Tree蒙版Mask静态⽂本框Label勾选框Checkbox动画Animation标记Sign编辑框Edit下拉框Combo按钮Button动画Animation 列表List单选框Radio背景Backgroud播放Play常见状态普通Normal获取焦点Focused已访问Visited默认Default按下Press点击Highlight禁⽤Disabled选中Selected悬停Hover错误Error完成Complete空⽩Blank位置排序顶部Top底部Bottom第⼆Second页关Header中间Middle第⼀First最后Last页脚Footer2、以iOS为范例(安卓通⽤)的切⽚⽂件命名规范如下：个⼈觉得标识符命名原则，尽可能的⽤最少的字符⽽⼜能完整的表达标识符的含义（如：Navigation bar可以缩减成nav）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

像素大厨安卓切图标准首先，我们需要了解安卓切图的基本原则。

安卓应用在不同的设备上会有不同的分辨率和屏幕密度，因此切图的时候需要提供多套不同分辨率和密度的图片资源。

而像素大厨提供了一站式的切图解决方案，可以根据设计师提供的原始设计图，自动生成符合安卓不同分辨率和密度要求的切图资源。

其次，关于切图的命名规范。

在像素大厨中，切图的命名规范是非常重要的，它能够帮助我们更好地管理和使用切图资源。

一般来说，像素大厨会根据切图的尺寸和密度自动生成相应的命名，比如“ic_launcher.png”、“bg_home_hdpi.png”等。

我们在使用切图资源的时候，只需要按照这样的命名规范进行引用即可，非常方便和高效。

接下来，我们需要注意切图的尺寸和比例。

在安卓应用中，不同的控件和界面元素需要的切图尺寸和比例是不同的，因此在切图的时候需要根据具体的需求进行调整。

像素大厨可以根据设计师提供的原始设计图，自动生成符合要求的切图资源，但是在使用的过程中，我们还是需要根据实际情况进行适当的调整和优化。

此外，切图的格式也是需要我们关注的一个重点。

在安卓应用中，常用的切图格式包括png、jpg、webp等，而像素大厨可以根据我们的需求自动生成相应格式的切图资源。

一般来说，对于需要透明度的图片资源，我们会选择png格式；而对于一些不需要透明度的大图资源，我们可以选择jpg或者webp格式，这样可以更好地节省内存和提高加载速度。

最后，我们需要注意切图的导出和管理。

像素大厨提供了丰富的导出和管理功能，可以帮助我们更好地管理和使用切图资源。

在导出的时候，我们可以选择导出全部切图资源，也可以根据需要选择部分资源进行导出，非常灵活和方便。

而在管理方面，像素大厨也提供了强大的资源管理功能，可以帮助我们更好地管理和维护切图资源，确保应用的性能和用户体验。

总的来说，像素大厨安卓切图标准是非常严格和规范的，但是只有深入了解和掌握这些标准，我们才能更好地进行安卓应用开发。

竭诚为您提供优质文档/双击可除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下则为华文黑体，所有字体要用双数字号。

ui切图规范UI切图规范是指在进行UI设计切图时遵循的一套标准和规范，旨在保证切图效果的一致性和高质量。

以下是UI切图规范的一些重要内容，共计1000字。

1. 文件类型和分辨率UI切图通常使用PNG或者JPEG格式，对于有透明背景的图像，应使用PNG格式。

切图时要确保分辨率与设计稿一致，不要缩放。

如果设计稿尺寸过大，可以通过缩小比例来适应切图。

2. 图层命名和分组切图前应对设计稿中的图层进行合理的命名和分组，以方便后续的切图工作。

图层命名要简洁明了，能够清晰地表达图层的含义。

图层分组要合理，相同类型的图层要放在一起，方便定位和使用。

3. 图片大小和优化在切图时要根据需求和使用场景来选择合适的图片大小，避免不必要的加载和占用空间。

对于需要显示在高分辨率屏幕上的图像，可以使用矢量图或者高分辨率的位图，以保证图像的清晰度。

同时，对于切图后的图片要进行压缩和优化，减小文件大小，提高加载速度，保证用户体验。

4. 边界和间距在切图时要注意图元素之间的边界和间距，在设计稿中留有足够的空隙，避免图层之间相互重叠或者挤压。

同时，对于需要对齐的图层和元素，要使用对齐工具进行精确对齐，保证切出的图像符合设计要求。

5. 切图工具和技巧在进行UI切图时，可以使用一些专业的切图工具和技巧来提高效率和准确性。

例如，可以使用切图工具中的切片功能来快速切割图层，并设置输出路径和格式。

另外，可以使用取色器工具来获取设计稿中的颜色值，保证切出的图像颜色一致。

6. 图像质量和实际效果切图前应仔细审查设计稿，确保图像质量和实际效果的一致性。

例如，注意字体的平滑性和清晰度，保证切出的文字图像不会出现锯齿现象。

另外，注意对细节部分的处理，避免模糊和失真，特别是在缩小图像大小时要特别注意。

7. 标注和导出切图完成后，应进行标注和导出，方便开发人员的使用。

标注要包括图层尺寸、字体大小、颜色值等信息，并与开发人员进行沟通，确保理解和一致性。

导出时要注意导出格式和文件命名，方便后续的开发和使用。

切图命名规范 [命名规范]命名规范版本：编写： 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. 常量常量的名称应当能够表达出它的用途。

Android尺寸标注设计大全和Android切图规范发布于：2013 年11 月25 日 by admin如何让APP设计，APP切图高效的与开发对接，似乎并没有什么更高明的办法。

很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。

加上25学堂的APP设计官方群内的小伙伴们，经常问到如何进 Android尺寸标注设计大全和Android切图规范。

下面所讲的内容是以交互以iOS的设计为主导，应用于iOS和Android两个平台。

今天跟大家分享的Android尺寸标注设计大全和Android切图规范，更适用于人力资源较为匮乏的设计团队。

第一个认识：对于设计环节。

对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。

而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。

所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。

那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。

据我所知有一些设计团队都在不明真相地这么干着。

第二个认识：来看设计环节的交付物iOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。

高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。

仅仅基于这一条，设计师就没有必要出iOS 和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。

标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。

那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。

如何在一套iOS的高保真UI图上做出两套标注和切图呢？众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。

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关系。