智辉网络

智辉网络

少女前线2主界面UI浅析

admin
少女前线2主界面UI浅析-第1张-游戏资讯-智辉网络

游戏的主界面UI作为游戏的门面,形成了玩家对于游戏的第一印象。同时,它承担着日常玩家的频繁驻留、游戏内各玩法系统的信息汇集、呈现、导航的功能。本文将从界面场景、页面布局、信息框架、UI风格等维度,对前不久刚公测的少女前线2的主界面UI进行分析。

在界面场景化设计方面,主页面以游戏中指挥官(玩家)所在的小队基地车驾驶室兼指挥室3D建模为主场景。场景设计为科幻题材中常见的舰岛设计(驾驶室、全息作战室、舰桥),视角营造出指挥官(玩家)的第一视角,从舰桥往下俯视整个载具舰岛。场景中,近景为同处舰桥的小队成员“闪电”,idle状态下会循环播放与第一视角的指挥官(玩家)互动;中景呈现小队其他成员在舰岛忙碌的状态;远景通过舰岛窗户展现出游戏世界观下的末世场景。整个场景可以通过拖动进行极小幅度的视角偏移来强化整体场景感。在左侧入口文本下添加了类似编码/坐标类的修饰性文本信息,底板UI上做了类似电子屏幕扰动的动态效果,右下角的滚动banner也采用了屏幕扰动的效果,右上角也有基地车的logo。通过模拟类似于全息投影、MR、虚拟指示窗口等科技类元素,营造出指挥官(玩家)佩戴观测设备在场景中的第一视角代入感。然而,整体UI的场景化设计的修饰性表现较弱,在平板上不仔细看容易被忽视,且没有类似崩3、方舟一样的UI透视,整体上玩家对于UI场景化的观感并不强烈,UI与3D场景间的关联性也相应减弱。此外,主页的导航页面采用了场景化设计,入口为场景内干员“闪电”身边的投影机器人,页面整体采用了带透视的全息投影式的场景化设计,页面采用全屏形式,考虑全屏页面虽然会增加页面沉浸感,但也增加了页面深度,与首页导航的功能定位冲突,因此页面采用了透明化模糊处理,页面切换之间加入了转场动画。导航页面内的信息展示根据页面包装进行了整合,整体的场景代入感比较强烈。

在页面布局及信息组织方面,页面布局按照玩家视觉动线可以分为四个区域,红色的区域1以角色/场景展示为主,其中左下角的机器人为游戏中的导航,黄色的3个区域为UI信息区,左侧区域2为游戏的主要功能区,从上往下依次为:主线/常驻关卡、养成、活动、任务、抽卡和商城;左下区域3为账号等级、体力、货币及设置等次级功能按键区;右下区域4为游戏商业化内容展示功能区,从左往右依次为新手成长任务、战令、活动公告、滚动banner。UI信息布局整体集中在左测及下侧,右上大面积留白给予角色场景更大展示空间。导航页面从上往下分为三个区域,左上为玩家信息,右上为次级功能栏,分别为签到、邮件、公告、战令、活动公告;中部为场景化的主要功能区,依次为:访问室(抽卡)、交易室(商店)、艾莫云机房(图鉴及其他)、仓库(背包)、整备室(养成);下部则是各类玩法的入口,包括活动及常驻玩法。导航中的信息与主界面中的信息部分重叠,而部分又相互独立,如主界面独有的委托、考核及设置,导航页独有的签到、背包、邮箱、图鉴等。整体上页面信息组织存在些许零散及混乱。

在UI风格方面,整体UI采用扁平化简洁设计风格,图标设计线条棱角分明整体简洁,文本以无衬线的黑体为主,与图标风格呼应。颜色采用浅灰白色,与暗色场景页面形成对比。整体风格符合未来科技风格。

标签 少女前线2主界面ui浅析