游戏图标精通—设计思维

广州/UI设计师/2年前/869浏览
游戏图标精通—设计思维

学习图标设计思维,有助于我们学习和提升自己绘画图标的能力

如果说界面是基于当时的条件,不断探索迭代出的成果。那图标也一样,在条条框框的限制下,在小小的区域里,设计出既符合限制条件又满足需求的资源。因此了解限制条件,以及前人为了解决问题运用了哪些技巧,都有助于我们学习和提升自己绘画图标的能力。

设计思路

1、风格定位

这里的风格定位指的是游戏整体的绘画风格,图标是游戏的一部分,在风格上应当做到统一。而绘画风格的分类有厚涂、半厚涂、平涂.....每个国家都有自己的主体审美风格,特别是绘画风格起源或盛行于那个地区。例如:平涂也叫赛璐璐风格,赛璐璐最初是一种化学材料—人造塑料,早期的美国动画就是通过这种材料制作动画的,后传到日本被广泛应用, 而日系动画主要由赛璐璐制作,画师先在胶片上画好线稿,然后交由专门的上色师来对线稿进行填色。因为赛璐璐被制作日系动画时间更长,传播性和代表性更广,因此赛璐璐风格也被称为日系平涂风格,在二次元游戏中被广泛运用。

(在《游戏图标的概念》一文中,有关于各种绘画风格的讲解,请搭配使用)

不过游戏风格通常在游戏立项的时候就会被确定下来,作为设计师需要的是了解和把握每个绘画风格的特点以及绘画技巧,当然每种绘画技巧都需要大量的练习才能精通,所以更建议优先学习热门的绘画风格

2、世界观定位

游戏的世界观指的是整个游戏的历史背景。或真实,或虚构的历史框架和世界形势。通过物种,人文,科技,服饰,技能等内容去呈现。而世界观的作用在于帮助玩家产生代入感,并且迅速了解这个世界,因此游戏中所存在的元素,既需要符合世界观的逻辑,又需要能与机制产生关联性。否则“不合理”的设定,在不同程度上会打断这种代入感。

在明确世界观后,将世界观进行元素提取,并概括成关键词。(头脑风暴:通过掌握初步资料和方向后,设计者通过想象引起思维扩散,在短期内产生大量的设想,对项目定位的准确性有重要的帮助,为进一步设计提供素材)

(在《游戏设定与世界观》一文中,有关于各种世界观的概括,请搭配使用)

《阴阳师》是以日本平安时代为背景创作的虚拟世界,讲述了阴阳师和妖怪之间人鬼共生,共同战斗维护阳间秩序的故事。因此在元素提取上可以以平安时代的真实物件作为参考。

3、功能定位

①功能图标

各个系统的入口图标,又称菜单图标,最常见的功能图标常驻于主界面,方便玩家与各个系统进行交互

设计要点:将世界观提取的元素与系统功能关联起来。

②道具图标

道具图标包含物品图标、装备图标、货币图标、武器和任务道具等,以缩略图的形式,让玩家迅速理解其意思,同时帮助玩家通过世界观的元素,建立起代入感并产生共鸣 。

设计要点:美术上符合世界观的物品设定和品阶表现;功能上符合需求。

③技能图标

技能图标主要是游戏角色的技能缩略图,其表现形式需要与技能特效的效果保持一致,方便玩家在对战中能够快速识别和操作。

设计要点:符合技能的表现形态,如物理攻击的劈砍斩踢,魔法攻击的风火雷电,并且表现形式与技能特效能够关联一致。

设计技巧

1、思维导图

     

上面提到元素提取的设计思维,通过了解资料,进行思维扩散,并产生大量的设想关键词,为了将纷乱的概念更好的与功能需求关联起来,可以使用思维导图的方法,将概念进行整理,创建关联和分类,方便我们在设计的时候对照需求,提炼创意。

2、相似原则

     

指的是在某一方面相似的各部分趋于组成整体,人们通常把那些具有明显共同特性(如形状、大小、颜色等)相似的事物组合在一起。这是图标设计中最显著的设计原则,因为图标繁多,需求不一,造型各异,为了强调他们作为一个整体,具有相似的功能,因此便有了以下默认的图标规范。

系列图规范

风格统一

角度统一

光源统一

大小统一

用色统一

绘制复杂图标时,还要考虑每个图标的描边,底框,外发光,投影等各个元素的统一

(以上能够让图标之间形成相似并产生关联的一些规范)

3、造型设计

①识别性-外轮廓

在设计一组图标的时候,图标的造型往往需要外轮廓具备一定的辨识度和记忆点,能够过外轮廓识别图标主体信息,而外轮廓越整体,辨识度越高,否则反之.

②层次感-强化主体

     

 图标是由点线面组成的几何形体,面构成了图标的主体,线作为辅助,点则是点缀,彼此形成了层次关系,而主体作为视觉的重心,整个设计的主导,应该作为玩家的第一个关注点,因此在处理主体和点缀的关系的时候,可以通过比例上的疏密、大小、以及整齐和不规则的变化对比,使图标有更多丰富的主次变化。

③设计感-元素分解重组

    

对物品的含义进行拆解,通过元素之间分解重组在一起重新设计,给元素赋予另一种形态,并且具有之前本身的含义。

群作业

①选择3个世界观,将世界观进行元素提取,概括成关键词,并通过思维导图整理出来

②自定义画风、世界观、功能,并通过相似原则,设计3套系列图标

自定义画风、世界观、功能,并通过2-3个元素进行分解重组,设计1套系列图标

全栈设计交流公众号

14
Report
|
36
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Be the first to comment
Log in