火星網(wǎng)校
UI設(shè)計(jì)師必看!游戲技能與道具的ICON設(shè)計(jì)指南
發(fā)布時(shí)間：2024-01-16 14:50:25 瀏覽量：192次
編者按 ICON看似很不起眼，但卻是游戲中必不可少的存在。那么，怎么才能將它設(shè)計(jì)得更好？本文作者總結(jié)了自己在游戲ICON方面的設(shè)計(jì)經(jīng)驗(yàn)，希望對(duì)大家有所啟發(fā)。
文 | volvofu
騰訊互動(dòng)娛樂 視覺設(shè)計(jì)
從事游戲UI設(shè)計(jì)零零散散加起來7年多，對(duì)交互和平面研究有限，卻一直對(duì)設(shè)計(jì)各類ICON有著莫名的執(zhí)念，參加完整的大小項(xiàng)目也有幾個(gè)了，畫的各種ICON已經(jīng)記不得有多少，也算有些心得和積累，這次想和大家聊聊圖標(biāo)那些事兒。
各種游戲各種ICON五花八門，以自己有限的制作經(jīng)驗(yàn)，個(gè)人總結(jié)其實(shí)可以歸為三大類——技能圖標(biāo)，道具圖標(biāo)，以及一些要求精度比較高，純展示功能的一些展示性圖標(biāo)（比如段位），這次先就聊聊技能和道具ICON。
首先放一部分項(xiàng)目作品鎮(zhèn)樓，然后就開始正文。
首先要明確一個(gè)標(biāo)準(zhǔn)，什么樣的技能ICON是個(gè)好的技能ICON，我的答案就是，圖標(biāo)不決問DOTA2！從技能到裝備全是如此！
（DOTA2中的技能ICON）
開個(gè)玩笑，可能說的有點(diǎn)過，技能圖標(biāo)千變?nèi)f化，各個(gè)游戲也是風(fēng)格迥異，DOTA2最終的結(jié)果不一定適用于所有人，但是還是可以從中總結(jié)出一些基本的規(guī)律，來作為設(shè)計(jì)的基本支撐，經(jīng)過長(zhǎng)期的分析，也算是總結(jié)出個(gè)人感覺比較重要的4點(diǎn)和大家分享一下。
1.1 關(guān)于構(gòu)圖
1.1.1 取材
技能圖標(biāo)有一個(gè)特點(diǎn)，就是它往往表達(dá)的是一種行為和場(chǎng)景，所以要表達(dá)的內(nèi)容會(huì)非常豐富，但是，技能ICON本身在游戲里的空間占比非常有限，所以就要求我們要抓住重點(diǎn)，在我們呈現(xiàn)的元素上，要有取舍，你想把什么都表達(dá)全，那很大概率上你就會(huì)走遠(yuǎn)。
比如下面這個(gè)例子，給CP草圖階段的修改。
這里我們要表現(xiàn)一個(gè)架槍射擊的技能，左側(cè)初始版本雖然把槍表現(xiàn)得很完整，但是問題也就在這里，就是表現(xiàn)得過于完整了，因?yàn)楸旧順岓w結(jié)構(gòu)就比較復(fù)雜，所以就把整個(gè)圖標(biāo)畫面切割的非常碎，實(shí)際進(jìn)到游戲中縮小后表現(xiàn)并不好，識(shí)別度并不高，右邊這個(gè)優(yōu)化版本，其實(shí)就是著重突出了這個(gè)槍的特征，這樣就會(huì)讓畫面主次分明，雖然主體物展現(xiàn)的結(jié)構(gòu)少了，但是給你刻畫的空間變大了，這一點(diǎn)會(huì)直接影響你最后的表現(xiàn)。
一個(gè)疾跑技能，可以選擇露出全身，也可以著重描繪向前的雙腳。試想，在一個(gè)120x120像素的空間內(nèi)，是描繪一雙腳的表現(xiàn)力強(qiáng)，還是刻畫全身的表現(xiàn)力強(qiáng)，結(jié)論一目了然。
所以，個(gè)人認(rèn)為在開始取材構(gòu)圖的時(shí)候，技能ICON應(yīng)該優(yōu)先做減法，用最少的元素體現(xiàn)你想體現(xiàn)的東西，把空間最大程度上的留給需要塑造的地方，畢竟，能被看出來的細(xì)節(jié)才叫做細(xì)節(jié)，在小空間內(nèi)過多的元素只能成為視覺的負(fù)擔(dān)。
1.1.2 關(guān)于“張力”
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計(jì)領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點(diǎn)擊咨詢報(bào)名。
-
2. 手機(jī)游戲如何開發(fā)(如何制作傳奇手游，都需要準(zhǔn)備些什么？)
?如何制作傳奇手游，都需要準(zhǔn)備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時(shí)代在進(jìn)步游戲在更新，更趨于方便化移動(dòng)化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費(fèi)、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費(fèi)、一鍵制作炫酷特效，適合新手小白?？靵碓囋?！
-
4. Steam值得入手的武俠游戲盤點(diǎn)，各具特色的快意江湖
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個(gè)抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟(jì)體系揭秘，不同玩家角色的經(jīng)濟(jì)活動(dòng)
Bigtime加密游戲經(jīng)濟(jì)模型分析，探討游戲經(jīng)濟(jì)特點(diǎn)，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動(dòng)畫軟件你知道幾個(gè)?3ds Max、Blender、Maya、Houdini大比拼
當(dāng)提到3D動(dòng)畫軟件或動(dòng)畫工具時(shí),指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動(dòng)畫的軟件程序。但是,在3D動(dòng)畫軟件中還包含了其他類型的...
-
7. 3D動(dòng)漫建模全過程，不是一般人能學(xué)的會(huì)的，會(huì)的多不是人?
步驟01:面部,頸部,身體在一起這次我不準(zhǔn)備設(shè)計(jì)圖片,我從雕刻進(jìn)入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
8. 如何自己開發(fā)一款游戲(游戲開發(fā)入門必看：五大獨(dú)立游戲開發(fā)技巧)
?游戲開發(fā)入門必看：五大獨(dú)立游戲開發(fā)技巧無論您是剛剛起步開發(fā)自己的第一款游戲，還是已經(jīng)制作了幾款游戲，本篇文章中的5大獨(dú)立游戲開發(fā)技巧都可以幫助您更好地設(shè)計(jì)下一款游戲。無論你對(duì)游戲有著什么樣的概念，都
-
?三昧動(dòng)漫對(duì)于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會(huì)推出《巫師4》。因?yàn)椤段讕煛废盗性诓邉澋臅r(shí)候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
10. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅(jiān)固
想讓你的3D打印模型更堅(jiān)固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計(jì)技巧，讓你輕松掌握！
最新文章
請(qǐng)綁定手機(jī)號(hào)
同學(xué)您好！