从iOS 11 UI Kit中谈谈iOS 11的新变革

北京时间 9 月 20 日凌晨 1 点，iOS11 终于迎来了正式版的推送，相信各位小伙伴已经在第一时间进行了升级。iOS11 毫无疑问是一次大规模的系统更新，UI、系统内核、锁屏等多方面都进行了差别程度的改进。小编第一时间为大家整理好了iOS11 优秀 UI Kit的下载资源，而且与大家谈一谈UI Kit背后的iOS11 的新变革。

1、 iOS 11 UI 的新变革

在准备着手设计前，首先我们来梳理一下iOS 11 的设计理念。在iOS系统的长期发展中，随着功能和界面的不停丰富，整个系统日趋复杂，App内部的功能架构也有同样的情况。因此，Apple设计团队在新系统中强调了“指引”这一设计思维，并充分地把这一设计思维贯彻到了iOS11 的方方面面。

此外，我们再来看看苹果设计团队的设计原则：

• 内容凸显的第一原则

• UI元素不与内容竞争，除非是帮手用户去理解潜在功能的作用

在这样的设计思维和原则的基础上，我们从以下几个角度进行分析。

(1)粗体标题导航栏

扁平化设计中，文字排版影响着信息层级的展示的清晰与否，通过文本的字号、字重、颜色等的对比去建立清晰的信息层级，而不消太多的装饰元素。iOS11 中最让你印象深刻的莫过于粗体大标题栏的变革。

如果你想要打造顶层是标签栏结构的APP，这种设计规范就会非常适合，使用粗体大标题能够让用户在大量的标签切换中快速地意识到本身目前所处在的位置;

尤其是对于内容丰富的APP，大量的页面和各种深度的结构层次，在使用大标题后，相信可以起到很好的页面引导作用。

但是我们看到的是，时钟这项系统应用仍然连结了原有的字体排版模式，其原因在于这项应用在内容和功能上互相平行独立，非常容易分辨，如果在每项的界面继续采用大标题，UI元素会潜在对内容造成了竞争，从而违背了基本设计规则。相应的如果是内容和布局类似的APP的话，粗体标题就会起到很好的指示作用。

(2)提升设计层次

“层次(层次)”是UI很重要的元素，让重要的，不重要的东西区隔开来，引导使用者的阅读动线。清晰的层次可以减轻用户的阅读负担，降低信息寻找的脑力消耗，从而让主次关系更加协调统一。

• 卡片式和投影

在新版的iOS11 界面中，不少地方采用了卡片式或是宫格式的摆列模式，视觉上一致，也易于设计上的迭代。这种主要适用于流量分发的渠道型页面，能够结构层次清晰地展示图文的层级关系，起到规整图文内容的作用;

陪同卡片式的内容一起出现的还有投影的大量使用，令设计元素更加独立醒目，极好的抓住用户的注意力。

• 界面布局中的留白

iOS11 的大标题文本中都包罗一组带有图片和描述的元素，组元素和组元素之间连结较大的间距。这样的话，设计元素和元素之间连结足够的间距，可以减少用来区分层级关系的不须要装饰元素。

• 颜色/字号/字重

iOS11 中也大量使用了颜色深浅、字号大小和文本粗细来展示标签的差别层次，我们可以看到照片APP在iOS10 中章节标题和照片对比不明显，在更新后，章节标题主标题字体变大加粗，，副标题字体变大，颜色变为了灰色，整体层次得到了提升。

(3)圆角图标

iOS11 中的大量的图标由2px线性改为了面型，从线框状态变得更加圆润，亲和力。总体来说边角更圆润，空心变为实心，色快感变重，使iOS的视觉更加轻快、柔和。

系统图标中，状态栏讯号强度从•••••改回阶梯式，电量图标的线面比例变得更均衡一些，标签栏图标从空心/实心两态酿成全实心粗线条设计，配合整体设计调性。

2、原型设计

在使用Sketch设计完基于iOS11 系统的静态视觉稿后，想要对设计稿进行进一步的交互设计和团队协作的话，保举在Sketch中安置Mockplus插件，结合Mockplus就可以轻松将Sketch中完成的设计稿转酿成可交互原型，从而在Mockplus中进行快速原型设计，而且与团队成员进行协作和批注。

下载地址：https://www.mockplus.cn/download

3、iOS 11 UI Kit资源集锦

(1)Apple官方下载地址(PS、Sketch)：

https://developer.apple.com/design/resources/#ios-apps

(2)iOS Design Kit下载：

https://www.iosdesignkit.io/ios11-gui/

(3)UI 8 下载：

https://ui8.net/products/sparks-ios-11-ui-kit

(4)Sketch APP Source下载：

https://www.sketchappsources.com/free-source/2689-ios-11-app-store-design-uu-sketch-freebie-resource.html

(5)Applypixels下载：

https://applypixels.com/template/ios-11-ui-kit/