iPhone 6/6Plus UI界面设计和适配尺寸规范

对于iPhone 6/6Plus UI界面设计和适配尺寸规范的相关教程和知识点,网上已经有很多了,而且大部分都是可以值得去参考和学习。而今天25学堂来跟大家分享的必定是

对于iPhone 6/6Plus UI界面设计和适配尺寸规范的相关教程和知识点,网上已经有很多了,而且大部分都是可以值得去参考和学习。

而今天网站模版网(www.genban.org)来跟大家分享的必定是关于APP设计新手容易理解的iPhone 6/6Plus UI界面设计和适配尺寸规范。 也可以说是,目前移动APP设计行业内,小公司里面APP设计师如何用一套UI界面设计稿来解决所有的iphone机型。

下面这张图是iphone手机的所有机型大全:

所有的iphone 手机机型大全

今天网站模版网(www.genban.org)只讲ios系统上面的UI界面设计和适配尺寸规范。安卓的后面再继续,总之懒人也有懒人的办法。欢迎来喷!

2014年,iPhone 6, iPhone 6 Plus发布后,iphone APP设计不得了考虑适配所有iPhone机型啦。

iPhone-6UI界面设计和适配尺寸规范

下面来看老谭老师聊聊一些关于iPhone 6/6Plus UI界面设计和适配尺寸规范的经验和干货。

第一种办法

如果以iphone5s 为基准设计稿,适配iphone6 或者是iphone 6 plus的方法和技巧。

当旧的iPhone 5程序运行在iPhone 6上面,假如没有经过适配。旧程序自动等比放大,铺满新手机,旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了,整体看起来有点虚,也不能更好利用大屏空间。

一套设计稿适配的前提:设计稿必须为矢量的。图片除外。比如图标,线、点、颜色块等元素都是矢量或者形状。

分为两步走:

如果是一些常规界面:比如以文字、列表为主的界面,大部分是指布局相对简单的界面。不用设计师怎么切图的界面,这些基本可以让ios程序员完成适配即可。显示效果也不会太差。

如果是一些定制界面:此时设计师应该手动为大屏幕重新调整设计。另外设计一些大图或者是大的图标,以满足适配iphone6.或者iphone plus

前提是你们的ios程序员需要了解苹果公司的一个工具:Auto Layout

Auto Layout (Auto Layout Guide: Introduction),可以理解成 iOS 上的 CSS,如果设计师用 Auto Layout 提供的排版语言描述出 UI 布局,那不同尺寸的 iPhone 只要同一份设计稿就可以了。

总之:适配iPhone 6/6Plus UI界面设计的要点:

1、针对iphone6 可以用高度不变,横向拉伸。或者等比拉伸

2、全矢量作图。

3、定制界面或图片位图必须额外制作大图。

4、工具栏、状态栏、导航栏的高度规范和设计字体大小等均以2:3的比例放大即可。

5、iphone的5/5S/6/6P的屏幕比例为9:16,所以比例这个问题现在不是很大,但因
Plus增加横版显示,所以建议对于一些用户量较高的软件进行重绘。

如下图所示:

适配iphone字体大小

 

 

第二种版本

以iphone6 为基准设计稿,适配iphone5 或者是iphone 6 plus的方法和技巧。

具体的适配方案和规范 可以点击查看:

最新WebAPP设计指南规范:适配iphone6技巧

 

第三种版本:以iphone6 plus 为基准设计稿,适配iphone5 或者是iphone 6的方法和技巧。

iphone6 plus 的设计尺寸是1242*2208px

解决方法:①简单粗暴的等比例缩放图片尺寸,也就是说直接把现在有的图片资源调整为0.5倍,如果全部用路径画图,会简单许多,直接调整大小即可。

设计尺寸是:1242*2208px 这个尺寸是比较大的,对于哪些电脑配置不够好的小伙伴们可以按照上面的2种做法。
如果你的是mac电脑,直接使用Sketch轻松做到,6和5的切图可以用一套,ppi都是326,6+的话导出3x图就ok。

 

最后,给app设计师9点建议吧!

1、以后的应用程序,都使用AutoLayout, 不要再用绝对定位。

2、使用类似网页的方式来设计界面。

3、设计师好,程序员也好,尽量使用点这个单位进行思考,而不要使用像素。比如,你需要做44 x 66个点的按钮,2x模式,就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点,就是手机上导航栏,工具栏的高度。假如用像素思考,容易使得做出的图片过大或者过小。

4、非矢量素材,就可以做尺寸最大的,之后再进行缩小。比如你需要兼容3x的屏幕,就直接做最高那种图片。

5、而当使用Flash之类的矢量工具来做素材的时候,应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图,3倍图,因为矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就容易失真。更理想的是直接使用矢量图。

6、假如是那种导航栏,工具栏之类的背景图,需要横跨整个屏幕。可以只切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,只拉伸最中间的一列像素。需要拉伸的话,横方向就不要出现一些渐变色。

7、按钮的点击区域,不应该少于44像素,就算按钮的图片看起来比较小,也应该使得点按钮周围的透明区也有反应。

8、可以按照你当前最方便测试机子的型号来做一些主要预览图,效果图。比如你手头有iPhone 5,可以按照iPhone 5的尺寸,320 x 568个点,需要兼容iPhone 6 Plus,就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机,就选较大的,之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式,需要另外处理。

9、上面说的是应用的处理方式,游戏会有些特殊。现在很多游戏,按照1136 x 768的像素尺寸来设计场景,这样可以同时兼容iPad和iPhone,并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素,iPhone 6在2x模式下,是1136 * 640。这种尺寸,可以简单将场景居中显示,各自将场景拉伸到最大。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

25学堂今天跟大家分享12张精美的移动模型素材分享,这12张素材你可以应用在你的移动APP项目当中或者是APP官网设计当中,顿时让你的作品高大上!下面的这12张移
如今再来看扁平化APP设计,还是那么的简洁漂亮!最重要的是扁平化的移动APPUI界面简单实用,对移动设计师来说,...最近,25学堂将会推出很多漂亮的移动APP应用模板(框
有创造性的APPUI设计往往可以大幅度提升用户体验的。那么好的移动APP设计干货和APP设计规范也是新手们的渴求的干粮。25学堂秉着分享和共同学习的原则,收集了
移动APP项目名称:易配货APP 2.0移动APP项目背景:易配货是传化物流产业集团为货主与司机打造的物流信息交易平台,基于诚信会员体系和移动互联技术,为会员
iOS切图神器,我想大家都不会很陌生啦,Cutterman也是目前移动端设计人员用的比较多的一款切图工具。还有25学堂之前推荐的在线切图工具和PS切图插件推荐等。
今天25学堂的小编跟大家分享一个国外优秀的图标字体酷站,也是一个在线编辑的SVG图标素材的酷站-SmartIcons.coSmartIcons 网站是一个提供了1500+个顶级图标和内建多种