25个实例讲解故事性网页设计的方法

版权申明：本文出自“jongde”原创，感谢“jongde”的原创教程分享！

然而，打造一款极富故事性、艺术性和视觉效果的网页设计，并非易事。那么对设计师而言，如何才能成功设计一款有故事且代入感极强的网页呢？请跟随小摹的脚步，一起了解如何让网页讲好故事：

最佳故事性网页设计实例

1. Pierre Herme Nicolas Buffe

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

网页类型: 小说阅读类网页

作为一款真正讲故事的小说类网页设计案例，这个网页并未像同类网页一般，直接通过小说书籍罗列的方式，供用户选择和查阅，而是选择了另一种更具故事性和视觉效果的方式进行展示。

当用户进入网站的那一刻，故事的阅读就已经开始。在一系列简洁易懂的文字引导下，用户不仅能够层层深入地了解相关小说情节，还能够实时与网页互动，同小说主人公一起完成冒险。

其逼真的背景人物场景、配乐、动画以及交互设计，也使整个小说阅读过程更具代入感，让用户深陷其中，不能自拔。

2. Borgo Veneto

网页类型: 时尚工作室类网页

本款视觉故事性网页设计，通过左侧的线性导航设计，向用户逐一展示其工作室和以往设计项目的相关信息，娓娓道来。结合极具视觉效果的切换、交互以及鼠标悬浮动画，动静结合，赋予网页活力。黑白配色的选用，也使整款设计时尚、高端而神秘。

总之，小摹非常喜欢界面上悬浮展示的各类简笔画模特设计，优雅时尚、吸睛炫酷。

3.Mi Banxico

网页类型: 银行金融类网页

相较于以往严肃正式的银行金融类网页设计，此款设计让网站更像是在售卖儿童类产品。无论是卡通人物绘画、糖果配色以及圆润字体的选择，还是动态视频的选用、文本内容的设计以及交互动效的添加等等，处处都充满着童趣。

作为一款专为墨西哥银行（一个专为学校教育类机构提供投资服务的银行机构）而设计的网页，设计师把握住在校学生这一受众特色，选择了充满童趣的故事展开和呈现方式，极具创造性。

看多了严肃正式的网页，此款五颜六色、童心满满的设计是不是更能引起你的注意呢？

4. Domaine Glinavos

网页类型: 酒类网页

作为一款专为知名希腊葡萄酒品牌（Domaine Glinavos）而打造的在线网页，本款设计选用了极其简单自然的叙述方式展开。用户轻松点击，即可逐步了解必选该酒类品牌的8个理由。

无论是其直接展示原料种植、生产和加工场景的背景视频，还是高清的产品图片和文字介绍，都体现出其产品"自然、安全和放心"的制作和经营理念。

简约的设计风格、恰到好处的微交互以及炫酷的交互动画等等，都让此款设计轻松脱颖而出。是一款非常适合设计师学习和模仿，打造优质品牌或产品介绍类网页的设计案例。

相关阅读：极简网页设计技巧，打造简约之美

5.The Boat

网页类型: 小说类网页

此款小说类网页设计，从设计风格上更像是图文漫画类网页。用户进入网页，即可根据图文指导，一步步阅读相关小说内容。搭配炫酷的背景音效、动画以及交互设计，则更像是一款以水墨画风格为基调的动画游戏设计。

总之，这是一款非常逼真、且代入感极强的小说类网页设计。

6.Popitas

网页类型: 零食类网页

如今，虚拟化的公仔或吉祥物设计，已然成为公司推广产品、树立企业产品形象、传播公司企业文化的重要方式。

而本款网页设计案例（一款主营爆米花之类零食产品的网页），就选用了一个类似爆米花的吉祥物设计，作为其网页产品介绍的主人公，依次介绍各类零食产品的同时，也向用户介绍着一种休闲娱乐的生活方式。潜移默化中感染用户，从而促使销售达成。

此外，吉祥物本身丰富的面部表情设计、网站文本动画的完美搭配以及横向导航设计等等，都使整款设计生动而极具吸引力。

7.Bagigia