APP界面切图命名和文件整理规范(06)

APP命名规范命名规范1. 包命名project+项目名称+模块名称，全部单词用小写字母。

com.project.projectname2. 类和接口命名使用大驼峰规则，用名词或名词词组命名，每个单词的首字母大写。

以下为几种常用类的命名：activity类，命名以Activity为后缀，如：LoginActivityfragment类，命名以Fragment为后缀，如：ShareDialogFragment ?service类，命名以Service为后缀，如：DownloadServiceadapter类，命名以Adapter为后缀，如：CouponListAdapter 工具类，命名以Util为后缀，如：EncryptUtil模型类，命名以Model为后缀，如：CouponModel接口定义类，命名以I为前缀，如IUserService接口实现类，命名以Impl为后缀，如：UserServiceImpl3. 方法命名用动词命名，第一个单词的首字母小写，其他单词的首字母大写。

以下为几种常用方法的命名：初始化方法，命名以init开头，例：initView按钮点击方法，命名以onClick开头，例：onClick设置方法，命名以set开头，例：setData具有返回值的获取方法，命名以get开头，例：getData通过异步加载数据的方法，命名以load开头，例：loadData通过异步加载回调的方法或者，命名以Callback结尾，例：userLoginCallback ?布尔型的判断方法，命名以is开头，例：isEmpty4. 常量命名全部为大写单词，单词之间用下划线分开。

描述+}意义描述+类型描述的组合，用驼峰式，首字母小写。

5. 控件id命名控件缩写_意义，范围可选，只在有明确定义的范围内才需要加上。

tv_name btn_cancle et_name8. layout命名组件类型_功能以下为几种常用的组件类型命名：activity_功能，为Activity的命名格式~~~~~Activity匹配的layoutfragment_功能，为Fragment的命名格式~~~~~~~~Fragment匹配的layout ?dialog_功能，为Dialog的命名格式~~~~~~~~~~~Dialog匹配的layoutitem_list_功能，为ListView的item命名格式item_grid_功能，为GridView的item命名格式header_list_功能，为ListView的HeaderView命名格式footer_list_功能，为ListView的FooterView命名格式9. strings的命名类型_功能以下为几种常用的命名：页面标题，命名格式为：title_页面按钮文字，命名格式为：btn_按钮事件消息框文字，命名格式为：toast_消息编辑框的提示文字，命名格式为：hint_提示信息图片的描述文字，命名格式为：src_图片文字10. drawable的命名前缀{_控件}{_范围}{_后缀}，控件、范围、后缀可选，但控件和范围至少要有一个。

App界面设计规范1. 概述App界面设计是提供给用户与应用程序进行交互的视觉和操作方式。

良好的界面设计可以提升用户体验，使用户更容易理解和操作应用程序。

本文将介绍一些常见的App界面设计规范，帮助开发者们在设计过程中遵循最佳实践。

2. 视觉设计规范2.1 颜色选择•使用适合应用风格的颜色搭配，并注意颜色对比度，以确保文字和图标的可读性。

•避免使用过多明亮或过于高饱和度的颜色，以免对用户产生不适感。

•在暗模式和亮模式之间切换时，需要注意颜色在两种模式下的可读性和整体协调性。

2.2 图标和图片•使用统一简洁、直观易懂的图标，以便用户快速识别其含义。

•图片质量要求高，并遵循响应式设计原则，在不同屏幕尺寸上呈现一致且清晰的效果。

•合理压缩图片文件大小，尽量减少加载时间。

2.3 字体选择•使用清晰易读、适合应用风格的字体。

•在不同屏幕尺寸上确保字体大小的合适性，以便用户能够方便地阅读。

2.4 排版和布局•界面元素的排列严谨、有序，避免过于拥挤或空旷。

•使用一致的边距和间距，使界面整洁且易于浏览。

•对齐方式要统一，以确保页面整体协调。

3. 交互设计规范3.1 导航和标签栏•提供清晰明了的导航结构，使用户能够轻松找到所需内容。

•标签栏要易于操作和切换，并在不同页面状态下显示相应的标记。

3.2 按钮设计•按钮设计要简洁易懂、易点击，并为不同按钮类型使用合适的颜色和形状。

•使用动画效果来增强按钮点击反馈，提高用户交互体验。

3.3 输入框和表单•输入框样式要清晰，并提供输入提示或默认值，方便用户填写信息。

•表单中的字段要有明确标签和格式验证信息，以减少用户输入错误。

3.4 弹窗和提示信息•弹窗要简洁明了，提供清晰的按钮操作和关闭方式。

•提示信息要及时准确地反馈给用户，并使用易于理解的语言。

4. 响应式设计规范4.1 屏幕适配•针对不同屏幕尺寸和分辨率进行界面布局的自适应调整，以保证在不同设备上正常展示。

•需要做好各种屏幕比例下的测试，确保界面元素大小和位置合适。

App界面交互设计规范人人都是产品经理在上篇《APP界面设计风格》确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。

在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。

与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。

APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

一、页面布局规范页面布局页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。

当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。

在中小型项目来看，设计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。

推荐使用mac矢量设计工具”sketch”。

以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。

在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。

这里可以首先统一设计稿输出规范：•安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件•IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件PS：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等界面坐标图实例二、标准色规范标准色规范标准色规范：重要、一般、弱。

标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。

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

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

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

UI设计规范一、APP界面设计规范（一）界面尺寸1、IOS界面尺寸：常见为（宽度640px、高度1136px）2、Android界面尺寸：常见为（宽度720px、高度1280px）其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px）（二）导航尺寸1、IOS导航尺寸：高度60px，留白7px2、Android导航尺寸：高度64px或48px，留白8px（三）标签尺寸1、IOS标签尺寸：高度98px2、Android标签尺寸：高度96px（四）工具栏尺寸1、IOS工具栏尺寸：高度88px2、Android工具栏尺寸：高度96px（五）列表高度1、IOS列表高度：高度88px2、Android列表高度：高度96px（六）资源状态对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

（七）字体1、IOS默认英文为HelveticalNeue，中文为黑体2、Android列表高度：默认为Droidsans fallback（八）字号字号通常按照标题及征文级别递减为42、36、34、30、24 （九）ICON1、IOS常用尺寸有1024*1024、512*512、120*120、60*602、Android常用尺寸有512*512、200*200、72*72、48*48 （十）资源插图1、长方形插图高度一般不超过背景宽度的二分之一2、缩略图两张并列高度一般不超过200px，宽度要适中有留白3、图文混排中图片一般不高过150*110。

切图命名规范切图命名是在进行图片切割时，给切下来的图片文件起一个易于理解和标识的名字。

一个规范的命名能够方便团队协作和管理，提高工作效率。

以下是一些常用的切图命名规范的建议，总结如下：1. 统一前缀 - 可以根据项目或模块名称给切图文件添加统一的前缀，比如"home_"表示首页相关、"nav_"表示导航相关等。

这样可以便于查找和识别不同模块的切图。

2. 功能描述 - 使用简短的英文单词或短语来描述切图的功能或用途，比如"logo"表示网站logo、"button"表示按钮、"banner"表示广告横幅等。

注意避免使用含糊或重复的描述词。

3. 元素类型 - 如果切图是某个特定元素的一部分，可以在命名中添加元素的类型，比如"icon_"表示图标、"bg_"表示背景、"pic_"表示图片等。

4. 状态和尺寸 - 如果切图有不同的状态或尺寸，可以在命名中添加相关信息，比如"_hover"表示鼠标悬停状态、"_active"表示激活状态、"_small"表示小尺寸等。

这样可以便于组织和管理不同状态或尺寸的切图。

5. 编号或版本 - 如果同一功能或元素有多个切图，可以使用序号或版本号来区分，比如"btn_01"、"btn_02"等。

这样可以避免命名冲突，并且方便追踪和管理不同版本的切图。

6. 文件格式 - 如果切图需要导出不同的文件格式，可以在命名中添加相关的文件后缀，比如".jpg"表示JPEG格式、".png"表示PNG格式等。

这样可以帮助区分不同的文件格式和用途。

7. 文件夹结构 - 在切图文件的存放位置上，可以使用文件夹的方式来组织和管理切图文件。

软件界面设计规则和规范文档目前流行的界面风格有三种方式多窗体、单窗体以及资源管理器风格无论哪种风格均适用于以下十条规则1易用性按钮名称应该易懂用词准确摒弃模棱两可的字眼要与同一界面上的其他按钮易于区分能望文知义最好。

理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则 1.完成相同或相近功能的按钮用Frame框起来常用按钮要支持快捷方式。

2.完成同一功能或任务的元素放在集中位置减少鼠标移动的距离。

3.按功能将界面划分局域块用Frame框起来并要有功能说明或标题。

4.界面要支持键盘自动浏览按钮功能即按Tab键的自动切换功能。

5.界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前位置也应放在窗口上较醒目的位置。

6.同一界面上的控件数最好不要超过10个多于10个时可以考虑使用分页界面显示。

7.分页界面要支持在页面间的快捷切换常用组合快捷键CtrlTab。

8.默认按钮要支持Enter及选择操作即按Enter后自动执行默认按钮对应操作。

9.可写控件检测到非法输入后应给出说明并能自动获得焦点。

10.Tab键的顺序与控件排列顺序要一致目前流行总体从上到下同行间从左到右的方式。

11.复选框和选项框按选择几率的高低先后排列。

12.复选框和选项框要有默认选项并支持Tab选择。

13.选项数相同时多用选项框而不用下拉列表框。

14.界面空间较小时使用下拉框而不用选项框。

15.选项数较少时使用选项框相反使用下拉列表框。

16.专业性强的软件要使用相关的专业术语通用性界面则提倡使用通用性词眼。

2规范性通常界面设计都按Windows界面的规范来设计即包含菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单的标准格式可以说界面遵循规范化的程度越高则易用性相应的就越好。

小型软件一般不提供工具厢。

规范性细则 1.常用菜单要有命令快捷方式。

2.完成相同或相近功能的菜单用横线隔开放在同一位置。

3.菜单前的图标能直观的代表要完成的操作。

app界面设计规范应用界面设计规范（UI Design Guidelines）一、概述应用界面设计规范是为了提供一致的用户体验，减少用户学习成本，提高用户使用效率而制定的标准化规范。

本文档旨在为应用界面设计人员提供详细的设计指导和规范要求。

二、布局设计规范1. 布局要合理：应用界面应根据功能模块和信息层级进行布局，使用户可以快速找到所需信息。

2. 控件位置要合理：常用的功能按钮和交互控件应放置在用户易于触及和操作的位置，并保持一定的统一性。

3. 色彩搭配要合理：应用界面的色彩搭配应符合用户习惯和品牌风格，并且能够提高信息的可读性和识别度。

三、交互设计规范1. 操作一致性：相同类型的操作在不同页面中应保持一致，例如相同的功能按钮应具有相同的样式和位置。

2. 避免误操作：应用界面应减少对用户的误操作机会，例如提供撤销、确认和验证功能等。

3. 提示信息清晰：错误提示、成功提示和帮助文本应清晰明了，避免用户产生困惑。

4. 导航逻辑清晰：应用界面的导航逻辑应清晰明了，用户能够很容易地找到自己的位置和目标。

四、字体和图标设计规范1. 字体选择要恰当：应用界面的字体应选择易于阅读和识别的字体，同时需要考虑字体的风格与品牌一致。

2. 字体大小要合适：应用界面的字体大小应根据不同位置和用途进行调整，以便用户能够轻松阅读。

3. 图标样式要一致：应用界面的图标样式应统一，避免使用不同风格的图标对用户造成困扰。

五、界面美观设计规范1. 色彩选择要科学：应用界面的色彩选择应遵循色彩搭配原则，以提高用户体验和美感。

2. 美观布局要简洁：应用界面的布局应简洁美观，避免过多的装饰和样式干扰用户的使用。

3. 图片使用要合理：应用界面中的图片应具有明确的用途，且不应过于花哨和复杂。

六、响应式设计规范1. 考虑不同屏幕尺寸：应用界面的设计应考虑不同屏幕尺寸的适配性，以保证在不同设备上都能有良好的显示效果。

2. 响应速度要快：应用界面应做到快速响应用户的操作，减少用户等待时间。