ios设计规范.docx
- 文档编号:409668
- 上传时间:2022-10-09
- 格式:DOCX
- 页数:5
- 大小:18.71KB
ios设计规范.docx
《ios设计规范.docx》由会员分享,可在线阅读,更多相关《ios设计规范.docx(5页珍藏版)》请在冰豆网上搜索。
ios设计规范
竭诚为您提供优质文档/双击可除
ios,设计规范
篇一:
ios界面设计尺寸规范
ios界面设计尺寸规范
一、尺寸及分辨率
iphone界面尺寸:
320*480、640*960、640*1136、750*1334、1080*1920等。
ipad界面尺寸:
1024*768、2048*1536等。
单位:
像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。
ps
:
作图的时候确保都是用形状工具(快捷键:
u)画的,这样更方便后期的切图或者尺寸变更。
二、界面基本组成元素
iphone的app界面一般由四个元素组成,分别是:
状态栏、导航栏、主菜单栏、内容区域。
640*960的尺寸设计下这些元素的尺寸。
状态栏:
就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:
40px
导航栏:
显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:
88px
主菜单栏:
类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:
98px
内容区域:
展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:
734px
[下图说明:
]
至于我们经常说的iphone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。
ps:
在最新的ios7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计ios7风格的界面的时候多多注意下~
三、字体大小
heitisc(黑体-简,黑体-简的英文名称为heiti
sc。
heiti为黑体的拼音,sc代表简体中文(simplifiedchinese)),是macosxsnowleopard(版本10.6)包含的简体中文字型,也是iphoneos
3.0(版本4.0后改名为ios)及ipodnano第五代以来的预设简体中文字型。
黑体-简系为黑体,取代华文黑体成为macosxsnow
leopard的预设简体中文字型。
在过去,华文黑体是macos
x的预设简体中文字型,因此以前并没有黑体-简。
黑体-简是全新的字型,与黑体-繁同以华文黑体为基础开发,成为macosxsnowleopard与iphoneos
3.0(版本4.0后改名为ios)之后内建并同时为预设的简体中文字型。
虽与华文黑体为两套字型,但差异微小,仅排列上有差距,笔画的差距也十分微小。
包含“细体”与“中黑”,黑体-简与黑体-繁皆使用.ttc(truetype
collection)格式,可以在单一档案包含多套字型。
其中,黑体-简与黑体-繁的细体在/system/library/Fonts/stheitilight.ttc,黑体-简与黑体-繁的中黑在/library/Fonts/stheitimedium.ttc。
在ios中默认字体分为三类:
第一种:
stheiti-light.ttc和stheiti-medium.ttc代表的是中文字体
第二种:
_h_helvetica.ttc和_h_helveticaneue.ttc代表的是英文以及数字字体第三种:
lockclock.ttf代表的是锁屏时间字体
iphone上的字体英文为:
helveticaneue
。
至于中文mac下用的是黑体,win下则为华文黑体。
下图是XX用户体验做过的一个小调查,可以看出用户可接受的文字大小。
其实还有个更简单的方法就是找你觉得好的app应用,手机截图后放进ps自己比对调节字体大小咯。
我的音乐——34px,我的、淘歌、发现——30px,muxx——34px,本地音乐——30px,泡沫、邓紫棋——24px
总之,方法是自己找到的,想办法解决问题,自己实践,比别人告诉你印象更深刻不是么?
一、尺寸及分辨率android
界面尺寸:
480*800、720*1280、1080*1920。
[单位:
像素]
android比iphone的寸尺多了很多套,建议取用720*1280这个尺寸,这个尺寸720*1280中显示完美,在1080*1920中看起来比较清晰,切图后的图片文件大小也适中,应用的内存消耗也不会过高。
二、界面基本组成元素
android的app界面和iphone的基本相同:
状态栏、导航栏、主菜单、内容区域。
android中我们取用的720*1280的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。
篇二:
ios设计规范
一款app的设计稿从设计到切图
第一部分项目立项阶段
在项目设计之初,就该进行项目归档整理,一般是是“项目名称+版本序列”
第二部分photoshop
ios的各种分辨率。
1.640*960iphone4时代的尺寸,我最开始用这个尺寸设计,还是拟物的时代呢(基本上现在应该没人用这个尺寸设计了吧);
2.640*1136iphone5/5s/5c,一更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了;
3.750*1334iphone6目前是我做设计稿的设计尺寸,iphone的尺寸,向下可以适配iphone4,iphone5,向上可以适配iphone6plus;我记得iphone6
推出后,我问我的设计总监(从业12年)应该用什么尺寸设计,他是就用iphone6的尺寸吧,好适配,切出来就是@2x了,上下都能照顾到。
所以,我推荐做设计稿的时候使用iphone6的尺寸进行设计。
iphone6的尺寸其实相比于以前的5来说很多地方并没有变化,只是高度也就是内容显示区域发生了变化。
下面是iphone6的空白文档,我建立了参考线。
▼
里面已经设置好了参考线,文档建立之初就设置好参考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。
上下的参考线很容易设置,因为是根据iphone自身系统设置的,左右的参考线我习惯设置为24px,也就是显示内容距离边框的距离。
这不是绝对的,究竟是设置为左右30px还是24px比较好,通过对国内国外各种app的对比,觉得24px更适合一些,不宽不窄,这个完全是设计师个人的设计习惯,所以不要当成什么规范,
第三部分标注下面讲标注的问题,页面怎么标,标哪里,可能我涉及不到所有类型页面,但举一反五足够了;切片输出以及切片命名我们下期再说(如果有错误,请一定要及时帮我指出,我不想误人子弟)。
标注是重中之重,工程师能不能完整的还原设计稿,很大一部分取决于标注;如果不清楚你该怎么标,别怕丢人(我知道有些设计师,特别是刚接触工作的设计师并不敢张嘴去问),一定要和工程师沟通!
包括怎么标,怎么切。
每个工程师实现效果的方法不同,我在这里所说的,是我的标注习惯,也就是我们工程师的开发习惯,但应该适用于大部分的设计师和工程师。
不需要每一张效果图都进行标注,你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可;当然,这要看跟你配合的工程师的习惯,比如我现在搭档的两位ios工程师,一位要求我全都要标注,另一位要求我标注代表性页面就好(记得标注之前一定要沟通清楚)。
篇三:
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
图标尺寸
设备
iphone6plusiphone6iphone5/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字体大小的调查结论如下:
pa
ste_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的字体大小调查结论是
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ios 设计规范