app界面命名规范Word文件下载.docx
《app界面命名规范Word文件下载.docx》由会员分享，可在线阅读，更多相关《app界面命名规范Word文件下载.docx（4页珍藏版）》请在冰豆网上搜索。
1334px640×
1136px640×
960px1024×
768px1024×
768px
状态栏高度导航栏高度标签栏高度60px40px40px40px40px20px20px
132px88px88px88px88px44px44px
147px98px98px98px98px49px49px
1242×
2208px
ipad3/4/air/air2/mini22048×
1536px
paste_image.png
图标尺寸
iphone6plusiphone6iphone
5/5s/5ciphone4/4sipad1/2ipadmini
appstore程序应用
主屏幕
spotlight工具栏和
标签栏
搜索导航栏
75*75px44*44px75*75px44*44px75*75px44*44px25*25px22*22px25*25px22*22px
1024*1024px180*180px144×
144px87×
87px75*75px66*66px1024*1024px120*120px144×
144px58*58px1024*1024px120*120px144×
144px58*58px1024*1024px90*90px1024*1024px90*90px
72*72px50*50px72*72px50*50px
ipad3/4/air/air2/mini21024*1024px180*180px144×
144px100*100px50*50px44*44px
字体
iphone上的字体英文为：
helveticaneue至于中文，mac下用的是黑体-简，win下则为华文黑体，所有字体要用双数字号。
XX用户体验部做过一个小调查，对于app字体大小的调查结论如下：
颜色值
ios颜色值取Rgb各颜色的值比如某个色值，给予ios开发的色值为R:
12g:
34b:
56给出的值就是12,34,56（有时也要根据开发的习惯，有时也用十六进制）
内部设计
1、所有能点击的图片不得小于44px（Retina需要88px）2、单独存在的部件必须是双数尺寸3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式，如图
android篇
状态栏高度：
50px导航栏高度：
96px标签栏高度：
96px
android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：
内容区域高度为：
1038px（1280-50-96-96=1038）
图表尺寸
屏幕大小
320×
480px
480×
800px/480×
854px/540×
960px720×
1280px1080×
1920px
启动图标
操作栏图上下文图系统通知图标
最细笔画
标标（白色）
不小于2
px不小于3px不小于2dp不小于6px
48×
48px32×
32px16×
16px24×
24px72×
72px48×
48px24×
24px36×
36px48×
48dp32×
32dp16×
16dp24×
24dp144×
144
96×
96px48×
48px72×
72px
px
ps:
android设计规范中，使用的单位是dp，dp在安卓机上不同的密度转换后的px是不一样的
android上的字体为：
droidsansfallback，是谷歌自己的字体，与微软雅黑很像。
android的字体大小调查结论是：
android颜色值取值为十六进制的值比如一绿色的值，给开发的值为#5bc43e
那么，为了满足自己的工作需要，我们谈谈ui设计师需要什么技能。
在视觉设计方面1）平面构成2）色彩构成3）版式设计4）心理学5）美术绘画6）设计意识在交互设计方面1）了解用户体验设计、可用性原则；
2）信息挖掘、用户调研、数据分析；
3）良好的逻辑能力；
4）心理学；
5）交互设计原则、不同平台的规范；
6）产品视觉感；
7）沟通能力。
篇三：
app-ui规范
app-ui设计规范
——0.1版本
1.设计尺寸及像素
作图的时候尽量用形状工具画矢量图，方便后期图片尺寸的变更及切图。
现在主流尺寸如下：
android
800、720×
1280、1080×
1920ios
iphone:
320×
480、640×
960、640×
1136、750×
1334、1080×
1920
ipad:
1024×
768、2048×
1536
像素：
72像素/英寸
尺寸：
第一版效果图建议使用尺寸750×
1334，能适用大部分尺寸，并且在iphone6plus中显示也较为清晰，切图后文件大小也适中，应用的内存消耗也不会过高。
后期再配合程序员根据不同尺寸切相应版本的图片。
2.设计要素
a.布局
android开发中最麻烦的问题之一就是屏幕适配的问题，硬件厂商太多，屏幕尺寸太多。
一个好的应用应该尽可能多的适配更
多的屏幕。
ui设计过程中就应该考虑到屏幕变宽、变高、变窄、变短的过程中ui应该如何适配。
b.界面
风格：
首先无论什么风格，一定要统一，不能一会扁平化，一会拟物。
颜色：
配色一定要协调，内容与背景色的对比度一定要适度，设计一定要考虑到使用环境，如在阳光下。
如果对比度不够的话那么在强光的环境下就不好用了，背景和内容就融为一体了，很难分辨。
c.按钮
图片点击尺寸不要太小，至少要大于一个手指的宽度，提高点击命中率，否则会有“点击不灵敏”的感觉，当然并不是真正的不灵敏，而是没有点中操作的区域。
（用户可不管这些理由，多为用户考虑哦）。
对于Radiobutton、checkbox至少应该出2个状态的图：
正常、选中。
最好3个图：
正常、点击、选中。
如果没有点击的过程，会造成“响应迟钝”的感觉，因为毕竟在点击状态没有换图。
d.动画
使用动画进行界面的过度让人感觉更柔和、亲近。
有时一些简单的动画会给你的应用增色不少。
e.对话框
尤其是网页中都会有很多的对话框，久而久之人们对对话框也就产生了反感（至少我是这么认为的），能以更好的方式做提示的情况下就尽量避免用对话框，非用不可的情况下那么建议一个界面不超过两处。
老是弹对话框的应用，最终弹走的是用户。
3.切图
1、和客户端的技术沟通好，用不同的框架来实现的时候，图会有不一样的切法。
例如tabbar是连背景一起切还是单独把icon做成背景透明的，文字是放在图里还是后面加字。
2、有一些小的icon式按钮，不能只切到icon边缘，而是要考虑到最终实现的时候，是把这个图片做成按钮，和用户交互。
所以必须要多留一些透明的边，让能点击的图片在88×
88以上，这样用户才保证比较好点到。
3、如果可以用png24就不用png32，如果可以用png8就不用png32。
4、对于不改变可见图形而又需要加大点击区域的图。
那么切图的时候建议在可见图形的四周都加上1像素的透明，这是为了放大拉伸而不产生可见区域的图像失真。
5、切图的高度。
6、切图的宽度。
7、9.png:
是安卓开发里面的一种特殊的图片，这种格式的图片通过adt自带的编辑工具生成，使用九宫格切分的方法，使图片支持在android环境下的自适应展示。
4.命名
基本上app的切图可分为下面几大类：
背景、按钮、图示、图片、照片、tabbaricon等。
为了让切图便於管理，通常会依图片性质命名。
例如bg_xxx.png、btn_xxx.png、img_xxx.png、pic_xxx.png、tab_xxx.png。
当图档要做给Retina萤幕使用时，只要在副档名前加上「@2x」就可以了。
如bg_xxx@2x.png、btn_xxx@2x.png、icon_xxx@2x.png。
按钮命名:
1）一般（normal）：
btn_xxx_n.png，最基本的按钮外观。
2）点击（highlight）：
btn_xxx_h.png，使用者触摸萤幕碰到按钮，为了告知使用者有点击到而出现的回应提示。
3）不能点击（disabled）：
btn_xxx_d.png，代表app有这功能但使用者无法使用。
例如如安装在ipod上的app有播打电话功能时。
既然不能被点击干脆直接隐藏的作法也是有的。
要直接将按钮隐藏或是以不能被点击的状态呈现需视情况决定。
4）选中（selected）：
btn_xxx_s.png，选中出现在有复数选项时，但通常不会把按钮拿去做复数选项控件，这种按钮状态出现的机会不高。
图示：
icon_xxx.png。
图片：
pic_xxx.png或是img_xxx.png。
照片：
pho_xxx.png。
升级会员 