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