过时的图标设计手段

图形用户界面（简称GUI）的历史一直都离不开隐喻，而这种设计手段的优劣已经有越来越多的辩论。时至今日，这种设计方法是否已经过时？我们是否有更好的方式？传统与新风格又将怎样影响着我们呢？

隐喻作为一种主流的设计方式广泛运用在界面设计中，它的历史可以追溯到GUI的创造，经典的例子便是桌面、文件夹、垃圾桶……这些老生常谈概念。因为源于真实生活，隐喻的天然优势便是利用熟悉感帮助用户理解和上手，并带来亲切感。虽然常被简单地认为是模拟现实世界中的物体外观（即拟物），但隐喻其实是一个综合的手段：包括视觉层面的拟物；行为的模拟（常利用动画效果加强）；以及对整体概念的利用。

拟物与行为隐喻

众所周知，苹果已经将拟物设计演绎得炉火纯青。先不说Mac OS X上各种材质和复杂光影的写实图标，在iOS 6上滑竿的金属圆形按钮不仅模仿了金属纹理，倾斜手机时还会像真的金属一样改变光泽的角度。苹果的拟物已经达到了对细节的精确追求，暂且不论这种极致求真的细节对体验的提升到底有多大意义，但它符合苹果所追求的品牌视觉风格。在一个追求真实的原则下，任何对真实细节的提升都是值得钦佩赞许的。

行为的隐喻同样来自真实世界，但不像拟物那样显而易见，它伴随着操作发生，自然而然。另外，有些网站的内容在阅读时，篇幅达到一定程度，滚动条往下翻滚就会在旁边出现剩余篇幅的气泡提示。告知用户余下的内容还有多少字，预估还剩下多少阅读时间等，这就非常符合生活习惯，与之类似的还有Kindle底部的阅读提示。

相较于苹果的Skeuomorphs（拟物形），Metro设计原则坚持极简、内容优先，强调排版、动态和真实的数字场景，与之产生的设计语言延伸到视觉风格便是不再利用Skeuomorphs，取而代之的是高度抽象的视觉符号和一再强调的信息，这无疑是一个显眼的革新（当然Metro的革新远不止于表面）。

那么真实的数字场景是否与隐喻不再关联呢？回想一下Windows 8的边缘交互支持上下左右滑动手势，在真实世界中人们在一个工作台上就可以完成多项工作，所需要的东西顺手撷来而并非只能在卧室看书或只能在书房写信。由此可见，如果要完全脱离真实世界，构建一个全新的世界观并不现实。事实上，数字时代的隐喻更为深入和抽象，体现在行为、逻辑，甚至世界观，所以才有真实这个前缀。当然深入到一定程度把它们称之为隐喻并非那么合适了，但的确曾是以隐喻为起点的。

微软的Metro一再强调信息，它们才是用户关注的内容。因此界面中省去了一些控件代替以手势响应，而不能省略性地采用抽象符号。与之相反，传统的系统和应用常会有一个容器包裹在信息之外，镶嵌其间的控件图标在视觉上做了不同程度的刻画。于是在新旧观念的冲击下，信息之外的部分便开始暧昧不清了。

回归之前所提，关于内容本身如何界定还是一个问题。Metro认为信息才是内容，其沉浸式是沉浸在信息的海洋中。而在传统的界面中我们可以认为那些承载信息的容器环境也是内容的一部分。因此，iOS的沉浸感强调的是整体氛围的融合。

这样看来，信息之外的内容并非纯装饰。不过随之带来的问题主要有两个：效率与风格。纯信息的展示更为高效，帮助人们在繁忙的生活和海量的信息中更快得达成目的，是工具化的。而对于环境的渲染更适合调动情绪或者传达某种生活的态度，例如游戏界面。而在更多的实际运用中，设计上常会有各种折衷。至于风格，则属于审美的范畴而并非道德。审美涉及到品位，因人而异，并且总是与时代和历史相关。打个不恰当的比方，如果将GUI产生之前比作原始时代，那么拟物和Skeuomorphs更像是古典时期，也难怪有人说Metro是交互设计的包豪斯运动。不过历史总是螺旋前进而非简单直线，就算“大势已去”，也总会存在各种回潮。回想我们现在所处的语境，也许各取所长会是比较好的选择。

微质感的应用与权衡

提出微质感的概念便是这种在效率和风格之间的权衡。所谓的微质感是区别于Skeuomorphs的超质感和 Metro高度抽象化之间的中间层次。“微”可以理解为微弱微小，微乎其微。微本身是一种可选的程度而非定量。但这个程度并不宽广，否则就失去了个性和品牌意义。

微意味着用尽可能少地添加达到目的，质感具有隐喻的意味。也就是说灵活运用一点隐喻的手段解决问题而不泛滥。这有点类似深泽直人说的“这样就好”。

超质感的拟物图像更像是一件艺术作品，它属于图像信息的范畴，却不是十分适合当作图标或控件。Pixelmator的功能图标做了相当程度的精简，但还是保留并强化了来自真实世界的光影材质，它们看上去闪亮簇新。谷歌Chrome商店中的系列应用图标则非常收敛，利用必要的符号传达含义，点到为止，唯一一处额外添加的那块阴影，起到画龙点睛的作用。

“去之则嫌少，添之又嫌多”的状态在实际使用中也随处可见，例如Chrome商店中的谷歌地图，去除了地图细节后，虽然地标还是能够清晰辨识，但这种减法使得地图变得有些匪夷所思。因为扩散了它的指涉范围，使其看上去像一个奇怪的方块，还不如去掉更好。另外，去除投影并不影响其传达含义，但是这样的图像比具备阴影的状态缺少“张力”。从格式塔视知觉理论来看，无投影的图标虽然更符合一个好的完形（更加对称），但却不能引起“力的紧张”。因为接近完形却又有一些破坏的图形暗示着好的形，从而能引发人们去纠正其不完美的形式而达到完美的状态。这种紧张的过程意味着更多审美趣味，当然也取决于受众的审美层次。

由此可见，微质感具备的这种克制性效率充满了“节俭”的品德，因为克制要求对细节反复斟酌。换言之，当细节减少到个位数时，那么就有充分的时间思考得更全面。从宏观上看，微质感的精简也是一种劳动力的解放，节约的时间和精力可以去创作信息本身。

微质感的应用需要遵循少量精炼的原则，在合适和重要的区域添加才能起到画龙点睛的作用。Google Reader界面中的滚动导航部分，会出现阴影的效果，上方的节点隐匿在订阅按钮之下。但是滚动正文部分，滚动内容直接消失在工具栏之后并没有出现阴影。细想这种“不统一”也自有其道理，因为订阅按钮与导航原本只是通过间距排列并且宽度不一，出现阴影能够比较好地暗示虚拟空间的延伸。但是阅读区域与顶部的工具栏通过线已经做了明显分割，而且工具栏和Logo结合贯穿上方，阅读区域在滚动过程中直接消失在工具栏下方也比较自然清楚。如果再添加阴影则显得比较“重”，因为界面有两个明显的层叠，并且这种感受会随着自适应屏幕的变宽而更明显。

这种权衡需要从整体考虑。在极简的界面中，按钮的微量光影、空间层叠产生的微弱阴影都会凸显而发挥作用。如果整体环境并没有那么轻量，那么相应的控件则需要加重质感才能匹配。层层叠加到一定程度后，也就不存在“微”了。

对比来说，Google Analytics界面相比Google Reader用了更多的线，营造了更厚的块面感；因此，Google Analytics的导航用了更明显的渐变，而在Google Reader上并不需要这样的程度。分析原因，一部分是因为两者的信息复杂程度不同，另一部分则是风格问题了。而本文微质感提倡的“尽可能少”的原则，相较于Google Analytics则会偏向Google Reader的风格。

所以说，微质感的权衡需要先考虑全局再雕琢细节。微质感更适合简洁原则下的设计，更适合工具型的产品界面。

微质感“华丽”背后的功能

关于功能，则可以利用微质感区分不同的信息模块、暗示某种操作、营造虚拟空间、突出当前重点等。

首先，要营造信息模块的归属感。避免通过直接排版进行信息归属；要所有信息更像是处于一个整体，归属更清晰，操作响应区域更广。相较于图像信息，数字信息的模块只需要空间感的区隔便可以体现归属感。注重信息层次的对比并配合信息视觉化图形更直观地展示。

其次，要遵循自然的逻辑，比如时间、地点等。有些应用适合24小时制（例如计时软件），但有些应用适合AM/PM小时制（例如记事软件）。而对于微质感拟物化设计来说，遵循自然逻辑的优势在地域选择上体现得更为明显。地域的分类如果单单按照名称划分，除了直辖市、省会之外很难按照一个特定的逻辑划分，在需要寻找特定的省份时就会很不方便，通过拟物化用更自然的逻辑（比如地图形式）去展现各地域模块就会一目了然。

最后是动态过渡。随着动态的转场过渡越来越多地运用，常配合手势使隐喻更为深入和自然，同时也倾向于将信息扁平化。衡量动画的标准之一是流畅和自然，不过动画的灵活程度和幅度也是需要把控的细节之一。渐隐渐现相对于变形和三维翻转比较轻量；同样是移动，时间、速度、加速度、距离的不同组合造成的心理感受也会大不一样。可以理解的是，在能够彰显品牌特征或者特色的功能细节上，动画可以用一些更为个性和突出的效果；而在一些常见的转场过渡和频繁的操作上，采用一些基础和低调的动画更为合理。一个应用上如果动画的数量、幅度和频率不加以限制，则会受到类似静态界面的视觉噪声带来的干扰。

提到质感，我们脑海中总是出现那些金属的光泽、反光的亚克力，还有LED光效等。这些数字产品的外观和材质可以带来“高科技”感受，但是经历了几十年的发展，风格也会慢慢变化。如今，黑暗冰冷的金属风格已经不再代表所有的高科技，人们更向往自然和真切的生活，越来越多的新鲜风格不断涌现。虽然往昔的主流功不可没，但是当我们需要创造特有的品牌形象去满足不同人群时，不妨换种思路，从平面、印刷和绘画等领域借鉴，去挖掘更多灵感。

这不仅仅体现在界面风格和控组件上，对于推广类的信息传达也提供了不一样的思路。例如，广告营销的视觉传达常常借助场景和气氛的塑造。以“轻氛围、重创意”来塑造整体的品牌形象可以与竞品很好的区分开，在抛去了营造场景的各种元素之后，直接利用单一素材的图像特性去传达品牌概念更独特有力。

“微质感”的概念其实并不能仅从字面意思理解，因为它包含了一定的历史语境。希望通过“微质感”的案例，可以深入思考去挖掘自身的品牌个性，引发更有价值的设计思维和产品体现。