又一个王者荣耀H5刷屏，这次竟然是因为它…

从蹭热点、贴热词，

到玩竖屏视频流、玩嘻哈音乐风

每阶段热门H5作品

从某种角度展现出当时的社会趋势和消费心态

但今年国庆前，在这些屡试不爽的营销招术中

朋友圈刷屏的H5中又多了一股清流

让我们来看看这个美轮美奂H5背后的故事吧~

背景：

王者荣耀受到集团邀请深度参与敦煌“数字丝路”战略合作，为集团合作项目打造亮点，作为一款一直主动结合传统文化元素的流行游戏产品，充分发挥产品本身特长，在整个敦煌项目中做出差异化；

前期沟通中，王者荣耀与腾讯集团共同承担公益项目的策划并落实权益；发起“数字供养人”第二期线上活动，邀请用户通过深度互动体验切实参与并关注敦煌第55窟的数字化保护。

洞察：

1.敦煌壁画消逝的不可逆

千百年来，敦煌人对壁画的信仰汇聚成敦煌壁画的辉煌。而今它随着时间的流逝终将消失，并且这种消逝是不可逆转的。

这次的“数字供养人计划”我们提出“数字再现千年壁画”的理念，让用户想象自己心中最美丽的敦煌壁画是什么样子。

同时也间接的了解敦煌壁画的制作流程，勾起观众对敦煌壁画数字化保存的关注。

2.敦煌修复与故宫修复的差异性。

现今人们对敦煌壁画的修复这一块了解的较少。之前大火的节目《我在故宫修文物》让很多观众会觉得敦煌的壁画也是类似故宫的文物一样可以修复至原貌，但事实上敦煌壁画的修复是非常难的。

它与故宫文物有很大的差异化，敦煌的壁画不会在墙面上进行重绘，敦煌壁画面临的问题也非常特殊。比较常见的状况是壁画颜色产生氧化脱色，墙壁产生疱疹现象，壁画产生了开裂或者爆裂现象，疏碱病害等等几十种不同的“病症”这些问题都是敦煌壁画消失的最主要因素。

关于修复的资料，更多详情可以通过一下网址了解。关于修复，点我了解更多。

3.数字化时代下的敦煌，长什么样子？

我们想通过移动网页技术来表现和传递古典作品的神韵，让敦煌千年执着的精神以数字的形式传承下去。

结合以上4个点我们想通过数字技术让每个人做一次敦煌壁画的创造者，通过我们的涂色H5还原出每个观众心目中最美的敦煌，呼吁人们对敦煌数字化保护的关注。

内容选择：充满趣味性的10幅壁画

我们从五个朝代，40个洞窟中，选出了10幅比较有代表性与趣味性的敦煌壁画。

在整个H5在设计初期我们希望形成一个系统的敦煌VI，为敦煌打造独一无二的视觉记忆。

为此提炼出三个关键点：

敦煌色：敦煌鲜明具有记忆点的颜色

机理感：经过时间洗礼后留下的独特机理与破损

手绘感：上千年来数以万计的敦煌画师绘制出各式各样的壁画风格

文案构思

1.沟通口吻

配合创意构思，我们希望以“敦煌壁画”的角度来与用户进行沟通对话。面对不可避免的时间侵蚀，“我（即敦煌壁画）”需要你的关注与保护让时间慢下来，你会看到我最美的样子。

2.核心概念

我们从配色、美术、设计、动画多个维度进行努力，希望通过创意及技术手段，能够让用户以更强的沉浸感与细节度“再现”敦煌壁画的美，而通过自主的涂色互动体验可以让用户看到属于每个人自己的“最美敦煌”。

因此，整体统一传递我们的核心创意概念 数字再现，每个人心中的最美敦煌。

1. 整体气质

敦煌配色、字体、语言，我们希望能够整体性准确地给用户传达出一种“敦煌气质”

在最后的分享文案中，我们配合每幅壁画的特点，围绕“最美敦煌”的核心概念，希望用美的文字以及意境呈现给用户一则诗句。

力求从视觉及文字的整体搭配组合上，呈现出每个人心中的最美敦煌。

美术部分  

视觉设计分为敦煌色板、UI设计两个方面来说。所有的设计细节都尽可能的还原敦煌当时的风格。

01.敦煌色板

难点1.如何既能让用户有丰富的颜色选择，又能使“再现”的壁画怎么都有敦煌感？

解：我们从五个朝代，40个洞窟中，提取了100多个颜色，2000多个色块。专门定制了10块专属的敦煌色板供用户选择。

整体制作流程：

10幅壁画 — 将每幅壁画进行2张重绘 —3张为一幅壁画，进行抠图 — 根据壁画所在的洞窟提取8-12个颜色，制成色板 —根据色板进行调色

第一步：重绘

10幅画各有14-30个色块。分好可涂色区域后，为了丰富涂色的视觉感受，让用户填色起来不至于产生原画简单调色的单一感。我们对每张画进行的2版不同颜色、肌理的重绘。

第二步：抠图

如图所示，根据分好的填色区域开始抠图，将每一个色块进行分离。

一幅画有有 3版图， 每版有14-30个区域需要抠出来。 这样算我们每张图需要抠42-90个图形色块。 总共十张图，抠图区域的总量是420-900个色块。

第三步：提取颜色，制造色板

颜色的提取方法：

1.优先从壁画里提取

 2.然后从壁画所处的洞窟之中提取 

3. 其次会从同时期的洞窟中提取，这样就不会产生颜色非常的跳脱，非常的不敦煌这种情况。

第四步：调色

每一个色块的需要有8-12个颜色素材。每张壁画有112-300色块需要单独来调色。

调色方法：

改变色相，同时改变明度。

一个颜色一幅画的调整，如图所示。

如何在敦煌壁画的美术风格下强化用户DIY的感受，保证随机搭配的美感？

解决办法：

1.在调好色的素材上加壁画的斑点、脱落的机理。画面的质感能得到大幅度的提升，同时也能让用户随意搭配的适合不会显得那么新，颜色不协调。

2、也有一些特殊的情况，比如人物脸部变色后画面可能会很奇怪，识别度变得很低。也不符合敦煌壁画的感受。我们针对这些特殊的地方，将脸部和头发绑定成一个色块，用户点击这两个区域的任意一个区域都会一起变色。

02 . UI设计

界面

一、涂色界面

在没有去敦煌考察之前我们做的填色界面的设计是第一版，字体选择、界面给人比较圆滑、平整、矢量的感觉，字体的选择跟故宫的vi有一些相像。

去了敦煌之后我们设计了第2版，z在字体、颜色、质感、图形、按钮都做了相对应的变化。

增加了斑驳感、颜色也采用了泥黄色增加厚重感。最后考虑到界面的功能性、以及用户对调色的界面的感知度。最终定下第三张的完成版本。

二、动画界面

开场的页面设计灵感来源于藏经洞里的古老经书，经书的破损感给人一种碰一下就会马上碎开的生理感受，必须要小心翼翼的对待它。这种感觉能够非常好的唤起用户的保护欲望。

参考素材：

三、落地页面，分享图界面

落地页面与分享页面，我们想营造出壁画的真实感，就像是真的存在于敦煌莫高窟里一般。因此也制造出比较破损的墙壁、加上一些斑驳的质感为了更好的还原置身于洞窟中的感受。

参考质感：

四、Loding图案、字体、按钮

Loding设计灵感来源于敦煌藻井图，我们将藻井图与王者荣耀logo进行了结合 。

藻井图：

字体并没有选用常规的手写体或者是毛笔，一方面觉得识别度较困难，一方面是觉得太常规没有敦煌的辨识度，魏碑体的手工感很适合，并且有一些粗糙的边缘带有一定的机理，像是风沙的感觉，非常适合。

按钮设计也为了与中国故宫拉开视觉差异性，全部都加入了机理与斑驳。

由于篇幅有限

今天对王者·现敦煌H5的上部分介绍

就先到这里了

下部分我们改天再约~

也超感谢这次创作团队

让我们能够细细品味

千年以来亘古不变的敦煌美

品牌 - 王者荣耀

企划 - 王者荣耀、TGideas

监制 -TGideas x 敦煌研究院

创意监制 - 李若凡

品牌经理 - 张雅缇、李歆、张帆

项目管理 - 冯薇、汪海蓉

创意- 石铭、李昂

文案- 尚书

视觉设计 - 霍虹旭、江义

多媒体交互与动画- 唐伟为、唐嘉莉

多媒体开发- 冯超、袁佳平、林雨、陈权

前端重构 - 郭亮、黄文杰

调色 - 李昂、唐嘉莉、江义、2文(旗众)、小夏(旗众)、23(旗众)

音乐 - 冯舜贤（佳荧）、FOKO

音效- 小余（佳荧）、FOKO

音乐指导 - FOKO

音乐 - 冯舜贤（佳荧）、FOKO

音效- 小余（佳荧）、FOKO

壁画重绘 - 李老师(敦煌研究院）、刘呗宁

本文作者：李昂、唐嘉莉、江义、袁佳平、尚书

- END -