扁平風的手機賽車游戲UI界面是這樣設計的

1 評論 5932 瀏覽 21 收藏 9 分鐘

UI 和 UX 設計師的工作歸根到底還是滿足用戶的需求,解決問題。天馬行空的腦洞最終還是要落實到實用的產品上的。即使在游戲當中,UI 從來不是為了純娛樂而設計的。之前,Tubik 的設計師為游戲 Real Multiplayer Racing 設計了其中的插畫元素《設計實戰!為扁平風的移動端賽車游戲定制插畫》,接下來的 UI 和 UX 設計同樣是由 Tubik Studio 的設計師來完成。今天的文章將會呈現整個游戲的用戶界面的設計過程。

任務

為賽車游戲設計 UI 界面 。

預處理流程

在通常意義上,游戲的 UI 界面中會包含下面的元素:

  • 玩家信息:個人信息,排行榜,教程,進度數據,獎金等。
  • 預設界面:選擇角色和設置,比如角色、游戲、武器、車輛、造型、路線等。
  • 游戲界面:實際游戲環節的界面。
  • 結束界面:游戲結束之后的得分和總結、成就等界面。

在設計游戲界面的時候,設計師需要找到讓玩家流暢且愉悅地游戲方法。玩家們并沒有準備大把的時間來面對不清晰的導航,他們希望直觀的界面,希望能夠直接參與到游戲過程中去,這是游戲界面設計師所必須記住的。對于移動端的游戲界面,還需要面對另一重挑戰——和桌面端的游戲相比,移動端的界面更小,設計師需要更高效的利用屏幕,還要保持游戲性。

這次被分配來進行 UI 和 UX 設計的設計師是?Ludmila Shevchenko,接下來我們來看看她的設計流程。

UX 設計

整個游戲的 UI 設計是從線框圖設計開始的。設計師在這個階段會構思好基本的交互和導航的設計。在打磨外觀視覺設計之前,單色的線框圖框架讓設計師更好地思考布局和界面之間的過渡。沒有圖片和動效,只有基本的圖標和排版布局,這樣的情況下,設計師能夠更加專注于交互流程。這里你可以看到 Real Reacing 的一些基本的界面布局:

第一屏是游戲的主界面,點擊 CTA 按鈕可以開始游戲,在它的下面,可以看到邀請其他朋友一起游戲的按鈕。屏幕頂部顯示了基本的數據:汽油量、游戲幣的數量、車輛商店和通知,屏幕底部還提供了設置和排行榜的按鈕。

第二屏顯示了車輛選擇的過程,左右滑動快速選取即可,而底部則是每輛車相應的數據。此外,用戶可以定制車輛的色彩。

第三屏則顯示了挑戰朋友的功能,游戲的全名是 Real Multiplayer Racing 自然是可以聯機一起游戲的。界面中還包含了通知各個玩家是否都準備好了的功能。

這些所有的交互都經過仔細的推敲和測試,設計師就開始繼續后面的 UI 設計工作。接下來,她需要讓精心設計的互動流程擁有漂亮而吸引人的視覺,具備足夠強烈的情感吸引力。

UI 設計

在開始探求 UI 解決方案的過程中,設計師首先是從配色著手。為了更好地匹配客戶和用戶的愿景,設計師提供了兩個不同的配色方案:一個是暖色調的配色方案,包括和速度感息息相關的橙色與紅色這兩種暖色調;另一個配色方案是冷色調的,配色是以藍色為主,這種配色在用戶中頗為受歡迎。而諸如車輛、標識、武器、障礙物等元素也在之前的基礎上,為游戲進行了重設計,賦予他們更為新鮮原創的視覺。

△ 基于暖色調配色的概念設計

△ 基于冷色調配色的概念設計

客戶更加傾向于冷色調的設計,不過希望在視覺中呈現出夜間比賽的感覺,因此在下一次迭代當中,基于這個方案進行了調整,適當地增強了情感吸引力,營造出夜間流光溢彩的感覺并且賦予更加時尚的視覺感受。下面是迭代修改之后的樣子:

UI 界面中,每屏都有許多不同的按鈕,設計師使用不同的色彩來進行著色,便于用戶對它們進行區分。游戲開始的按鈕是最為關鍵的按鈕,它最為顯著,優先級比其他次要按鈕更高,相應的圖標也被設計成和主視覺更為匹配的風格。

各種界面的背景也使用傾斜的賽道來進行裝飾,不僅賦予界面以動感,而且營造出強烈的速度感和競爭的氛圍。

這組界面是用戶選擇賽車的界面,通過左右滑動選擇賽車,并且可以查看相應車型的參數和性能,選擇好了車輛以后,用戶也可以挑選出所需的顏色。正如你所看到的,設計師采用了色彩混搭式的背景,色彩鮮艷的車輛是白色的背景,而其余的信息則呈現在深色的背景上,這組對比是有趣的,并且讓整個界面顯得協調而自然。

此外,汽車的選取的過程中,設計師還加入了有趣的動效,讓用戶在使用的過程中還感受到足夠的樂趣。

上方的三個界面,分別是多人游戲時玩家準備界面,帶有賽程進度條的游戲過程界面,以及完成比賽之后的結果界面。用戶在完成比賽之后可以從比賽結果界面,直接將結果分享到社交網絡上,這對于游戲的傳播有很好的效果?!竃ou Win」的字體可能看起來不夠有張力,這個可以在測試之后再進行調整和迭代。

排行榜的存在,讓用戶的比分清晰且直觀地呈現出來,提高他們在玩游戲時候的動力。也促使更多玩家參與進來,挑戰更高的分數。

對于 Tubik 而言,手機游戲界面是一個非常有趣的挑戰,Real Multiplayer Racing 項目是 Tubik 團隊歷史上第一次參與游戲界面的設計,既需要考慮到娛樂性,也需要照顧到功能性,需要在風格、導航、過渡上仔細推敲,在深入的分析和測試中獲得反饋,在細節和原創上盡可能做好。

 

原文作者 :?Tubik Studio?

譯者/編輯 :?陳子木

譯文地址:https://www.uisdc.com/case-study-real-racing-ui

本文由 @陳子木 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來源于作者

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!