設(shè)計(jì)實(shí)戰(zhàn)！扁平風(fēng)的手機(jī)賽車(chē)游戲UI界面是這樣設(shè)計(jì)的

UI 和 UX 設(shè)計(jì)師的工作歸根到底還是滿足用戶的需求，解決問(wèn)題。天馬行空的腦洞最終還是要落實(shí)到實(shí)用的產(chǎn)品上的。即使在游戲當(dāng)中，UI 從來(lái)不是為了純娛樂(lè)而設(shè)計(jì)的。UI 和 UX 設(shè)計(jì)由 Tubik Studio 的設(shè)計(jì)師來(lái)完成，今天的文章將會(huì)呈現(xiàn)整個(gè)游戲的用戶界面的設(shè)計(jì)過(guò)程。

任務(wù)

為賽車(chē)游戲設(shè)計(jì) UI 界面 。

預(yù)處理流程

在通常意義上，游戲的 UI 界面中會(huì)包含下面的元素：

·玩家信息：個(gè)人信息，排行榜，教程，進(jìn)度數(shù)據(jù)，獎(jiǎng)金等。

·預(yù)設(shè)界面：選擇角色和設(shè)置，比如角色、游戲、武器、車(chē)輛、造型、路線等。

·游戲界面：實(shí)際游戲環(huán)節(jié)的界面。

·結(jié)束界面：游戲結(jié)束之后的得分和總結(jié)、成就等界面。

在設(shè)計(jì)游戲界面的時(shí)候，設(shè)計(jì)師需要找到讓玩家流暢且愉悅地游戲方法。玩家們并沒(méi)有準(zhǔn)備大把的時(shí)間來(lái)面對(duì)不清晰的導(dǎo)航，他們希望直觀的界面，希望能夠直接參與到游戲過(guò)程中去，這是游戲界面設(shè)計(jì)師所必須記住的。對(duì)于移動(dòng)端的游戲界面，還需要面對(duì)另一重挑戰(zhàn)——和桌面端的游戲相比，移動(dòng)端的界面更小，設(shè)計(jì)師需要更高效的利用屏幕，還要保持游戲性。

這次被分配來(lái)進(jìn)行 UI 和 UX 設(shè)計(jì)的設(shè)計(jì)師是 Ludmila Shevchenko，接下來(lái)我們來(lái)看看她的設(shè)計(jì)流程。

UX 設(shè)計(jì)

整個(gè)游戲的 UI 設(shè)計(jì)是從線框圖設(shè)計(jì)開(kāi)始的。設(shè)計(jì)師在這個(gè)階段會(huì)構(gòu)思好基本的交互和導(dǎo)航的設(shè)計(jì)。在打磨外觀視覺(jué)設(shè)計(jì)之前，單色的線框圖框架讓設(shè)計(jì)師更好地思考布局和界面之間的過(guò)渡。沒(méi)有圖片和動(dòng)效，只有基本的圖標(biāo)和排版布局，這樣的情況下，設(shè)計(jì)師能夠更加專(zhuān)注于交互流程。這里你可以看到 Real Reacing 的一些基本的界面布局：

第一屏是游戲的主界面，點(diǎn)擊 CTA 按鈕可以開(kāi)始游戲，在它的下面，可以看到邀請(qǐng)其他朋友一起游戲的按鈕。屏幕頂部顯示了基本的數(shù)據(jù)：汽油量、游戲幣的數(shù)量、車(chē)輛商店和通知，屏幕底部還提供了設(shè)置和排行榜的按鈕。

第二屏顯示了車(chē)輛選擇的過(guò)程，左右滑動(dòng)快速選取即可，而底部則是每輛車(chē)相應(yīng)的數(shù)據(jù)。此外，用戶可以定制車(chē)輛的色彩。

第三屏則顯示了挑戰(zhàn)朋友的功能，游戲的全名是 Real Multiplayer Racing 自然是可以聯(lián)機(jī)一起游戲的。界面中還包含了通知各個(gè)玩家是否都準(zhǔn)備好了的功能。

這些所有的交互都經(jīng)過(guò)仔細(xì)的推敲和測(cè)試，設(shè)計(jì)師就開(kāi)始繼續(xù)后面的 UI 設(shè)計(jì)工作。接下來(lái)，她需要讓精心設(shè)計(jì)的互動(dòng)流程擁有漂亮而吸引人的視覺(jué)，具備足夠強(qiáng)烈的情感吸引力。

UI 設(shè)計(jì)

在開(kāi)始探求 UI 解決方案的過(guò)程中，設(shè)計(jì)師首先是從配色著手。為了更好地匹配客戶和用戶的愿景，設(shè)計(jì)師提供了兩個(gè)不同的配色方案：一個(gè)是暖色調(diào)的配色方案，包括和速度感息息相關(guān)的橙色與紅色這兩種暖色調(diào)；另一個(gè)配色方案是冷色調(diào)的，配色是以藍(lán)色為主，這種配色在用戶中頗為受歡迎。而諸如車(chē)輛、標(biāo)識(shí)、武器、障礙物等元素也在之前的基礎(chǔ)上，為游戲進(jìn)行了重設(shè)計(jì)，賦予他們更為新鮮原創(chuàng)的視覺(jué)。

 基于暖色調(diào)配色的概念設(shè)計(jì)

基于冷色調(diào)配色的概念設(shè)計(jì)

客戶更加傾向于冷色調(diào)的設(shè)計(jì)，不過(guò)希望在視覺(jué)中呈現(xiàn)出夜間比賽的感覺(jué)，因此在下一次迭代當(dāng)中，基于這個(gè)方案進(jìn)行了調(diào)整，適當(dāng)?shù)卦鰪?qiáng)了情感吸引力，營(yíng)造出夜間流光溢彩的感覺(jué)并且賦予更加時(shí)尚的視覺(jué)感受。下面是迭代修改之后的樣子：

UI 界面中，每屏都有許多不同的按鈕，設(shè)計(jì)師使用不同的色彩來(lái)進(jìn)行著色，便于用戶對(duì)它們進(jìn)行區(qū)分。游戲開(kāi)始的按鈕是最為關(guān)鍵的按鈕，它最為顯著，優(yōu)先級(jí)比其他次要按鈕更高，相應(yīng)的圖標(biāo)也被設(shè)計(jì)成和主視覺(jué)更為匹配的風(fēng)格。

各種界面的背景也使用傾斜的賽道來(lái)進(jìn)行裝飾，不僅賦予界面以動(dòng)感，而且營(yíng)造出強(qiáng)烈的速度感和競(jìng)爭(zhēng)的氛圍。

這組界面是用戶選擇賽車(chē)的界面，通過(guò)左右滑動(dòng)選擇賽車(chē)，并且可以查看相應(yīng)車(chē)型的參數(shù)和性能，選擇好了車(chē)輛以后，用戶也可以挑選出所需的顏色。正如你所看到的，設(shè)計(jì)師采用了色彩混搭式的背景，色彩鮮艷的車(chē)輛是白色的背景，而其余的信息則呈現(xiàn)在深色的背景上，這組對(duì)比是有趣的，并且讓整個(gè)界面顯得協(xié)調(diào)而自然。

此外，汽車(chē)的選取的過(guò)程中，設(shè)計(jì)師還加入了有趣的動(dòng)效，讓用戶在使用的過(guò)程中還感受到足夠的樂(lè)趣。

上方的三個(gè)界面，分別是多人游戲時(shí)玩家準(zhǔn)備界面，帶有賽程進(jìn)度條的游戲過(guò)程界面，以及完成比賽之后的結(jié)果界面。用戶在完成比賽之后可以從比賽結(jié)果界面，直接將結(jié)果分享到社交網(wǎng)絡(luò)上，這對(duì)于游戲的傳播有很好的效果。「You Win」的字體可能看起來(lái)不夠有張力，這個(gè)可以在測(cè)試之后再進(jìn)行調(diào)整和迭代。

排行榜的存在，讓用戶的比分清晰且直觀地呈現(xiàn)出來(lái)，提高他們?cè)谕嬗螒驎r(shí)候的動(dòng)力。也促使更多玩家參與進(jìn)來(lái)，挑戰(zhàn)更高的分?jǐn)?shù)。

對(duì)于 Tubik 而言，手機(jī)游戲界面是一個(gè)非常有趣的挑戰(zhàn)，Real Multiplayer Racing 項(xiàng)目是 Tubik 團(tuán)隊(duì)歷史上第一次參與游戲界面的設(shè)計(jì)，既需要考慮到娛樂(lè)性，也需要照顧到功能性，需要在風(fēng)格、導(dǎo)航、過(guò)渡上仔細(xì)推敲，在深入的分析和測(cè)試中獲得反饋，在細(xì)節(jié)和原創(chuàng)上盡可能做好。