随身风暴英雄V1.50产品秘闻（二）——英雄对比

随身风暴英雄V1.50是我进网易暴雪合作部后负责的第一款产品。趁着这次三天假期，每天写一小篇关于这款产品的设计思路，算是沉淀一下自己，同时总结这个阶段的工作。顺便透露下，目前V2.00版已在锐意开发中。

第二篇讲英雄对比的产品设计思路。

英雄对比界面预览.png

英雄对比是目前所有竞品都没有的原创功能，出发点是想以对比的方式方便新手玩家更快找到自己心仪的英雄。虽然这个功能并不算大功能，但我们还是比较认真地去琢磨如何设计得好用些。我们主要是从以下三个方面去思考的：

一、对比什么；

二、是否能标准化；

三、如何呈现。

我们首先考虑需要对比英雄的哪些方面。最先想到的就是目前这个版本里的数值。这些数值在游戏里都能找到，很容易就成为我们英雄对比功能的基础。

但其实在设计时，我们还想过更多，包括英雄的天赋、技能是否需要对比。而在甄选这些对比因素的时候，我们引入了标准化的概念。即我们所面对的这个因素，在两个英雄身上，是不是具有可比性。如果没有可比性，是否能通过某些方式将这些数据转化为可比较的。此时若答案还是否定的，则判定为非可对比要素，不进入英雄对比功能。

以英雄技能为例，维拉的E技能“影轮翻”的效果是“冲向目标位置”，而诺娃的E技能“全息诱饵”则是“生成诱饵佯攻敌人，持续5秒”，不具备可对比性，并且我们完全找不到转换方法使其变为可对比，所以选择放弃。

当然，即使我们有了“是否能标准化”的准则，还是在实际操作中碰到过一些纠结的情况。

比如说上图中有一栏“法力/酒量/怒气”。就目前技术测试阶段可使用的32位英雄而言，其中30位的能量描述为“法力”，1位（陈）为“酒量”，1位（桑娅）为“怒气”。之所以会出现这种不统一的情况，是因为风暴英雄的英雄皆出自于暴雪公司其他游戏系列，每个英雄在加入风暴英雄前都已有非常完整的设定。暴雪的《魔兽争霸》、《星际争霸》、《暗黑破坏神》三大系列的背景设定迥然不同，造成英雄的能量描述很难统一。

在这个问题上，我们最先是考虑统一使用“能量”来描述这一属性。但正如上文所述，风暴英雄的角色都有很浓厚的角色底蕴，我们很担心简单粗暴地使用“能量”会破坏这种感觉。同时，“酒量”和”怒气“在游戏内的积累与消耗方式确实也和“法力”不尽相同，要说完全具有可比性似乎也很勉强。在一番纠结和讨论后，我们最后还是觉得这个属性值在游戏内非常关键，必须破格纳入对比功能中。而在项目名上，还是希望尽可能保留暴雪的角色底蕴，将这栏处理为“法力/酒量/怒气”。对我来说，这个名字不算很满意，也很难保证未来游戏内加入《失落的维京人》或《守望先锋》的角色后还能适用，所以还在思考更好的方案，现在暂时这样处理。

另一个纠结过的项目是英雄天赋。天赋和技能比较像，每个英雄的天赋差异很大，不具备可比性，理应放弃。但是天赋有个特点，有些天赋在点选后能影响英雄的基础数值（如生命值、法力、攻击伤害等）。如果在这个页面引入天赋，则能使数值的对比更加精确，适应各种天赋配点情况。不过我们最后没有把天赋加进来，主要是考虑到等级+天赋+数据三个互相影响的因素在同一个页面上交互过于繁重，暂时没想出更好的设计来消减，同时我们也认为新手玩家尚未成长到存在如此精度的定制性需求，所以选择放弃。而在这里，我还想引出想说的第三点——如何呈现。

这里所说的“如何呈现”包含界面设计和交互设计。它们在这个页面不仅如上所述承担甄选对比项的职责，更重要的是将挑选出来的对比项以易懂易用的形式呈现给玩家。

挑三个小点讲讲：

1、对比样式。由于最终确定的对比内容都是数值类数据，在思考对比形式时候选方案也集中在柱状图与雷达图两种里。最后正如大家所见用了柱状图，没用雷达图是因为各项数值的刻度不统一，使最终做出来的雷达图并不如想像中易懂。其实柱状图也想过两种方案，除现在这样两条分列的，还有一种是在同一根柱子上分左右半段。大家也能看到英雄间数值的差异不是很大，前一种方式使不大的差异在视觉上更具对比性，所以放弃了后一个方案。

2、对比颜色。虽然俗话说“自古红蓝出CP，一对百合一对基”，不过我们使用蓝色和红色与这句大实话雷同真是纯属巧合。蓝与红是风暴英雄游戏内我方与敌方的标识色，作为官方APP，我们希望给玩家在APP内与游戏一体的感觉。但我们也并没完全照搬游戏内的蓝与红，根据我们APP的色调，设计师对蓝与红进行了一些色值上的微调。

3、对比交互。这里提交互主要想讲底下那条悬浮等级条。

等级条.png

这个条我们做了些小细节，按着时会在上方出现放大的当前等级，这样你就不会因为大拇指按着而不知道自己具体拖动到第几级了。另外我们在10级和20级的位置增加了刻度点（仅限iOS，Android存在技术问题），也是为方便玩家快速定位到要看的等级。本来还想在这两个等级上做吸附效果，但考虑到这样会使确实想定位到9、11、19、21级的玩家产生误操作的风险，故放弃了。另外按照传统设计，等级条应该是放置在数值之上的（拖动等级改变数值，这是符合内在逻辑的），但我们发现这样设计大拇指按在等级上时会阻挡很大一片视线，用户只能在放开手指后才能看到该等级对应的数值。我们权衡了一下，认为此处追求易用性比损失的那些内在逻辑更加重要，并且即使将等级条置于数值下方用户还是能理解两者间的关系，所以改成了现在的设计。

关于英雄对比的“产品秘闻“大致就讲这些，更多个中细节希望大家能下载APP直接体验，也欢迎有意见建议的同学找我交流。

官网下载页

http://www.heroesofthestorm.com.cn/minisite/appsite

Lofter页
http://www.arthurzhuang.com/post/1ccab041_5019303