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

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

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

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

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

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

下面来看老谭老师聊聊一些关于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增加横版显示，所以建议对于一些用户量较高的软件进行重绘。

如下图所示：

 

 

第二种版本

以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。这种尺寸，可以简单将场景居中显示，各自将场景拉伸到最大。