# 古北口•古长城 / 让红色历史在数字体验中重新被看见

- ID: 322
- URL: https://www.stoyard.com/works/322
- English URL: https://www.stoyard.com/en/works/322
- Year: 2021
- Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20221226/bwz5jluywno.jpg
- Categories: 行业领域:地产文旅、酒店餐厅、政府、大学、国际组织, 服务内容:数字产品与体验(Digital Product & Experience Design)、展览展示(Exhibition & Spatial Design), 技术解决方案:APP/小程序技术解决方案
- English Categories: Type of industry field:Real Estate and Hotel Restaurant、Government、Organizations, Service Content:Digital Product & Experience Design、Exhibition & Spatial Design, Technical Solutions:APP Programs Design Solution
- Author: STOYARD
- English Author: STOYARD
- Publish: 2026-09-01
- Editor: STOYARD BEIJING

## 中文主体

### 项目简介

古北口位于北京密云,是长城沿线重要的军事关隘,也是一处融合长城遗迹、自然景观与红色文化的历史重镇。如何整合分散的景区信息与旅游服务,为游客提供清晰、便捷且具有文化深度的游览体验,是本项目希望解决的核心问题。

STOYARD 围绕游客从行前准备到现场游览的完整旅程,策划并设计了“古北口智慧导览”小程序。项目以移动端为统一入口,将预约、购票、交通、地图路线、景点介绍、语音讲解与互动打卡等服务整合起来,为游客建立一条从了解古北口、规划行程到深入探索的连续体验路径。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/cdsn4g9rurn.jpg)

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/7zochc0b6j6.mp4)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/1f79o434y42.jpg)

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/5a99lcfz2jk.mp4)

在信息架构上,我们依据游客的实际需求,对复杂功能进行重新梳理,构建了重要信息、地图线路、购票入口、大美古北口、预约游玩、打卡点亮与个人中心七个核心模块。用户可以快速查询交通与票务信息,选择推荐路线、预约游览景点,并通过地图和语音导览了解古北口的自然风貌、长城遗迹与历史故事。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/0rzyovdz9ii.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/djfiglg9x3.png)

视觉系统从长城的建筑结构、山地地貌与红色文化意象中提取设计语言,在厚重的历史感与现代移动端体验之间取得平衡。克制的色彩、清晰的版式与具有节奏感的交互,让内容始终处于视觉中心,也使传统文化传播更加亲切、生动。

在体验设计上,小程序将实用的旅游服务与具有参与感的文化探索相结合。游客不仅可以查看景点详情、获取联系方式和发现周边景点,还可以在游览过程中完成打卡、点亮目的地并记录个人足迹。清晰的内容层级与简洁的操作路径,降低了获取信息和安排行程的成本,也让现场游览更具连续性与探索感。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/mrxdaueoczf.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/ie0y6sie0pd.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/cmbej2l4wuo.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/ez401bg7rlj.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/sjz3g2bmwa.png)

从发现景点到抵达现场的完整游览闭环

发现景点 → 查看详情 → 语音讲解与互动打卡 → 购买门票 → 提交订单 → 地图导航

游客可以按照推荐路线以及红色景点、长城、民宿、农家乐等类别查找目的地。通过实景图片、开放时间、文字介绍和语音讲解,帮助游客更全面地了解景点。打卡、点亮和游客参与数据增强了游览过程的探索感与参与感。景点详情可直接连接地图路线,引导游客从线上了解顺畅过渡到线下到访。有完整的在线票务功能嵌入。界面连接各项服务不是彼此孤立的,而是围绕游客旅程形成一套完整体验。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261002/3m1bn11yw1f.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261002/ehahe46ftms.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20221226/kiqelivok3s.jpg)

这不仅是一款提供信息查询与票务服务的小程序,更是连接景区资源、历史文化与游客体验的数字媒介。通过统一的信息组织和智慧导览服务,古北口丰富的自然与人文内容得以被更清晰地呈现,为地方文旅服务、红色文化传播与长城文化体验提供了新的数字入口。

项目服务包括
产品策划、信息架构、用户体验设计、视觉设计、交互设计及小程序设计。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/tkoudxzx2lq.jpg)

## English Content

### Introduction

Gubeikou, located in Miyun, Beijing, is an important military pass along the Great Wall and a historic town that blends Great Wall relics, natural landscapes, and red tourism. How to integrate fragmented scenic-area information and tourism services to provide visitors with a clear, convenient, and culturally enriching travel experience is the core issue this project aims to address.

STOYARD has planned and designed the “Gubeikou Smart Guide” mini-program, covering the entire tourist journey from pre-trip preparations to on-site exploration. The project uses a mobile app as a unified entry point, integrating services such as reservations, ticketing, transportation, map navigation, attraction information, audio guides, and interactive check-ins to create a seamless experience for visitors—guiding them from learning about Gubeikou and planning their itinerary to immersing themselves in its rich offerings.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/cdsn4g9rurn.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261002/ktbxj1nl2wk.png)

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/7zochc0b6j6.mp4)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/1f79o434y42.jpg)

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/5a99lcfz2jk.mp4)

In terms of information architecture, we have reorganized complex functionalities based on the actual needs of visitors, establishing seven core modules: Key Information, Map & Routes, Ticket Purchase Portal, Beautiful Gubeikou, Reservation & Visit, Check-in & Badge Collection, and Personal Center. Users can quickly look up transportation and ticket information, select recommended routes, book visits to attractions, and explore Gubeikou’s natural landscapes, Great Wall relics, and historical stories through maps and audio guides.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/0rzyovdz9ii.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/djfiglg9x3.png)

The visual system draws design cues from the architectural structure of the Great Wall, the mountainous terrain, and the imagery of red culture, striking a balance between a profound sense of history and a modern mobile experience. Restrained colors, clear typography, and rhythmic interactions keep the content at the visual center, making the dissemination of traditional culture more approachable and engaging.

In the experience design, the small program combines practical tourism services with cultural exploration with a sense of participation. Tourists can not only view the details of scenic spots, get contact information and discover surrounding scenic spots, but also clock in, light up the destination and record personal footprints during the tour. The clear content level and simple operation path reduce the cost of obtaining information and arranging itinerary, and also make the on-site tour more continuous and exploratory.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/mrxdaueoczf.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/ie0y6sie0pd.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/cmbej2l4wuo.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/ez401bg7rlj.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260930/sjz3g2bmwa.png)

A complete tour loop, from discovering attractions to arriving at the site.

Discover attraction → View details → Audio guide and interactive check-in → Purchase tickets → Submit order → Map navigation

Visitors can search for destinations by following recommended routes or by category, such as red tourism sites, the Great Wall, guesthouses, and farm stays. Through real-life photos, opening hours, written descriptions, and audio guides, visitors can gain a more comprehensive understanding of the attractions. The clock-in, lighting and tourist participation data enhance the sense of exploration and participation in the tour process. Details of scenic spots can be directly connected to the map route, guiding tourists to understand the smooth transition from online to offline visits. There is full online ticketing functionality embedded. The services are not isolated from each other, but form a complete experience around the tourist journey.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261002/3m1bn11yw1f.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261002/ehahe46ftms.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20221226/kiqelivok3s.jpg)

This is not only a small program that provides information inquiry and ticketing services, but also a digital medium that connects scenic resources, history and culture and tourist experience. Through unified information organization and intelligent navigation service, Gubeikou's rich natural and cultural content can be presented more clearly, providing a new digital entrance for local cultural tourism services, red cultural dissemination and Great Wall cultural experience.

Project services include
Product planning, information architecture, user experience design, visual design, interaction design and small program design.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20261001/tkoudxzx2lq.jpg)