炉石传说 UI 浅析

您所在的位置:网站首页 炉石传说游戏画面 炉石传说 UI 浅析

炉石传说 UI 浅析

2024-07-18 03:15:15| 来源: 网络整理| 查看: 265

大家好,我是老人,一名《炉石传说》的四年老玩家,也是一名业余UI设计师。2017的夏天,我还是高中生,《炉石传说》凭借其业内饱受好评的界面,简单易懂的玩法立刻抓住了我的眼球。我看到了UI的未来——一套有实体感,动效微妙,全3D建模的生命体。

木匣,宝石,和岩石实体感

在《炉石传说》中,每件物品都具有「实体感」。小到「一颗」法力水晶,大到「一盒」卡牌收藏。

尤其是在卡牌收藏界面中,每张卡牌都由特定的材质组成,带有恰到好处的阴影,让你一看就明白「这是一张可以堆叠,收藏的卡牌」。卡牌收藏的外框也由羊皮纸,木框,红绸纸等材质构成,外观看起来就像现实生活中的「一个祖先流传下来的宝匣」。

《炉石传说》的卡牌收藏界面

这种「实体感」,极大增加了游戏界面的亲和力,降低了新手游玩的门槛。因为游戏界面中拟真的材质,很容易让人联想到是在影射现实生活中的哪个熟悉物体,从而降低了学习成本,用户也不用再去思考「这个界面是做什么用的?」。 

甚至就在《炉石传说》的卡牌描述里都饱含着关于「实体感」的暗示。例如:「洗入牌库」而非「置入牌库」 「消灭随从」而非「移除随从」。这些细节都能帮助用户更快地融入进游戏规则。

当你可以用现实生活中的经验去理解一个游戏,这个游戏对你而言就不再陌生。

《炉石传说》中的卡牌描述反馈力

UI的很大一部分作用便是告知用户:「你做了什么」,并引导用户「接下来该怎么做」。《炉石传说》很好的做到了这点。

简洁易懂的插画与教程能让新人很快的理解游戏机制,而对用户操作的「反馈」则是对这一理解的升华。在「炉石传说」中,你每执行一次操作,都能得到相当足的「反馈力」。例如:

•  按下按钮时的金属声,按钮看上去就像真的被压下去了。

•  发生重大事件时的屏幕震动。

•  每位角色被用户操作攻击时都会呐喊台词。

《炉石传说》中的部分按钮风格化

由风格迥异的材质构建的游戏界面,带来的另一个显而易见的好处便是:利于树立自身品牌的形象。

试想:看到下方的两张图,你是否一眼就能看出来那张是炉石的界面?这便是「风格化」界面的好处。凸出的风格,能够让看客在茫茫的信息流中一眼认出你的品牌。再加上炉石界面复古的羊皮纸风格便于记忆,一下就能抓住目标群众的眼球。

羊皮纸和其他界面火焰,冰霜,和奥术影射现实的特效

《炉石传说》的老玩家对下面的场景一定不陌生:

•  烧毁卡牌时,一张卡牌从牌库移出,然后被炙热火焰的火焰侵蚀,在「嘶」的音效中化为灰烬,屏幕周围还残存着些许火星。

•  释放法术「暴风雪」时,一颗颗冰雹从天而降,猛烈的击中敌人,将其结成冰块,屏幕弥漫着寒冷的雾气。

•  传说英雄牌「暗影收割者安度因」登场时,安度因的暗影身形在屏幕中缓缓现身,随后转化为一股暗紫色的能量,冲向年轻的安度因王子,将其黑化成死亡骑士。这股能量的冲击使得英雄周围弥漫着暗紫色的烟雾。

安度因的变身特效

对了,还有标志性的卡牌「死亡之翼」忘了介绍。不过那般壮丽震撼的出场特效我也难以用文字描述,请各位读者去「炉石传说」中亲身体验。

这些复杂而又精美的特效,即做到了亮眼,又和「炉石传说」的界面框架巧妙地融为一体,很难说与炉石的UI团队没有关系。

深层次的逻辑

和各位读者一样,最初我也是被「炉石传说」这些精美的特效所吸引。但随着我游玩的时间越来越长,我发现事情并没有那么简单——这些特效可以长久的持续,而不会使人产生疲劳,也不会使人感到有什么不恰当,这其中必然有强有力的底层逻辑作为支撑。

首先,为什么是冰霜,为什么是火焰?为什么「直到下个回合无法攻击」要用「冰霜」作为意象?这些看似不是问题的问题,都值得我们深入探讨。

冰和火  houdind模拟

思考之后,我们会发现,这些逻辑实际上还是开头谈到的——对现实生活特定物品的影射。即借由你现实生活中操作一个物体的经验,来对待游戏中虚拟的物体。

比如看到「冰霜」,我们首先会想到「寒冷」,再然后联想到「毫无生机」「停滞不前」。而这恰恰与游戏中「无法攻击」的概念吻合。真是天衣无缝。

再比如「火焰」,我们首先想到「炙热」,再然后联想到「灰飞烟灭」。这也与游戏中的「死亡」吻合。所以,在游戏中,我们经常使用「火焰」法术来终结敌人。而「冰霜」法术通常只是帮我们拖一会儿。

不止炉石,就在我们身边,都有许多「影射现实」的逻辑设计。比如UI中「开关」,看起来就好像一个真的能拨动的开关;MacOS BigSur中的电量图标,看起来就像(奶瓶)一颗五号电池。

BigSur的绿奶瓶图标,一流的审美,十分的经典动态化

如果你中了我的计,去下载《炉石传说》体验了几把,那么你一定会体验到「炉石传说」界面一个显著的特点:所有的UI组件,都处于动态的变化之中。

包括高亮的描边,宝石的背景,金卡的动画,这些控件都处在时刻的变化之中,这赋予了游戏界面生命张力:就像「呼吸」一样。

《炉石传说》中几乎每个控件都处于变化之中l

与静态化的界面不同,「动态化」的界面具有更强的亲和力,能够呈现的信息更丰富,同时层次感也更强。

有时电脑上正在运行的App卡住了,如果这个App使用的是静态化的界面,那么在没有交互的情况下,我们很难发现界面卡住了。而此时「动态化」界面的优点就显现出来了:动态化界面呈现的信息实时的,如果App卡住了,那么就等同于「呼吸」停止了,我们很快就能有所察觉。

细心观察,不止炉石,其他很多App,网页中也含有动态化设计,比如「少数派」首页的滚动信息展示,许多网页动态展示的广告。

少数派首页的滚动式宣传页

不过凡事皆有利弊,「动态化」也有一些缺点,比如:

• 开发资源大:设计师将一个动态化界面设计交给程序员,等到界面上线时,程序员头发都掉光了。

• 分散用户注意力:「动态化」设计,应该与其他界面元素和谐共处。试想:在你浏览网页的时候,一个广告在右下角跳来跳去,那画面实在太美。

以上,就是我对《炉石传说》UI的部分解读,且做抛砖引玉。

 



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


    图片新闻

    实验室药品柜的特性有哪些
    实验室药品柜是实验室家具的重要组成部分之一,主要
    小学科学实验中有哪些教学
    计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
    实验室各种仪器原理动图讲
    1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
    高中化学常见仪器及实验装
    1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
    微生物操作主要设备和器具
    今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
    浅谈通风柜使用基本常识
     众所周知,通风柜功能中最主要的就是排气功能。在

    专题文章

      CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭