以下文章來(lái)源于六十和二四的世界 ，作者Jim HuiHui

Hey 各位，我是廣播員 Jim。

這半年 Jim 都在忙于工作，疏于更新，近日有幸在 GTbb 游戲社群做了一次分享。本期是其文字整理內(nèi)容。

簡(jiǎn)單來(lái)說(shuō)，隨著硬件和科技的發(fā)展， UI 會(huì)有更大發(fā)展空間。工業(yè)化管線可以保證 UI 更有效率地被開發(fā)。從美學(xué)角度的設(shè)計(jì)，能讓 UI 更人性化，同時(shí)更好地為游戲體驗(yàn)服務(wù)。

這次分享，我想從早期 UI 的發(fā)展過(guò)程中，找到 UI 演變的思路，對(duì)當(dāng)前 UI 的開發(fā)提出思考，最后大膽猜測(cè)未來(lái) UI 的發(fā)展。

一

UI 本身詞語(yǔ)是 “User Interface” 。在這里，我認(rèn)為“接口” 是關(guān)鍵詞。接口本身的含義是：“讓本身相互獨(dú)立或不關(guān)聯(lián)的系統(tǒng)，能相互交流和使用的地方。”

當(dāng)前我們提到用戶接口（ UI ）的時(shí)候，往往指的是人-電腦接口及其衍生物。實(shí)際上，UI 涵蓋的是人與任何機(jī)器交互的接口。從操作的本質(zhì)上來(lái)說(shuō)，哪怕沒有 UI，人也能完成和機(jī)器之間的操作。

然而 UI 的缺乏會(huì)帶來(lái)很糟糕的后果。它會(huì)帶來(lái)各種不便。比如上世紀(jì)中葉，因?yàn)橛?jì)算機(jī)的計(jì)算資源有限，程序員必須使用打孔卡為計(jì)算機(jī)編程。這種編程方式對(duì)于用戶錯(cuò)誤是零容忍。任何編碼的修改都會(huì)花費(fèi)大量的時(shí)間成本。之后人們采取了命令行界面和圖形界面，解決了人機(jī)交互問(wèn)題。

更糟糕的是，UI 的缺乏或者差勁設(shè)計(jì)，還會(huì)嚴(yán)重影響人類的生產(chǎn)活動(dòng)，甚至是生存。二戰(zhàn)時(shí)期，因?yàn)轱w機(jī)操作失誤造成的人員損失，占到了很大的比重。因?yàn)轱w機(jī)設(shè)計(jì)師沒有考慮到面板的實(shí)際操作效率和易操作性。為了解決這個(gè)問(wèn)題，現(xiàn)代 UX 由此誕生。

早期的可口可樂(lè)瓶子形狀，和大部分啤酒瓶子非常類似

而在正面例子中，關(guān)于可口可樂(lè)瓶子如何被設(shè)計(jì)的故事十分有趣。早期冰箱沒有夜明燈，人們很難在夜晚從冰箱中找到自己想要的飲品。可口可樂(lè)的設(shè)計(jì)師于是創(chuàng)造了特殊的瓶子形狀，讓用戶可以輕易在黑暗中識(shí)別出可口可樂(lè)飲料。在這個(gè)例子中，人們要解決的問(wèn)題是：人們?nèi)绾卧谂c冰箱的操作中，找到特定的物品。而設(shè)計(jì)師從觸覺的角度，給出了解決方案。

從這個(gè)角度出發(fā)，UI （包括 UX ）實(shí)際上是讓人類能操作更強(qiáng)大的工具，去完成生產(chǎn)操作，產(chǎn)出成果，獲得認(rèn)知世界的新方式。

回到人本身，我們的人體已經(jīng)被造物主賦予了各種接口，即人體器官。這些接口的作用，就是讓我們以特定的方式解碼這個(gè)世界，同時(shí)允許我們產(chǎn)生各種互動(dòng)。以眼睛為例，人眼只能看見特定的頻率的光譜。雖然這個(gè)范圍有一定限制，但是它卻能讓我們的大腦在合理?yè)p耗下，完成視覺成像。

世界上最早的鼠標(biāo)設(shè)備

由于人類大部分的接受信息都是來(lái)自于視覺，基于視覺的 UI 漸漸成為主流?；氐接?jì)算機(jī) UI，早期的命令行雖然理論上可以完成所有操作，但是它的學(xué)習(xí)成本較高，尤其對(duì)于非英語(yǔ)國(guó)家用戶極其不友好。而鼠標(biāo)作為新的輸入設(shè)備，讓圖形界面成為了可能。它等同于用戶的手在計(jì)算機(jī)中得到了延展。相比于現(xiàn)實(shí)的手，這個(gè)虛擬的手只能執(zhí)行有限的操作。為此，設(shè)計(jì)師必須采用新的概念，來(lái)定義圖像界面中的用戶操作和反饋。

Macintosh 主要開發(fā)者 Bill 用拍立得記錄下的用戶界面的不同演變版本

這也許能部分解釋為何早期的 UI 美術(shù)風(fēng)格，都是傾向于擬物化設(shè)計(jì)。因?yàn)楫?dāng)我們?cè)噲D用圖標(biāo)代替文字來(lái)濃縮信息時(shí)，如果采用能讓用戶與現(xiàn)實(shí)產(chǎn)生直接聯(lián)系的美術(shù)風(fēng)格，就會(huì)降低用戶的學(xué)習(xí)成本。而正是因?yàn)閿M物化降低了用戶學(xué)習(xí)門檻，之后流行的扁平化風(fēng)格才能成為可能。因?yàn)橛脩粢呀?jīng)具備了操作圖形界面的基本知識(shí)。

用《硅谷革命》書中的一句話來(lái)概括，就是：“任何事物都不是一蹴而就的，而大多數(shù)人往往只能看到最終的形態(tài)” 。

二

廣義 UI 更像是將整個(gè)游戲當(dāng)作一個(gè)接口

如果順著 UI的發(fā)展思路來(lái)看當(dāng)今的游戲 UI，我們可以“狹義 UI”和“廣義 UI”去解讀。

狹義 UI 是大家所熟知的游戲 UI，往往指 2D 界面。

而廣義 UI 是指不單把圖形界面（ GUI ）視為 UI。在之前的 UI 訪談錄 游戲 UI 談話會(huì)（ 一 ）中，資深游戲美術(shù) speedTurtle3.0 提到：

“ 游戲就是 UI。游戲本身就是一種互動(dòng)，它是一個(gè)交互的過(guò)程?！?/span>

即 UI 不僅包含傳統(tǒng)定義中的用戶圖形界面，還包含游戲的實(shí)時(shí)畫面以及其他部分。這種理解非常有意思，因?yàn)樗延螒虮倔w變成了載體的一部分，即游戲也是交互媒介的一部分。根據(jù)這種定義，玩家和 UI 的接觸范圍被遠(yuǎn)遠(yuǎn)地?cái)U(kuò)大了，同時(shí)游戲中的各個(gè)系統(tǒng)更有可能和 UI 產(chǎn)生更強(qiáng)的交集。

之所以提到這兩種概念，主要基于兩個(gè)角度的思考：

1. UI 的設(shè)計(jì)不能只從已有范圍出發(fā)。從早期 UI 設(shè)計(jì)中，我們可以看到很多習(xí)以為常的設(shè)計(jì)，都是基于當(dāng)時(shí)的硬件條件，不斷探索迭代出的成果。當(dāng)前常見 UI 形式，都是基于特定條件。從廣義角度思考 UI，能讓我們跳出思維定勢(shì)。
2. 在硬件性能得到極大提升的現(xiàn)在， UI 是否能有更大的發(fā)揮空間？以廣義 UI 去思考設(shè)計(jì)，是否意味著 UI 開發(fā)需要更多的資源支持？比如我們能否將 3D 素材將包含在 UI 設(shè)計(jì)當(dāng)中？開發(fā)團(tuán)隊(duì)能否兼容更多不同的系統(tǒng)？

目前我的思考結(jié)果是：

1. UI 設(shè)計(jì)和玩法設(shè)計(jì)都是為目標(biāo)體驗(yàn)服務(wù)
2. UI 設(shè)計(jì)和開發(fā)不應(yīng)該處于管線的末端
3. UI 設(shè)計(jì)不應(yīng)拘泥于傳統(tǒng)2D 菜單頁(yè)面形式

當(dāng)我們賦予游戲 UI 更多角色時(shí)，UI 可以為游戲體驗(yàn)提供更好的服務(wù)。不論是廣義還是狹義 UI，首先它是基于游戲的設(shè)計(jì)。它不僅僅是一個(gè)只提供功能的工具。它還幫助玩家進(jìn)入沉浸體驗(yàn)。這也是游戲 UI 不同于互聯(lián)網(wǎng) UI 的地方。

從開發(fā)成本上來(lái)說(shuō)，只有擁有良好管線的 UI 開發(fā)方式，才能應(yīng)對(duì)各種迭代更新需求。我們也能更清晰地看到 UI 資源的調(diào)配，從而更有效地在開發(fā)過(guò)程中，和其他團(tuán)隊(duì)協(xié)同作戰(zhàn)。同時(shí)，廣義和狹義 UI 的比較，能幫助我們思考 UI 的可拓展空間。游戲體驗(yàn)?zāi)繕?biāo)的設(shè)計(jì)，可以更直接通過(guò)更廣泛的 UI 傳達(dá)。

三

既然我們需要 UI 服務(wù)于游戲體驗(yàn)，我們開始不斷強(qiáng)調(diào) UI 的沉浸設(shè)計(jì)。我將其稱之為沉浸式 UI （ 詳見 淺談沉浸式 UI ）

沉浸式 UI 的目標(biāo)是“有效地傳遞信息，為玩家?guī)?lái)更好的游戲體驗(yàn)，能讓玩家沉浸于游戲互動(dòng)”。沉浸式 UI 的形式非常廣泛。很多時(shí)候，它和劇情 UI ( Diegetic UI ) 非常類似。簡(jiǎn)單來(lái)說(shuō)，劇情 UI 是存在于游戲的 3D 空間中的一個(gè)物體。它能被游戲人物（ 即玩家操作的角色 ）看見。比如游戲世界中大屏幕上的操作菜單。這種形式的 UI ，不再是單獨(dú)突兀的傳統(tǒng) UI ，它與游戲世界同時(shí)存在，玩家往往不會(huì)意識(shí)到它作為 UI 的存在。

拋開 UI 的功能性，我們常見到的新穎 UI 形式有：

1. 強(qiáng)烈的美術(shù)風(fēng)格
2. 弱存在感

強(qiáng)烈美術(shù)風(fēng)格的 UI 目前在電影中更為常見

強(qiáng)烈的美術(shù)風(fēng)格不難理解。當(dāng)設(shè)計(jì)已經(jīng)不止于功能的滿足，我們便可能實(shí)現(xiàn)藝術(shù)的效果。比如穿衣的時(shí)尚感便是這個(gè)原理。需要注意的是，弱存在感不等同于 UI 不存在。它可以通過(guò)極簡(jiǎn)化實(shí)現(xiàn)，也可以通過(guò) gameplay 融入來(lái)實(shí)現(xiàn)。

這兩方面，都在強(qiáng)調(diào) UI 的額外屬性。在實(shí)際開發(fā)過(guò)程中，它有可能消減其 UI 的功能性。如何盡量減少?zèng)_突，完成二者的融合，是我們需要解決的問(wèn)題。

瓦西里椅子是工業(yè)和美學(xué)設(shè)計(jì)融合的典范

這種問(wèn)題，實(shí)際上包豪斯學(xué)院曾經(jīng)做過(guò)解答。這所來(lái)自于魏瑪時(shí)期的德國(guó)建筑學(xué)校，試圖以一種新的形式理解藝術(shù)與工業(yè)關(guān)系?！?/span>形式追隨功能”便是其核心概念。如何將產(chǎn)品的設(shè)計(jì)，同時(shí)契合當(dāng)前工業(yè)流水線，兼顧成本和產(chǎn)品效果，這是需要我們思考的問(wèn)題。

這里我想舉一個(gè)關(guān)于小地圖設(shè)計(jì)的例子：

在游戲中，玩家需要使用小地圖來(lái)確認(rèn)位置，完成導(dǎo)航。在實(shí)際導(dǎo)航過(guò)程中，玩家的視線會(huì)經(jīng)常集中在小地圖區(qū)域，這樣會(huì)讓玩家忽略 gameplay 中的環(huán)境，最后讓尋路的過(guò)程變成了純 UI 尋路。

導(dǎo)航本身沒有問(wèn)題，只是玩家很容易忽略 3D 空間中的游戲環(huán)境。圖中上部分是傳統(tǒng)小地圖設(shè)計(jì)，下圖是《對(duì)馬島之鬼》的導(dǎo)向風(fēng)設(shè)計(jì)。

游戲《對(duì)馬島之鬼》天才地將風(fēng)作為導(dǎo)航工具，讓玩家能同時(shí)關(guān)注游戲 gameplay 和導(dǎo)航內(nèi)容，達(dá)到了兩者的統(tǒng)一。

它的具體做法是當(dāng)玩家在大地圖中確認(rèn)目標(biāo)地點(diǎn)后，玩家可以通過(guò)特定輸入觸發(fā)導(dǎo)航風(fēng)，風(fēng)吹向的方向便是目的地方向。這種設(shè)計(jì)避免了玩家不斷切換視線，可以專注于游戲的實(shí)際內(nèi)容。而風(fēng)這一自然元素，在以劍戟片主題的游戲中，顯得極其融洽。順風(fēng)而行的美學(xué)意味不言而喻。

四

半世紀(jì)前的頭戴式 VR 顯示器“達(dá)摩克里斯之劍”（ 1968 年 ）。我們可以看到新科技從理論實(shí)現(xiàn)到真正民用普及，往往需要很長(zhǎng)的時(shí)間。

從 UI 的發(fā)展史來(lái)看，每次 UI 設(shè)計(jì)的轉(zhuǎn)變，往往和硬件息息相關(guān)，硬件讓我們以特定方式解讀世界成為可能。對(duì)于未來(lái)，我們要從硬件和媒介出發(fā)，思考 UI 的設(shè)計(jì)。不然設(shè)計(jì)會(huì)被局限。

當(dāng)前 UI 其實(shí)和早期的游戲很像，都是基于 2D 層面的移動(dòng)。如果我們觀察早期的游戲手柄設(shè)計(jì)，可以發(fā)現(xiàn)其按鍵設(shè)備只能支持 2D 游戲。而 3D 游戲的出現(xiàn)，改變了手柄的輸入設(shè)計(jì)。這是少見的軟件影響硬件設(shè)計(jì)的案例。

從已有的信息來(lái)看，依賴于人類的雙手作為操作輸入設(shè)備的媒介，如手柄和觸屏，將會(huì)繼續(xù)發(fā)展，但不會(huì)有太大的改變。因?yàn)槟壳暗母鞣N設(shè)備，已經(jīng)限定了輸入設(shè)備是依賴于人類的觸覺進(jìn)行操作，并且信息維度是 2D 維度。

當(dāng)前的 VR 設(shè)備，手柄可以看到很多游戲手柄的影子，實(shí)際操作也包含類似 PC 鼠標(biāo)交互部分

我個(gè)人認(rèn)為 VR UI 會(huì)有很大潛質(zhì)，為 UI 設(shè)計(jì)帶來(lái)新的思路。相比于當(dāng)前的圖形界面，VR 是可以真正實(shí)現(xiàn)基于 3D 維度的交互。當(dāng)前 VR UI 基本上是復(fù)刻手柄和鼠標(biāo)的思路。它們并沒有將 VR 設(shè)備的信息維度優(yōu)勢(shì)利用起來(lái)。3D 維度的層面，可以讓我們以更高效的方式處理信息。而我們可以從已有的科技產(chǎn)品和科幻電影中，看到基于手勢(shì)的交互、基于手指的全息交互和純 3D 維度的輸入設(shè)備。

從左至右：基于手勢(shì)檢測(cè)的 Leap Motion，《少數(shù)派報(bào)告》截圖，《流浪地圖》截圖

總的來(lái)說(shuō)，我們需要重新思考 UI 其為接口所發(fā)揮的作用。人和機(jī)器究竟如何操作以完成更好的生產(chǎn)活動(dòng)，人會(huì)和什么樣的機(jī)器產(chǎn)生交互，這些問(wèn)題很可能在未來(lái)幾年就會(huì)有新答案。