騰訊案例復(fù)盤！「云游長城」設(shè)計(jì)過程完整復(fù)盤

導(dǎo)語

云游長城項(xiàng)目是運(yùn)用游戲前沿科技和數(shù)字技術(shù)，對(duì)長城這一寶貴文化遺產(chǎn)進(jìn)行數(shù)字化還原與呈現(xiàn)，讓用戶足不出戶就能在手機(jī)上游覽長城風(fēng)光，了解學(xué)習(xí)長城修復(fù)保護(hù)知識(shí)。本文基于項(xiàng)目全流程，從用戶體驗(yàn)設(shè)計(jì)角度進(jìn)行回顧復(fù)盤，總結(jié)云游長城項(xiàng)目的設(shè)計(jì)方法思路，沉淀數(shù)字文化保護(hù)類項(xiàng)目的用戶體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)。

往期案例：

一、背景介紹

去年四月，我們美術(shù)設(shè)計(jì)團(tuán)隊(duì)接到了數(shù)字長城項(xiàng)目組的緊急任務(wù)：希望能在近 2 個(gè)月時(shí)間里重塑 “云游長城”的體驗(yàn)，讓整個(gè)云游長城過程更具游戲感、趣味性，并明確需在六月正式對(duì)外發(fā)布。

“云游長城”是數(shù)字長城小程序里的一個(gè)子模塊——它是一段由游戲技術(shù)創(chuàng)建而成的數(shù)字化長城，用戶可通過手機(jī)操作體驗(yàn)長城修繕工作、瀏覽長城景觀。

與數(shù)字長城項(xiàng)目組合作，讓我們有機(jī)會(huì)將以往項(xiàng)目的設(shè)計(jì)經(jīng)驗(yàn)運(yùn)用到數(shù)字文保這一新領(lǐng)域里，參與設(shè)計(jì)的小伙伴們都非常積極，大家希望能為云游長城設(shè)計(jì)出一套優(yōu)秀的解決方案。

與此同時(shí)，項(xiàng)目的上線時(shí)間近在眼前，而重塑好“云游長城”的整體體驗(yàn)對(duì)大家來說是一個(gè)不小的挑戰(zhàn)。

我們希望能通過這次設(shè)計(jì)經(jīng)歷，積累數(shù)字文保領(lǐng)域的設(shè)計(jì)經(jīng)驗(yàn)，探索高質(zhì)高效完成設(shè)計(jì)項(xiàng)目攻堅(jiān)的工作流程。

二、設(shè)計(jì)策略

開始設(shè)計(jì)之前，我們首先考慮的命題是：“云游長城”項(xiàng)目的設(shè)計(jì)目標(biāo)和策略是什么？考慮清楚了設(shè)計(jì)目標(biāo)和策略，才能在開展后續(xù)設(shè)計(jì)工作時(shí)有的放矢，找準(zhǔn)設(shè)計(jì)發(fā)力點(diǎn)。于是我們從項(xiàng)目本身的特點(diǎn)出發(fā)進(jìn)行思考。“云游長城”項(xiàng)目其實(shí)是數(shù)字文化保護(hù)類項(xiàng)目的具體案例。而數(shù)字文保類項(xiàng)目的統(tǒng)一目標(biāo)是通過游戲技術(shù)賦能數(shù)字文保，從而以數(shù)字化方式傳承和傳播中華文化，對(duì)傳統(tǒng)文化進(jìn)行數(shù)字化保護(hù)，同時(shí)提升全社會(huì)的文化自信。除此之外，由于這類項(xiàng)目參與方較多，設(shè)計(jì)需兼顧各方訴求，考慮如何從產(chǎn)品體驗(yàn)的角度助力實(shí)現(xiàn)“用戶價(jià)值”、“文化價(jià)值”、“社會(huì)價(jià)值”。

厘清這類項(xiàng)目的目標(biāo)與價(jià)值，以及相關(guān)方訴求之后，數(shù)字文保類項(xiàng)目的設(shè)計(jì)目標(biāo)和策略也逐漸清晰。首先：我們需要有效地將文化價(jià)值傳遞給用戶——比如采取故事化、情景帶入等方式讓用戶的體驗(yàn)過程更有沉浸和代入感；其次：要讓用戶能跟文物、文化進(jìn)行積極互動(dòng)，激發(fā)其探索欲望，那么游戲性設(shè)計(jì)就必不可少，這可以讓用戶在玩中習(xí)得知識(shí)；最后：既然是將文保數(shù)字化，必然是得到了前沿技術(shù)的加持，技術(shù)的力量得以讓用戶體驗(yàn)更上一層樓，而設(shè)計(jì)則需要營造能讓大眾直觀感受到文物穿越古今，連接未來的科技感。

明確了設(shè)計(jì)目標(biāo)和策略之后，我們也建立了數(shù)字文保類項(xiàng)目體驗(yàn)設(shè)計(jì)的金字塔模型，作為指導(dǎo)后續(xù)設(shè)計(jì)實(shí)施的關(guān)鍵方法論。

三、設(shè)計(jì)過程

接下來就是具體的設(shè)計(jì)執(zhí)行過程了。為確保云游長城體驗(yàn)重塑的完整性，我們整個(gè)設(shè)計(jì)過程都從：功能、性能、操作、表現(xiàn)四個(gè)維度結(jié)合故事性游戲性來綜合考慮。

1. 發(fā)現(xiàn)問題

接手項(xiàng)目時(shí)我們已拿到了可體驗(yàn)的產(chǎn)品 demo。通過邀請(qǐng)公司內(nèi)部同事來體驗(yàn) demo、觀察他們操作并與其進(jìn)行一對(duì)一訪談，我們快速收集了當(dāng)時(shí)版本里功能、操作、界面等多維度的問題。

2. 分析評(píng)估

收集完問題后，我們一方面將已知問題通過用戶體驗(yàn)地圖做了可視化的梳理，從中發(fā)現(xiàn)：當(dāng)時(shí)版本從啟動(dòng)云游長城到結(jié)束游覽的全過程，測試用戶的情緒都比較低落——這意味著在實(shí)際使用場景中，真正的用戶很可能因種種體驗(yàn)上的不滿意而中途退出，無法完成云游長城的全程體驗(yàn)。

另一方面，我們結(jié)合前文提到的數(shù)字文保類項(xiàng)目體驗(yàn)設(shè)計(jì)金字塔模型，具體分析云游長城體驗(yàn)應(yīng)該滿足用戶的哪些體驗(yàn)需求，從而能更全面地評(píng)估當(dāng)前產(chǎn)品 demo 的問題。

云游長城的體驗(yàn)需求分成三部分：

可識(shí)別：這是非工具類產(chǎn)品用戶體驗(yàn)需求的基礎(chǔ)。用戶的耐心非常有限，界?的框架，核心的操作都需要直接可識(shí)別，這樣才有可能促成他們?cè)敢鈬L試體驗(yàn)一下。

易學(xué)&易用：由于整個(gè)云游長城時(shí)長約 10 分鐘，受眾范圍又很廣，因此產(chǎn)品本身無論玩法還是操作上都不宜設(shè)置較高的體驗(yàn)門檻，讓人難學(xué)會(huì)、難操作。

游戲感&沉浸感：游戲感&沉浸感的體驗(yàn)?zāi)芎芎玫丶ぐl(fā)用戶參與并完成云游長城的全過程，讓他們留下深刻的印象，從而加深對(duì)長城文化保護(hù)的認(rèn)知。

因此分析得出：

首先，云游長城在內(nèi)容上不夠有吸引力，且“可玩性”較弱，無法讓用戶產(chǎn)生興趣；

其次，基礎(chǔ)操作上容易誤操作，且提示反饋弱，引導(dǎo)不清晰，容易產(chǎn)生失控感、無助感；

以上結(jié)論按功能、性能、操作、表現(xiàn)四個(gè)維度來詳細(xì)說明，內(nèi)容如下：

3. 設(shè)計(jì)建議

首先在內(nèi)容呈現(xiàn)上，我們提供了一些更游戲化的表達(dá)思路，比如可以像游戲一樣給定一個(gè)明確的世界觀，從而讓用戶快速帶入，產(chǎn)生使命感。

玩法互動(dòng)層面，重點(diǎn)在長城修繕環(huán)節(jié)。因此我們從長城紀(jì)錄片里抓取了修繕過程的細(xì)節(jié)特點(diǎn)、難點(diǎn)，建議能將這些元素加入到長城修繕互動(dòng)中去，從而讓用戶體驗(yàn)時(shí)更具有真實(shí)感，也讓修繕過程更豐滿有層次。

除此之外，我們也在性能、操作、表現(xiàn)等方面提出了相應(yīng)的建議。由于篇幅限制不在此一一展開，全部設(shè)計(jì)建議要點(diǎn)匯總?cè)缦隆?/p>

在跟項(xiàng)目組開會(huì)溝通后，以上建議的大部分內(nèi)容都得到了大家的支持，因此我們快速進(jìn)入到具體方案設(shè)計(jì)階段。

4. 體驗(yàn)設(shè)計(jì)方案

①故事化敘述的構(gòu)建

首先我們要構(gòu)建一個(gè)符合產(chǎn)品核心思想的世界觀，讓用戶理解長城的意義、長城修繕的緊迫性，引發(fā)他們的共鳴，并與后續(xù)內(nèi)容的推進(jìn)建立連接。我們先提供了 2 個(gè)不同的世界觀方案：

「方案一」從 2222 穿越回 2022，搶修長城

2222 年的中華大地，巍峨長城已不復(fù)存在。為了挽救歷經(jīng)千年的文化瑰寶，騰訊聯(lián)合國家文保部門邀請(qǐng)你穿越時(shí)空，踏上長城保護(hù)之旅。穿越時(shí)空隧道回到 2022 后，「長城保護(hù)計(jì)劃」見證團(tuán)團(tuán)長騰訊公益代言人‘小紅花‘將在長城腳下等你，他將帶領(lǐng)你一起踏上修繕長城搶險(xiǎn)之旅。

「方案二」長城修繕老師傅年邁，尋求有志之士繼承衣缽

近年來長城由于自然侵蝕和人為破壞，損毀速度越來越快。長城根下的修繕“守城人”感嘆年老力衰、力不從心，無法繼續(xù)修繕長城、維持其原始面貌。因此守城人向社會(huì)大眾發(fā)出招募信息，希望能有更多人加入他們，積極參與長城的修繕守護(hù)工作。有意愿參與的人將隨同幾位長城保護(hù)計(jì)劃見證團(tuán)成員一起完成一段長城修繕的工作。

經(jīng)過設(shè)計(jì)師們內(nèi)部評(píng)審，「方案一」開篇就展示了未來世界里長城已消失的凄慘狀況，我們擔(dān)心這樣的概念傳遞出一些消極的情緒，不符合本產(chǎn)品的調(diào)性，因此決定棄用。

「方案二」更貼合修繕長城的真實(shí)動(dòng)機(jī)，但通過一個(gè)虛構(gòu)的“守城人”來向大眾發(fā)出加入修繕守護(hù)長城的邀請(qǐng)，我們認(rèn)為有點(diǎn)多余——因?yàn)樵诋a(chǎn)品中已經(jīng)有更適合的角色了：騰訊公益代言人“小紅花”。通過騰訊公益小紅花來邀請(qǐng)用戶參與修繕守護(hù)長城的體驗(yàn)，即透出了公司品牌又暗含了其公益的底色，因此我們將方案修改成由小紅花召集修繕長城守護(hù)人，讓參與者作為“實(shí)習(xí)生”體驗(yàn)修繕長城的工作。

「方案定稿」騰訊公益小紅花召集長城守護(hù)人，見習(xí)修繕保護(hù)長城

世界觀確立后，我們將之前整理的設(shè)計(jì)建議功能內(nèi)容通過整合串聯(lián)進(jìn)故事線里，形成完整的設(shè)計(jì)概念：

之后制作輸出了低保真交互演示視頻：

根據(jù)每個(gè)環(huán)節(jié)不同的內(nèi)容特點(diǎn)，我們采用了不同的情感化設(shè)計(jì)手法引導(dǎo)用戶一步步深入云游長城的體驗(yàn)。這其中最重要的“長城修繕”部分，我們是如何設(shè)計(jì)的呢？

②修繕互動(dòng)設(shè)計(jì)

構(gòu)建有起伏的修繕情節(jié)，讓用戶全情投入

修繕長城一共分為 5 個(gè)關(guān)卡，每關(guān)通過展示長城的一種破損情況及其修繕方式來介紹長城修繕過程。我們將每關(guān)的修繕用“引出目標(biāo)——制造困難——得到收獲”的思路作為情節(jié)構(gòu)建框架，讓用戶的情緒隨著修繕進(jìn)程的開展而波動(dòng)，從而產(chǎn)生沉浸的、有代入感的體驗(yàn)。

“弱操作&強(qiáng)反饋”的操作設(shè)計(jì)，讓修繕互動(dòng)輕松有趣

我們一方面希望用戶通過自己體驗(yàn)修繕數(shù)字長城了解實(shí)際長城的修繕方法，另一方面需避免在操作上給用戶帶來較大的學(xué)習(xí)負(fù)擔(dān)進(jìn)而降低其體驗(yàn)完全程的意愿，綜合考量后確立了以“弱操作&強(qiáng)反饋“為目標(biāo)的操作互動(dòng)設(shè)計(jì)方向。

操作層面：通過在不同關(guān)卡里，將實(shí)際修繕動(dòng)作精簡并匹配移動(dòng)端常用觸屏交互方式，讓操作輕松無負(fù)擔(dān)。

我們只選取了點(diǎn)擊-拖拽、點(diǎn)擊、滑動(dòng)、長按這四種常用的觸屏操作來完成所有關(guān)卡的交互，同時(shí)通過將這四種操作在五個(gè)關(guān)卡里進(jìn)行組合變換來提供操作上的豐富性，讓修繕過程更生動(dòng)。

反饋層面：根據(jù)用戶操作的精準(zhǔn)度提供符合情理的相應(yīng)操作反饋，來提升修繕體驗(yàn)的趣味性。比如在第四關(guān)里：通過手指按住屏幕的時(shí)間長短，觸發(fā)錘子敲打損壞磚塊的力度大小，從而給予不同的操作反饋。

第四關(guān)修繕操作

第五關(guān)里：通過手指拖動(dòng)支架移動(dòng)位置的變化，觸發(fā)支架是否能成功架在窗臺(tái)上，從而給予不同的操作反饋。

第五關(guān)修繕操作

總之，通過故事化敘述，讓用戶理解了長城修繕的意義和緊迫性，引發(fā)他們的共鳴，并與后續(xù)內(nèi)容的推進(jìn)建立連接；通過構(gòu)建有起伏的修繕情節(jié)、提供“弱操作&強(qiáng)反饋”的操作設(shè)計(jì)，讓整個(gè)長城修繕過程生動(dòng)且富有真實(shí)感，為用戶帶來沉浸的、有代入感的修繕體驗(yàn)。

5. UI 視覺設(shè)計(jì)方案

①風(fēng)格分析

云游長城運(yùn)用了大量的技術(shù)模擬出真實(shí)的長城景象，即使透過手機(jī)屏幕，也能感受到長城的宏偉與真實(shí)，我們通過將 ui 與實(shí)景結(jié)合，讓用戶能更順暢絲滑地體驗(yàn)到云游長城的樂趣。

關(guān)鍵詞提煉：通過結(jié)合云游長城的實(shí)景風(fēng)格及玩法，提煉出兩個(gè)方向的關(guān)鍵詞，進(jìn)行 ui 視覺風(fēng)格嘗試。

②視覺設(shè)計(jì)方向

方向一：青山綠水-千里江山如畫

方向一著眼于強(qiáng)調(diào)長城的氣質(zhì)，旨在傳達(dá)出文化底蘊(yùn)和歷史感。在設(shè)計(jì)上采用了傳統(tǒng)的圖案和色彩，將其呈現(xiàn)為卷軸畫卷的形式，類似于傳統(tǒng)國畫元素。營造出具有國風(fēng)特色的文化底蘊(yùn)，增強(qiáng)用戶的沉浸感，使用戶在云游長城的過程中獲得愉悅的體驗(yàn)，不僅僅是欣賞美景，更能夠深刻感受到長城的魅力和內(nèi)涵。

方向二：數(shù)字工匠——科技娛樂助力長城保護(hù)

采用現(xiàn)代化、簡潔、突出科技感和未來感的設(shè)計(jì)風(fēng)格，以彰顯云游長城的特點(diǎn)。在 UI 設(shè)計(jì)中，采用半透明效果，巧妙融入場景，同時(shí)添加科技元素，如線條、點(diǎn)陣等，以突出科技感。采用現(xiàn)代化的圖案和線條，運(yùn)用冷色調(diào)和輕薄質(zhì)感的元素，創(chuàng)造出極具科技感的視覺效果。在保證功能易用性的前提下，盡量減少 UI 的存在感，讓用戶更純粹地感受云游長城數(shù)字還原實(shí)景的科技魅力。

由于方向二的科技感更強(qiáng)，在傳達(dá)科技助力文保的產(chǎn)品特色上表達(dá)得更明確，因此我們選定該方向作為云游長城的視覺風(fēng)格。

綜合產(chǎn)品內(nèi)容、實(shí)現(xiàn)成本、項(xiàng)目時(shí)間等多維度考慮，視覺表現(xiàn)重點(diǎn)聚焦在 UI+動(dòng)效層面“動(dòng)靜結(jié)合”地將“科技感”自然融于云游長城體驗(yàn)中。

③視覺設(shè)計(jì)理念

動(dòng)靜結(jié)合的形式美：

靜：視覺上我們盡量以輕量化的 UI 表達(dá)讓用戶能沉浸式體驗(yàn)數(shù)字長城風(fēng)景；在初稿設(shè)計(jì)完成后體驗(yàn)反饋扁平化 UI 的優(yōu)點(diǎn)能較好地呈現(xiàn)內(nèi)容，但容易讓用戶產(chǎn)生審美疲勞的“普通感”，因此：如何調(diào)整界面讓用戶“眼前一亮” 是下一步 UI 上需要打磨的地方。

界面 UI 的設(shè)計(jì)包含了形、色、質(zhì)三大方面，基于目前的長城界面 UI 嘗試從“形”上思考突破點(diǎn)，通過分析收集資料，提取出了 3A 游戲的 UI 共性之一：結(jié)合場景透視的 UI 增強(qiáng)沉浸感和視覺沖擊力：

將此共性運(yùn)用于長城 UI 的造型上，同時(shí)將界面融入場景互動(dòng)，讓整體 UI 跟隨長城透視及視角移動(dòng)，結(jié)合有節(jié)奏的動(dòng)效，由 2D 變?yōu)?3D，增加界面互動(dòng)性及趣味性。

動(dòng)：在 UI 界面出場及游戲場景的結(jié)合方面，采用 2D 界面出場動(dòng)效+輕量化滑動(dòng)的方式，配合閃爍、生長等偏快的動(dòng)畫效果，為數(shù)字長城的科技感增添靈動(dòng)。

最終呈現(xiàn)出富有科技感的視覺效果，讓歷史感濃厚的長城披上了科技的外衣。

6. 設(shè)計(jì)落地

完成設(shè)計(jì)方案后，離上線時(shí)間已不到一個(gè)月。在這所剩無幾的時(shí)間內(nèi)我們不但要完成大批量設(shè)計(jì)稿出圖，還需要跟開發(fā)緊密合作讓設(shè)計(jì)方案得以實(shí)現(xiàn)。為順利完成云游長城的重塑任務(wù)，我們從以下三個(gè)方面來協(xié)作配合，高效產(chǎn)出：

①打造統(tǒng)一的設(shè)計(jì)稿產(chǎn)出流程，提高出圖效率

此項(xiàng)目由多名設(shè)計(jì)師配合協(xié)作輸出設(shè)計(jì)方案。整個(gè)設(shè)計(jì)稿的輸出過程中，大家都遵守：“快速響應(yīng)、心中有數(shù)、查漏補(bǔ)缺“這三條協(xié)作準(zhǔn)則，確保輸出的內(nèi)容符合前期確定的設(shè)計(jì)標(biāo)準(zhǔn)，并提升了溝通效率、減少了設(shè)計(jì)返工率，2 周內(nèi)輸出全部設(shè)計(jì)稿。

在協(xié)作中的角色分配上：由于項(xiàng)目緊急，由 1 名主設(shè)計(jì)師主導(dǎo)帶領(lǐng)若干設(shè)計(jì)師一起完成設(shè)計(jì)稿輸出。主設(shè)計(jì)師一方面需對(duì)接上下游協(xié)作者，完成當(dāng)前任務(wù)的統(tǒng)籌溝通；另一方面也需要安排分配給其他設(shè)計(jì)師相應(yīng)子任務(wù)需求，并把控設(shè)計(jì)進(jìn)度。

工作時(shí)間節(jié)奏以：上午溝通為主、下午設(shè)計(jì)出圖為主、晚上設(shè)計(jì)成果整合同步為主來展開。

②低保真 demo 快速示意效果

在給開發(fā)提供的設(shè)計(jì)說明文件中，我們將操作細(xì)節(jié)較多、非常規(guī)的操作通過低保真 demo 來演示大致期望效果，以此減少設(shè)計(jì)與開發(fā)的溝通成本，以便開發(fā)同事能快速了解設(shè)計(jì)意圖，實(shí)現(xiàn)出較準(zhǔn)確的設(shè)計(jì)效果。

互動(dòng)答題低保真 demo

清理考古低保真 demo

③跟進(jìn)開發(fā)，緊密測試實(shí)現(xiàn)還原度

完成全部設(shè)計(jì)稿輸出后，通過與開發(fā)合力聯(lián)調(diào)+設(shè)計(jì)體驗(yàn)走查的方式，盡最大努力確保設(shè)計(jì)稿的精準(zhǔn)還原。

設(shè)計(jì)師與開發(fā)合力聯(lián)調(diào)中

最后

此次負(fù)責(zé)云游長城項(xiàng)目設(shè)計(jì)，豐富了我們的設(shè)計(jì)項(xiàng)目品類，積累了數(shù)字文保領(lǐng)域的設(shè)計(jì)經(jīng)驗(yàn)。同時(shí)在該項(xiàng)目實(shí)踐中，我們通過不斷挖掘設(shè)計(jì)價(jià)值，為產(chǎn)品目標(biāo)的達(dá)成提供多維度的支持。

云游長城作為首次將 IEG 自研引擎及云游戲技術(shù)應(yīng)用于文化遺產(chǎn)保護(hù)的項(xiàng)目，它也是技術(shù)公益推動(dòng)數(shù)字文保工作開展的重要嘗試。設(shè)計(jì)師們通過層次豐富的交互與視覺表現(xiàn)，將游戲技術(shù)自然地融于產(chǎn)品體驗(yàn)中，讓游戲技術(shù)的跨界應(yīng)用有了更多的可能。

如果你還未體驗(yàn)過云游長城，歡迎在微信小程序中搜索「云游長城」，來體驗(yàn)最新的從資產(chǎn)制作、畫面渲染到交互都基于騰訊游戲自研引擎打造的云游長城，感受數(shù)字版長城隨季節(jié)、天氣、晝夜的變化而呈現(xiàn)的豐富多彩的美景。

最后感謝團(tuán)隊(duì)廖睿志，黃燦以及參與攻堅(jiān)的小伙伴們的設(shè)計(jì)支持。

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