大家好，我是老人，一名《炉石传说》的四年老玩家，也是一名业余UI设计师。2017的夏天，我还是高中生，《炉石传说》凭借其业内饱受好评的界面，简单易懂的玩法立刻抓住了我的眼球。我看到了UI的未来——一套有实体感，动效微妙，全3D建模的生命体。
在《炉石传说》中，每件物品都具有「实体感」。小到「一颗」法力水晶，大到「一盒」卡牌收藏。
尤其是在卡牌收藏界面中，每张卡牌都由特定的材质组成，带有恰到好处的阴影，让你一看就明白「这是一张可以堆叠，收藏的卡牌」。卡牌收藏的外框也由羊皮纸，木框，红绸纸等材质构成，外观看起来就像现实生活中的「一个祖先流传下来的宝匣」。
这种「实体感」，极大增加了游戏界面的亲和力，降低了新手游玩的门槛。因为游戏界面中拟真的材质，很容易让人联想到是在影射现实生活中的哪个熟悉物体，从而降低了学习成本，用户也不用再去思考「这个界面是做什么用的？」。
甚至就在《炉石传说》的卡牌描述里都饱含着关于「实体感」的暗示。例如：「洗入牌库」而非「置入牌库」 「消灭随从」而非「移除随从」。这些细节都能帮助用户更快地融入进游戏规则。
当你可以用现实生活中的经验去理解一个游戏，这个游戏对你而言就不再陌生。
UI的很大一部分作用便是告知用户：「你做了什么」，并引导用户「接下来该怎么做」。《炉石传说》很好的做到了这点。
简洁易懂的插画与教程能让新人很快的理解游戏机制，而对用户操作的「反馈」则是对这一理解的升华。在「炉石传说」中，你每执行一次操作，都能得到相当足的「反馈力」。例如：
• 按下按钮时的金属声，按钮看上去就像真的被压下去了。
• 发生重大事件时的屏幕震动。
• 每位角色被用户操作攻击时都会呐喊台词。
由风格迥异的材质构建的游戏界面，带来的另一个显而易见的好处便是：利于树立自身品牌的形象。
试想：看到下方的两张图，你是否一眼就能看出来那张是炉石的界面？这便是「风格化」界面的好处。凸出的风格，能够让看客在茫茫的信息流中一眼认出你的品牌。再加上炉石界面复古的羊皮纸风格便于记忆，一下就能抓住目标群众的眼球。
《炉石传说》的老玩家对下面的场景一定不陌生：
• 烧毁卡牌时，一张卡牌从牌库移出，然后被炙热火焰的火焰侵蚀，在「嘶」的音效中化为灰烬，屏幕周围还残存着些许火星。
• 释放法术「暴风雪」时，一颗颗冰雹从天而降，猛烈的击中敌人，将其结成冰块，屏幕弥漫着寒冷的雾气。
• 传说英雄牌「暗影收割者安度因」登场时，安度因的暗影身形在屏幕中缓缓现身，随后转化为一股暗紫色的能量，冲向年轻的安度因王子，将其黑化成死亡骑士。这股能量的冲击使得英雄周围弥漫着暗紫色的烟雾。
对了，还有标志性的卡牌「死亡之翼」忘了介绍。不过那般壮丽震撼的出场特效我也难以用文字描述，请各位读者去「炉石传说」中亲身体验。
这些复杂而又精美的特效，即做到了亮眼，又和「炉石传说」的界面框架巧妙地融为一体，很难说与炉石的UI团队没有关系。
和各位读者一样，最初我也是被「炉石传说」这些精美的特效所吸引。但随着我游玩的时间越来越长，我发现事情并没有那么简单——这些特效可以长久的持续，而不会使人产生疲劳，也不会使人感到有什么不恰当，这其中必然有强有力的底层逻辑作为支撑。
首先，为什么是冰霜，为什么是火焰？为什么「直到下个回合无法攻击」要用「冰霜」作为意象？这些看似不是问题的问题，都值得我们深入探讨。
思考之后，我们会发现，这些逻辑实际上还是开头谈到的——对现实生活特定物品的影射。即借由你现实生活中操作一个物体的经验，来对待游戏中虚拟的物体。
比如看到「冰霜」，我们首先会想到「寒冷」，再然后联想到「毫无生机」「停滞不前」。而这恰恰与游戏中「无法攻击」的概念吻合。真是天衣无缝。
再比如「火焰」，我们首先想到「炙热」，再然后联想到「灰飞烟灭」。这也与游戏中的「死亡」吻合。所以，在游戏中，我们经常使用「火焰」法术来终结敌人。而「冰霜」法术通常只是帮我们拖一会儿。
不止炉石，就在我们身边，都有许多「影射现实」的逻辑设计。比如UI中「开关」，看起来就好像一个真的能拨动的开关；MacOS BigSur中的电量图标，看起来就像（奶瓶）一颗五号电池。
如果你中了我的计，去下载《炉石传说》体验了几把，那么你一定会体验到「炉石传说」界面一个显著的特点：所有的UI组件，都处于动态的变化之中。
包括高亮的描边，宝石的背景，金卡的动画，这些控件都处在时刻的变化之中，这赋予了游戏界面生命张力：就像「呼吸」一样。
与静态化的界面不同，「动态化」的界面具有更强的亲和力，能够呈现的信息更丰富，同时层次感也更强。
有时电脑上正在运行的App卡住了，如果这个App使用的是静态化的界面，那么在没有交互的情况下，我们很难发现界面卡住了。而此时「动态化」界面的优点就显现出来了：动态化界面呈现的信息实时的，如果App卡住了，那么就等同于「呼吸」停止了，我们很快就能有所察觉。
细心观察，不止炉石，其他很多App，网页中也含有动态化设计，比如「少数派」首页的滚动信息展示，许多网页动态展示的广告。
不过凡事皆有利弊，「动态化」也有一些缺点，比如：
• 开发资源大：设计师将一个动态化界面设计交给程序员，等到界面上线时，程序员头发都掉光了。
• 分散用户注意力：「动态化」设计，应该与其他界面元素和谐共处。试想：在你浏览网页的时候，一个广告在右下角跳来跳去，那画面实在太美。
以上，就是我对《炉石传说》UI的部分解读，且做抛砖引玉。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。