「云游敦煌」小程序背后的设计故事。 – 腾讯CDC

打造流动的壁画展

在产品构思上，除了图书馆式的内容整理，展览式的内容推送也更能满足老百姓探索的心。我们建立了「每日画语」和「每日画展」两种日更的形式。回想在敦煌莫高窟的壁画展中，对于壁画的展示形式，没有做画框处理，是以「岩面」的样子去呈现，可见其还原「壁 · 画」之用心。

受其启发，在产品中的壁画展，我们运用了之前的「石块」和「底纹」相结合的设计样式作为展示形式。并将每一张壁画，根据不同手机尺寸大小，将壁画的展示适配到最大化，营造用户看壁画的洞窟沉浸感。

敦煌的传统颜料主要起源于当地矿石、进口宝石及部分人工合成的颜料。迄今约有千百年的历史。
要说去莫高窟除了参观洞窟以外的惊喜，那就是在陈列馆的「岩彩区」面前久久地发呆了。每一种色号，都有十一管不同深浅的色筒，这些深浅都是经过一定的研磨工艺制作，晶体颗粒度越大，颜色就会越深。除了好听的名字，每种颜色旁边都会放置一块「原材」作为展示。虽然眼前这些辰砂、蛤壳、孔雀石是死的，但此景不由得让人想起「古鱼复苏」。
作为设计团队，我们需要挖掘敦煌岩彩的价值，将其传递给用户。

让游客观众带走喜欢的颜色

云游敦煌是指尖上的敦煌图书馆，是一款内容型的产品。我们希望用户在获取信息的时候接受到尽可能少的阅读干扰，应满足到聚焦内容本身。作为产品配色，敦煌丰富的色彩在产品环境中需要谨慎的考量运用。
面对这样的问题，我们构思了以下的解决方法。
我们将所有的色彩暂时性隐藏，每次仅出现一个主色，由主色 + 五种不同重量的灰色 + 两种底纹色构成产品环境的主要色彩。这样可以保证产品环境大部分情况处于只有一个主色的状态，让内容更不受干扰地呈现。

有了主题色的构思，就要面临如何在敦煌石窟取色，如何在小程序敷色的问题。

取色

起初我们发现陈列馆的岩彩中，有部分像玛瑙末、蛤粉这类过于淡的色彩，从色彩之间的对比度来看过于微弱，不太适合做产品的主色，我们需要对其进行筛选。我们常说光的三原色是红、绿、蓝。那么在这些矿物颜料中，是否存在最早的基础颜色呢。
我们拜访了敦煌研究院美术研究所，当时范丽娟老师正在临摹壁画。交流了我们遇到的问题之后，老师向我们建议了五个颜色，这也是老师在临摹壁画中常用到的颜色。
这些颜色都有其各自的象征意义。朱砂属红，象征吉祥。青金石与硅孔雀石属青绿，象征生机。密陀僧属黄，象征土地。赭石属褐，是敦煌壁画的主要代表色彩。
我们决定从陈列馆的十七个颜色中将这五个颜色剥离出来，作为小程序的主题色。
一个面临的问题是，陈列馆的岩彩每个颜色都有十一管色阶，我们如何取其一。为了避免色彩过淡和过深，经过整体的对比之后，我们剥离最浅和最深的四管，在剩下的三管的颜色中，用Color.review去校验这个颜色在屏幕色彩对比度上的合理性。Color.review是基于WCAG标准建立的校色工具，它可以检测颜色是否可以很容易地从背景中被辨识出来。推荐给各位设计师同学。
敦煌的色彩不仅美，更具有着特别的历史价值及象征意义。取色完成后，我们想进一步传递敦煌色彩的价值。
我们通过研读相关文献，提炼内容，将岩彩的文字知识与相应壁画作为封装，延续之前设定好的石块展览形式，放在产品色彩入口中，让用户可以在这里观看「岩彩展」、自定义小程序的主题色。

敷色

熟悉矿物颜料的同学知道，敷色时一上刷子，出来的色彩质感是带着矿物的残粒的，这些颗粒因其不同的大小在光线的折射下显得异常的美。但是产品界面中色块是平滑的，于是我们梳理出产品界面中面积较大的颜色展示区域，将我们之前设定好的底纹叠加到主题色块当中，让颜色变得有岩面感。
我们通过清查并归类全局能够作为主题色的界面组件，比如关键按钮、高亮文字、关键背景等。按相应的需要为其设定变色样式，比如面积大的地方我们配置一定的底纹，精细的地方我们让其保持平滑。用户就可以在整个环境中感受到自己设定好主题色，带走自己喜欢的颜色。

把「密陀僧」的壁画看完

密陀僧是音译，是一款在东汉时期从波斯传过来的颜色，是记载在「图经本草」中含有药物效用的矿物颜料，中国是最早运用密陀僧作为绘画颜料的国家之一。当范丽娟老师介绍这个颜色的时候，就想把这个颜色的壁画都看一遍。
既然是让老百姓在指尖上游览敦煌石窟，我们自然也为大家提供了更丰富的探索方式，敦煌的色彩是个大菜，自然少不了让观众按颜色探索壁画。

我们首先将莫高窟陈列馆的十七个颜色，作为我们的「色库」。每天探索栏目会从色库中抽取一个颜色推送给用户，用户可以在这里看到该颜色所有的壁画。
那么壁画和色库如何关联起来呢，我们设定的策略是「壁画中若含有一个与指定颜色符合接近范围的颜色，视为匹配成功。一幅壁画可以和多个指定的颜色关联」。

有了构思，就要面临如何解剖壁画颜色，如何将解剖的颜色匹配指定颜色的问题。

从壁画里解剖颜色

壁画留载千年，存在众多破损和杂色痕迹，这种情况下就会面临一个废色过多，色彩分布零散的问题。我们都知道一幅画中有很多颜色，哪个颜色才算数，是面积大的颜色吗？这会导致，很多壁画都是其大面积的颜色被检测到，这是不够的。我们需要解剖出壁画中那些突出的颜色，于是我们做了如下尝试：

· 通过划分明度分离颜色
我们发现老旧的敦煌壁画，许多突出的颜色已经变淡。我们将壁画划分三种层次的明度，将突出的颜色重新在各个明度分层里面解剖出来。这样解剖出来的颜色就更加全面。
· 聚类颜色
初步解剖出第一批颜色之后，为了让颜色后续被更有序地被拾取，我们需将这批颜色进行打理。通过设定颜色之间相似度的范围，对颜色进行聚类。
· 杂色过滤
通过聚类颜色之后 ， 需要进一步将杂色过滤掉。我们将明度和饱和度来同时过滤，为得到的颜色设立明度等级及在每级明度下设立饱和度范围，一级级将不合范围的无效色过滤掉。
· 设置排序
如果将敦煌壁画划分为高中低三个明度，我们发现，权重的颜色主要集中在中等明度，我们将最后得到的颜色结果按明度优先级去排序，得到最终的解剖色。

将解剖的颜色与色库匹配

实现了壁画的颜色解剖，就要进行颜色匹配了。我们有大量的壁画需要和色库匹配，因此需要设定一个自动匹配的机制。在技术上，我们选用H（色调）、S（饱和度）、V（明度） 模式作为颜色模式。 HSV 模式下的色彩可以视为一个圆锥立体模型， H是0°～360°的顶部圆面，不同的角度代表着不同的色调倾向。S是圆面上的直径，每单位长度的直径代表着该长度下相应饱和度的色调。V对应的是圆锥的中间轴，代表明度。

基于圆锥立体模型的几何概念，建立该模型（x,y,z）三维坐标的算法。在斜边长R，底面圆半径为r，高为h的HSV圆锥体内，以地面圆心为原点，H=0为x轴正方向建立坐标轴。那么色值是（H,S,V）的点的三维坐标（x,y,z）是

如此一来，所有的颜色都可以通过坐标计算得出在立体圆锥里的位置。通过以下几步就可实现颜色与壁画的自动匹配。
· 确认指定颜色，如密陀僧在圆锥中的坐标是A。
· 将所有壁画的颜色解剖，并将解剖的颜色投入圆锥中，通过以上算法得出所有颜色的具体坐标位置。
· 遍历所有颜色在圆锥中与坐标A距离。
· 设定与坐标A距离的排名范围，取与坐标A距离最近的前排颜色。
· 则这批颜色所属壁画就成功匹配为属于密陀僧的壁画。

在小程序中技术只是连接观众与敦煌石窟的桥梁，我们希望送到大家眼前的，是触手可及的敦煌岩彩展，壁画展。虽然过程会遇到一些困难，尤其是从颜色探索壁画，相比一般的图像取色，从老旧的敦煌壁画解剖出原本的颜色会更困难。在进行明度划分的时候，看到不同明度下的颜色块面被一层层分离，仿佛感受到壁画中的一层层物件被重新唤醒。

一步步「采岩」，一步步沉甸甸。我们实现了让用户自定义主题色、看敦煌色彩展览、从颜色去探索壁画这几件事。回望整个和敦煌岩彩打交道的过程，从陌生到熟悉，从熟悉到传递，我们都知道了敦煌岩彩都是有其厚重的意义和价值。
当看着小程序敦煌色彩页面的设计图，不由得又想起「古鱼复苏」。我们相信敦煌色彩的美，应该更多地被世人看到。

随着项目的深入，设计的一个个想法需要确确实实地落地，开始变得棘手。尤其在产品接近上线的节骨点期间，快速应急出方案的同时，还需耐心、快速并反复地校验开发的效果是否吻合设计稿，为所有的BUG梳理待办优先级，并且一条条盯着直到它被解决。我们在最后几天感叹，BUG是修不完的。即使到了产品上线，我们还是在一个与BUG赛跑的状态没缓过来。
当看到人民日报、敦煌研究院、腾讯等运营的助推及将小程序直接固定在服务栏；当看到CAN博物馆、看理想、ONE等自己喜欢的媒体用自己的语言去推荐；当看到微博上六千多万条关于#云游敦煌#的讨论的声音；当看到我们的云游敦煌小程序用户量过百万，才缓过神来，喔，原来我们一期杀青了，并且也得到了大家的肯定。

看到一个学生网友发的微博：
“Day 10。看网课。写作业。计算机二级。背单词。云游敦煌。”

我们旨在这段特殊的时期，希望大家能在家里，看看敦煌的美。闷着头做设计这么久，忽然当听到这种声音， 焕然想起我们的今日画语：「今日，宜知足」。
在今后的云游敦煌项目中，我们团队依然会保持优化和迭代，引入更多形式的敦煌展览。

深圳到敦煌没有直航，需要在兰州或者西安转机一趟。每次去都感觉挺远的，作为南方人吃的也不习惯。但是想到终点那里可以看到让人肝儿颤的中国壁画艺术，也值得。
上次去的时候是冬季，飞机路过青海的的时候，被手机里的歌叫醒了。当时刚好放的是坂本龙一的「Mar Mediterrani」。 窗外一看全是冰山。和白云混在一起，美轮美奂，想着终于有场景可以承托起这个曲子了，当时坐在位子上真的是感动到想付钱。
是的，最好看的东西，也许不一定在终点。感谢一段造窟采岩的设计经历。

相关阅读：