# 首都图书馆 / 纪念鲁迅诞辰140周年在线文献馆

- ID: 342
- URL: https://www.stoyard.com/works/342
- English URL: https://www.stoyard.com/en/works/342
- Year: 2021
- Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20230203/1krbehjwyiu.jpg
- Categories: 视频、动态图形、动画设计, 政府、大学、国际组织, 艺术与文化
- English Categories: Motion Graphics, Government、Organizations, Arts & Culture
- Author: STOYARD
- English Author: STOYARD
- Publish: 2022-03-21
- Editor: STOYARD SHANGHAI

## 中文主体

### 项目简介

为了纪念鲁迅诞辰140周年,首都图书馆委托我们设计了鲁迅线上文献馆,对鲁迅生前的日记,作品,书信,等三万多张手稿图片进行在线展示。

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/g7f682f3xep.mp4)

1.项目背景

首都图书馆是原中华人民共和国文化部评定的“国家一级图书馆”,是首批“全国古籍重点保护单位”。其历史可追溯至1913年,是由鲁迅先生参与倡建的京师图书分馆、京师通俗图书馆和中央公园图书阅览三馆几经合并演变而成。

据图书馆官网信息显示,首都图书馆建筑面积3.7万平方米,设有20个阅览室,4000余个阅览座位,管藏文献逾845万册(件),其中便包含鲁迅先生逾33000页手稿作品,有文稿、日记、书信、译稿、辑校古籍、辑校金石等类。

鲁迅先生与首都图书馆渊源深厚,时值鲁迅诞辰140周年纪念日,图书馆希望以网站为窗口,通过新颖且富有内涵的形式更全面、真实的反映鲁迅生平与作品。

基于此,我们认真梳理了页面逻辑,决定以图片展示为基础,将手稿按类型、时间、专题三个方面分类展示。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/vhhg700u5h.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/ub4yyw0gafi.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/rzj3hxcaf6o.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/e8tdhml2g2.png)

2.趣味性交互

之后,我们对视觉、交互体验的细节也进行了多次打磨,我们希望摈弃传统的图文静态方式,以更为生动的动态的效果呈现一代文豪的宏伟巨著,让观者在阅览著作时仿佛置身文明长河之中,既有流动感又有厚重的历史气息。

我们还做了一些有趣尝试,为了体验的连贯性,我们模拟手稿的方式呈现出一个动态菜单目录。手稿以一个虚拟方柱为中心,螺旋向下滚动。这一设计概念是希望避免以大量文字冲击观者视觉,造成视觉负担。我们以一个巧妙的动态化效果,增强内容与观者互动。

最终,用户点开这一页,看到的是一篇篇从天而降的文章,他们像是被选中的礼物,像来自鲁迅先生的馈赠,当你从万千书页中选择某一个内容时,也似乎成了他的寄语。这就是交互的力量,细腻而又动人。

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/2s2q0w3luwt.mp4)

3.信息逻辑梳理

本次项目的设计以移动端的体验为核心,针对不同端口的特性,我们在页面逻辑与交互细节方面也做了取舍平衡。

我们为移动端的设计,初步设想为首页、检索页、分类浏览、专题浏览,文稿、译稿的具体阅读页,日记的阅读页,书信的阅读页,辑校古籍、辑校金石的阅读页,此外还包括鲁迅手稿编委会名单,鲁迅的生平简介,鲁迅相关研究著作清单。

如何使这些内容精准、逻辑清晰地传达给观者是我们的主要任务。

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/gsdcv42nfg9.png)

4.视觉元素的灵感来源

主视觉的设计上,我们以书卷及山的意像进行了载入页的设计,初版方案的首页视觉元素采用了鲁迅140周年纪念币的概念,搭配图形进行了动态设计。

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/vgb8e76la0q.mp4)

纪念币方案并没有在主视觉上强调鲁迅的形象,通过草图方案与客户方沟通后,确定方案使用三维的鲁迅形象为核心进行设计。

搜寻了大量的鲁迅胸像雕塑作为参考后,我们对鲁迅的形象进行了三维设计。

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/l9swaibo03n.mp4)

我们希望塑造出亲切平和、易于辨认的图像,当这个形象一出现,观者就可以通过他的神态、动作辨别出这是鲁迅先生。

同时,我们也希望创造一个恰如其分的场景,使得整个画面和谐美观、层次分明且富有底蕴。

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/2tmkajznr8v.mp4)

书山文海中,有一人长身而立、神情肃穆,我们仿佛看到了鲁迅先生漫步而行,万千书页洋洋洒洒地落在他身侧,这一画面呈现出独特的中式浪漫和文化情怀。

我们希望最终的视觉效果和交互细节能将观者拉入一种静穆神圣的情景之中,能静下心跟随鲁迅先生一起畅游书海。

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

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/aj2geugv4qo.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/tn5znqa1zjf.png)

5.愿景

整体方案是我们以“纪念鲁迅诞辰140周年”为主题而做的,但我们在作品中对经典元素的运用足够它承载更为长远的意义。

## English Content

### Introduction

In order to commemorate the 140th anniversary of Lu Xun's birth, the capital library commissioned us to design Lu Xun's online literature library to display more than 30000 manuscripts and pictures such as Lu Xun's diary, works, letters and so on.

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/g7f682f3xep.mp4)

The Capital Library is a "National First-Class Library" assessed by the former Ministry of Culture of the People's Republic of China, and one of the first batch of "National Key Protection Units for Ancient Books". Its history can be traced back to 1913, and it was formed by the merger and evolution of the Jingshi Branch Library, the Jingshi Popular Library and the Central Park Book Reading Library, which were initiated and built by Mr. Lu Xun.

According to the information on the library's official website, the Capital Library has a construction area of 37,000 square meters, 20 reading rooms, more than 4,000 reading seats, and over 8.45 million volumes (pieces) of documents, including more than 33,000 pages of Mr. Lu Xun's manuscripts. Works include manuscripts, diaries, letters, translations, compilation of ancient books, compilation of golden stones, etc.

Mr. Lu Xun has a deep relationship with the Capital Library. On the occasion of the 140th anniversary of Lu Xun's birth, the library hopes to use the website as a window to reflect Lu Xun's life and works more comprehensively and truly through a novel and connotative form.

Based on this, we carefully sorted out the page logic, and decided to display the manuscripts in three categories: type, time, and topic based on the picture display.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/vhhg700u5h.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/ub4yyw0gafi.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/rzj3hxcaf6o.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/e8tdhml2g2.png)

After that, we have also polished the details of the visual and interactive experience many times. We hope to abandon the traditional static method of pictures and texts, and present the magnificent works of a generation of writers with a more vivid and dynamic effect, making the viewers feel as if they are reading the works. Being in the long river of civilization has both a sense of flow and a strong historical atmosphere.

We also made some interesting attempts to present a dynamic menu catalogue in a way that mimics the manuscript for the coherence of the experience. The manuscript is centered on a virtual square column that spirals downward. This design concept is to avoid impacting the viewer's vision with a lot of text, causing visual burden. We enhance the content and viewer interaction with a clever dynamic effect.

In the end, the public clicked on this page and saw articles that fell from the sky. They seemed to be selected gifts, like gifts from Mr. Lu Xun. The content selected by the viewers from thousands of pages seemed to become his message. This is the power of interaction, delicate and moving.

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/2s2q0w3luwt.mp4)

The design of this project is centered on the experience of the mobile terminal. According to the characteristics of different ports, we have also made a trade-off between page logic and interaction details.

For the design of the mobile terminal, we initially envisage the home page, search page, category browsing, topic browsing, specific reading pages for manuscripts and translations, reading pages for diaries, reading pages for letters, reading pages for editing ancient books, and editing golden stones. In addition, it also includes a list of Lu Xun's manuscript editorial committee, a brief biography of Lu Xun, and a list of Lu Xun's related research works.

How to convey these contents to the viewers accurately and logically is our main task.

The design of this project is centered on the experience of the mobile terminal. According to the characteristics of different ports, we have also made a trade-off between page logic and interaction details.

For the design of the mobile terminal, we initially envisage the home page, search page, category browsing, topic browsing, specific reading pages for manuscripts and translations, reading pages for diaries, reading pages for letters, reading pages for editing ancient books, and editing golden stones. In addition, it also includes a list of Lu Xun's manuscript editorial committee, a brief biography of Lu Xun, and a list of Lu Xun's related research works.

How to convey these contents to the viewers accurately and logically is our main task.

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/gsdcv42nfg9.png)

In the design of the main visual, we designed the loading page with the images of books and mountains. The visual elements of the homepage of the first version plan adopted the concept of Lu Xun's 140th anniversary commemorative coins, and were dynamically designed with graphics.

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/vgb8e76la0q.mp4)

The commemorative coin scheme did not emphasize the image of Lu Xun in the main vision. After communicating with the client through the sketch scheme, it was determined that the scheme should be designed using the three-dimensional image of Lu Xun as the core.

After searching a large number of bust sculptures of Lu Xun as reference, we made a three-dimensional design of Lu Xun's image, and at the same time, for the coherence of experience, a menu catalogue was presented in a way of simulating manuscripts.

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/l9swaibo03n.mp4)

We hope to create a friendly, peaceful and easily recognizable image. When this image appears, viewers can recognize that it is Mr. Lu Xun through his demeanor and actions.

At the same time, we also hope to create an appropriate scene, so that the whole picture is harmonious and beautiful, with clear layers and rich background.

[Video](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/2tmkajznr8v.mp4)

In the sea of books and literature, there is a person standing tall and solemn. We seem to see Mr. Lu Xun strolling, thousands of pages of books falling on his side, this picture presents a unique Chinese romance and cultural feelings.

We hope that the final visual effects and interactive details can pull the viewer into a quiet and sacred scene, and can calmly follow Mr. Lu Xun to swim in the sea of books.

In the sea of books and literature, there is a person standing tall and solemn. We seem to see Mr. Lu Xun strolling, thousands of pages of books falling on his side, this picture presents a unique Chinese romance and cultural feelings.

We hope that the final visual effects and interactive details can pull the viewer into a quiet and sacred scene, and can calmly follow Mr. Lu Xun to swim in the sea of books.

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

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220321/aj2geugv4qo.png)

![](https://static.glabcms.stoyard.com/stoyard/gallery/20220421/tn5znqa1zjf.png)

This project is to commemorate the 140th anniversary of Lu Xun's birth, but our use of classic elements in our work is enough to carry a longer-term meaning.