腾讯案例复盘！「云游长城」设计过程完整复盘

导语

云游长城项目是运用游戏前沿科技和数字技术，对长城这一宝贵文化遗产进行数字化还原与呈现，让用户足不出户就能在手机上游览长城风光，了解学习长城修复保护知识。本文基于项目全流程，从用户体验设计角度进行回顾复盘，总结云游长城项目的设计方法思路，沉淀数字文化保护类项目的用户体验设计经验。

往期案例：

一、背景介绍

去年四月，我们美术设计团队接到了数字长城项目组的紧急任务：希望能在近 2 个月时间里重塑 “云游长城”的体验，让整个云游长城过程更具游戏感、趣味性，并明确需在六月正式对外发布。

“云游长城”是数字长城小程序里的一个子模块——它是一段由游戏技术创建而成的数字化长城，用户可通过手机操作体验长城修缮工作、浏览长城景观。

与数字长城项目组合作，让我们有机会将以往项目的设计经验运用到数字文保这一新领域里，参与设计的小伙伴们都非常积极，大家希望能为云游长城设计出一套优秀的解决方案。

与此同时，项目的上线时间近在眼前，而重塑好“云游长城”的整体体验对大家来说是一个不小的挑战。

我们希望能通过这次设计经历，积累数字文保领域的设计经验，探索高质高效完成设计项目攻坚的工作流程。

二、设计策略

开始设计之前，我们首先考虑的命题是：“云游长城”项目的设计目标和策略是什么？考虑清楚了设计目标和策略，才能在开展后续设计工作时有的放矢，找准设计发力点。于是我们从项目本身的特点出发进行思考。“云游长城”项目其实是数字文化保护类项目的具体案例。而数字文保类项目的统一目标是通过游戏技术赋能数字文保，从而以数字化方式传承和传播中华文化，对传统文化进行数字化保护，同时提升全社会的文化自信。除此之外，由于这类项目参与方较多，设计需兼顾各方诉求，考虑如何从产品体验的角度助力实现“用户价值”、“文化价值”、“社会价值”。

厘清这类项目的目标与价值，以及相关方诉求之后，数字文保类项目的设计目标和策略也逐渐清晰。首先：我们需要有效地将文化价值传递给用户——比如采取故事化、情景带入等方式让用户的体验过程更有沉浸和代入感；其次：要让用户能跟文物、文化进行积极互动，激发其探索欲望，那么游戏性设计就必不可少，这可以让用户在玩中习得知识；最后：既然是将文保数字化，必然是得到了前沿技术的加持，技术的力量得以让用户体验更上一层楼，而设计则需要营造能让大众直观感受到文物穿越古今，连接未来的科技感。

明确了设计目标和策略之后，我们也建立了数字文保类项目体验设计的金字塔模型，作为指导后续设计实施的关键方法论。

三、设计过程

接下来就是具体的设计执行过程了。为确保云游长城体验重塑的完整性，我们整个设计过程都从：功能、性能、操作、表现四个维度结合故事性游戏性来综合考虑。

1. 发现问题

接手项目时我们已拿到了可体验的产品 demo。通过邀请公司内部同事来体验 demo、观察他们操作并与其进行一对一访谈，我们快速收集了当时版本里功能、操作、界面等多维度的问题。

2. 分析评估

收集完问题后，我们一方面将已知问题通过用户体验地图做了可视化的梳理，从中发现：当时版本从启动云游长城到结束游览的全过程，测试用户的情绪都比较低落——这意味着在实际使用场景中，真正的用户很可能因种种体验上的不满意而中途退出，无法完成云游长城的全程体验。

另一方面，我们结合前文提到的数字文保类项目体验设计金字塔模型，具体分析云游长城体验应该满足用户的哪些体验需求，从而能更全面地评估当前产品 demo 的问题。

云游长城的体验需求分成三部分：

可识别：这是非工具类产品用户体验需求的基础。用户的耐心非常有限，界⾯的框架，核心的操作都需要直接可识别，这样才有可能促成他们愿意尝试体验一下。

易学&易用：由于整个云游长城时长约 10 分钟，受众范围又很广，因此产品本身无论玩法还是操作上都不宜设置较高的体验门槛，让人难学会、难操作。

游戏感&沉浸感：游戏感&沉浸感的体验能很好地激发用户参与并完成云游长城的全过程，让他们留下深刻的印象，从而加深对长城文化保护的认知。

因此分析得出：

首先，云游长城在内容上不够有吸引力，且“可玩性”较弱，无法让用户产生兴趣；

其次，基础操作上容易误操作，且提示反馈弱，引导不清晰，容易产生失控感、无助感；

以上结论按功能、性能、操作、表现四个维度来详细说明，内容如下：

3. 设计建议

首先在内容呈现上，我们提供了一些更游戏化的表达思路，比如可以像游戏一样给定一个明确的世界观，从而让用户快速带入，产生使命感。

玩法互动层面，重点在长城修缮环节。因此我们从长城纪录片里抓取了修缮过程的细节特点、难点，建议能将这些元素加入到长城修缮互动中去，从而让用户体验时更具有真实感，也让修缮过程更丰满有层次。

除此之外，我们也在性能、操作、表现等方面提出了相应的建议。由于篇幅限制不在此一一展开，全部设计建议要点汇总如下。

在跟项目组开会沟通后，以上建议的大部分内容都得到了大家的支持，因此我们快速进入到具体方案设计阶段。

4. 体验设计方案

①故事化叙述的构建

首先我们要构建一个符合产品核心思想的世界观，让用户理解长城的意义、长城修缮的紧迫性，引发他们的共鸣，并与后续内容的推进建立连接。我们先提供了 2 个不同的世界观方案：

「方案一」从 2222 穿越回 2022，抢修长城

2222 年的中华大地，巍峨长城已不复存在。为了挽救历经千年的文化瑰宝，腾讯联合国家文保部门邀请你穿越时空，踏上长城保护之旅。穿越时空隧道回到 2022 后，「长城保护计划」见证团团长腾讯公益代言人‘小红花‘将在长城脚下等你，他将带领你一起踏上修缮长城抢险之旅。

「方案二」长城修缮老师傅年迈，寻求有志之士继承衣钵

近年来长城由于自然侵蚀和人为破坏，损毁速度越来越快。长城根下的修缮“守城人”感叹年老力衰、力不从心，无法继续修缮长城、维持其原始面貌。因此守城人向社会大众发出招募信息，希望能有更多人加入他们，积极参与长城的修缮守护工作。有意愿参与的人将随同几位长城保护计划见证团成员一起完成一段长城修缮的工作。

经过设计师们内部评审，「方案一」开篇就展示了未来世界里长城已消失的凄惨状况，我们担心这样的概念传递出一些消极的情绪，不符合本产品的调性，因此决定弃用。

「方案二」更贴合修缮长城的真实动机，但通过一个虚构的“守城人”来向大众发出加入修缮守护长城的邀请，我们认为有点多余——因为在产品中已经有更适合的角色了：腾讯公益代言人“小红花”。通过腾讯公益小红花来邀请用户参与修缮守护长城的体验，即透出了公司品牌又暗含了其公益的底色，因此我们将方案修改成由小红花召集修缮长城守护人，让参与者作为“实习生”体验修缮长城的工作。

「方案定稿」腾讯公益小红花召集长城守护人，见习修缮保护长城

世界观确立后，我们将之前整理的设计建议功能内容通过整合串联进故事线里，形成完整的设计概念：

之后制作输出了低保真交互演示视频：

根据每个环节不同的内容特点，我们采用了不同的情感化设计手法引导用户一步步深入云游长城的体验。这其中最重要的“长城修缮”部分，我们是如何设计的呢？

②修缮互动设计

构建有起伏的修缮情节，让用户全情投入

修缮长城一共分为 5 个关卡，每关通过展示长城的一种破损情况及其修缮方式来介绍长城修缮过程。我们将每关的修缮用“引出目标——制造困难——得到收获”的思路作为情节构建框架，让用户的情绪随着修缮进程的开展而波动，从而产生沉浸的、有代入感的体验。

“弱操作&强反馈”的操作设计，让修缮互动轻松有趣

我们一方面希望用户通过自己体验修缮数字长城了解实际长城的修缮方法，另一方面需避免在操作上给用户带来较大的学习负担进而降低其体验完全程的意愿，综合考量后确立了以“弱操作&强反馈“为目标的操作互动设计方向。

操作层面：通过在不同关卡里，将实际修缮动作精简并匹配移动端常用触屏交互方式，让操作轻松无负担。

我们只选取了点击-拖拽、点击、滑动、长按这四种常用的触屏操作来完成所有关卡的交互，同时通过将这四种操作在五个关卡里进行组合变换来提供操作上的丰富性，让修缮过程更生动。

反馈层面：根据用户操作的精准度提供符合情理的相应操作反馈，来提升修缮体验的趣味性。比如在第四关里：通过手指按住屏幕的时间长短，触发锤子敲打损坏砖块的力度大小，从而给予不同的操作反馈。

第四关修缮操作

第五关里：通过手指拖动支架移动位置的变化，触发支架是否能成功架在窗台上，从而给予不同的操作反馈。

第五关修缮操作

总之，通过故事化叙述，让用户理解了长城修缮的意义和紧迫性，引发他们的共鸣，并与后续内容的推进建立连接；通过构建有起伏的修缮情节、提供“弱操作&强反馈”的操作设计，让整个长城修缮过程生动且富有真实感，为用户带来沉浸的、有代入感的修缮体验。

5. UI 视觉设计方案

①风格分析

云游长城运用了大量的技术模拟出真实的长城景象，即使透过手机屏幕，也能感受到长城的宏伟与真实，我们通过将 ui 与实景结合，让用户能更顺畅丝滑地体验到云游长城的乐趣。

关键词提炼：通过结合云游长城的实景风格及玩法，提炼出两个方向的关键词，进行 ui 视觉风格尝试。

②视觉设计方向

方向一：青山绿水-千里江山如画

方向一着眼于强调长城的气质，旨在传达出文化底蕴和历史感。在设计上采用了传统的图案和色彩，将其呈现为卷轴画卷的形式，类似于传统国画元素。营造出具有国风特色的文化底蕴，增强用户的沉浸感，使用户在云游长城的过程中获得愉悦的体验，不仅仅是欣赏美景，更能够深刻感受到长城的魅力和内涵。

方向二：数字工匠——科技娱乐助力长城保护

采用现代化、简洁、突出科技感和未来感的设计风格，以彰显云游长城的特点。在 UI 设计中，采用半透明效果，巧妙融入场景，同时添加科技元素，如线条、点阵等，以突出科技感。采用现代化的图案和线条，运用冷色调和轻薄质感的元素，创造出极具科技感的视觉效果。在保证功能易用性的前提下，尽量减少 UI 的存在感，让用户更纯粹地感受云游长城数字还原实景的科技魅力。

由于方向二的科技感更强，在传达科技助力文保的产品特色上表达得更明确，因此我们选定该方向作为云游长城的视觉风格。

综合产品内容、实现成本、项目时间等多维度考虑，视觉表现重点聚焦在 UI+动效层面“动静结合”地将“科技感”自然融于云游长城体验中。

③视觉设计理念

动静结合的形式美：

静：视觉上我们尽量以轻量化的 UI 表达让用户能沉浸式体验数字长城风景；在初稿设计完成后体验反馈扁平化 UI 的优点能较好地呈现内容，但容易让用户产生审美疲劳的“普通感”，因此：如何调整界面让用户“眼前一亮” 是下一步 UI 上需要打磨的地方。

界面 UI 的设计包含了形、色、质三大方面，基于目前的长城界面 UI 尝试从“形”上思考突破点，通过分析收集资料，提取出了 3A 游戏的 UI 共性之一：结合场景透视的 UI 增强沉浸感和视觉冲击力：

将此共性运用于长城 UI 的造型上，同时将界面融入场景互动，让整体 UI 跟随长城透视及视角移动，结合有节奏的动效，由 2D 变为 3D，增加界面互动性及趣味性。

动：在 UI 界面出场及游戏场景的结合方面，采用 2D 界面出场动效+轻量化滑动的方式，配合闪烁、生长等偏快的动画效果，为数字长城的科技感增添灵动。

最终呈现出富有科技感的视觉效果，让历史感浓厚的长城披上了科技的外衣。

6. 设计落地

完成设计方案后，离上线时间已不到一个月。在这所剩无几的时间内我们不但要完成大批量设计稿出图，还需要跟开发紧密合作让设计方案得以实现。为顺利完成云游长城的重塑任务，我们从以下三个方面来协作配合，高效产出：

①打造统一的设计稿产出流程，提高出图效率

此项目由多名设计师配合协作输出设计方案。整个设计稿的输出过程中，大家都遵守：“快速响应、心中有数、查漏补缺“这三条协作准则，确保输出的内容符合前期确定的设计标准，并提升了沟通效率、减少了设计返工率，2 周内输出全部设计稿。

在协作中的角色分配上：由于项目紧急，由 1 名主设计师主导带领若干设计师一起完成设计稿输出。主设计师一方面需对接上下游协作者，完成当前任务的统筹沟通；另一方面也需要安排分配给其他设计师相应子任务需求，并把控设计进度。

工作时间节奏以：上午沟通为主、下午设计出图为主、晚上设计成果整合同步为主来展开。

②低保真 demo 快速示意效果

在给开发提供的设计说明文件中，我们将操作细节较多、非常规的操作通过低保真 demo 来演示大致期望效果，以此减少设计与开发的沟通成本，以便开发同事能快速了解设计意图，实现出较准确的设计效果。

互动答题低保真 demo

清理考古低保真 demo

③跟进开发，紧密测试实现还原度

完成全部设计稿输出后，通过与开发合力联调+设计体验走查的方式，尽最大努力确保设计稿的精准还原。

设计师与开发合力联调中

最后

此次负责云游长城项目设计，丰富了我们的设计项目品类，积累了数字文保领域的设计经验。同时在该项目实践中，我们通过不断挖掘设计价值，为产品目标的达成提供多维度的支持。

云游长城作为首次将 IEG 自研引擎及云游戏技术应用于文化遗产保护的项目，它也是技术公益推动数字文保工作开展的重要尝试。设计师们通过层次丰富的交互与视觉表现，将游戏技术自然地融于产品体验中，让游戏技术的跨界应用有了更多的可能。

如果你还未体验过云游长城，欢迎在微信小程序中搜索「云游长城」，来体验最新的从资产制作、画面渲染到交互都基于腾讯游戏自研引擎打造的云游长城，感受数字版长城随季节、天气、昼夜的变化而呈现的丰富多彩的美景。

最后感谢团队廖睿志，黄灿以及参与攻坚的小伙伴们的设计支持。

欢迎关注作者微信公众号：「腾讯设计族」