《妖精的尾巴：魔導少年》UI優化推導全過程

關於作者：張賽，騰訊互動娛樂魔方工作室群高階設計師。

導語

妖尾UI在設計初期階段，介面效果不盡人意。通過對方法論的不斷推導與完善，優化後的介面效果得到了很大的提升。以下著重講解妖尾UI的優化推導過程。

一.遊戲定位

遊戲品類

《妖精的尾巴：魔導少年》是以日本動漫《妖精的尾巴》為IP的回合制MMORPG手遊。

遊戲定位

重社交，強調溫馨、輕鬆的氛圍。

回合制MMORPG遊戲的特點

1.回合制戰鬥是此類遊戲的核心體驗之一，玩家在戰鬥的同時還可以有其他操作，比如玩家可以一邊戰鬥一邊開啟揹包或者商城介面等等。所以UI決定用彈窗的形式，這樣能夠確保玩家在戰鬥過程中，點開其他介面的同時也能夠看到戰鬥進行的程式，保證“透氣感”。

2.資訊量大，文字較多。這類遊戲文字資訊量大，皮膚區塊劃分多，所以要以功能為主，合理規劃介面中的資訊主次。

二.世界觀

妖尾的故事發生在歐洲中世紀的各大公會，魔導士們在這個魔法世界中展開的一系列冒險故事。遊戲角色十分看重人與人之間的“友情”，只要夥伴同心協力，就沒有無法戰勝的困難。


三.MMORPG遊戲的介面特點

1.皮膚顏色飽和度低，色彩相對單一不會過多（因為MMORPG的內容繁多，介面清爽有利於資訊更好呈現）


2.擅長運用各種裝飾物來增加UI的細節和精緻度（可以利用這點做到市場差異化）


3.有一些擬物化的介面很出彩（可以用來包裝一些特殊玩法介面，增強劇情帶入感，加深玩家記憶點）


四.確認載體和色調

1.主要視覺元素提取：


2.主要色彩提取：大色調以米白色（紙張）、棕黃色（木板）為主，作為UI皮膚的顏色。以藍色、紅色作為點綴色，用於按鈕、裝飾等物品。


五.設計初稿

初期介面展示：


從以上幾張介面來看，初期介面的問題主要有以下幾點：


六.介面優化

1.解決顏色沉悶的問題


2.解決裝飾細節過多的問題



3.解決介面平庸缺少包裝的問題（高階藏寶圖介面為例）


“高階藏寶圖”互動案分析：策劃最初給到的互動案中規中矩，類似於幸運大轉盤的玩法，會有選中框在獎品道具上不停挪動，最終停在選中的獎品上。


初版完成稿分析：

完全照搬了互動案的形式，非常無趣


缺少裝飾，體現不出“高階感”

總結

1.做設計要圍繞遊戲的核心玩法/使用者需求。這兩點明確了，才能制定正確的目標；目標明確後，才能制定更好的解決方案。

2.隨著經驗的豐富，“反推法”讓方法論越來越完善。妖尾的介面還有很多可以優化的地方，不斷吸取之前的經驗教訓，舉一反三，我們就能做得更好。


作者：張賽
來源：騰訊遊戲學院
原地址：https://mp.weixin.qq.com/s/1PBhAsr2Zy2D_oKiuL_KIg