以下文章來源于七點GAME ，作者Cora
憑借都市神話題材、潮酷的3D美術風格，莉莉絲的《Dislyte》不僅獲得了大量海外玩家認可，還被評為了GooglePlay 2022年度最佳多人對戰遊戲。
莉莉絲遊戲Dislyte
那麼，這款遊戲是如何做出深受全球玩家喜愛的UI視覺風格設計？莉莉絲Dislyte項目用戶體驗設計負責人Kian最近接受了采訪。
受訪者介紹
Kian，于2010年大學畢業，先後就職于Triniti lnteractive、網易、遊族等公司，參與過《Dino Cap》《鎮魔曲》《三國如龍傳》《權力的遊戲·凜冬将至》等多款各平台遊戲項目制作。2020年加入莉莉絲，現為Dislyte項目用戶體驗設計負責人。
Kian深耕用戶體驗設計和開發十餘年，擅長視覺風格設計，規範标準的制定和落地品控，以及團隊的搭建和管理，為項目提供專業向與組織向的用戶體驗解決方案。
本文将從多個設計維度出發，以Dislyte項目為例為大家分享設計思路。以下是經過整理的采訪實錄：
01
Dislyte國際化UI風格設計思路
01 美術風格
Q：最開始了解到Dislyte的時候，您覺得這個項目哪裡吸引您？為什麼看好它呢?
Kian：我最開始對于Dislyte的了解是通過和制作人以及主美溝通，初步判斷這個項目具備了一個成功項目該有的一些特質，其次Dislyte的美術以及合作方式也非常吸引我。
首先Dislyte的美術風格非常搶眼、具有辨識度，在市面上也沒有同類型的風格。另外在主打歐美市場的産品中，更多是偏向寫實，或者扁平、嚴謹的風格。像Dislyte這樣同時兼具全球市場品味和卡通風格，且潮流感十足的，非常打動人。
莉莉絲遊戲Dislyte
其次Dislyte項目組展現出來的團隊協作性以及合作的密切程度，都讓我印象深刻。當然，這不僅僅是在Dislyte，也和莉莉絲本身的價值觀和文化有關——簡單真誠。這樣大家做事和溝通都會比較敏捷和高效，我認為這也是項目成功離不開的因素之一。
Dislyte英雄覺醒動效案例
Dislyte英雄共鳴動效案例
Q：請Kian和我們簡單介紹下Dislyte這個遊戲的世界觀，在UI設計上又是如何體現的？
Kian：Dislyte的世界觀講的是神迹降臨近未來的世界，一部分人類通過接觸神性聲波覺醒神力，他們組成的"聯盟"擊退怪物，開始奪回原本生活的世界。是一款近未來都市奇幻題材IP，人物造型偏寫實比例，稍微誇張風格的回合制卡牌遊戲。
和傳統卡牌遊戲相比，Dislyte在UI設計上需要符合國際審美的同時做出IP品牌感。達成潮流現代的設計感受，同時體現遊戲世界觀特有元素與特征的目标。
Dislyte主要流程演示
Q：Dislyte的UI設計是否有一套自己的流程，是怎樣的？
Kian：我們在設計時的創意思路是多變的，通過不同渠道的溝通，比如設計師與設計師之間，設計師與策劃，設計師與用戶，類似的想法碰撞往往能産生意想不到的創意。但我們也有一套設計思考的指引流程：例如做設計前需要對需求進行分析，确認項目真正的需求、明确設計與體驗目标等等。
DislyteUI實機錄屏
02 設計關鍵詞＆情緒版
Q：Dislyte的設計是如何找到創新突破點的？
Kian：雖然我們團隊有一套标準的設計規範，但要設計出亮點和創新，隻有規範是遠遠不夠的。單純依靠規範做出的設計，很有可能會趨于同質化。結合世界觀和遊戲目标得出以下設計關鍵詞，關鍵詞避免過多，盡量聚焦到少于3個，且至少有1個是具體的概念。
Dislyte美術設計關鍵詞
我們還建立了一個"情緒版"，供團隊内部尋找設計方向和靈感使用，在"情緒版"上有各種各樣的設計和各種各樣的配色方案(這些圖片都是經過挑選，且符合整體風格基調的)。在特别需要去做一些亮點和差異化的時候，我們需要跳出框框，就需要更多的範例，"情緒版"就是個很有用的方式。
通過情緒版把"極簡輕量"、"潮流運動"、"神性聲波"關鍵詞的抽象化概念傳達轉換成具象的圖形傳達，避免因文字傳達的理解偏差導緻設計方向偏差。
情緒版示例（圖片來源網絡）
03 配色技巧
Q：為了符合國際審美和做出差異化，Dislyte的界面設計在配色上有什麼講究嗎？
Kian：由于Dislyte整體風格是"都市、潮流"，在界面設計中會更加強調整體的運動感以及配色的前衛。Dislyte的品牌色确定為紫色+彩虹漸變色，作為整體視覺最重要的顔色會應用到各個場景和界面設計中。
Dislyte的紫色品牌色因為明度的原因并不适合作為引導色使用，所以我們将品牌色與引導色區分開，這也符合美術調性新潮和個性活潑的特點。
《Dislyte》品牌色
我們制定色闆的邏輯：品牌色、引導色、字色是固定的，在其他顔色特别是輔助色中顔色比較多。實際是随着遊戲系統開發的深入，需要設計師主觀處理配色以适應不同的氛圍與情緒需要，而非直接吸色。同時我們也會把常用色整合起來方便複用，降低配色變化過大帶來的風格偏差風險。配色規範不能是死的，需要有一定的靈活度，但也不是放開的需要有搭配邏輯。
Dislyte色闆
Q：Dislyte的整體美術調性是潮流現代的都市感（非賽博朋克)，需要比較明亮的同時保持高級感，如何能讓畫面比較靓麗的同時避免過于俗氣？
Kian：為保持多樣性，英雄的背景色根據不同的地域使用不一樣的幻彩色。通過取色器可以看到不同色相的顔色都處在高明度低飽和度區間的背景配色邏輯，讓背景色保持明亮通透同時不會顯得過于跳躍保證舒适度和高級感。
Q：如何在明亮且多顔色切換的背景中，做好色彩層級處理，突出角色和信息？
Kian：不同色相的背景色保持灰度一緻，這樣在同屏切換角色的時候保持視覺的整體感；同一個背景的不同顔色漸變避免有過大的明度差異和對比，且整體保持中灰的明度區間。使背景能夠在視覺層級中"退後"突出角色和保證信息的可讀性。
04 扁平質感
Q：Dislyte強調潮流和輕量，在界面視覺中呈現出的扁平質感在制作上有什麼技巧嗎？
Kian：為了減輕視覺幹擾，減少用戶獲取信息的壓力，同時能和美術内容形成整體的潮流設計感。Dislyte采用扁平質感強調畫面整體感，與角色場景内容形成整體和諧，圖形外輪廓保持克制和秩序感，歸納和減少控件類型。避免UI視覺過于花哨。
Dislyte主界面
輕量化的控件設計，減少控件設計的厚重感多用透明控件，利用畫面黑白灰對比和顔色對比區分信息層級。但層級的區分不是越細越好，畫面盡量控制在中高低3個層級，避免層級過多造成畫面混亂。
Dislyte裝備系統界面
避免細節的過度堆疊，追求極簡設計，減少畫面的視覺幹擾為用戶減負，同時更符合全球用戶的審美取向。塊面化組合同類型控件，減少線條的使用。過多的細線使用會讓畫面看起來細碎，且容易做出過于科技感的設計，這不是我們想要的方向。
Dislyte極簡化通用型彈窗
05 圖形紋飾
Q：圖形設計服務于信息展示，看似簡單但需要考慮得比較全面，心添老師可以舉Dislyte的例子聊聊嗎？
Kian：圖形紋飾作為核心IP圖形的輔助元素，因為會在不同界面甚至同一個界面中反複高頻使用，除了考慮圖形與世界觀美術風格契合外，還需要考慮其反複使用的舒适度和搭配使用的可能性，因此需要保持簡潔和造型的克制。
Dislyte控件設計案例
使用率最高的通用按鈕和重要控件（例如卡牌）的設計，我們采用的是帶圓角和6度傾斜的矩形。此造型滿足較高的通用性和運動潮流感，同時也是整體視覺設計的細節度标準，再細的細節就會導緻畫面的圖形比例失調和失去幹淨簡約的感受。
霓虹燈圖像元素的使用遵循圓角傾斜矩形的造型特點，使用在重要的入口和标題處，配合動效能提升畫面豐富度，燈的背景使用中灰明度讓畫面對比比較柔和，整體視覺效果帶有一些現代奇幻感，這也符合現代奇幻的世界觀屬性。同時與賽博朋克的強對比形成區分(賽博朋克與世界觀不符是我們需要避免的方向)。
其他輔助的紋飾和圖案遵循簡潔現代的原則，基本是簡單幾何圖像的結合使用。
Dislyte活動彈窗設計拓展
06 構成與排版布局
Q：與橫屏不同，Dislyte采用的豎屏交互框架，在設計上有什麼需要注意的嗎？
Kian：Dislyte作為内容向卡牌遊戲，沒有主場景概念的情況下，全屏界面+彈窗的結構組合有利于傳達世界觀IP和遊戲沉浸感，這個結構也是目前主流的搭配，類型适配度較高。
以Dislyte系統玩法的主流布局為例，基礎的排布邏輯是由上到下為：資源展示區→标題區→2級頁簽&内容區→内容展示區→高頻操作區→頁面切換操作區。分區遵循閱讀習慣和操作習慣以及聚焦内容的邏輯進行。
豎屏的交互框架設計與橫屏不同，豎屏布局設計的tips：
1、遵守自上而下的閱讀習慣，可參考書籍海報的排版布局，盡量接近用戶獲取信息的習慣。
2、高頻操作區需要放在用戶手指容易觸及的區域，提高易用性。非高頻操作的控件可以合理布局在上方。
3、與橫屏不同，一個橫向區域盡量隻顯示一個信息，避免疊加造成的布局混亂和多語言适配的問題。
4、界面布局避免一刀切，可以根據不同的需要保留一定的布局靈活度。
5、豎屏的布局在信息展示上比較有優勢，更容易做出平面設計構成感，可以多參考海報與書籍排版方式，增加設計感。但在同一空間内沒有橫屏這麼容易展示内容疊加的信息，例如寬廣的畫面環境與氛圍，硬做易造成信息呈現的混亂。
UX在開始設計時，要先确定好界面框架。以上是以Dislyte項目為案例進行說明，不同類型和特點的遊戲需要根據自身情況設計符合項目需要的交互框架，深入了解遊戲類型和核心玩法能幫助快速确定一種合适的框架結構。
切忌設計過程中不斷調整框架結構，如前期隻有少量界面需求，率先根據内容設計了一個框架，但是随着内容量的增多、功能的完善覺得之前的框架不合适了又重新改一個框架或者新增一個類型的面闆，如此反複造成大量的人力成本浪費，因此在項目開始設計之初就必須優先确定一個合适的框架結構，就算需求内容還不完善，根據設定好的框架結構後期的變動也不會太大。
黃金比例有三個常見的用法，分别為：黃金分割、斐波那契螺旋、三分法，Dislyte采用了更為簡單實用的三分法。
需要注意的是，黃金比例僅作為設計師的輔助工具，切忌生搬硬套。如果一開始就去想着我一定要在設計中運用黃金比例的話，思維容易受限。黃金比例最好是用在最後設計的修正上，我們可以根據黃金比例去調整元素的位置。
在排版上，有四大排版原則：親密、對齊、對比、重複。
1、親密性：将相關項組織在一起。在一個頁面上，位置接近就意味存在着關聯。因此相關的項應當靠近，歸組在一起。
2、對齊：每個元素都應當與界面上的另一個元素有某種視覺聯系，一個界面建議對齊方式不超過2種。
3、對比：如果界面上的元素不相同，那就幹脆讓它們截然不同，以吸引用戶眼球。如字号的對比，圖片大小的對比。
4、重複：讓視覺要素在整個作品中重複，包括統一顔色方案、字體字号、文本行距、項目符号、對齊方式、圖片風格等等。
親密性案例
以上從六個維度（1.美術風格/2.設計關鍵詞＆情緒版/3.配色/4.質感/5.圖形紋飾/6.構成和排版布局）分享Dislyte如何做一個符合國際審美的現代潮流風格的UI界面。
設計是為了解決問題而存在，遊戲UI界面設計亦是如此。希望通過具體的案例和思考能授人以漁，通往終點的方法和道路有多種，在遊戲用戶體驗設計中應以用戶為中心，回歸遊戲本身才是不敗的真理。
DislyteUI截圖
02
深耕遊戲美術設計十餘年
Q：聊完項目，我們聊聊您個人吧~ 能不能給我們說說您是怎樣進入遊戲行業的?
Kian：我本身就很喜歡畫畫和做設計，很早開始學美術，大學也選擇了設計相關專業，并在2010年進入遊戲行業。當時國内的遊戲行業的工業化還不夠成熟，不區分原畫和UI，很多公司也沒有專門設立UI崗位。所以我也從事過原畫的工作，雖然這并不完全是個人的主觀選擇。
我在大學期間就開始接觸iOS系統的遊戲開發，那會兒做了一款陀螺儀拳擊遊戲，這款遊戲最後在App Store順利上線。從那時起，對遊戲美術這個領域開始感興趣。雖然我還不是很确切的理解遊戲UI，更不知道用戶體驗，但是開始在心裡種下了一顆種子。
随後我了解到上海有一家主要做歐美市場的手遊公司叫Triniti，并順利進入這家公司工作。從這裡開始奠定我對遊戲行業、遊戲研發流程、工業化的第一印象。
Triniti時期項目《Dino Cap》
網易時期項目《鎮魔曲》
之後在網易有過幾年的工作經曆，那時的定位是資深設計師，主要工作是在專業上做沉澱和産出。在網易的這幾年我在專業能力上得到了很好的鍛煉和系統化的設計思考能力。
之後我從網易出來，作為用戶體驗設計團隊leader加入了《權力的遊戲》項目，第一次從0-1組建包括視覺設計師、交互設計師、動效設計等崗位的用戶體驗設計中台。負責整個團隊的管理對我來說是機會，也是挑戰。過程讓我的管理能力得到了很好的鍛煉。
《權力的遊戲：淩冬将至》
Q：為什麼選擇加入莉莉絲？
Kian：莉莉絲在過往的項目中取得了很好的成績，研發實力很強，和很多同行一樣我在很多年前大概是2013年就開始關注這家公司和創始人Kenny，對公司的價值觀和氛圍有一種特殊的好感。
另外，Dislyte這個項目在前期就具備很多成功遊戲的要素，這也是我選擇加入莉莉絲的重要原因。
當然緣分也很重要，剛好Dislyte需要一個用戶體驗設計專家和團隊leader，對我而言一個成功的項目是能夠在行業站穩的基石，同時我的專業能力也需要用成功項目驗證。
Dislyte
Q：專家和管理者這兩個角色對您來說有沒有什麼各自明顯的優劣勢？您更傾向于作為哪種角色？
Kian：現階段我會更傾向做管理的角色。
專家更加垂直，可以更加專注地設計具體方案以幫項目解決重點困難，這也是專家的價值所在。
我更喜歡管理者的角色，是因為我認為從專家到管理者存在着很重要的轉變：把個人能力轉化為團隊能力。帶動整個團隊取得成功，對我來說是很有成就感的一件事。所以現階段對我來說，成為管理角色，帶領團隊成長實現項目的成功更加重要。
Dislyte英雄系統背景切換實機展示
Q：從加入Dislyte到現在，讓你最有成就感的是什麼?
Kian：剛加入Dislyte的時候，UI團隊有一些職能缺失，還未完全地搭建起來。通過和制作人以及主美的溝通，了解他們對用戶體驗的品質預期——比如他們需要什麼樣的交互，什麼樣的動效，整體期待值怎麼樣，等等信息來規劃團隊的搭建。
我最有成就感的事情之一，就是将我剛進項目組時看到的用戶體驗設計和管理的問題都得到了解決，整體的風格以及交互體驗都達到了較好的統一性、規範性。
包括Dislyte最具有辨識度的都市潮流的運動感的視覺表現，以及和整體美術風格的契合度都有明顯的提升，整體的美術表現在上線時也得到了玩家的喜愛。
從團隊上來說，最開始一些欠缺的職能，和團隊能力上的不足，都逐漸解決，開始走向一個協作更加密切、合作更加規範化、思路更加清晰的團隊，這也是我覺得非常有成就感的一點。
Dislyte UI截圖
遊戲葡萄招聘内容編輯，
