IOS界面设计尺寸标准规范

在现在的互联网行业中，有一个职业叫做UI设计师，UI的日常工作就是保证高保真设计稿的设计，对于IOS以及Android来说都是有不同的设计规范的，下面我们一起来了解一下IOS UI的设计规范。

先来说说设计稿的尺寸，一般来说在做IOS设计稿的时候，设计稿尺寸我们都是选择650*1334这个尺寸，如果是1x的话，就是375*667。

我们从上到下以1x的规范来进行了解，最上边的就是状态栏了，状态栏的高度是20，宽度都是375。

那么状态栏都是有哪些元素呢？实际上就是信号、网络状态、时间以及电量和通知等。

在信号栏下边就是我们的导航栏，导航栏的高度为44px。

导航栏中肯定是有导航文字的，导航文字一般来说我们都是居中对齐，并且导航文字的大小应该为18px。

接下来就是最底部，最底部就是我们的标签栏了，标签栏中都是我们的切换图标，标签栏的高度为49px。

标签栏中的图标大小也是有规范的，最小的点击区域我们必须保证为24px，低于这个范围的话是不方便进行操作的。

在图标的下方一般都还有文字，这里文字的大小比较小，可以根据图标大小来进行调整，一般来说文字大小为11、10px。

总的来说着就我们IOS UI的设计规范了，其他还有就是内容区域的文字大小规范了，一般来说都是16、15、14、12这四个文字大小，具体根据需求进行设计。

在iOS中默认字体分为三类：

第一类： STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体，常用的方正黑体简体（不能商用）和微软雅黑（不能商用），也可以是冬青黑体简体（暂不详版权）和思源雅黑（免费）。

第二类： _H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及数字字体，常用的字体Helvetica

第三类： LockClock.ttf代表的是锁屏时间字体

中文字体： Mac下黑体、微软雅黑、华文黑体、方正黑体简体、思源雅黑、冬青黑体简体等（，看个人习惯，具体设计需求也可以是不常见字体）

英文字体： HelveticaNeue , Arial Bold(Regular)(具体设计需求也可以是不常见字体），在选用不常见字体要在后面切图中：相关的字体要有图片形式导出.png图片，以及如有需要要有文字的字体包，当然还有使用版权的许可。

文件包命名规则是：项目名字＋切图＋作者名字＋日期

例如：蚂蚁金服基金3.5.8.5版本迭代-H5页面设计_切图_李笑_20170321

文件包压缩一直采用.zip格式

文件包要包括：image，效果图＋标注图，切图简单说明（word等文件）。

打开如下图：

在image中切图文件和切图命名中：

···不要出现大写，

···不要有中文、特殊符号以及空格，

···字母必须是小写字母，

···同类切图大小一致（后续文章单独整理切图方法和常见问题）

···iOS切图文件要有二倍像素适配（750px*1334px）iphone6，iphone7和三倍像素适配（1242px*2208px）iphone6 plus，iphone7 plus。需要在名字后面分别加 @2x 和 @3x。具体命名方法是：

模块_类别_功能_状态_@2x／@3x.png  （状态会有：点击状态，点击压下状态，禁用状态，选中状态等）

如：me_bg_nologin@3x.png和me_bg_nologin @2x.png

···iphone4：640x960

···iphone5：640x1136

···iphone6/7：750x1334

···iphone6/7：1242X2208

iPhone图标尺寸及整理如下：

后续会不断的整理和添加修正，欢迎批评指正

如果有用请分享给需要的朋友们

谢谢~

　一. 系统差异

1. 物理按键对返回的影响

安卓的物理按键以及屏幕导航按键的差异是安卓的返回键更加方便，

iOS只有home键，随着全屏的出现，可能会打破这种差异。

因此在设计返回操作的时候需要考虑平台的差异性。

　安卓比iOS增加了物理返回键、底部导航，有些设备可以隐藏底部导航。

全面屏的普及会慢慢打破这种因为物理按键造成的交互及设计差别，全面屏设计适配是要考虑底部按键的差异。

华为全面屏的几种手势：

安卓全面屏出现后，并没有完全舍弃内置导航按键，还有纯手势、悬浮按钮、内置导航条3种方式。随着硬件的发展，安卓和iOS的交互操作会更加趋同，改变这种差异。

返回浮窗的UI表现：

iOS 手机只有一个“Home ”键，为方便用户退出浮层需要增加了“取消”入口。

而 Android 手机本来就有“返回”虚拟键，所以多做一个“取消”的意义性不大。

2. 屏幕分辨率造成的色调选择

Material Design作为谷歌推出的全新的设计语言，和iOS对比，Material Design更加沉稳，iOS更加鲜艳。原因是因为iOS的屏幕分辨率更高，对鲜艳颜色的还原度更好，安卓适应的机型比较多，颜色还原度没有那么好。

深色模式下考虑到用户长期使用的体验，因iOS的还原度高，背景使用#000000，安卓分辨率的限制，文字颜色较浅，谷歌推荐背景色为#121212。有些平台护眼模式和深色模式用两套，比如网易云音乐。

. 软件更新方式的不同

Android ：由于安卓的开源特性，当有新版本时都会提示用户更新，且每个产品内部都带有“版本更新”入口。

更新的方式可分2种：

引导更新：弹出提示让用户更新 APP ，用户点击「更新」按钮前往应用商店更新、或者在当前页面更新并显示下载进度。

强制更新：也是先提示用户更新，只不过用户点击「更新」按钮，即调起软件安装页面。

iOS ：而 iOS 端出于对用户体验的考虑，UI设计中IOS和安卓的设计差异是禁止向用户提示版本更新信息的。这也是为什么绝大部分的 iOS 产品，都是没有“版本更新”入口的原因，即使有，点击了也直接跳转到 App Store 查看版本情况。

4. 切图标注

XHDPI对应的是安卓2倍图，XXHDPI对应的是安卓3倍图，iOS的3倍图和安卓的XXHDPI是一样的。

iOS用375*667px做设计，有些也用750*1334px，原因有3点：

①开发同学不用换算，直接采用1倍图就可以

②sketch切图时导出更加方便

③极大提高了视觉还原和其他机型的适配

安卓用1080*1920px做设计，原因有3点：

①从中间尺寸向上和向下适配的时，调整幅度最小，最方便适配

②大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角

③用主流尺寸做设计，极大提高视觉还原和机型适配

5. 键盘差异引发的搜索框样式

安卓键盘有些是系统自带的，也有第三方的，例如搜狗输入法，iOS更多是系统自带的键盘。

很多输入法在键盘的右侧加入了更加明显的搜索按键，但为了照顾一些用户的操作习惯，安卓还是把搜索放在了搜索框后面。

二. 成本考虑

1. 开发成本

loading

iOS的loading自定义更加常见、个性化强，安卓很多都是用系统自带的(转圈的那种)，主要是考虑开发成本。

TAB样式

2个平台会有特有的控件样式。

安卓系统本身全局actionbar，若去实现其他的样式，会破坏整体的封装，开发成本更高。

iOS系统有自定义的tab切换样式，开发人员只需要更改颜色、圆角，更加方便。

高斯模糊

毛玻璃在iOS比较常见，安卓开发成本高，建议不做这种效果。

2. 商业成本

一般iOS会让用户承担30%的抽成，例如优酷、腾讯的VIP会员价格。

三. 用户习惯

1. 长按侧滑删除

信息列表的侧滑，在iOS中是很常见的操作，但是在安卓更习惯长按，如果改成侧滑删除，会增加用户的理解成本。

　2. 图标设计

返回按钮：一般iOS返回不带横线“<”，安卓喜欢带有横线，例如下图，不过有些app会统一用一种。

分享按钮：一把iOS会采用苹果自带的向上的形式，安卓喜欢用三个圈圈(看下图)。

　弹窗按钮：有些安卓弹窗上的按钮会遵循系统规则，在右侧这种形式，iOS更喜欢居中。

bar标题位置：安卓上的标题跟随着“返回”，在bar的左侧，iOS会喜欢放在中间。

概要：《Photoshop智能手机APP界面设计》讲解三大智能手机(Android、iOS和Windows Phone)APP用户界面(UI)的设计思路和制作过程。全书分为3章，第1章介绍了APP用户界面基础，包括什么是UI设计、手机UI与平面UI的区别和UI设计工具等基本概念和思路；第2章介绍用Photoshop制作各种智能手机UI常用元素，包括常用图形、控件、启动图标以及图片特殊处理等；第3章则是3大类型UI设计的实战练习，同时分析了各手机平台UI的设计思路。

第二本：《iOS App界面设计创意与实践》

在移动开发领域，也许每个App的用途都有所不同，不过它们都一定是源自于同一个开始，那就是一个最初的创意。这个创意可以来自于任何人——设计师或者开发者，营销经理或者CEO。《iOS App界面设计创意与实践》的意义就在于向读者介绍如何把创意变成真实的App。 《iOS App界面设计创意与实践》包括iOS入门、iOS用户界面基� ⑸杓苅OS自定义用户界面对象、向UI添加动画、通过手势进行人机交互等5个部分。

第三本：《移动应用UI设计模式（简易的UI模式参考书）》

移动应用UI设计模式》是一本移动应用UI设计模式参考书，分10大类介绍了70个移动应用设计模式(包括反模式)，用400多个屏幕截图和图解帮助读者理解和利用UI设计模式，以解决常见的设计难题，同时提供了“即学即用”式的技巧和经验。 《移动应用UI设计模式》适合移动应用开发人员、UI设计师阅读。

第四本：《移动Web实现指南——面向移动设备的网站优化、开发和设计》

从移动网站项目最早的创意和发现阶段，到最后的可用性分析，《移动Web实现指南——面向移动设备的网站优化、开发和设计》引导读者使用一种非常全局的方法来思考网站的移动化设计。全书介绍了移动化规划、移动化设计和相应的编码技巧，特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例，也是根据在优化这些网站的过程中所遇到的不同挑战来组织的。更重要地，《移动Web实现指南——面向移动设备的网站优化、开发和设计》还将带领读者思考如何偱序渐进地对网站进行移动化改造。 最后，《移动Web实现指南——面向移动设备的网站优化、开发和设计》还提供一些实例，使读者能够将本书的知识应用于一个现有的网站，以提供更多学习和动手的机会。

第五本：《触动人心——设计优秀的iPhone应用》

本书是《Tapworthy: Designing Great iPhone Apps》的中文翻译版。 可能你设计网站产品或软件界面早已得心应手，可是遇到了iPhone，却感觉无从下手。 无论你是产品经理、设计师、创业者还是程序员，本书都能告诉你如何从iPhone的角度来思考应用设计。本书能帮助你理解如何设计iPhone应用，要创建一款触动人心的应用，需要如何去综合思考设计、心理、文化、人体工程和可用性问题。在书中，你会看到大量的真实应用的设计…

第六本：《认知与设计：理解UI设计准则》

[美]Jeff Johnson 著人民邮电出版社《认知与设计：理解UI设计准则》语言清晰明了，将设计准则与其核心的认知学和感知科学高度统一起来，使得设计准则更容易地在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面，为交互系统设计提供了支持工程方法。不仅如此，这也是一本人类行为原理的入门书。 《认知与设计：理解UI设计准则》不仅适合需要应用用户界面和交互设计准则的软件开发人员阅读，也是软件开发管理者的最佳选择。

第七本：《UI进化论——移动设备人机交互界面设计》

本书内容涵盖交互设计与界面设计的基本概念、设计规范和工作流程。由于这是一本以实际工作案例和工作经验为主的书，一开始着力介绍目前最新发展的交互手段和使用场所，当然是以移动手持设备为主。作为设计师，一定要关心如何将这些创意产品化。接下来介绍如何正确地将一个设计想法变成产品。产品化的过程中，用户体验设计是相当重要的，由于UCD设计思想的广泛使用，本书重点研究并分析用户体验设计的可行性和方法。

1、苹果手机iOS界面设计尺寸和分辨率

（1）界面尺寸：3.5英寸（iPhone1/2/3/4/4S）、4英寸（iPhone5/5S/5C）、4.7英寸（iPhone6/6S）、5.5英寸（iPhone6 plus/6S plus）等。

（2）分辨率：320*480像素（iPhone1/2/3）、640*960像素（iPhone4/4S）、640*1136像素（iPhone5/5S/5C）、750*1334像素（iPhone6/6S）、1080*1920像素（iPhone6 plus/6S plus）等。

2、苹果iOS界面

iOS是由苹果公司开发的移动操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样，属于类Unix的商业操作系统。

3、发展历程

（1）2007年1月9日苹果公司在Macworld展览会上公布，随后于同年的6月发布第一版iOS操作系统，最初的名称为“iPhone Runs OS X”。

（2）2007年10月17日，苹果公司发布了第一个本地化iPhone应用程序开发包（SDK），并且计划在2月发送到每个开发者以及开发商手中。

（3）2008年3月6日，苹果发布了第一个测试版开发包，并且将“iPhone runs OS X”改名为“iPhone OS”。

（4）2008年9月，苹果公司将iPod touch的系统也换成了”iPhone OS“。

（5）2010年2月27日，苹果公司发布iPad，iPad同样搭载了”iPhone OS”。这年，苹果公司重新设计了“iPhone OS”的系统结构和自带程序。

（6）2010年6月，苹果公司将“iPhone OS”改名为现在的“iOS”。