以《高考1977》手游为例的扁平化设计研究

章京京 韩玉婷

摘要：分析扁平化设计流行原因及应用领域，结合手游特点研究其在手游中的优势及运用程度，并以自主开发的《高考1977》手游为例，阐述扁平化设计在手游领域的应用及其内核。

关键词：扁平化设计 手游 按钮设计

引言

扁平化是一种“精简式”理念，组织管理如此，界面设计亦是如此。删繁就简，简约却直指要害。当下扁平化设计的再度流行，可以说是设计学的—场“返璞归真”。扁平化设计似乎有包豪斯主义的影子，简洁而实用，然而扁平化设计又有其独特概念：属于二次元，放弃一切能够做出3D效果的装饰元素，所有元素的边界都干净利落，尤其在手机上，按钮和选项的设计尽量更少，使得界面干；争整洁方便使用，可以更直接地将信息和事物的工作方式展示出来，减少认知障碍。扁平化设计的要素简要地可以归为：设计中拒绝特效，界面中简化信息，形式上追求干净，色彩上崇尚层次，排版中力求简约。

一、手游中扁平化设计的一般性分析

（一）扁平化设计的优势

扁平化设计简洁而不简单，正如中国的剪纸艺术，尽管是平面的艺术形式，没有任何三维的效果却传达了丰富多彩的内容，可见平面化的东西不一定是死板的，有时候是设计中的一种特色和独有。扁平化设计的特点和作用可以归纳为：直观的界面展示，明确的交互方式，高效的信息传达，灵活的可移植性。这些是其他设计难以统一和谐的，融合在一起的关键。

目前扁平化设计主要应用在网页设计、UI设计、手机界面设计等领域，在游戏中的运用较少见到。

（二）手游的一般视觉效果及特点

手游是指在手机等各类手持硬件设备上运行的游戏类应用程序。手游有其独特性，体现在以下四个方面：（1）画面风格简单活泼；（2）屏幕显示尺寸较小；（3）操作简单易上手；（4）操作形式多样化。首先，手游的画面风格普遍比较明快亮丽，用色上色彩鲜明活泼，造型设计上卡通可爱，符合手游本身的娱乐特点——休闲简单，比如《割绳子》游戏中角色与场景造型的设计充满轻松活泼的气息。其次，手机屏幕具有屏幕尺寸小的限制，这也就自然而然地限定了游戏的画面尺寸，这对游戏界面的内容设计也有了一定的限制，不同于网络游戏的宏大场面，网络游戏可以添加更多的场景更多的角色以及更多的道具元素等，而手游界面提供的版面有限，這也就对信息量进行了限制。然后，手游操作简单，用户打开游戏，简单熟悉过后便可上手操作，这对于用户来说，减少了学习成本，符合手游最初的市场定位。最后，手游具有一个很重要的特点，它具有网游目前所没有的触屏点击功能，这对于游戏本身来说是一种玩法的创新，不再仅限于键盘鼠标的控制，用手指在手机屏幕上进行常见的点击、滑动、切，拖拉等手法便可轻松进行游戏项目，增加了更多的用户体验。

（三）扁平化设计在手游中的优势及应用程度

扁平化设计本身具有直观的界面展示，明确的交互方式，高效的信息传达，灵活的可移植性四个特点，这与手游界面设计的需求是如此的相贴切。手游界面有其自身的特点和缺陷，适当地加入扁平化设计元素会更好地弥补手游界面设计存在的缺憾，另外，扁平化设计有它自身的美学感，恰当地融入手游界面的设计当中，相信会给用户一份新的体验。以《Smart clear》为例，游戏采用了扁平化的设计风格，简洁清爽，符合未来的美学风格。《Smart Clear》游戏界面设计的初衷也许只是为符合游戏本身特性，并没有明确地提出在其界面设计中推行扁平化设计事实上，对于这类走极简风的小型游戏来说，扁平化是一个最佳选择，可以彰显独特的美术风格，从画面和色彩上就先声夺人。且笔者相信，扁平化设计终会以其自身的特色融入于手游界面设计当中，并愿为之进行作品的实践创作与尝试。

二、扁平化设计元素融入《高考1977》手游界面设计的过程

（一）高考《1977》手游的构思及创作

高考《1977》是一款讲述进行升学考试的答题游戏，游戏主角是一只大熊猫，选择熊猫这一形象作为角色，赋予了游戏玩家作为进行“升学考试的考生”的“国宝”形象，每一位高考的学生都是国宝。游戏玩家通过选择想要报考的大学，进行相应的答题游戏，每一所大学都有各自的教学特色及答题难度，例：南气大学，特色附加题为气象知识。玩家需要自身一定的知识储备并且答对一定的题量才能通过相应环节的游戏，最后答题准确率通过的情况下获得游戏的胜利，进入理想的“大学”并获得相应的分值和荣誉。

（二）《高考1977》手游特点与扁平面化设计特点的相似性

《高考1977》作为一款手游，在该游戏中选择以扁平化设计理念作为元素融入其游戏界面风格当中，经过一定的深思熟路。《高考1977》手游具有与扁平面化设计相似的特点，具体体现在以下：（1）移动端更适合扁平化：《高考1977》作为一款手游，具有显示屏幕小的特点，扁平化设计实用且灵活性强，能够较好地弥补手机界面显示设计的不足。（2）高效性：《高考1977》手游作为一款益智答题游戏，在答题过程中要集中注意力进行限时答题，这就要求在答题界面的设计中既要维持界面的美观又要避免不必要的视觉干扰，这就需要扁平化设计中明确的交互方式和高效的信息传达这两大特点。（3）色彩的选择：《高考1977》游戏，界面设计风格采用活泼可爱的卡通风格，扁平化设计用色大胆鲜艳，6到8种活泼颜色的色彩排列组合富有童趣性，另外，扁平化色彩设计具有层级展现的优势，适合游戏自身定位的同时促进了用户交互体验。（4）排版设计：游戏的视觉效果很重要，同样游戏的版面排列也很重要，清晰美观的功能界面帮助用户更好地明确游戏目的，扁平化设计注重排版，追求功能本身的使用。

（三）扁平化设计的过程

在扁平化设计的过程中，主要有图纸和位图两种方式。图纸是指在稿纸上作画；位图主要有运用Photo Shop等绘图软件进行设计展现。设计的过程中少不了概念设计的阶段，概念设计主要是指掌握游戏内容后进行相应的原画构思。概念设计过后便是进行实际手绘原画设计，在图纸原画阶段，需要充分查阅资料，浏览扁平化设计优秀作品学习扁平化设计知识，融合扁平化设计的特点进行重点设计。在原画草图调整完善结束后，进行位图设计，位图设计过程中继续学习相应知识，辅之各种技术运用，逐渐弥补图纸设计阶段尚且不足之处，过程中再经过反复修改，直到成稿。

1.手游《高考1977》中扁平化设计的元素——按钮的交互设计

手游交互设计中最核心的是界面设计，游戏界面包括主界面和子界面，任何界面都是直面玩家，给予玩家直观的视觉感受，我们很多时候注重游戏的主要界面，忽视了游戏的分界面，分界面包括选项界面、暂停界面、提示界面等。而这些界面中无一例外不用到按钮这个界面元素。按钮是一个游戏必备的元素，并且贯穿游戏的始终，按钮的设计不仅要贴合视觉需求，更要设计出合理的人机交互模式，包括用户习惯的操作方式，界面整体的统一和功能模块的区分等。可见按钮的设计也需遵循一切为用户着想的设计理念。

2.手游中按钮交互设计的状况

在一份触屏手游界面交互设计体验问卷调查中，对于按钮大小与摆放位置是否合适的调查中，只有27.8%的人觉得大小适中，摆放合适，67%的人觉得很一般，有5.1%的人觉得不合适。36.7%的用户表示游戏登录界面设计对玩游戏的影响不大，73.3%的人觉得有影响甚至很大。操作失误的原因中，由于界面设计不合理失误的占到9.1%，交互过程中手指和按钮大小不匹配的占到62.7%。有三分之一的人因为交互设计体验不合理放弃一款游戏。手游由于其屏幕小的弱点，界面设计中存在一些问题，界面设计中按钮大小及摆放不够合理，交互过程中手指与按钮大小不匹配，使某些操作使用不便，手指与按键大小的匹配程度是游戏是否顺畅的一个重要因素。另外，按钮的不合理放置，耗费不必要的流量。鉴于以上，按钮看似一个小小的符号标志，实际传达着诸多功能，便于玩家体验更舒适顺心的交互体验，按钮的交互设计仍需要更加用心的完善。

3.结合扁平化设计进行按钮交互设计

《高考1977》作为一款手游，适用在手机移动平台，具有手游界面空间设计局限，手机界面小，手游界面内容也就被限制了，而扁平化設计中，注重排版带来的效果恰好可以完善这一不足。游戏中按钮元素及按钮页面的设计制作常受忽视，对按钮的摆放进行简单的放置，没有很好考虑到按钮的实际交互功能。游戏界面中，按钮作为游戏顺接每一关的纽带，起着不可忽视的作用，优秀的人机交互设计，能够让玩家在整个游戏过程中易于操作并且保持沉浸感。鉴于以上手游中按钮交互设计的状况，结合扁平化设计的几项优势，对手游中按钮界面的设计进行更好的功能方面的完善。从以下三点切入进行按钮元素的交互设计：

（1）排版设计：扁平化设计要求元素更简单，排版就显得尤为重要了，优秀的排版设计不仅使视觉舒适，而且在内容上能更优地展示信息。按钮的设计要考虑到手指的宽度，设计多大的范围来感应手指的触碰，按钮的大小设计是否影响游戏界面的美观。诸多小游戏中都有游戏说明的页面，该页面有诸多按钮，需要点击按钮来进行一项一项的阅读，不仅浪费了玩家时间，也增加了一些不必要的流量（以支付流量游戏为例），若是将这一页面结合扁平化设计进行直观的信息展示处理，合理利用界面设计空间，将每个按钮及其内容设计成扁平化的风格进行排版设计。正如扁平化设计的特征：尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接地将信息和事物的工作方式展示出来，减少认知障碍的产生。

（2）色彩设计：色彩作为扁平化设计中一个不可或缺的设计风格，能够更好地体现在按钮元素的设计上。扁平化设计色彩用色大胆，习惯采用多种不同的纯色进行信息的层级管理，游戏说明页面中按钮的大小不大符合人机交互体验也不够引起用户的注意，用户需要逐一点开按钮方能浏览相应信息。扁平化设计注重颜色设计，用颜色来鼓励用户交互，鼓励用户对按钮所包含的信息进行探索了解，体现视觉效果的同时专注于功能本身。扁平化设计色彩注重纯色，注重色彩的视觉感受，手游中，游戏画面的设计满足玩家对于游戏的特性视觉需求，在按钮及部分二级界面设计中添加扁平化设计元素，相信也会给与用户新的视觉享受。

（3）移动端需要更好的可移植性：《高考1977》作为一款手游，受移动端平台界面大小设计的限制，手游画面内容摆放有限，特别是游戏按钮的设计。扁平化设计具有良好的可移植性，按钮作为游戏中的指示符号，只要调节元素的外框大小即可，不大影响整体美观及显示。根据扁平化设计的特性，取长补短，更好地为手游界面按钮功能的设计服务。

三、扁平化设计的讨论

扁平化设计是针对当前过度装饰设计强有力的回击，扁平化设计带着它特有的视觉语言向我们展示了强大一面：直接、简练、清晰、高效的模式。扁平化设计也有不受待见的时候，反对者认为扁平化过于平面，过于冰冷，扁平化不适用于每一个用户，太费学习成本。笔者认为，无论哪一种设计都有其利弊，扁平化设计有值得运用借鉴的地方，毕竟创造了一种新的理念，但也有需要完善的地方。当前有人提出“准扁平化”设计的方案，仔细观察不难发现，除了典型的扁平化设计作品外，百度搜索首页、淘宝、聚美优品等网站的设计无不运用了当前流行的扁平化元素，并且让人眼前一亮。好的设计不应当局限于某种设计风格，而需要更注重可用性、有用性。