最近到了赛季末了，输赢也不怎么在乎了，开始关注守望先锋的设计。在我看来，守望先锋的 UI 还是很好看的，不仅设计得十分简洁，而且用户体验很友好。昨天注意到了 UI 中的英雄血槽，觉得很奇怪。

奇怪的地方

来看看 DJ 的血槽。以前没怎么注意，昨天仔细数了一下有 8 个小格，嗯？为什么不是 10 个格呢？正常来说我们都希望取整呀。

再来看看别的英雄血槽。

烈空是 6 个小格。要是我来设计显示格数应该是 200 血的对应 10 小格，150 血对应 5 小格。这样才符合我们生活中的取整规则呀。

初步实现

因为最近也在做守望的 UI 组件，所以就想实现这个“血槽”组件。一开始还很容易的，在外面的“血槽” Wrapper 给定一个宽度，然后里面的小格就简单地除一下就好了，再设置 margin-left 搞个空隙，美滋滋。

先看看初步实现的代码

<div class="ow-blood-items" :style="{width: width + 'px'}">
    <span class="ow-blood-item"
        :style="getItemStyles(item)"
        v-for="item in itemNum"
        :key="item">
    </span>
</div>

Vue 文件里的 JS 实现如下

props: {
    total: {
        type: Number,
        default: 200
    },
    width: {
        type: Number,
        default: 200
    },
},
computed: {
    itemNum() {
        return this.total / 25
    },
},
methods: {
    getItemStyles(item) {
        return {
            width: this.width / this.itemNum - 2 + 'px',
            background: (item >= this.residual / 25) ? this.goneColor : this.residualColor
        }
    }
}

这里说下我是怎么算每个小格的宽度的，公式如下

写完一看，我感觉不太行。

怎么相隔会一大一小呢？打开开发者工具一看，上面的公式是算对的呀，宽度都是 31.333px。

再看看计算后的样式，直接吐血

明显四舍五入了，虽然只差了 0.002px，但是一看就看出来了，得改呀。

选定宽度

浏览器四舍五入真没办法了，要解决这个问题也很简单，只要不出现小数不就好了？所以我开始想 props 里的默认宽度应该选什么值才能 最大地被整除 呢。

这时候，我回看了一下守望先锋里所有英雄的血槽数，分别是 150, 200, 250, 500, 600, 800, 1000，对应的小格个数应该是（全部除以 25）6, 8, 10, 20, 24, 32, 40。现在的目标就是找到一个数，可以将这些小格数整除就好了。这个问题也太简单了，他们的公倍数太容易找到了——240 嘛。

设置了 240px 后果然好看多了。

因为这里每个小格的宽度都是可以被整除的，也就不会出现四舍五入的情况了。

总结

现在可以回答 “为什么要守望先锋为什么要设置 8 个格而不是 10 个格” 这个问题了，主要的原因就是找最小公倍数的时候，设置 8 个格的最小公倍数在其他方案里最小的。想像一下如果小格数是 3, 17, 23，那他们的最小公倍数就是 ，这样也太大了，很不方便设置总宽度。

联想到之前做的栅格系统，它的设计理念和刚刚推理的类似的，只不过是反过来用，如为什么一定要分 12，24 格呢？这里的原因是因为可以分成 1, 2, 3, 6, 8, 12, 24，而如果最大的为 10 就只能分成 1, 2, 5 了，分割的方案很少。

那如果 5, 10, 20, 25 不是更好么？这样的最小公倍数是 50，多完美呀。嗯。。。，因为英雄血槽数不是我规定的呀，是暴雪规定的呀。