标签: 明日方舟

  • 记“音律联觉”明日方舟音乐会之行

    记“音律联觉”明日方舟音乐会之行

    4月初得知明日方舟在上海举办主题音乐会的消息的时候,我其实没抱太大的希望,毕竟大麦被戏称黄牛麦是有原因的。门票也就千人左右,但大麦上登记的想看人数已经上万,可见抢票应该会非常困难。我打算随缘试一把,没想这一试还真让我抢到票了。

    音乐会在上海世博展览馆举行,但同时同地还有华夏家博会举办。为了避免走错场,音乐会的入口单独设置在场馆北门。在往北门走时路上便能看到贴心的引导牌,指引参加音乐会的观众往北门走。

    鹰角在北门设立了专门的黄牛举报点。事实上,应国家防疫的要求,这次的购票遵循一人一证一票,在入场时必须刷身份证并通过人脸识别,也从技术上杜绝了黄牛卖票扰乱市场的行为。

    鹰角对美学的极致追求是所有玩家都有目共睹的,这次的音乐会也不例外。

    场馆北门立着巨大的坊门,与场馆外墙两侧的巨型海报共同组成了美丽的风景,带给即将进场的观众以巨大的视觉冲击,让大伙的血在这一刻就燃了起来。

    在经过大门安检之后,通道右侧安置着以三角为经典主视觉元素的合影台,与一侧的周边展示柜。

    透过透明展柜可以看出,周边商品无论是从设计感还是从质量上看着都挺棒。而作为一个音乐人,我最喜欢的还是一系列唱片,尤其是那三套危机合约的“透明胶唱片”。

    再往里走,便是不同价位门票的检票处。检票过后工作人员小姐姐为我戴上了手环,手环一端有“购物凭证”,代表每个观众只有一次在现场贩卖处购买周边的机会,在购买完商品以后会被工作人员撕下。

    通过检票处后,我领到了属于最低价位的赠品:一个主题购物袋、一件棘刺主题短袖。外加一张场贩周边商品清单。可惜的是,早在我来之前,官方就在微博发公告说场贩排队人数过多,因此应上级安全管制要求提前关闭排队入口。但未能排上队的玩家也不必太伤心,全套周边后续都会上架明日方舟的天猫官方旗舰店。

    场馆内可以说简直是明日方舟浓度拉满。随处可见等身立绘展架,头身比例1:1的陈和W绕场游行,还有许多热爱明日方舟的玩家cosplay各个游戏内角色。不得不说年轻真好。

    5点半开始,观众即可入场就坐了。音乐会7点开始,这1个半小时的等待时间还是蛮漫长的,加上无法反复检票,许多没有带食物进场的人只能在晚餐时间挨饿。

    出于好奇,我稍微观察了一下前来观看音乐会的观众。如果把音乐会观众看成明日方舟的核心玩家群体的一个抽样样本,核心玩家的性别比例则几乎达到了1:1。这代表明日方舟相比于其他以男性市场为主的传统二次元手游,在品牌IP在衍生商品的选择范围上具有更大的自由度。

    鹰角美学也充分体现在了舞台设计上。T型舞台后方立着1块主屏幕和2块副屏幕,外加上方5块三角形可动屏幕,为舞台效果增加了更多的可能性。舞台前部上方有一块可收起的透明幕布,作用在下文会提到。

    观众席每个位置上都配有赠送的应援荧光棒,是能根据现场后台控制以显示特定颜色和闪烁频率的。这种荧光棒减少了观众的应援压力,也让整个现场演出显得十分和谐。

    演出分上半场和下半场,分别由管弦乐团和电声乐队领衔。管弦乐队的编曲细腻,演奏大气,是我认为最值票价的部分。搭配乐队的伴奏,歌手现场演唱《Requiem》《Lullabye》等歌曲也比录音室专辑更加富有感染力。下半场的演出则略有瑕疵。由于过于突出人声,导致《ALIVE》这种更需要突出乐器的金属乐显得异常的干涩。《秋绪》《Everything’s Alright》等歌由于调用的是录音室伴奏,外加本身就应该以人声为主,便没有上述的问题。

    除此之外,下半场《灰蕈迷境》系列爵士乐给我留下了深刻的印象。搭配上背景里在密林中奔跑的鸭爵,显得异常的迷幻与动感。

    另外有几个细节我必须说一下。

    演出刚开始时,透明幕布上出现了阿米娅的三维模型,拉着小提琴跟随管弦乐团一起演奏。我特意留意了阿米娅按弦的左手,发现左手确实跟着旋律一直在变化,非常真实,想必制作该模型动作时用到了动作捕捉装置。

    排队时后排有俩小朋友跟我说有两个节目是远程演奏的,一度让我非常期待。等到了时间才发现他们说的是《Speed of Light》和《Infected》,但这并不是“远程演奏”,而是由音乐人提前录制好视频现场播放的。

    中场休息时,大屏幕投射了休息倒计时15分钟,主办方发现上厕所排队人数过多便贴心地延长了休息时间。但在演出临近结束前4首曲子时,两侧散场通道便被城管打开了。这让我担心会不会是因为超过演出报备的散场时间太久,导致城管用这种方式催促主办方尽快结束。上海最近昼夜温差大,冷风从门外吹进来非常容易让人着凉。我一边裹紧了外套,一边忐忑地担心节目会中途被掐断。所幸最后一首曲子《Renegade》结束,下半场的所有歌手和舞者一同上台,宣布了音乐会圆满结束。


    这不是我第一次参加游戏主题音乐会,然而这次的经历令我看到了游戏产业的另一种可能性。《少女前线》、《王者荣耀》、《明日方舟》……从游戏IP向外延伸的主题文化活动,今后会成为越来越多国产游戏的发展方向。

    也相信在未来,鹰角网络能为玩家带来更多的惊喜。

  • 明日方舟官方网站优化设计

    明日方舟官方网站优化设计

    01. 改版背景

    《明日方舟》的官方网站已经沿用了两年。这两年中游戏的整体设定变得更加完善,角色更加丰富,与此同时网站难以容纳越来越多的游戏相关内容。

    基于游戏的整体风格,我对网站进行重新设计,为优化视觉和内容展现方面提供自己的一套方案。

    02. 元素提取

    为保证网站与游戏风格的统一,必须先从游戏UI中提取关键元素。

    色彩方面,《明日方舟》的界面以黑白灰为主。凸显现代工业质感的同时,也使用蓝色和橙色进行辅助,显得不会单调。

    图形方面,界面以矩形为主,辅以少量的圆形元素。部分区域配有规则几何形状的渐变底纹。

    字体方面,游戏内标题文字以具有质感的思源宋体为主,其他文字则选用更具易辨识度的思源黑体。

    根据以上几点,拟制作一款以矩形元素为主的深色网站。英文衬线体Garamond premier pro作为网站的主字体。

    03. 设计展示

    04. 改版思路

    旧首页问题:

    1. 为了给画面中间的视频提供更大的空间的同时适应手机屏幕,导航被设计成收缩于左上角,点击展开,不够直观。
    2. 右上角聚集了登录、客服、视频切换和其他链接,功能区划过于杂乱。
    3. 底部下载区过多占用空间,且罗德岛标识作为视觉平衡元素,没有其他实际用处。

    改版思路:

    1. 导航悬浮于顶部,层级清晰。
    2. 画面中心用作轮播图和视频展示,不在两侧增加用户的视觉负担。
    3. 将苹果安卓等分类下载渠道收入按钮之内,以明确用户的下载行为。用户点击“app下载”按钮之后,展开提供不同的平台版本下载。
    4. 按照内容重要性,将其他官方交流途径放于下载按钮下方,便于用户在下载之后继续关注。

    旧情报页问题:

    1. 新闻分类以蓝色强调显示,相对于新闻内容喧宾夺主。
    2. 只展示最近6条新闻。其他新闻需要点击“更多”,跳转至新页面查看。

    改版思路:

    1. 通过左右滑动展示更多新闻,无需跳转。

    旧干员页问题:

    1. 该方式下只能展示少量阵营,每个阵营只能展示少量干员。
    2. 干员页层级复杂,用户必须先选择阵营图标,再选择角色才能查看相应信息。而阵营的切换功能也不够明显。
    3. 作为面向新玩家的宣传网站,用户对角色职业没有清晰认识,因此将职业展示在干员详情里的意义不大。

    改版思路:

    1. 以轮盘的形式切换阵营,使用户能直观地看到阵营名称。
    2. 放大角色立绘,迎合二次元玩家对高品质立绘的需求,吸引更多喜欢角色立绘的用户游玩。
    3. 在底部切换干员。若该阵营角色过多,还可以通过左右滑动容纳更多的干员。

    旧设定页问题:

    1. 该方式下无法容纳更多的设定内容。

    改版思路:

    1. 通过左右滑动展示内容,以提高延展性,便于更多设定加入。

    旧档案页问题:

    1. 以照片墙形式展示图片,但图片尺寸不一,略显凌乱。
    2. 在国际版官网上点击“查看更多”,可以看到有壁纸和贴纸类。这些在档案页内并无体现。

    改版思路:

    1. 对档案进行分类导航,让用户快速定位图片、视频、壁纸和贴纸。
    2. 将照片墙规划出6×4的栅格,图片以1格、2格、4格的尺寸排布,具备统一性。
    3. 压暗所有照片,仅鼠标经过的照片正常亮度,从色调上确保整体不会凌乱。

    05. 后记

    《明日方舟》是我唯一一款玩了两年多并且充值的长线运营手游了。

    计划制作该游戏网站的改版设计,除了对这款游戏的喜爱以外,也是为了提高自己的设计水平。刚做完这设计后没几天,朋友给我发了《明日方舟》的新官网。当时以为只是手机端更新了更炫酷的动态效果,没想到连PC端也一并改版了。用白学家的话说就是:“明明是我先来的,怎么就变成这样了呢……”

    无论如何,在寻找痛点进行改进设计的这一过程中,我也学到了很多东西。其中几个页面也经历推翻重做,出了三个版本,只为寻找“游戏网站究竟靠什么吸引用户”这一问题的答案。

    该作品还有很多可以改进的地方。如果大家有意见和建议,欢迎在评论区留言。

  • 《明日方舟》UI/UX设计复盘

    《明日方舟》UI/UX设计复盘

    本文共3716,预计阅读时长8-15分钟。

    如果你要问2019年的年度手游是什么,我的回答是《明日方舟》(下文简称“《方舟》”)。
    自2019年4月30日《方舟》iOS区正式开服以来,该游戏的热度迅速飙升。根据第一手游网的《2019年5月中国手游曝光度报告》来看,5月新游《方舟》曝光度为172万,直接赶超同期曝光度为138万的著名二次元手游《命运:冠位指定》。

    《方舟》拥有着极高的美术设计感,与市面上其他二次元类手游形成了鲜明的对比。这是该游戏吸引笔者的一大重要因素。腾讯游戏学院于19年7月19日发布过一篇文章《〈明日方舟〉UI/UX 分析——藏在好看背后的先进性》(https://mp.weixin.qq.com/s/276iXWXkLCf_T3IheN0MAA),详细分析了该游戏的界面和交互设计优劣,将《明日方舟》的界面和交互总结出以下几个特点:

    1. Diegetic Interface 风格的主看板观瞄投影设计表现未来科幻感;
    2. 类 Fluent Design 设计思想的多元质感突出了层级对比度;
    3. 卡片设计与视差效果体现交互空间和所承载内容的深度;
    4. 风格化的装饰字体提供了更为丰富的视觉元素;
    5. 焦距控制和底图处理塑造统一的视觉风格;
    6. 通过适当的过场衔接技巧降低页面层级数量,并构建场景化的系统结构。

    对于这六点特征,原文已经分析的非常详细具体了,再此便不赘述。

    在游戏正式上线这一年中经历了多个版本的迭代,《方舟》更新了一些界面与交互的细节。游戏内的界面与交互设计总体上在不断的进步,也依旧存在部分不那么令人满意的地方。

    笔者就该游戏内 UI/UX 的优化和不足分别进行一轮盘点,希望从中学习到优秀的设计思路。

    优化1:次级页面的隐藏式导航栏

    这个“优化”是在传统国产二次元手游基础上的优化,是个人最称赞的功能。

    市面上现在比较火热的《方舟》和《公主连接Re:dive》,从其首页可以看出两种产品结构类型。《方舟》以主菜单页作为一级页面,角色、作战等页面为二级页面,同类型产品还有《崩坏3》、《火影忍者》等多款国产二次元类手游;《公主连接》设有底部导航,角色、作战等皆与首页同级,可以快速来回切换,该层级结构和大部分应用类app相同。 

    以《方舟》产品结构为例,当用户希望从角色页进入作战页时,一般的思路是点击返回退至首页,再点击作战按钮进入作战页。

    实际上《方舟》在次级页面加入了弹出式导航栏,这令用户可以从角色页直接跳转至作战页,减少了用户多次跳转所消耗的加载时间。

    从功能上看,该导航栏的等同于默认状态为隐藏的《公主连接》式导航栏,目的是使产品层级扁平化,串联了几个主要功能页面,使用户跳转更加快捷便利,极大地优化了交互体验。

    《方舟》之前,笔者从未见到过有相同结构的国产二次元类手游像它一样,在次级页面加入导航栏。而后《战双帕弥什》等手游也相继加入了该功能。

    优化2:基建内干员加成标签优化

    在游戏上线初期,为基建分配干员时,若干员存在与该基建相关的加成效果,会以展开标签的形式突出显示。用户点击该干员时,在左侧能看到相应的详细情况。

    或许是因为标签不够显眼,在19年11月版本更新时,开发团队对其进行了改版,去掉了干员卡片内标签的文字,以更多的图标取代,并放大了图标。但是这一次对UI的改进给用户造成了巨大的不便,遭受到了玩家的强烈反对。开发团队在收取反馈之后,面对本次改版暴露出来的两个问题进行了又一次的优化。

    首先,在第一次改版中,玩家对大量陌生又相似的新图标无法快速形成认知。如上图的杰西卡和克洛丝加成图标过于相似,且克洛丝的图标有三个向上箭头,加成效果似乎优于杰西卡,实际上恰恰相反,辨识度不清晰。

    其次,同类型的加成无法从图标上看到其效果优劣。部分同类型加成分α级加成和β级加成,后者给予的加成更多。在改版前,文字标签能直观地看到效果为α级和β级,而在改版后无法从角色卡片上区分两者。

    开发团队的优化方案是进行更加差异化的图标设计,并按照加成效果优劣,以圆环图的形式表现在图标描边上。最终本次优化非常成功。

    这次改版优化相当曲折,前期的表现仿佛为了搭配大版本更新而进行的一次赶工,从某种程度上也算是反映了开发团队 UI/UX 设计能力的下限。

    优化3:贸易站订单批量交付

    这是20年4月更新的优化。以往玩家在基建里交付订单流程是点开单独的贸易站,选取单个订单进行交付。

    在优化后,玩家点击贸易站时,系统会按照玩家已有材料的数量,自动进行多个订单的批量交付。 

    优化4:家具商店优化

    早期玩家家具商店内购买家具套件时,用户无法看到自己是否已有该套家具。当用户在购买家具时希望知晓自己是否已有一整套家具时,只能进入基建查看。

    优化后用户在购买时可以看到是否已购买完整的套件,便于用户检查与购买。

    优化5:凭证交易所样式改版

    20年4月凭证交易所左侧样式进行了一次改版。除了突出不同凭证的样式以外,预留出了更多的空位。

    个人猜测会扩展凭证种类,比如说把危机合约的兑换移至凭证交易所处。 

    优化6:访问好友基建返回逻辑的修正

    玩家访问好友基建的流程是:

    1. 在首页点击左下角“好友”按钮;
    2. 点击“好友列表”;
    3. 选择相应的好友,点击“访问基建”。

    在以往的版本中,当好友结束基建访问,点击左上角返回时,系统会提示“是否返回我方基建”,若点击确定直接进入到玩家自己的基建。

    “返回”在一般人的认知上是返回上一个页面,在这个例子里应是好友列表,而游戏最终却让用户进入到了新页面,这从逻辑上是反直觉认知的。

    后续的改版中,开发团队终于认识到了这部分缺陷,对其进行了修正。现在玩家在访问好友基建后点击“返回”按钮会返回到好友列表了。

    优化7:增加仓库分类

    往期版本中,仓库内物品处于自然堆积状态,虽然按照一定的规律排序,但是不便于用户检索。

    在19年夏天的优化后,仓库右上角新增了分类标签,便于玩家分类检索。

    足1:代理作战UI阻挡界面

    当玩家使用代理作战功能时,游戏界面上下部会被相关 UI 所阻挡。

    下方的 UI 告知玩家当前代理作战状态正常与否,还用深色半透明图层遮挡住干员池,暗示玩家在该模式下不用对干员池进行操作。

    而上方的 UI 除了提示玩家当前正在代理作战外,没有任何作用,甚至还阻挡了游戏画面,令玩家看不清当前状况。若玩家想要录制作战过程分享给他人,该部分 UI 非常碍事。 

    不足2:基建抽屉式页面的关闭逻辑问题

    《方舟》里的基建是少有的会二次确认玩家是否离开的页面。

    若一个页面离开时弹出二次确认弹框,通常代表该页面非常重要,甚至离开该页面会让用户造成一定的损失。

    拿作战关卡举例,用户花费了理智(相当于其他游戏里的体力)进行游戏,若中途退出关卡,不仅无法拿到奖励,也会损失一部分的理智。

    玩家离开基建页面时也会弹出二次确认弹框,并提示用户可以在设置中关闭,这令笔者感到困惑。基建何以重要到玩家退出还要用二次弹框提醒的地步?

    在经过一番思考之后,笔者认为是由于基建功能繁多,开发团队为了防止用户快速点击返回按钮过多而退出基建页,特地在基建内添加了二次提醒功能。

    基建有两种状态,下图左侧为第一种状态——预览状态,通过该状态玩家可以直观地看到各设施运转状态。当用户点击其中某个设施时,会切换为右侧的状态,这时候用户可以看到设施样貌和进驻干员的样式。在该状态下点击“返回”按钮返回至预览状态。 

    举例来说,点击设施“进驻信息”等按钮时,信息通常以抽屉式右划入展示,如下图左侧所示。此时点击左侧空白处或相关按钮即可关闭该抽屉。点击左上角“返回”按钮会在关闭该抽屉页的同时直接返回至基建的预览状态。

    若某玩家认为在打开抽屉页时按一次返回按钮关闭抽屉页(这是传统应用类 app 常用的产品逻辑),那他会快速点击两次返回按钮以返回至基建预览状态。事实上如果没有基建页的二次提醒,他会直接回到首页。

    在基建的设计可以看出,开发团队为了尽量减少基建内页面跳转,努力想要减少页面层级。但是引入了抽屉式页面之后,由于与传统抽屉页的设计思路不一致,导致用户的失误操作也会相应地增多。

    因此当抽屉页打开时,设置成点击返回按钮关闭抽屉页,能顺应普通用户的直觉,减少其失误操作。

    不足3:干员详情页可互动区域不明显

    干员详情页面右侧突出的卡片区都是可以点击的,相比之下左侧几块区域只有部分可以点击互动。

    若没有新手提示,新玩家很大概率不会知道属性和信赖值两栏可以分别点击查看详情。不过既然有了新手提示,那么这也就不成问题了。

    左下角的职业图标可以点击查看图标说明,但与其并列的攻击范围和标签说明无法点击。两者在样式上略有不同,职业图标有白色描边和淡淡的阴影,但是两者分别不够明显。

    个人认为既然点击职业图标出现的是关于职业图标的说明,那么应该将该说明直接放进详情页的总说明里,点击人物上方的第三个图标调出。这也比较符合正常人的直觉。

    不足4:兑换物品时缺少已有库存数量

    这条是好友 Leek001 提出的。

    《方舟》在“生于黑暗”活动商店中,玩家兑换商品时可以从看到右上角标明了自己已有多少该物品。而常规的采购中心页并没有这一项功能,是个缺憾。

    这个功能便于玩家在购买时再次确认自己库存,避免用户为了检查而进行多次跳转。它与家具商店的优化思路是一致的,应该推广到游戏的各个角落里。

    结语

    《方舟》的 UI/UX 设计在同类型产品里是领先的,因此研究其设计思路有着较高的参考价值。希望读者在看完这篇文章之后,能有所收获。

    欢迎各位留言探讨。

    参考资料:

    1. 游戏观察 《第一手游网2019年5月手游曝光度数据报告 和平精英表现优秀
    http://www.youxiguancha.com/hangyezixun/55845.html , 2019-06-06

    2. 《明日方舟》UI/UX 分析——藏在好看背后的先进性
    https://mp.weixin.qq.com/s/276iXWXkLCf_T3IheN0MAA,2019-07-17