Skeuomorphism vs Flat

views-skeuomorphism-vs-flat-00.jpg

罗胖子的这一锤子又砸起了设计界有关 UI 设计风格的讨论，那我也借此聊聊自己的观点，纯当做一个思考记录。

先说说标题中的这两个词，或许对一些搞设计的朋友并不陌生，但今天前我也只是知晓后者，前者算是刚刚学到。为此特地去网上查了相关出处，结果中文圈里基本翻不到有用的资料，最后在英文版的维基中才算找到些答案。

skeuomorphism 是个合成词，原型是 skeuomorph，取自希腊语中的 skeuos 和 morphê，意思分别相当于英语中的 container 和 shape，而 ism 则是一个后缀名，表明这个词来源于拉丁语或希腊语。skeuomorph 在词典中被解释为［同形物］，也可以理解为［仿制品］，而它的变形 skeuomorphism 则更直接，意为［借壳］。至于有没有别的更贴切的翻译我就不得而知了，不过这都不是事儿，只是因为我第一次看到这个词就感觉这货不像英语，结果一查果然来自于外来语，考虑到网上又没几个答案，所以贴在这里仅供参考。

那么，说回正题。如今的 UI 领域中流行两种风格迥异的设计手法，其一就是 Apple 所引领的 Skeuomorphism Design，俗称［拟物化设计］；其二则是以 Microsoft 为代表的 Flat Design，俗称［扁平化设计］。何谓 Skeuomorphism 又何谓 Flat ？

views-skeuomorphism-vs-flat-01.jpg

首先来看 Skeuomorphism 风格的代表 － Convex。它是 iOS 平台下的一个单位转换软件，除了华丽丽的视觉效果之外，每个选项都可以模仿现实中物品的操作方式来设置数值。比如温度计可调整水银高低，转速表可以左右摆动…即使是初次使用，你也不会因为看似复杂的界面而感到无从下手。

Skeuomorphism 设计的好处在于，可以通过对实物外形和质感的模拟而带来强列的观感，因为这样的设计符合大多数人的审美观，对产品的印象分会有很高的加分作用，而更重要目的在于通过人们对某物体的习惯性认知来加快使用产品的学习速度，提高易用性。所谓的［习惯性认知］就好比你看到［按钮］会去［按］，看到［书本］会去［翻］，在这个过程中所表现出的是人们对于生活中各种常项潜移默化的自然反应，这种反应所带来的好处不言而喻，既可以尽量少的花费资源来指导用户如何使用产品，同时也可以让用户在对产品产生亲切感的同时更快的形成反射弧，降低因多次记忆所可能带来的挫败感。

所以我认为 Skeuomorphism 设计最好的诠释是要［形］［神］兼具。当然，如果只是追求纯粹的［形］似也并不是一件错事，只不过在设计过程中要把握好一个［度］的存在，因为一些过度的设计看似锦上添花，但却可能画蛇添足，甚至还可能帮倒忙，导致用户出现认知预期之外的困惑感。

views-skeuomorphism-vs-flat-02.jpg

再来看 Flat 风格的代表 － Windows Phone。起初微软给这套界面起名为 Metra UI，后来貌似是版权问题，在 Win8 发布后定名为 Windows UI。相当大胆和另类的反传统设计，虽然一露面就招来了褒贬不一的争论，但不得不说这套 UI 在视觉上让如今被 Apple 侵蚀了多年的眼睛有一种如沐春风般的清新感。

Flat 的本意是［平坦的，扁平的］，所以也让一些人把平面化的设计都归为此类，从词意本身来理解是没错的，但是就如同 Skeuomorphism ［形］［神］兼具，在我看来平面化只是 Flat 的表现形式，它的核心是［简］，即用简洁和抽象的手法来完成设计所要达到的效果，也正因此而不再去追求 Skeuomorphism 中的细节和质感，转而通过更加明确的引导方式来帮助用户完成操作。

不过［简洁］并不表示［简单］，从见到 Windows UI 的第一眼，我就说这套 UI 不简单。虽说它可能不需要你去掌握各种纹理、高光以及阴影的实现方法，只要有点制图软件基础的人就可以轻松画出一个界面，但［画的出］和［画的好］完全是两码事，在它看似简单的色块拼凑下，蕴含着对色彩和布局功力的考验，没有深厚功力的设计师是绝对搞不定的。Windows App Store 里那些［花里胡哨］的应用就是最好的佐证。再不信？你自己试试就知道了。

总的来说，Skeuomorphism 是让操作更自然，而 Flat 则是让操作更直接。无论是哪一种，都不能简单的从字面意思去理解，因为它们不仅仅是一种设计手法的视觉呈现，对一款产品来说，更重要的是其中要包含更多细腻和妥贴的交互体验，只有这样才能做到真正的设计以［人］为本，而不是为了设计而设计。