Web设计中的10个讲故事的例子

2021年2月24日01:49:13 发表评论 26 次浏览

编者注:本文最初由Web Marketing Today发布。实用电子商务于2012年收购了今日网络营销。2016年, 我们合并了这两个站点, 而实用电子商务则是后继网站。

在" Web设计中的讲故事"中, 我解释了讲故事的三个最基本方面-角色, 设置和动作-并提供了使用基本设计元素开始将讲故事纳入Web设计的方法。在本文中, 我将研究十个使用讲故事的站点, 并列出每个故事中的角色, 设置和动作。

龙头机器人

龙头机器人

Tapbots使用吉祥物讲述了疯狂的科学家的故事, 他们建造了微型机器人, 这些机器人"生活"在你的iPhone, iPod Touch或iPad中, 并执行简单的任务, 例如转换单位或管理Twitter帐户。 Tapbots的故事还使用户可以通过使用" bots"成为叙述的一部分。

人物:

疯狂的科学家和Tapbots。

环境:

iOS设备。

行动:

每个Tapbot应用程序的功能。

丁克

丁克

Zensorium使用一个带插图的滚动式故事来制作Tinke健康检查产品的功能动画。当参观者滚动时, 他们会看到Tinke的工作原理, 可以使用Tinke的位置照片, 并有机会购买Tinke。

特点:

潜在的Tinke用户。

环境:

任何地方的用户都会监视健康统计信息。

行动:

使用Tinke。

突变实验室

突变实验室

Mutant Labs讲述了五个" mutant"开发人员在其实验室中构建游戏, 应用程序和"其他数字巫术"的故事。 Mutant Labs善用语言在故事中营造氛围。 "数字巫术", "我们如何滚动"和"放射性熔炼事故"等短语都有助于在Mutant Labs品牌周围营造有趣的氛围。

人物:

五个突变体开发商。

环境:

突变实验室。

行动:

开发游戏和移动应用。

基瓦

基瓦

小额贷款网站Kiva吸引了潜在的捐助者, 向世界各地的人们讲述他们的故事。 Kiva使用有关生活在真实地方的真实人物的故事, 并邀请游客捐赠并成为故事的一部分。 Kiva还使用令人回味的图像来营造现场气氛, 代表来自世界各地的人和地方。

人物:

真实的人。

设定:

全球各地。

行动:

捐赠并成为故事的一部分。

喀斯喀特酿造公司

喀斯喀特啤酒厂

澳大利亚的Cascade Brewery Co.使你可以与不同的拨盘进行互动, 以"创建自己的网站"。许多导航图像讲述的都是一个较小的故事, 有助于整个网站的氛围-例如"新闻"链接描绘了一个男人大喊大叫的扩音器。访问在线"酿酒厂"的访问者会调整啤酒厂控件, 以"酿造"最适合他们的网站版本。

特点:

访客。

环境:

在线"酿酒"。

行动:

"酿造"独特的现场体验。

印象笔记

印象笔记

提醒平台Evernote使用简单的讲故事插图来解释其产品的工作原理。 Evernote应用程序简化了从网络收集和保存笔记的过程。

人物:

Evernote用户。

环境:

有趣的网站。

行动:

使用Evernote应用程序。

Bellroy –苗条的钱包

Bellroy-修身钱包

钱包制造商Bellroy的" Slim Your Wallet"页面介绍了Roy的故事, Roy"代表了世界上成千上万的人", 以及他为逃避"口袋膨胀地狱"的追求。 Bellroy使用带有视频链接的幽默插图故事来销售钱包。

特点:

罗伊·科斯坦扎(Roy Costanza)-或避免"口袋膨胀地狱"的任何人。

环境:

罗伊随身携带钱包。

行动:

减肥罗伊的钱包。

保镖本

保镖本

此安全应用程序将自己呈现为故事中的角色, 即保镖本。 Ben居住在你的iPhone中, 并确保你的数据安全。该网站还链接到一个网站, 该网站显示保镖本杰夫(Ben)解释了拥有未经保护的电话的危险性, 走在数据窃取的平均路上。

特点:

本保镖。

环境:

你的iPhone。

行动:

确保你的数据安全。

祖先集团

祖先集团

一家网页设计公司Forforeathers将自己定位为"老式"设计团队, 依靠版式, 古董图像和巧妙的词法来编织其故事。诸如"这些家伙几乎是猫的睡衣……"之类的短语给现场带来了有趣的氛围。

人物:

祖先员工。

环境:

现代世界中虚构的老式设计商店。

行动:

"设计令人jaw目结舌的专辑封面, 商品和网站。"

达什船长

达什船长

数据分析公司Dash上尉讲述了智能营销新时代的超级英雄故事。 Dash队长代表产品, 并在这个新的营销世界中保存客户的营销活动。

特点:

Dash队长-产品。

环境:

新的营销世界。

行动:

"保存"客户的营销活动。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: