设计

用正负空间划分界面内容(上)

. 9 min read . Written by seki
用正负空间划分界面内容(上)

自命令行界面开始,线段就被用作内容分隔手段直至今天,移动端浪潮中,卡片式设计开始大放异彩,再到Airbnb和Instagram的无框设计,视觉内容的划分始终是界面设计工作的重要部分。设计入门书籍中常用一致性、重复和对比这些原则来解释其中原理,然而,实战中我们却仍会为阴影的深度、分割线的颜色而陷入选择困难。

思考视觉划分这一问题,可以从两点出发:

  1. 信息的区分和组织——不同内容之间的区分是否足够清晰
  2. 主次的引导——如何通过样式引导用户浏览的优先级?

苹果vs谷歌 视觉层次如何建立

沉淀下来的经典界面形成设计语言,宣告自己的领地。移动端塔尖的两大系统分别给出了自己的设计语言——iOS人机交互指南与Material Design,这两套指南为设计师们提供了从组件到交互的一整套参考资料,其中自然也包括了视觉分割的方案。但在讨论苹果和谷歌之前,我想先提一下另一套设计语言——微软的Fluent Design System(FDS)。

https://docs.microsoft.com/zh-cn/windows/apps/images/fluent/fluentdesign-app-header.jpg

不论拟物还是扁平,移动端UI普遍通过渐变或者阴影来表达视觉上的层级,这类样式有种通俗的叫法是“2.5D”。FDS的特别之处在于,它并不只是“模拟”三维空间,而是搭建了真正的3D场景,并且,FDS还在组件上加入了3D场景的光照和阴影,这意味着:

  1. 可以将用户关注的组件“拉近”
  2. 可以通过光照来高亮用户需要注意的东西
  3. 并且,阴影的方位也会随之变化
https://docs.microsoft.com/zh-cn/windows/uwp/design/style/images/nav_reveal_animation.gif

FDS通过3D与光影优美地解决聚焦与分割问题,但这种做法有两个技术上的问题,即便是作为设计师的我们也不难理解:

  1. 对设备运算能力要求较高,也就是会容易“卡”
  2. 难以跨平台实现,譬如web端

这导致了FDS的局限性。

那为什么微软会采用这样的设计语言?原因有几个方面,首先,Windows系统占据的市场让他们有底气推开这样一套设计风格,其次,微软也有Hololens这类VR(MR)产品,这套设计语言要能够适配未来的平台。

而iOS与安卓这两套手机系统,基于移动端特点,它们的目标十分明确——如何在这块手掌大的屏幕上更好的交互与呈现。因此,模拟3D的光影与空间,正是解决方法之一。

先看苹果。

目前为止,苹果并没有强调三维视觉。

https://s2.ax1x.com/2019/09/01/npRFQx.png

上图是iOS的表格界面,这个界面中的分割方式有:

  1. 表内采用非通栏线条进行分割
  2. 表格间的灰色色块
  3. 标题与内容通过阴影分割
https://s2.ax1x.com/2019/09/01/n9YF8H.png

iOS模态界面。经典的“毛玻璃”材质,HIG中将这种效果称为"Materials"并指明其用于唤起用户对层级的感知。这个界面的分割方式有:

  • 材质和半透明黑色将页面内容弱化
  • 文本信息/目标Apps/操作之间的通栏线条
  • 主操作区和Cancel按钮的毛玻璃背景互不相连

总而言之,iOS使用了阴影和动效等样式来表现三维空间,但设计语言中没有使用Z轴概念

再说谷歌的Material Design。

与苹果不同,MD非常强调Z轴的使用,以至于在设计规范中分别用三篇文章来介绍MD中的Z轴高度、光影、以及三维视觉这三个概念。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1FjW7ZT_MD39eQlLf2hy_hKwCvXmRe4qo%2Fshadowprinciples-do-1.png

简单来说,MD把所有组件视为1dp(MD中的长度单位)厚度的“纸片”,并通过阴影的样式变化反映Z轴高度,从而形成视觉层级。但又与完全“3D”的Fluent Design不同——MD中纸片的面积并不会随Z轴改变,这点不符合近大远小的透视关系,而且颜色(光照)也不会变得更明亮。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1M4TkRRrjHFL3l8u8EaUu9Do8JR9tUGPr%2Felevation-materialdesign-2.png

MD预设了一套不同Z轴高度下的光影样式,这套映射关系被称为Elevation system,MD以此实现界面分割、动效等视觉。

那么在实战中这套规范表现如何?

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B6xUSjjSulxcYUhTRTFlcmFKeHc%2Frestingelevation-baselineelevation.png

上图是MD给出的示例页面,可以看出,组件确实呈现出了三维视觉,顶部的标题以及右下方的FAB很好的展现了页面层级的视觉效果,并传达了组件相对位置保持固定这一隐喻,单纯从层次区分的角度,这个设计是成功的。

那么Elevation有没有帮助用户理清页面信息?

把自己当作新手用户,在这个页面中,你的视线将如何移动?我想应该是标题——卡片中的ACTION按钮——右下方FAB,之后才到卡片的图片、标题和正文,这样一来,视觉引导完全混乱了。

三维空间和卡片没能建立信息主次,起作用的反而是高饱和度色彩。相比iOS的体系在视觉引导上略显不足。

Material Design的桎梏

苹果在iOS 13.0中推出“深色模式”,并据此更新了自己的设计体系,设计团队希望iOS“保持人们熟悉的样子,并符合操作的直觉”,显然,最大的挑战在于“一致性”。另一方面,谷歌自然也不甘示弱,更新了“深色主题”。它们是如何呈现深色体系的呢?

https://s2.ax1x.com/2019/09/05/nunTJ0.jpg

苹果引入了“梯度”这一概念,背景和文字拥有不同的灰度,以此展现层级的区别。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F11xwGmImm24QEBIRv6a0NzhW-wTc9rFh6%2Fdarktheme-darktheme-usage-availability-toggle.png

谷歌也采用类似的方法,甚至更进一步,建立了深色主题下的Elevation——Z轴高度越高,颜色越白。这也符合三维空间的逻辑:离光源(人眼)越近,物体显得更亮。

那么,问题在哪?

我们知道,界面中的阴影实际上是一层透明渐变的黑色,当背景使用深色时,阴影不再奏效,只能转而使用不同的明度的灰色来作为层级分割。

此时,Material Design建立的光影关系失效了——在通常情况下,阴影有一定角度的偏移,光源仿佛来自用户头顶上,但在深色主题中这个角度消失了,光源更偏向屏幕正对的方向。为了消除这种偏差,保证一致性,MD仍然保留了一部分阴影,为此,最底层背景使用的是深灰色,以保证用户可感知到微弱的黑色渐变。而iOS的最底层却大胆的使用了纯黑色,从而与设备的黑色边框自然的融为一体。

起初,在扁平风格刚成为主流的时候,设计师们仿佛要把拟物化的痕迹赶尽杀绝一般,抹去了物体之间的3D属性。失去Z轴之后,问题却接踵而至——随着移动端同一屏中需要呈现的信息越来越多,信息块之间的分隔越来越不明朗。解决方法之一便是文章开头所提到的卡片式设计,而Material Desgin更是将卡片发扬光大,作出“带有Z轴深度的卡片”这一创新理念,但这种创新却反成为MD的桎梏,进而在深色时代引出问题。

用正负空间划分界面内容(下)
用正负空间划分界面内容(上) 自命令行界面开始,线段就被用作内容分隔手段直至今天,移动端浪潮中,卡片式设计开始大放异彩,再到Airbnb和Instagram的无框设计,视觉内容的划分始终是界面设计工作的重要部分。设计入门书籍中常用一致性、重复和对比这些原则来解释其中原理,然而,实战中我们却仍会为阴影的深度、分割线的颜色而陷入选择困难。 思考视觉划分这一问题,可以从两点出发: 1. 信息的区分和组织——不同内容之间的区分是否足够清晰 2. 主次的引导——如何通过样式引导用户浏览的优先级? 苹果vs谷歌 视觉层次如何建立 沉淀下来的经典界面形成设计语言,宣告自己的领地。移动端塔尖的两大系统分别给出…