游戏类产品体验日记（四）

小王的交互笔记

深圳/UX设计师/5年前/4991浏览

版权

游戏类产品体验日记（四）

小王的交互笔记

本期包含的游戏：《阴阳师：百闻牌》、《圣斗士星矢》、《侍魂：胧月传说》、《猎魂觉醒》、《新笑傲江湖》。

前言：大家好，我是小王，这段时间玩了不少款游戏，其中一些新颖的设计让我眼前一亮，我希望把这些分享给大家，所以写了这篇文章，其中不乏自己的一些想法，如果大家有不同的意见或者好的建议都可以留言，感谢。

大厅界面场景设计

游戏：《阴阳师：百闻牌》

模块：交互

说明：百闻牌大厅界面的设计和第五人格的有着异曲同工之妙，都是运用了场景来做界面。百闻牌这里是玩家通过上下滑动频幕，调整摄像头的位置，显示出上下方的内容。这里尽可能弱化HUD的存在，符合现实生活，玩家更容易代入进去，也非常生动，更好的传达游戏的世界观。不过，每个模块的认知成本相对来说更高，并且多了上下滑动的步骤也是设计师需要权衡的点。

头像动态表现

游戏：《阴阳师：百闻牌》

模块：交互

说明：游戏界面设计中一些标准化重功能的界面，其实在视觉上可设计的点已经不多了，大部分游戏都是保证功能实现就行。百闻牌这里不满足于此，在满足功能的前提下，把头像以及头像框做了类似spine动画的设计，表现的更加生动有趣。

弹窗关闭方式

游戏：《阴阳师：百闻牌》

模块：交互

说明：百闻牌的所有弹窗关闭没有照搬常规的点击右上角关闭按钮关闭弹窗，而是设计成“点击空白处关闭”。每次玩游戏的时候，一旦有比较窄的弹窗，特别是三级弹窗，关闭按钮都会处于频幕中间偏右的位置，十分难点，百闻牌这样设计，大大方便了玩家的操作，提高体验。

UI绑定场景

游戏：《阴阳师：百闻牌》

模块：交互

说明：在编辑阵容界面中，百闻牌把玩家的牌组预览跟场景中的卷轴绑定在了一起。VR，AR，3DUI，陀螺仪，UI绑场景，随着技术和硬件的提高，新技术陆续被各各游戏使用，每次出现都给予玩家更加新颖的游戏体验。

情感化设计/小猫咪

游戏：《阴阳师：百闻牌》

模块：交互

说明：有温度的产品，让玩家共情，一直都是设计师们的目的。百闻牌今日委托界面中，设计师把看板娘做了动画处理，看板娘和猫从左走路出来，接着猫挣脱了看板娘跑出频幕左边。这种设计非常非常有意思，虽然只是一个小点，但是让整个界面都生动了不少，仿佛在跟玩家互动，让玩家产生正面的情感，从而提升体验。

写实的场景化界面

游戏：《阴阳师：百闻牌》

模块：交互

说明：勾玉屋设计成为了一个日式小卖铺的样式，非常贴合现实，增强代入感。

万花筒样式

游戏：《阴阳师：百闻牌》

模块：UI

说明：百闻牌的抽卡流程跟阴阳师的差不多，不过这边把“画符”换了种表现形式，玩家一笔画然后跟万花筒一样，360°的镜像，形成最终图案，整体美术氛围非常好看，也很贴题。

玄学概念

游戏：《圣斗士星矢》

模块：交互

说明：在抽奖这个系统里面，圣斗士星矢应该是算这里面的佼佼者了。我认为里面有两个点设计的非常棒，一是代入了运势这个概念，“小吉”“大吉”之类的，加强了抽卡的玄学概念，这可以加强玩家的赌徒心理。二是整体包装设计为星座召唤，这和游戏的世界观简直是天作之合。

AR技术

游戏：《圣斗士星矢》

模块：交互/技术

说明：AR技术现在越来越多的用在了游戏。宝可梦，一起来捉妖再到现在圣斗士星矢，利用AR技术，玩家可以把游戏中的角色和现实世界联系起来，不仅可以更好的进行互动，更重要的是可以通过这种方式产生情感，提升玩家对游戏的忠诚度。

圣域速报

游戏：《圣斗士星矢》

模块：交互/视觉

说明：圣域速报是圣斗士星矢里面的一个系统，主要功能是提供最新的咨询给玩家阅读，就跟现实生活中的报纸一样。这里有趣的设计在于界面真的设计成了玩家拿着包装的样式，当玩家拖动页签时，手指也会拖动，一切都在模拟现实生活。

高频操作放在方便点击的地方

游戏：《侍魂：胧月传说》

模块：交互

说明：常规的组队界面，喊话按钮是放在人物模型上方的。平常散人组队的时候，喊话是一个比较常用的按钮，若放在处于不方便点击的上方，是非常不符合逻辑的。这里的新颖之处在于设计师很好的发现并解决了这个痛点，把一个常用的按钮放在了一个相对比较舒服的位置，方便玩家操作，很好解决痛点。

称号动画自定义

游戏：《侍魂：胧月传说》

模块：交互

说明：随着用户人群的年轻化，对个性化的需求越来越明显，也越来越多的游戏迎合这个需求。HUD的自定义，称号名称的自定义，帮派旗帜的自定义，都是比较有代表的设计。侍魂里面把称号的动画也给予付费玩家自定义，橙卡玩家可以自己编辑三个动画的播放顺序，这是一个比较新颖的设计点。

干净的主界面HUD

游戏：《猎魂觉醒》

模块：交互

说明：频幕上每一个控件都向玩家传达了至少一个信息，过多的控件不仅会打断玩家的代入感，更会因为信息量过大导致玩家的焦虑和紊乱。猎魂觉醒在主界面的HUD上做的非常不错，只传达了必要的信息，非常干净和清晰。

展开地图动画

游戏：《猎魂觉醒》

模块：交互

说明：玩家点击地图后，镜头会切成上图的样子，随着卷轴的展开，地图界面显示出来。这里是一个模拟现实的设计，这样的设计使得两个界面的跳转足够符合逻辑，也更加生动，增强玩家代入感。对细节的追求可以很好的提高游戏的品质，为玩家创造一个精致的世界。

功能栏

游戏：《猎魂觉醒》

模块：交互

说明：猎魂的功能栏设计在单独的一个界面内，这样做的好处是可以屏蔽多余的信息，让玩家专注于选择下一步的操作。

角色界面低打断感

游戏：《猎魂觉醒》

模块：交互

说明：猎魂这里并没有把角色界面做成一个全屏的界面，而是很好的利用了大世界中的场景和人物模型，这样做大大降低了界面跳转之间的打断感。并且这里也把非必要的信息（人物的装备等）降低了层级，需要玩家点击显示。

创角界面人物之间有联系

游戏：《新笑傲江湖》

模块：交互

说明：笑傲的创角界面可以说是把我惊艳到了，可以说是做的非常用心，也非常有创意。每一个门派的不同形象切换，都会有一个元素来引导摄像头。比如图中的成男无相切换到少男无相是，UI隐藏，小猫伸懒腰，接着跳到树上，摄像头跟着猫来到树上，就会看到在树干上躺着的少男无相。整个动画设计的非常好，运用一个小元素带动摄像头，引出在相同场景不同位置的两个角色，和逆水寒的创角有着异曲同工之妙。

抽奖的包装十分贴题