游戏开发论坛

 找回密码
 立即注册
搜索
查看: 4778|回复: 0

[转载] 怎样做好界面设计?《神都夜行录》设计团队透露了这些细节

[复制链接]

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
36572
发表于 2019-3-12 13:44:39 | 显示全部楼层 |阅读模式
说起美食,想必不少90后对动画《中华小当家》里的料理有深刻的印象,如果说人们是通过料理解决温饱获得幸福,那玩家则是通过界面设计来“观察”和“触摸”游戏。界面体验在游戏设计中不可缺少,他们的设计思维和方法是什么?界面设计师能为产品提供什么样的帮助?

在2019网易游戏开发者峰会上,网易游戏视觉设计经理依伶(10小姐姐)以《神都夜行录》、《猎魂觉醒》的设计故事和思路为例,和大家分享了设计中的痛点和设计对产品的加成。

1.jpg

以下是分享实录:

大家好,今天想和大家聊聊设计背后的料理之道,主要以《神都夜行录》为例谈谈界面设计方面的内容。

相信大家都知道《中华小当家》,小当家经常会说到:“料理的真谛,就是给人们带来幸福。”听起来可能有点中二,但这是他们的行业价值观。

那,设计给我们带来的是什么呢?

我将通过“不放过每一个设计”和“设计的幸福”两个方面来和大家探讨一下这个问题。

首先,我们为什么不放过每一个设计?我们平时都放过了哪些设计?

如果说料理的范畴是解决温饱,那我们设计的范畴是什么?我认为,设计不能只是解决温饱,它必须要给我们带来幸福。如果想成就这些幸福,我们应该不放过哪些设计呢?

不放过基础的设计

先来看一个案例:

2.jpg

这是一个二次确认框的基础设计,已经能够满足基本的需求。但我们的设计师并不满足于此,优化成了下面的版本。

3.jpg

为什么这样做优化?因为设计有一个非常重要的维度——使用场景。

这两个设计有什么不同?一是文案。出现这个确认框表示打开的是邮件页面,就不需要再出现邮件的标题。二是宽度,确认框之所以加长,是按照手游用户的使用习惯来定的,两只手的间距不宜过近,不然操作起来会非常麻烦。这一点我们体现在了《神都夜行录》的设计上。

4.jpg

5.jpg

对于使用场景,我们会从“是否合理、是否代入、是否戏剧“去讨论它的文案设计。回忆一下,每一个元素都是在权衡,看似简单的二次确认框也并不简单。

基础设计是设计师的立身之本,所以我们不该放过基础设计。

不放过常见功能的设计

市面上有很多常见功能的设计已经很完善了,那我们为什么还是要做常见设计呢?就好像饺子已经很好吃了,为什么小当家还能做出“升龙饺“?

如果某种类型的游戏已经拥有了很大的用户量,并且玩家已经形成了习惯,那我们是不是套用常用设计就好了、就没有空间再接着做设计了呢?

举个例子,常见的背包设计,装备栏会放在角色的两侧,端游时代开始就会这样设计。

6.jpg

但我们在试验过程中没有采用这种设计,下图是《猎魂觉醒》2015刚开始的背包设计方案,到2018年上线时依旧是这种布局。大家可以思考一下,为什么将装备格子放在屏幕左侧?

7.jpg

8.jpg

其实这样做是为了操作方便使手指操作的时候没有阻挡。

再举一个例子,下图是《第五人格》占卜师的护盾技能初期设计。

9.jpg

我们在设计的时候发现,常用的技能释放设计其实太过于靠近屏幕边界,手指会觉得难以操作。于是我们又做了另一版本,也就是现在游戏内的版本——目的就是为了解决屏幕边缘操作和防止误触的问题。

10.jpg

以上都是一些常见功能的设计,不难发现,我们设计师可以做的还有很多。100%的创新很难做到,但我们可以去做10%~20%的提升,那也是一种创新。

我们甚至还可以做一些更细节的设计。市面上竞技类的游戏大多都是2.5D的视角,如何去做3D视角下单手指控制技能瞄准和释放的操作?——大家可以体验一下《第五人格》当前的游戏版本找出答案。

这些可能都是一些很小的细节设计,不放过这些常见功能的设计是为了提升玩家的游戏体验,这是我们作为界面设计师应该去考虑的问题。所以,常见功能的设计是设计师成长的转折。

不放过关键的设计

作为视觉设计师,对界面设计而言最关键的莫过于视觉SEED,这是我们每一个设计师的出发点,它可以是有形的,也可以是无形的,这个应该如何推导出来呢?

我们以《神都夜行录》来作为一个案例推导。我们想做一款国风妖怪卡牌类的手游,它想营造的就是人妖共处的一个温暖的世界,“世间妖怪,皆有温度”是产品的基调。那这样的游戏我们怎么提出视觉SEED?怎样去进行界面设计?

11.jpg

首先我们找到了一些适合游戏风格的关键词,经过不断的推敲,最终找到了“妖气“这个元素。当找到妖气SEED之后,我们可以把它运用到各个层级的界面,统一游戏风格。找到独特的SEED,可以为产品提升它的特质,除此之外也可以让设计变得合情合理。

12.jpg

为什么选择妖气?——妖怪题材,自然会有妖气。

为什么选择金棕加蓝绿的配色?——因为当时我们找到一个唐三彩的配色,很符合《神都夜行录》唐代的设定。

最后,为什么选择暖色调妖气?——因为我们产品的基调:“世间妖怪,皆有温度”。

所以我们可以发现,当有了SEED之后,界面设计可以变得“合理化”、“系统化”、“标签化”。

13.jpg

14.jpg

当《神都夜行录》上线之后,运营活动的设计就成了我们最关键的设计。为了给玩家带去不同活动的不同体验,我们从交互设计开始,对整套设计进行了交互概念的包装。最后我们和视觉、动效设计师一起进行了视觉包装,才有了这样一套风格的设计。这也成为神都独特的风格。

综上所述我们可以发现,关键设计,是产品的增益BUFF,也是设计师的核心价值。

《神都》也不是一蹴而就的,期间我们迭代过六七次界面视觉。改了这么多版还需要优化?事实上我们追求的是设计品质而并非迭代。

一个游戏从一开始,从产品到风格都是不确定的。所以我们不放过每一个设计,是出于我们对自己产品的理解,也是对设计品质的追求和对自己的要求。但每一个设计并不是元素的堆砌,每一个设计都必须有价值。就好像“料理不能只是好吃而已,它必须要给人们带来幸福”。

设计能带来什么

回到最初的问题,界面设计给我们带来的幸福是什么?我们以鹿蜀活动作为案例。

15.jpg

16.jpg

这是神都一个非常风格化的界面设计,类似于一种乐器玩法,其实现在市面上做乐器风格的玩法设计是很多的。那鹿蜀活动有什么独特之处吗?

首先,这次活动的原画概念设计——鹿蜀,也是这次活动的主体。通过它的高级皮肤作为出发点,从交互设计开始对整套设计进行包装,包括“弦“的细节交互设计。然后我们从文案上,也是做了一个符合设计观的代入感的设计。

17.jpg

18.jpg

这只是交互稿,是唐代曲谱的一个形式,叫工尺谱。我们也对此去做了考证,这是汉字文化圈一个独有的记谱方式。我们的每个“弦“都对应个妖灵,每个妖灵都对应一个音阶和音符,每个音阶又对应妖灵背后的乐器。甚至每一个弹窗我们都做了不同的设计。然而这并没有完,我们的产品专门去北京采音,找老艺术家用真实的箜篌进行录音,也是希望激起玩家分享的欲望。

总结

如何要做好界面设计?

首先要符合世界观,强风格化才能有自身特色,这是为了“产品“;

其次我们要有情感共鸣,让玩家能沉浸到游戏里,这是为了“玩家“;

最后,设计标签要做减法,独特的标签才能持续获得粉丝,多元化标签反而容易被淡忘,这是为了“营销价值”。

界面设计能为我们设计师带来成就感,能实现玩家游戏体验的提升,获得玩家的正面反馈、营销价值以及为产品加成。

职业厨师就好比职业设计师。不难看出,职业设计师在每个细节点上,都可以做更深入的探讨,找到成就感。

19.jpg

所以,发现问题解决问题的成就感、实现自身追求、超越困难的决心、对事物的好奇心和永不磨灭的热情都可以成为我们坚持设计师这个行业的理由。

设计带来挑战的同时也带来机会,带来困难的同时也带来动力。慢慢我们发现,设计已经融入我们的生活。所以设计,其实是一种生活方式。

不忘初心方得始终。也许我们进入这行的初心只是因为喜欢。喜欢游戏,喜欢设计,喜欢画画……

如果说料理的真谛是带来幸福,那设计的真谛就是——用心做设计,用你的热爱,换玩家的热爱!谢谢大家。

作者:学院君  
来源:网易游戏学院
原地址:https://mp.weixin.qq.com/s/2H4mVplGEkkoXO6yUrJuwg

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-3-28 23:14

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表