多媒体技术及其应用
本栏目责任编辑：唐一东
UI 设计在手机游戏界面中的研究与应用
李泗兰，郭雅，陈天铸
（广东创新科技职业学院，广东东莞523960）
摘要：随着互联网的飞速发展，高配置、高智能的移动手机如雨后春笋般的涌现，用户对人性化意识的产品使用需求日益
增强。满足用户对智能手机游戏UI 界面的舒适体验是游戏开发人员重点关注的内容之一。事实上，当前很多游戏开发人员只注重游戏的商用价值而忽略了App 游戏中界面的整体布局、设计要素和界面风格。一款优秀的手机游戏其UI 界面设计占据着主导的地位，影响着用户的直观感受，也决定着这款游戏的成功与失败。关键词：UI 界面设计；手机游戏中图分类号：TP399
文献标识码：A
文章编号：1009-3044(2021)15-0199-03
开放科学（资源服务）标识码（OSID ）：
随着科技进步、互联网的迅猛发展，各种高配置、高智能的移动手机如雨后春笋般的涌现。游戏融入了人们的日常生活娱乐中，各种适用不同人年龄层次的游戏亦越来越多。
在游戏APP 开发过程中，其UI 界面设计是整个App 程序设计中的一个重要环节，友好美观的界面会给人带来舒适的视觉享受，拉近用户与终端设备的距离。1掌控界面布局、提升产品交互效率
设计师在设计游戏UI 界面时，主要涉及的元素有文字、图形或按钮等，为使各类信息更加条理清晰，富有层次，需要对UI 界面进行布局掌控。通过界面布局掌控，方便用户在使用过程中快速到自己想要的信息，从而提升游戏的交互效率和信息的传递效率。下面以首页、分类页、搜索页等页面为例进行UI 界面布局详解。1.1竖向排列布局
图1竖向排列布局-首页图2竖向排列布局-分类页
众所周知，不同手机品牌，其屏幕尺寸大小亦不相同，设计
师在设计游戏UI 界面时需要考虑游戏界面的布局、彩、造型
等方面。常见的游戏的界面采用竖向排列布局，如图1，图2所示。采用这种布局方式，可以直观的展示
功能目录或产品类别并列元素。理论上列表长度可以向下无线延伸，但是为了保证用户的良好体验，建议竖屏采用2-3页显示，用户通过上下滑动屏幕查看更多内容。1.2横向排列布局
当用户进入游戏程序后，由于智能手机的屏幕分辨率有限，为了方便人机交互，设计师一般会将游戏界面大部分设计成横屏。如图3所示。采用这种布局方式，一方面能够展示游戏大一些的场景，用户快速进入娱乐状态，畅享游戏带来的愉悦。另一方面，用户可以双手操作手机，该操作方式更加符合人体工学，节奏感较强，操作频率大。
图3横向排列布局-游戏界面
1.3热门标签流式布局
对于游戏中的搜索界面，为方便用户观看搜索到的游戏资
源，设计师通常采用热门标签流式布局方式。如图4所示。采用这种布局方式让界面更加语义化，用户一目了然看到搜索结果。
收稿日期：2021-02-25基金项目：文章为中国职业技术教育学会教学工作委员会2019-2020年度职业教育教学改革课题研究（项目编号：1910101）；广东创
新科技职业学院科研基金项目（项目编号：2020TSYB007）
作者简介：李泗兰（1983—），女，广东梅州人，高级工程师，讲师，硕士，主要研究方向为计算机应用、网页制作和平面设计等；郭雅
（1980—），男，广东信宜人，高级工程师，高级技师，实验师，主要研究方向为云计算与大数据、网络管理等；陈天铸（1993—）男，广东雷州人，助理实验师，本科，主要研究方向为计算机应用、实训室管理与维护、云计算技术在计算机中的安全应用等。
199
本栏目责任编辑：唐一东
多媒体技术及其应用Computer Knowledge and Technology 电脑知识与技术第17卷第15期(2021年5月
)
图4热门标签流式布局-搜索页
1.4转盘式布局
转盘式布局又称为“走马灯式布局”，主要采用图片环绕在界面四周的形式。如图5所示。这种布局方式便于用户单手操作，简单灵活，
许多抽奖游戏界面采用。
图5转盘式布局-游戏抽奖
2统一设计风格、悦享舒适“游”趣
游戏UI 界面设计的风格、结构必须要与游戏的主题、内容相一致。因此，设计师必须具备一定的心理学、美术绘画、平面构成、彩构成、版式设计、创意设计等知识，进而完成图标、游戏界面及界面其他元素的设计制作。2.1图像的风格与设计风格一致
在游戏UI 界面设计中，图片的设计风格可以有多种，使用风格统一的图片进行设计会让界面看起来更加统一，例如“商品搜索”页“套装”中的图片，其颜风格与本页面的整体梅红设计风格一致。如图6
所示。
图6图片风格与设计风格统一
2.2图片的调与设计风格一致
在选择图片的过程中，要注意图片调与设计风格的一致。例如“购物车”页中每个列表项的图片背景设为淡紫，与本页面的整体紫设计风格一致，画面“档次感”瞬时提高了许多。如图7
所示。
图7图片调与设计风格的一致
2.3icon 图标的调与设计风格一致
icon 是游戏UI 界面中的一种图标格式，具有明确的指代含
义功能，是带给用户的主要印象，一款好看的icon 图标容易吸引用户的关注与下载。例如“商品分类”页中各种商品的按钮颜与本页面的整体浅粉设计风格一致。如图8
所示。
图8icon 图标的调与设计风格一致
2.4UI 界面设计在手机游戏中的综合应用
随着智能手机的不断发展，手机游戏凭借其娱乐性、灵活性以及操作简易性，越来越受人们的青睐。设计师在设计时需要对游戏UI 界面设计进行整体布局把控，使游戏信息条理清晰、层次分明、降低用户使用的认知负担，提升产品的交互效率和信息传递效率。图9、图10、图11、图12、图13、图14、图15、图16为UI 界面在游戏UI
界面中的综合应用案例。
图9启动图标
图10引导页图11首页
200
多媒体技术及其应用
本栏目责任编辑：唐一东
Computer Knowledge and Technology 电脑知识与技术
第17卷第15期(2021年5月
)
图12商品分类页
图13搜索页
图14
登录页
图15
购物车页
图16抽奖页
3结束语
作为一名优秀的UI 界面设计师，首先要有立体的专业能力，例如产品分析、用户研究、交互设计、视觉设计以及动效设计；其次，拥有系统的思考能力，即不局限于专业，发散思维，积极拥抱科技智能和大数据，提升认知，具有跨界的融合创新能力；最后，具有终身学习的能力，时刻保持对不同知识领域的学习好奇心和热情，拥抱新科技。
参考文献:
[1]蒋珍珍.Photoshop 移动UI 设计从入门到精通[M].北京：清华大学出版社,2017.
[2]黑马程序员.跨平台UI 设计宝典[M].北京：中国铁道出版社,2018.
[3]高君.手机UI 界面中情感化表现的创新性研究与应用[D].天津：天津工业大学,2016.
[4]王彦.手机游戏UI 设计的一般性原则研究[D].武汉：华中师范大学,2014.
[5]蔡希阳.探究UI 设计的视觉传达艺术——以手机游戏《蛮荒与未来》设计为例[D].哈尔滨：哈尔滨师范大学,2015.[6]陈希赟，王珏，吕瑞境.智能手机游戏界面设计——以“嘉兴红十”UI 设计为例[J].设计,2017(5):11-13.
【通联编辑：朱宝贵】
ui网页界面设计（上接第198页）
主要流程包括：系统启动会，初始化其他采集处理设备，即RFID 、二维码、条形码等终端采集及处理设备，初始化成功后，可以处理视频自动、人为监控及视频溯源等安全预警，首先识别处理目标的身份，
然后开始安全异常处理，处理成功后，存储安全信息。也可以通过RFID 、二维码、条形码等查询追溯处理
实验室仪器设备等财物丢失等异常。
图3实验室安全监控处理主要流程
4.2软件实现
系统服务器包括本地服务器与视频云服务器。本地服务
器端包括支持手机短信的GPRS 网关、系统运行支撑程序，以及与本地物联网终端的信息分析与处理程序插件。视频直播采
用腾讯直播云服务器，使用腾讯云直播LVB 技术，视频直播推流及播放SDK 采用腾讯云直播提供的API 开发包。视频点播采用腾讯云点播VOD 技术[5-6]。系统安全管理端采用B/S 架构，使用JSP 编程及MySQL 数据库。为了保障安全预警与处理的实时性，开发了手机安卓版App 。
5结束语
根据高校实验室设备、器材等财物容易丢失、管理混乱等现象需求，提出了以视频监控与分析技术为主的多技术融合方式，设计了高校实验室设备安全管理系统，为高校实验室财物等安全管理提供了高效的管理平台，提升了高校实验室的管理效率。
参考文献：
[1]邵明辉，张嘉鹭，侯秀杰.新工科背景下高校机械类实验室安全管理机制探究[J].实验室研究与探索,2021,40(1):300-304.[2]李宾皑，李颖，孙宇飞，等.目标检测、人体姿态估计算法叠加的监控视频分析方法[J].电子技术与软件工程,2020(7):143-147.
[3]姚兰，赵永恒，施雨晴，等.一种基于视频分析的高速公路交通异常事件检测算法[J].计算机科学,2020,47(8):208-212.
[4]张震，李浩方，李孟州.YOLO 算法在安检异常图像中的研究[J].计算机工程与应用,2020,56(21):187-193.
[5]翁兴钢.计算机资源和实验教学平台建设[J].福建电脑,2017,33(1):102-103.
[6]刘闯，李永刚.高校特种设备信息化管理探究[J].实验室研究与探索,2021,40(1):270-273.
【通联编辑：谢媛媛】
201

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。