app切图命名规则
手机客户端切图命名规则
选项卡
选项卡按钮命名规则： tab_（功能描述）.png如: tab_set.png\nav_set_pre.png (设置)
主界面
主页面命名规则： home_（功能属性+描述）.png如: home_menu_recommended.png (热门推荐)PS:描述可用英文或拼命名规则： list_（功能属性+描述）.png如: list_menu_collect.png (页表页收藏按钮)
内容页
可重复使用按钮命名规则： btn_（功能属性或色彩均可）.png如: btn_blue.png /btn_blue.9.png(蓝色按钮)
登录界面
启动界面命名规则： login_bg.png (登录背景) login_logo.png (登录logo) login_input.png (输入框)login_input_pre.png (输入框选中状态)Login_btn.png （登录按钮） Login_btn_pre.png （登录按钮选中状态）
导航栏
导航栏按钮命名规则： nav_（功能描述）.png如: nav_menu.png\nav_menu_pre.png (同一按钮选中前后两种状态命名)PS:同一区域按钮切图大小一致
左侧导航
左侧导航切图名规则： leftbar_（功能描述）.png如: leftbar_info.png\leftbar_info_pre.png (个人中心)
UI系列干货-切图命名
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命名常见规范
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设计：切图的命名规范与标注说明
浅析app设计：切图的命名规范与标注说明写这篇文章也是总结了以前刚接触时候遇到的问题，还有来自其他朋友的提问。
关于切图的命名规范给人的第一印象就是全英文，看不懂，让很多人望而却步，当你有所了解之后，你就会发现其实没那么复杂。
本文主要为了给想了解命名规范的朋友解解惑。
一款产品的落地，必将先经历过需求分析、产品定位、项目拟定、功能分析、原型设计、再到设计稿输出，接下来再到开发，切图、标注是设计与开发需要沟通的步骤之一。
问题1：切图与标注是什么？切图：APP切图是实现设计效果的重要环节，开发们在实现的过程中需要计算好各个元素的位置，排布，然后再调用我们切好的图进行填充。
其存在是为了程序提高产品的开发效率和团队协作。
标注：标注能够帮助其他团队理解设计页面的布局关系、模块大小、颜色与字体规范等等。
注意：区分iOS与Android的规范问题2：为什么要制定规范？（规范存在的意义）1、方便修改与迭代对于项目而言，产品的优化迭代是必要的，除非打算放弃治疗。
有很多人对于文档的命名是这样的：遇到突发情况，比如你完成了设计后，突然要你改动哪个icon，你要找起来也是相当麻烦。
养成良好的命名习惯很重要，比如可以利用版本命名，亦或时间命名都可以更清晰地标明。
2、方便更快捷查找对于个人而言，psd文件有时候需要修改，整齐规范的psd文档是不是在修改图层的时候更容易找到该图层呢？（以上来自网络，图层命名没有固定性）3、方便设计团队沟通如果设计团队有一套完整的设计规范，那是再好不过。
如果没有这样完整设计系统，那么我们就得自己通过沟通制定一套规范，才能让沟通更加高效。
建议可以多看看网易、Google、QQ等企业的设计规范进行学习。
4、方便程序开发沟通曾经与程序沟通过需求，有些程序需要你切好图，标注好，命名好给他们，有些程序只需要你的设计档，他们自行切图标注，所以设计时与开发沟通尤为重要。
但是无论如何，规范的命名是最有效的沟通。
二、关于切图命名与标注的那些事像以前的设计输入都是手动输出，如今有了各种软件与插件，给设计师提供了更高效与快捷的方式去解决切图问题。
文件切图命名规范标准
文件/切图命名规范标准
头部header
底部bottom
菜单menu
输入框textfeild
标题栏titlebar
状态栏statusbar
列表list {1，2，3...} 表格sheet
图片pic
推广图banner
背景bg
按钮btn
指示器indicator 启动器launcher 图标icon
标签tab
内容区域content 线条line 2px
多选checkbox 单选radio
提示tips
进度process
信息info
头像head
返回back
点point
切图命名规范
①禁止使用中文命名
②禁止使用无意义文字符命名
③请尽量使用语义相近的英文或者英文简写命名
④ios以@2x.png和@3x.png作为文件最后名字字符（例如avater_default@2x.png
avater_default@3x.png）
⑤android每个文件夹下的相同功能切图文件名保持一致。
⑥禁止在图片文件名中间加入数字。
如果必须使用数字进行描述，请在文件名最后加入数字（图片的多种状态不受此限制）（例如avater27.png avater30.png）
⑦如需符号，请使用_做分割。
⑧图片多种状态请使用_normal(正常状态) _selected(选中状态) _highlight(高亮状态，按钮点击下状态) _disable(禁用状态) 作为文件名状态标示(例如item_normal.png item_highlight.png,
login_item30_disable.png)。
APP中图标如何命名
大型APP中图标组件如何命名关于图标组件命名的规范，个人觉得关键是在于团队能够有一个统一的规则，所有成员必须是严格遵守并且和开发全盘拉通，不然一切都是空谈。
因为不同的团队使用的软件都不一样，如果使用sketch软件中symbols的伙伴，可能在命名的时候会考虑更多内容，但是还有很多伙伴在使用ps 作图，所以这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路。
一、命名的原则一款功能多的APP包含很多组建，为了对组建有统一的名称，并对组件命名进行区分，避免组件名称重复出现或组件与名称不符等异常，导致开发不易查找、维护难道大，同时也容易影响APP体验性。
某款APP命名为例，它的命名方式看着清楚，没有重复出现性a.自身层对我们自己的文件整理有很大的帮助，后期修改图标组件的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。
b.团队层如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本，所以规范的命名对于团队协同也有极大的推动作用。
c.开发层这一点很重要，可以极大的节省程序开发的时间成本，减少不必要的沟通与重复切图的概率。
只要图标组件命名足够规范，并且和开发达成共识，开发完全可以直接使用的设计切图，而不用更改切图的名称，后期更换切图，只要名称不变，开发易替换、易查找。
二、命名规范a.命名集合常见的界面、控件、功能、状态命名集合，此命名需产品经理、设计师、开发工程师进行记住标识的命名名称。
以上是常见的命名名称b.命名规范命名尽可能的采用英文，而且全部为小写英文字母，命名中不能含有空格。
目的是让开发人员拿到设计切图直接使用，减少再次命名，但是我们要知道，开发人员的代码里只有小写的英文字母，如果给出的命名全是中文，那么开发人员肯定会修改。
以上是命名的基本规范三、命名方式众所周知，一款大型APP会分很多模块，每个模块由不同的设计师来独立完成，还有人员专门管理公共组件，如tabbar、navbar等，这种情况下命名分为两种，一种是通用类型命名，还有一种是各个模块特有型命名。
切图命名规范
切图命名规范切图命名规范是指在设计制作过程中，对所切出的图片进行命名的一种规范要求。
准确的切图命名可以提高设计师和开发者之间的沟通效率，减少错误和冗余，提高工作效率和项目质量。
下面是一个1000字的切图命名规范：切图命名规范一、命名长度1. 命名长度尽量控制在20个字符以内。
过长的命名不仅会影响文件名的显示，也会增加命名的复杂度。
二、命名元素1. 命名元素应包含必要的信息，例如：功能、布局、效果等。
2. 命名元素可以使用英文单词、数字和下划线。
不推荐使用中文或特殊字符，避免出现编码问题。
3. 命名元素要尽量简洁明了，不要过度冗长。
例如，按钮可以命名为“button”而不是“the_button_of_login”。
三、命名顺序1. 命名顺序应该从宽到窄，从大到小。
例如，先命名布局，再命名具体的元素。
2. 命名顺序应参考网页结构和使用顺序。
例如，先命名页头、页脚，再命名导航栏、内容区，再命名具体的模块和组件。
四、命名示例1. 命名示例1：a. 页面标题：page_titleb. 标题栏：headerc. 导航栏：navd. 内容区：contente. 侧边栏：sidebarf. 页脚：footer2. 命名示例2：a. 顶部导航栏：top_navb. 主导航栏：main_navc. 子导航栏：sub_navd. 搜索框：search_boxe. 用户头像：user_avatarf. 首页轮播图：home_sliderg. 产品列表：product_list五、特殊情况处理1. 如果需要对同一个元素进行不同的状态切图，可以在命名后面添加状态信息，例如：a. 按钮正常状态：button_normalb. 按钮激活状态：button_activec. 按钮禁用状态：button_disabled2. 如果需要对同一个元素进行不同尺寸的切图，可以在命名后面添加尺寸信息，例如：a. 横幅广告大图：banner_largeb. 横幅广告小图：banner_small六、命名注释1. 如果命名本身无法完全表达切图的含义，可以使用注释来进一步说明。
app界面命名规范
竭诚为您提供优质文档/双击可除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、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
导航栏
导航栏按钮命名规则： nav_（功能描述）.png 如: nav_menu.png\nav_menu_pre.png (同一按钮选中前后两种状态命名)
PS:同一区域按钮切图大小一致
左侧导航
左侧导航切图名规则： leftbar_（功能描述）.png
登录界面
启动界面命名规则： login_bg.png (登录背景) login_logo.png (登录logo) login_input.png (输入框) login_input_pre.png (输入框选中状态) Login_btn.png （登录按钮） Login_btn_pre.png （登录按钮选中状态）
如: leftbar_info.png\leftbar_info_pre.png (个人中心)
选项卡
选项卡按钮命名规则： tab_（功能描述）.png 如: tab_set.png\nav_set_pre.png (设置)
主界面
主页面命名规则： home_（功能属性+描述）.png 如: home_menu_recommended.png (热门推荐)
手机客户端切图命名规则 V1.0
启动界面
启动界面命名规则： defoult.png （启动图片） defoult_logo.png （启动logo） 如: defoult.png\defoult@2x.png\defoult568@2x.png
PS:同一区域按钮切图大小一致defoult@2x.png\defoult568@2x.png 为IOS命名(-568适配iphone5)
PS:描述可用英文或拼间开头字母组合等。
列表页
页表页命名规则： list_（功能属性+描述）.png 如: list_menu_collect.png (页表页收藏按钮)
内容页
可重复使用按钮命名规则： btn_（功能属性或色彩均可）.png 如: btn_blue.png /btn_blue.9.png (蓝色按钮)