動漫、電影作為影視作品,難免涉及到UI(人機交互界面)的鏡頭。直接使用現(xiàn)實中存在的界面,很有可能引發(fā)糾紛。
除去那些廢萌作品里粗制濫造的日式UI設(shè)計之外,為了提升作品的時髦度科幻感,許多作品也會在UI上下大功夫。比如夏日大作戰(zhàn)的 OZ World,EVA 中的 MAGI,刀劍神域中的游戲界面等等……
當(dāng)然,長門大萌神這樣的可攻略類對人用終端也不在考慮之列。
輝光
輝光這個界面不僅僅在動漫中,在許多科幻作品中都是非常受歡迎的一種設(shè)計。不過,輝光這個名字是我自己取的。我們先來看一個典型的輝光設(shè)計的界面:
![Evangelion Shin[00_19_39>[20130526-123003-0]](http://oss.aliyuncs.com/digimoe102514/2013/05/Evangelion-Shin00_19_3920130526-123003-0-600x337.jpg)
EVA Q
在這個鏡頭中,赤木律子所面對的這個界面就是典型的輝光設(shè)計。在我的定義中,我將擁有以下幾種特點的界面歸類為“輝光”:
歷代 EVA 作品中的界面設(shè)計都是典型的輝光界面,從 EVA 中我們也不難看出這種界面的優(yōu)勢。首先是它的反差比較大,用戶能夠很直觀的明確界面上的全部信息。我們尚不明確為何在連大型機器人都能夠制作的出來的未來還在使用這種單色設(shè)計,姑且認為是在 EVA 的背景下只有這種單色設(shè)計才能進行懸浮顯示。
事實上,輝光設(shè)計本身也非常適合懸浮顯示(無顯示器顯示)。因為在傳統(tǒng)設(shè)計中,空白的區(qū)域為了能夠和主題元素有較大的反差往往大面積的使用淺背景色,且界面的設(shè)計有過多的 3D 凸起和明暗變化。這些設(shè)計細節(jié)在傳統(tǒng)顯示器中有很好的顯示效果,但是如果用在懸浮顯示中,就會對視線造成干擾。
想象一下頭圖中機械戰(zhàn)甲中的設(shè)計如果替換成 Mac 或是 Win8 風(fēng)格,那么鋼鐵俠的視野將被全部遮擋。
由于輝光完全采用單色設(shè)計,所以在同一個屏幕(顯示層)上沒有多個窗口的概念,構(gòu)成多個窗口的分割邊框有可能造成視覺焦點障礙。
不同的單色調(diào)會產(chǎn)生出不同的效果,如暖黃色會給人以懷舊的感覺:

命運石之門中的時間線變動儀給人以超懷舊的感覺
相比之下,《創(chuàng):戰(zhàn)績》中的藍色光暈則給人極強的科幻感。
同時,單色設(shè)計和透明/黑色背景也有很好的環(huán)境適應(yīng)性。比如在 EVA 中,除去在原本就呈現(xiàn)出深紅色的背景下,輝光界面都能很好的辨識。
關(guān)于這種設(shè)計的靈感,我認為最早是從單色示波器演變而來。單色示波器的熒光線條與早期的一些科幻影視作品中的界面設(shè)計十分類似。于是,這種印象就一直留在了人們心中保留了下來,即便后來彩色顯示技術(shù)已經(jīng)非常成熟,但在科幻作品中,單色熒光的輝光設(shè)計仍然是十分流行的科幻元素之一。
在目前顯示世界的設(shè)計中,大概只有 Android 的 Holo Dark 與輝光類似。與 Flat 的本質(zhì)區(qū)別在于輝光的線條是立體且自發(fā)光的,它的原型是單色示波器或是彩色霓虹燈,可以理解為一種在特定環(huán)境下產(chǎn)生的 UI 在之后的顯示技術(shù)進步之后的浪漫懷舊。
侘寂
自魅族后,侘寂這個詞就被用爛了。那么,侘寂究竟是什么?根據(jù)百度百科的解釋:侘寂(わび さび/wabi sabi)是日本美學(xué)意識的一個組成部分,一般指的是樸素又安靜的事物。它源自小乘佛法中的三法?。ㄖT行無常、諸法無我、涅盤寂靜),尤其是無常。所以對于這個詞,我們或可以用“禪寂”來理解。
用這個定義來做界定的話,老羅、魅族之流的UI自然絕對算不上侘寂。事實上,能夠算得上侘寂的UI設(shè)計真的很少見。但是值得慶幸的是,在2012年剛剛動畫化的一部作品里所使用的界面剛好符合這個定義。
嗯,看到這個界面如果是二次元宅的話都應(yīng)該能有印象吧,這就是刀劍神域中 SAO 游戲的系統(tǒng)界面。半透明設(shè)計,白色底,亮色配色,小清新風(fēng)格,單色圖標。
當(dāng)然,不只是顏色上,對話窗的彈出和回彈效果,觸摸時的輕微高光,順滑的過渡動畫,界面既不生硬也不過度。界面的設(shè)計整體給人以簡單明了卻又不簡陋的感覺,這便是所謂的侘寂。
單就這個設(shè)計而言,動畫中 SAO 的界面設(shè)計幾乎秒掉目前顯示世界中所有宣稱”極簡主義設(shè)計“的產(chǎn)品。當(dāng)然,這有一大部分原因是因為 SAO 并不是一個真正存在的產(chǎn)品,因此不用考慮到累計不斷的需求更新的緣故。但是,不可否認的是,作為一款網(wǎng)游的內(nèi)置 UI,SAO 的設(shè)計在滿足用戶需求的情況下(登出不算)做到了最簡。
在現(xiàn)實世界中,目前只有 Google 的網(wǎng)頁版(還有 Google Glass)類似于這種設(shè)計。但是,作為一個 Google Plus 的用戶表示……嗯,這種設(shè)計在成熟之前還是謹慎嘗試比較好。
茅場晶彥,不愧是既會做硬件又會做軟件,還能做前端的男人,谷歌喊你去做設(shè)計師!
擬物
擬物設(shè)計在動漫作品中事實上是很常見的,由于突破了顯示器的障礙,在未來的一些世界中,導(dǎo)航用的數(shù)碼伴侶已經(jīng)取代了簡單的人機交互界面。
擬物的設(shè)計最直觀的好處就是讓用戶能夠很快速的上手,明白每個界面的功能是什么:

加速世界中的血槽
但是,擬物設(shè)計的問題在于視覺疲勞,和設(shè)計復(fù)雜。而且,只能在特定的環(huán)境下使用。為某一系統(tǒng)開發(fā)的擬物界面,很難在不做修改的情況下移植到其他系統(tǒng)去,兼容性遠沒有輝光和侘寂風(fēng)格高。正如老羅詬病 iOS 那樣,為了讓擬物擁有更好地兼容性,蘋果強制的給每一個圖標增加了一個圓角矩形的限制,這個規(guī)定使非常有意義的。
擬物風(fēng)格如果不用邊框加以限制,將會顯得非常凌亂。尤其是在懸浮顯示技術(shù)發(fā)達的動漫和科幻作品中,擬物將會引發(fā)”哪里是界面,哪里是真實物體“的混亂。
其他
雖然并不是一一對應(yīng),但是 iOS 和 Android 的設(shè)計都能在動漫作品中找到自己的影子。而作為「三大」移動系統(tǒng)之一的 Windows Phone 則幾乎找不到與其近似的設(shè)計。不知道這是巧合還是因為它實在是太……
由于懸浮顯示技術(shù)和無邊框設(shè)計的普及,在動漫作品中UI的設(shè)計比現(xiàn)實世界中的設(shè)計要開放的多。在細節(jié)上,圓形和多邊形(蜂巢形)的控件和窗口也比現(xiàn)實世界的要多。原因是因為屏幕不再是一個簡單的矩形,因此可以不用考慮與顯示范圍貼合的問題。
圓形和多邊形的使用,更符合在特殊環(huán)境下的需求。比如圓形可以用于瞄準系統(tǒng),多邊形的窗口則為與臨近窗口之間進行貼合交互提供了更多的可用邊。
不過,不論是在科幻作品中還是在現(xiàn)代作品中,所有那些看起來很順眼的動漫 UI 都有一個共同特點:整部作品的界面風(fēng)格統(tǒng)一。因此,所有那些試圖在 iOS 上弄 Holo,在 Android 上做 Metro,在 Winodws Phone 上搞擬物的設(shè)計師,你們都出局了,懂么?
原文已發(fā)表至萌數(shù)碼