您當前的位置:首頁 > 收藏

【半周談】033 動效如何構成連線 篇伍

作者:由 李世欽 發表于 收藏時間:2021-12-28

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

遊戲介面之所以在操作邏輯上可以執行,所依賴正是動效的連線能力。可以說動效的連線能力是遊戲介面的骨架。

不同的介面操作形式有不同的連線形式。本篇就來討論一下不同操作平臺上別具特色的連線設計。或許可以幫助你在跨平臺遊戲的設計上提供思路。

1.手機平臺

手機與其他平臺的最大差別就在於“

省略了外設

”。因為手指可以直接觸控螢幕的緣故,手機遊戲的大部分操控控制元件都被設計成有型的介面型體,以取代其他平臺中對應的硬體外設。

當然,有些主機平臺也支援觸控,如Switch,但這並不是它的主流操作方式。

手遊的這種特有的操控方式帶來兩個問題:

介面無法被儘量省略

手指遮擋畫面

這兩個問題都在實際上縮減了手機遊戲的實際有效畫面。你大可以嘗試將自己遊玩手遊的過程錄製下來,就可以明白那些搖桿和充斥在螢幕邊角的介面控制元件有多幹擾。只不過,這個感受在你遊玩時一般沒有明顯的感知。因為你的手擋住了這些控制元件。

【半周談】033 動效如何構成連線 篇伍

用手指直接控制螢幕中的虛擬物體,實際上非常受人歡迎。這也是智慧觸控手機風靡全球的最根本原因。某種程度上,人們終於與自己創造的虛擬世界有了有史以來最近距離的接觸:只隔了一層玻璃。

手指的主要操作方式是點選、滑動以及諸多複雜手勢。但主要的,我們透過

點選

滑動

來操作手機遊戲介面。

從手指點按這種操作手段上來說,手遊中最主流和便捷的連線方式,應該設計成拖動→變形→終態的形式。但實際上這種情況仍屬少見。

【半周談】033 動效如何構成連線 篇伍

除了實現成本比較高以外,還因為點選要比拖動更舒適。手指和滑鼠最大的不同在於,同樣的拖動操作,手指更“費勁”一些。

不過在很多應用中,透過左右滑動在不同層級間跳轉,屬於比較便捷的手勢操作。這種設計在遊戲介面中則非常少見。基本上只會出現在擬物化的特別介面中。

如下圖所示的youtube的iOS客戶端裡,可以透過滑動手勢退出影片詳情頁,將其縮成螢幕底部的寬橫條。影片播放的同時,還可預覽其他內容。也可進一步點選寬橫條右側按鈕將其徹底退出。這是一種非常典型的透過手指滑動來建立“直接聯絡”的動效和互動方案。

【半周談】033 動效如何構成連線 篇伍

在同樣的手勢操作下,twitch的iOS客戶端則更進一步與系統進行耦合。做同樣的向下滑動操作時,正在播放的影片並不會像youtube客戶端中那樣變小,而是直接獨立成影片視窗浮層。這一浮層甚至在twitch退出至桌面後依然存在並可支援拖動。

【半周談】033 動效如何構成連線 篇伍

通常情況下,我們在應用裡講過的最常見連線操作,就是像下圖網易雲音樂這樣的透過左右滑動來從各個層級之間進行跳轉了:

【半周談】033 動效如何構成連線 篇伍

滑動類的操作,在遊戲介面裡,則多用於像下圖《WarfareZ》裡這樣,在擬物化的物件上,如書本上來回翻頁:

【半周談】033 動效如何構成連線 篇伍

所以基本上我們討論一般的,常用的手機遊戲操作動作,絕大部分指代的就是手指點選,外加一點點滑動。

從這個角度上來說,手遊的操作實際上退回了桌面端的滑鼠點選操作。但粗鈍的手指卻又不如滑鼠靈活。於是手遊介面的很多關鍵操作點位都會被設計得碩大無比(相對桌面端軟體來說)。

這其中,《原神》將各個平臺的介面控制元件尺寸控制得相對比較統一。如下圖所示為iOS端《原神》,下下圖為PC端版本。兩者在操作控制元件上有所不同,其他控制元件在相對一致的屏寬下保持了高度一致。

但關鍵的操作點位上(大招、走、跑等基本操作按鈕),兩者還是有巨大的差異。手機端的按鈕明顯要比PC端大很多,甚至PC端介面並沒有直接的可操作控制元件。

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

雖然設計尺寸這種外在的表現不太相同,但都透過“點選”來進行介面互動的本質並沒有什麼不同。即都透過點選關鍵的跳轉點位來切換不同的框體,這些點位通常是按鈕。

但手指比滑鼠具備優勢的是,在手機有限的空間內極其靈敏,尤其在點選空白處時。滑鼠要做同樣的操作,需要先找到滑鼠所在,然後在眾多細密的介面控制元件裡找到空白處,才敢下定決心點選。

如下圖所示的《機動都市阿爾法》中,就可以透過手指隨意點選空白處來關閉任意橫屏彈窗,使一些高頻操作得以迅速無腦完成。

【半周談】033 動效如何構成連線 篇伍

可以說手遊端的“點選空白處關閉”是一個很偉大的交互發明。

總體上來說,手遊端的連線關係與桌面端並沒有本質的差別。它們都只是表象的差別:因為手指相對滑鼠的粗大,手遊介面尺寸會偏大;雙手持握時,主要的操作外設——拇指因為有操作侷限,主要的介面操作點位被設計在固定的區域內;手遊有一些震動反饋,這一點主機手柄也擁有。

除了這些表象之外,可以認為手遊介面中的連線關係與桌面端相同。

很多公司的多端釋出,其實就直接照搬了手游到桌面端。操作起來除了滑鼠移動距離過大之外,並沒有明顯的不適。根本原因也即在此。

在主機平臺與桌面端平臺,介面的連線關係也因特定的平臺操作特點,有自己的特點。我們將在本系列的下一篇文章中繼續討論,敬請期待。

以上。

【半周談】033 動效如何構成連線 篇伍

歡迎點選下方名片關注本號

往期推薦:

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

【半周談】033 動效如何構成連線 篇伍

標簽: 介面  操作  手遊  點選  控制元件