關於講師：施雷，騰訊互動娛樂北極光工作室群高級遊戲美術師。
導語
做遊戲產品與做藝術之間是有巨大區別的，藝術家的思維模式是：作品足夠美，不需要過多的言語去表達；而產品的思維模式是：設計應該服務於產品本身，依靠具象化的方式幫助產品將模糊的概念確定為具體的美術風格，同時需要團隊配合協作，不斷提升自我。本文將分享《無限法則》的UI模塊是如何把策劃案模糊的概念具象化為落地的設計，使之批量生產，具備複用性和獨特美術風格。
UI設計，如何開始第一步？
項目初期，《無限法則》整個團隊約十幾名成員，作為項目組的唯一一名UI設計師，項目剛起步階段，面對這“藍天白雲、無際大海、遠處一座小島和一顆樹”的遊戲場景，領導對我說：“請開始你的UI設計。”
在一無所知的狀態下，我們先不要急著著手設計，而是需要對項目設計風格展開思考。大致分為三個步驟：
第一， 找大量代表性的參考資料，進行分析以及歸納總結。例如，《生存法則》的設計，具有殘破感、荒野感以及帶有材質感；《Warframe》的設計，有點微微透視，比較輕薄的質感；《戰地4》的設計，結構穩健、塊面化、偏嚴肅感的設計；《Destiny》的設計，會有大面積的留白、空曠感、圖表化，以及配色活躍。
第二，根據以上4種參考，繪製風格稿，與項目製作人、主美進行溝通，確定UI設計的大致方向。
第三，最終提取《無限法則》項目UI設計的關鍵詞：現代、扁平、剋制用色、無具體材質、橫向性設計以及國際化。
摸索方向：《無限法則》Demo初期設計草稿
（部分素材資源來自網絡）
《無限法則》UI設計要領
1.低信息干擾
什麼是低信息干擾性？根據《眼洞追蹤研究（2018）》研究：網頁上真正有被用戶閱讀過的文字內容不到20%，把其結論運用到遊戲局內的UI設計中，我們需要知道用戶需要獲取的UI界面中這20%的有效信息是什麼，尤其避免在戰鬥局內，出現過多的干擾信息。所以說遊戲局內UI應該儘量少而精悍，把亮點留給場景和角色本身，讓人沉浸到遊戲局內，多餘的UI會造成視覺干擾，我們要做到讓步原則，把所有的體驗留給遊戲本身。
如拿同類產品，在不同時期的設計思路類比舉例：
在2002年發行的《GTA罪惡都市》中（圖片來自網絡），右上角的UI信息採取色彩豐富，血條、護甲為數字化顯示的設計。
在2004年發行的《GTA聖安地列斯》（圖片來自網絡），右上角將上一代數字顯示的信息進行條狀圖形化設計轉變，減少用色，UI的面積也有所減少，但是還是佔據整個單屏的一部分面積。
接下來到了2013年發行的《GTA5》，相對於《GTA聖安地列斯》的UI設計作比較，保留條狀圖形化設計，條的位置由右上角遷移到畫幅的左下角地圖下方，同時只用1根橫條的樣式最大化包含了血條、護甲/防彈衣以及特殊能力條3個不同的信息。剩下的裝飾性或次要性信息，全部進行了隱藏。
同時，遊戲中射擊時，只有當射擊和切換槍支的時候，右上角子彈的數量才會被調用，子彈數默認態為隱藏狀態，這是為了增強遊戲體驗的一種設計方式，最終把所有的體驗都留給遊戲本身，HUD中只保留最重要的信息為常顯狀態。
2.如何降低信息干擾？
項目初期，在沒有交互設計師的情況下，當遇到信息干擾多的情況下，一般採取三個方法：
1.精簡低頻率出現的小界面；
2.臨時隱藏一些不重要的信息，變成不是常顯狀態；
3.優化或者尋求新的替換方式，簡單理解就是讓UI融入場景，如UI進行場景化設計，使其成為場景的一部分。
示例1：上圖中，左側顯示的是早期泰國測試版本，HUD中的切槍面板為常顯狀態，目的在於能夠清楚地看見自己一共有多少把槍；右側是現階段HUD中的切槍界面，把槍支信息臨時隱藏處理，變成不是常顯狀態，需要時才被調用，目的在於在HUD中避免承載過多的信息。
示例2：《無限法則》揹包界面的優化過程。揹包界面屬於戰鬥中核心的一個界面，前期的時候，覺得這種結構相對比較穩定，物件一行一行排版，旁邊會有簡短文字描述，13行展示13個物件。
我們再來看下現階段優化後的揹包界面，首先將物件展示換成了格子化的排版，從原先的13行展示13個物體，優化成為了8行展示容納的物體為23個，同時將描述文字隱藏，通過tips進行提示。
3.邊距：UI組件與屏幕邊緣的距離，保持高度統一
邊距是我們做UI尤其是戰鬥界面當中需要考慮的第一步，因為之前項目組對FPS品類遊戲的研發經驗相對較少，對於這種類型的UI邊距還沒有足夠的經驗，我們對大型同品類的遊戲測量過的幾款項目進行類比，得出一個平均值；並將其結合運用到《無限法則》項目中。
《無限法則》早期版本：邊距30px；優化迭代後：邊距55px
《無限法則》準心常態：62px；準心最大距離：126px
UI設計之初，根據我們的測量參考，原本額定的邊距在遊戲中會比較合適，後期加上動效，或者需要承載的內容會越來越多，導致邊距越來越大，造成位置的偏移；反之，如果我們一開始把邊距設計的過小，組隊時屏幕邊緣的其他隊友圖標內容就會與HUD中其他UI重疊。所以整個UI設計的過程，就如同版本迭代更新一樣，每次都會根據實際情況，進行優化調整，確保最佳效果。
4.視覺元素高度統一：形式感或視覺元素貫通到整款遊戲
視覺元素的高度統一，就是要如何去樹立形式感以及品牌感，需要將它的視覺元素全部的統一，並且融會貫通到遊戲的方方面面。
《無限法則》視覺元素01：點橫點裝飾元素、控件橫向性設計、半透化UI貫穿整款遊戲的視覺設計元素。（為考慮到能容納多國語言的文字長度，因此控件在設計上基本以橫向性作為設計導向）。
《無限法則》視覺元素02：橫向性設計、抬頭標題前加豎線、貫穿整款遊戲的視覺設計元素。
《無限法則》視覺元素03：橫向性Tab、選中態為白底，貫穿整款遊戲的視覺設計元素。
《無限法則》視覺元素04：Tab經過態伴隨白線響應動畫、選中態白底，貫穿整款遊戲的視覺設計元素。
5.合適：適合遊戲的UI才是好UI，而不是單純為了好看
合適原則不是說UI它本身獨立的表現有多麼好，而是UI更像是一個配合工作，服務於產品，彷彿為產品量身定做一樣，所以我們在拿到一款產品要開展UI設計的時候，看它世界觀的年代感和整體的設計語言，並找到合適的字體。試想一下，如果我們一開始參考的遊戲UI都是一些科幻類型，未來向的，但是我們整款遊戲所有的概念設定，包括人物角色模型動作以及場景等，所有東西都是寫實的，如果突然UI特別科幻，那違和感會特別強。
6.讓步原則：戰鬥內UI不搶場景戲份，儘量精簡，目的將原本就出色的美術效果毫無保留地展現給玩家
在戰鬥局內，畫面中展示的所有的內容，每多一個UI都是一種視覺干擾。所以我們的目的就是在戰鬥內做一種配合，把所有的關注點全都讓給場景和角色本身，目的是將原本美術效果很不錯的畫面保留給玩家。
7.明度關係：特效≥UI＞角色＞場景
我總結了的一個關於明度關係的理論：特效的明度≥UI的明度＞角色＞場景。在整體視覺感官的層次關係處理上，特效和UI相對於角色和場景而言可以奠定一個相對較高的明度起點，換句話說就是遊戲局內最高明度的點留給特效及UI，然後角色的明度對比可以低一個層級，場景可以更低一層。但由於特效和UI在面積上沒有那麼的大，所以我們需要將其明度拉高，尤其是做MOBA遊戲的時候，如果遊戲場景明度基調過高，畫面中的英雄勢必會是看不清的，技能特效和UI也就更加看不清晰了。
示例1：《無限法則》泰國測試版本中：調子相對偏平、角色和場景顏色融合在一起，同時場景相對明度較高，UI層次會受到一定影響。
示例2：調子相對偏平、顏色較生，角色和場景顏色同樣融合，場景明度高，UI拉不開層次、顏色層次感不明顯。
示例3：揹包界面換成黑色嘗試發到外網，被玩家反饋：UI明度與遊戲畫面太接近。
當時對於以上幾種情況的解決方案就是，把場景明度降低，讓場景、人物在虛實上能拉出層次，保持UI高明度，使得UI更加清晰可見。
8.意外性設計: 有隱性的、出色的意外性設計,在交互上提升一定的尖叫度
意外性的設計是一種額外的體驗，它就像一個彩蛋藏在遊戲裡面。
《無限法則》也設計了不少有意思的體驗，比如，當歐洲服務器上線時，在Loading界面的護目鏡上加了歐洲地圖特寫，歐洲玩家看見自己家鄉的地圖，特別有認同感。
再例如，《無限法則》揹包界面的槍支配件局部設計。槍支配件會隨裝卸情況，用2D組件逐個單獨配表，將實際情況反映在槍械上，我們當時做了槍械的Avatar系統，這個設計在市面上也是很少會出現的。類似這樣的小設計，也增加了在遊戲中許多額外的期待和驚喜的意外體驗。
9.樹立品牌感、避免山寨設計
關於品牌感，是一個無法量化的東西，但是成功的品牌，當人們看見一樣物品的某個局部或某一種經典配色，大家就會聯想起是某一類品牌。如果要樹立品牌感需要做好形狀固定的視覺設計的一個元素，以及它的顏色。
我們對《無限法則》各時期品牌Logo進行分析，從Logo的演變中，可以感受到品牌升級的過程。這款遊戲比較硬核，所以Logo的整體感覺也會設計的偏硬朗，早期的Logo從《無限法則》遊戲英文名的首個單詞“Ring”衍生而來，外部做了一個圓圈的輔助設計，後續覺得是多餘的，去掉後顯得更加簡潔幹練；同時，我們對Logo也進行了幾處非常細微的一些處理。比如早期的尖角是有一條縫隙的，後續迭代中把其閉合處理；以及切邊的弧度都做了調整。這種細節的處理雖然看上去差別不大，但是在後來的版本迭代中造型上都會有一定細微區別。
統一化的視覺元素，便於在傳播過程中，提高人們對產品的識別度，加深人們對產品的印象。黑白金銀三角形加黃色，是我們的一個核心的對外宣傳的視覺元素，我們來感受一下品牌Logo如何運用到傳播中的。
示例1：《無限法則》上架Steam前，第一版封面圖的展示的Logo為藍色，但是產品整體品牌的Logo默認是黃色，同一品牌，初步宣傳時採用不同顏色會對玩家對品牌度的認知上產生一定干擾或困惑，後續迭代版本中，我們將其更新。
示例2：初期海報宣傳中，解析了Logo的基礎元素，是三角形加黃色，後續做延伸設計的時候，把這2個元素融會貫通到所有的宣傳設計層面。
示例3：從Logo的三角形造型為出發，統一化的視覺元素，運用到外星人電腦合作項目活動小卡片設計中。
示例4：《無限法則》Steam DLC展示界面，統一視覺元素：三角形+斜切線；顏色元素：黑白金銀。
示例5：《無限法則》購買DLC後進入大廳領取界面，形狀元素：三角形+斜切線；顏色元素：黑白金銀。
示例6：《無限法則》購買冒險者通行證界面，形狀元素：三角形+斜切線；顏色元素：黑白金銀。
示例7：《無限法則》：Logo造型融入到遊戲的方方面面，包括戰階圖標、榮耀圖標、經驗圖標、滑翔翼的皮膚、感謝信信封上的封蠟以及揹包的設計。
小結，我們要如何去樹立品牌感呢？
第一， 分析遊戲世界觀；
第二， 提煉成關鍵詞；
第三， 將關鍵詞圖形化。
10.顏色數量控制：主色不超過2種色系；輔助色不超過3種色系。
關於顏色數量的控制，總結一句話：大味必淡而淡而有味，就是說享受了太多的山珍海味，突然來一杯清爽的檸檬水，會覺得特別好喝。所以我們這款遊戲的UI設計出發點也是這樣，如果當角色和物件足夠表達這款遊戲的亮點和品質時，那UI就往後退。把所有的亮點都留給場景和角色，UI儘量剋制過度用色，保留黑白的主題色以及帶有情緒的兩個黃藍按鈕以外，其他色彩豐富表現全都留給物件本身。
11.資源可複用性：設計控件和界面背景時，設計過程中考慮該資源在其他地方是否可以不斷被複用
關於資源的複用性，網上很多練習作品，界面為了美觀採用弧面設計，實際項目中弧面設計的資源相對難做九宮處理，大量採用弧面設計會帶來資源量的浪費。我們在設計時，應該更多考慮開發的實現性。同時，我們會把所有的資源物件，建立公共資源池，一方面是為了快速獲取資源；另一方便可以把項目中所有資源元素做體系化的管理。
12.信息分組（塊面化）：拉近相似元素的距離，成為一體；功能按模塊區分、層級明顯、具有易用性
信息塊面化處理：當設計師拿到策劃案時，首先要讀懂方案文字，按照類別分檔，再開始具體做執行繪製。做這些前期工作是為了方便信息作塊面化歸類，拉近相似元素之間的距離，讓界面更加有條理，便於用戶閱讀理解。
例如在做HUD武器信息界面的時候，左圖版本迭代前，切槍界面、護甲狀態、手雷狀態等信息堆疊，沒有做信息分類，顯得所有內容特別繁雜；右圖版本迭代後，把切槍界面拆分，並做默認隱藏處理，當前武器狀態信息和血條獨立成一個面板出來，將信息歸類並塊面化劃分，目的在於提高識別度。
同理，揹包界面中，物件欄格子化。子彈欄與配件欄拆分成組，醫療品、手雷單獨成組並有快捷鍵提示，在戰鬥狀態下，不用每次都打開揹包，便能通用快捷鍵調用對應的醫療品、手雷和武器。
13.對齊：任何元素都應與其它元素有著明確紐帶關係
對齊就是在平面設計當中，最基礎同時也是大家很容易忽視的一點。從宏觀視角出發，即一個界面中每一樣元素都不會孤立存在，一定會基於某一樣東西或形式對齊，如果沒有直接的對齊參照物，那它會基於骨骼線也就是設計中額定的網格線對齊。從微觀視角出發，大家有時候在做文字對齊的時候，會發現標題或Tab按鈕或界面中的描述文字到底是左對齊還是居中對齊？除非是為了表達極正式、莊重的情形，儘量避免居中對齊。
14.留白與空白：
“白”不是白的。是讓白得以誕生的是一種感受白的容納性。是搜尋一種能感受白的感覺方式。
——《設計中的設計》
“留白”與“空白”之間，很多人覺得是同一個詞，其實它們倆是有依存關係的，“留白”相對局部，“空白”相對整體。大面積空白會營造奢華感或高級感，小面積會營造熱鬧歡快感。界面物體之間的空白關係以及字裡行間的留白麵積大小，會影響整體界面視覺上的平衡關係。
15.立體化：可將UI立體化、場景化，增加代入感
立體化也是個思維，是一種解決方式，當UI在平面內佈局不完整的時候，立體化或許是一種額外的體驗。
《無限法則》出生選點地圖界面：目前是平面思維
《無限法則》出生選點地圖界面：未來可以嘗試立體化概念設定
比如說像平面的圖片，把它融合到3D裡面，就會給人有另外一種新奇的感覺。假設地圖就是3D的，當鼠標滾輪點擊的時候，會有一個3D的地圖呈現給玩家，空間感會更加強烈，也可以做到2D與3D的結合，跳出二維的思考方式，可以考慮一下立體化表現。
界面設計注意要點
1.交互：尺寸與佈局。
2.層級：突出重點減弱干擾。
3.信息：簡潔清晰、快速準確、可讀性強，信息歸類塊面化。大面積文字當塊面構圖去理解，文字甚至在設計中起到配平作用。
4.習慣：遵循玩家習慣常規設計，針對不同的用戶，交互上可做一定的差異化。
5.資源：複用理念控制資源。
6.風格：避免過度設計、色彩雜亂、層級混亂、不夠精緻、風格不明確。
7.行間距：同一套同類別的界面設計中，避免出現多種不同的行間距。
8.字體邊距：外邊距＞內邊距原則。
界面設計技巧
1.故事情節：讓大眾的心理產生“共鳴”，帶動玩家內心的情緒，加深對遊戲的印象。
《無限法則》黑夜模式宣傳圖（無人版）
《無限法則》黑夜模式宣傳圖（角色版）
故事情節是為了讓用戶產生一定的共鳴。例如上圖中是《無限法則》黑夜模式宣傳圖，當時的主題是“黑夜來臨”，其實從片面角度來說，無人版就足以能夠表達黑夜模式，但是如何做到能夠表達更強的故事性呢？我們加入了4名遊戲角色，圍著火爐交談，這種形式會使氛圍感更強烈。
2.不僅僅是極簡主義
什麼是極簡主義？享有“極簡主義之父”之稱的約翰帕森把極簡主義定義為：當內容被減至最低限度時，它所散發出來的完美感覺，當物體的所有組成部分、所有細節以及所有的連接都被減少或壓縮至精華，它就會擁有這種特性，這就是去掉非本質元素的結果。
極簡主義是大家都會運用到設計中的一個定義，我們就不多加闡述，這裡我想分享的是“不僅僅是極簡主義”，意思是說不要把所有設計都盲目極簡化處理，有的物件能傳達情感、韻味或特殊感受，可以保留該物件本質。
例如，上圖的UI界面是極簡和扁平設計，但榮耀圖標的材質感和細節刻畫是非常深入的，讓人能夠感受到滿足感與成就感，這樣利於產生情感的對比。
3.反差：差異越大反差越明顯，能讓特定要素更顯眼
設計師經常會被問到，這前後兩稿有什麼區別？所以設計稿在做項目評審的時候，如果要做對比，那麼請加大對比！比如一開始我們做角色外觀界面，比例是1:1，默認角色顯示全身，角色和界面看上去都比較平淡。調整後，在UI界面不變的情況下，鏡頭拉近，角色比例拉大，UI界面自然就往後退，它在造型的大小面積上的比重就會產生一定的反差。
4.軟硬虛實
形狀的虛實運用是指設計當中直線加曲線的一種運用。例如上圖中局內個性動作選擇界面，所有的UI都是全四方菱角界面，在這當中嵌入圓形來調和整個形狀上的軟硬虛實的關係。
圖標設計要領
1.圖標存在的意義
遊戲圖標的類型有很多種，它們存在意義就是會比文字更加直觀的體現信息，讓其變成視覺元素，融入到遊戲產品中。
2.圖標設計原則
- 可用性 ：高識別度、直接、統一、差異化、特定使用環境。
- 美觀性 ：構圖、配色、繁簡程度。
- 原創性 ：為該款遊戲量身定做，從遊戲世界觀中提煉風格。
- 繁簡性（層級性） ：根據策劃案需求，將圖標分級，越高層級的圖標在造型、色彩、材質、表現形式上越豐富。
例如，個人信息界面：榮耀圖標繁簡層級性（大小對比、造型繁簡度對比、顏色材質對比）。
· 統一性
①朝向統一；
②透視統一，同等層級關係的圖標，確保如果用透視形式那就全透視，避免透視和不透視混用；
③視覺平衡統一，在額定的內安全框內，複雜造型圖標可以比簡單造型稍微小一些；
④光源統一，光源方向、光源強度、光源冷暖程度統一。
3.注意事項
- 過度設計：避免過度追求風格化導致的過度原創、表意不足。
- 用戶習慣性理解導向： 比如設置界面是一個齒輪，大家潛意識裡面已經習慣這個符號性標誌。
- 差異化不明顯 ：太相似、難識別。
4.總結：全球頂尖設計團隊設計原則
最後是全球頂尖設計團隊的設計原則，比如說蘋果的設計，認為好的設計是整體的美學，在iphone上市前，絕大多數手機的電板都是能夠被拆卸的，但蘋果是強制讓iphone電板不能拆卸，強調整體美學不可破壞，即便它的這個電板用一會就沒有電，但是你不能破壞這個設計。
Facebook認為好的設計是講誠信的，它其中很重要一點叫做全球化思維。同樣道理，就是微軟的設計，好的設計要給人一種驚喜的額外體驗，並且保持簡單。
火狐的就非常有意思，它叫做照顧你，如果一個好的設計你會覺得它是有體溫的，它是有人文關懷的，那麼它的宗旨就是照顧你。並且它也提到了很重要的一點——全球化。
好的UI設計就像一本不用設計說明書的產品，不需要解釋，就明白怎麼操作，讓大家感受到我們設計師的用心。
·END·
閱讀更多 騰訊創意遊戲合作計劃 的文章
