第 3 回 扁平化设计

UI/UX 未来志向——预测未来之走向,知晓当下之所需

明治大学 综合数理学部 先进媒体科学专业专职讲师
渡边惠太 ( WATANABE Keita ) 译 / 王凤波
URL http://persistent.org/ mail watanabe@gmail.com Twitter @100kw

第 3 回 扁平化设计——挣脱拟物化隐喻表现的桎梏

2013 年 6 月,苹果公司宣布 iSO 7 的用户界面(UI)将改为采用扁平化设计(Flat Design)。

将现实世界真实物体的质感融入到用户界面中的视觉设计手法被称为拟物化(Skeuomorphism)。众所周知,iSO 6 及其之前版本采用的都是拟物化设计。

而扁平化设计正如它的名称一样,平面的视觉印象是其最显著的特征。Windows 8 就在 iSO 7 之前率先采用了这种扁平化设计的用户界面。

但是,到底为什么突然两个 OS 都采用了扁平化设计呢?由拟物化设计向扁平化设计的转变,并不像表面上看起来的那么简单,而是具有深远意义的,乃至需要我们不得不从电脑的本质上进行深入的分析和探讨。这一次,我们就从幕后的隐喻表现手法和电脑的本质即元媒体这两个角度,来深入地探讨一下由拟物化设计向扁平化设计转变的意义。

隐喻

拟物化设计的根本在于隐喻(Metaphor)。迄今为止,用户界面可以说基本上是采用隐喻的表现手法来实现的。按钮、页面、滚动条、文件夹、桌面、垃圾箱等,这些都是以现实世界中的实物为模型进行模仿的隐喻表现形式。按钮模仿真实机器上的按钮,页面模仿真实书本的页面。

隐喻的使用使得人们在日常生活中用到的知识在电脑中也能够得以继续应用,即使不懂电脑的人,也能够通过隐喻的表现形式结合自己的生活常识推测出它的功能和作用。

可以说在 UI 的历史发展长河中,隐喻表现手法的应用具有深远的意义,它向广大的普通用户展示了“电脑是什么”以及“电脑能做什么”。Mac OS 或者 iOS 6 及其之前的版本都积极地采用了拟物化设计,其原因不仅仅是为了美观,更是为了让用户能够由此推测出它的功能到底是什么。

元媒体

对于电脑而言,隐喻表现手法如此重要还有其他的原因。那就是因为电脑是一种元媒体(Metamedia)。元媒体的概念是由被称为电脑之父的阿伦 · 凯(Alan Kay)提出的。元媒体的概念表明它既可以成为一种道具或者媒体,也可以成为其他任何一种东西,能够实现人们见所未见闻所未闻的表现形式和功能。

电脑是一种元媒体,可以说“无论什么都是它的装置”。也正因为如此我们才需要对它具体是什么加以定义,这是电脑的本质要求。而隐喻则是进行定义的有效方法。也就是说,原本作为计算机的电脑,变成了文档编辑装置,变成了乐器,变成了绘画装置……这本身就是一种隐喻。不仅如此,在电脑软件和应用程序的领域中也使用了隐喻。

使用隐喻对元媒体进行定义的局限性

但是,使用隐喻对元媒体进行定义也是有局限性的。使用隐喻手法实现的文档编辑装置或者乐器等,其实都是迄今为止我们现实文化生活中真实存在的物品的一种替代品。而实际上在电脑中能够表现出比现实世界更多、更丰富的东西。对此,隐喻的表现手法就存在局限性了。对于作为元媒体的电脑而言,我们当然是想发挥其真正价值的,但如果使用隐喻表现手法的话,无论到何时所实现的都只能是现有文化和概念的替代品而已。

因此,挣脱隐喻表现手法的束缚,进而实现自由的表现方式在今后将变得尤为重要。由此我们可以进一步认为以隐喻为根本的拟物化设计也将会变得步履维艰。

由于隐喻自身的局限性,其缺陷已经开始部分地显现出来。比如,无论是 Windows 还是 Mac,目录都是采用“文件夹”的表现形式,文件夹中又可以无穷无尽地嵌套子文件夹。而这种形式在现实世界中是不可能存在的,从而导致人们对于计算机文件结构的理解产生了误区。也有人认为如果用户理解了计算机的原理,那么也许就不再需要什么隐喻或者拟物化了。

另外,对于世界上根本不存在的东西,如果使用拟物化的表现手法,则存在着不可逾越的壁垒。比如在 iPhone 或者 Android 这个新的平台上,庞大的用户群体从各种不同的生活场景自由随意地访问网络,孕育出该平台特有的创意或服务的可能性越来越大。在这里,存在着很多现有概念难以解释的价值形式,没有可供参照的隐喻手法,使用拟物化的设计方法是行不通的。

简而言之,我们可以认为由于以下两点原因,导致了拟物化设计已经被数字领域的原生设计手法,即扁平化设计所取代。

  • 由于隐喻自身的局限性,可能会导致理解上的误区。

  • 对于世界上根本不存在的新的服务形式,原本就难以用隐喻来实现。

扁平化设计的世界

综上所述,要充分运用并发挥元媒体这一表现形式的自由性和灵活性特点,就要采用扁平化设计。在扁平化设计的世界里,没有必要考虑如何去表现物理层面的制约因素,也没有必要考虑如何去表现文化因素,采用扁平化设计能够充分发挥计算机的性能和设备的特性,这是一个能够自由进行设计的世界。

例如,因操作快捷而为人们所熟知的 Todo 软件中有一个叫作 Clear 的应用,采用的就是扁平化设计。如果没有人告诉我们这是一种 Todo 软件,我们根本无从知晓它到底是什么,或者应该把它比作什么。但是它的操作性却非常自由。迄今为止,它那令人愉悦的快捷操作是无可比拟的。通过宣传视频 1 大家也能够感受到这一点。

1Clear for iPhone (Coming Soon!)-Official Video http://www.youtube.com/watch?v=S00Hrz7fGo

不使用隐喻能创造出直觉来吗?

虽然说扁平化设计是一种不受约束的自由的设计方法,但是也并不是说它已经真正地达到了绝对自由的境界。

它的制约因素首先体现在计算机的性能和设备层接口之上。例如,多点触控和非多点触控环境下的设计方法当然会有所不同。

另一个设计上的制约因素则体现在人类的知觉、认知和身体特性之上。例如 UI 的动作方式或页面的隐藏方式对人类的知觉而言都是最基本的要素。iOS 7 中使用视差效果 2 来表现纵深的手法,可以说就是利用了人类知觉特性的一种设计吧。

2指随着观测者的移动而产生的重叠在一起的移动变化。

如果人们发现一种交互式的设计方法,能够将这种设备特性和人类特性进行相互融合的话,那么必将促进用户界面发生进化,创造出下一代智能手机的原生用户界面。经过一定的积累和沉淀之后,就会形成一种与之相应的世界观(规则),从而人们也就会逐渐地明白如何根据这种设计驾驭自己的直觉了。

毫无疑问,今后考虑了上述要素的 UI 技术在经过一定的积累和沉淀之后势必会彰显其重要性。但是,我想更为重要的应该是应用程序自身的定义能力和宣传能力。

应用程序设计的重点始终在于该应用是做什么的,要实现什么样的价值。但是,对于该应用具体是什么,在使用扁平化设计去表现的时候,因为没有了隐喻手法,所以相应地要比拟物化设计困难得多。因此,对于这种不容许使用隐喻表现手法的扁平化设计而言,定义能力就会变得尤为重要。定义能力就是指具体问题是什么以及应该如何解决,即问题和解决方法的明确程度。

另外,UI 如何运行,遇到问题如何解决,如何体验操作快感等,更加需要演示和宣传来传达给用户。

UI 设计的未来

这一期,我们从隐喻和元媒体的角度对于拟物化设计和扁平化设计进行了探讨。UI 设计依赖于采用怎样的隐喻手法,需要考虑应用程序要解决什么样的问题以及要在怎样的范围内解决该问题。迄今为止,隐喻手法是 UI 设计方法论的核心,而扁平化设计从某种意义上而言,将是 UI 设计所面临的一种挑战。也就是说,在 UI 的表现形式和用户体验规模进一步拓展的同时,在不使用隐喻手法的前提之下,UI 设计人员能够将多少价值传达给用户将是问题的关键所在。

目录

  • 版权声明
  • 编委会
  • 分栏目录
  • 编委点评
  • 第 3 回 扁平化设计
  • 特辑 1 UI 设计实践
  • 第 1 章 开发人员所追求的 UI 设计
  • 第 2 章 为了 UI 设计而进行的用户体验设计
  • 第 3 章 准确高效地实现!UI 设计的技巧
  • 第 4 章 提高 UI 设计成果的验证技巧
  • 第 5 章 为多元化环境提供相应的 UI 设计
  • 特辑 2 Web 支付入门
  • 第 1 章 支付的基础知识
  • 第 2 章 信用卡的基础知识
  • 第 3 章 信用卡支付的信息安全
  • 第 4 章 实现 PayPal 支付
  • 第 5 章 实现 WebPay 支付
  • 第 6 章 实现在 iOS/Android 应用内支付
  • 特辑 3 “边做边学”数据可视化
  • 第 1 章 数据可视化的基础知识
  • 第 2 章 D3.js 的导入和设定
  • 第 3 章 实现地理数据可视化的方法
  • 第 4 章 实现人际关系数据可视化的方法
  • 特约文章 Gradle 让构建更高效
  • 第 3 回 Android Studio 速评 !
  • 第 3 回 使用 serverspec 构建测试驱动基础设施架构
  • 第 22 回 如何开发使用 Coro 的简易网络爬行器
  • 第 8 回 从 Go !开始的 AOP
  • 第 9 回 抢先看 Web Components
  • 第 8 回 使用 RDBMS 顺利处理图的方法
  • 第 8 回 数据缓存性能设计的要点
  • 第 8 回 使用 Fluentd + FnordMetric 进行实时数据可视化
  • 第 17 回 从 Pecolodge 来看 HTML5+Canvas 的开发要点
  • 图灵访谈 赵望野:前端工程师的困惑