【干货】25个故事性网页设计,轻松讲述网页独有

日期:2019-09-29 10:38作者:北大青鸟西安建大IT学院

摘要:25款最优故事化网页设计,助你轻松掌握讲故事秘诀 最佳故事性网页设计 实例 1. Pierre Herme Nicolas Buffe 网页类型 : 小说阅读类网页 作为一款真正讲故事的小说类网页设计案例,此网页并
关键词: 北大青鸟ui培训

25款最优故事化网页设计,助你轻松掌握“讲故事”秘诀

最佳故事性网页设计实例

 

1. Pierre Herme Nicolas Buffe

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

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

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

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

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

 

2. Borgo Veneto

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

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

本款视觉故事性网页设计,通过左侧的线性导航设计,向用户逐一展示其工作室和以往设计项目的相关信息,娓娓道来。结合极具视觉效果的切换、交互以及鼠标悬浮动画,动静结合,赋予网页活力。

黑白配色的选用,也使整款设计时尚、高端而神秘。

总之,小编是非常喜欢界面上悬浮展示的各类简笔画模特设计,优雅时尚、吸睛炫酷。你觉得呢?

 

3.Mi Banxico

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

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

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

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

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

 

4. Domaine Glinavos

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

网页类型: 酒类网页

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

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

简约的设计风格、恰到好处的微交互以及炫酷的交互动画等等,都让轻松脱颖而出。

是一款非常适合设计师学习和模仿,打造优质品牌或产品介绍类网页的设计案例。

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

 

5.The Boat

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

网页类型: 小说类网页

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

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

 

6.Popitas

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

网页类型: 零食类网页

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

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

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

 

7.Bagigia

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

网页类型: 电商类网页设计

Baggia是一款专业的皮包类电商网页。不同于同类网页通常选用对称网格或卡片类设计,直接展示所有在线产品、相关价格和规格数据的方式。本款网页设计,创造性地只选取了一款热门商品进行展示。

每一个产品细节,从图样设计到拉链设计,从材料选取到设计师介绍等等,面面俱到。清晰地向用户传达着其企业理念:“为用户,专注每个细节”。

底部搭配的拉链式导航设计,也是非常有趣了。

 

8.The Hybird Graphic Novel

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

网页类型: 小说类网页

作为另一款小说类网页设计案例,本款设计选用了非常炫酷的视觉滚动差设计来展现网页相关信息。用户简单滚动鼠标,即可跟随小说主人公一步步冒险、做任务。

一幕幕令人振奋的小说场景,搭配各类背景音效(例如狗吠声和窗户破碎的声音以及尖锐的刹车声等等)、切换动画以及交互动效等,引人入胜,有效降低了网站跳出率。

此款设计算是小编本篇文章中展示的各类故事化网页设计中,最炫酷的一个。不妨看看呢!







转载请保留本文网址http://www.sxbdqn.cn/qqwd/ui/493.html
上一篇:做一次实实在在交互设计竞品分析吧
下一篇:按钮的禁用状态 | 设计详解