从寻路、排版层级、对比度三个方面介绍 iOS 11 设计上的一些变化，从而帮助你设计一个具有丰富的视觉层级、清晰的导航、易于使用和简单的交互的 app。

概述

Wayfinding：在 iOS 11 中提供更加清晰的导航、贯彻整个系统的"寻路"

Typographic Hierarchy：通过排版（字体排印）的调整，聚焦整体的层级

Contrast：对于有用的信息，在 UI 上增加对比度

1. Wayfinding / 寻路

- 通常意义下，寻路就是指导人们通过某个环境、在物理空间自我定位；如生活中常见的标识和信息系统：街道标识、机场、停车场

- 在 UI 中寻路，以增强使用体验，理解你所处的空间

- App 需要清晰的视觉层级

- UI 元素不应该与内容发生竞争，而应该帮助你更好的理解潜在的功能和交互

- 使用大标题导航栏

- 如果内容和层级众多，在某些二级页面也可以使用大标题导航栏，例如「音乐」App 中「浏览」tab 中的「最新音乐」、「歌单」、「排行榜」↓

在布局相似的页面里也可使用大标题导航栏，例如「电话」app，每个 tab （个人收藏、最近通话、语音信箱）都是行式的文本内容，使用大标题导航栏可以让用户立即知道自己在哪里↓

在导航栏中使用大标题并不总是必要的，在某些场景下会阻碍其可用性，例如「时钟」App，虽然它有多个 tab，但是它没有复杂多样的内容，每一个 tab 的布局也十分容易区分，如果使用大标题导航栏，反而会使其与内容发生竞争↓

2. Typographic Hierarchy/排版层级

- 通过排版上的层级变化，可以强调更加重要的内容，帮助内容成组

- 减少认知负担，减少在寻找某些东西时所付出的精神努力

- 建立排版层级的几个基本的方法（下图很好地诠释了）

    -Position 位置：上面的会比下面的重要一些；

    -Size 尺寸/字号：大尺寸的会比小尺寸的重要一些；

    -Weight 字重：粗字重可以强调效果，细字重可以减弱效果；

    -Color 颜色：如白色对比灰色，白色会有强调效果。

注：一次可能会用到多种方法。

↓

↓ iOS 11 中的几个实例 ↓

「照片」App：内容 — — 你的照片是这个 App 中最重要的。导航照片的每部分的标题，在 iOS 10 中采用了两种字号来区分两种信息，但仍然显得有点小、有点轻，而在 iOS 11 中，让每部分的标题字号更大，地点信息增加了字重，日期信息采用了灰色文本。这些改变可以使你分离内容中的重点更简单了，让你更快地找到某张特别的照片↓

「日历」App：在 iOS 11 中为了强调增加了字重，有意地使用颜色指示当前的年月日↓

「天气」App：在 iOS 11 中，增加了文本字重，整体上增大了字号，使得内容更加容易阅读↓

3. Contrast / 对比

在 UI 中，为了与更大、更粗的文本样式保持平衡，需要更新其他 UI 元素，增强其对比度，同时还要保持其功能性

在 iOS 11 中由此带来的一些改变：填充按钮的形状，如数字键盘↓

增加形状的尺寸，如搜索输入框↓

Tab Bar：增加文本标签的字重（从 regular 到 medium），填充 icon 的形状、增加笔画的权重↓

iPhone 横屏下的 Tab Bar：为了对空间更好地利用，把文本标签放在了 icon 的右边（iOS 10 中是一上一下），这样使得横屏下的 Tab Bar 更矮了，从而与导航栏、工具栏高度一致。第二，相对于竖屏，横屏下的 icon 会稍小一些，文本会稍大一些，设计自己的 app 时需要考虑这些因素↓

Wallet App：在 iOS 10 中使用了模糊效果，似乎想要表明其位于底下的页面之上，但这个并不符合逻辑，也没有起到指示所处空间的作用，所以在 iOS 11 中移除了这种模糊效果↓

感谢原作者：北极熊不不

Session链接：https://developer.apple.com/videos/play/wwdc2017/810#

我的总结 ; )

此次 iOS 11 的设计战略之基本诉求是希望用户在使用 iOS 过程中也能像物理世界中那样有清晰的导引（iOS 经过长期地发展，系统变得越来越复杂）所以把「Wayfinding」概念引入到设计中。

如何将「Wayfinding」（寻路）的概念在 UI 设计中落地，上文中已经阐述地比较清楚了，即通过Typography（字体排印）与Contrast（对比）的方式去实现。

OK！

“字体排印”、“对比”——两个熟悉的名词，我在公众号曾多次推送与它们相关的文章（关注本号的朋友们应有体会）因为它们直接关乎信息的传达效率，这在 UI 设计（甚至可以说所在有的商业设计领域）中是很关键的。而现实中往往………………………………的弊病！好了，不吐槽了：）

So，借着“苹果爸爸”这次 iOS 11 设计战略的东风，有一门课可以说是很合适了，课表如下（注意红色部分）↓

如课表，在 UI 设计的语境里，信息需要通过这些基础的设计原理承载、呈现。

所以，重要的不是设备、不是软件，是设计本身。这些基础过关了，产品的功能自然达到了，当然，它一定也是美的。所以，认同这个观点的朋友可以加我微信：prxt_16  或扫码↓

我为您准备了一个以实战流程为基础的 UI 设计实战训练营，欢迎垂询~谢谢！

一句话结束今天的推文

努力不以追求单纯的视觉效果而设计，转而去追随诸如逻辑、理性、功能、故事性……

当真正做到这些的时候，美悄然而至。

由内而外。