相较于名画家，敦煌莫高窟那些名画工在墙上绘制鬼蛇神，让肝儿颤。记看「局部」时，陈丹青师如是形容莫高窟壁画。
幸，去团队决去敦煌团建。入洞窟，扑面阴冷畏惧，目瞪口呆。其一洞窟本身环境阴冷，其二洞窟神秘庄严，静谧安详，阵势至眉目间，延绵千载，博精深。
敦煌研究院与腾讯于 2017 年达成战略合作，参与到敦煌的保护和传承事当中，在合作两周年之际，敦煌研究院与腾讯计划共同打微信小程序「 云游敦煌 」，指尖轻触方寸屏幕，就能遨游千里之外的文化遗产胜。此次合作腾讯 2018 首次提出「新文创」以的一次新探索。非常分，设团队从敦煌团建回之后便加入到了项目当中。
莫窟久远而璀璨的，应该被更多人看见。帮助更多人探索、游览、守护莫窟，是我们产的愿景。游览敦煌，变成随时随地。作为设计团队，把远在西中敦煌石窟的感受，转译到每个老百姓的指尖，是这次我们要解决的难题。
比我们去住主题酒店，不同房间境下的规、局、光照、软硬装的风、材质、颜、纹理，饰品的气质等，境因素给人极不相同的境验和感受。我们将通设计的方式，去建立属敦煌石窟特有的产品境。
次我们的产品境，是老百姓手中的微信小程序。在小程序中，现的境要素主要包括字、、图与图形风、特定的形状、空间与局、动效以及它们之间的组合效果等。
在这，为了营造用户探索敦煌窟的入戏，将会通过以下计过程，将程序建立成为有敦煌窟调性的产品环。
1. 让大家尝试表达对敦煌石窟的印象
如果把大家对敦煌窟的印象，转化成产品设计中的界面，是什么样的呢？我们首先来一下，大家对敦煌石窟的印象是怎么样的？我们做一个小范围收集。
目的
通召集人，让大家通一定的填写方式，表达自己对敦煌的印象。我们收集并统计大家填的内容，并将其录提炼，以助力续的设计工。
召集人
参与者包含产品负责人，项目核心成，曾经去敦煌的用户以及想去敦煌的潜在用户。大约二人左右。
引导填写
为更直观地收集信息，我们需要提前设定填写的形式和范围。给每人派若干纸，每纸只需填写一个对敦煌石窟的印象物，个印象物是且具的，比佛像、壁画、沙漠等。我们把印象物叫做 Object，Object 是一个三合一的组成。每个 Object 含有客观描述+主观感受的填空。客观描述是指按物来面目去考察，填写黄的、圆的类词汇。主观感受是指大家对印象物内心的感受，神秘的，严的类词汇。做简要的填写说明之，引导大家静默填写。
收集统计
把大家填的纸，将已填写的词汇按 Object、客观描述、主观感受三种类别进行统计，将重复出现次数高的词汇整理出来。
总结提炼
经统计，我们得到下总结：按词汇重复出现次数由高到低排序。大家的印象物集中在壁画、佛像、洞窟。客观描述主要是斑驳的、粗旷的、厚重的。其中彩主要是土的、有一致的系。主观感受主要是震撼的、敬畏的。
除了词的统计，还有一些有趣的洞察，以下洞察也会助力下来的计中。
- 不的人写九鹿，飞天
- 少数的人会写九层楼
- 更少会写供养
- 绝部分的人都觉得敦煌的颜色很
诚然，挖掘敦煌调性，括了设计团队研读敦煌书籍，拜访敦煌研究院等桌研究。这些成样也会指导我们后续设计。
2. 一步步「造窟」
我们过敦煌调性挖掘，以研究成为基础，步步立敦煌石窟品环境。经过小程序框架和组件梳理，我们将卡片、底纹、图标、体视为界核心组成要素，针其着进打磨，并考究他们组合关系。
「不是纸，是墙。」
在莫高窟陈列馆时候，敦煌研究院杜鹃师我说：「壁画应该呈现质感不是纸，是墙。」
那里展区叫「仗的制作」，我们停那儿看。
敦煌的壁画是由岩壁层、地仗层、颜层组成石结构。每改换代，莫窟的无名画工们，就会在原来的壁画上重敷色，绘制的壁画。确实，扁平破烂的纸素材好像更容易地表现斑驳感。但墙的厚重，是通过历史一层层覆盖上的，将墙的感受表现到位，在构建产环境的过程中，是更需要拿捏准确的一环。
在界面设计中，卡是一种包含图和文字在内的小矩形模块，以为用户更细节信息的口，因此卡设计形式被大量的运用。在敦煌小程序中，也存在大量的分类、题及单品等口，需要运用到大量的卡设计。为靠拢敦煌石窟中「墙」的感受，我们将所有的卡设计转译为石块设计。通以下两个步骤，我们将石块一块块拼来。
清查与归类
将所有的石块按题封面，类别封面、单品封面的类别梳理出来。
设定视样式
为石块设定视样式，并根据不同类别件下的石块，在统一样式的前提下设置样式差异点。将视样式赋予到归类单的各式石块中去。
块视觉式的定。通常，界面计中卡片是由基础的矩形演变而成，矩形的基本计条件为圆角、阴、纹理、长宽比。通过去调整和对比这些参数的最佳组，来将矩形塑造成粗旷、厚重的块。
圆。最初尝试是在 iOS 圆议值范围去尝试，发现在这个范围内圆值，旦放上壁画，会变精致比，观感受像 App Store 里个个精致 App。这不太符合粗旷感受。如尝试，尖锐排列起来又是严谨精致。于是，我们尝试把磨去，使用 2Px 圆值，使石板看上去好像被风雨磨去了棱，有顿挫感觉，结合阴影效也起到了定厚度感。
阴影。在界设计，过调阴影纵长短可以表现纸张不高度。是我们是石板，需要表现出厚感觉。除了可以调阴影纵长短，我们尝试将阴影宽度适度减少。如此来，能观感受石板离墙是有比较大距离，也让石板有了厚度，量感。
我们完成石板视觉样，可以将其逐赋予到我们已经查归类单。在赋予过程，我们根据不类条件，立了 7 不竖构图比例尺寸，以及不尺寸下阴影效。关于比例设，我们设定了让后台内容供应库提供张壁画，根据不类请求自动进相应比例裁剪，这可以提高品请求效率和减少内存压力。
至于另一面墙，也就底纹。我们也通过清查归类，将不同场景的底纹梳理出，其关联类别标签，然后相应类别的底纹，配置相应的斑驳纹理。
3. 图标
图标效，设计上操作手段是技法和表意。于主功能图标，我们在表意上取了具有敦煌石窟代表性几个意象。技法上我们参考敦煌壁画传统绘制工序，「勾线 – 敷色」。其这里敷色与勾线叠加效，是代表图标被激活状态。敷色造型是参考矿物颜料敷色效，色块具有斑驳感受。
于级图标，我们采取了代表意，现代线描绘制。旨在表现上简约利落不干扰阅读，表意上贴合敦煌韵。
4. 字体
字体的效果，是产品环因素中重要的一环。但是程序环限于目前不兼容个性字体嵌入，考虑从核心的壁画体验的页面中入。在「每日画语」的壁画展中，都会为用户每推送一款壁画和相应的「画语」。选用了莫高窟写经书法气质相近的古典朝体，在「画语」展示中确认好个性字体的展示形式后，通过切图来实现。确保用户在壁画展的候，在关键文字的阅读上也有足够的入戏。
5. 标识
我们优先考虑的是，何塑造出高辨识度，直观，具有敦煌气质的标志。根据前期的研究，我们做标识在视表意上的认排序。
当下，每个人的手机里有着众的程序和信息，用户在使用手机的时在快速地滑动着每个内容，用户对微信小程序标识的认机是处「寸土寸金」的前提下，稍不留神很难住。结合之前关印象收集的结论，大家对九鹿、飞天等敦煌形象的熟悉程度比弱，我们经不同方向尝试，决定使用直观的文字图形更节省用户的认成，更为有效。
有幸，在拜访敦煌研究院的时，收集到研究院华亮老师的书法品。我们得，敦煌研究院标志的书法字正是华亮老师的笔墨，是我们决定将老师的书法进行设计加工，为标志设计，也是一种传承吧。
在产构思上，除了图书馆式的容整，展览式的容推送更满足老百姓探索的心。我们建立了「每日画语」和「每日画展」两种日更的形式。想在敦煌莫窟的壁画展中，对于壁画的展示形式，没有做画框处，是「岩面」的样子呈现，可见还原「壁 · 画」之心。
受启发，在产中的壁画展，我们了之前的「石」和「纹」相结合的设计样式作为展示形式。并将每一张壁画，根据同手机尺寸大小，将壁画的展示适配到最大，营户看壁画的洞窟沉浸感。
采岩
敦煌的传统颜料主起源于当矿石、口宝石及部分人合的颜料。迄今约千的历史。
要说莫窟除了参观洞窟外的惊，那就是在陈列馆的「岩彩区」面前久久地发呆了。每一种色号，都有十一管同深浅的色筒，这些深浅都是经过一定的研磨工艺制作，晶体颗粒越大，颜色就会越深。除了好听的名字，每种颜色旁边都会放置一「原材」作为展示。虽然眼前这些辰砂、蛤壳、孔雀石是死的，但此景由得人想起「古鱼复苏」。
为设计团，我们需要挖掘敦煌岩彩的价值，将其传递给用户。
游敦煌是指尖上的敦煌图书馆，是一款容的产。我们希望户在获取信息的时候接受到尽可的阅读干扰，应满足到聚焦容本身。作为产配色，敦煌丰富的色彩在产环境中需要谨慎的考量。
面对样的问题，我们构思以下的决方法。
将所有的色彩暂性隐藏，每次仅出现一个主色，由主色 + 五种不同重量的灰色 + 种底纹色构成产品环的主要色彩。这可以保证产品环大部情况于只有一个主色的状，让内容更不受干扰地呈现。
有了主题色的构思，就要面临如何在敦煌窟取色，如何在程序敷色的问题。
1. 取色
起初发现陈列馆的岩彩中，有部像玛瑙末、蛤这类过于淡的色彩，从色彩之间的对比度来过于弱，不适做产品的主色，需要对其进行筛选。常说光的三色是红、绿、蓝。那在这些矿物颜料中，是否存在最早的基础颜色呢？
我们拜访了敦煌研究院美术研究所，时范丽娟师正在临摹壁画。交流了我们遇到问题后，师我们议了五个颜色，这也是师在临摹壁画常用到颜色。
这些颜色都其各自的象征意义。朱砂属，象征吉祥。青金石与硅孔雀石属青绿，象征机。密陀僧属黄，象征土。赭石属褐，敦煌壁画的主表色彩。
我们决定从陈列馆的十七个颜色中将这五个颜色剥离来，作为小程序的题色。
一个面临的问题是，陈列的岩彩每个颜有一管阶，我们何取其一。为避免彩淡和深，经整的对比之，我们剥离最浅和最深的四管，在剩下的三管的颜中，用 Color.review 去校验个颜在屏幕彩对比度上的合理。Color.review 是基 WCAG 标准建立的校工具，它以检测颜是否以很容易地从背中被辨识出来。
用一个实战项目，帮你掌握科学的 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验设计」的微信众号：
浙公网安备33011002017549号