您当前的位置：中国科学网>资讯>正文

iOS的五大规划准则你把握了吗

时间:2020-01-05 07:05:52 作者：责任编辑NO。卢泓钢0469

说起iOS，大家都很熟悉，

它是苹果公司研发的一套手持操作系统，

iPad，iPhone，iPod touch等产品，

都是使用的这个系统。

可以说，苹果产品的成功，

iOS系统占据了大半的功劳。

此后，苹果公司一路开疆扩土，

从一个濒临破产的公司，

发展到市值万亿的巨无霸，

而成功的背后，

离不开它一直以来的创新精神。

iOS历程：

苹果的设计从未停止过“创新”。2007年1月苹果发布了iOS手持设备操作系统，这为未来的移动设备发展做出了很重要的贡献。在2013年秋，苹果推出了“扁平化”设计，这是自2007年iPhone问世以来，iOS操作系统进行的最大一次改版。回顾iOS系统的发展，就会发现苹果最不缺的就是创新。如今，已确定进入iOS 13的时代，走过了整整12年的时间。

苹果的目标永远没有改变，做极致的设计，让用户的易用性达到最好。当然，这也是设计的原则。苹果的设计在视觉上注重3点：主次分明、去粗取精、醒目易懂。

这样的UI设计才能称得上是情怀，而极致体现在给用户带来的惊喜上。下面我们先来看看iOS的几个极致的细节设计。

第1个：iOS键盘上每个字母的触控区域的大小是不一样的，会随着输入的频率发生改变，如图所示。

iOS的键盘

第2个：为了让文本的使用更加方便，关键信息会自动加上链接，例如网址、地址、电话和时间等信息，如图所示。

iOS的文本

第3个：在早期的iOS 6.0系统中，此时的设计还遵循着“拟物化”设计，音乐滑动条的设计高度还原了金属的真实效果，当用户倾斜手机时，会发现金属音量滑块的反光效果会闪动，如图所示。

iOS 6.0系统的音乐滑动条

第4个：为了满足用户在不同场景中都能操作方便，会将信息以多种入口进行展示。例如在短信中考虑到信息文本过长的情况，用户可能第一时间无法看到时间信息，因此iOS的短信在左滑时也能够正常的看到时间，从而方便用户阅读时间信息，如图所示。

iOS的短信

下面书单君为大家详细的介绍一下iOS的5大设计原则，希望我们大家能从这些设计原则中寻找到属于自己的设计。

01 凸显内容原则

凸显内容原则就是去除多余的元素，做极致的设计！在iOS的设计中，经常会利用整个屏幕背景进行设计，这样做才能够让信息的聚合度变得更好，如图所示。

用整屏背景进行设计

使用半透明的效果能加强场景的代入感，让用户知道是从哪打开的，可以更好地体现出上下层的关联性，如图所示。

用半透明加强场景的代入感

在阅读信息的时候，为了解决不同用户的需求，可以对文本的字号大小进行设定，从而保证阅读性，如图所示。

设定文本的字号大小

在iOS 7.0之后，导航中的按钮实现了无框化，只需要通过颜色进行区分，通过高亮的文字即可体现文字的可点击性，如图所示。

无框化的按钮

当在一个页面中存在很多按钮时，为了降低页面的信息压力，页面中的按钮多数使用的是描边形式的“幽灵按钮”，如图所示。

用描边按钮降低页面的信息压力

02 统一化原则

统一化原则主要体现在视觉统一和交互统一两个方面。在视觉统一方面，要讲究字体、颜色和元素的统一性，标题字号的统一，主色彩和辅助颜色的统一都是能够体现出产品一致性的基本标准，关于这方面的知识将在后面的内容中进行详细介绍；交互统一，是指操作使用的一致性，在一个软件中保持交互形式的一致性可以大幅度的降低用户的操作时间。

下面来对比一下锤子手机和苹果手机的时钟设置方式。在锤子手机的界面中设置闹钟、秒表和计时器的方式都是在不同的位置进行设定的，交互的形式有点击和下拉方式，其视觉表现的形式也不相同，对于第一次使用的用户来说，操作起来会比较困难，如图所示。

锤子手机闹钟、秒表和计时器设置

而在苹果的设计中更为讲究操作的统一性，操作方式全是点击，秒表和计时器都是使用点击开启的方式，这样的设计能让用户在最短的时间内找到正确的操作方式，如图所示。由此看来，交互统一比视觉统一在用户体验方面要更重要一些。

苹果手机闹钟、秒表和计时器设置

在交互中要遵循从哪来回哪去的原则，要保持路径的统一性。能够正常的看到在iOS系统中，点击App主图标后会基于产品的icon放大展示出产品的主界面，如图所示，当按Home键退到主页界面的时候也是基于产品icon的缩放进行消失的。这样的交互方式能更好地体现出页面与App之间的关系。

基于产品的icon放大展示主界面

03 适应化原则

适应化原则包括了场景适应和屏幕适应两种，一个指的是使用场景的适应，另外一个是屏幕的适配。

在苹果的原生天气App中，不但可以通过天气的变化进行自适应匹配，还可以根据时间来区分白天和黑夜，让用户在不同的环境和时间下都能感受到软件的智能性，如图所示。

苹果的原生天气App

在很多的阅读类产品中也会有日夜的切换功能，从而保证用户在夜晚关灯的模式下还能舒服地进行阅读，如图所示。

日夜切换功能

有时候能够最终靠硬件和软件的结合来对场景进行适应，在TCL 360空气净化器的界面设计中，可以通过不同的颜色来表现空气的指数，这样可以用直观的方式表现空气的质量，如图所示。

TCL 360空气净化器的界面

相比于适应化原则中的场景适应，屏幕适应则更为重要。在iPad的界面中要考虑横屏和竖屏的效果，设置界面的左侧菜单的宽度是保持不变的，而右侧的列表信息会发生适应变化，这是常见的适配方式，可以有效保证视觉的统一性，如图所示。

屏幕适应

在横屏和竖屏中的适配中，经常会出现视觉不平衡的情况，我们会对单独的控件进行调整适配。

例如计时器的时间选择框，为了让竖屏模式下的界面显得更为饱满，对其单独进行了放大设计，让页面从视觉上看起来更为舒服，如图所示。

计时器的时间选择框

在手机移动端中，苹果有iPhone4、iPhone5、iPhone6和iPhone6Plus等不同的机型，其中iPhone4和iPhone5的屏幕比例还不一样，有时候为了让用户在不同的机型上都能看到想要展示的信息，就需要考虑到在不同比例上的屏幕适应。

例如在图1中，直接嵌套后可以看到在iPhone4下的界面展示不完整，而单独对iPhone4中的按钮进行缩放处理，让整体功能（下面的两个按钮）在一个页面中展示完整，可以大大节省展示空间，如图2所示。

图1：直接嵌套后的界面展示不完整

图2：单独对按钮进行缩放后可展示完整

在设计工作中，我们应该设计哪个尺寸？如何只做一套设计图就可以完成多屏幕的适配呢？下面以iOS的界面尺寸为例来进行讲解。

苹果手机的分3种主要的分辨率，即640px×1336px、750px×1334px和1242px×2208px，其中切图的后缀分别为@2x、@2x和@3x，如图所示。在现在的硬件设备趋势下，效果图可以出iPhone6的尺寸大小，也就是750px×1334px的大小，可以通过iPhone6的基础尺寸来进行适配。

苹果手机的分辨率

在Photoshop CC 2015中新建文档时，可以从“画板大小”选项中找到iPhone机型的分辨率，如图1所示。一般会使用画板的方式来制作App界面，因为在一个画布中可以建立多个画板，这样可以同时处理多个页面，从而保证页面的统一性，同时也方便进行制作，如图2所示。

图1：在画板大小中设置iPhone分辨率

图2：在一个画布中建立多个画板

因为设计的效果图是iPhone6的尺寸（750px×1334px），所以在设计的过程中我们要理解界面元素的适配原则。由于iPhone5和iPhone6的屏幕精度是一样的，所以从iPhone5到iPhone6的适配可以进行拉升适配，但是不同元素的拉升方式也是不同的。iPhone5和iPhone6共用一套切图，如图所示是同款App在不同屏幕下的截图大小对比。

同款App在不同屏幕下的大小对比

在将iPhone5适配到iPhone6时，头像和文字的大小可以保持不变，导航条可以通过左右进行拉伸适配，如图1所示；对于文字的适配，能够准确的通过屏幕的宽度进行折行显示，如图2所示；对于按钮控件的适配，可以保持按钮的高度进行左右拉升适配，如图3所示；对于图片适配，可以进行等比缩放，如图4所示。

图1：导航条的适配

图2：文字的适配

图3：按钮控件的适配

图片的适配

对于iPhone6适配到iPhone 6 Plus就更好办了，因为iPhone6Plus的尺寸是iPhone6的1.5倍，所以只需要出一套@3x的切图就可以了（1.5倍iPhone6的切图）。

04 层级性原则

很多设计师在设计的过程中经常会将页面设计得很丰富，每个图标每个形状都制作得很细致，但是做完以后发现整体页面变得杂乱无章，没有聚焦点，这就是没有抓住主次的原因。

那什么是设计的层级呢？让用户视线集中在主要的任务上！从视觉上认知的一种空间关系，有层级的设计能让用户提高效率引导用户阅读。从阅读的视线来讲，在阅读信息的时候是先垂直再横向，从左到右，从上到下进行阅读的，所以会把信息层级按照这样的方式进行排列，类型筛选放在上面，然后才是详细筛选分类，如图所示。

阅读的主次顺序

在设计时，经常会将内容主图标展示在左边，而描述性的文字和按钮会放在右边，如图所示。