# 中国美术学院 / 美丽中国数字化平台·感知地图系统

- ID: 445
- URL: https://www.stoyard.com/works/445
- English URL: https://www.stoyard.com/en/works/445
- Year: 2024
- Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20260917/vks50saldx.png
- Categories: 行业领域:软件服务、政府、大学、国际组织, 服务内容:数字产品与体验(Digital Product & Experience Design)、展览展示(Exhibition & Spatial Design), 技术解决方案:软件设计解决方案
- English Categories: Type of industry field:Software Services、Government、Organizations, Service Content:Digital Product & Experience Design、Exhibition & Spatial Design, Technical Solutions:Software Design Solution
- Author: STOYARD
- English Author: STOYARD
- Publish: 2026-09-11
- Editor: STOYARD BEIJING

## 中文主体

### 项目简介

“美丽中国”是一项面向生态文明、乡村振兴、城市更新、社区营造、艺术乡建与社会美育的长期公共文化实践。它所关注的不是单一项目的展示,而是全国范围内不同地域、不同机构、不同实践者共同参与的行动网络。

在这样的背景下,项目需要的不只是一个静态官网或展览页面,而是一套能够长期承载内容、案例、研究成果和协作关系的数字化平台。它既要帮助公众理解“美丽中国”的实践现场,也要让地方需求、实践者经验和社会资源被更清晰地看见、检索和连接。

因此,STOYARD 在这个项目中的工作,不只是完成视觉呈现,而是通过官网、视觉形象和美丽中国感知地图系统,帮助项目建立一个面向公众传播、跨地域展示和持续协作的数字化入口。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/030w16ubaq89.png)

美丽中国需要被长期看见,也需要被持续连接。

“美丽中国”相关实践连接生态文明、乡村振兴、城市更新、社区营造、艺术乡建与社会美育。它不是一次短期传播,而是持续生长的公共文化行动网络。

中国美术学院美丽中国研究院建立了“美丽中国案例文献库”,从大量资料中甄选全国文化艺术力量参与美丽中国建设的优秀案例

因此,数字化平台需要同时承担三件事:
1. 对外展示 
2. 案例组织 
3. 协作连接

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/r2s3hujpe5.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/ioh96j9cdb.png)

对外展示,从分散信息到统一入口

我们以全国案例为基础重新梳理平台的信息架构,将项目、地域、议题与参与者组织进同一套内容体系。首页不只是成果陈列,更承担理解项目、发现案例和进入地图的导航作用。

清晰的层级与持续更新的内容机制,让复杂的公共文化实践能够被公众快速理解,也为后续研究与传播保留了扩展空间。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/8tfdsgkvqps.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/knxhgk3kux.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/7umpjrpfkig.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/yrhillxvz7o.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/3ga7tft2juc.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/gl8lez905hj.jpg)

案例组织,让全国实践在地图上被看见

感知地图将抽象的数据转化为可探索的地理界面。用户可以从全国视角观察案例分布,也可以通过区域、实践类型和关键词逐层筛选,在空间关系中发现不同地区的行动脉络。

桌面端与移动端采用一致的交互逻辑,使查询、浏览和定位在不同设备上保持连贯。地图因此不再只是结果展示,而成为理解“美丽中国”实践网络的核心工具。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/qob2q8xr8hp.jpg)

跨设备的一致体验

我们从设计系统出发,统一规划了电脑、iPad 与手机端的界面体验。针对不同屏幕尺寸、使用场景与操作方式,分别调整信息密度、内容层级和交互路径,同时保持视觉语言、功能逻辑与操作反馈的一致。

这套响应式设计并非简单缩放页面,而是让地图浏览、案例检索与内容阅读在不同设备上都能自然衔接,为平台后续迭代与功能扩展建立稳定、可复用的设计基础。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/dkr39ox93zg.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/2g4gbhwxc8o.jpg)

覆盖桌面端、iPad、手机端及数据可视化大屏。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/m9paj1babm.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/9d6j6b79tc.png)

从地图节点进入真实现场

每一个地图节点都对应一项具体实践。通过分层信息卡片,用户可以快速了解项目主题、所在地、参与机构和行动内容,并继续进入完整案例阅读。

我们通过信息密度、层级和操作反馈的控制,让大量案例保持清晰、可比较和可追溯,在探索感与阅读效率之间取得平衡。

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

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/jtq4fh7gtyh.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/5ts8kgr4p0l.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/6vrc2lsap6i.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/8bsuvp931qb.png)

以组件化规范支撑长期迭代

我们将导航、筛选、地图节点、信息卡片、标签、按钮,ICON及内容模块沉淀为统一的组件体系,并对字体、色彩、间距、状态反馈和响应式规则进行系统定义。可根据内容与使用场景灵活组合,同时保持一致的视觉语言和交互逻辑。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/t8vqtw7csc.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/nebg31qvbn.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/kqy2otedtyc.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/jr5gjkw938.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/rcfupkupkxd.jpg)

协作连接,从内容展示走向持续协作

平台进一步连接地方需求、实践者经验与社会资源。案例征集与参与入口让不同角色能够提交信息、建立联系,并逐步沉淀为可持续更新的公共知识网络。

官网、案例库与感知地图共同构成一个开放的数字入口:既记录正在发生的实践,也支持新的行动被发现、被连接和继续生长。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/su6irqhvam.png)

实践者网络

2021年起,研究院专门成立了研究团队,通过对全国近二十年的美丽中国实践进行调研、访谈,收集了两千余例美丽中国案例,形成了近五百万字的读本,并成立了案例文献库,以线上线下展览的方式,呈现无数人在美丽中国建设中的点滴之功。去年,以一百个文化艺术助力美丽中国的全新案例、一百个各行各业的未来提案为主要内容,举办了“大地之歌·2023美丽中国纪事”展览,打造了一个美丽中国艺术实践的生动现场。更重要的是,通过展览与案例文献库,整合了一群有情怀、有经验的美丽中国建设生力军,他们构成了一个强大的行动者网络。现在和未来,他们都会在美丽中国建设中发挥巨大作用。

思想网络

在调研工作中,我们深感美丽中国建设中人才的缺乏,以及理论对实践指导的重要。因此,三年里,我们举办了几十场线上线下论坛,有一百名青年学者的马拉松演讲,有案例人在田间地头的真实讲述,也有各学界有着重要影响力专家学者参与的论坛。去年,研究院举办了美丽中国行动感知书展,邀请了二十家出版社与近百位作者参展,通过持续不断的论坛与书展的沉淀,我们深度接触了具有美丽中国建设理论能力的专家学者,打造了一个具有理论高度和指导意义美丽中国的专家智库, 形成了美丽中国艺术实践的思想网络。

协作网络

美丽中国建设是一个系统工程,需要方方面面的协同与创新。为了更好的支持地方建设。去年,首个美丽中国地方协作中心在浙江省嘉兴市秀洲区落地,通过在地培训、书展、论坛等活动,为地方提供一个可以长期支持的集智库、研究、培训、实践为一体的协作系统。今年,我们将通过感知地图的推出,更高效地完成更多地方的协作工作。

“美丽中国感知地图”发布

《大地之歌·2024美丽中国纪事》,展览将以“感知地理”的概念出发,用经纬交织的地理坐标,定位实践现场,展现出一张“美丽中国”无限延展的“感知地图”;以一百个文化艺术助力美丽中国的全新案例、一百个各行各业的未来提案,以及来自不断生长的地方政府的提案,打造“美丽中国”建设的生动现场。未来,“感知地图”将成为美丽中国研究院的长期工作界面,集结地方的真需求、真问题,和实践者的愿望与力量结合,实现双向奔赴的行动感知系统,助力美丽中国建设。

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/8pdh7fhrtet.mp4)

相关链接

https://www.caa.edu.cn/info/1204/1317.htm
https://tidenews.com.cn/news.html?id=3196488

## English Content

### Introduction

"Beautiful China" is a long-term public cultural practice for ecological civilization, rural revitalization, urban renewal, community construction, art township construction and social aesthetic education. What it focuses on is not the display of a single project, but the action network of different regions, different institutions and different practitioners in the whole country.

In this context, what the project needs is not just a static website or exhibition page, but a digital platform that can carry content, cases, research results and collaborative relationships for a long time. It should not only help the public understand the practice site of "beautiful China", but also make local needs, practitioner experience and social resources more clearly visible, retrieved and connected.

Therefore, STOYARD work in this project is not just to complete the visual presentation, but to help the project establish a digital portal for public communication, cross-regional display and continuous collaboration through the official website, visual image and beautiful China perception map system.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/030w16ubaq89.png)

Practices related to the Beautiful China initiative link ecological civilization, rural revitalization, urban renewal, community development, arts-based rural construction, and social aesthetic education. It is not a short-term dissemination effort, but rather a continuously evolving network of public cultural initiatives.

The Beautiful China Research Institute of the China Academy of Art has established the “Beautiful China Case Database,” which selects outstanding examples from a wealth of materials, showcasing how cultural and artistic forces across the country have contributed to the construction of Beautiful China.

Therefore, a digital platform needs to handle three tasks simultaneously:
1. External display
2. Case organization
3. Collaborative Connections

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/r2s3hujpe5.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/ioh96j9cdb.png)

From decentralized information to unified entrance

We reorganize the information architecture of the platform based on national cases, and organize projects, regions, topics and participants into the same content system. The homepage is not only the result display, but also the navigation function of understanding the project, finding cases and entering the map.

The clear hierarchy and continuously updated content mechanism enable complex public cultural practices to be quickly understood by the public, and also reserve expansion space for follow-up research and dissemination.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/8tfdsgkvqps.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/knxhgk3kux.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/7umpjrpfkig.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/yrhillxvz7o.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/3ga7tft2juc.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/gl8lez905hj.jpg)

Let the national practice be seen on the map

Perceptual maps transform abstract data into explorable geographical interfaces. Users can observe the distribution of cases from a national perspective, or they can filter through regions, practice types and keywords layer by layer to discover the context of action in different regions in spatial relationships.

The desktop and mobile terminals use consistent interaction logic to keep query, browsing and positioning consistent on different devices. The map is therefore no longer just a display of results, but a core tool for understanding the "Beautiful China" practice network.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/qob2q8xr8hp.jpg)

Consistent experience across devices

Starting from the design system, we have planned the interface experience of computer, iPad and mobile phone. Adjust the information density, content level and interaction path for different screen sizes, usage scenarios and operation modes, while keeping the visual language, component specifications and functional logic consistent.

This responsive design is not a simple zoom page, but allows map browsing, case retrieval and content reading to be naturally connected on different devices, establishing a stable and reusable design foundation for subsequent iterations and functional expansion of the platform.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/dkr39ox93zg.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/2g4gbhwxc8o.jpg)

Covering the desktop, iPad, mobile phone and data visualization screen.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/m9paj1babm.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/9d6j6b79tc.png)

Enter the real scene from the map node.

Each map node corresponds to a specific practice. Through layered information cards, users can quickly learn about the project’s theme, location, participating organizations, and activities, and then proceed to read the full case study.

By controlling information density, hierarchy, and operational feedback, we ensure that a large number of cases remain clear, comparable, and traceable, striking a balance between exploratory engagement and reading efficiency.

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

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/jtq4fh7gtyh.jpg)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/r2s3hujpe5.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/5ts8kgr4p0l.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/6vrc2lsap6i.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/8bsuvp931qb.png)

Support long-term iteration with component-based standards.

We deposit navigation, filtering, map nodes, information cards, labels, buttons, ICON and content modules into a unified component system, and systematically define fonts, colors, spacing, status feedback and responsive rules. Different components can be flexibly combined based on content and use cases, while maintaining a consistent visual language and interaction logic.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/t8vqtw7csc.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/nebg31qvbn.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/kqy2otedtyc.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/jr5gjkw938.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/rcfupkupkxd.jpg)

From Content Presentation to Continuous Collaboration

The platform further connects local needs, practitioner experience and social resources. Case collection and engagement portals allow different roles to submit information, establish connections, and evolve into a continuously updated public knowledge network.

The website, case library and perception map together form an open digital portal: both to record ongoing practices and to support new actions to be discovered, connected and continue to grow.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20260914/su6irqhvam.png)

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20260915/8pdh7fhrtet.mp4)

Related links

https://www.caa.edu.cn/info/1204/1317.htm
https://tidenews.com.cn/news.html?id=3196488