智能手机游戏界面设计

    陈希赞+王珏+吕瑞境

    

    

    摘要：“嘉兴红十”手机游戏是根据嘉兴地区红十用户的审美喜好设计的一款线上纸牌游戏，具有休闲娱乐和社交性，适合用户茶余饭后用于消遣。因此在进行界面设计时，着力于挖掘游戏的乐趣，以吸引用户的兴趣。本次“嘉兴红十”手机游戏UI界面设计将以叙述红十手游的界面设计过程为主，具体介绍这款游戏UI界面设计的要素和各界面的设计思路和创意表达。

    关键词：手机游戏 用户 界面 设计

    引言

    手机游戏已像手机一样成为人们生活中的常用品，从早年流行的“贪吃蛇”到现在具备Augmented Reality（增强现实技术）的“精灵宝可梦”，游戏的更新换代早已发生了翻天覆地的变化。一方面，游戏的可玩性是游戏产品是否能抓住人心的命脉；另一方面，个性的游戏界面也越来越受到用户的推崇和重视。例如极具艺术风格的《纪念碑谷》、美轮美奂的《阴阳师》、简洁生趣的《球球大作战》，以及具有魔幻风格的《魔兽世界》等都是用户喜欢的游戏界面风格。不同的游戏界面可以赋予用户不同的游玩体验，而不同的游戏界面由不同的色彩搭配、多样性的文字、丰富的游戏功能设置以及多風格的背景画面所组成。本文通过“嘉兴红十”UI设计实践，来讨论设计一款手机游戏界面所需涉及的方面和要素。

    一、UI设计的概述

    （一）UI设计的定义

    UI的本意是用户界面，是英文user和interface的缩写，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。例如一款APP，它能够让用户通过界面进行操作，这就实现了人机交互；能够让用户按照指令有序操作就实现了操作逻辑；能够让用户感受到赏心悦目就实现了界面美观。一款好的APP的设计往往离不开这三个要素。

    UI设计从图形图像上的定义分为广义和狭义两种。广义上讲：是由大众所周知的符号概念所表现出来的图形或者图像，其具有快速传导功能解释，匹配人类记忆认识的能力。狭义上讲：是由计算机、手持移动设备、网页标识、数据标识、命令标识、信号标识等通用功能解释所形成的图形或者图像，在各自设备使用中具有普遍的认知度。

    手机游戏UI设计属于UI设计的一部分。手机游戏UI是专门为玩手机游戏的用户而必须设计的UI，用户可以通过游戏UI了解开发商开发的游戏规则，并通过UI提示实现交互操作。

    （二）游戏界面设计的特点

    第一，追求界面一致性。界面是用户游戏过程中最先接触到的内容。统一的视觉能够减轻用户的游戏成本，快速地理解游戏，提高功能操作的准确性。因此，在做界面设计时，首先要确定界面的主色调，随后的分界面可采用相同的色彩基调以保持视觉上的一致性，不致于让用户产生一种混乱的感觉。

    第二，交互行为一致。在设计游戏之处建立交互模型，不同类型的行为触发后其交互行为需要整体一致。比如：所有需要用户确认操作的对话框都至少包含“确认”和“放弃”两个按钮。在功能的设置上，也要严格按照这一特点，比如“嘉兴红十”游戏的进行界面，要设置“出牌”、“不出”两个交互按钮；游戏胜负界面上要设置“返回”、“继续游戏”两个交互按钮。

    第三，操作追求一致。对应的按钮应该触发对应的事件。如果一款游戏无法让玩家做到快速掌握，玩家会失去游戏兴趣，过多的学习成本只会令玩家感到负担。

    第四，界面需要合理的反馈。玩家在游戏的过程中进行的每一步操作都带有一定的目的性，所以界面需要告诉玩家他此刻的状态，比如在相应操作后提示“登录成功”、“成功获得金币”、“您已托管”等。

    二、“嘉兴红十”UI设计创意构思

    （一）构思过程

    “嘉兴红十”是一款针对嘉兴地区红十用户设计的同城纸牌手机游戏，具有休闲性和娱乐性，适合用户在茶余饭后消磨时光。因同城游戏具有很强的地域性，因此在进行UI界面设计前，必先经过充分的市场调研，以了解目标客户群的审美喜好及游戏习惯。纸牌游戏的界面设计旨在体现游戏的轻松、休闲及易玩性，又需在情感体验上能够引起用户的兴趣。因此在游戏界面设计的定位上，要体现纸牌游戏的休闲性，界面风格需活泼、欢乐，激发用户想要游戏的欲望。

    游戏功能设置上，可参考腾讯公司《欢乐斗地主》和同城游公司“红十”等大用户量游戏，包括游戏排行榜、设置、商城等功能，以研究纸牌用户的交互习惯。但具体的游戏风格和玩法等仍需依据嘉兴地区红十用户的审美喜好与游戏规则来设计。

    在设计流程上，可以先考虑登录界面的设计。因为登录界面往往是用户点开游戏软件后看到的第一屏，因此它决定了后续其他页面的主基调，类似于网站首页或书籍封面设计。随后可以根据用户的游览顺序设计分界面，最后设计设置等相关辅助界面。

    （二）游戏界面设计要素

    1.图标

    图标是软件的功能标识，是设计师利用生活中每一样物品的元素加以提炼精简形成的图形符号，能在一定程度上传达给用户该软件的使用功能。

    首先，为突出“嘉兴红十”这款纸牌游戏的特点，故用两张红十扑克牌来作为图标的主要元素，一目了然地让用户获取游戏信息。其次，红十游戏是用户通过红十比赛来获取游戏币作为收益，故在扑克牌的下方添加了金币元素。最后，在扑克牌的上方设计“嘉兴红十”的小标牌，进一步明确游戏主题。图标的底色选用红色，红色更能刺绣用户心理，也符合扑克游戏的氛围。选用桃心点缀背景，使整个图标显得更为生动、诱人。

    2.色彩

    在人们的生活中，获得信息的方式除去听觉和触觉外，最快速最广泛的方式是视觉。某些特定的信息只能经过视觉来得到，比如色感。色感即色彩感知，是用户视觉思维的重要因素之一。合理的色彩运用能够有效地组织、整理信息，从而使用户对屏幕上庞大的信息进行归纳。因此，用户在进行一款游戏的操作时，色彩的引导对用户来说是极其重要的，比如用户排行榜就会用明亮的颜色，因为这样可以刺激用户心里挑战的欲望。

    界面上的色彩运用，一般分为主色、辅助色和点缀色。它们的配比大约是6：3：1。主色是在界面中颜色面积最大的颜色，它可以被用来渲染画面气氛。辅助色是为了画面平衡，衬托主色调而生的。点缀色可以起到“点睛”的作用，使界面能够生动起来。

    “嘉兴红十”游戏界面主要用到蓝色和黄色这两种对比色搭配，以冷色调来反衬明亮的暧色，造成视觉冲击以吸引用户。另—方面，游戏配色通过增加明度来降低饱和度的色彩调和方法，让视觉冲击感不至太强烈，以保证用户视觉上的舒服感。这种鲜亮而不俗气的色彩，搭配扁平化的图形风格，非常符合小清新用户的审美情趣。

    3.按钮

    “嘉兴红十”游戏界面的按钮参考苹果APP图标，一律采用圆角矩形，圆角可以带给人视觉上的舒适感受。图标色彩根据各页面的主色调进行调整，尽量选择和页面主色调一致的颜色，以保持感官的统一。本次界面设计按钮多采用橙色和蓝色，需要强调突出的按钮则采用对比色或补色。

    4.文字

    游戏界面设计中的文字尽量不要用过于夸张和复杂的的字体，以保证较高的辨识度。“嘉兴红十”主要运用到的字体有汉仪综艺体简、方正粗圆、方正准圆简体、华康海报体。另外游戏里的文字内容也要尽量精炼，不以避免凌乱、低俗。

    5.背景

    UI设计中的背景也能起到影响游戏界面整体风格走向的作用。在“嘉兴红十”游戏中，背景选用了一张反映城市街道又做了模糊效果的图片。城市感的背景图可以突出该款手游作为同城游戏的特点，若要突出本土性，还可在后期中考虑加入反映嘉兴特色的元素。把背景图处理成模糊效果，可突出这款游戏的图标和操作区域，主次分明（图2）。

    三、“嘉兴红十”游残界面设计说明

    （一）游戏登录界面设计

    游戏登录界面是用户最先进入的界面，换言之，用户最先感受到这个游戏的好坏就是从登录界面开始。因此，登录界面的设计一定要吸引用户的眼球。登录界面由两部分组成，一是登录起始界面，二是输入账号界面。在游戏背景之上，左边设置拿着双红十扑克的荷官，以点明游戏主题，右边由游戏LOGO和两个登录按钮组成。游戏LOGO是从游戏图标改编而来，形状上由方变圆，上方的欢迎文字可以让用户感受到游戏的热情。下方则是“微信登录”和“账号登录”两个按钮。

    输入账号页面在沿用登录起始界面设计效果的基础上，更改了界面的右半部分。输入框选用了和背景颜色较为相近的蓝色，并设置了账号和密码栏、注册和登录按钮，以及在上方设计注册成功后飘出的小提示。

    考虑到整个游戏的后期运作，特在界面底部预留出系统提示区或广告位，以红色色块标注显示（图3，图4）。

    （二）游戏首页界面设计

    登录成功后，用户进入了游戏首页。首页功能设置可参考大用户量纸牌手游，如腾讯《欢乐斗地主》。首页一般由用户信息区、设置区和工具栏组成，此外还增加了游戏公告栏、赞助商边角广告位等。

    首先界面顶部，左上角是常驻商家的广告位，中间部分是各个游戏用户的动态消息，向下键代表用户可以弹出查看更多动态消息。右上角是一个“设置”按钮，可以进行音效、声音大小的切换等。

    界面中部，是主要区域，左半部用于呈现用户信息。信息区以明朗活泼的颜色为主，因此选用了黄橙色，与背景有所对比，显得较为清晰。用户信息栏显示了用户的昵称、ID（IDentity）号、等级、积分、金币、胜率。右半部分是“立刻开始”、“游戏大厅”、“活动赛事”三个主要按钮。考虑到纸牌游戏中的中老年用户群占到了较高的比例，因此对这三个功能键做了放大处理，字体上也选用了风格化的艺术字体。凸显文字以照顾这一用户群体的视觉感受，并在按钮上设计冲出按钮边框的配套小图标，显得夸张又醒目。

    界面底部由“公告”、“好友”、“排名”、“背包”、“商城”组成工具栏，小图标的设计与选择一定要考虑到风格的一致性，以保证工具栏以一个统一的视觉形象呈现。如有新的公告消息会有红色小标点进行提示，以确保用户不会错过最新的公告信息（图5，图6）。

    （三）游戏进行界面设计

    点击游戏首页“立刻开始”按钮，随即进入游戏进行界面。作为游戏主界面，其在整个游戏中起着至关重要的作用。因此在设计之初，分別对两款大用户量纸牌游戏腾讯公司《欢乐斗地主》和同城游公司《红十》做了前期横向比较研究（图7，图8）。

    经过一番参考和借鉴后发现，游戏进行界面主要由手牌区、出牌区、用户各自阵营区组成。手牌区显示用户本人抽到的纸牌，出牌区是用户进行比赛的主要战场，用户各自阵营区代表不同用户的身份。进入游戏进行界面后，即进入游戏准备状态，用户点击“准备”按钮则游戏开始，点“邀请”按钮可邀请好友进入本房间参加比赛。游戏开始后，用户可根据抽到的手牌情况选择是否亮出红十，随后区域内会提示用户是否拥有红十以及剩余牌量，方便用户组队合作。

    游戏进行时，用户会收到是否出牌和提示出牌的按钮以及出牌倒计时提示，用户选择好要应对的牌后点击“出牌”按钮，则所出纸牌就会在出牌区显示。进行界面上还设置了托管机器人，用户若是临时无空又怕错过出牌机会，可以托管机器人出牌，托管时游戏界面中央会显示“轻触桌面取消托管”的提示字样，以达到更好的交互体验。

    用户各自阵营区域内还设置了聊天功能，该功能区域内既可以点击发送预设的语言套餐，也可以自主发起语音聊天，使得用户在游戏进程中的交流更为方便、快捷，也可使游戏氛围更显火热（图9，图10，图11，图12）。

    游戏结束后，会弹出游戏结算界面，包括“胜利”、“平局”、“失败”三款胜负结果对话框，针对不同用户的比赛结果进行显示。游戏结果用不同颜色的彩带进行区别，“胜利”用红色彩带，红色象征喜悦，“平局”为黄色，“失败”为灰色，周围有发光的星星和方块点缀。结算版面上细致显示了己方和对方的分数及金币收益，并配合结算标题直观显示比赛结果（图13，图14，图15）。

    （四）游戏大厅界面设计

    点击游戏首页“游戏大厅”按钮，随即弹出一个房间滚动列表。房间列表分新手房和高手房，下设多个房间供用户挑选。用户也可以通过创建房间来开设新房，其他用户可通过输入房间号直接到达。界面的整体色调延续主色调以蓝、橙为主，背景上用淡化的红桃、红方、奖杯等装饰元素突出红十游戏主题。“关闭”按钮以红、黄二色突出强调，提醒用户点击此处可退回到上一界面。

    点击“创建房间”按钮后，界面会弹出一个对话框，上面显示新建房间号。密码房可供用户自行选择，如果用户选择密码房就勾选，后在下方长框内输入房间密码，点击确定生成。用户可将密码分享给好友，邀请他们共同游戏（图16，图17）。

    （五）游戏功能界面设计

    点击游戏首页界面底部的工具栏按钮可进入“公告”、“好友”、“排名”、“背包”、“商城”等相应功能界面。“好友”界面包括“我的好友”、“添加好友”、“好友申请”、“好友邀请”等相关界面。点击右上角齿轮按钮可进入“设置”界面（图18，图19，图20，图21，图22，图23，图24，图25，图26）。

    结语

    “嘉兴红十”手游UI设计实战是对自身专业水平的—次检验，整个界面设计综合反映了图形创意、版式设计、色彩构成等专业技能水平。在设计整个界面时，都尽可能地保持风格一致，避免造成用户视觉上的违和感。通过这次项目实践让设计者充分发挥所学知识，意识到自己的专业能力，也让人看到了自身的不足。在欣慰于项目的完成之时，也意识到作品仍需完善的方向，如进一步实现相关交互功能，提升用户体验感，界面色彩的搭配也可以再大气一些。这次的项目设计也磨炼了设计者对于设计软件Photoshop的运用，如让自己在今后的工作中更有章法。