火星网校
优化手游UI设计，提升用户体验有多大影响？
发布时间：2023-12-18 20:23:18 浏览量：166次
导语：《QQ飞车手游》作为腾讯首款3D赛车竞速手游上线至今已经两周年了，为庆祝两周年活动QQ飞车手游也更新了版本。实际上在运营活动中，QQ飞车手游经常不断增加新的内容，原有的UI界面、UX设计都进行了革新，产品更新迭代。
UI（用户界面User Interface)设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。用户界面是人与机之间交流、沟通的层面。从深度上分为两个层次：感觉的和情感的。感觉层次指人和机器之间的视觉、触觉、听觉层面；情感层次指人和机器之间由于沟通所达成的融洽关系。总之用户界面设计是以人为中心，使产品达到简单使用和愉悦使用的设计。界面设计从流程上又可分为结构设计、交互设计和视觉设计三部分。
在2019年暑假期间，QQ飞车手游版本更新，飞车世界新加入IP和剧情。在世界四大车厂的背景下，剧情围绕着探索者和守护者争夺神秘能量方块展开，从而设计出多种模式的玩法。这一次的体验迭代，加入了更多科技元素，并通过UI和用户体验的应用包装来促进玩家对游戏世界的感知。那这一次QQ飞车手游的UI设计能给玩家带来什么不一样的体验呢？
1.游戏加载的CG动画改进
图一
图二
以上两张图是在产品迭代前后玩家进入手游的CG动画界面。图一是旧版本的动画，在实际中只有赛车手开着赛车往前冲刺的趋势，人物场景并没有发生变化，看起来就像是静态图。图二是新版本的加载游戏CG动画，在加载过程中玩家看到的其实就是一段视频，赛车在赛道上飞驰，周围场景也发生变化。
从图中的环境设计来看，一改之前山水美景风格，更换成在高楼大厦间穿梭的场景，同时赛车的车道方向指示条改成发光线条，驶过的虚影是赛车的内部模型构造图，明显新版本的元素设计科技感更强。由动图变成CG动画，在玩家等待游戏加载的过程中，一方面能够提前将玩家带入游戏场景，另一方面能够缩短等待时间长这样的感知。
2.大厅视觉设计优化带来的舒适感
图三
图三为原有大厅的界面，顶栏UI、底部UI和右侧UI较为分散，右侧UI玩法入口设计的组件看起来过于厚重。整体上看，大厅的界面区域分割明显，看起来过于扁平化，3D立体感不强，并不协调。
图四
图四为新版本的UI，在信息布局上进行优化。对多种玩法入口或活动进行归类设计入口。例如将“天赋”这一入口分类至“收集”入口，给底部UI节省出空间，将聊天窗口收纳至底部UI。原有的右侧玩法入口布局不分层级，更新后的右侧UI从使用频率和重要程度考虑，将其进行重新布局，“对战房间>赛事比赛>个人生涯>休闲区”，并从上至下分布，更符合玩家玩不同模式的偏好。此外，右侧UI也进行了倾斜设计和透视化处理，给左侧的人物更大的空间进行人物展示，以此来突显出对玩家的重视。另一方面是角色与空间场景的关联性更强，能够提升玩家对游戏人物的代入感和游戏的沉浸式体验，希望达到 “玩家=游戏虚拟人物”这样的目的，从而促进情感层次上玩家与QQ飞车手游构建起融洽关系。
3.“人-机”交互设计优化带来沉浸式体验
同样以图四为例，在左侧界面的人物的展示上，玩家可以滑动屏幕旋转视角观察游戏虚拟人物和赛车外观，从视觉上呈现的3D效果更有现实感。
图五
同样改进的还有空间场景，图五的右上角是设置游戏虚拟人物所处场景的一天光线变化。不需玩家手动设置，在大厅界面会自动模拟现实的日出日落。图五右下角是对赛车展示的按键设置，点击第一个图标可以打开车灯，中间图标则是从听觉上给予玩家引擎启动声的感受，能够在游戏中带来刺激感，最右侧则是更换赛车成滑板的按键。
优化后的场景才真正地打造出了一个游戏世界，虚拟游戏人物拥有了生命，赛车酷炫地在赛道上漂移、轮胎摩擦赛。的声音，再配上系统的激进劲爆音乐，更能营造出玩家玩QQ飞车的氛围。
4.房间UI设计优化促进社交
图六
在不同的玩法模式中，房间都需要具有展示和交流的功能。在每位玩家的界面里，玩家本人的虚拟人物比起房间内其他玩家的则是放大化的，这样让每位玩家感觉到被重视被尊重。（图六）原有的房间采用模块化设计，玩家可邀请他人进入房间，其他玩家的虚拟人物就仅仅是展示在模块中，玩家与玩家之间的交流就只能通过左下角的聊天窗口在房间中进行对话。
图七
新版本的房间设计（图七）更具有空间感，玩家用户的虚拟人物站立在前方主位，其他虚拟人物则站立在后方，对玩家来说能够更好地展示这个代表着自己的虚拟人物。同样的，在房间中增加了虚拟人物互动的功能，比如玩家A操作让他的游戏虚拟人物进行干杯、献花、尬舞等互动，他的虚拟人物就会从它的位置跑到玩家B的虚拟人物面前，跟它进行干杯、献花、尬舞等。
5.社交界面可视化设计，拉近玩家之间的社交距离
图八
QQ飞车游戏中可建立虚拟人物社交关系的主要分为两种，一类是异性结为情侣或伴侣（同性则是闺蜜或兄弟），另一类是结为师徒。在典型的第一类社交中，虚拟人物有特定设计的社交界面，有多种背景图案可以选择，整体风格偏温馨甜蜜。通过虚拟人物之间建立起亲密联系，能够帮助玩家缩短社交距离，另一方面因为社交性增强，能够尽可能地提高玩家用户活跃度，降低玩家的流失率。
UI设计能够服务并提升游戏产品整体的娱乐性，友好美观的界面会给人带来舒适的视觉享受，拉近人与游戏服务器、人与人的距离。游戏里有太多的UI设计值得去思考，要怎样为玩家创造更有沉浸感的游戏体验，QQ飞车手游的例子就不再过多阐述了。
作者：深圳大学管理学院温小柔
以上仅代表作者个人观点
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 物联网APP UI设计:创造智能硬件领域的沉浸式体验
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
最新文章
