动漫中的 UI 设计

动漫、电影作为影视作品，难免涉及到UI（人机交互界面）的镜头。直接使用现实中存在的界面，很有可能引发纠纷。

除去那些废萌作品里粗制滥造的日式UI设计之外，为了提升作品的时髦度科幻感，许多作品也会在UI上下大功夫。比如夏日大作战的 OZ World，EVA 中的 MAGI，刀剑神域中的游戏界面等等……

当然，长门大萌神这样的可攻略类对人用终端也不在考虑之列。

辉光

辉光这个界面不仅仅在动漫中，在许多科幻作品中都是非常受欢迎的一种设计。不过，辉光这个名字是我自己取的。我们先来看一个典型的辉光设计的界面：

EVA Q

在这个镜头中，赤木律子所面对的这个界面就是典型的辉光设计。在我的定义中，我将拥有以下几种特点的界面归类为“辉光”：

1. 绝大多数为单色设计，背景色为暗色，前景色为亮色，反差大




2. 亮色部分有明显的光晕




3. 靠明度而不是色差来构成不同元素




4. 以线条和文字构成主要部分





 

事实上，辉光设计本身也非常适合悬浮显示（无显示器显示）。因为在传统设计中，空白的区域为了能够和主题元素有较大的反差往往大面积的使用浅背景色，且界面的设计有过多的 3D 凸起和明暗变化。这些设计细节在传统显示器中有很好的显示效果，但是如果用在悬浮显示中，就会对视线造成干扰。

想象一下头图中机械战甲中的设计如果替换成 Mac 或是 Win8 风格，那么钢铁侠的视野将被全部遮挡。

由于辉光完全采用单色设计，所以在同一个屏幕（显示层）上没有多个窗口的概念，构成多个窗口的分割边框有可能造成视觉焦点障碍。

不同的单色调会产生出不同的效果，如暖黄色会给人以怀旧的感觉：

命运石之门中的时间线变动仪给人以超怀旧的感觉

相比之下，《创：战绩》中的蓝色光晕则给人极强的科幻感。

同时，单色设计和透明/黑色背景也有很好的环境适应性。比如在 EVA 中，除去在原本就呈现出深红色的背景下，辉光界面都能很好的辨识。

关于这种设计的灵感，我认为最早是从单色示波器演变而来。单色示波器的荧光线条与早期的一些科幻影视作品中的界面设计十分类似。于是，这种印象就一直留在了人们心中保留了下来，即便后来彩色显示技术已经非常成熟，但在科幻作品中，单色荧光的辉光设计仍然是十分流行的科幻元素之一。

在目前显示世界的设计中，大概只有 Android 的 Holo Dark 与辉光类似。与 Flat 的本质区别在于辉光的线条是立体且自发光的，它的原型是单色示波器或是彩色霓虹灯，可以理解为一种在特定环境下产生的 UI 在之后的显示技术进步之后的浪漫怀旧。

侘寂

自魅族后，侘寂这个词就被用烂了。那么，侘寂究竟是什么？根据百度百科的解释：侘寂（わび さび/wabi sabi）是日本美学意识的一个组成部分，一般指的是朴素又安静的事物。它源自小乘佛法中的三法印（诸行无常、诸法无我、涅盘寂静），尤其是无常。所以对于这个词，我们或可以用“禅寂”来理解。

用这个定义来做界定的话，老罗、魅族之流的UI自然绝对算不上侘寂。事实上，能够算得上侘寂的UI设计真的很少见。但是值得庆幸的是，在2012年刚刚动画化的一部作品里所使用的界面刚好符合这个定义。

嗯，看到这个界面如果是二次元宅的话都应该能有印象吧，这就是刀剑神域中 SAO 游戏的系统界面。半透明设计，白色底，亮色配色，小清新风格，单色图标。

当然，不只是颜色上，对话窗的弹出和回弹效果，触摸时的轻微高光，顺滑的过渡动画，界面既不生硬也不过度。界面的设计整体给人以简单明了却又不简陋的感觉，这便是所谓的侘寂。

单就这个设计而言，动画中 SAO 的界面设计几乎秒掉目前显示世界中所有宣称”极简主义设计“的产品。当然，这有一大部分原因是因为 SAO 并不是一个真正存在的产品，因此不用考虑到累计不断的需求更新的缘故。但是，不可否认的是，作为一款网游的内置 UI，SAO 的设计在满足用户需求的情况下（登出不算）做到了最简。

在现实世界中，目前只有 Google 的网页版（还有 Google Glass）类似于这种设计。但是，作为一个 Google Plus 的用户表示……嗯，这种设计在成熟之前还是谨慎尝试比较好。

茅場晶彥，不愧是既会做硬件又会做软件，还能做前端的男人，谷歌喊你去做设计师！

拟物

拟物设计在动漫作品中事实上是很常见的，由于突破了显示器的障碍，在未来的一些世界中，导航用的数码伴侣已经取代了简单的人机交互界面。

拟物的设计最直观的好处就是让用户能够很快速的上手，明白每个界面的功能是什么：

加速世界中的血槽

但是，拟物设计的问题在于视觉疲劳，和设计复杂。而且，只能在特定的环境下使用。为某一系统开发的拟物界面，很难在不做修改的情况下移植到其他系统去，兼容性远没有辉光和侘寂风格高。正如老罗诟病 iOS 那样，为了让拟物拥有更好地兼容性，苹果强制的给每一个图标增加了一个圆角矩形的限制，这个规定使非常有意义的。

拟物风格如果不用边框加以限制，将会显得非常凌乱。尤其是在悬浮显示技术发达的动漫和科幻作品中，拟物将会引发”哪里是界面，哪里是真实物体“的混乱。

其他

虽然并不是一一对应，但是 iOS 和 Android 的设计都能在动漫作品中找到自己的影子。而作为「三大」移动系统之一的 Windows Phone 则几乎找不到与其近似的设计。不知道这是巧合还是因为它实在是太……

由于悬浮显示技术和无边框设计的普及，在动漫作品中UI的设计比现实世界中的设计要开放的多。在细节上，圆形和多边形（蜂巢形）的控件和窗口也比现实世界的要多。原因是因为屏幕不再是一个简单的矩形，因此可以不用考虑与显示范围贴合的问题。

圆形和多边形的使用，更符合在特殊环境下的需求。比如圆形可以用于瞄准系统，多边形的窗口则为与临近窗口之间进行贴合交互提供了更多的可用边。

不过，不论是在科幻作品中还是在现代作品中，所有那些看起来很顺眼的动漫 UI 都有一个共同特点：整部作品的界面风格统一。因此，所有那些试图在 iOS 上弄 Holo，在 Android 上做 Metro，在 Winodws Phone 上搞拟物的设计师，你们都出局了，懂么？