遊戲UI設計的3條重要原則

在日常的稽核工作中發現，有時候雖然設計稿精緻漂亮，但實際落地到產品的效果並不好。

UI本質是為“資訊”設計載體，其中呈現的“文字”與“數值”是資訊，“角色立繪”與“ICON”也是資訊。

有時候設計師過分依賴策劃提供的線框圖，缺少對實際資訊的思考：如果介面載體不能匹配資訊的變數，設計就會出錯。

對此，我總結了3個需要注意的設計原則，大家可以通過其中案例觸類旁通，相信一定能減少後期迭代，提升設計品質。

第一條設計原則：設計稿中要用正確的資訊佔位，充分考慮變數情況。

在面對大量屬性資訊時，設計師習慣“複製、貼上”，這很難體現資訊究竟是怎樣在排版中進行對齊的。



“整齊劃一”的資訊排列會將問題隱藏，最終體現在版本中的效果大打折扣。



策劃需求中也會使用大量克隆資訊去佔位示意，所以設計師需要去找策劃確定有哪些正式內容，在設計稿中儘可能把排版與對齊方式傳達清楚。



數值也是變數的，為極限情況留出合理的間隔空間：



文字資訊也是變數的，特殊的對齊方式不要遺漏標註：



第二條原則：優化複雜資訊，強化可讀性。

可以先簡單的將複雜資訊定義為“重複的”、“無用的”、“無序的”三種情況。

重複的：

下圖案例，設計稿中“提升”和“降低”明顯是重複資訊，整體可讀性不高。



多站在使用者角度，反覆審視自己的介面設計稿，將令人頭暈目眩的重複資訊進行提煉、整合。

這時你會發現，無需華麗的技巧也可以提升設計效果：



無用的：

我們可以把複雜資訊比作“噪音”，去噪也是強化可讀性的好辦法。

例如，開啟一個附屬彈窗後，玩家更關注當前介面中的內容，其他資訊此時都是無用的。



不如將這個框體放大，提高載體容量的同時，也故意遮擋住“無用資訊”，減少視覺噪音。



無序的：

我們擅長將介面中的資訊進行有秩序排列，但可能會忽略視覺的閱讀順序。

下圖案例有兩個問題：

引導了錯誤的縱向閱讀順序；

無法通過佔位字制定對齊規則。



有序 = 排列秩序 + 閱讀順序，優化後視覺體驗得以提升：



第三條原則：充分考慮應用情景的變數，設計需要適配所有情景。

情景適配問題常發生在UI底板設計中。

例如，道具有六種品階，顏色各不相同。在設計道具名稱的底板時，就需要充分考慮到這些顏色變數，在設計稿中為每一個品階色做適配預演，避免出現識別困難的問題。




以立繪為背景的樣式中，如果在設計階段使用的佔點陣圖是深色立繪，那麼設計稿不會存在識別度問題。一旦應用在遊戲裡，立繪資訊出現變數，視覺情況則不再可控。




活動介面也是此類問題的重災區。

例如七日簽到，策劃案剛開始的規劃是最後一天送架飛機，設計師按照需求放入了飛機立繪，並通過各種對應設計元素來渲染這件物品的價值感，設計稿看起來是沒問題的。

但遊戲實際執行過程中，產品調整了投放策略改送坦克，這種變數就意味著活動介面需要重做了。

面對應用情景的各種變數，在設計之初要做足準備。如果只考慮怎麼把UI設計稿做漂亮，那最終換來的可能是加班去修正錯誤……

總結

基於這3個設計原則，我會要求團隊中的設計師充分自查，以避免專案在執行落地時出現相關問題。

介面中考慮到文字和數值內容的變數了嗎？

資訊可讀性還能加強嗎？

這個設計能匹配到所有應用情境中嗎？

設計師自查

最後：UI設計為資訊服務，畫面漂亮不是唯一標準。


來源：GameUE
原文：https://mp.weixin.qq.com/s/2E8NoOHTF6OtZvQI6N_hFA