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

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界面设计规范

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界面交互设计规范人人都是产品经理在上篇《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命名常见规范

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

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。
App界面版式设计规范及交互设计原则

原则八
优美简约原则
展示的内容应该去除不相关的信息或几乎不需要的信息。
原则九
容错原则
出现错误信息应该使用简洁的文字,指出错误是什么, 并给出解决建议。
原则十
人性化原则
应该提供一份帮助文档。任何帮助信息都应该可以方便 地搜索到,以用户的任务为核心,列出相应的步骤。
原则二
环境贴切原则
软件系统应该使用用户熟悉的语言、文字、语句,而非系统 语言。 软件中的信息应该尽量贴近真实世界,让信息更自然,逻辑 上也更容易被用户理解。
原则三
用户可控原则
用户误触到某些功能,应该让用户可以方便的退出。 用户发送一条消息、总会有意识到自己不对的地方,这 个叫做临界效应;支持撤销/重做功能。
……
……
App界面版式设计规范
对称
对称设计传达出页面的平衡、安静和稳定,同时表达 了完整性、专业性和一致性。
……
……
App界面版式设计规范
分组
常见的分组方式就是卡片,为用户选择提供专注而又明确 的浏览体验。
……
……
App界面版式设计规范
显示分辨率 逻辑分辨率 设计尺寸选择
设计适配
……
……
App界面版式设计规范
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
切图命名规范

切图命名规范切图命名是在进行图片切割时,给切下来的图片文件起一个易于理解和标识的名字。
一个规范的命名能够方便团队协作和管理,提高工作效率。
以下是一些常用的切图命名规范的建议,总结如下: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、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
APP界面切图命名和文件整理规范切图命名英文缩写三个原则:
1 较短的单词可通过去掉“元音”形成缩写
2 较长的单词可取单词的头几个字母形成缩写
3 此外还有一些约定成俗的英文单词缩写.
第一部分:iOS APP界面设计切图命名规范
第二部分:手机APP切图文件整理和技巧分享
第三部分;Android编码规范建议18条,
适合手机app设计师和android 工程师阅读。
1.java代码中不出现中文,最多注释中可以出现中文
2.局部变量命名、静态成员变量命名
只能包含字母,单词首字母除第一个外,都为大写,其他字母都为小写
3.常量命名
只能包含字母和_,字母全部大写,单词之间用_隔开
4.图片尽量分拆成多个可重用的图片
5.服务端可以实现的,就不要放在客户端
6.引用第三方库要慎重,避免应用大容量的第三方库,导致客户端包非常大
7.处理应用全局异常和错误,将错误以邮件的形式发送给服务端
8.图片的.9处理
9.使用静态变量方式实现界面间共享要慎重
10.Log(系统名称模块名称接口名称,详细描述)
11.单元测试(逻辑测试、界面测试)
12.不要重用父类的handler,对应一个类的handler也不应该让其子类用到,否则会导致message.what冲突
13.activity中在一个View.OnClickListener中处理所有的逻辑
14.strings.xml中使用%1$s实现字符串的通配
15.如果多个Activity中包含共同的UI处理,那么可以提炼一个CommonActivity,把通用部分叫由它来处理,其他activity只要继承它即可
16.使用button+activitgroup实现tab效果时,使用
Button.setSelected(true),确保按钮处于选择状态,并使activitygroup 的当前activity与该button对应
17.如果所开发的为通用组件,为避免冲突,将
drawable/layout/menu/values目录下的文件名增加前缀
18.数据一定要效验,例如:字符型转数字型,如果转换失败一定要有缺省值;服务端响应数据是否有效判断。