All Design ldeas 在今年1月下旬在YouTube上预测了2020年的网站设计趋势。 

[视频] Web Design Trends in 2020

在视频中，我们看到的更多内容还是围绕在动效衔接上。

对比2019年，动画效果更为细腻，设计师力求在页面跳转中减少分割感，让阅读更加有趣味性。

在这几个片段中，一些设计手法已经被游戏界面所应用，但结合Web Design的设计思路，还可以有更多的想象力空间。

动态插画

动态插画的设计手法在游戏界面设计中并不陌生，尤其是卡牌游戏中的英雄养成或活动界面，所展示的立绘都有丰富的动态和特效渲染。

但非卡牌类游戏或常规系统中，很少采用插画+动效渲染的设计。一方面出于成本考虑，另一方面也是由于在设计之初，并没有一套类似Web Design的包装构思。

文明觉醒 

视频banner 

视频banner的设计手法让静态界面显得更加高级，在背景加入动态效果很好的烘托了氛围主题。

在游戏中，这种手段会用在登录界面，用一段主题明确的动画视频强化界面品质感。 

GUI其他界面也可以参考Web中的氛围视频，简单的动态效果作用于提高界面质感。

牵引动效设计 

在牵引动效的配合下，UI界面的信息呈现更清晰生动，页面之间的衔接上也更加自然平滑。

在多页签切换时，流畅的交互是一种享受。

在《战双·帕米什》中采用这种方式进行页面切换处理，利用3D角色的不同视角作为视觉牵引，得到了优质的交互体验反馈。

3D

在Web的3D趋势中，我们可以得到一些设计启发：

常规的平面视觉信息其实有机会处理成立体关系。

尤其是3D游戏的很多系统会加载道具模型，针对一些养成行为的交互体验可以尝试这种设计手法。

总结

在2019年扁平化的GUI设计趋势中，设计师关注对质感的提炼，让视觉体验变得更加简约。

当脱离了沉重的拟物化设计之后，GUI设计师也在苦苦探寻如何在扁平风格里加入更有沉浸氛围的设计元素。

通过以上的四个Web Design示例，或许能找到一些灵感：

1，插图作为非常流行的设计元素，为用户体验增加了“人性化的接触”；

2，为插图加入动作，使内容脱颖而出，帮助产品增加额外的细节和个性；

3，应用视频banner作为GUI背景，烘托氛围的高级感；

4，为更多的GUI内容加入视觉牵引，页面切换的体验会更加舒服流畅；

5，3D感界面一直是GUI设计中希望探索的领域。

以上，是我对2020年精品游戏的GUI设计趋势判断。

其中很多篇幅都围绕在动画效果上，因为动画确实是讲述你的品牌、产品或服务故事的最有效方式之一。

如果有机会尝试，可以先行一步。

杨曦  游族网络UEDC

微信：un-magic

专注游戏用户体验设计10年

曾任职网易、腾讯、畅游

Powered by Froala Editor