动漫中的 UI 设计

Iron_Man_Mark_VII_HUD_design_By_Jayse_Hansen

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

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

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

辉光

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

Evangelion Shin[00_19_39>[20130526-123003-0]
EVA Q

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

  • 绝大多数为单色设计,背景色为暗色,前景色为亮色,反差大
  • 亮色部分有明显的光晕
  • 靠明度而不是色差来构成不同元素
  • 以线条和文字构成主要部分
  • 历代 EVA 作品中的界面设计都是典型的辉光界面,从 EVA 中我们也不难看出这种界面的优势。首先是它的反差比较大,用户能够很直观的明确界面上的全部信息。我们尚不明确为何在连大型机器人都能够制作的出来的未来还在使用这种单色设计,姑且认为是在 EVA 的背景下只有这种单色设计才能进行悬浮显示。

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

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

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

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

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

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

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

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

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

    侘寂

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

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

    [TSDM>[Sword_Ar[00_08_39][20130526-151002-0]

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

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

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

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

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

    拟物

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

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

    加速世界中的血槽
    加速世界中的血槽

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

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

    其他

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

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

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

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

    原文已发表至萌数码

    最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 158,560评论 4 361
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 67,104评论 1 291
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 108,297评论 0 243
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 43,869评论 0 204
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 52,275评论 3 287
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 40,563评论 1 216
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 31,833评论 2 312
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 30,543评论 0 197
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 34,245评论 1 241
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 30,512评论 2 244
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 32,011评论 1 258
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 28,359评论 2 253
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 33,006评论 3 235
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 26,062评论 0 8
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 26,825评论 0 194
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 35,590评论 2 273
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 35,501评论 2 268

    推荐阅读更多精彩内容

    • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
      passiontim阅读 170,566评论 25 707
    • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
      Willry阅读 3,498评论 1 48
    • 谢小玲啊
      谢小宠阅读 116评论 0 0
    • 得到什么从来都不是容易,可是我才懂
      程无禾阅读 135评论 0 0
    • 针对google的同步策略,我们以日历为例子,做了一个同步流程的完整调查。调查手段包括阅读文档、实际使用和抓包分析...
      tiger桂阅读 1,078评论 0 0