本篇是设计师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的弹框体系进行优化?
其实弹框体系的建立和优化的原则可以用一句话概括:
能在界面中展示就不用弹框,
能用非模态弹框的就不要用模态弹框。

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

  1. 游戏美术设计干货分享:制造“冲突”,提高画面张力

    游戏美术设计干货分享:制造"冲突",提高画面张力 http://www.gameres.com/475470.html 发布者: 小篱 | 发布时间: 2015-12-9 14:1 ...

  2. 什么是游戏美术设计?3D游戏建模常用的软件有哪些

    网络游戏设计师.游戏美术设计师,这些听起来很新鲜,感觉起来还有些"不务正业"的职业. 什么是游戏美术设计 游戏美术设计师是指负责网络游戏页面设计制作和网页的美术创意设计等人员. 常 ...

  3. 转行游戏公司却无从下手,游戏美术设计这个岗位再不了解就晚了!

    网络游戏设计师.游戏美术设计师,这些听起来很新鲜,感觉起来还有些"不务正业"的职业. 什么是游戏美术设计 游戏美术设计师是指负责网络游戏页面设计制作和网页的美术创意设计等人员. 常 ...

  4. 游戏美术设计从业者过了30岁后都是如何发展的?

    中年危机曾经是40岁的专利,但在普遍年轻的游戏行业,无论是猎头.HR还是从业者似乎都达成了共识,35岁很可能就意味着职业上升的停滞. 游戏产业的爆发与增长没有几年.在黄金岁月中,没有人会感受到中年危机 ...

  5. 游戏行业从业者过了30岁后都是如何发展的?游戏美术设计呢?

    中年危机曾经是40岁的专利,但在普遍年轻的游戏行业,无论是猎头.HR还是从业者似乎都达成了共识,35岁很可能就意味着职业上升的停滞. 游戏产业的爆发与增长没有几年.在黄金岁月中,没有人会感受到中年危机 ...

  6. 游戏美术设计之整体世界的画法-张聪-专题视频课程

    游戏美术设计之整体世界的画法-3032人已学习 课程介绍         游戏中各个物品的配合画法也是十分重要的,所以我们通过4个课时给大家详细的讲解下! 课程收益     更多人了解游戏换面各个物品 ...

  7. 游戏美术设计从零学起难吗?要多久能学会?

    近几年游戏市场一直保持火热的态势,目前已成为游戏3D美术的主流技术,广泛运用在游戏.影视,动画,VR,3D打印等领域.预计5-10年还将延续这一现象,但是人才紧缺的现象也随之越发明显. 游戏美术设计包 ...

  8. 从概设流程、审美、设计思路几个方面,漫谈游戏美术设计的思维方式

    首发腾讯游戏学院<真经阁>栏目 讲师介绍 Leona 腾讯互娱 北极光工作室群 游戏美术2D设计 导语 本文主要从项目中的概设流程.审美.设计思路这几个方面,漫谈设计时的思维方式. 一.项 ...

  9. 游戏美术设计外包哪家比较好

    主要从项目中的概设流程.审美.设计思路这几个方面,漫谈设计时的思维方式. 一个角色从需求提出到角色诞生可能会经历这些步骤: 大量方向图:在一个角色需求出来后,找这个题材的相关参考:或者连角色方向也没有 ...

最新文章

  1. nginx php-fpm display_errors,php5-fpm的display_errors不能使用nginx
  2. 【渝粤题库】陕西师范大学400005 中国传统文化 作业(专升本)
  3. Platform Builder实践之配置文件
  4. ec200t 拨号_移远EC20 R2.0 AT指令拨号流程
  5. CentOS 下使用yum 命令安装MySQL
  6. idea 配置mysql逆向_idea逆向工程配置
  7. Linux 命令汇总!【珍藏版】
  8. 最大公约数的四种求法(暴力、短除法、辗转相除法递归和非递归)
  9. 【C语言】分类统计字符个数(多行输入字符串)
  10. C++不重起Windows直接更改IP地址
  11. css-图片模糊处理-blur
  12. 黑客消失在互联网时代
  13. YoutubeAPI使用
  14. Scrapy 通用爬虫爬取广西人才网数据记录(上,企业信息)
  15. v-if判断字符串是否相等
  16. 苹果xr如何关机_iPhone X强制关机集合
  17. 免费网站源码分享平台 有哪些好的源码网站
  18. (转)大型网站的负载均衡器、db proxy和db
  19. 【图神经网络】图神经网络(GNN)学习笔记:GNN的应用简介
  20. Shder:Phong高光

热门文章

  1. 下列不是python对文件的写操作方法的是_Python—文件读写操作
  2. java 多个监听_java中监听一个客户端怎么做?监听多个怎么做?
  3. sublime存模板_Sublime Text新建.vue模板并高亮
  4. 数据分析学习03-pandas
  5. 23-爬虫之scrapy框架增量式实时监测数据爬取10
  6. 深度学习总结:cycleGAN原理,实现图片风格切换,可以和之前的伪DL方式对比一下,pytoch实现
  7. 7.3 数字类型及内置方法
  8. C# 获取目录下文件
  9. 笔记:用EXCEL计算收益(复利)
  10. 记录:SqlParamater要点小结