無極五娛樂怎麼樣?_騰訊案例復盤!「雲遊敦煌」小程序背後的設計故事

相較於名畫家,敦煌莫高窟那些無名畫工在牆上繪製的牛鬼蛇神,讓人肝兒顫。記得看「局部」時,陳丹青老師如是形容莫高窟的壁畫。

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

敦煌研究院與騰訊於 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體驗設計」的微信公眾號:

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五娛樂怎麼樣?_騰訊案例復盤!「雲遊敦煌」小程序背後的設計故事

赞 (0)