編者按 ICON看似很不起眼，但卻是遊戲中必不可少的存在。那麼，怎麼才能將它設計得更好？本文作者總結了自己在遊戲ICON方面的設計經驗，希望對大家有所啟發。

文 | volvofu

騰訊互動娛樂 視覺設計

從事遊戲UI設計零零散散加起來7年多，對互動和平面研究有限，卻一直對設計各類ICON有著莫名的執念，參加完整的大小專案也有幾個了，畫的各種ICON已經記不得有多少，也算有些心得和積累，這次想和大家聊聊圖示那些事兒。

各種遊戲各種ICON五花八門，以自己有限的製作經驗，個人總結其實可以歸為三大類——技能圖示，道具圖示，以及一些要求精度比較高，純展示功能的一些展示性圖示（比如段位），這次先就聊聊技能和道具ICON。

首先放一部分專案作品鎮樓，然後就開始正文。

首先要明確一個標準，什麼樣的技能ICON是個好的技能ICON，我的答案就是，圖示不決問DOTA2！從技能到裝備全是如此！

（DOTA2中的技能ICON）

開個玩笑，可能說的有點過，技能圖示千變萬化，各個遊戲也是風格迥異，DOTA2最終的結果不一定適用於所有人，但是還是可以從中總結出一些基本的規律，來作為設計的基本支撐，經過長期的分析，也算是總結出個人感覺比較重要的4點和大家分享一下。

1.1 關於構圖

1.1.1 取材

技能圖示有一個特點，就是它往往表達的是一種行為和場景，所以要表達的內容會非常豐富，但是，技能ICON本身在遊戲裡的空間佔比非常有限，所以就要求我們要抓住重點，在我們呈現的元素上，要有取捨，你想把什麼都表達全，那很大概率上你就會走遠。

比如下面這個例子，給CP草圖階段的修改。

這裡我們要表現一個架槍射擊的技能，左側初始版本雖然把槍表現得很完整，但是問題也就在這裡，就是表現得過於完整了，因為本身槍體結構就比較複雜，所以就把整個圖示畫面切割的非常碎，實際進到遊戲中縮小後表現並不好，識別度並不高，右邊這個優化版本，其實就是著重突出了這個槍的特徵，這樣就會讓畫面主次分明，雖然主體物展現的結構少了，但是給你刻畫的空間變大了，這一點會直接影響你最後的表現。

一個疾跑技能，可以選擇露出全身，也可以著重描繪向前的雙腳。試想，在一個120x120畫素的空間內，是描繪一雙腳的表現力強，還是刻畫全身的表現力強，結論一目了然。

所以，個人認為在開始取材構圖的時候，技能ICON應該優先做減法，用最少的元素體現你想體現的東西，把空間最大程度上的留給需要塑造的地方，畢竟，能被看出來的細節才叫做細節，在小空間內過多的元素只能成為視覺的負擔。

1.1.2 關於“張力”

來看一組對照 ，都是車，都一樣的角度 。1- 2- 3 動態透視逐漸變大，明顯有透視的構圖，是更具有畫面衝擊力和吸引力的，更重要的是，技能圖示更多的是在表達一種行為，透視的存在其實是可以進一步強化這個行為。這一點對傳達的感受以及表現力至關重要。

如圖中所示，差不多的內容，相同的角度。視覺感受卻差別很大。

對比我們實際中的遊戲的例子。

這是之前我在專案中的一套技能ICON優化，每張對比左側都是CP回來的結果，但效果並未達到標準。原因很簡單，我覺得太“平“了，它們作為描繪一個行為動作的ICON表現力太弱了，所以我進行了優化，優化過程中我並沒有修改技能元素本身，只是在此基礎上優化構圖（不要吐槽剛在上面說完，這裡的疾跑我就用了全身….因為原因太複雜了……）。

我嘗試讓它們的構圖更能體現技能本身的特點，經過優化以後的圖示，就會更加有張力，更具表現力，所以我習慣在ICON起稿的階段，儘量做好這樣的基礎。會有意識的去做這種處理，要多想想，是否有更好的角度和方式去展現要表達的內容。（盡力而為，畢竟本人基本功有限=。=）

因為有好的基礎，在此基礎上進行細化，才事半功倍，更能出效果。

1.2 用色

打好了基礎，我們來取色，在此之前我們先來看兩組對比。

不難發現，右邊一組(DOTA2)的顏色會顯得有序，更協調。多個圖標出現的情況下，我們更多希望是呈現出右邊的結果。所以我們可以嘗試找到其中的規律。

首先，提取兩組ICON的顏色以及在畫面裡的佔比。

就會發現。先拋除色相本身，只看各個色塊所佔面積。

顯然，DOTA2（右側）的ICON中，會有一個顏色始終佔據主導，這一點非常之重要。技能ICON都是搭配相應角色出現，一個角色會有她一個整體的調調，這樣才不會亂，ICON作為從屬資源，亦是如此。這樣才是一個完整的設計。

所以，我也嘗試儘量融入在實踐中。

其二，我們從色相本身來看。

示例1（左）採用了很多的對比色，而示例2（右）大面積的色塊採用了鄰近色變化，過多的對比色加上本來相對平均的色塊面積，會加劇視覺的衝突感，雖然單個圖示對比來看可能看起來更抓眼球。

但是關鍵一點在於技能ICON大部分情況下是以多個數量出現，所以多個技能ICON的顏色關係會對整個介面的呈現效果有非常大的影響（影響大小隨著ICON數量以及圖素大小的變化浮動）。

上圖是LOL遊戲內的對比，新舊英雄技能ICON的對比可以看出對畫面的影響。新英雄（海獸祭司·俄洛伊）的ICON更加的協調更加統一，整個介面效果看起來也會上一個檔次，對於我們自己的專案，也是一樣的結果。

PS:這並不是一個強制性的規則，主要想表達的是整個畫面的協調，補色可以用，任何顏色都可以，只不過視情況控制比例和搭配即可。

1.3 技能屬性的強化和表達

技能ICON比較特殊的的一點，就是它有自己的固有屬性。雖然技能的數值和具體描述千變萬化，但是技能本身的性質其實是可以歸納成幾大類的，相應的呈現方式也會有大體的邏輯在其中，好的呈現可以一定程度上降低玩家的理解成本。

如圖所示：

（DOTA2）

DOTA2中的技能ICON，雖然單個圖示所呈現的元素、色調、表現方式都有差別，但是仔細看可以發現，同類型的技能大多有其共同點蘊含其中。

通常情況下（個別例子肯定存在，因為影響的因素過於特殊，不具備代表性，所以在這裡就不加以分析）可以從表現分為三大類：物理攻擊、魔法攻擊、BUFF類（增益減益）。大部分情況下，它們各自都有屬於自己類別的比較通用的設計語言。

圍繞著這些點，我們在此基礎上做一些誇張，進而強化這些設計語言，例如物理攻擊多以直線走向為主，那就從主體物的構圖到特效光的走向，都可以配合加強。從而讓玩家的代入感和認知強化。

1.4 關於塑造和細化

技能ICON裡面有大量的特效元素，大多數都是光，在表現光的時,常見的問題就是，容易看起來簡單，顯得很薄，沒有內容。例如下圖：

顯然這不是我們最終想要呈現的效果，圖中ICON的設計元素並沒有什麼問題，最終沒有呈現好，這是因為忽略了一個點，就是我們在塑造實物的時候是有虛實和體積的 ，其實光也是如此。

這是同一組的技能對比 ，左側是從CP方回收的資源，後面是在此基礎上優化的，沒有更改元素和構圖，這樣對比起來會比較直觀。我所做的基本都是在細分元素之間的層次以及元素自己的層次。

技能ICON裡面的元素很多，所以要注意的關係就很多，每一個關係都會影響到你最後的呈現效果。

小結：設計從來沒有一個唯一標準，以上全部是自己通過實踐以及踩坑總結出來的經驗，不同的環境，不同的使用者以及不同的需求，都會有或多或少需要變通的地方。但是以上四點都可以作為最基礎的原則，在此基礎上進行調整，最後的呈現起碼會有一個基本保證。

道具ICON圖示視覺上銜接著UI與遊戲畫面。它以UI為載體，然而表現形式卻是與遊戲畫面內容統一的。而功能上，道具ICON往往正在著一些代入感。那如何增加道具的代入感。

2.1 關於靈感

以我們專案當時的福袋活動為例。

專案維護階段每一個新的角色上線都必須要配備三個物品分別是專屬道具、福袋、個人頭像。因為篇幅有限就不一一分析，主要從福袋進行展開。

一個遊戲裡面活動眾多，玩家不可能關注到每一個活動，問題就來了，當玩家在遊戲中掉落一個福袋的時候，如果這就是一個傳統的標準福袋，雖但完成度很高，是玩家就會很迷茫，這是什麼？幹什麼用的？從哪來？沒有任何關聯性。那這就是必須要解決的問題。起碼要讓這個東西和活動的主體關聯起來，所以顯然只是從“福袋“本身出發是不夠的。

如果一個角色是有背景的，那這件道具就一定也會符合這個背景，設計的起始和核心，應該是背景，而非袋子。

對於一個角色來講，切入點也就是人物的出處、人物的特徵點，以及人物的個性。

人物出處-源於叢林，原畫前景以及人物技能特效皆有落葉，這個就可以作為一個設計元素，加在認為合適的地方。

人物風格-比較原始，福袋的輪廓和結構就不易複雜。

人物的特徵-衣服的材料，皮質的綁帶，以及身上的骨片，甚至臉上的戰妝，都可以成為設計的元素。

綜上所述，客觀人物故事的分析加上主觀的設計結合，最終自然形成了上面的結果。

以上述為基本的邏輯進行延展，在其他設計立面同樣的福袋可以得出截然不同的結果。

整個福袋就是英靈召喚師的輪廓縮影，頂端的銀飾取材脖頸銀飾，福袋的蓋子形狀是深V領的抽象，中心水晶，取自最具有辨識度的肩膀浮空水晶，下半部分的結構和層次就是裙襬的造型。而召喚師出身高貴，所以相比之下ICON的線條也更精緻考究。

其實不光是福袋，這套設計邏輯同樣適用於其他的道具，例如專屬角色的專屬寶箱。

（角色-夜鴉以及專屬寶箱）

首先鎖定我們的設計重點。

寶箱本身比較大，結構複雜且展示面積大，所以可以從多一個維度去設計，就是通過造型體現人物的性格，比如該角色極具攻擊性的性格，那就用誇張外輪廓和尖角的設計去強化玩家感受，造成關聯。

角色性格的迥異，造就了完全不同的寶箱樣式，畢竟沒人規定寶箱必須就是方的，我有時候習慣否定自己的第一想法，因為那往往是自己固有的思維，嘗試之前沒有嘗試過的東西，才會有突破，縱使結果不一定很理想，但是也是很重要的積累。

（各種角色的各種寶箱）

2.2 關於塑造（質感向）

為了塑造各式各樣的道具，表達各式各樣的質感。也進行了一些實踐和總結，其實重點無非就是高光以及反光。不管是Q版或者寫實都一定會遵循這個規則，只是表達起來的歸納程度以及用色方式的區別。

以金屬為例。

高光和反光的，形狀確定還是模糊，對比強烈還是柔和，直接覺決定了趨向於哪種質感。

哪怕除去顏色，質感的表現也不會被幹擾，比如越新的金屬，越華麗的金屬，看起來越纖薄的金屬，它的高光和反光的形狀越清晰，它們的明暗漸變就越強越突然。在設計中，遇到我不熟悉的材質，個人習慣去找材質參考，然後抓住以上幾點，總歸不會差很多，當然，還離不開長期的練習。

以上就是本次分享的所有內容，後續有機會，會繼續與大家分享關於裝備和特殊展示ICON的心得和經驗。

最後附上雜七雜八的各種設計圖收尾。

最後：設計的原理很好掌握，但是每個人在長期的實踐中，也會形成屬於自己的習慣和處理方式，形成自己的風格，由於研發方式的原因，相對來說我積累了比較多的ICON設計經驗，以上皆為個人經驗，難免夾帶私貨，希望自己的粗略總結可以在某些方面給大家帶來新的想法，最後UI的靈感來源不一定要源自於UI，我認為UI是一個涉及面很廣的美術模組，更需要全面的提高審美還有美術能力。能有現在的呈現，身邊的原畫同事、3D同事以及其他的同事給了我很大的幫助，感謝專案組的支援，也祝願大家都能如願設計出自己滿意的東西！