《原神》9月28日正式上线啦～

怀揣着激动的小心心，点开了《原神》的游戏一探究竟～今天咱们不聊《原神》和《塞尔达传说：旷野之息》之间究竟谁是爸爸，谁是弟弟，

今天咱们重点来和大家聊一聊，《原神》美术风格和UI视觉包装这块是怎么做的～

Part  1

美术风格

1.世界观架构决定美术风格

《原神》世界观：

游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相。

2.游戏立绘

作为一个有情怀的二次元公司，米哈游延续了崩3一贯的立绘风格。立绘角色有可盐可甜的小姐姐，可奶可狼的热血少年。

同时在很多立绘中，我们可以看到原画也很好地结合了国风和欧式风格时装（当然也是因为游戏里有中式和欧式风格的城市），丰富的“多样性”可以说牢牢抓住了二次元玩家的心。

看着这么精致的立绘，不多充一波648对不起“叶子学堂老二次元”这个称谓！

3.世界观架构决定美术风格

在这里继续吹一波米哈游对于角色立绘形象在游戏中建模的还原，在这里也看到崩3里人物模型这块的积累。

但美中不足的是，人物立绘和野外怪物风格部分不统一。

在场景里大家可以脑补一下一个二次元的角色和一个比例三次元的狗子在一起四目相对是什么感觉。

4.游戏场景

《原神》游戏里的天气系统可以让同一个场景呈现出不同的光影变化，这点还是很赞的。

因为世界观是幻想风格，所以从场景中我们可以看到很多中世纪风格的罗马立柱，以及长廊。

▲

古罗马广场遗址

▲

罗马立柱的不同柱式

Part  2

游戏视觉元素提炼

1.神之力星型要素

大家注意到小姐姐头上的星型标志了没。这个是“神之眼”，导引元素之力。咱们可以看到这个星型元素在UI中作为一个核心要素被高频使用。

还有我们能看出有对崩3风格做延伸。

▲

崩坏3动画短片《女王降临》截图

2.LOGO

LOGO本身不是很复杂，还是有延续神之力的星型视觉要素作为主要的辨识度。

3.BANNER+宣传图

BANNER风格和现在流行的扁平风格越来越接近，辨识度来自于米哈游的原神主要立绘和角色。

立绘结合不同角色的英文名作为负型作为主要的设计内容，同时再结合立绘本身的色系，拓展作整体包装。

4.ICON

因为是幻想世界观的风格，主界面的ICON部分多采用扁平风格。在这里我们可以看到很多对称式图标，翅膀元素，武器和魔法效果等。

物品类的图标多为精致轻薄的日系图标风格，因为需要适配不同页面的展现。

精致的图标在搭配相对而言虚空类型的星空背景来说是不可或缺的存在。

Part  3

UI拓展和应用

整体来说，UI的调性扁平风格，还是延续“神之眼”的星型拓展出适合整体UI包装的星空主题。

1.星空主题包装/“神之眼”星型大量运用

在这里我们可以看到，抽卡边框的形状很接近这样欧式教堂窗户边框的风格，同时也结合了“神之眼”元素来做包装。这样可以让抽奖系统更具有魔幻的神秘色彩。

2.魔法书/纸材质延伸

在类似委托人物，成就系统UI都运用了魔法书和纸张这样的设计，可以更好的承载更多信息。

并且用魔法书这样的视觉包装可以让UI更具有场景化，让玩家更有代入感～

3.毛玻璃效果

无论是主机风格，还是近几年市面上流行的二次元手游风格，多喜欢采用类似的毛玻璃效果。

这样可以很好的为程序节省资源，并且会更突出前景交互内容，让页面看上去非常整体。

毛玻璃效果也很好地为国风和欧式界面做了很好的转换，让国风活动出现的时候不会觉得很突兀。

4.魔法阵和时间界面

界面里还有很多齿轮和魔法阵结合的设计元素，让人会联想到塔罗牌卡牌背面的装饰图案风格。

这是骨头个人很喜欢的一个界面，在这里配合右侧的时间的指针调整，左边会对应出现不同天气的变化。

5.抽卡界面BANNER化

抽卡界面的设计更像一整张BANNER，这样可以加强抽卡页面在游戏中的对比，同时也方便之后高频次替换资源。

Part  4

动效表现

1.抽卡动效

因为是氪金界面，所以这里的UI动效表现是视觉冲击力最强的部分。一般十连抽的时间会控制在30秒之内，给足了氪金玩家加强抽卡的成就感，同时也清晰地给玩家展示了获得的武器道具和角色。

整个抽卡动效分为3个阶段：

1. 在这里结合了一个很动画式的表现形式，从天空中坠    落的陨石发出强烈的光柱即将到达地面。

2.展示单独获得的物品和角色，武器展示和角色卡牌展示动效和设计上有一些区分。

3.整体展示获得物品，在这里优先突出展示四星或者更高级的角色卡牌

2.物品升级动效表现

在这里整个物品升级表现时间非常短，只有3秒，比较适合高频次的升级操作。

3.烹饪特效

在原神里有一个烹饪系统，在这个进行烹饪操作的时候，会有一个很有意思的烹饪小动画。

4.系统UI动效

在这里场景里的人物角色会配合不同的界面做一些动效反应。

转场动效

物件和弹出框多为放大缩小的动效形式，背景的星空有做轻微的动效结合。

不同元素英雄切换时整体背景色调也会跟随着切换。

选中态动效表现

选中态基本标配亮黄色和蓝色，这样更容易让大家识别到选中态。选中态动效较轻量，和氪金动效形成鲜明对比。

2020/09/28

叶子学堂读书笔记

骨头老师为大家复盘一下今日份知识点噢～

《原神》之所以受到大家这么多关注，肯定是有过人之处：

1. 1.美术风格：精美的二次元立绘，高度还原的角色模型以及游戏场景符合二次元玩家的需求；

2. 2.在游戏视觉元素中提炼出了“神之力”的星型视觉要素，应用到LOGO，BANNER，ICON之中；

3. 3.UI拓展和应用：我们可以看到运用了大量星空主题包装，魔法书/纸材质延伸，毛玻璃效果等；

4. 4.动效表现：抽卡界面动画式表现，物品升级轻量表现，烹饪特效有趣，系统UI动效通用。

   
   

   总   结

《原神》的确神似《塞尔达传说：旷野之息》，但他同时也拥有几乎是国内游戏开发商最高的技术实力，无论是从美术渲染，还是引擎运用，《原神》都可以称得上是国内顶级的。

整体来说《原神》在整体的美术视觉包装上，还是抓住了“神之眼”这个主要的核心拓展出基础视觉元素，以及延伸出星空背景的理念。抛开一些玩法上的硬伤，其实很多ICON设计，抽卡动效设计的表现还是值得大家学习的。

希望各位大宝贝在体验游戏的时候，谨慎轻喷。我们需要做的应该是更用一分为二的辩证法去看待，看到游戏中不足的，也要看到游戏中的优点，可以让我们提升的部分，变成一个更厉害的美术爸爸！

最后，提前预祝大家中秋节和国庆节双节快乐～ 

Powered by Froala Editor