智能手机游戏界面设计

来源 :设计 | 被引量 : 0次 | 上传用户:yangxin_ctbri
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘要:“嘉兴红十”手机游戏是根据嘉兴地区红十用户的审美喜好设计的一款线上纸牌游戏,具有休闲娱乐和社交性,适合用户茶余饭后用于消遣。因此在进行界面设计时,着力于挖掘游戏的乐趣,以吸引用户的兴趣。本次“嘉兴红十”手机游戏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的运用,如让自己在今后的工作中更有章法。
其他文献
摘要:旅游口号作为旅游品牌形象规划的焦点,可划分为旅游定位口号与旅游宣传口号,它们分别对应于旅游形象中的理念定位和属性利益,体现稳定性与多元性的统一。分析了绍兴乡村旅游口号现状与问题,从高端定制、差异化设计、视觉化设计、集群化与标准化设计等方面提出若干策略。  关键词:旅游口号 乡村旅游 品牌构建  引言  随着美丽乡村建设的持续深入,乡村旅游已进入发展快速道,亟需由数量扩张向质量提升转变,由零星
期刊
Nordic Space(北欧空间)——手工与可持续设计展是一个发现和传播北欧优秀手工与设计,提供手工与设计互动、培训和售卖的移动生活展示馆。我们与北欧设计师、手工艺术家(线上线下)交流互动,积极倡导环保、有品质的可持续生活方式。  手工与可持续设计展邀请了十多个北欧的手工设计品牌,在展览空间中将各个品牌的产品搭配陈列,营造出艺术画的生活场景,展现了独特的北欧手工质感与设计魅力。展馆分为三个板块:
期刊
摘要:随着中国经济的迅猛发展和人们生活品质的提高,为顺应商业多元化的发展需求,商业综合体这一新的商业模式给城市建设带来了巨大的变化。它的横空出世,改善了城市用地需求的问题,缓解了因城市进程的加快带来的影响,提高了市民的生活质量,顺应了市场的新趋势。配套景观延续商业综合体内部的有机环境,它不仅为整个商业综合体空间带来了全新改变,还让城市的文化品位与现代生活情趣更有韵味。本文以东京六本木Hills综合
期刊
AID-SLEEPING SCENE——情景助眠  KARESANSUI——枯山水  GESTURE CONTROL——手势控制  12sleep“想睡”是一套垂直“睡眠健康”领域的卧室智能家居解决方案,帮助传统家居家纺和酒店行业进行智能化升级,建立人体和居室环境健康大数据。  “康德说,有三样东西有助于缓解生命的辛劳,就是希望、睡眠和笑。然而,睡眠对于大多数人,却成为了一件困难的事。我们希望,每
期刊
摘要:在全球化背景下,建筑设计领域出现了严重的同质化现象,同时也将本土建筑推入尴尬境地。为此,诸多建筑设计大师进行了努力与探索。本文以贝律铭的苏州博物馆为例,从符号学的角度来探讨建筑回归到本土化的设计途径,增强当地的人们对自己的文明语境的归宿感。  关键词:全球化建筑 本土化 符号学  中图分类号:TG802 文献标识码:A  文章编号:1003-0069(2017)01-0112-02  引言 
期刊
三年前,也是现在这个季节,时任北方工业大学工业设计系主任的苏峻做出了一个在他看来“不太艰难的”决定——离开校园,加入小米,创立智米,设计一款“爆款”空气净化器。2016年,“爆款”做成了,小米空气净化器年销200万台,智米依旧马不停蹄,继续在家庭环境电器领域攻城略地。“用好产品影响老百姓生活”,苏峻矢志不渝地用自己的“作品”证明着,既懂技术又懂人的设计师,有成为企业家的天然优势。  作为小米生态链
期刊
摘要:五角星是人们十分熟悉的一个造形,也是人类最早使用的几何图形之一。对设计师而言,五角星的造形设计运用频率极高,且极具创新可能性,对其的透彻理解与深入探讨有特别的价值。文章通过对相关文献资料、设计实例等研究分析,揭示出了五角星造形设计中数理形式方面及文化意蕴方面的内涵。五角星造形设计体现着科学与艺术的完美融合。  关键词:五角星 造形设计 分析  中图分类号:J05 文献标识码:A  文章编号:
期刊
摘要:建筑遗存是最能体现传统村落特征的关键要素,具有重要的历史、文化和艺术价值。但是,伴随着城镇化建设加快推进,传统村落建筑遗存遭受严重破坏。本文以桐庐县深澳村为例,剖析了其建筑遗存保护与利用方法。指出以建筑遗存为脉,促进村落内生发展。  关键词:建筑遗存 保护利用 策略  中图分类号:TU-87 文献标识码:A  文章编号:1003-0069(2017)01-0144-02  概述  (一)深澳
期刊
摘要:现代城市人的短途绿色出行是基于不同的需求的,不同的需求便成为不同的设计出发点。文章首先对现代城市短途出行需求的多元性进行分析,其次在现有的自定义电动自行车分析的基础上,引入模块化等相关概念,总结分析该类平台式模块化设计的要素特点与设计方式,举例分析得出模块化设计在电动自行车设计上的具体运用原则。从而降低企业成本,增加用户产品自定义的积极性,进而提升品牌形象,推动我国电动自行车行业的良性发展。
期刊
三里屯SOHO  隈研吾在北京设计过大型综合设施“三里屯SOHO”,我在其中担任标识设计部分。这都是七年前的事情了。那是我在中国的第一个项目,是第一次负责大规模商业设施的标识设计,也是和隈研吾建筑的首次深度合作。七年后当我重新审视该项目时,出乎意料地悟出了建筑与标识设计之间的关系,而这些在七年前还只是放在我脑子里的一团模糊不清的抽象概念而已,尚未呈现出语言的形态。现在就拿出来和大家聊一聊吧。  三
期刊