# 地球一援（EarthAid） / WildAid旗下全新公益项目品牌 - ID: 390 - URL: https://www.stoyard.com/works/390 - English URL: https://www.stoyard.com/en/works/390 - Year: 2023 - Cover: https://static.glabcms.stoyard.com/stoyard/project/cover/20231116/us261yltu2d.jpg - Categories: 社交媒体传播、互动H5, 政府、大学、国际组织 - English Categories: Social Media/H5 interaction, Government、Organizations - Author: STOYARD - English Author: STOYARD - Publish: 2023-09-28 - Editor: STOYARD BEIJING - External Link: https://www.earthaid.org.cn/ ## 中文主体 ### 项目简介 地球一援（EarthAid）是野生救援组织（WildAid）旗下的全新公益项目品牌，是一个应对气候变化倡导绿色生活方式项目，围绕健康可持续饮食、绿色出行、减少一次性塑料、生态保护修复等领域，通过开展知识科普、意识提升和公众参与活动，鼓励每个人作为地球的一员，以实际行动参与全球气候治理。STOYARD设计团队为其设计并开发了网站，负责整体视觉设计、创意拓展以及架构梳理，使整个项目呈现出有趣、生动的面貌。 [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20230928/dc9zubzg5m.mp4) 1.项目背景 2005年野生救援开始在中国开展工作，并于2017年成立北京代表处。 野生救援在中国开展的主要项目包括：减少象牙、犀角、穿山甲、海龟等非法野生动物及其制品需求的物种保护项目，以及从消费端推动减排及绿色低碳生活方式的“地球一援EarthAid”气候项目。野生救援争取来自社会各界，包括政府部门、企业、媒体、明星及当地民众的合作，加大对野生动物保护工作的支持力度。 野生救援拥有近百位名明星公益代言人，通过名人的积极影响力来影响广大公众，改变人们对野生动物资源和环境保护的意识和态度。野生救援邀请拍摄公益宣传片的对象均为各自领域的杰出代表。   2.无限的创意令人惊喜 网站的视觉风格整体呈现出鲜活、灵动、丰富的特点，让用户在打开网站的一瞬间就能感知到蓬勃的生命力。在技术层面，我们增加了很多交互细节、和三维渲染输出，用户可以通过与内容的互动，激发兴趣。 网站视觉层，我们以一段大自然景观视频打开视野，同时配合视频内容的还有一组不断滚动的数据，这是实时的WildAid组织新增环保人士数量，数据是最直观的，所以，我们通过开屏的内容打动人心，接下来就是我们运用3D渲染加前端技术共同实现的三维交互场景，快速拉近用户和平台的距离。 除此之外，我们也做了大量色彩配比方案，最终敲定了一组与大自然最为契合的方案，用户翻阅页面，就如同穿梭在自然界中，看到天空、花海、绿地以及四季冷暖的变幻，这就是色彩带来的温度。  3.细节就是细腻的感知 为了更好地表达人与自然之间的亲密关系，我们尝试做出一些可爱的形象，用来平衡画面中的文字信息。拟人化的小地球3D形象，对应了不同板块的内容。他们充当了小贴士的角色，引导用户继续浏览，谁会忍心拒绝一个向你热情传递知识的小可爱呢。     4.用视觉梳理内容信息 当网站有很多文案内容是需要通过页面来加以归类呈现给用户时，一定要有细节上的考虑，以防止复杂的内容让用户疲惫。 基于这个问题，丝滑的交互细节，丰富但不杂乱的色彩以及合适的字体大小和位置可以将多个内容自然而然地衔接起来，并且引导用户继续欣赏。所以，好的内容需要好的视觉和交互细节将其呈现出来，不能只是简单地信息罗列。  5.移动端适配 我们为移动端也设计了更加适配的系列视觉内容，方便用户操作以及传播。   ## English Content ### Introduction EarthAid is a brand new public welfare project under WildAid. It is a project to address climate change and advocate a green lifestyle. It focuses on healthy and sustainable diet, green travel, reducing disposable plastics, ecological protection and restoration through knowledge popularization, awareness raising and public participation activities. We encourage everyone to participate in global climate governance with concrete actions as a member of the earth. The STOYARD design team designed and developed the website for him, and was responsible for the overall visual design, creative development and architectural review, so that the entire project presented a fun and vivid face. [Video](https://static.glabcms.stoyard.com/stoyard/gallery/20230928/dc9zubzg5m.mp4) 1. Project background Wildaid started working in China in 2005 and established a representative office in Beijing in 2017. Wildaid's major projects in China include species conservation projects to reduce demand for illegal wildlife and their products, such as ivory, rhino horn, pangolins and turtles, and the EarthAid climate project to promote emissions reduction and green, low-carbon lifestyles from the consumer side. Wildaid seeks cooperation from all sectors of society, including government departments, enterprises, media, celebrities and local people, to increase support for wildlife protection work. Wildlife Rescue has nearly 100 celebrity public welfare spokespeople, through the positive influence of celebrities to influence the general public, change people's awareness and attitude towards wildlife resources and environmental protection. The subjects invited to shoot public service announcements are outstanding representatives of their respective fields.   2. Surprise with unlimited creativity The visual style of the website as a whole presents the characteristics of fresh, smart and rich, so that users can perceive the vigorous vitality at the moment they open the website. At the technical level, we have added a lot of interactive details and 3D rendering output, so that users can stimulate interest through interaction with the content. In the visual layer of the website, we opened our vision with a video of natural landscape. At the same time, there was also a set of rolling data accompanying the video content. This is the real-time number of newly added environmentalists in WildAid organization. Next, we use 3D rendering and front-end technology to achieve three-dimensional interactive scenes, quickly narrowing the distance between users and platforms. In addition, we have also done a large number of color matching schemes, and finally finalized a group of schemes that are most compatible with nature. Users browse the page, just like shuttling in nature, seeing the sky, the sea of flowers, green space and the changes of the cold and warm seasons, which is the temperature brought by color.  3. Detail is delicate perception In order to better show the intimate relationship between people and nature, we tried to make some cute images to balance the text information in the picture. Anthropomorphic 3D image of small Earth, corresponding to the content of different plates. They act as tips to guide users to continue browsing, and who can resist a cute little person who enthusiastically conveys knowledge to you?     4. Visually sort out content information When the website has a lot of copywriting content that needs to be classified and presented to users through the page, it must be considered in detail to prevent complex content from tiring users. Based on this problem, silky interactive details, rich but not cluttered colors, and the right font size and position can naturally connect multiple pieces of content and guide users to continue to enjoy. Therefore, good content needs good visual and interactive details to present it, not just a simple list of information.  5. Mobile adaptation We also designed a more suitable series of visual content for mobile terminals, which is convenient for users to operate and disseminate.  