拆解任天堂教科書般的介面動效設計

歐型兔發表於2021-09-09
本文作者歐型兔,站酷推薦設計師,著有《遊戲UI設計原則與例項指導手冊》一書。公眾號“COTA五號”作者。曾任職於遊戲蝸牛、CCP 和騰訊,現為心動資深遊戲介面動效設計師。遊戲行業10餘年從業經驗,在遊戲介面設計和遊戲動效設計方面都有豐富的專案經驗。

本文雖然由作者發表於2020年5月,但文章對於《動森》的動效拆解之細緻,在今天仍然十分值得學習和分享。


我們今天來說一說遊戲《集合啦!動物森友會》裡的動效。

一般來說,一款遊戲的介面動效的根本存在意義主要是這幾個方面:

第一,反饋。指的是玩家對介面進行操作之後,介面的反應。簡單到一個按鈕的點選反饋,複雜到頁面之間的轉接,都可以認為是反饋系統的一部分。

第二,連線。目前世代的遊戲的遊玩過程所需要的操作,都離不開介面的輔助。遊戲介面是遊戲中非常重要的一部分。介面是靠無數的“框體”互相之間有機的連線來發揮其作用的。哪怕一款遊戲的介面再簡單,也都是由一系列的介面進行連線,並以一定的邏輯聯絡在一起才會有意義。它們連線的方式和意義就主要依賴介面動效去表現。說白了就是介面之間的跳轉關係,也可以理解為轉場。

第三,表達。每個動效都會去用特定的動畫去表達出特有的資訊。或快或慢,或激動或優雅等,這種表達除了傳達某種重要資訊外,也是介面情緒化表達的一個途徑,目的是提示玩家重要資訊,或傳達給玩家一種延續自遊戲整體氛圍、世界觀的感官。

需要注意的是,這三點在實際運用時並非是完全孤立存在的。也就是說,一個動效中有可能蘊含有這三點中的某一個、某兩個或者全有。如果一個動效沒有起到這三點中的任意一點作用,就說明這個動效是沒有意義的,是可以被去掉了。

需要強調的一點是,因為平臺的關係,在這款遊戲的操作中,其介面反饋設計與其他平臺有所不同。比如在手機平臺上,我們做一個選中的反饋動效時,就只會考慮正常態和選中瞬間,以及選中後(如果有)的動態效果。在這款NS平臺遊戲裡,介面是通過機體上的按鈕來操作的。因此,介面中的反饋主要會有“選中”和“按下”兩種效果,其操作模式比較類似於PC平臺遊戲。在PC上,我們使用滑鼠進行點選、拖動等操作,相關的介面反饋就會有“滑鼠經過”和“滑鼠按下”這樣的情況。比較類似於該遊戲中“選中”和“按下”效果的。

那麼,我們結合上述三點,根據具體的示例,來看看《動森》是怎麼將介面動效有效的融入在遊戲中的。

01《動森》中的反饋動效

這款遊戲擁有可愛呆萌的畫風,因此很多動效都帶有Q彈的動畫風格,在反饋型別的動效裡,這一點表現的尤其明顯。比如在“手機”介面中的圖示反饋。每選中一個圖示,這個圖示就有一個上下浮動的動態效果。這種動畫不是圖示整體上下浮動,而是拆分了元素後,每個元素有不同的運動方式。它們的運動曲線也被設計得富有彈性,符合了遊戲整體Q彈的風格。如下圖所示。

拆解任天堂教科書般的介面動效設計

這種反饋比僵硬的把圖示放大一定比例,或者整體浮動迴圈都要靈動很多。應該注意到,在整個遊戲裡,每個被選中的控制元件右下角都有一個來回運動的小白手,這算是一種通用的“選中”提示動畫。但是同樣應該注意到的是,這款遊戲中的選中反饋並沒有滿足於這種通用的動畫,而是在每個選中的控制元件上都設計了特有的動效。手機介面上的圖示動畫算是其中一種。

除此以外,按鈕上的提示反饋也設計了特有的動效。如下圖所示。

拆解任天堂教科書般的介面動效設計

在領取裡數的介面裡,進入到某個“成就”,然後選中得到nook裡數下方的按鈕時,就可以看到這種按鈕上的選中提示。它是斜條紋的橫向移動動畫,能以比較明顯的方式告訴玩家,這個按鈕目前處於選中態。斜條紋本身作為一種常見的紋理,也有醒目和“特殊”的含義在裡邊。

類似的,在一些被選中的條目和大型按鈕上,結合了這兩種表現,既有擁有富有彈性的動畫圖示,也有斜條紋動畫的按鈕,如下圖所示。

拆解任天堂教科書般的介面動效設計

在ATM機的開啟介面中,選購物品之前,會先進入一個特別物品選購的介面,這個介面正中偏上有一個碩大無比的按鈕,當選中時(預設就是選中)這個按鈕會有非常明顯的反饋動效,這個動效就結合了動態的圖示以及運動的斜條紋動畫。點選它進入到商品選擇介面後,每個被選中的商品條欄,除了左側白色的小手,遊戲內通用的選中提示動畫,以外,每個條欄的背景都是運動的斜條紋動畫。由此可見,在這款遊戲的條目或者按鈕類中的選中態提示是被統一規劃為同一型別的,這種統一性的規劃也保持了玩家對同種型別提示的認知。

除了Q彈的提示型別外,這款遊戲還有一種結合了Q彈動畫的“噴濺”效果。這種效果在控制元件動畫中一閃而過,一般是由呈噴濺、輻射狀的圖形形成的動畫,所以這裡就叫它“噴濺”效果。比如在揹包介面裡,選中某個物件後彈出的選單選項中,在選項文字的後層,會出現一個黃色的條狀物。選中這一項並按下按鈕的話,這個條狀物兩側就會出現放射狀的圖形,同時有一個呈發散狀的反饋動畫。如下圖所示。

拆解任天堂教科書般的介面動效設計

這種噴濺效果並不是對液體的模仿,而是一種類似漫畫中的速度線一樣的表現,是為了體現這個選項被選中後的一種力量感。事實上,我們在進行這種操作時,看到這樣的反饋動效,的確會有一定的力量感。這種感覺並非硬核寫實的那種硬碰硬的力量,在這種畫風裡,我們感受到的依然是一種統一在Q彈風格中的感覺。產生這種感受的原因無非是兩個:一個是原本圖形元素的畫風,整個動畫過程中出現的圖形都比較圓潤,色彩也很溫和;另一個是,這種動畫的運動曲線本身也比較柔和,只是在恰當的時機互相進行了結合,組成了這種特殊的節奏感。

類似這樣的過場圖形元素還有很多,比如表情環的出現動效,以及表情被點選的反饋等,如下圖所示。

拆解任天堂教科書般的介面動效設計

純粹的反饋動效基本上是這幾種,其他的一些含有反饋功能的動效在很多情況下被融入到一些轉場和特定的細節裡,更多的是起到一些連線和表達的作用,我們會在下文提及。

02《動森》中的連線動效

這款遊戲中的連線動效分為幾種,一種是彈窗的出現;一種是全屏頁面的出現;還有就是各個操作之間的轉場。

①彈窗的出現。彈窗在這個遊戲裡主要表現成氣泡的樣式。可以說很多浮動型別的框體,在這個遊戲裡都以氣泡的樣式存在。

以揹包為例,玩家開啟揹包時,遊戲人物會原地站立,一隻胳膊抱起,另一隻胳膊支起下巴,然後頭稍微上揚,眼睛看著斜上方,整體做看著氣泡的思考狀。在人物轉變為這個姿勢的同時,揹包彈窗以一個從無到有冒出來的動態過程進行展現。從這個過程中可以很明顯的看出來,這個彈窗的開啟行為被遊戲設定為玩家的人物在進行思考,而揹包則是人物思考時的氣泡裡的內容。這同樣也是一種漫畫式的表現方法。巧妙得通過“思考”的形式展現了一個彈窗介面。我們要說的彈窗出現動效,就結合了這種設計。彈窗本體是一個大氣泡,那它的出現過程必然是一個氣泡冒出來的過程。在這個過程中氣泡會有彈動,也會伴隨有一閃而過的零碎圖形動畫。同樣的,在轉場完成後,彈窗關閉之前的這段“靜止”狀態中,氣泡也會模模擬的氣泡,有不停的變形迴圈動畫。整個的過程如下圖所示。

拆解任天堂教科書般的介面動效設計

下圖是以幀頻30擷取的序列幀,能夠很清晰的看到整個氣泡的展開過程。(以Z字型順序閱讀)

拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計

先是在人物的頭頂出現幾個零碎的很小的圓形氣泡,接著會有一個小氣泡逐漸放大,放大至最終彈窗底圖大小後,進行回彈動作,在最大尺寸的時間點附件,會“炸”出一些零碎的小氣泡,這些小氣泡很快就消失。等這一套動作完成之後,整個彈窗的入場動畫就完成了。這是一個很典型的模模擬實氣泡(也可以理解為雲團)膨大過程的動畫,而且根據美術風格融入了一些動畫片式的表現手法。如果仔細看得話,會發現這個介面相關的一些小控制元件,比如說氣泡左下角的“鈴幣”、“服裝”以及畫面右下角的“關閉”和“選擇”按鈕,都處於微弱的持續變形動畫狀態。這些都統一指向一個設計理念:這些東西都是柔軟的物體。這一理念和彈窗的入場,所有的那些點選反饋動效等,對這個遊戲的美術風格來講,都是一致的而且是有機的組成部分。

②全屏頁面出現。該遊戲的全屏頁面有三種出現方式,一種是擴大式,這種轉場通過一個主要圖形從畫面中央擴大,而後覆蓋滿全屏的方式重新整理頁面。比如在“手機”中開啟某個圖示,開啟“地圖”之後的轉場,如下圖所示。

拆解任天堂教科書般的介面動效設計

拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計

這個開啟“地圖”的轉場過程,由原“手機”皮膚填充為純色開始,該顏色也是“地圖”介面的底色,逐漸擴大膨脹為全屏。與此同時,原“手機”中的“地圖”圖示消失,重新從畫面中央漸入出現,伴隨一定角度的旋轉動畫。這個動畫中也出現了“噴濺”式的外圍圖形動畫。這個“噴濺”恰好配合了“地圖”圖示重新出現後的彈動動作。這一切動作完成後,“地圖”圖示漸出消失,伴隨放大動畫,“地圖”介面中的控制元件接著漸次出現。整體上構成了一個有始有終,漸次錯落的轉場動畫。同樣的動畫也可以在別的開啟後為全屏的“手機應用”中看到,比如“圖鑑”的開啟過程。如下圖所示。

拆解任天堂教科書般的介面動效設計

另一種是刷入式,這種可以認為是擴大式的一個變體,無非是新頁面重新整理進來時的圖形運動方向為從下到上。比如說“工作臺”介面的入場動畫,如下圖所示

拆解任天堂教科書般的介面動效設計

玩家在工具臺上製造物品之前,會先進入到“工具臺”介面去選擇自己要製作的物品。這時會開啟“工具臺”介面。與從“手機”裡開啟的全屏介面不同,這個全屏介面是由從下到上波浪形的遮罩重新整理進來的,序列幀如下所示。

拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計

通過所提取的序列幀,可以很明顯的看到這個動畫的結構是由波浪形的入場和介面內控制元件漸入兩個部分組成的。除了整個背景圖形的入場方向以及形態以外,和前面提到的擴大式介面並沒有很大的不同。這種波浪式的動畫不僅是在這種情況下應用,在該遊戲很多地方的動效裡都可以發現,如下圖所示“手機”新增“應用”時,“應用”圖示的出現動畫。

拆解任天堂教科書般的介面動效設計

這種波浪形態的遮罩,可能跟這款遊戲裡關於“海島”的設定相關,通過海浪的形態,結合了遊戲世界觀的相關元素。

還有一種是漸入式,這種的比較直接,可以理解為直接進行透明度變化,沒有圖形的某個方向的運動。比如玩家在自己家裡時,開啟“倉庫”介面時的轉場。如下圖所示。

拆解任天堂教科書般的介面動效設計

這些全屏頁面的轉場動效各自不同,是因為每種轉場都有其設計目的:

擴大式的轉場,出發點往往有圖形化的元素,這些元素更適合去做一些動態變化的表現,因此用這種出發點開始變化一直到變化結束落到最終的全屏頁面的方式,更能表達出有來有去的“銜接”。玩家點選介面某處,就從某處開始發生變化(第一段動畫),銜接著這個變化的是即將入場的介面擴大式入場動畫(第二段動畫),這個動畫結束時,介面的入場也結束。一以貫之的以時間為線索,將玩家的視線始終鎖定在操作流上;刷入式的轉場則是切割掉了“來處”的擴大式轉場。因為這種型別的轉場往往缺乏圖形化的出發點,在本文的示例中,出發點只是一個由文字和純色襯底構成的按鈕。這種按鈕比較難以作為擴大入式轉場那樣更生動和有機的連續變化動畫的起點,轉而使用銜接性沒那麼強的“半個”擴大式銜接動畫,即在玩家操作後,沒有觸發點的動畫,而是從即將入場的介面上直接開始後一段動畫;最後的漸入式轉場則更加缺乏“第一段”動畫所需的圖形素材,是直接進行硬體按鈕操作之後的切換,介面上只有一個輪廓圖示的指引式圖形。這種切換方式實際上銜接的是玩家在主機硬體按鈕的操作和遊戲畫面。在這種情況下,漸變式是最不會因為花哨的轉場而分散玩家注意力的介面銜接方式。

③各式轉場。

該遊戲中的場景和介面中都有轉場。

場景類的有類似介面上刷入式的轉場,如下圖所示。

拆解任天堂教科書般的介面動效設計

玩家在自己家裡時,可以通過按鍵進入到“擺設模式”,以便方便快捷的對家裡的傢俱和擺設進行移動和微調。在進入這種模式的前後,會有一個轉場,就像橫向的一列列牆紙被漸次揭開和貼上。這種圖形變化也貼合了“擺設模式”中類似於裝修的功能。

還有一種場景類的轉場,模仿了老式動畫結尾的黑場效果(如下圖1),即一個帶不斷縮小的圓形鏤空的黑色遮蓋層覆蓋住原先的場景,等鏤空完全縮小至消失後重新放大大畫外尺寸,露出新的場景。如下圖2所示。

拆解任天堂教科書般的介面動效設計

拆解任天堂教科書般的介面動效設計

這種轉場方式使遊戲帶有一定的老式動畫調性,也是這款IP延續至今的動態表現手法。在一些較為特別的場景下,這個轉場還會變成別的顏色,加入別的動態元素,如玩家坐飛機離開島嶼時的轉場,如下圖所示。

拆解任天堂教科書般的介面動效設計

場景中的機長和機場工作人員互致敬禮之後,就開啟這個轉場,然後會有一個“DAL”標識的航空公司圖示,接著就會進入到“小飛機”loading,等loading結束後,這個轉場就進入到新的場景去了。這個部分較為特殊,會放在“表達動效”裡詳細說明。

介面的轉場有很多,基本上都用到了動畫演繹的手法,如下圖的“領取裡數”介面中,領取里程碑獎勵的切換效果。

拆解任天堂教科書般的介面動效設計

在裡數介面中,頂部所示就是里程碑獎勵的狀態,當達成某一個里程碑時,相應的徽章會變換設計樣式,並會有一個晃動的迴圈動畫,按手柄上的“+”按鈕後,頂部包括了這些徽章圖示的條欄會下拉,同時“地面”從畫面下方上浮,與上方的圖形“相碰”後形成新介面的背景。在這個過程中,這些徽章也會在動畫過程中變大。這就是從裡數的主介面轉場到徽章領取的轉場。提取後的序列幀如下圖所示。

拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計

這顯然是一種“有始有終”的轉場動畫,它的主要作用就是使兩級介面無縫銜接。類似還有下圖所示的手機介面進入服裝設計介面的轉場,類似於擴大式的動畫,但沒有全屏。

拆解任天堂教科書般的介面動效設計

這三大種連線動效大部分都通過動畫演繹的方式,將前後兩個需要銜接的介面或者場景有機得銜接在了一起,不僅考慮了介面之間的銜接關係,也考慮到了相應的圖形元素中的動態合理性,結合整個遊戲通用的富有彈性的動作,使這些動效不僅起到了相應的功能性作用,還融入到了整個介面設計體系裡。雖然看起來簡單,但都有著細膩的思考,其設計思路非常值得學習和參考。

03《動森》中的表達動效

《動森》中用了很多動畫式的表現手法,遊戲本身也是卡通式的畫風。它的介面動效就建立在這兩者基礎上,很多功能性的表現並沒有落入窠臼,而是有效且生動得體現著它所要傳達給玩家的資訊,並深入結合了遊戲敘事。其中最有趣的地方莫過於對遊戲中發生的“故事”的體現。

比如,在玩家離開自己的島嶼,去到野生島或者朋友島嶼之前,會去機場搭飛機。當飛機即將出發時,機長會出現在機場的閘道口內,向櫃檯上的服務員互致敬禮。這是場景裡的細節,而且不管坐多少次飛機,這些動作都絕無遺漏,一遍一遍不厭其煩的演繹。在這些動作完成之後,一個我們在前文中提到過的特別轉場就會出現,一個帶不斷縮小的圓形鏤空的藍色遮蓋層覆蓋住原先的場景,等鏤空完全縮小至消失後出現了遊戲內航空公司的logo。有趣的地方在於,遊戲內雖然省去了飛機起飛的畫面,但留下了發動機發動的畫外音效。伴隨著發動機的發動和轟鳴,logo中的小鳥居然跟著揮動起翅膀。接著就是loading介面,此時的loading不同於普通版本,是一個小飛機穿梭於雲朵之中的迴圈動畫(如下圖1),而在普通版本中(如下圖2),畫面右下角是一個浮動的小島,島上有搖曳的椰子樹,島下水面還有波紋和浪花。

拆解任天堂教科書般的介面動效設計

拆解任天堂教科書般的介面動效設計

試想一下,這些動效都是必須要有的嗎?

如果我們有這樣一個介面,介面上寫著“乘坐飛機”,點選這行字後出現一個普通的loading,然後就到達了目的地。一樣可以完成整個操作,遊戲內的目標“乘坐交通工具去往某地”也依然可以完成。但是拿這種情況去對比一下《動森》裡乘飛機的過程,我們會發現,這種簡單的設計好像少了點什麼。

少的那部分就叫做“情感化”設計。

好的情感化設計就應該使自己融入到整個遊戲的“故事”當中,當作視覺化敘事的一部分,而不僅僅是幾個框體,幾個按鈕,讓玩家點來點去,完成一個抽象的任務,去獲取某個虛擬的物資。

在遊戲裡,所有的東西都是虛擬的,但人在使用遊戲的過程中所產生的感受卻是真實的,一個更好的感受其實才是更好的體驗。當你在遊戲裡感覺到一個被認真講述的故事,感覺到人性的存在,而不是機械的操作時,這種體驗就接近完全了。我想這也是這款遊戲能夠俘獲那麼多玩家的最重要一點原因。

該遊戲還通過哪些介面上的動效給我們講述小島上的故事?有很多細膩的地方值得注意。

如下圖所示的換裝介面裡,當玩家換裝完成,退出介面時,其所搭配的幾個服裝部件,會以圖示的形式排布在畫面中央的人物周圍,並且向周圍移動。它們的動畫被設計成“升格”的樣式,也即放慢速度播放而後加速離開並消失。

拆解任天堂教科書般的介面動效設計

事實上,這種形式在這個穿衣功能上不是必須的,無非是提示玩家這次換裝都穿上了哪些衣物,但這樣的動畫給了玩家一個電影化(或叫動畫式)的形式感,富有視覺衝擊力。可以被認為是用動畫講故事的“好姿勢”。

關於換裝,該遊戲還有一種快捷的方法,那就是使用“魔法棒”,像替換手持工具一樣,在人物周圍開啟一個環狀的選單,用搖桿就可以快速更換服裝,如下圖所示。

拆解任天堂教科書般的介面動效設計

拆解任天堂教科書般的介面動效設計

這個環形的選單介面佈局與工具環及表情環一樣,但是它的出場動畫跟後兩者並不相同,並沒有使用系統介面動畫中通用的帶“噴濺”樣式的彈動式入場動畫,而是伴隨人物揮舞魔法棒的動作,以順時針的方向逐個出現。每個選單項的圖示底板也設計了與工具環和表情環不同的樣式。多彩的配色加上旋轉的迴圈動畫,構成了這個介面整個的視覺語言,統一指向一個概念,那就是“魔法棒”。可見這個小控制元件的設計在視覺和動態上都被設計得很有目的性,以求去講述關於“魔法棒”的認知。

此外,遊戲裡也有不少對場景化的模擬,利用介面的視覺設計和動態設計去替代原本也可以用3D畫面表達的資訊。前邊我們講到,玩家去別家小島遊玩前乘坐飛機時,並不能看到直觀的飛機起飛等一系列3D畫面,而是用畫外音配合小鳥圖示的動畫來替代表現,不僅有趣,還節省了一定的3D成本。與此類似,在玩家等待其他玩家到達自己的小島遊玩的過程中,也有一系列的的儀式感表現。這其中,其他玩家乘坐飛機進入小島的“進度”則是利用介面模擬現實中機場資訊屏的樣式去表現的,如下圖所示。

拆解任天堂教科書般的介面動效設計

在這個介面裡,好友從自己小島的機場出發到達自己小島的過程,用了這樣的畫面:中部偏上是模擬機場的資訊屏,中部偏下是一系列有飛機圖示的圓形,底部則是由分佈在兩側的兩個島嶼輪廓圖形以及海面構成。當好友的飛機逐漸接近自己小島時,資訊屏上以資訊牌翻轉的形式展現“航空公司”、“乘客”以及“出發地”資訊,底部的圓形從右側的小島方向逐個亮起直到“即將到達”的綠色圓形亮起。整個變化過程雖然簡單,但足夠有趣和生動。

這是一個用形象化的方式展示一個進度的介面,裡邊的動態效果起到了至關重要的作用,同樣的,抽象的邏輯資訊也被用同樣的方式去做了表現。

比如在下圖的“裡數”介面裡可以看到,玩家所要達成的目標被清晰明確的表現出來,所用的動態表現方式不僅包括邏輯性的表達,也包括形象化的情感化表達。

拆解任天堂教科書般的介面動效設計

進入到這個介面時,會看到矩陣式排列的卡片。這些卡片是各式的任務目標。當玩家達成任務目標時,卡片上會出現“獲得裡數”字樣的紫色橫幅。這個橫幅上會有動態效果提示,提示玩家這是可領取獎勵的狀態:迴圈彈動動畫和閃爍小星星。按A鍵後,卡片就會有一個放大的轉場,進入到“詳情”介面。在“詳情”介面中依然會有上述紫色橫幅。不同於小卡片,這張大卡片上會有更加詳細的資訊,尤其是橫幅下方連起來的圓圈。這明確傳達給玩家一個資訊:這是一個連續的任務。當再次按下A鍵領取裡數後,會有一系列動效提示玩家更多資訊:橫幅消失,露出橫幅後層的一個綠色帶數字的小控制元件,出現一條虛線,這個小控制元件被用虛線連線著下方的某一個圓形(本例中為第一個)。被連線著的圓形上有個“目標感”很重的小旗子圖示。同時底部的圓圈們會放大。這時小旗子圖示會消失,出現蓋上特定的任務圖章的動畫。接著就會在下一個圓形(本例為第二個)上出現綠色的圓環,接著它和綠色小控制元件會被一條虛線連線起來。這一系列動畫完成後,就出現一個新的彈窗,彈窗上顯示獲得的頭銜和“領取裡數”的按鈕。彈窗底部有一個狸貓和畫著路線的地球的圖畫。點選按鈕後,會有一個狸貓在地球上沿著路線跑動,直達一個有小旗子圖示處停下的動畫。關鍵的序列幀如下圖所示。

拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計
拆解任天堂教科書般的介面動效設計

這個操作過程通過動態效果切換虛線的連線為玩家展示一個目標更新的資訊,通過狸貓跑動的動畫使獲得裡數的操作更加有儀式感和成就感。是邏輯性表達和情感化表達的結合。可以看作是動效在遊戲介面中表達作用的典型體現。

這些就是這款遊戲中表示式動效的部分,實際遊戲中還有更多,不再贅述。

最後,動效是介面的一部分,介面是遊戲的一部分。同樣的,組成完整體驗的,跟動效關聯度最強的,恐怕就是音樂和音效了。如果你注意的話,這款遊戲中每個不同的場景是有不同的白噪音的。人物踩在不同的地面上,也會有不同的腳步聲。每個介面操作,每個動效都對應著特有的音效。這提醒動效設計師,在對動效進行設計時,不光要顧及“視”,還要注意“聽”的元素,畢竟對我們人類來說,視聽一體時才會有更加真實的感受,遊戲產品的體驗才能更深入內心。

在整個分析過程中,或者對體驗過這款遊戲的玩家們來說,可以很明顯的覺察到一個特點,那就是該遊戲對細節的處理非常有特點。在可要可不要的地方總會有令人心動的處理。這些處理在技術上未必見得是複雜的或者想不到的,但總會有恰到好處的效果。試問,相比這款遊戲,市面上大有使用到更復雜技術的遊戲,也更有用了華麗的動態效果的遊戲,更有很多號稱次世代的,畫面無所不用其極的遊戲,等等。但為什麼在這些遊戲裡,玩家很少能有“體貼”、“細膩”的感受,乃至於感受到人性的部分?是因為技術的原因嗎,還是玩法缺乏創意?

我想都不是。

遊戲的這個部分,有太多需要融合介面設計,動態設計,讓遊戲的操作過程更加順滑和順應人性。靠堆疊光效,應用複雜技術,設計結構複雜的介面是達不到這種目的的。

還是上文提到的,每款遊戲總會對自己構建的世界有所交代,這種交代方式離不開我們人類所使用的“講故事”的方式。從遠古時期開始我們就是用圖形講故事的物種,我們現今已經離不開圖形化的敘事方式了。利用更加先進的技術,我們可以實現很多複雜的效果。但是講故事的方式卻沒有太多變化。現實告訴我們,即便用了複雜的技術,卻拋棄講故事本身,就會有失敗的體驗。

有太多的遊戲只是把遊戲操作,介面設計當作是模式化的操作的一部分,將所謂的“世界觀”僅僅作為遊戲的皮相去處理,沒有認真結合遊戲本身所需要交代的情節,不去用我們所知的方法用心引導玩家沉浸到故事中去。才會製作出千篇一律的,沒有感情的,批量生產的工業化產品出來。

是時候認真考慮這個問題了。


來源:遊戲葡萄
原文:https://mp.weixin.qq.com/s/thtl8hHnQNbYx1ZuUXkY9g


相關文章