谈谈iOS 11 设计中的几个 UI 设计细节

Question

如题所述

Answer 1

北京时间9月20日凌晨1点，iOS 11终于迎来了正式版的推送，相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新，UI、系统内核、锁屏等多方面都进行了不同程度的改进。小编第一时间为大家整理好了iOS 11优秀 UI Kit的下载资源，并且与大家谈一谈UI Kit背后的iOS 11的新变化。
1、 iOS 11 UI 的新变化
在准备着手设计前，首先我们来梳理一下iOS 11 的设计理念。在iOS系统的长期发展中，随着功能和界面的不断丰富，整个系统日趋复杂，App内部的功能架构也有同样的情况。因此，Apple设计团队在新系统中强调了“指引”这一设计思维，并充分地把这一设计思维贯彻到了iOS 11的方方面面。
此外，我们再来看看苹果设计团队的设计原则：
• 内容凸显的第一原则
• UI元素不与内容竞争，除非是帮助用户去理解潜在功能的作用
在这样的设计思维和原则的基础上，我们从以下几个角度进行分析。
（1）粗体标题导航栏
扁平化设计中，文字排版影响着信息层级的展示的清晰与否，通过文本的字号、字重、颜色等的对比去建立清晰的信息层级，而不用太多的装饰元素。iOS 11中最让你印象深刻的莫过于粗体大标题栏的变化。
如果你想要打造顶层是标签栏结构的APP，这种设计规范就会非常适合，使用粗体大标题能够让用户在大量的标签切换中快速地意识到自己目前所处在的位置；
<img src="https://pic1.zhimg.com/50/v2-797e4a0e04bb90aeb70246a09385afe3_hd.jpg" data-rawwidth="900" data-rawheight="565" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic1.zhimg.com/v2-797e4a0e04bb90aeb70246a09385afe3_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
尤其是对于内容丰富的APP，大量的页面和各种深度的结构层次，在使用大标题后，相信可以起到很好的页面引导作用。
<img src="https://pic3.zhimg.com/50/v2-834992e89635878ade7c517b3c983601_hd.jpg" data-rawwidth="900" data-rawheight="400" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic3.zhimg.com/v2-834992e89635878ade7c517b3c983601_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
但是我们看到的是，时钟这项系统应用仍然保持了原有的字体排版模式，其原因在于这项应用在内容和功能上互相平行独立，非常容易分辨，如果在每项的界面继续采用大标题，UI元素会潜在对内容造成了竞争，从而违背了基本设计规则。相应的如果是内容和布局类似的APP的话，粗体标题就会起到很好的指示作用。
<img src="https://pic4.zhimg.com/50/v2-4307481ed092dda3c8a2ed6e80424f64_hd.jpg" data-rawwidth="900" data-rawheight="320" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic4.zhimg.com/v2-4307481ed092dda3c8a2ed6e80424f64_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
（2）提升设计层次
“层次（层次）”是UI很重要的元素，让重要的，不重要的东西区隔开来，引导使用者的阅读动线。清晰的层次可以减轻用户的阅读负担，降低信息寻找的脑力消耗，从而让主次关系更加协调统一。
• 卡片式和投影
在新版的iOS 11界面中，不少地方采用了卡片式或是宫格式的排列模式，视觉上一致，也易于设计上的迭代。这种主要适用于流量分发的渠道型页面，能够结构层次清晰地展示图文的层级关系，起到规整图文内容的作用；
伴随卡片式的内容一起出现的还有投影的大量使用，令设计元素更加独立醒目，极好的抓住用户的注意力。
<img src="https://pic1.zhimg.com/50/v2-e6738c9996d5f77b2887b571d92e865d_hd.jpg" data-rawwidth="900" data-rawheight="467" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic1.zhimg.com/v2-e6738c9996d5f77b2887b571d92e865d_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
• 界面布局中的留白
iOS 11的大标题文本中都包含一组带有图片和描述的元素，组元素和组元素之间保持较大的间距。这样的话，设计元素和元素之间保持足够的间距，可以减少用来区分层级关系的不必要装饰元素。
<img src="https://pic4.zhimg.com/50/v2-a61792f756620762d91d4df20a236e32_hd.jpg" data-rawwidth="900" data-rawheight="210" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic4.zhimg.com/v2-a61792f756620762d91d4df20a236e32_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
• 颜色/字号/字重
iOS 11中也大量使用了颜色深浅、字号大小和文本粗细来展示标签的不同层次，我们可以看到照片APP在iOS 10中章节标题和照片对比不明显，在更新后，章节标题主标题字体变大加粗，副标题字体变大，颜色变为了灰色，整体层次得到了提升。
<img src="https://pic4.zhimg.com/50/v2-7fababdd117190d22081e773b2259187_hd.jpg" data-rawwidth="900" data-rawheight="504" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic4.zhimg.com/v2-7fababdd117190d22081e773b2259187_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
（3）圆角图标
iOS 11中的大量的图标由2px线性改为了面型，从线框状态变得更加圆润，亲和力。总体来说边角更圆润，空心变为实心，色快感变重，使iOS的视觉更加轻快、柔和。
系统图标中，状态栏讯号强度从•••••改回阶梯式，电量图标的线面比例变得更均衡一些，标签栏图标从空心/实心两态变成全实心粗线条设计，配合整体设计调性。
<img src="https://pic2.zhimg.com/50/v2-3e2cd681862f1d942c85742aded7a36e_hd.jpg" data-rawwidth="900" data-rawheight="540" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic2.zhimg.com/v2-3e2cd681862f1d942c85742aded7a36e_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
2、原型设计
在使用Sketch设计完基于iOS 11系统的静态视觉稿后，想要对设计稿进行进一步的交互设计和团队协作的话，推荐在Sketch中安装Mockplus插件，结合Mockplus就可以轻松将Sketch中完成的设计稿转变成可交互原型，从而在Mockplus中进行快速原型设计，并且与团队成员进行协作和批注。
<img src="https://pic1.zhimg.com/50/v2-29ba3ba2ed302eeb6ef9788cdfefc7ac_hd.jpg" data-rawwidth="900" data-rawheight="297" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic1.zhimg.com/v2-29ba3ba2ed302eeb6ef9788cdfefc7ac_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
下载地址：https://www.mockplus.cn/download
3、iOS 11 UI Kit资源集锦
（1）Apple官方下载地址（PS、Sketch）：
https://developer.apple.com/design/resources/#ios-apps
<img src="https://pic1.zhimg.com/50/v2-4f076a1604e7ade6aed0c235d0d62772_hd.jpg" data-rawwidth="900" data-rawheight="579" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic1.zhimg.com/v2-4f076a1604e7ade6aed0c235d0d62772_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
<img src="https://pic4.zhimg.com/50/v2-d526935ad8f5b197152878c7a3e2f34f_hd.jpg" data-rawwidth="900" data-rawheight="940" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic4.zhimg.com/v2-d526935ad8f5b197152878c7a3e2f34f_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
（2）iOS Design Kit下载：
https://www.iosdesignkit.io/ios11-gui/
<img src="https://pic3.zhimg.com/50/v2-b94305d19547e5059843870fa5411b55_hd.jpg" data-rawwidth="900" data-rawheight="563" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic3.zhimg.com/v2-b94305d19547e5059843870fa5411b55_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
<img src="https://pic4.zhimg.com/50/v2-d5c217268ec0ee43f1cb1ad1f3726528_hd.jpg" data-rawwidth="900" data-rawheight="563" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic4.zhimg.com/v2-d5c217268ec0ee43f1cb1ad1f3726528_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
（3）UI 8 下载：

https://ui8.net/products/sparks-ios-11-ui-kit
<img src="https://pic1.zhimg.com/50/v2-b5fea746d97c96f775cd8f7d4408b815_hd.jpg" data-rawwidth="900" data-rawheight="470" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic1.zhimg.com/v2-b5fea746d97c96f775cd8f7d4408b815_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
（4）Sketch APP Source下载：
https://www.sketchappsources.com/free-source/2689-ios-11-app-store-design-uu-sketch-freebie-resource.html
<img src="https://pic1.zhimg.com/50/v2-af666d060a2dde6df6118bc959c939a7_hd.jpg" data-rawwidth="900" data-rawheight="462" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic1.zhimg.com/v2-af666d060a2dde6df6118bc959c939a7_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
（5）Applypixels下载：

https://applypixels.com/template/ios-11-ui-kit/
<img src="https://pic4.zhimg.com/50/v2-40f413c112d2e4728467c0151e33b813_hd.jpg" data-rawwidth="900" data-rawheight="592" class="origin_image zh-lightbox-thumb" width="900" data-original="https://pic4.zhimg.com/v2-40f413c112d2e4728467c0151e33b813_r.jpg" style="display: block; max-width: 100%; margin: 0px auto; cursor: zoom-in;">
相信有了这些资源和工具后，大家能够快速地做出适配iOS 11的APP视觉稿和原型，关于更多详细的设计规范和资源，大家可以参考苹果官方的人机交互指南：
苹果人机交互指南
https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
iPhone X适配指南
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/本回答被网友采纳