消除游戏美术设计的这些套路,你都知道吗?

作者:Cherry ZEN ART 游戏美术赏析 2020-06-15
本篇是设计师Cherry通过积累数年的消除游戏设计经验,对比市面上多款消除游戏进行研究,在交互及色彩搭配两方面进行分析,相信文中满满的专业干货能给大家带来更多新的思路。



■ 消除类产品交互区域对比

图1《开心消消乐》   图2 《海滨消消乐》   图3《松松总动员》

king:图4《宾果消消乐》 柠檬微趣: 图5《飞屋消消消》  图6《Dream BLast-h》

图7《hay day pop》  图8《toon blast》  图9 《松松总动员》

腾讯图10《疯狂动物城》   playrix:图11《妙趣动物园》   图12《梦幻花园》  图13《我的小家》

通过以上游戏截图,可以看出大部分游戏中开始面板上的“ 开始按钮”保持在开始面板下部 ,单手可操作的位置,方便玩家操作。
大部分“开始按钮”保持在易于点击的区域内,往往是因为他们能让用户快速开始游戏。
一个较大的触摸区域,在常规操作下十分好用。
通过分析用户的操作习惯可以划分出“难易区域”。

下图呈现的是左右手的操作区域难度划分,绿色为最易红色为最难。可以看出更易操作的区域位于屏幕的中下方。


■ 按钮颜色对比 (看小图找大比例,看大图找小细节)

《开心消消乐》



游戏内按钮使用了绿色(70%)、蓝色(25%)、橙色(5%),关闭按钮使用白色。

《海滨消消乐》



游戏内按钮使用了绿色(70%)、蓝色(25%)、橙色(5%),关闭按钮根据面板颜色变换。

《糖果缤纷乐 》



游戏内按钮使用了绿色(80%)、天蓝色(8%)、深蓝(5%)粉色(5%)紫色(2%),关闭按钮粉色。

《Hay Day Pop 》



游戏内按钮使用了绿色(80%)、橙色(18%),关闭按钮红色。

《松松总动员》



游戏内按钮使用了绿色(70%)、蓝色(20%),橙色紫色(10%),关闭按钮蓝色。

以上多种色调下游戏被使用的最多的是绿色的按钮,并且绿色按钮占到了70-80%的比例。开始按钮的颜色统一用的都是绿色。

PS: 发现用户多倾向于放松解压和谐、安全的色彩。

黄色:从心理学上讲,黄色是色谱中最令人愉悦的颜色;
绿色:令人放松身心,有助于缓解压力、紧张和焦虑,提供一种新生、内敛、和谐的感觉;
蓝色:静心安神、凉意、促生直觉;
紫色:鼓舞人心、平静心灵,舒缓神经‘提供灵性的感觉,激发创造力;
红色:焕发热情,激发活力,可以提高血压、呼吸、心跳和脉搏,激发斗志和信心。通过恐惧和焦虑来提供一种警戒意识。

■ 整体颜色对比(看小图,颜色冷暖黄金配比)


《疯狂动物城》用的蓝色为主色65%,浅棕色为补色20%,其余颜色做点缀15%


《梦幻家园》用的浅棕咖做主色调40%,用了临近色做补色40%,其余颜色作为点缀20%


《hay day pop》用的蓝色白相间为主色85%,其余颜色做点缀15%


《松松总动员》用蓝白相间为主色85%,其余颜色做点缀15%,点缀颜色多为互补色强对比。


借鉴蒙德里安《油画第一号》,运用色彩的黄金比例。

运用黄金分割和等比数列将画面或图形按照一定的比例进行分割、排列,创造富有节奏与韵律的秩序与美感。
打造UI体系的颜色黄金比例,找到视觉平衡。

■ 弹窗方式对比

弹窗一般分为模态弹窗和非模态弹窗(模态弹框和非模态弹框最大的区别就是是否强制用户交互,模态弹框会打断用户的当前操作流程,用户不在弹框上操作的话,其余功能都使用不了)

一)常见的模态弹窗:对话框、动作栏、浮层

优点:可以很好的获取用户的视觉焦点
缺点:打断了用户的当前操作流程

对话框:
对话框一般用于用户进行一项很重要或者有风险的操作,这时会弹出一个对话框给用户提示信息,用户根据提示来进行判断。一般出现在屏幕的中间位置,会对界面的主要内容造成遮挡。


动作栏:
动作栏在我看来可以看成是对话框的一个加强版,因为无论是Alert还是Dialog一般都只有两个按钮。
而动作栏可以提供多个功能按钮,而且展示的样式比较多变。


浮层:

是用户点击控件或者界面某一区域浮出的半透明的临时视图。浮层的样式跟动作栏很相似,都可以向用户展示多个功能选项。但是浮层可以出现屏幕中的任何位置,能够给用户更具有指向性的提示。


二)非模态弹框

与模态弹框相比,非模态弹框最大的区别是不强制用户交互,也不会弹出半透明背景层,非模态弹框停留一段时间后会自己消失。
所以相对于模态弹框来说,非模态弹框属于轻量型反馈,不会对用户造成太大的干扰。


这是几种主要的弹框样式和用法,
那如何建立一套ui的弹框体系?
或者如何对现有ui的弹框体系进行优化?
其实弹框体系的建立和优化的原则可以用一句话概括:
能在界面中展示就不用弹框,
能用非模态弹框的就不要用模态弹框。



作者:Cherry  
来源:ZEN ART 游戏美术赏析
地址:https://mp.weixin.qq.com/s/tAuCqqzbAQG7mw419PlQFQ

最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多