BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

Apple 设计大奖的设计之道 (3) 美观性

Apple 设计大奖的设计之道 (3) 美观性

今年的最后一个周末喽。不记得有多久没在周六做过更新了;上次这样在周六晚间琢磨着“发掉公众号之后去吃个汉堡吧”似乎还是 2016 年了?真是即无聊又让人觉得有趣的很。

发掉公众号之后去吃个汉堡吧。蛮希望在 2020 年来到之前把这套“设计大奖”结束掉的,不留小尾巴到新年才好;接下来或许会做机器学习方面的话题。想必又会是吃力不讨好的内容类型了。捂嘴笑。不过我什么时候在乎过用内容讨好谁了。微笑。

那么继续,上一篇中,来自布道者团队的两位主持人通过一款 app 和一款游戏的案例阐述了“精益求精”的重要性,错过的朋友不妨回看。今天是关于外观美学的话题。

设计大奖的设计之道 (3)

接下来我们聊一聊关于外观的话题。设计中的美观性是指那些你能够立刻从视觉层面感知到的东西,包括态度、观点等等。我们将通过三个游戏的设计案例来进行诠释。

美观性(Aesthetics)

无论对于 app 还是游戏,界面设计中的视觉风格、实用性、沉浸感和内聚力都是美观性的重要组成要素。因此,即便你是 app 开发者,也同样能从中学到重要的东西。

我们进入正题,首先来看 Thumper。

这款游戏从传统的弹珠台当中汲取灵感,并通过现代游戏机制使玩家充分沉浸在复古风格的游戏世界当中。在接下来的介绍中,各位可以特别关注于它极简的 UI 风格,因为整个游戏的沉浸化设计美学正是源自于此。

初次加载后,经典的街机风格游戏标题就会映入眼帘,怀古气息扑面而来。过去街机游戏的标题设计旨在快速抓住并维系玩家的注意力,使其不会被旁边的其他游戏所吸引。

正如 Thumper 的开发者们所说:“最好的标题设计应该是简单而强有力的,同时能够为接下来的整个体验设定下最为准确的基调。”

进入游戏后,我们的眼前只有美妙迷人的游戏世界,而没有任何额外的元素能与之相争。屏幕右上角的暂停按钮在游戏过程中会逐渐淡出,并化为斜划线的样式。这样即能为用户揭示出交互元素的触发方式,同时也能在视觉上完美地融入游戏环境。

没有繁琐的教学过程,玩家可以立刻上手,在游戏过程中学习必要的操作方式。游戏提供的第一个教学信息是“上划跳跃”,而且会通过“3,2,1”倒计时来告诉你最恰当的起跳时间;在需要执行上划手势的时刻,还会出现一个向上的箭头来进一步增强引导效果。

所有这些信息表现形式,连同优异的音效一起,塑造了有效的、非唐突的、沉浸式的游戏上手体验。

为了保持游戏的深度参与体验,得分和等级一类的信息只会在玩家触达关卡检查点时进行呈现。无论游戏还是 app,如果你希望营造更具沉浸感的产品体验,那么要尽可能避免在界面上持续显示过多的文字内容或是功能控件,帮助人们更专注地聚焦于当前场景。

另一个值得关注的 UI 简化策略是其生命值的呈现方式。在 Thumper 中,生命值并非以传统信息元素的形式显示在界面当中 - 玩家操作的甲虫本身就代表着这个指标,例如翅膀完全展开的形态意味着生命值全满,失去翅膀的形态代表只剩下一半的生命,完全破碎的身体则意味着结束。

这样一方面可以带来更强的情感代入感,一方面也可以确保玩家始终将注意力聚焦在游戏角色上面。

Thumper 简约的游戏界面所塑造的沉浸感可以令你无需过多关注于操作方式;它独特的美学表现形式可以持久地抓住玩家的注意力,使人沉迷于绚丽的视听与互动体验当中。

的确,美观性的合理运用可以提升人们的关注度,营造具有沉浸感的产品体验。除此之外,它还能为我们带来更多更实际的好处。接下来我们以 ELOH 为例。

这是一款休闲类的益智游戏,视觉风格非常独特,外观和手感的完成度都极高。

他们的设计历程是怎样的呢?下面让我来进行简要的介绍。这是 alpha 版本的 ELOH:

你可以看到类似的解密元素及游戏机制,障碍物上也有着拟人化的面部样式。显然,早期的外观样式与与后期相比有着很大的差距,但游戏机制基本类似。

那么他们是如何达到最终上线 App Store 的美观标准的呢?首先,他们雇了一位插画师。这位插画师探索了一系列图形风格与配色体系;我们很容易就能发现,在他所尝试的不同基调与风格的搭配下,游戏的主题外观会产生多么大的变化。

确实,即便外观样式没有那么漂亮,你的 app 或游戏也可以正常工作;但 ELOH 的设计师为这款游戏带来的美观性,其作用却远不止“漂亮”。它提升了可互动元素的可视性与生命感,游戏的可玩性也因此而增加。

这款游戏当中的可互动元素种类并不是很多;对于每一类,他们都进行了认真的打磨,譬如这个按钮:

细节当中的视觉效果令游戏角色栩栩如生。例如当你拖拽这些障碍物,或是当弹球撞到它们时,它们的反应是如此的充满个性,你能感受到设计者们在其中注入的心血。

ELOH 在美观性上的投入度使整个游戏的体验得到了深化,相比于 alpha 版本,之后的美学风格与游戏意图本身更好地结合在了一起,细节中的个性元素也能够在情感层面与玩家建立起关联。

美观性可以体现在产品的任何组成要素当中,这里也包括 app 图标。我们以之前介绍过的 HomeCourt 为例。除了 app 本身,他们的团队同样在 app 图标上下了一番功夫。

其中的图形显然是从篮球场的元素当中汲取了灵感。两个首字母“H”和“C”共同构成了球场的边线与三分线,而背景橙色也是取自于篮球的颜色。你可以很容易地在一满屏的图标当中发现这个图标,而且它的样式也能让人理解这个 app 本身的功能所在。这就是非常优秀的 app 图标设计范例。

我们继续回到游戏的话题,来看看如何通过一套清晰、一致的视觉语言来提升产品的内聚力与品质感。

Ordia 这款游戏描述了原始生物的求生故事。有机滴状物的形象支撑起了整个游戏的视觉体验,无论是游戏内容和角色本身,还是选项菜单等 UI 元素,都可以自然的衔接在一起。

Ordia 的设计语言同样是具有功能性的,可以有效地传达出元素的交互特性以及不同角色的敌我属性。

正如他们的开发者所说,他们希望玩家能够始终感觉到自己正处于一个完整而一致的游戏环境当中。

完整而一致的环境感,这一点对于 app 和游戏来说都很重要。内聚力与一致性需要体现在设计的每一个方面。

同时,无论是视觉还是行为层面,你的 app 或游戏也必须和所在的系统平台保持高度的关联与一致性。譬如仅通过“分享”图标,你就可以判断 Ordia 是面向 iOS 而设计的。

虽然看起来并不起眼,但正是这些点滴当中的设计决策可以令用户在整体上感知到产品与平台之间的高度一致性。

高度的内聚力可以显著提升产品的品质感,但要做到这一点确实并不简单,你需要创建一套完整一致的设计语言。试着将每一屏界面排列在一处,从整体上观察其是否和谐一致。

最后简单归纳一下我们对于“美观性”的探讨:

  • 在 Thumper 中,美学要素塑造了令人持久关注并沉浸其中的游戏体验。
  • ELOH 向我们演示了如何通过外观的创作与打磨来提升游戏的可玩性及情感关联。
  • Ordia 与 HomeCourt 的案例让我们了解到美观性需要融入产品的每一个元素当中,进而从整体上实现具有内聚力和一致性的体验。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 设计布道师,设计师,独立开发者,译者,猫奴,音乐玩家。