译文:值得每位开发者学习的6款经典UI设计

原文链接:http://www.gamasutra.com/view/news/289637/6_examples_of_UI_design_that_every_game_developer_should_study.php

译者语

先科普一下HUD(Head Up Display)平视显示器,是运用在航空器上的飞行辅助仪器。游戏里的状态条,显示各种数值给玩家查看,UI的一部分。

我语文不太好,有时候只能在茶壶里煮饺子,表达不清楚,o(>﹏<)o别喷我。我不做设计,有些梗看不懂,比如毛妹的例子吧,我觉得守望里每个英雄HUD设计都一样。大家见笑啦!

正文

游戏开发过程中,人们对HUD和UI设计缺乏足够的重视。HUD和UI决定了玩家如何与游戏核心系统进行交互。它们不仅仅是展示玩家的人物数值和内世界环境,还能帮助游戏塑造玩家的行为。比如,一个生命符号提示玩家受了重伤,又或用一个小地图突出任务系统,这些设计都会显著影响玩家与游戏的交互,决定哪个游戏元素要优先处理。

为了更好的了解HUD和UI设计,我们采访了在这一领域经验丰富的开发者。他们分享了业内的一些优秀设计,以及制作经验。

1)皇室战争 - 展示和滚动

皇室战争中有很多设计值得借鉴。大部分游戏内容都从一个简单的按钮开始(对抗塔防游戏,每个玩家通过部署攻势,保卫国王和两个塔),里面包含的内容布置得井然有序,设计精巧。

译文:值得每位开发者学习的6款经典UI设计_第1张图片

DIGIT Game工作室的UX负责人Om Tandon称赞皇室战争,跳出了大多手机游戏为了吸引中度玩家(界于休闲和重度游戏之间)而陷入的设计坑。“纵观当今的中度手机游戏,你看到的都是极其相似的主界面,每个大厅都布满了通往战场,任务,商店,社交等各种入口。”Tandon认为这种设计会带来一种不和谐的矛盾,玩家经常要在不同界面之间来回切换,或者必须回到主界,每个界面的美术风格和背景又不同。这使得游戏加载的次数增加,随着“越来越多的动态增加的数据需要与服务器交互,因为它们不是保留在本地的。” 皇室战争的HUD里有玩家所有操控选项,而不隐藏在次级菜单中。简洁明了的UI设计便于玩家在多标签下自由切换。“每个主板块下的次级信息也都在其上方区域内展开,大大减少了下拉菜单。”Om说道“每个板块的内容瞬时加载,使得滚动标签的设计进一步完善,迟缓的加载减少了。”

小结:皇室战争平滑设计的重要参考价值,在于把信息在界面中充分展现,尽可能做到易于进入。让用户在一大堆菜单中等待加载不是很有趣。

2)半条命2 - 动态和听感

Valve素来擅长打造简单平滑的HUD,美观贯穿游戏始终,而半条2最具代表性。Bungie公司的UI主设计师David Candland称其巧妙的设计,在半条2上线时还没有其他人尝试过。

译文:值得每位开发者学习的6款经典UI设计_第2张图片

“这是我最喜欢的HUDs之一”Candland说道,“单琥珀色调色板看起来很独特,成为游戏不可或缺的特点。其简洁又不破坏游戏的战斗环境。我十分喜欢足迹经济(economy of the footprint)。”他特别指出,半条2的HUD里舍弃了那些不会马上用到的元素,比如存放着的武器。“简明的有需数据块让认知负荷变轻了。”他说道,“而当它们出现时,动画即精简又响应迅速。”“语音在HUD中与视觉同等重要。”“你会清楚记得游戏里那些声音。在激烈战斗中,当你想了解隧道中的情况,可屏幕边缘可见度很低。独特而清晰的语音提示足以告诉你是捡到了弹药,身处险境,还是回血了,即使在最紧张的战斗环境下。没有HUD时也不会有问题,半条2的设计是一个非常好的实例,对我的作品影响深远。”

小结:半条2向我们展示了HUD不是设计最后才要考虑的内容,或者将其从游戏美术整体中剥离出来。其实HUD也可以设计得有吸引力,而不仅仅是为了从视觉上传达信息。

3)炉石 - 触觉和清晰

和皇室战争一样,炉石将简单成熟的公式用不同寻常的风格呈现。该风格最大特点是信息的通畅,HUD突出重点的信息,在用户用时能看明白。Ubisoft的一位游戏设计师Stanislav Costiuc指出,卡牌游戏的触觉呈现和HUD的易读性是游戏成功的重要因素。

译文:值得每位开发者学习的6款经典UI设计_第3张图片

“主要信息必须明确,谁能进攻,谁将要承受致命伤害,谁加法力”Costiuc说道,“无论是在战斗还是单纯点击菜单,炉石对于游戏内每一种操作的视觉上和听觉上给予的反馈都处理的非常好。即便只是绕着屏幕移动卡牌,这样简单地点击都令人满意,。”

小结:让HUD真正成为游戏的一部分,而不是为了完成界面额外添加的一些层。顺畅体验才能让玩家专注在玩上。

4)守望先锋 - 紧凑和集中

和其他基于分类(class-based)的多人射击游戏一样,守望先锋也有面临同样困扰,如何让HUD的设计适用于每个英雄。

译文:值得每位开发者学习的6款经典UI设计_第4张图片

Massive Entertainment的高级UI美术Oliver Janoschek认为毛妹的HUD最有效,即让玩家获得了重要信息又可以保持行动。

“我所拥护的UI设计理念是,要把所有信息都放到一个用户可集中精力的区域,不要让他的眼睛四处观望。”Janoschek说道,“毛妹的能量条正好位于实际的十字线,玩家很容易看到和评估信息。精细的设计也不会让这一元素影响到玩家操作。保持在同一位置,也便于玩家对于游戏中的各种状况作出反应,对于快节奏的FPS游戏来说这很重要。”

小结:在小范围内所嵌入的信息越多并且易懂,越好。

5)刺客信条 - 少即是多

译文:值得每位开发者学习的6款经典UI设计_第5张图片

有时候,整体去掉HUD才是打造伟大设计的高手段。来自Ubisoft的设计师Stanislav Costiuc这样说道。“我必须讲一下刺客信条,不是因为它的HUD做得好,而是因为游戏关掉HUD之后体验更好。游戏在设计之初就没有考虑HUD,体验当然不同。”

在游戏里去掉HUD,像刺客信条,在一个开放大世界里进行刺杀,亲切(lovingly)地渲染环境可以带来沉浸感,如果时常有提醒出现不会让你觉得自己是在玩一个模拟刺客的游戏。没有HUD,纯粹呈现动作,让玩家与游戏人物之间的关联更纯粹,所有人物都是一个密码。

“当你在刺客大厅被告知,要去犹太人中心附近的市场里寻找信息时,你不会想按个钮就到,然后草草完成任务。”他说道,“你会爬上房顶,四下观察,找到远方大门上的Star of David,那就是你要去的地方!到达之后,你会在附近的市场搜索,用Eagle Vision找信息,通过那些名声不太好的人打探消息,或者你碰巧听到传令官正说起你的目标。整个调查随着你对这个城市的深入了解发展下去,如何捕捉你所看到的和听到的信息差异,引导着你最终达成目标。”比起在小地图上创建一个任务图标,这样的设计体验会更有带感和成就感,当然也需要环境设计,任务设计以及剧情设计的配合。

小结:设计哲学中可圈可点的是,没有HUD的一些情况下游戏表现会更突出。

6)Dead Space - 融合与吸引

译文:值得每位开发者学习的6款经典UI设计_第6张图片

去掉HUD对于像刺客信条这样的游戏来说是一个好的选择,还有游戏选择将其融入其中,比如Dead Space的HUD是一定要的,其设计既没有牺牲功能性,又提升玩家沉浸度。Epic Games高级设计师Jim Brown称赞Dead Space的做法让HUD即服务了游戏内人物,又满足真实玩家的操作需求。

“玩Dead Space需要很多操作,设计HUDs时要有创意。”Brown说道,“生命值在你的后背显示,头上的地图投影是楼层规划,引导你进入下一目标。这是一个突破性的设计,完全打破传统HUD设计理念。这一设计对于游戏的影响力甚至大于游戏本身的玩法,而这个事实却往往少被提及。Dead Space是一款结合了射击和生存的恐怖游戏,HUD对于游戏内营造游戏恐怖气氛起到了非常好的作用:比起把它们从游戏中剥离出来单独叠在2D中,现在的变现形式更助于玩家每时每刻保持注意力。”

在设计HUD/UI时,注意力分散是开发者要面对挑战之一,Brown说道,不过EA Redwood Shores用一种独有的方式非常好地解决了问题。

“在你制服上的生命条同时是玩家眼睛的焦点,在黑屋子里也是你仅有的光源,这有助于营造紧张的氛围,让玩家产生压迫感或想一探究竟。”投射线(projected lines)是引导玩家通过复杂级别的好方法,但同时放慢了玩家脚步,当他们需要查阅自己的目标时,会被锁在一个地方。玩家一旦停止移动,就会陷入易受攻击的状态,玩家需要在游戏过程中要做出很多重要决定。再一次证明,好的UI设计不仅是有趣,而有助于营造游戏紧张悬疑的气氛。

小结:通过Dead Space我们学习到,那些被其它游戏处理得平庸和缺乏重要性的元素,在高阶设计中可以成功结合为优秀内容。做得好的HUD不仅仅是HUD,它更像是游戏世界的固有组成部分。

你可能感兴趣的:(译文:值得每位开发者学习的6款经典UI设计)