扁平化UI中的空间表达

张剑

摘要：结合扁平化界面设计中平面视觉要素、动态图形、交互行为等层面，分析它们对界面空间深度表达的方式和特点，论述了空间在界面设计中对交互及情感层面的影响和意义，以此论证扁平UI中也需要对空间的表达和隐喻，其目的是为了更高效的交互和更好的体验。

关键词：界面；交互；扁平化；空间随着移动终端所提供的信息和服务的极速增长，信息直接演变为界面主体，易用、高效才是界面的终极诉求。装饰性元素成为界面的负担，因此必然会受到逐步减弱和剥离，扁平化UI因其易用、高效、友好的特性使它广泛应用在移动终端。现在，越来越多的UI都扁平化了，但是扁平并不完全意味着对空间属性的抛弃，降低视觉效果的信息干扰才是目的，它可以通过平面设计的语言和交互的隐喻来实现空间的表达，而用户在关注信息的意识焦点之外能够自然的感受到界面中空间的存在。数字界面中，承载空间是二维的，对空间的塑造主要是平面设计语言，但是它对最终的实现空间没有任何限制，可以从二维到任何更高维度。

1色彩和形体对空间的塑造

UI视觉设计中对空间的探求，主要是形态和形态之间在视觉上形成的框架关系，将这种框架关系设置在二维平面空间（指高、宽二维）的状态之中。有时也能在二维平面的基础上表现出带有纵深感的三维立体空间（指高、宽、深三维）的效果。它需借助明暗、色彩、透视等多种表现手法才能达到，这样的空间效果使界面中形态的构架关系显得更为复杂和丰富。

通过色彩表达空间感。在拟物化的UI设计中，可以模拟材质和纹理来表现空间感，通过对不同的质感、纹理和颜色组合形成丰富多彩的界面视觉空间。但是扁平化UI的典型特征就是不使用材质和纹理，主要通过色彩对比来形成空间的深度。不同的色彩具有不同的属性，我们可以利用色彩的明度、纯度和色相对比来获取界面的空间感。一般情况下，暖色、纯色、高明度色、集中色等具有前进的感觉；而冷色、浊色、低明度色、分散色等则具有后退的趋向。冷色调给人以后退的心理感受，暖色调给人以前进的心理感受。在黑背景上，亮色具有前进感，深色具有后退感；在白背景上，亮色具有后退感，深色具有前进感。在其他条件相同的情况下，纯度越高的色彩越具有前进感；纯度越低的色彩越具有后退感。界面设计师可以利用色彩变化表现空间感的技巧来营造界面中更为真实丰富的空间效果。

通过形体表达空间感。在拟物化UI设计中，界面框体和图标造型会大量应用透视来表现空间感和其三维属性。而在扁平化UI中则通过形体与形体之间的关系如大小的差别（近大远小），表现出空间上的距离感；或者以形体的重叠和覆盖使之产生前后和上下的空间感；放射状的阵列和疏密的利用也能营造空间和深度；还可以利用面的转折来表现空间感，没有转折的面在平面构成中只是二维空间的表现，一旦有了面的转折关系，就使形体具有了高、宽、厚度的三维立体效果，自然就形成了带有纵深感的三维立体空间关系；此外还可以利用图的关系，人的实际视觉经验时刻都在体现图的关系，因为人的视觉无法对视域中的所有对象进行聚焦，只有被人注视的部分在眼中才是清晰的，而其余部分由于无法准确在视网膜上成像而呈现焦点之外的模糊状态。

2明暗关系对空间的塑造

除了Windows UI的絕对平面化，其他的扁平化UI都不完全仅仅只有色块和轮廓。iOS7和大多数扁平化安卓平台UI，以其主界面为例，往往是多个图标（只有高度和宽度）并置于画面中，与画面平行，图标之间无前后远近之分。如果图标的形象无厚度，并且包围这些形象的空间没有深度，这样的空间形式就会和Windows UI一样是完全的平面性空间（二维平面空间）。但是在iOS7和大多数扁平化安卓平台UI中，在追求效率的工具化和情感化之间，采用了偏向于扁平的较为折中的设计，即表现少量细节处的明暗变化，它不依靠纹理，更多的利用色彩和形体的细微变化来达到，多表现为投影和渐变。这样的明暗变化去掉了拟物化UI中对质感和纹理精雕细刻的极致表现，也有别于Windows UI高度抽象化。

在界面设计的空间表现上，为了塑造出生动的空间感、层次感，明暗表现有着不可替代的重要作用。物体接受了光源，会产生投影，投影可在形象的前面或后面，表现出形象的轮廓、体积。投影的存在使形象更富于真实感，它是空间感的反映。例如谷歌chrome网上应用商店的Gmail图标使用简洁的平面化的图形风格，利用必要的符号传达含义，在细节处添加的那块投影，让纵深的空间立刻显现出来。虽然去除投影并不影响其传达含义，但是这样的图像失去了空间层次。而具备阴影的状态的图形则更具有视觉“张力”，这种意味着它具有更多的审美趣味。而时下流行的扁平化长阴影设计，更强化了界面中阴影对空间的表现力和形式感，就像冬天傍晚时分，物体长长的投影一样，格外引人注目。这种45°比一般情况要长很多的投影效果在保持扁平化的同时更强调了空间的表达。此外，在类似MIUIV5这样的扁平化界面的图标中，除了使用投影，也使用了细微的渐变表现了形体的明暗关系，加上其圆形倒角的外轮廓和同样有明度变化的桌面背景，恰当地表达了界面空间的三维属性。

当然，扁平化UI中阴影和渐变的应用需要遵循少量精炼的原则，在合适和重要的区域添加才能起到画龙点睛的作用。

3界面动态图形对空间的表达

界面设计要求向用户传递信息过程中通过合理的空间表现或隐喻来呈现界面的层级结构和相互关系，将空间深度变化为能帮助传递一定信息的视觉表达元素，其存在意义的核心是“层次”和“秩序”。界面设计可以有效地利用动态图形，通过有组织，有目的的设计理念和设计手段，把时间与空间串联，结合现实中的三维空间及时间，从而扩大界面视觉语言的表现力。

动态过渡对空间的表达。在界面中动态的转场过渡越来越多的运用，常配合手势使界面对空间深度的隐喻更为深入和自然，同时也倾向于将信息扁平化。渐隐渐现相对于变形和三维翻转比较轻量；同样是移动，时间、速度、加速度、距离的不同组合造成的心理感受也会大不一样。可以理解的是，在能够彰显品牌特征或者特色的功能细节上，体现空间深度的动画可以用一些更为个性和突出的效果；而在一些常见的转场过渡和频繁的操作上，则采用一些基础和轻量的动画更为合理。一个应用上如果动画的数量、幅度和频率不加以限制，则会类似静态界面的视觉噪声而带来干扰。有空间表现的过渡动画要流畅和自然、灵活，其动画幅度需要适度并有细节的表现。常见的例子是类似几何体通过面转折的方式进行同级界面的转换，或者类似于iOS7中应用图标通过缩放展开应用程序界面。MIUIV5主界面中，图标组文件夹打开的过渡动画也使用这样缩放的形式，将文件夹里的程序图标放大展开到前景的屏幕空间中或收缩合拢到文件夹内，在展开后图标阵列并置在界面的前景，之前的界面则通过降低色彩明度并高斯模糊而退后到远景的空间，通过模拟景深或视觉焦点的效果来隐喻了空间的深度，呈现的效果就像悬浮于桌面的磨砂玻璃，这样的动态过程和界面呈现方式不仅让用户清楚当两个界面转换过程和相互关系，也避免了多余信息的干扰。

界面中全新的动画，也为界面带来“深度”和“活力”。界面的动态图形也通过创新表达空间的深度，这种创新不一定是颠覆性的，或许仅仅是基于以前的一些微小细节的变化。例如，在淘宝网站的界面中，加载页面内容的“等待”动态图形，使用了在深度空间中平行于“Z”轴向上的一组圆形以“Y”轴为圆心转动，这些圆形是完全扁平化的色块，但通过色彩和体量的变化，隐喻了纵深的三维空间的存在，以前的很多界面类似的动态图形的表达也是一组圆形的转动，只是在基于二维平面的空间之中。此外，技术的创新也带来了iOS7中与之前完全不同“深度”的用户界面，它会根据运动来发生变化，由此产生专属iOS7的视差，具体呈现的效果是基于主界面前景的图标和背景空间图像之间随着屏幕角度的变化带来类似于视点变化而造成的前景遮挡背景的空间关系，以此来隐喻深度空间的存在。

4界面交互对空间的隐喻

隐喻是我们对世界加以概念化的方法，隐喻来源于直接的体验，它作为一种设计手法广泛运用于界面设计中，其历史可以追溯到GUI的创造，经典的例子是桌面、文件夹、垃圾筒等等概念。隐喻是一个综合的手段：包括视觉层面的拟物、行为的模拟以及对整体概念的利用。在扁平化的UI中也通过这一方式营造了用户对于空间感受的心理真实。行为的隐喻来自真实世界，但不像拟物那样显而易见，它伴随着操作发生，自然而然。滚动条是一个典型的例子，当呈现信息的框体（如浏览器、文档处理软件等）中内容量超越了标准显示空间的容量，用户浏览时通过往下、往右拖曳滚动条显示后续的内容。页面内容和滚动条之间是一种反向的运动，这正如同在真实环境中前行时景物向后退去的视觉感受，以此来印证空间和运动的关系。

在界面信息陈列有两种模式：同一空间毗邻陈列将信息同屏并列地显示出来，当然這样做取决于信息和功能的多少，也可以筛选主要的信息呈现。毗邻陈列提供了更直观的操作方式，加速了交互行为。另一种方式是沿时间线陈列，这种方法把功能、信息分割进不同深度的层级关系里，这么做能减少用户误操作的次数，同时便于在不同层级强化主要信息。iOS在沿时间线陈列方式中，通过动态表现，体现了界面在 X、Y、Z 轴之间的空间层级关系，用户可以轻松地理解屏幕中所存在的“空间”，以及在这其中所处的位置坐标。用户通过手势来过渡到同级或者是深层级的界面，在这一交互过程中，水平或垂直（X、Y）坐标方向是同级界面的转换，而纵深（Z）坐标方向是深度层级的转换，这样的方式通过对空间的隐喻让用户对层级界面的逻辑关系更容易理解。

5结语

界面设计的非物质设计性决定了对情感的关注是其重要特征。扁平UI对空间的隐喻，其目的还是为了高效的交互、良好的体验以及营造深度的沉浸感。而关于沉浸感，扁平和拟物有着不同的解释和目标。扁平化的沉浸感是沉浸在信息的海洋中，拟物化UI中我们可以认为那些承载信息的容器环境也是内容的一部分，其界面元素在视觉上做了不同程度的刻画，其沉浸感强调的是整体氛围的融合。从这一层面来理解，信息之外的内容并非纯粹的装饰。抛开视觉层面的风格不谈，界面中对空间的表达和隐喻，不仅不会形成信息干扰，而且比纯信息的展示更为高效，是情感化的而非工具化的。参考文献：

[1] 唐纳德·A·诺曼（美）.设计心理学[M].梅琼，译.北京：中信出版社，2003.

[2] 唐纳德·A·诺曼（美）.情感化设计[M].付秋芳，程进三，译.北京：电子工业出版社，2006.

[3] Carrie Cousins（美）.Flat Design：Can You Benefit from the Trend？ [EB/OL].http：∥designmodo.com/flatdesign/.

[4] 艾伦·库珀（美）.交互设计之路[M]. Chris Ding，译.电子工业出版社，2006.

[5] iOS人机界面指南.动漫艺术