介面設計需要做好“質量版控”

UI同學是否會有一個同樣的問題，“設計稿看起來很不錯，可一到版本驗收就慘不忍睹。”

除了介面拼接上的疏忽外，設計師在設計稿中經常忽略“動態資訊”也是罪魁禍首之一。

什麼是“動態資訊”

當我們面對設計稿時，它就像是一張海報，是靜態的圖，這是錯誤的意識。

UI設計與平面海報最大的區別是，我們需要將其中內容打散拼接到引擎中。

這時，一些固定的標題部分保持不變，但很多屬性數字、陣營、立繪等資訊在實際遊戲中是變化的。

這些資訊，我統稱為“動態資訊”。


上圖的紅框部分，就是最典型的“動態資訊”，設計師應當具備處理變數事件的敏感性。對此我總結了四條方法論，你可以應用於設計稿自檢或驗收中。

01、避免克隆

從策劃需求開始，並沒有人關注實際的資訊是怎麼樣，用最偷懶的方式應對設計。

設計稿中對於屬性條目的處理，克隆資訊最為常見。


標題三體字，數值四位數，條目佔六行。

想一下這些資訊在真正應用到遊戲中之後，是這個樣子嗎？

所以，避免克隆本質上要求大家注意資訊真實的情況，給予合理設計處理才能正確指導版本效果。



設計稿中填充真實資訊，考慮變數

02、秩序排列

策劃需求是可以商量的，當你在資訊順序的呈現上有設計見解時，要及時提出。

下圖的資訊實際上都是策劃動態配置的，落地在版本中後，對齊規則受到文字數量的干擾，會顯得版面混亂不堪。


對此，設計師就要多些思考：

文字統一可以嗎？

各條目的順序重新排列可以嗎？


03、變化空間

版本落地效果不佳，更多是因為對變數資訊的準備不足。

以下4個方向最容易被忽視：

資訊閾值

排版中預留出最大數值的空間。


以及對資訊條目的變化做出示意，例如效果圖中顯示三條資訊，如遊戲中只顯示一條的話，效果是怎麼樣。


彩色背景

關注遊戲中背景是否有可能更換，當背景更換後，上面的資訊可能會受到影響。


彩色文字

遊戲中經常用各種顏色代表物品的品級，如果效果圖中不注意這些顏色，很有可能在實際遊戲中發現資訊與背景混在一起。


中間過程

效果圖中要充分展示控制元件的各種狀態與中間過程，否則就無法預期資訊發生改變後造成的影響。


04、特殊標註

效果圖與實際版本效果千差萬別，實際上是因為特殊情況沒有特殊處理。

我們應與下游同學有更好的合作，當非常規的情況出現時，做好標註和步步緊盯，這才是質量版控的正確動作。


05、結語

千萬不要把遊戲UI設計當作平面設計看待。

請牢記這四條：

避免克隆 - 充分了解和填充動態文字內容

變化空間 - 對齊、閱讀順序、排序規則

秩序排列 - 對動態資訊變化後的容錯率

特殊標註 - 標準與跟進非常規的對齊方式

相信一定能在設計稿版本還原方面幫助到你，避免因最初的疏忽導致不必要的迭代與維護。

對自己要求高一些，你能做得更專業。

感謝閱讀。


來源：GameUE
原文：https://mp.weixin.qq.com/s/JGECdC-0UXtGeOWL2QB4EQ