騰訊案例復(fù)盤(pán)！「云游敦煌」小程序背后的設(shè)計(jì)故事

相較于名畫(huà)家，敦煌莫高窟那些無(wú)名畫(huà)工在墻上繪制的牛鬼蛇神，讓人肝兒顫。記得看「局部」時(shí)，陳丹青老師如是形容莫高窟的壁畫(huà)。

有幸，去年團(tuán)隊(duì)決定去敦煌團(tuán)建。進(jìn)入洞窟，撲面陰冷畏懼，目瞪口呆。其一洞窟本身環(huán)境陰冷，其二洞窟神秘而莊嚴(yán)，靜謐而安詳，陣勢(shì)至眉目間，延綿千載，博大精深。

敦煌研究院與騰訊于 2017 年底達(dá)成戰(zhàn)略合作，參與到敦煌文化的保護(hù)和傳承事業(yè)當(dāng)中，在合作兩周年之際，敦煌研究院與騰訊計(jì)劃共同打造微信小程序「 云游敦煌 」，指尖輕觸方寸屏幕，就能遨游千里之外的文化遺產(chǎn)勝地。此次合作是騰訊 2018 年首次提出「新文創(chuàng)」以來(lái)的一次新探索。非常有緣分，設(shè)計(jì)團(tuán)隊(duì)從敦煌團(tuán)建回來(lái)之后便加入到了項(xiàng)目當(dāng)中。

往期回顧：

莫高窟久遠(yuǎn)而璀璨的文化，應(yīng)該被更多人看見(jiàn)。幫助更多人探索、游覽、守護(hù)莫高窟，是我們產(chǎn)品的愿景。讓游覽敦煌，變成隨時(shí)隨地。作為設(shè)計(jì)團(tuán)隊(duì)，把遠(yuǎn)在西北中敦煌石窟的感受，轉(zhuǎn)譯到每個(gè)老百姓的指尖，是這次我們要解決的難題。

好比我們?nèi)プ≈黝}酒店，不同房間環(huán)境下的規(guī)格、布局、光照、軟硬裝的風(fēng)格、材質(zhì)、顏色、紋理，飾品的氣質(zhì)等，這些環(huán)境因素都會(huì)給人極不相同的環(huán)境體驗(yàn)和感受。我們將通過(guò)設(shè)計(jì)的方式，去建立屬于敦煌石窟特有的產(chǎn)品環(huán)境。

建立「敦煌石窟」的產(chǎn)品環(huán)境

這次我們的產(chǎn)品環(huán)境，是老百姓手中的微信小程序。在小程序中，可體現(xiàn)的環(huán)境要素主要包括字體、配色、圖片與圖形風(fēng)格、特定的形狀、空間與布局、動(dòng)效以及它們之間的組合效果等。

在這里，為了營(yíng)造用戶(hù)探索敦煌石窟的入戲感，我們將會(huì)通過(guò)以下設(shè)計(jì)過(guò)程，將小程序建立成為具有敦煌石窟調(diào)性的產(chǎn)品環(huán)境。

1. 讓大家嘗試表達(dá)對(duì)敦煌石窟的印象

如果把大家對(duì)敦煌石窟的印象，轉(zhuǎn)化成產(chǎn)品設(shè)計(jì)中的界面，會(huì)是什么樣的呢？我們首先來(lái)了解一下，大家對(duì)敦煌石窟的印象是怎么樣的？我們做了一個(gè)小范圍收集。

目的

通過(guò)召集人員，讓大家通過(guò)一定的填寫(xiě)方式，表達(dá)自己對(duì)敦煌的印象。我們收集并統(tǒng)計(jì)大家填好的內(nèi)容，并將其記錄提煉，以助力后續(xù)的設(shè)計(jì)工作。

召集人員

參與者包含產(chǎn)品負(fù)責(zé)人，項(xiàng)目核心成員，曾經(jīng)去過(guò)敦煌的用戶(hù)以及想去敦煌的潛在用戶(hù)。大約二十人左右。

引導(dǎo)填寫(xiě)

為了更直觀地收集信息，我們需要提前設(shè)定好填寫(xiě)的形式和范圍。給每人派發(fā)若干紙張，每張紙只需填寫(xiě)一個(gè)對(duì)敦煌石窟的印象物，這個(gè)印象物是真實(shí)且具體的，比如佛像、壁畫(huà)、沙漠等。我們把印象物叫做 Object，Object 是一個(gè)三合一的組成。每個(gè) Object 都含有客觀描述+主觀感受的填空?？陀^描述是指按事物本來(lái)面目去考察，填寫(xiě)黃色的、圓的這類(lèi)詞匯。主觀感受是指大家對(duì)印象物內(nèi)心的感受，神秘的，莊嚴(yán)的這類(lèi)詞匯。做簡(jiǎn)要的填寫(xiě)說(shuō)明之后，引導(dǎo)大家靜默填寫(xiě)。

收集統(tǒng)計(jì)

把大家填好的紙張，將已填寫(xiě)的詞匯按 Object、客觀描述、主觀感受三種類(lèi)別進(jìn)行統(tǒng)計(jì)，將重復(fù)出現(xiàn)次數(shù)高的詞匯整理出來(lái)。

總結(jié)提煉

經(jīng)過(guò)統(tǒng)計(jì)，我們得到如下總結(jié)：按詞匯重復(fù)出現(xiàn)次數(shù)由高到低排序。大家的印象物集中在壁畫(huà)、佛像、洞窟。客觀描述主要是斑駁的、粗曠的、厚重的。其中色彩主要是土色的、有一致的色系。主觀感受主要是震撼的、敬畏的。

除了詞匯的統(tǒng)計(jì)，還有一些有趣的洞察，以下洞察也會(huì)助力到接下來(lái)的設(shè)計(jì)中。

• 不多的人會(huì)寫(xiě)九色鹿，飛天
• 少數(shù)的人會(huì)寫(xiě)九層樓
• 更少的人會(huì)寫(xiě)供養(yǎng)人
• 絕大部分的人都覺(jué)得敦煌的顏色很美

誠(chéng)然，挖掘敦煌的調(diào)性，還包括了設(shè)計(jì)團(tuán)隊(duì)研讀敦煌書(shū)籍，拜訪敦煌研究院等桌面研究。這些成果同樣也會(huì)指導(dǎo)我們后續(xù)的設(shè)計(jì)。

2. 一步步「造窟」

我們通過(guò)對(duì)敦煌調(diào)性的挖掘，以研究成果為基礎(chǔ)，一步步建立敦煌石窟的產(chǎn)品環(huán)境。經(jīng)過(guò)對(duì)小程序框架和組件的梳理，我們將卡片、底紋、圖標(biāo)、字體視為界面的核心組成要素，針對(duì)其著重進(jìn)行打磨，并考究他們之間組合的關(guān)系。

「不是紙，是墻。」

在莫高窟陳列館的時(shí)候，敦煌研究院的杜鵑老師對(duì)我說(shuō)：「壁畫(huà)應(yīng)該呈現(xiàn)的質(zhì)感不是紙，是墻?！?/p>

那里有個(gè)展區(qū)叫「地仗的制作」，我們停在那兒看。

敦煌的壁畫(huà)是由巖壁層、地仗層、顏料層組成石塊結(jié)構(gòu)。每改朝換代，莫高窟的無(wú)名畫(huà)工們，就會(huì)在原來(lái)的壁畫(huà)上重新敷色，繪制新的壁畫(huà)。確實(shí)，扁平破爛的紙素材好像更容易地去表現(xiàn)斑駁感。但墻的厚重，是通過(guò)歷史一層層覆蓋上去的，將墻的感受表現(xiàn)到位，在構(gòu)建產(chǎn)品環(huán)境的過(guò)程中，是更需要拿捏準(zhǔn)確的一環(huán)。

在界面設(shè)計(jì)中，卡片是一種包含圖片和文字在內(nèi)的小矩形模塊，可以作為用戶(hù)了解更多細(xì)節(jié)信息的入口，因此卡片設(shè)計(jì)形式被大量的運(yùn)用。在敦煌小程序中，也存在大量的分類(lèi)、話(huà)題及單品等入口，需要運(yùn)用到大量的卡片設(shè)計(jì)。為了靠攏敦煌石窟中「墻」的感受，我們將所有的卡片設(shè)計(jì)都轉(zhuǎn)譯為石塊設(shè)計(jì)。通過(guò)以下兩個(gè)步驟，我們將石塊一塊塊拼起來(lái)。

清查與歸類(lèi)

將所有的石塊按話(huà)題封面，類(lèi)別封面、單品封面的類(lèi)別梳理出來(lái)。

設(shè)定視覺(jué)樣式

為石塊設(shè)定視覺(jué)樣式，并根據(jù)不同類(lèi)別件下的石塊，在統(tǒng)一樣式的前提下設(shè)置樣式差異點(diǎn)。然后將視覺(jué)樣式賦予到歸類(lèi)單的各式石塊中去。

石塊視覺(jué)樣式的設(shè)定。通常，界面設(shè)計(jì)中卡片是由基礎(chǔ)的矩形演變而成，矩形的基本設(shè)計(jì)條件為圓角、陰影、紋理、長(zhǎng)寬比。我們通過(guò)去調(diào)整和對(duì)比這些參數(shù)的最佳組合，來(lái)將矩形塑造成粗曠、厚重的石塊。

圓角。最初嘗試是在 iOS 圓角建議值的范圍去嘗試，發(fā)現(xiàn)在這個(gè)范圍內(nèi)的圓角值，一旦放上壁畫(huà)，就會(huì)變得精致無(wú)比，直觀感受就像 App Store 里一個(gè)個(gè)精致的 App。這不太符合粗曠的感受。如果嘗試直角，尖銳的直角排列起來(lái)又是一種嚴(yán)謹(jǐn)?shù)木?。于是，我們嘗試把直角磨去一點(diǎn)點(diǎn)，使用 2Px 的圓角值，使石板的角看上去好像被風(fēng)雨磨去了棱角，有一點(diǎn)點(diǎn)頓挫的感覺(jué)，結(jié)合陰影的效果也起到了一定的厚度感。

陰影。在界面設(shè)計(jì)中，通過(guò)調(diào)整陰影的縱向長(zhǎng)短可以表現(xiàn)紙張不同的高度。但是我們是石板，需要表現(xiàn)出厚重的感覺(jué)。除了可以調(diào)整陰影的縱向長(zhǎng)短，我們嘗試將陰影的橫向?qū)挾冗m度減少。如此一來(lái)，就能直觀感受石板離墻面是有比較大的距離的，也讓石板有了厚度，重量感。

當(dāng)我們完成石板的視覺(jué)樣式，就可以將其逐一賦予到我們已經(jīng)清查的歸類(lèi)單中。在賦予的過(guò)程中，我們根據(jù)不同的類(lèi)別條件，建立了 7 種不同橫豎構(gòu)圖的比例尺寸，以及不同尺寸下的陰影效果。關(guān)于比例的設(shè)置，我們?cè)O(shè)定了讓后臺(tái)的內(nèi)容供應(yīng)庫(kù)只提供一張壁畫(huà)，根據(jù)不同的類(lèi)別請(qǐng)求自動(dòng)進(jìn)行相應(yīng)的比例裁剪，這可以提高產(chǎn)品的請(qǐng)求效率和減少內(nèi)存壓力。

至于另一面墻，也就是底紋。我們也是通過(guò)清查歸類(lèi)，將不同場(chǎng)景的底紋梳理出來(lái)，為其關(guān)聯(lián)上類(lèi)別標(biāo)簽，然后為相應(yīng)類(lèi)別的底紋，配置相應(yīng)的斑駁紋理。

3. 圖標(biāo)

圖標(biāo)的效果，設(shè)計(jì)上的操作手段是技法和表意。對(duì)于主功能的圖標(biāo)，我們?cè)诒硪馍先×司哂卸鼗褪叽硇缘膸讉€(gè)意象。技法上我們參考敦煌壁畫(huà)傳統(tǒng)的繪制工序，「勾線 – 敷色」。其中這里的敷色與勾線的疊加效果，是代表圖標(biāo)被激活的狀態(tài)。敷色的造型是參考礦物顏料的敷色效果，色塊具有斑駁的感受。

對(duì)于二級(jí)圖標(biāo)，我們采取了古代表意，現(xiàn)代線描繪制。旨在表現(xiàn)上簡(jiǎn)約利落不干擾閱讀，表意上貼合敦煌古韻。

4. 字體

字體的效果，是產(chǎn)品環(huán)境因素中重要的一環(huán)。但是小程序環(huán)境限于目前不兼容個(gè)性字體嵌入，我們考慮從核心的壁畫(huà)體驗(yàn)的頁(yè)面中入手。在「每日畫(huà)語(yǔ)」的壁畫(huà)展中，我們都會(huì)為用戶(hù)每天推送一款壁畫(huà)和相應(yīng)的「畫(huà)語(yǔ)」。我們選用了與莫高窟寫(xiě)經(jīng)書(shū)法氣質(zhì)相近的古典明朝體，在「畫(huà)語(yǔ)」展示中確認(rèn)好個(gè)性字體的展示形式后，通過(guò)切圖來(lái)實(shí)現(xiàn)。確保用戶(hù)在看壁畫(huà)展的時(shí)候，在關(guān)鍵文字的閱讀上也具有足夠的入戲感。

5. 標(biāo)識(shí)

我們優(yōu)先考慮的是，如何塑造出高辨識(shí)度，直觀，具有敦煌氣質(zhì)的標(biāo)志。根據(jù)前期的研究，我們做了標(biāo)識(shí)在視覺(jué)表意上的認(rèn)知排序。

當(dāng)下，每個(gè)人的手機(jī)里都有著眾多的程序和信息，用戶(hù)在使用手機(jī)的時(shí)候都在快速地滑動(dòng)著每個(gè)內(nèi)容，用戶(hù)對(duì)微信小程序標(biāo)識(shí)的認(rèn)知機(jī)會(huì)是處于「寸土寸金」的前提下，稍不留神很難記住。結(jié)合之前關(guān)于印象收集的結(jié)論，大家對(duì)九色鹿、飛天等敦煌形象的熟悉程度比較弱，我們經(jīng)過(guò)不同方向嘗試，決定使用直觀的文字圖形更節(jié)省用戶(hù)的認(rèn)知成本，更為有效。

有幸，在拜訪敦煌研究院的時(shí)候，收集到了研究院華亮老師的書(shū)法作品。我們得知，敦煌研究院標(biāo)志的書(shū)法字體正是華亮老師的筆墨，于是我們決定將老師的書(shū)法進(jìn)行設(shè)計(jì)加工，作為標(biāo)志設(shè)計(jì)，也算是一種傳承吧。

打造流動(dòng)的壁畫(huà)展

在產(chǎn)品構(gòu)思上，除了圖書(shū)館式的內(nèi)容整理，展覽式的內(nèi)容推送也更能滿(mǎn)足老百姓探索的心。我們建立了「每日畫(huà)語(yǔ)」和「每日畫(huà)展」兩種日更的形式?；叵朐诙鼗湍呖叩谋诋?huà)展中，對(duì)于壁畫(huà)的展示形式，沒(méi)有做畫(huà)框處理，是以「巖面」的樣子去呈現(xiàn)，可見(jiàn)其還原「壁 · 畫(huà)」之用心。

受其啟發(fā)，在產(chǎn)品中的壁畫(huà)展，我們運(yùn)用了之前的「石塊」和「底紋」相結(jié)合的設(shè)計(jì)樣式作為展示形式。并將每一張壁畫(huà)，根據(jù)不同手機(jī)尺寸大小，將壁畫(huà)的展示適配到最大化，營(yíng)造用戶(hù)看壁畫(huà)的洞窟沉浸感。

采巖

敦煌的傳統(tǒng)顏料主要起源于當(dāng)?shù)氐V石、進(jìn)口寶石及部分人工合成的顏料。迄今約有千百年的歷史。

要說(shuō)去莫高窟除了參觀洞窟以外的驚喜，那就是在陳列館的「巖彩區(qū)」面前久久地發(fā)呆了。每一種色號(hào)，都有十一管不同深淺的色筒，這些深淺都是經(jīng)過(guò)一定的研磨工藝制作，晶體顆粒度越大，顏色就會(huì)越深。除了好聽(tīng)的名字，每種顏色旁邊都會(huì)放置一塊「原材」作為展示。雖然眼前這些辰砂、蛤殼、孔雀石是死的，但此景不由得讓人想起「古魚(yú)復(fù)蘇」。

作為設(shè)計(jì)團(tuán)隊(duì)，我們需要挖掘敦煌巖彩的價(jià)值，將其傳遞給用戶(hù)。

讓游客觀眾帶走喜歡的顏色

云游敦煌是指尖上的敦煌圖書(shū)館，是一款內(nèi)容型的產(chǎn)品。我們希望用戶(hù)在獲取信息的時(shí)候接受到盡可能少的閱讀干擾，應(yīng)滿(mǎn)足到聚焦內(nèi)容本身。作為產(chǎn)品配色，敦煌豐富的色彩在產(chǎn)品環(huán)境中需要謹(jǐn)慎的考量運(yùn)用。

面對(duì)這樣的問(wèn)題，我們構(gòu)思了以下的解決方法。

我們將所有的色彩暫時(shí)性隱藏，每次僅出現(xiàn)一個(gè)主色，由主色 + 五種不同重量的灰色 + 兩種底紋色構(gòu)成產(chǎn)品環(huán)境的主要色彩。這樣可以保證產(chǎn)品環(huán)境大部分情況處于只有一個(gè)主色的狀態(tài)，讓內(nèi)容更不受干擾地呈現(xiàn)。

有了主題色的構(gòu)思，就要面臨如何在敦煌石窟取色，如何在小程序敷色的問(wèn)題。

1. 取色

起初我們發(fā)現(xiàn)陳列館的巖彩中，有部分像瑪瑙末、蛤粉這類(lèi)過(guò)于淡的色彩，從色彩之間的對(duì)比度來(lái)看過(guò)于微弱，不太適合做產(chǎn)品的主色，我們需要對(duì)其進(jìn)行篩選。我們常說(shuō)光的三原色是紅、綠、藍(lán)。那么在這些礦物顏料中，是否存在最早的基礎(chǔ)顏色呢？

我們拜訪了敦煌研究院美術(shù)研究所，當(dāng)時(shí)范麗娟老師正在臨摹壁畫(huà)。交流了我們遇到的問(wèn)題之后，老師向我們建議了五個(gè)顏色，這也是老師在臨摹壁畫(huà)中常用到的顏色。

這些顏色都有其各自的象征意義。朱砂屬紅，象征吉祥。青金石與硅孔雀石屬青綠，象征生機(jī)。密陀僧屬黃，象征土地。赭石屬褐，是敦煌壁畫(huà)的主要代表色彩。

我們決定從陳列館的十七個(gè)顏色中將這五個(gè)顏色剝離出來(lái)，作為小程序的主題色。

一個(gè)面臨的問(wèn)題是，陳列館的巖彩每個(gè)顏色都有十一管色階，我們?nèi)绾稳∑湟?。為了避免色彩過(guò)淡和過(guò)深，經(jīng)過(guò)整體的對(duì)比之后，我們剝離最淺和最深的四管，在剩下的三管的顏色中，用 Color.review 去校驗(yàn)這個(gè)顏色在屏幕色彩對(duì)比度上的合理性。Color.review 是基于 WCAG 標(biāo)準(zhǔn)建立的校色工具，它可以檢測(cè)顏色是否可以很容易地從背景中被辨識(shí)出來(lái)。

敦煌的色彩不僅美，更具有著特別的歷史價(jià)值及象征意義。取色完成后，我們想進(jìn)一步傳遞敦煌色彩的價(jià)值。

我們通過(guò)研讀相關(guān)文獻(xiàn)，提煉內(nèi)容，將巖彩的文字知識(shí)與相應(yīng)壁畫(huà)作為封裝，延續(xù)之前設(shè)定好的石塊展覽形式，放在產(chǎn)品色彩入口中，讓用戶(hù)可以在這里觀看「巖彩展」、自定義小程序的主題色。

2. 敷色

熟悉礦物顏料的同學(xué)知道，敷色時(shí)一上刷子，出來(lái)的色彩質(zhì)感是帶著礦物的殘粒的，這些顆粒因其不同的大小在光線的折射下顯得異常的美。但是產(chǎn)品界面中色塊是平滑的，于是我們梳理出產(chǎn)品界面中面積較大的顏色展示區(qū)域，將我們之前設(shè)定好的底紋疊加到主題色塊當(dāng)中，讓顏色變得有巖面感。

我們通過(guò)清查并歸類(lèi)全局能夠作為主題色的界面組件，比如關(guān)鍵按鈕、高亮文字、關(guān)鍵背景等。按相應(yīng)的需要為其設(shè)定變色樣式，比如面積大的地方我們配置一定的底紋，精細(xì)的地方我們讓其保持平滑。用戶(hù)就可以在整個(gè)環(huán)境中感受到自己設(shè)定好主題色，帶走自己喜歡的顏色。

把「密陀僧」的壁畫(huà)看完

密陀僧是音譯，是一款在東漢時(shí)期從波斯傳過(guò)來(lái)的顏色，是記載在「圖經(jīng)本草」中含有藥物效用的礦物顏料，中國(guó)是最早運(yùn)用密陀僧作為繪畫(huà)顏料的國(guó)家之一。當(dāng)范麗娟老師介紹這個(gè)顏色的時(shí)候，就想把這個(gè)顏色的壁畫(huà)都看一遍。

既然是讓老百姓在指尖上游覽敦煌石窟，我們自然也為大家提供了更豐富的探索方式，敦煌的色彩是個(gè)大菜，自然少不了讓觀眾按顏色探索壁畫(huà)。

我們首先將莫高窟陳列館的十七個(gè)顏色，作為我們的「色庫(kù)」。每天探索欄目會(huì)從色庫(kù)中抽取一個(gè)顏色推送給用戶(hù)，用戶(hù)可以在這里看到該顏色所有的壁畫(huà)。

那么壁畫(huà)和色庫(kù)如何關(guān)聯(lián)起來(lái)呢，我們?cè)O(shè)定的策略是「壁畫(huà)中若含有一個(gè)與指定顏色符合接近范圍的顏色，視為匹配成功。一幅壁畫(huà)可以和多個(gè)指定的顏色關(guān)聯(lián)」。

有了構(gòu)思，就要面臨如何解剖壁畫(huà)顏色，如何將解剖的顏色匹配指定顏色的問(wèn)題。

1. 從壁畫(huà)里解剖顏色

壁畫(huà)留載千年，存在眾多破損和雜色痕跡，這種情況下就會(huì)面臨一個(gè)廢色過(guò)多，色彩分布零散的問(wèn)題。我們都知道一幅畫(huà)中有很多顏色，哪個(gè)顏色才算數(shù)，是面積大的顏色嗎？這會(huì)導(dǎo)致，很多壁畫(huà)都是其大面積的顏色被檢測(cè)到，這是不夠的。我們需要解剖出壁畫(huà)中那些突出的顏色，于是我們做了如下嘗試。

通過(guò)劃分明度分離顏色

我們發(fā)現(xiàn)老舊的敦煌壁畫(huà)，許多突出的顏色已經(jīng)變淡。我們將壁畫(huà)劃分三種層次的明度，將突出的顏色重新在各個(gè)明度分層里面解剖出來(lái)。這樣解剖出來(lái)的顏色就更加全面。

聚類(lèi)顏色

初步解剖出第一批顏色之后，為了讓顏色后續(xù)被更有序地拾取，我們需將這批顏色進(jìn)行打理。通過(guò)設(shè)定顏色之間相似度的范圍，對(duì)顏色進(jìn)行聚類(lèi)。

雜色過(guò)濾

通過(guò)聚類(lèi)顏色之后 ， 需要進(jìn)一步將雜色過(guò)濾掉。我們將明度和飽和度來(lái)同時(shí)過(guò)濾，為得到的顏色設(shè)立明度等級(jí)及在每級(jí)明度下設(shè)立飽和度范圍，一級(jí)級(jí)將不合范圍的無(wú)效色過(guò)濾掉。

設(shè)置排序

如果將敦煌壁畫(huà)劃分為高中低三個(gè)明度，我們發(fā)現(xiàn)，權(quán)重的顏色主要集中在中等明度，我們將最后得到的顏色結(jié)果按明度優(yōu)先級(jí)去排序，得到最終的解剖色。

2. 將解剖的顏色與色庫(kù)匹配

實(shí)現(xiàn)了壁畫(huà)的顏色解剖，就要進(jìn)行顏色匹配了。我們有大量的壁畫(huà)需要和色庫(kù)匹配，因此需要設(shè)定一個(gè)自動(dòng)匹配的機(jī)制。在技術(shù)上，我們選用 H（色調(diào)）、S（飽和度）、V（明度） 模式作為顏色模式。 HSV 模式下的色彩可以視為一個(gè)圓錐立體模型， H 是 0°~360° 的頂部圓面，不同的角度代表著不同的色調(diào)傾向。S 是圓面上的直徑，每單位長(zhǎng)度的直徑代表著該長(zhǎng)度下相應(yīng)飽和度的色調(diào)。V 對(duì)應(yīng)的是圓錐的中間軸，代表明度。

基于圓錐立體模型的幾何概念，建立該模型（x,y,z）三維坐標(biāo)的算法。在斜邊長(zhǎng) R，底面圓半徑為 r，高為 h 的 HSV 圓錐體內(nèi)，以地面圓心為原點(diǎn)，H=0 為 x 軸正方向建立坐標(biāo)軸。那么色值是（H,S,V）的點(diǎn)的三維坐標(biāo)（x,y,z）是：

如此一來(lái)，所有的顏色都可以通過(guò)坐標(biāo)計(jì)算得出在立體圓錐里的位置。通過(guò)以下幾步就可實(shí)現(xiàn)顏色與壁畫(huà)的自動(dòng)匹配。

• 確認(rèn)指定顏色，如密陀僧在圓錐中的坐標(biāo)是 A。
• 將所有壁畫(huà)的顏色解剖，并將解剖的顏色投入圓錐中，通過(guò)以上算法得出所有顏色的具體坐標(biāo)位置。
• 遍歷所有顏色在圓錐中與坐標(biāo) A 距離。
• 設(shè)定與坐標(biāo) A 距離的排名范圍，取與坐標(biāo) A 距離最近的前排顏色。
• 則這批顏色所屬壁畫(huà)就成功匹配為屬于密陀僧的壁畫(huà)。

在小程序中技術(shù)只是連接觀眾與敦煌石窟的橋梁，我們希望送到大家眼前的，是觸手可及的敦煌巖彩展，壁畫(huà)展。雖然過(guò)程會(huì)遇到一些困難，尤其是從顏色探索壁畫(huà)，相比一般的圖像取色，從老舊的敦煌壁畫(huà)解剖出原本的顏色會(huì)更困難。在進(jìn)行明度劃分的時(shí)候，看到不同明度下的顏色塊面被一層層分離，仿佛感受到壁畫(huà)中的一層層物件被重新喚醒。

一步步「采巖」，一步步沉甸甸。我們實(shí)現(xiàn)了讓用戶(hù)自定義主題色、看敦煌色彩展覽、從顏色去探索壁畫(huà)這幾件事?；赝麄€(gè)和敦煌巖彩打交道的過(guò)程，從陌生到熟悉，從熟悉到傳遞，我們都知道了敦煌巖彩都是有其厚重的意義和價(jià)值。

當(dāng)看著小程序敦煌色彩頁(yè)面的設(shè)計(jì)圖，不由得又想起「古魚(yú)復(fù)蘇」。我們相信敦煌色彩的美，應(yīng)該更多地被世人看到。

后記

隨著項(xiàng)目的深入，設(shè)計(jì)的一個(gè)個(gè)想法需要確確實(shí)實(shí)地落地，開(kāi)始變得棘手。尤其在產(chǎn)品接近上線的節(jié)骨點(diǎn)期間，快速應(yīng)急出方案的同時(shí)，還需耐心、快速并反復(fù)地校驗(yàn)開(kāi)發(fā)的效果是否吻合設(shè)計(jì)稿，為所有的 BUG 梳理待辦優(yōu)先級(jí)，并且一條條盯著直到它被解決。我們?cè)谧詈髱滋旄袊@，BUG是 修不完的。即使到了產(chǎn)品上線，我們還是在一個(gè)與 BUG 賽跑的狀態(tài)沒(méi)緩過(guò)來(lái)。

當(dāng)看到人民日?qǐng)?bào)、敦煌研究院、騰訊等運(yùn)營(yíng)的助推及將小程序直接固定在服務(wù)欄；當(dāng)看到 CAN 博物館、看理想、ONE 等自己喜歡的媒體用自己的語(yǔ)言去推薦；當(dāng)看到微博上六千多萬(wàn)條關(guān)于#云游敦煌#的討論的聲音；當(dāng)看到我們的云游敦煌小程序用戶(hù)量過(guò)百萬(wàn)，才緩過(guò)神來(lái)，喔，原來(lái)我們一期殺青了，并且也得到了大家的肯定。

看到一個(gè)學(xué)生網(wǎng)友發(fā)的微博：

Day 10?？淳W(wǎng)課。寫(xiě)作業(yè)。計(jì)算機(jī)二級(jí)。背單詞。云游敦煌。

我們旨在這段特殊的時(shí)期，希望大家能在家里，看看敦煌的美。悶著頭做設(shè)計(jì)這么久，忽然聽(tīng)到這種聲音， 煥然想起我們的今日畫(huà)語(yǔ)：「今日，宜知足」。

在今后的云游敦煌項(xiàng)目中，我們團(tuán)隊(duì)依然會(huì)保持優(yōu)化和迭代，引入更多形式的敦煌展覽。

深圳到敦煌沒(méi)有直航，需要在蘭州或者西安轉(zhuǎn)機(jī)一趟。每次去都感覺(jué)挺遠(yuǎn)的，作為南方人吃的也不習(xí)慣。但是想到終點(diǎn)那里可以看到讓人肝兒顫的中國(guó)壁畫(huà)藝術(shù)，也值得。

上次去的時(shí)候是冬季，飛機(jī)路過(guò)青海的的時(shí)候，被手機(jī)里的歌叫醒了。當(dāng)時(shí)剛好放的是坂本龍一的《Mar Mediterrani》。 窗外一看全是冰山。和白云混在一起，美輪美奐，想著終于有場(chǎng)景可以承托起這個(gè)曲子了，當(dāng)時(shí)坐在位子上真的是感動(dòng)到想付錢(qián)。

是的，最好看的東西，也許不一定在終點(diǎn)。感謝一段造窟采巖的設(shè)計(jì)經(jīng)歷。

歡迎關(guān)注作者「騰訊CDC體驗(yàn)設(shè)計(jì)」的微信公眾號(hào)：