用UI講故事，表達情感和創造個性

在開發Electric Zine Maker（一款雜誌製作軟體）的過程中，我一直想找個機會來好好談談UI，向大家解釋為什麼要把UI設計當作是創造虛擬世界的一部分，而不是單純的介面設計工作。

我一直以來都非常依賴UI傳達遊戲的資訊，或者在它的基礎上加以渲染。對我來說，UI和對話、音樂、遊戲設計一樣重要。設計得當，它就有助於強化遊戲的主題，甚至以一種其它部分無法做到的方式來進一步深化遊戲。

好，話不多說了，我直接進入正題。

我最喜歡做的事情是反直覺地使用UI來傳遞無助感，就像是不知道為什麼現實在瓦解，一切事情都亂了套。UI也是一個很好的幽默展示平臺。比如，最小化按鈕的功能的不一定只是最小化，可能會讓App抱怨、抗議說“我剛剛才被最小化啊！怎麼又來！”


Anatomically Incorrect Dinosaurs這個遊戲就有類似的設計：如果你點了最小化，遊戲就會開始傷心呼喊，並用一種奇怪的機器人嗓音唱著“寶貝，別傷害我”。這個UI應用方式的有趣點在於開發者將UI視為遊戲中的一個實際角色，還給它配了音。它會對你的行動做出反應，比如你拖動視窗，它會發出玩滑滑梯時的歡呼聲。如果你退出遊戲，它會生氣。在完全退出前還會跟你告別。

這種把UI當作角色的設計方式，有點像是利用“擊破第三面牆”的方式來塑造遊戲。在你玩遊戲的時候，它成為了一個能跟你互動的、有自我意識的實體。這是一種增加互動豐富性的巧妙方式，並引入了驚喜元素，從而在遊戲中穿插幽默的小細節。


這種方法能獲得相當不錯的效果，我用好幾次。與Anatomically Incorrect Dinosaurs類似，ARMAGAD（PC版的Tetrageddon)也使用了這種UI設計方式。但ARMAGAD沒有那麼明顯，可以說你得費些心思才能發現。UI就像是個敘事者一樣，講述你的行為。ARMAGAD就是遊戲中隱形的上帝角色。當你幫助Cybermonkey逃跑時，ARMAGAD會進行“現場解說”，就感覺像遊戲自己也在玩一樣。




在某些情況下，UI本身也可以成為遊戲。就比如Electric File Monitor，一款偽軟體，它自稱是“為你的電腦打造的監獄監管系統”。它會掃描你的電腦檔案，隨機指控某個檔案為危險物件。

你可以把這些檔案列入審訊中，或者排成一列，然後根據你對檔案的喜愛程度來決定如何懲罰它們。檔案通常會辯稱無罪，然後跟你求情。在這種情況下，遊戲即UI，UI即遊戲。軟體作為一個角色跟你互動，把你的電腦拉進了遊戲中。




所以如你所見，UI設計有很多巧妙的運用方式。你的UI是個角色，有個性、有維度。你的UI可以是一個“可破壞環境（指遊戲中可被玩家完全或部分摧毀的環境）”，被用來凸顯遊戲的“熾熱之夢（fever dream，這裡指一種不連貫或奇怪的經歷，事後回憶時會產生一種更強烈的獵奇感）”元素。

舉一個具體的例子——我的Electric Zine Maker網站。在許多頁面中，UI具有物理特性並會受到重力的影響。你可以把東西扔來扔去，或者是打碎。

這不是我第一次把UI設計成物理物件，但這是我第一次應用於網站。我認為物理學+UI的組合效果是非常成功的，這樣很多元素都變得趣味十足。網頁就像一個小小的遊樂場，你很難抵禦拋玩東西的慾望。

Everything is going to be OK這個遊戲是我的最新“實驗”，真正深入地探索了利用UI喚起人們情感的各種方式。

遊戲UI的很大一部分都是基於老式圖形使用者介面（GUI）以及其它作業系統元素而設計的。大家對細節的考究著實令我驚訝，Alexander King甚至還寫了一篇非常詳細的分析文章（https://medium.com/LiterallyAKing/vintage-windows-guis-in-everything-is-going-to-be-ok-20b38b11bb4f）。


Everything is going to be OK是一款圍繞著生活小片段構建的遊戲，一個非常私人化的遊戲。這樣使用UI是有原因的，是為了傳遞某些資訊。

年代久遠的GUI創造了一種熟悉感和親和感。從多方面來說，它在互動和體驗使用者體驗方面起到了一個舒適區的作用。這個陌生的桌面環境中你看到很多有趣的東西，但我們都知道如何與它們互動。人們認為這就是一種“互動詞彙”(比如UX)，理解這種行為本身幾乎就等同於學會了一種語言。

如果你對它的理解足夠多，你就可以顛覆它(儘管我討厭用這個詞，但本質情況就是這樣)，插入一些與人們預期相反的小細節。如果做對了，而且程度把握得當，你所創造的世界就非常像一個熾熱之夢。

小的UI元素會與你對話，一些你原本以為無害的東西會把你捲入其中，但實際上這只是一個全新的場景。你會經歷各種不同的互動行為，以至於後來你都無法確信自己的判斷，就好像你在迷宮中尋路，而不是在一個結構化的功能環境裡。

我們習慣了計算機這種“拼貼畫式”的操作方式。把你的桌面看成是一個環境，當視窗、標籤、單獨的軟體同時執行時，這個空間就會變得碎片化。所有的東西都需要你的關注，但是不同物件背後都是一個獨立的世界。這一個非常有意思的敘事探索方式。

當你使用桌面時，不同的視窗開啟，不同的事情在每個視窗中發生，它們大多是不相關的獨立活動，你關閉它們，處理完事情，然後開啟新的視窗。由於我們已經習慣了這種計算機使用方式，所以我們對這些環境事物的反應有著同樣的猜想。我們認為這些UI和系統應具有某些功能。如果事情沒有按照我們所想的展開(違反我們在互動語言上達成的共識)，當計算機做相反的事情時，這幾乎就等於是背叛。

我的意思是，當一些東西崩潰的時候，人們會發怒，其實這很有趣。你的生氣物件是一個機器，它不懂得什麼是在意、關心。製造出這種推翻慣性思維的東西真的很有意思。人們覺得他們對一切失去了控制，他們不再是這裡主宰者。


Anatomically Incorrect Dinosaurs會在結局時自己關閉。它給你呈現一個隨機的獵奇視訊，然後“拜拜”，視窗關閉。你會有一種空虛感，就像你在進行一場狂野的旅行，卻無法控制其中的任何一部分。

Everything is going to be OK也有很多類似的情況。當你玩到結尾時，遊戲會自動關閉。有一個象棋環節，你可以直接移動棋子“吃掉”國王或者女王，但是人們通常還是會按照普通象棋那樣玩。他們要花上一些時間才意識到這個世界並不需要按照他們所想的規則進行互動，人們恍然大悟的反應總是很有趣。

棋盤也會隨著時間的流逝而變化，之後幾乎不可能繼續玩下去而且毫無意義。


UI是一個我們能一目瞭然的功能展示舞臺。

舉一個非UI但是也適用於此情況的例子：幾乎每個人都知道在玩經典的2D超級馬里奧遊戲時應該往右走。如果你讓向右走的行為變得毫無意義，真正的勝利之路是向左走，那麼玩家會不斷質疑自己的互動方式、思考為什麼不奏效。突然他們明白反向思維才是對的，這就像是你給他們來了一場思維解放運動。

只需改變一個設定，你就能讓使用者產生不小的情緒波動，這其實是非常有趣的。這樣的空間是非常適用於特定話題的探討，並以有趣的方式呈現有趣的片段內容，比如假程式、分支故事或由淺入深的內容，讓人們沉浸其中。你實際上是在創造一個情緒化的空間。

UI是一種情緒語言，我認為理解這一點尤為重要。當電腦沒有按照你所想的工作時，你會產生一種情緒反應(崩潰、關閉、錯誤=迷惑、空虛、混亂)。你可以利用這一點來強化遊戲主題。

老式的GUI和OS這是“下套”的好地方，因為它們的年代足夠久遠，促使人們形成了慣性思維，他們不大可能產生太複雜的推測。你可以通過幽默或背離常理的方式來塑造一個“最熟悉的陌生人”，給玩家一個驚喜。

在Everything is going to be OK中，我通過這種方式增加了一種身處熾熱之夢、失控的感覺，並且遊戲充滿了獵奇的幽默元素。

UI所呈現的不同個性(尤其是老式的)也是一個很好的利用點。我有一個很長的推特，用來更新整理各種資源庫，其中就有好幾個老式UI素材網站。

老式電腦系統在使用者體驗方面很笨拙——介面按鈕太大、其它東西太小、字型太奇怪、色彩過於鮮豔，那些簡陋的圖案看上去像是佔位符，但不知為什麼又被留到了最後——它們的缺點就構造出了一種個性，使用者就可以感受到這是一種“糟糕”或笨拙的形象。當時的UI設計還處於探索階段，也正因缺乏統一規則，使它更加有趣。就比如微軟早年的Microsoft Bob，開發人員繪製了一個實際使用環境，而不是電腦桌面。但這個軟體因為過於簡單（只是講解如何使用計算機）且售價過高，在沒有市場的情況下被淘汰了。然而，像微軟這樣的大公司願意花時間做這樣的東西真是太棒了。


用“真實環境”替代普通的使用者介面，這樣的例子不止一個。再比如3DNA、Microsoft Encarta的Mind Maze，早期的寓教於樂軟體經常這麼幹。試圖改進某些東西與多此一舉之間的界線是一個灰色地帶，審視這些失敗案例、理解其中的原因是非常有意義的。你可以去toastytech.com看看，那裡有非常豐富的檔案記錄。

我不想過多地談論老式UI，但是我認為有一點很值得思考——老式UI是如何從它的缺陷中受益的(以及為什麼我們對它有如此美好的回憶)。那時的電腦並不會讓你覺得自己是在操作一臺精心打磨、充滿品牌特徵的高效機器。這種空間應該是非常私人化的，人們經常使用桌面主題的行為就說明了這一點。你看Windows 98~2000的主題，有多少社群是為了定製圖示而建立的。空間的個性化很重要，因為它給你一種掌控感。沒有這些裝扮你就更像是“訪客”，而不是回到一個能夠給你帶來歸屬感的地方。

我們通常會說“回到桌面”，英文裡桌面也叫“Home”，現在也是如此。我認為這是一個時代的遺留物——那時人們渴望讓桌面成為你生活的一個私人空間。而現在我們看到，隨著新時代商業設計模式的出現，品牌化的內容逐漸佔領了這個空間。

例如，OSX和Windows都有很強的商業特徵，空間是由它們而不是使用者控制的。談到使用者自由時，移動領域(OSX和Android)則是一敗塗地——這是另外一個話題了，有時間我們再來談談。

我想說的是，當我們回顧這些老式桌面/空間時，UI給我們的感覺不僅僅是懷舊，而是我們真正能擁有一個私人空間，能夠用UI來表達我們的個性。現在的任何一種軟體，尤其是藝術軟體，都是以最大限度地提高生產力為前提的。甚至如今的網站都是以使用者體驗為核心，目的是最大化使用者留存率、點選量和互動頻率。

從對待使用者的角度來看，可以說這是一種近乎剝削性的語言，我認為這就是為什麼我們喜歡回顧那個更簡單的時代，那時我們有更多的自由，可以“生活”在一個虛擬的空間裡，而不被榨取。有缺陷的UI能給你帶來舒適，因為它告訴你，這是一個人做的，你不是在一個“高標準的環境”中。


所以這就是為什麼我要做Electric Zine Maker，利用UI來建立一個“低標準”的環境。人們可以在這裡釋放創造、探索天性，不會給你一種莫名的壓迫感，暗示著你必須要利用這個工具做出專業性的產品。

如今的藝術設計工具操作方便、功能強大，能給你一個高效的工作環境。軟體開發人員的努力大多都是為了讓創作成為一個流線型的工序，不管你創作的是哪種藝術型別。就比如說Photoshop，這是一個製作專業的藝術產品、幫你掙錢的軟體。我覺得，在這種空間裡，總有一種“你必須是專業的”“你必須要做出驚豔世人的作品”的感覺。生產力就像是一塊無形的大石壓著你，連草稿都不敢輕易打。事情不應該是這樣的！

對於那些只想做些傻兮兮東西的人來說，這種環境令人生畏。很多人不想在揮灑畫筆時被提醒“這必須是個好作品”，這是一個利用UI和設計決策進行創造的空間。

Electric Zine Maker是一個電子雜誌創作工具，目的是讓創作者在無壓力的環境下製作雜誌。你一看就知道這是個低標準環境。因為這介面太蠢萌了，就算你瞎塗鴉也不會跟其它部分形成鮮明對比，從而造成壓力。你不擅長畫畫沒關係，畫個火柴人也沒關係。

在設計工具時，我認為降低標準是一個非常關鍵的點。這樣就可以吸引那些就算是嘗試一下也會猶豫的使用者。你得再次跟他們確保就算你不是專業的也沒關係。有創造力並不意味著你必須是一個專業天才，畫不好並不是什麼應該遭受譴責的事。

我故意把Electric Zine Maker的UI設計得很誇張，讓所有東西看起來都很傻、佈局很好玩。介面角落還有一個大土豆，能給你帶來積極的幫助，它就像是微軟的那個大眼曲別針。背景會有一隻金魚悠閒地游來游去，你問為什麼？有寵物、動物或者其它類似的東西能給人們帶來舒適感，所以為什麼不加只金魚呢，多可愛啊。

創造這樣的環境，顏色是非常重要。顯然，我的用色比較誇張，在這種情況下，更多還是應該取決於個人決策，而不是刻意用這種色調。但在設計低標準的UI環境時，你應該仔細斟酌下某些顏色的使用。


Electric Zine Maker的設計靈感來自於卡通。正如你所見，這個工具所有的UI互動元素都是動畫。我沒有參考其它好玩的UI素材，我之前在迪斯尼工作過，所以我從那段經歷中汲取靈感。我做過很多類似的UI，卡通畫風通常包括許多傾斜的、不對稱的形狀。最重要的是有一套自己的風格設計規則，並堅持下去，這樣就不會讓人覺得過於隨性，而是一種獨特的趣味。


有很多人把Zine Maker跟早年的寓教於樂軟體作比較，我能理解。寓教於樂軟體可能是人們最敢拿UI冒險的地方，把蠢萌置於功能之前。孩子們對色彩很感興趣，你必須得把這個環境裝扮得非常幼稚、天馬行空，這樣才能持續吸引他們的注意力。

就比如The Incredible Toon Machine，我覺得一定得講講這個遊戲。

這個遊戲太厲害了，到今天我還能是被遊戲的複雜性所折服。作為一款遊戲，我認為它在顛覆設計方面處理得非常有趣。它有點像是那種自創規則的遊戲，你建造一個迷你世界，然後看事情會如何發展。這激發了很多有趣的創作。

UI方面，The Incredible Toon Machine的色彩很豐富。一樣也是很蠢萌、趣味十足。這是一個非常值得學習借鑑的遊戲。

另外一個遊戲是Mario Paint。我一般不會讚揚任天堂，因為我覺得他們的遊戲設計主導性太強。各種主機遊戲已經被剖析得很徹底了，但是Mario Paint是一個很奇怪的遊戲，我覺得值得分析分析。

這是一個繪畫軟體。你在畫畫時還會有蠢蠢的音樂、音效。大部分工具都是要花時間的，比如使用油漆桶時會出現動畫，等待顏色填充畫面時，它發出一種倒油漆的聲音。遊戲裡用來創作藝術的工具都相當奇怪。除此之外，Mario Paint還有一些很莫名其妙的小遊戲。比如有一個打蒼蠅的遊戲，你拿著拍子打蒼蠅。然後就會出現大蟲子，一直玩到到你打死了所有的大蟲子。

遊戲中的音樂創作工具也很傻。UI無疑是讓這種蠢萌感又上了一層樓。遊戲通過多彩的顏色體現出了趣味以及卡通感。你真的應該研究下這款遊戲！

說到工具，我認為早年的這些軟體開發者做了一些有趣的功能決策，這些在現代藝術工具中是看不到的。

Mario Paint有個印章工具，你可以自定義印章圖案。大部分藝術設計軟體都有這個功能，Dabbler 2（一款面向兒童的電腦繪畫軟體）也是。早年的藝術設計軟體有點像是讓人們“發明”工具，而不是試圖完全模仿現實，這很有意思。你可以完全不管那面讓你懵逼的工具牆，直到你真正開始用它們創作，這些功能才是有存在意義的。

在這些仿現實藝術工具（比如粉筆、鉛筆、水彩、紋理）出現之前，開發者設計了一些只能在數字環境中使用的工具。

Kai’s Power Goo就是一個極好的例子，它的介面設計非常棒。像這樣的設計如果不是在電腦環境中就完全沒有意義了。這些工具都很古怪，幾乎沒有任何實際用處，但開發者找到了一個可以大展拳腳的地方。那個Goo功能應該是大家最為熟知的了，簡而言之就是把圖片扭曲，跟現在Photoshop的液化效果有些相似。想象一下，把一張照片當作粘土來使用，扭曲拉扯，這種效果就是Goo。Kai’s Power Goo值得研究的地方不僅僅是UI，還有工具的設計。


Electric Zine Maker UI和工具設計是相輔相成。Zine Maker的某些工具非常魔幻，真實世界裡沒有這樣的東西，其它藝術設計軟體裡也沒有。你需要探索一番，發現它們的用途。

The Smoosh Zone是致敬Kai’s Power Goo的而設計的功能。


Color Factory裡有各種奇怪的顏色操作模式，如卷積或RGB轉換。你甚至可以將你的作品變成ASCII效果。Displacerizer可以將圖片疊加在你的作品上，比如你可以使用ASCII藝術置換貼圖。瞭解過後，你就可以想想如何利用這些奇怪的東西創造出特立獨行的藝術。

Glass Stamps能夠扭曲效果。你可以嘗試把大小值到500，選擇“draw”，把滑鼠移到作品上你就能看到扭曲的即時效果，得到滿意的效果時按下滑鼠就行了，非常有趣。

還有很多東西可以探索。

Electric Zine Maker中的許多工具都有自己的獨立介面，你可以在這調整數值和選項。每個介面都是單獨設計的，並非共用一個設計模板。這種介面與介面之間的不同，目的是讓使用者在使用不同工具時像進入了不同的空間，喚起一種探索的慾望。就跟鼓勵人們畫點什麼一樣，激發探索、發現的慾望也是很重要的。

我近期的大部分工作都是在避免稱之為“遊戲”的前提下進行的，但就Electric Zine Maker而言，我更傾向於將它視為一款遊戲，

它本該就是個遊戲。就像是你要在《我的世界》裡建造東西，你首先得弄清楚各種合成公式。而在Zine Maker裡，你探索各種工具的作用，以及怎麼組合利用它們來創造出你想要的效果。


當我在LA Zine Fest的Playdate活動上展示Electric Zine Maker時，我很驚訝它能獲得這麼熱烈的反響。路過的人們看到它總會說“我的天啊，這太可愛了吧……”豐富的色彩、可愛的動畫，所有這些都吸引著人們。它的介面充滿活力，而不是冷酷的科技感。

嘗試Electric Zine Maker的人最終都不可自拔地陷入了其中。有些人一玩就是20多分鐘。這也是我頭一次看到不同年齡段的人都喜歡我做的東西。但年齡對我來說並不重要。

有一位年齡比較大的女士，她坐下來玩時有點忐忑，因為她覺得自己肯定玩不好，最後她玩了很長一段時間，只用smugger完成了她的作品。她對這個遊戲的評價是“意外地很治癒”。所以我想我還是順利完成了我的任務：製作一個具有吸引力的工具，營造一個低標準的藝術創作環境。

遊戲中所有這些元素的組合產生了非常驚喜的效果。當你開始著手UI工作時，設定一個具體的目標是很重要的（我在本文所提到的專案都有）。問問你自己你希望UI傳達關於你的遊戲的什麼內容，並圍繞這一主題展開。不要讓UI脫離遊戲，要讓它真正成為遊戲的一部分，甚至讓人們摸不清到底哪裡才是UI。

我想通過這篇文章表達的觀點是不要再把UI視為一個無聊的東西，要認識到UI是一個可以發揮創意的地方，並且要不斷審視你自己的做法。把UI看作是你正在構建的一個有生氣的環境。

UI是虛擬世界創造中不可分割的一部分。

作者：Nathalie Lawhead
原譯文：https://www.gamasutra.com/view/news/349213/Using_UI_as_a_means_to_tell_a_story_convey_emotion_and_create_personality.php