導(dǎo)語

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

往期案例：

一、背景介紹

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

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

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

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

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

二、設(shè)計策略

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

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

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

三、設(shè)計過程

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

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

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

2. 分析評估

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

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

云游長城的體驗需求分成三部分：

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

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

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

因此分析得出：

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

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

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

3. 設(shè)計建議

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

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

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

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

4. 體驗設(shè)計方案

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

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

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

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

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

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

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

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

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

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

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

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

②修繕互動設(shè)計

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

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

“弱操作&強反饋”的操作設(shè)計，讓修繕互動輕松有趣

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

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

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

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

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

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

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

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

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

①風(fēng)格分析

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

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

②視覺設(shè)計方向

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

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

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

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

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

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

③視覺設(shè)計理念

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

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

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

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

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

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

6. 設(shè)計落地

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

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

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

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

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

②低保真 demo 快速示意效果

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

互動答題低保真 demo

清理考古低保真 demo

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

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

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

最后

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

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

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

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

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