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

本篇是设计师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%，点缀颜色多为互补色强对比。
 

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

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

■ 弹窗方式对比

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

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

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

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

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

浮层：

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

二）非模态弹框

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

这是几种主要的弹框样式和用法，

那如何建立一套ui的弹框体系？
或者如何对现有ui的弹框体系进行优化？
其实弹框体系的建立和优化的原则可以用一句话概括：
能在界面中展示就不用弹框，
能用非模态弹框的就不要用模态弹框。