手机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、方便程序开发沟通曾经与程序沟通过需求,有些程序需要你切好图,标注好,命名好给他们,有些程序只需要你的设计档,他们自行切图标注,所以设计时与开发沟通尤为重要。
但是无论如何,规范的命名是最有效的沟通。
二、关于切图命名与标注的那些事像以前的设计输入都是手动输出,如今有了各种软件与插件,给设计师提供了更高效与快捷的方式去解决切图问题。
像素大厨安卓切图标准

像素大厨安卓切图标准首先,我们需要了解安卓切图的基本原则。
安卓应用在不同的设备上会有不同的分辨率和屏幕密度,因此切图的时候需要提供多套不同分辨率和密度的图片资源。
而像素大厨提供了一站式的切图解决方案,可以根据设计师提供的原始设计图,自动生成符合安卓不同分辨率和密度要求的切图资源。
其次,关于切图的命名规范。
在像素大厨中,切图的命名规范是非常重要的,它能够帮助我们更好地管理和使用切图资源。
一般来说,像素大厨会根据切图的尺寸和密度自动生成相应的命名,比如“ic_launcher.png”、“bg_home_hdpi.png”等。
我们在使用切图资源的时候,只需要按照这样的命名规范进行引用即可,非常方便和高效。
接下来,我们需要注意切图的尺寸和比例。
在安卓应用中,不同的控件和界面元素需要的切图尺寸和比例是不同的,因此在切图的时候需要根据具体的需求进行调整。
像素大厨可以根据设计师提供的原始设计图,自动生成符合要求的切图资源,但是在使用的过程中,我们还是需要根据实际情况进行适当的调整和优化。
此外,切图的格式也是需要我们关注的一个重点。
在安卓应用中,常用的切图格式包括png、jpg、webp等,而像素大厨可以根据我们的需求自动生成相应格式的切图资源。
一般来说,对于需要透明度的图片资源,我们会选择png格式;而对于一些不需要透明度的大图资源,我们可以选择jpg或者webp格式,这样可以更好地节省内存和提高加载速度。
最后,我们需要注意切图的导出和管理。
像素大厨提供了丰富的导出和管理功能,可以帮助我们更好地管理和使用切图资源。
在导出的时候,我们可以选择导出全部切图资源,也可以根据需要选择部分资源进行导出,非常灵活和方便。
而在管理方面,像素大厨也提供了强大的资源管理功能,可以帮助我们更好地管理和维护切图资源,确保应用的性能和用户体验。
总的来说,像素大厨安卓切图标准是非常严格和规范的,但是只有深入了解和掌握这些标准,我们才能更好地进行安卓应用开发。
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下则为华文黑体,所有字体要用双数字号。
ui切图规范

ui切图规范UI切图规范是指在进行UI设计切图时遵循的一套标准和规范,旨在保证切图效果的一致性和高质量。
以下是UI切图规范的一些重要内容,共计1000字。
1. 文件类型和分辨率UI切图通常使用PNG或者JPEG格式,对于有透明背景的图像,应使用PNG格式。
切图时要确保分辨率与设计稿一致,不要缩放。
如果设计稿尺寸过大,可以通过缩小比例来适应切图。
2. 图层命名和分组切图前应对设计稿中的图层进行合理的命名和分组,以方便后续的切图工作。
图层命名要简洁明了,能够清晰地表达图层的含义。
图层分组要合理,相同类型的图层要放在一起,方便定位和使用。
3. 图片大小和优化在切图时要根据需求和使用场景来选择合适的图片大小,避免不必要的加载和占用空间。
对于需要显示在高分辨率屏幕上的图像,可以使用矢量图或者高分辨率的位图,以保证图像的清晰度。
同时,对于切图后的图片要进行压缩和优化,减小文件大小,提高加载速度,保证用户体验。
4. 边界和间距在切图时要注意图元素之间的边界和间距,在设计稿中留有足够的空隙,避免图层之间相互重叠或者挤压。
同时,对于需要对齐的图层和元素,要使用对齐工具进行精确对齐,保证切出的图像符合设计要求。
5. 切图工具和技巧在进行UI切图时,可以使用一些专业的切图工具和技巧来提高效率和准确性。
例如,可以使用切图工具中的切片功能来快速切割图层,并设置输出路径和格式。
另外,可以使用取色器工具来获取设计稿中的颜色值,保证切出的图像颜色一致。
6. 图像质量和实际效果切图前应仔细审查设计稿,确保图像质量和实际效果的一致性。
例如,注意字体的平滑性和清晰度,保证切出的文字图像不会出现锯齿现象。
另外,注意对细节部分的处理,避免模糊和失真,特别是在缩小图像大小时要特别注意。
7. 标注和导出切图完成后,应进行标注和导出,方便开发人员的使用。
标注要包括图层尺寸、字体大小、颜色值等信息,并与开发人员进行沟通,确保理解和一致性。
导出时要注意导出格式和文件命名,方便后续的开发和使用。
切图命名规范 [命名规范]
![切图命名规范 [命名规范]](https://img.taocdn.com/s3/m/1fdce5474b35eefdc8d3336a.png)
切图命名规范 [命名规范]命名规范版本:编写: 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. 常量常量的名称应当能够表达出它的用途。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
登录界面
启动界面命名规则: login_bg.png (登录背景) login_logo.png (登录logo) login_input.png (输入框) login_input_pre.png (输入框选中状态) Login_btn.png (登录按钮) Login_btn_pre.png (登录按钮选中状态)
内容页
可重复使用按钮命名规则: btn_(功能属性或色彩均可).png 如: btn_blue.png /btn_blue.9.png (蓝色按钮)
如: leftbar_info.png\leftbar_info_pre.png (个人中心)
选项卡
菜单按钮命名规则: tab_(功能描述).png 如: tab_set.png\nav_set_pre.png (设置)
主界面
主页面命名规则: Home(界面名称)_(功能属性简写+描述).png 如: home_btn_recommended.png (热门推荐)
手机APP切图命名规则
启动界面
启动界面命名规则: defoult.png (启动图片) defoult_logo.png (启动logo) 如: defoult.png\defoult@2x.png\defoult-720@2x.png
PS:同一区域按钮切图大小一致defoult@2x.png\defoult720@2x.png 为IOS命名(-720适配720px宽)
PS:描述可用英文或拼间开头字母组合等。 部分功能属性简写: 按钮:btn 按钮文字:btntext 复选框:chb 背景:bg 单选框:rb 下拉:cbb 输入:ip
列表页
页表页命名规则: list_(功能属性+描述).png 如: list_menu_collect.png (页表页收藏按钮)
PS:android下 input、btn、list 等图片可用.9.png格式图片
导航栏
Hale Waihona Puke 导航栏按钮命名规则: nav_(功能描述).png 如: nav_menu.png\nav_menu_pre.png (同一按钮选中前后两种状态命名)
PS:同一区域按钮切图大小一致
左侧导航
左侧导航切图名规则: leftbar_(功能描述).png