收稿日期: 2018-07-21基金项目: 广东省教育科学“十二五”规划 2013 年度研究项目( 2013JK230) ; 2014 年度广东省教育研究院教育研究课题( GDJY-2014-B-

b012)

第 26 卷 第 9 期

Vol. 26 No. 9北 京 印 刷 学 院 学 报

Journal of Beijing Institute of Graphic Communication2018 年 9 月

Sep． 2018

手机游戏交互界面的设计与实现研究

高广宇( 广东科贸职业学院，广州 511431)

摘 要: 在手机互联网发展势头良好的背景下，手机游戏交互设计是游戏与用户交流的语言，在进行界面设计中

合理运用交互技术，注重用户的情感性需求，可以为用户提供非凡的体验，进而促进我国手机游戏行业健康快速

发展。本文对手机游戏交互进行了简要概述，着重分析了手机游戏交互界面设计原则和方向，最后以手游《神雕

侠侣》为例，探讨手机游戏交互界面设计的实现方式。关键词: 手机游戏; 交互界面; 用户体验; 设计

中图分类号: TN929. 53 文献标志码: A 文章编号: 1004-8626( 2018) 09-0032-04

Ｒesearch on the Design and Implementation of Mobile Game InterfaceGAO Guangyu

( Guangdong Vocational College of Science and Trade，Guangzhou 511431，China)

Abstract: The rapid development of digital media technology，4G Internet increasingly popular，themomentum of good development of mobile Internet，mobile games for its convenience and entertainmenthas accumulated a large audience． Game design is the language of communication between game anduser． Game interaction design occupies an important position，and excellent interactive design providesusers with extraordinary experience． However，in the actual design，the interaction design of mobilegames in our country is in its infancy，design theory and method To be perfect． Based on the abovebackground，this paper gives a brief overview of mobile game interaction，and focuses on the principlesand direction of mobile game interface design． Finally，the author takes“The Ｒeturn of the CondorHeroes” as an example to discuss how to realize mobile game interface design． With a view totheoretical breakthrough or practical use of experience to provide reference．Key words: mobile games; interactive interface; design; achieve

随着 4G 数字时代的到来，手机游戏发展面临

机遇与挑战并存在的局面，能否成功战胜挑战抓住

这一发展机遇，将直接影响手机游戏开发商的生存

状态。而在这一过程中交互设计占据重要地位，手

机游戏开发商应在保证可用性的同时，更加关注用

户的互动式体验，满足其个性化审美需求，并带来

酣畅淋漓的游戏满足感［1］。因此在具体开发过程

中，开发商必须遵循相应的设计原则，并明确设计

方向，进而突破现有技术与方法的局限，提升手机

游戏的整体竞争力。

一、手机游戏交互概述

( 一) 手机游戏交互特点

当前，市场上手机类型繁多，受手机设备参数

各异的影响，手机有机交互的特点也呈现差异化，

主要表现为如下三个方面:①在以按键为主要输出

的手机设备中，由于手机按键具有集中分布且按键

较小的特点，在设计上会存在明显的束缚，如果交

DOI:10.19461/j.cnki.1004-8626.2018.09.009

互设计过于复杂，较小的屏幕和键盘会限制游戏效

果的有效发挥;②在以触屏为主要输出的手机设备

中，出现了虚拟键盘，使得屏幕和键盘均达到了最

大化，降低了手机设备本身对游戏交互的束缚。同

时，随着多点触技术的发展，手机游戏交互的内容

得以扩充，为用户提供更加便捷和新奇的游戏体

验;③在以摄像头为主要输出的手机设备中，实现

了用户体验的创新，比如在有的手机游戏中，用户

可随意拍摄照片，将其设置为游戏的场景，或者根

据用户的照片游戏还可生成不同的关卡，给用户以

全新的游戏体验［2］。( 二) 手机游戏界面交互分析

1．要素解构

手机游戏是一个完整的游戏系统，交互界面主

要由硬件和软件组成，用户可在物理交互界面中输

入相关信息，实现与游戏的互动，并在软件交互界

面的作用下实现游戏的体验与反馈。基于此，物理

交互界面与软件界面是手机游戏交互的主要构成

要素，为用户游戏体验提供通道，并且二者在游戏

交互中保持一致和同步，共同为用户提供娱乐

体验。2．界面分析

手机游戏交互界面主要包括如下两种: 第一，

物理交互界面，受手机设备类型和性能的影响，手

机游戏的物理交互界面也存在较大的差异性。其

中键盘手机的游戏交互方式主要借鉴了掌上游戏

机的操作形式，手指操作按键对游戏进行控制，具

体操作缺乏直观性，并且手机按键设计多倾向于手

机本身功能，键盘面积小，功能区分不清晰，降低了

用户游戏操作的效率。而触屏手机给用户带来了

更为直观的交互体验，更大的屏幕提升了用户的视

觉体验，且重力感应器的应用创新了手机游戏的操

作方式( 见图 1) ，比如在 iPhone 手机中，用户可改

变手机的倾斜角度和运动速度，以此来控制游戏中

角色行为，也可通过肢体语言实现信息输入，增加

了游戏体验的真实感; 第二，软件交互界面，用户在

游戏过程中主要通过视觉、触觉和听觉与游戏产生

交互行为，基于此，手机游戏软件交互界面主要分

为如下三种:①视觉交互界面，在具体设计中受屏

幕分辨率和大小的影响，界面设计以简洁为主，尽

量不要使用过于艳丽的颜色，并以色调对比决定色

彩设计。在具体设计时以游戏主色调为基础，多选

择黄色、绿色等不易引起用户视觉疲劳的颜色，并

降低颜色的饱和度。此外，在页面布局中，页面元

素以精且少为主，可隐藏大部分元素，用户使用时

展开即可;②触觉交互界面，在游戏交互界面设计

时，应充分利用窗口和按钮等元素模拟动态效果，

为用户提供一种完整的娱乐体验，并与视觉交互交

相辉映，提升了交互体验的仿真性; ③听觉交互界

面，声音的反馈能够引起用户的注意，达到模仿触

感的作用，人脑在听到声音时会将其与触感相联

系，因此在游戏中融入声音交互会提高用户体验的

真实性。因此，游戏音效在游戏中发挥了重要的作

用，为用户提供了更为深层次的体验，使得自身的

情绪、行动和欲望发生明显的变化。

图 1 参数各异的智能手机设备

二、手机游戏交互界面设计原则

( 一) 以玩家为中心

游戏日渐成为人们娱乐消遣的主体，并且随着

技术发展和游戏种类的增多，用户的需求也呈现多

样化状态，且更加注重自身的娱乐体验。对此，在

进行手机游戏交互界面设计时，必须坚持“以玩家

为中心”的原则，在设计之前锁定目标用户，并调

查其年龄、性别、生活方式、兴趣爱好和收入等信

息，以此为依据分析不同用户的个性化需求，有针

对性地设计出不同视觉风格的游戏交互界面，刺激

玩家继续游戏的欲望，让玩家产生舒适、愉悦、自由

的感觉［3］。( 二) 交互模式的自由性

自由性原则主要体现在游戏指导方面，在界面

设计时必须保证能够为玩家提供准确且简洁的指

导，帮助玩家理解游戏，并顺畅地开展游戏［4］。因

33第 9 期 高广宇: 手机游戏交互界面的设计与实现研究

此在具体设计中应通过技术创新，摆脱现有大多数

游戏单纯依靠视觉和听觉营造氛围的局限，而是为

玩家营造更为真实的游戏环境，进而触动玩家的多

感官体验，提升玩家的娱乐体验。( 三) 易用性

在工作学习之余，人们总会利用一些闲散时间

娱乐，既要满足精神上的愉悦，也要生理上的放松，

而简单易玩的游戏无疑是最好的选择［5］。在手机

游戏交互界面设计中，必须保证玩家很容易理解游

戏玩法，并对其产生浓厚的兴趣，使得用户在游戏

中真正体会人机交互的愉悦感。因此在设计中，设

计人员应保证界面直观易用，以硬件界面为例，设

计人员需要通过触摸屏幕输入或者按键输入等方

式引导玩家快速进入游戏，并掌握游戏角色的

特点。

三、手机游戏交互界面设计的方向

( 一) 多通道交互设计

多通道交互设计是手机游戏交互界面设计的

重要发展方向，在日后设计中应开发多种反馈渠

道，降低单纯依靠视觉获取信息的负担，使得交互

过程更加自然和流畅。在交互过程中，用户不再单

纯通过手指进行操作，而是可通过肢体语言、表情

或者语音等多种形式实现交互，将用户从完全依赖

实体界面的局限中解放出来，不仅增加了游戏的娱

乐性，还适当地拓宽了手机游戏的受众面。( 二) 三维交互界面

三维交互界面是手机游戏交互界面发展的重

要方向，在页面设计时综合运用虚拟现实技术，将

视觉、听觉和触觉等多感官融入到特定的环境之

中，保证用户与虚拟界面中的对象进行自然交互，

进而产生更为逼真的交互体验［6］。在三维交互界

面中，用户不用被动地去适应游戏界面，而是交互

界面直接呈现更为直观且真实的世界，让游戏的学

习成本更低，更加贴近自然操控，增加了游戏的可

玩性和易学性［7］。( 三) 情感化设计

人与人、人与界面之间情感交流的重要性日渐

明显，情感化设计也成为手机游戏交互界面设计的

主要发展方向。在游戏设计时，设计人员应突破营

造虚拟世界的局限，而是以真实世界为游戏的基

础，为人们提供结交好友的机会，也可以通过自媒

体与友人分享游戏的快感，使得人们通过与游戏的

交互感受人间的情感，让手机游戏不仅是一种个人

娱乐，更加是一种有效的情感交流模式。

四、手机游戏交互界面设计的实现方式———以手游《神雕侠侣》为例

( 一) 以用户为主的界面设计

1．统一主题

在手机游戏交互界面设计中，统一的主题能够

加深用户的体验，在统一的主题作用下，游戏中涉

及的所有元素均围绕同一目标发挥作用，并起到相

辅相成的效果，使得各元素在相互影响中增强本身

的功能［8］。从本质上而言，主题是支撑游戏的灵

魂，是连接所有元素的原则，进而为用户传递游戏

设计的核心体验。以《神雕侠侣》为例( 见图 2) ，关于英雄的细节叠加并不能构成主题，而该类游戏

的主题应该设定为在特定的环境中如何成为英雄，

并且以诸多武侠元素烘托主题，通过人们熟悉的武

侠人物彰显主题，在这样的主题下玩家可暂时摒弃

社会规则，而以游戏的规则为主，满足人们具有英

雄幻想或怀旧情怀的心理需求。

图 2 手游《神雕侠侣》

2．界面统一

游戏交互界面体验流程设计应以用户的娱乐

体验为基础，以此满足人机交互整个过程的需求。而游戏主题则是娱乐体验设计的核心，其强调了游

戏的统一性，并且这里所说的统一性更加倾向于合

理搭配。在界面设计中，设计人员必须围绕游戏主

题，合理运用设计元素，以此为核心达到界面的统

一。在《神雕侠侣》中界面统一主要包括两个方

面: 一是视觉统一，在游戏界面中，视觉元素主要包

括图形、文字和色彩等，在围绕游戏主题的前提下，

通过合理搭配这些元素才能为用户提供满足其心

理需求的娱乐体验界面，《神雕侠侣》多以东方武

侠元素中的山、树和建筑呈现武侠氛围，并辅以清

新明了的色调，为玩家营造了良好的视觉体验; 二

是交互行为的统一，用户通过界面的文字、图形或

43 北 京 印 刷 学 院 学 报 2018 年

色彩接收到游戏传达的信息，使得用户在游戏过程

中加深对主题的理解，实现与游戏界面更深层次的

互动。3．字体、布局、图标造型与色彩

字体、布局、图标造型与色彩是游戏交互界面

设计的重要元素，其中字体具有准确性强的特点，

减少了游戏界面信息传递发生歧义的概率［9］，比

如在《神雕侠侣》游戏中字体主要采取黑体和隶书

两种，前者有助于用户识别，而后者更具古典意味，

符合游戏的东方武侠主题，并且字体颜色与游戏整

体协调，采用蓝白配色，体现东方文化的气息; 同时

布局的合理性对游戏界面设计发挥着重要的作用，

在布局中在归纳游戏传递信息的同时，结合视觉的

审美规律，提升了整个页面的美感与易操作性。在

《神雕侠侣》中，设计人员将登录页面服务器边框

设计为打开的书卷，并选择蓝色，充分展示了怀旧

情怀; 水晶按钮在用户操作后会显示青蓝色光，可

以避免用户重复操作。在排版方面，书卷的边框分

为两部分，其中一部分为大区，另一部分为小区，如

果用户选择大区，小区也会随之调换，将界面进行

整齐分割，保证页面简洁的同时，便于用户操作; 另

外对于图标造型和色彩，《神雕侠侣》中采取可爱

武侠的风格( 见图 3) ，图标造型多选择卡通形象，

将复杂形象简化为简单轮廓，提升了图标的识别

性，并且图标的颜色以明亮且纯度较高色彩为主，

但是彩色不超过两种，遵循量少而精的原则，避免

造成界面杂乱［10］。

图 3 可爱的武侠风格

4．注重交互的协调性

为了保证交互方式充分表达游戏内容，在交互

方式设计时也必须充分围绕游戏主题，当游戏的设

计文案产生后，设计人员需研究目标用户信息，确

定交互页面的整体框架，并对其中的信息层级关系

进行调整。随着触屏手机的发展，交互方式中新增

了视觉与手势分析的内容，在设计中应注重动画、

色彩和图形的结合效果，以此达到保证交互的协调

性，吸引众多潜在用户。5．简约的界面操作

在交互界面设计时，必须做到将复杂的信息简

单呈现给用户，以此降低用户在游戏过程中的负

担。因此设计人员应将游戏进行分类，利用简洁的

语言表达游戏主题，并尽量避免负面或干扰信息的

存在。比如在《神雕侠侣》中，设计人员隐藏了一

些功能页面，并设置任务隐藏按钮( 见图 4) ，用户

可根据自身需求在此处查找隐藏的内容，这样一来

用户可在狭小的空间中更好地体验游戏，也提升了

用户的整体娱乐体验。

图 4 简约的操作界面

( 二) 交互信息图稿

《神雕侠侣》是利用武侠小说改编的手机游

戏，其界面背景多以矗立在山头的建筑和高耸的大

树为主，给用户以东方武侠的整体体验。这样的界

面设计既简洁明了还能营造浓郁的武侠氛围。在

这款游戏设计过程中，设计人员的线稿发挥了重要

的作用，在设计初期，线稿将抽象的想法转化为具

体的信息，在铅笔绘制草图原型的刺激下，设计人

员可以发现其中的不足之处，并对游戏的整体效果

进行分析，从而避免出现局限于某个武侠元素的现

象，在保证游戏功能和娱乐性的同时，准确地体现

了东方武侠的特色。《神雕侠侣》的受众设定为 80后人群，在设计过程中，工作人员对目标人群进行

调研与分析，进行策划方案的制定，并在策划方案

中对所有元素进行细致说明，保证了游戏的全面性

和准确性。

五、结语

综上所述，当前智能手机普及且交互技术日渐

成熟，为手机游戏的设计与发展奠定了坚实的基

础。基于此，手机游戏在进行界面设计中应合理运

( 下转第 53 页)

53第 9 期 高广宇: 手机游戏交互界面的设计与实现研究

的资源库，相较于改变形态所花费的成本更少。通

过多种色彩组合所创造的效果价值更高，一方面提

升了生产效率与产品销售量，另一方面减少了资源

浪费现象［6］。色彩在现代平面广告设计中的应用

有利于丰富日常生活以及情感世界，并且将生活和

色彩紧密联系到一起，由色彩所呈现出来的视觉效

应，调动人们的情感，以色彩描述人的思想，使生活

更为丰富多彩。

四、结语

综上所述，色彩中蕴藏了丰富的内涵，体现在

现代平面广告设计中，能够传递出视觉效应，引发

人们联想，通过色彩的搭配表达出产品的设计理

念。色彩属于意象语言形式。心理学领域线条更

容易引发视觉兴奋，转变情绪，物象意象描绘以及

情感表达所产生的视觉效应共同组成了平面广告

设计视觉符号，以此推动我国现代平面广告设计行

业发展。

参考文献:［1］ 何明．眼动理论在平面广告设计中的应用展望［J］．艺术科

技，2015( 7) : 22-22．

［2］ 李婧一．多维度视觉传达设计在商业广告中的表现理念［J］．

甘肃高师学报，2014( 6) : 67-69．

［3］ 李弘．创意广告设计占领视觉阵地———浅谈报纸广告制作的

创新［J］．采写编，2012( 6) : 62-63．

［4］ 周卉．动态广告设计中数字媒体艺术的应用［J］．传媒，2015

( 3) : 55-56．

［5］ 邓灵． 浅析广告设计中的视觉传达策略［J］． 雪莲，2015

( 32) : 33．

［6］ 吴灿．湖湘民间美术在现代平面广告设计中的应用研究［J］．

艺术科技，2017( 12) : 50-51．

( 责任编辑: 王和平)

櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒櫒( 上接第 35 页)

用交互技术，注重用户的情感性需求，并将现实生

活中的习惯与经验引入游戏中，给用户带来更加真

实的游戏体验，从而提高我国手机游戏原创水平，

促进手机游戏文化产业的健康发展。

参考文献:［1］ 高宇航，袁世雄．手机游戏的界面交互设计特点分析［J］．黑

龙江科学，2014，5( 4) : 253-253．

［2］ 罗希．手机游戏的交互界面设计应用研究［D］．长沙: 湖南师

范大学，2014．

［3］ 侯莹．基于用户体验的手机界面视觉表现分析［J］．包装工

程，2016，37( 10) : 151-154．

［4］ 邓舒博．手机游戏美术与人机界面的交互设计［J］．技术与市

场，2015，22( 3) : 59-60．

［5］ 谢玮．手机游戏 FruitNinja 的交互体验［J］．包装工程，2012，33

( 20) : 75-78．

［6］ 周立仁．关于三维手机游戏在手机游戏行业所起的作用［J］．

科技展望，2016，26( 13) : 297．

［7］ 姜檀，毛霄萌．三维交互在移动端游戏中的应用分析研究

［J］．包装工程，2016，37( 8) : 77-81．

［8］ 余莹莹，张辉，陈鹏，等．手机游戏人机交互界面设计研究

［J］．大众文艺，2014( 3) : 94-95．

［9］ 孙梦琳．手机游戏的 UI 在手持设备中的交互研究———以游

戏《荒古》界面设计为例［D］．哈尔滨: 哈尔滨师范大学，2016．

［10］ 蒋鑫．色彩在手机游戏界面中的应用策略研究［J］．包装工

程，2014，35( 24) : 115-118．

( 责任编辑: 周宇)

35第 9 期 高 源，张玉霞: 论色彩在现代平面广告设计中所传达的视觉效应