app界面命名规范.docx
《app界面命名规范.docx》由会员分享,可在线阅读,更多相关《app界面命名规范.docx(4页珍藏版)》请在冰豆网上搜索。
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/2ipadmini
分辨率750×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*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字体大小的调查结论如下:
paste_image.png
颜色值
ios颜色值取Rgb各颜色的值比如某个色值,给予ios开发的色值为R:
12g:
34b:
56给出的值就是12,34,56(有时也要根据开发的习惯,有时也用十六进制)
内部设计
1、所有能点击的图片不得小于44px(Retina需要88px)2、单独存在的部件必须是双数尺寸3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式,如图
paste_image.png
android篇
界面尺寸
状态栏高度:
50px导航栏高度:
96px标签栏高度:
96px
android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和标签栏一样的:
96px
内容区域高度为:
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的字体大小调查结论是:
paste_image.png
颜色值
android颜色值取值为十六进制的值比如一绿色的值,给开发的值为#5bc43e
那么,为了满足自己的工作需要,我们谈谈ui设计师需要什么技能。
在视觉设计方面1)平面构成2)色彩构成3)版式设计4)心理学5)美术绘画6)设计意识在交互设计方面1)了解用户体验设计、可用性原则;2)信息挖掘、用户调研、数据分析;3)良好的逻辑能力;4)心理学;5)交互设计原则、不同平台的规范;6)产品视觉感;7)沟通能力。
篇三:
app-ui规范
app-ui设计规范
——0.1版本
1.设计尺寸及像素
作图的时候尽量用形状工具画矢量图,方便后期图片尺寸的变更及切图。
现在主流尺寸如下:
android
480×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。