任務
為賽車遊戲設計 UI 界面 。
預處理流程
在通常意義上，遊戲的 UI 界面中會包含下面的元素：
玩家信息：個人信息，排行榜，教程，進度數據，獎金等。
預設界面：選擇角色和設置，比如角色、遊戲、武器、車輛、造型、路線等。
遊戲界面：實際遊戲環節的界面。
結束界面：遊戲結束之後的得分和總結、成就等界面。
在設計遊戲界面的時候，設計師需要找到讓玩家流暢且愉悅地遊戲方法。玩家們並沒有準備大把的時間來面對不清晰的導航，他們希望直觀的界面，希望能夠直接參與到遊戲過程中去，這是遊戲界面設計師所必須記住的。對於移動端的遊戲界面，還需要面對另一重挑戰——和桌面端的遊戲相比，移動端的界面更小，設計師需要更高效的利用屏幕，還要保持遊戲性。
這次被分配來進行 UI 和 UX 設計的設計師是 Ludmila Shevchenko，接下來我們來看看她的設計流程。
UX 設計
整個遊戲的 UI 設計是從線框圖設計開始的。設計師在這個階段會構思好基本的交互和導航的設計。在打磨外觀視覺設計之前，單色的線框圖框架讓設計師更好地思考佈局和界面之間的過渡。沒有圖片和動效，只有基本的圖標和排版佈局，這樣的情況下，設計師能夠更加專注於交互流程。這裡你可以看到 Real Reacing 的一些基本的界面佈局：
第二屏顯示了車輛選擇的過程，左右滑動快速選取即可，而底部則是每輛車相應的數據。此外，用戶可以定製車輛的色彩。
第三屏則顯示了挑戰朋友的功能，遊戲的全名是 Real Multiplayer Racing 自然是可以聯機一起遊戲的。界面中還包含了通知各個玩家是否都準備好了的功能。
這些所有的交互都經過仔細的推敲和測試，設計師就開始繼續後面的 UI 設計工作。接下來，她需要讓精心設計的互動流程擁有漂亮而吸引人的視覺，具備足夠強烈的情感吸引力。
UI 設計
△ 基於暖色調配色的概念設計
△ 基於冷色調配色的概念設計
客戶更加傾向於冷色調的設計，不過希望在視覺中呈現出夜間比賽的感覺，因此在下一次迭代當中，基於這個方案進行了調整，適當地增強了情感吸引力，營造出夜間流光溢彩的感覺並且賦予更加時尚的視覺感受。下面是迭代修改之後的樣子：
UI 界面中，每屏都有許多不同的按鈕，設計師使用不同的色彩來進行著色，便於用戶對它們進行區分。遊戲開始的按鈕是最為關鍵的按鈕，它最為顯著，優先級比其他次要按鈕更高，相應的圖標也被設計成和主視覺更為匹配的風格。
各種界面的背景也使用傾斜的賽道來進行裝飾，不僅賦予界面以動感，而且營造出強烈的速度感和競爭的氛圍。
這組界面是用戶選擇賽車的界面，通過左右滑動選擇賽車，並且可以查看相應車型的參數和性能，選擇好了車輛以後，用戶也可以挑選出所需的顏色。正如你所看到的，設計師採用了色彩混搭式的背景，色彩鮮豔的車輛是白色的背景，而其餘的信息則呈現在深色的背景上，這組對比是有趣的，並且讓整個界面顯得協調而自然。
此外，汽車的選取的過程中，設計師還加入了有趣的動效，讓用戶在使用的過程中還感受到足夠的樂趣。
上方的三個界面，分別是多人遊戲時玩家準備界面，帶有賽程進度條的遊戲過程界面，以及完成比賽之後的結果界面。用戶在完成比賽之後可以從比賽結果界面，直接將結果分享到社交網絡上，這對於遊戲的傳播有很好的效果。「You Win」的字體可能看起來不夠有張力，這個可以在測試之後再進行調整和迭代。
排行榜的存在，讓用戶的比分清晰且直觀地呈現出來，提高他們在玩遊戲時候的動力。也促使更多玩家參與進來，挑戰更高的分數。
閱讀更多 河北華信智原 的文章
