界面微质感探究

GUI的历史一直都离不开隐喻，而这种设计手段的优劣已经有越来越多的辩论。那么时至今日，这种设计方法是否已经过时？我们是否有更好的方式？ 传统与新风格将怎样影响着我们？ 这些疑惑不禁引发了笔者的思考，因此也就有了下文。

创新互联建站长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为鹤山企业提供专业的成都网站制作、成都网站设计，鹤山网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

一、隐喻

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

（一）先说拟物。

众所周知，苹果已经将其演绎地炉火纯青。先不说mac os x上各种材质和复杂光影的写实图标，曾在知乎上看到一个例子：在ios6上滑竿的金属圆形按钮不仅模仿了金属纹理，倾斜手机时还会像真的金属一样改变光泽的角度（见图1）。苹果的拟物已经达到了对细节的精确追求，暂且不论这种极致求真的细节对体验的提升到底有多大意义，但它符合苹果所追求的品牌视觉风格。在一个追求真实的原则下，那么任何对真实细节的提升都是值得钦佩赞许的。Devil’s in the detail.

图1：图片来自iphone5截图

（二）再说行为隐喻。

行为的隐喻同样来自真实世界，但不像拟物那样显而易见，它伴随着操作发生，自然而然。如下图滚动条的例子（见图2），当网站内容的篇幅达到一定的程度，在阅读时往下翻滚时滚动条会旁边会出现剩余篇幅的气泡提示。对比于告知还剩下多少字，预估还剩下多少阅读时间就非常符合生活习惯了。类似的还有kindle底部的阅读提示。

图2：来自iA（http://informationarchitects.net/about/）

相较与苹果的Skeuomorphs（ 在这里将其译作拟物／拟真，有兴趣可自行移步wiki），Metro设计原则坚持极简、内容优先，强调排版、动态和真实的数字场景，与之产生的设计语言延伸到视觉风格便是不再利用Skeuomorphs，取而代之的是高度抽象的视觉符号和一再强调的信息，这无疑是一个显眼的革新（当然Metro的革新远不止于表面）。那么真实的数字场景是否与隐喻不再关联？回想一下win8的边缘交互支持上下左右滑动手势，在真实世界中人们在一个工作台上就可以完成多项工作，所需要的东西顺手颉来而并非只能在卧室看书或只能在书房写信。由此可见如果要完全脱离真实世界去构建一个全新的世界观并不现实，事实上，数字时代的隐喻更为深入和抽象了，体现在行为、逻辑，甚至世界观，所以才有真实这个前缀。当然深入到一定程度把它们称之为隐喻并非那么合适了，但的确曾是以隐喻为起点的。

二、信息之外

Metro一再强调信息，它们才是用户关注的内容。因此界面中省去了一些控件代替以手势响应，而不能省略的也采用抽象符号。与此相反，传统的系统和应用常会有一个容器包裹在信息之外，镶嵌其间的控件图标在视觉上做了不同程度的刻画。于是在新旧观念的冲击下，信息之外的部分便开始暧昧不清了。有人尖锐指出，这些信息以外的装饰虚伪幼稚（详见James Higgs的Apple\'s aesthetic dichotomy）。听到装饰，不少人开始要冒汗了。经历了现代主义的洗礼，如今装饰一词变得低三下四。但是阿道夫·路斯（Adolf Loos）的“装饰即罪恶”也是有其上下文情境的，何况装饰在视知觉审美体验中的地位无法忽视。回归之前所提，关于内容本身如何界定还是一个问题。 Metro认为信息才是内容，其沉浸式是沉浸在信息的海洋中。而在传统的界面我们可以认为那些承载信息的容器环境也是内容的一部分；因此，ios的沉浸感强调的是整体氛围的融合。这样看来，信息之外的内容并非纯装饰。不过随之带来的问题主要有两个：效率与风格。

关于效率。纯信息的展示更为高效，帮助人们在繁忙的生活和海量的信息中更快得达成目的，是工具化的。而对于环境的渲染更适合调动情绪或者传达某种生活的态度，例如游戏界面。而在更多的实际运用中，设计上常会有各种折衷。

至于风格（style）。则属于审美的范畴而并非道德，审美涉及到品位，因人而异，并且总是与时代和历史相关。打个不甚恰当的比方，如果将GUI产生之前比作原始时代，那么拟物和Skeuomorphs更像是古典时期，也难怪有人说metro是交互设计的包豪斯运动（http://www.ifanr.com/38596）。不过历史总是螺旋前进而非简单直线，就算“大势已去”也总会存在各种回潮。回想我们现在所处的语境，也许各取所长会是比较好的选择。

三、微质感

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

（一）克制

微意味着尽可能少的添加便达到目的，质感具有隐喻的意味。也就是说灵活得运用一点隐喻的手段解决问题，而不泛滥；有点类似深泽直人的“这样就好”。对比图3、图4和图5，（图3）超质感的图像更像一件艺术作品，它属于图像信息的范畴而不那么适合当作图标或控件。（图4）Pixelmator的功能图标做了相当程度的精简，但是还是保留并强化了来自真实世界的光影材质，它们看上去闪亮簇新。（图5）谷歌chrome的系列应用图标则非常收敛，利用必要的符号传达含义，点到为止，唯一一处额外的添加的那块阴影，起到画龙点睛的作用。

图3：图片来自dribbble 图4：图片来自pixelmator官网

图5：图片来自chrome网上应用商店

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

图6：左边为原设计；右边去除了地图细节

图7：左边为原设计；右边去除了投影

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

本文名称：界面微质感探究
文章路径：https://www.cdcxhl.com/article10/cghsgo.html

成都网站建设公司_创新互联，为您提供网页设计公司、微信小程序、搜索引擎优化、面包屑导航、虚拟主机、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联