iOS 11 的设计有什么新变化?

2017/08/15 posted in  Design comments

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

概述

  • **Wayfinding:**在 iOS 11 中提供更加清晰的导航、贯彻整个系统的导向;
  • **Typographic Hierarchy:**通过排版的调整,聚焦整体的层级;
  • **Contrast:**对于有用的信息,在 UI 上增加对比度。

Wayfinding 导向

  • 通常意义下,导向就是指导人们通过某个环境、在物理空间自我定位;

  • 生活中常见的标识和信息系统:街道标识、机场、停车场。

  • 在 UI 中导向,可以增强使用体验,理解你所处的空间:

    • 首要目标:高亮/强调内容;
    • app 需要清晰的视觉层级;
    • UI 元素不应该与内容发生竞争,而应该帮助你更好的理解潜在的功能和交互。
  • 大标题导航栏:一种可选的方案,并没有替换掉标准的导航栏样式,页面往下滚动时可以切换为标准的导航栏样式;

  • 在哪里应该使用大标题导航栏:

    • app 每个 tab 的第一层级:让你理解你在 tab 的第一层级、你已经滚动到了页面顶部;
    • 如果内容和层级众多,在某些二级页面也可以使用大标题导航栏,例如「音乐」app 中「浏览」tab 中的「最新音乐」、「歌单」、「排行榜」;

    1

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

    2

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

    3

Typographic Hierarchy 排版层级

  • 通过排版上的层级变化,可以强调更加重要的内容,帮助内容成组;
  • 减少认知负担,减少在寻找某些东西时所付出的精神努力。
  • 建立排版层级的几个基本的方法:
    • **Position 位置:**上面的会比下面的重要一些;
    • **Size 尺寸/字号:**大尺寸的会比小尺寸的重要一些;
    • **Weight 字重:**粗字重可以强调效果,细字重可以减弱效果;
    • **Color 颜色:**如白色对比灰色,白色会有强调效果。
    • 一次可能会用到多种方法。

3EEAB629-094D-4391-9677-DC2CCC4C35A9

  • iOS 11 中的几个实例:

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

    1 1

    • **「日历」app:**在 iOS 11 中为了强调增加了字重,有意地使用颜色指示当前的年月日。

    2 1

    • **「天气」app:**在 iOS 11 中,增加了文本字重,整体上增大了字号,使得内容更加容易阅读。

    3 1

Contrast 对比度

  • 在 UI 中,为了与更大、更粗的文本样式保持平衡,需要更新其他 UI 元素,增强其对比度,同时还要保持其功能性,保证最小化粒度的改变。

  • 在 iOS 11 中由此带来的一些改变:

    • 填充按钮的形状,如数字键盘;

    1 2

    • 增加形状的尺寸,如搜索输入框;

    A4F66E32-2ECC-49B6-873F-476C6599D916

    • Tab Bar:增加文本标签的字重(从 regular 到 medium),填充 icon 的形状、增加笔画的权重;

    F913F827-1261-49A1-9990-864B983EC401

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

    iPhone Tab Ba

    • iPad 横屏下的 Tab Bar:更大的文本尺寸、icon 与竖屏时的大小一致。

    6280686D-473F-41F3-AE7A-C9AD96D0EBF8

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

    4

  • 移除多余的、不必要的 UI 元素,减少复杂度以改善整个 app 的对比度。

参考链接

如果你觉得这篇文章对你有所帮助,欢迎请我喝杯咖啡,感谢你的支持😁