腾讯案例复盘！「云游敦煌」小程序背后的设计故事

相较于名画家，敦煌莫高窟那些无名画工在墙上绘制的牛鬼蛇神，让人肝儿颤。记得看「局部」时，陈丹青老师如是形容莫高窟的壁画。

有幸，去年团队决定去敦煌团建。进入洞窟，扑面阴冷畏惧，目瞪口呆。其一洞窟本身环境阴冷，其二洞窟神秘而庄严，静谧而安详，阵势至眉目间，延绵千载，博大精深。

敦煌研究院与腾讯于 2017 年底达成战略合作，参与到敦煌文化的保护和传承事业当中，在合作两周年之际，敦煌研究院与腾讯计划共同打造微信小程序「 云游敦煌 」，指尖轻触方寸屏幕，就能遨游千里之外的文化遗产胜地。此次合作是腾讯 2018 年首次提出「新文创」以来的一次新探索。非常有缘分，设计团队从敦煌团建回来之后便加入到了项目当中。

往期回顾：

腾讯案例复盘！「云游敦煌」小程序背后的产品故事

编者注：本文腾讯设计师用「云游敦煌」的小程序设计实战案例，为你揭秘大厂的产品构思方法、设计历程等。

阅读文章 >

莫高窟久远而璀璨的文化，应该被更多人看见。帮助更多人探索、游览、守护莫高窟，是我们产品的愿景。让游览敦煌，变成随时随地。作为设计团队，把远在西北中敦煌石窟的感受，转译到每个老百姓的指尖，是这次我们要解决的难题。

好比我们去住主题酒店，不同房间环境下的规格、布局、光照、软硬装的风格、材质、颜色、纹理，饰品的气质等，这些环境因素都会给人极不相同的环境体验和感受。我们将通过设计的方式，去建立属于敦煌石窟特有的产品环境。

建立「敦煌石窟」的产品环境

这次我们的产品环境，是老百姓手中的微信小程序。在小程序中，可体现的环境要素主要包括字体、配色、图片与图形风格、特定的形状、空间与布局、动效以及它们之间的组合效果等。

在这里，为了营造用户探索敦煌石窟的入戏感，我们将会通过以下设计过程，将小程序建立成为具有敦煌石窟调性的产品环境。

1. 让大家尝试表达对敦煌石窟的印象

如果把大家对敦煌石窟的印象，转化成产品设计中的界面，会是什么样的呢？我们首先来了解一下，大家对敦煌石窟的印象是怎么样的？我们做了一个小范围收集。

目的

通过召集人员，让大家通过一定的填写方式，表达自己对敦煌的印象。我们收集并统计大家填好的内容，并将其记录提炼，以助力后续的设计工作。

召集人员

参与者包含产品负责人，项目核心成员，曾经去过敦煌的用户以及想去敦煌的潜在用户。大约二十人左右。

引导填写

为了更直观地收集信息，我们需要提前设定好填写的形式和范围。给每人派发若干纸张，每张纸只需填写一个对敦煌石窟的印象物，这个印象物是真实且具体的，比如佛像、壁画、沙漠等。我们把印象物叫做 Object，Object 是一个三合一的组成。每个 Object 都含有客观描述+主观感受的填空。客观描述是指按事物本来面目去考察，填写黄色的、圆的这类词汇。主观感受是指大家对印象物内心的感受，神秘的，庄严的这类词汇。做简要的填写说明之后，引导大家静默填写。

收集统计

把大家填好的纸张，将已填写的词汇按 Object、客观描述、主观感受三种类别进行统计，将重复出现次数高的词汇整理出来。

总结提炼

经过统计，我们得到如下总结：按词汇重复出现次数由高到低排序。大家的印象物集中在壁画、佛像、洞窟。客观描述主要是斑驳的、粗旷的、厚重的。其中色彩主要是土色的、有一致的色系。主观感受主要是震撼的、敬畏的。

除了词汇的统计，还有一些有趣的洞察，以下洞察也会助力到接下来的设计中。

• 不多的人会写九色鹿，飞天
• 少数的人会写九层楼
• 更少的人会写供养人
• 绝大部分的人都觉得敦煌的颜色很美

诚然，挖掘敦煌的调性，还包括了设计团队研读敦煌书籍，拜访敦煌研究院等桌面研究。这些成果同样也会指导我们后续的设计。

2. 一步步「造窟」

我们通过对敦煌调性的挖掘，以研究成果为基础，一步步建立敦煌石窟的产品环境。经过对小程序框架和组件的梳理，我们将卡片、底纹、图标、字体视为界面的核心组成要素，针对其着重进行打磨，并考究他们之间组合的关系。

「不是纸，是墙。」

在莫高窟陈列馆的时候，敦煌研究院的杜鹃老师对我说：「壁画应该呈现的质感不是纸，是墙。」

那里有个展区叫「地仗的制作」，我们停在那儿看。

敦煌的壁画是由岩壁层、地仗层、颜料层组成石块结构。每改朝换代，莫高窟的无名画工们，就会在原来的壁画上重新敷色，绘制新的壁画。确实，扁平破烂的纸素材好像更容易地去表现斑驳感。但墙的厚重，是通过历史一层层覆盖上去的，将墙的感受表现到位，在构建产品环境的过程中，是更需要拿捏准确的一环。

在界面设计中，卡片是一种包含图片和文字在内的小矩形模块，可以作为用户了解更多细节信息的入口，因此卡片设计形式被大量的运用。在敦煌小程序中，也存在大量的分类、话题及单品等入口，需要运用到大量的卡片设计。为了靠拢敦煌石窟中「墙」的感受，我们将所有的卡片设计都转译为石块设计。通过以下两个步骤，我们将石块一块块拼起来。

清查与归类

将所有的石块按话题封面，类别封面、单品封面的类别梳理出来。

设定视觉样式

为石块设定视觉样式，并根据不同类别件下的石块，在统一样式的前提下设置样式差异点。然后将视觉样式赋予到归类单的各式石块中去。

石块视觉样式的设定。通常，界面设计中卡片是由基础的矩形演变而成，矩形的基本设计条件为圆角、阴影、纹理、长宽比。我们通过去调整和对比这些参数的最佳组合，来将矩形塑造成粗旷、厚重的石块。

圆角。最初尝试是在 iOS 圆角建议值的范围去尝试，发现在这个范围内的圆角值，一旦放上壁画，就会变得精致无比，直观感受就像 App Store 里一个个精致的 App。这不太符合粗旷的感受。如果尝试直角，尖锐的直角排列起来又是一种严谨的精致。于是，我们尝试把直角磨去一点点，使用 2Px 的圆角值，使石板的角看上去好像被风雨磨去了棱角，有一点点顿挫的感觉，结合阴影的效果也起到了一定的厚度感。

阴影。在界面设计中，通过调整阴影的纵向长短可以表现纸张不同的高度。但是我们是石板，需要表现出厚重的感觉。除了可以调整阴影的纵向长短，我们尝试将阴影的横向宽度适度减少。如此一来，就能直观感受石板离墙面是有比较大的距离的，也让石板有了厚度，重量感。

当我们完成石板的视觉样式，就可以将其逐一赋予到我们已经清查的归类单中。在赋予的过程中，我们根据不同的类别条件，建立了 7 种不同横竖构图的比例尺寸，以及不同尺寸下的阴影效果。关于比例的设置，我们设定了让后台的内容供应库只提供一张壁画，根据不同的类别请求自动进行相应的比例裁剪，这可以提高产品的请求效率和减少内存压力。

至于另一面墙，也就是底纹。我们也是通过清查归类，将不同场景的底纹梳理出来，为其关联上类别标签，然后为相应类别的底纹，配置相应的斑驳纹理。

3. 图标

图标的效果，设计上的操作手段是技法和表意。对于主功能的图标，我们在表意上取了具有敦煌石窟代表性的几个意象。技法上我们参考敦煌壁画传统的绘制工序，「勾线 – 敷色」。其中这里的敷色与勾线的叠加效果，是代表图标被激活的状态。敷色的造型是参考矿物颜料的敷色效果，色块具有斑驳的感受。

对于二级图标，我们采取了古代表意，现代线描绘制。旨在表现上简约利落不干扰阅读，表意上贴合敦煌古韵。

4. 字体

字体的效果，是产品环境因素中重要的一环。但是小程序环境限于目前不兼容个性字体嵌入，我们考虑从核心的壁画体验的页面中入手。在「每日画语」的壁画展中，我们都会为用户每天推送一款壁画和相应的「画语」。我们选用了与莫高窟写经书法气质相近的古典明朝体，在「画语」展示中确认好个性字体的展示形式后，通过切图来实现。确保用户在看壁画展的时候，在关键文字的阅读上也具有足够的入戏感。

5. 标识

我们优先考虑的是，如何塑造出高辨识度，直观，具有敦煌气质的标志。根据前期的研究，我们做了标识在视觉表意上的认知排序。

当下，每个人的手机里都有着众多的程序和信息，用户在使用手机的时候都在快速地滑动着每个内容，用户对微信小程序标识的认知机会是处于「寸土寸金」的前提下，稍不留神很难记住。结合之前关于印象收集的结论，大家对九色鹿、飞天等敦煌形象的熟悉程度比较弱，我们经过不同方向尝试，决定使用直观的文字图形更节省用户的认知成本，更为有效。

有幸，在拜访敦煌研究院的时候，收集到了研究院华亮老师的书法作品。我们得知，敦煌研究院标志的书法字体正是华亮老师的笔墨，于是我们决定将老师的书法进行设计加工，作为标志设计，也算是一种传承吧。

打造流动的壁画展

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

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

采岩

敦煌的传统颜料主要起源于当地矿石、进口宝石及部分人工合成的颜料。迄今约有千百年的历史。

要说去莫高窟除了参观洞窟以外的惊喜，那就是在陈列馆的「岩彩区」面前久久地发呆了。每一种色号，都有十一管不同深浅的色筒，这些深浅都是经过一定的研磨工艺制作，晶体颗粒度越大，颜色就会越深。除了好听的名字，每种颜色旁边都会放置一块「原材」作为展示。虽然眼前这些辰砂、蛤壳、孔雀石是死的，但此景不由得让人想起「古鱼复苏」。

作为设计团队，我们需要挖掘敦煌岩彩的价值，将其传递给用户。

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

云游敦煌是指尖上的敦煌图书馆，是一款内容型的产品。我们希望用户在获取信息的时候接受到尽可能少的阅读干扰，应满足到聚焦内容本身。作为产品配色，敦煌丰富的色彩在产品环境中需要谨慎的考量运用。

面对这样的问题，我们构思了以下的解决方法。

我们将所有的色彩暂时性隐藏，每次仅出现一个主色，由主色 + 五种不同重量的灰色 + 两种底纹色构成产品环境的主要色彩。这样可以保证产品环境大部分情况处于只有一个主色的状态，让内容更不受干扰地呈现。

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

1. 取色

起初我们发现陈列馆的岩彩中，有部分像玛瑙末、蛤粉这类过于淡的色彩，从色彩之间的对比度来看过于微弱，不太适合做产品的主色，我们需要对其进行筛选。我们常说光的三原色是红、绿、蓝。那么在这些矿物颜料中，是否存在最早的基础颜色呢？

我们拜访了敦煌研究院美术研究所，当时范丽娟老师正在临摹壁画。交流了我们遇到的问题之后，老师向我们建议了五个颜色，这也是老师在临摹壁画中常用到的颜色。

这些颜色都有其各自的象征意义。朱砂属红，象征吉祥。青金石与硅孔雀石属青绿，象征生机。密陀僧属黄，象征土地。赭石属褐，是敦煌壁画的主要代表色彩。

我们决定从陈列馆的十七个颜色中将这五个颜色剥离出来，作为小程序的主题色。

一个面临的问题是，陈列馆的岩彩每个颜色都有十一管色阶，我们如何取其一。为了避免色彩过淡和过深，经过整体的对比之后，我们剥离最浅和最深的四管，在剩下的三管的颜色中，用 Color.review 去校验这个颜色在屏幕色彩对比度上的合理性。Color.review 是基于 WCAG 标准建立的校色工具，它可以检测颜色是否可以很容易地从背景中被辨识出来。

用一个实战项目，帮你掌握科学的 UI 配色方法

各行各业的设计师每天都在和颜色打交道，UI 设计师设计用户界面也不例外。

阅读文章 >

敦煌的色彩不仅美，更具有着特别的历史价值及象征意义。取色完成后，我们想进一步传递敦煌色彩的价值。

我们通过研读相关文献，提炼内容，将岩彩的文字知识与相应壁画作为封装，延续之前设定好的石块展览形式，放在产品色彩入口中，让用户可以在这里观看「岩彩展」、自定义小程序的主题色。

2. 敷色

熟悉矿物颜料的同学知道，敷色时一上刷子，出来的色彩质感是带着矿物的残粒的，这些颗粒因其不同的大小在光线的折射下显得异常的美。但是产品界面中色块是平滑的，于是我们梳理出产品界面中面积较大的颜色展示区域，将我们之前设定好的底纹叠加到主题色块当中，让颜色变得有岩面感。

我们通过清查并归类全局能够作为主题色的界面组件，比如关键按钮、高亮文字、关键背景等。按相应的需要为其设定变色样式，比如面积大的地方我们配置一定的底纹，精细的地方我们让其保持平滑。用户就可以在整个环境中感受到自己设定好主题色，带走自己喜欢的颜色。

把「密陀僧」的壁画看完

密陀僧是音译，是一款在东汉时期从波斯传过来的颜色，是记载在「图经本草」中含有药物效用的矿物颜料，中国是最早运用密陀僧作为绘画颜料的国家之一。当范丽娟老师介绍这个颜色的时候，就想把这个颜色的壁画都看一遍。

既然是让老百姓在指尖上游览敦煌石窟，我们自然也为大家提供了更丰富的探索方式，敦煌的色彩是个大菜，自然少不了让观众按颜色探索壁画。

我们首先将莫高窟陈列馆的十七个颜色，作为我们的「色库」。每天探索栏目会从色库中抽取一个颜色推送给用户，用户可以在这里看到该颜色所有的壁画。

那么壁画和色库如何关联起来呢，我们设定的策略是「壁画中若含有一个与指定颜色符合接近范围的颜色，视为匹配成功。一幅壁画可以和多个指定的颜色关联」。

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

1. 从壁画里解剖颜色

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

通过划分明度分离颜色

我们发现老旧的敦煌壁画，许多突出的颜色已经变淡。我们将壁画划分三种层次的明度，将突出的颜色重新在各个明度分层里面解剖出来。这样解剖出来的颜色就更加全面。

聚类颜色

初步解剖出第一批颜色之后，为了让颜色后续被更有序地拾取，我们需将这批颜色进行打理。通过设定颜色之间相似度的范围，对颜色进行聚类。

杂色过滤

通过聚类颜色之后 ， 需要进一步将杂色过滤掉。我们将明度和饱和度来同时过滤，为得到的颜色设立明度等级及在每级明度下设立饱和度范围，一级级将不合范围的无效色过滤掉。

设置排序

如果将敦煌壁画划分为高中低三个明度，我们发现，权重的颜色主要集中在中等明度，我们将最后得到的颜色结果按明度优先级去排序，得到最终的解剖色。

2. 将解剖的颜色与色库匹配

实现了壁画的颜色解剖，就要进行颜色匹配了。我们有大量的壁画需要和色库匹配，因此需要设定一个自动匹配的机制。在技术上，我们选用 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》。 窗外一看全是冰山。和白云混在一起，美轮美奂，想着终于有场景可以承托起这个曲子了，当时坐在位子上真的是感动到想付钱。

是的，最好看的东西，也许不一定在终点。感谢一段造窟采岩的设计经历。

欢迎关注作者「腾讯CDC体验设计」的微信公众号：