设计

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

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

卡片式设计之过

"Affordance"一词常被翻译为“功能可见性”,在《设计心理学》中则被称为“意符”,并且给出了更细致的定义——“由有形物品传达给人类的,与它们互动的重要信息的特性“,它指代物与人互动中可被人所感知的部分,这些感知促成了交互的产生。用户在接触到一个陌生的产品时,常常会发现它似曾相识,因此自己用得还不错,这得益于产品设计师对意符的运用。

而卡片式设计正是一项优秀的意符,它暗示用户Z轴空间、信息聚合以及一定的可操作性(划动和点击)。那么,在这样一项优秀的设计中,哪里出现了问题?

实际上,出现问题的是设计师自身——”卡片式设计“本应是用户描述自身感知的词语,它是一项”Affordance“,而不是设计师的方法论,当设计师追求”如何让界面看起来更像卡片“时,就已经走上了歧路,我们应追求的是更本质的东西——”如何在界面上组织和展示信息“,并通过UI设计解决这一问题,而”卡片式设计“只是表现之一。

流于表象是名为懒惰的罪行,唯有追本溯源才能解决。

理解正负空间

那么,视觉分割的原理是什么?

正负空间是视觉艺术的基础概念之一,在绘画、摄影、平面设计等领域广泛应用。正空间一般指“画面的主体”,而负空间指的是“图像中视觉主体之间的空间”,两者相辅相成,负空间不能独立于正空间而存在。在印刷行业的排版设计中,负空间又叫做“空白空间(White space)”,而我们知道,数字时代的界面设计师承于印刷时代的版式设计。要研究界面分割的本质,我们不妨从正负空间说起。

https://s2.ax1x.com/2019/09/14/nsjqtf.jpg

正负空间也被称为正负形,这一概念并不难理解。上面的微距摄影作品中,正空间是画面主体的植物,负空间则显然是黑色的背景,对于这类画面主体单一的极简主义作品,我们可以轻易分清正负空间,用自然语言来描述就是:“这张图使用了大量的留白”。

但这并不足以解决问题。如前文所说,随着产品在商业层面的需求,我们需要在同一屏中展示的信息将会越来越多,而允许使用大面积留白界面的机会将会越来越少。

http://collection.sinaimg.cn/cqyw/20140924/U8596P1081T2D165920F6DT20140924094746.jpg

上图是画家雅克·路易·大卫以法国大革命为背景创作的画作《马拉之死》。显而易见,这幅画中构成负空间的是画面上半部分,即背后的墙壁,而画面主体则是躺在浴缸中的主人公马拉。值得探讨的是右下角这一张方形的木箱桌子,对于观看者而言,这张木箱才是画面的“Z轴顶层”,即视觉层级的最上层,甚至高于作为主体的主人公部分。同时,木箱与背后的浴缸又构成了一块较小的正负形关系,这张木箱在视觉上被与主体划分出来,以用于记载重要信息(主角与作者名字),成为类似于标题的存在。

或许会有人得出结论:“离观众更近的是正空间,反之则是负空间。”——这一结论并不完全正确,因为正负空间在一定条件下可以相互转化。

https://s2.ax1x.com/2019/09/17/n5JZF0.jpg

《Rubin's vase》是一个经典的例子。当图像被抽象成黑白画面时,负空间所构成的“人脸图案”开始变得显眼。这也说明,如果要在界面中明确正负形关系,就要避免过度抽离界面中的三维属性,而这正是扁平化UI当初所面临的问题。

那么,是否可以在负空间中承载信息?答案是肯定的。

https://s2.ax1x.com/2019/09/17/n5tian.jpg

上图的例子中不仅用负空间构成图案,设计师还将文案完全放在负空间中,使观众耳目一新。大多数情况下并不一定需要用到这么激进的做法,但是使用负空间承载次要文本信息,是一个正确的思路。

https://s2.ax1x.com/2019/09/17/n5r2OP.png

在过去,我们可能会从一个视窗的主功能出发进行设计,例如上图的CALL-TO-ACTION按钮。

现在,我们可以从负空间出发理解界面:负空间会将观看者的视线挤压出去,从而产生聚焦、引导视觉的目的。正负形就像水和油,密度高的水沉到底部,密度低的油上浮并被挤压成一块一块的焦点,人的注意力总是先集中在正空间,但画面中并不一定只有一个正空间。

超越空间的逻辑

目前为止,在界面中模拟3D的方法有以下几种:

  1. 阴影。在Material Design的部分中已提过不少例子,用阴影大小表示Z轴高度。
  2. 更亮的颜色。深色模式下构成正负形的主要方法,原理同样是揭示Z轴高度,越靠近用户的物体会显得越明亮。
  3. 模糊。典型例子是iOS的“毛玻璃”,实际上,常见的模态窗口样式中,在原有界面上添加不透明遮罩也属于这一范畴。原理是制造景深。

利用上述方法,我们可以:

  1. 划分内容。也就是我们正在讨论的问题
  2. 反映空间关系

——但,是否有必要严格按上述逻辑执行设计?

https://s2.ax1x.com/2019/09/17/n5Imhq.png

回到前面提过的iOS界面。现在用正负形关系再来解读,会很容易理解其中逻辑:

  • 用亮度和微弱的阴影构成正空间以聚焦内容,同一页中可以有多个内容块
  • 内容块之间使用不分栏线段分割,避免破坏正空间的整体性
  • 负空间中承载辅助性文案,如二级标题和辅助信息

值得注意的是,界面顶部(标题+状态栏)采用了偏灰的背景色(内容块则是纯白色),逻辑上,该区域处于Z轴最高处,因此,背景色本应较之内容区域更亮,这种做法违背了“Z轴较高的部分明度也更高”的守则。

https://cdn.macrumors.com/article-new/2019/06/darkmodesettingsmusicphotos.jpg

在iOS深色模式中,一些界面的顶部甚至与背景完全融为一体,成为Z轴空间最下层。

而iOS的做法并不是特例。

https://www.androidcentral.com/sites/androidcentral.com/files/styles/w830/public/article_images/2018/11/samsung-one-ui-promo.jpg?itok=SLVE6trx

去年,三星推出了全新的视觉规范——One UI。这套UI大胆的抹去了阴影的存在,采用被称为“Focus block”大圆角方块作为信息容器,方块使用白色背景及深灰色边线与背景进行区分(彩色背景则无边线)。

https://s2.ax1x.com/2019/09/19/nqMnht.gif

One UI的顶部设计同样很有想法——状态栏、页面标题以及icon都放在了Z轴最底部的背景中。

为什么iOS和One UI会做出违背3D空间逻辑的设计?我认为原因有:

  • 符合用户心理。用户已经习惯了“标题总是固定于顶部”这一交互逻辑
  • 滚动时形成视觉分割。根据格式塔理论,当界面快速滚动时,固定的区域与滚动区域之间会形成一道分界线
  • 这样做的好处有:
  • 视觉降噪。状态信息在滚动中固定是为了让用户随时确认,但它们并不需要占据太多视觉权重。用正负形的关系来看待,顶部区域被放置于负空间中,自然不会干扰用户。
  • 减少层级。相当于减少了一块正空间物体,本质上也是降噪,将正空间给更重要的内容块使用。
  • 也就是说,当内容划分的需求与空间逻辑冲突时,逻辑是可以给需求让步的。

而在严格遵守空间层级的Material Design中,不会出现这样的设计。

https://s2.ax1x.com/2019/09/19/nqxRBD.png

顺带一提,One UI中Viewing area这一设计很棒。三星的机型普遍偏长,在界面滚动至顶部时,标题部分会扩大,这样原本够不着的上部区域更容易被点击,同时标题也以一种柔和的方式被突出展示,与《马拉之死》有种异曲同工之妙。可以算是今年最让我惊喜的设计了。

总结

  1. 用正负形关系设计视觉,而不是严格遵守三维规则
  2. 用负空间承载次要信息
  3. 视觉不过度追求扁平,保留空间线索