7个维度让你在网页设计中讲好故事。

7个维度让你在网页设计中讲好故事。

1、图片

7个维度让你在网页设计中讲好故事。

首先,想要讲好故事,要通过设计在视觉上吸引用户。这一切要从干净清晰的视觉设计开始。壮美的图片,有趣的插画,惊艳的视频,都会抓住用户的注意力,并给予用户第一印象。

在视觉上足够突出的图片,搭配以文案,一切开始拥有了画面感,而故事因此而诞生。从照片到色彩,从文字到细节,故事所传达出来的信息和气质,和整个视觉设计应该是保持一致的,而好的故事,能够带着用户一路走过来。

2、角色

7个维度让你在网页设计中讲好故事。

当我们在设计网站的时候,常常会探讨用户本身和故事的角色。在网站的开发过程中,用户所代表的身份,和呈现在用户面前的角色,有着怎样的关系,这是内容和设计上需要探讨的关键问题。

这个角色可以是一个贯穿整个设计是实体角色,也可以是被包含在视觉和文字内容中的一种“气质”,或者“腔调”。

Freddie 公司旗下产品MailChimp 中所创建的视觉形象就是一只有趣的猴子,而这只猴子不仅仅是他们的LOGO,而且这个形象贯穿了整个设计,这个角色为整个产品作出了不小的贡献:

●首先,这个形象和公司、产品的名称相互呼应,也解释了为什么叫MailChimp。虽然MailChimp 这个生造的词汇会让用户感到迷惑,可是看到猴子的形象,他们能够很快Get到这个命名的含义。

●这个形象还揭示出了这个公司的特色,有趣的设计和独特的气质。

●猴子Freddie 本身就代表着故事,它是怎么来的?名字怎么起的?这个形象本身就自带故事属性。

3、互动

7个维度让你在网页设计中讲好故事。

引导用户与内容进行互动,这是设计能带来的重要价值之一。通过动效和行为召唤(CTA)让用户自然地注意到关键的内容和重要的控件,引导用户与之交互,这是为了促使用户与内容紧交互,参与到这个故事中来。

想要用户参与到故事中来的另外一种方式则是视差滚动。它从视觉上鼓励用户持续地向下滚动,在保证体验愉悦的同时,用动态而有趣的视觉设计,强化互动。

一个好故事并不需要做的太复杂。Humaan 就很直接的借助团队照片和悬浮动效来讲述故事,帮助访客了解这个团队的成员。这种设计简单而有效。(注意悬浮状态下每个成员姿势和表情的变化,非常有意思)

4、游戏

7个维度让你在网页设计中讲好故事。

故事本身的构建可能是最麻烦的地方,相反,讲述故事反而是简单的事情。如果你不知道要如何呈现故事,那么不妨将它设计成一个简单的游戏,为用户提供一个有趣的听故事的渠道。

而借助游戏讲述故事的技巧在于,保持简单和提供奖励。不论是虚拟的成就徽章,还是优惠券,你要让用户从中获利,才能促进他们继续听取你的故事。

你所提供的游戏并不一定要像Pokemon Go 那样有趣而好玩,Dropbox 通过完成任务获得额外的云盘空间,一样是非常有效的手段。Dropbox 所设定的任务多种多样,有邀请好友,也有帐号链接邮箱,但是无论是哪种,都具有一定的游戏性,达成了一定有奖励。许多忠诚的Dropbox 用户都是这么一步一步过来的。

当然,对于不想玩这些游戏的用户而言,直接付费一样可以达成效果。你要让用户觉得,不论怎么玩,他们都是赢家。

5、微交互

7个维度让你在网页设计中讲好故事。

如今的网页和APP设计中,有着大量的动效和微交互。许多社交媒体都乐于使用微交互,因为它们简单,并且能够带来优秀的体验。

微交互所带来的有趣体验为用户创造出一个有趣的瞬间。每次保存设置,发送消息,登录帐号,都会伴随着好玩而微妙的微交互,以Instagram 中点赞的按钮为例,用户在尝试过之后,对于这种交互会有的沉迷的感觉,乐此不疲。

有意义的微交互非常重要。就像上面所说的点赞,它是具有功能性的,它给整个产品的体验带来了明显的提升。

6、叙述

7个维度让你在网页设计中讲好故事。

故事的构成大多不复杂,开头,过程,结局,这三者是绝大部分的故事的三个基本环节。

如果你需要讲述故事,这种公式化的结构其实是最容易为用户所接受的:

●开头:LOGO和标题。让用户知道这是什么网站,以及他们为什么会在这里。

●过程:通过陈述内容,展现特殊性。你的网站能给用户带来什么不一样的东西?他们能预期一些什么东西?

●结局:行为召唤,呼吁用户购买,或者订阅,等等。

7、简单

7个维度让你在网页设计中讲好故事。

虽然这可能会和上面的一条有所冲突,但是故事最好还是保持简单。简单的故事往往能更快的让用户Get到核心信息。

故事要能够抓住用户的注意力,给用户留下好印象,让他们成为回头客。

UpStream在自己的首页上就做到了这一点——虽然用户可以通过滚动,到中间部位查看更多的内容,但是只需快速的扫视开头,中间和结尾三个部分,就能搞清楚这个故事的全貌。通过视觉设计搭配文字,就能搭建出一个故事的梗概。此外,屏幕上的“参与”按钮也相当的“诱人”。

简单的故事往往更加有效。

8、结语

你在设计故事的时候应该明白,你自己的故事往往更加动人。一个真实的故事,带有你自己的烙印,讲述出来才更容易触动到用户。

原文作者:CARRIE COUSINS

原文地址:webdesignerdepot

译者:@陈子木

译文地址:http://www.uisdc.com/7-ways-design-great-story

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/47625.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
优化家优化家订阅用户
上一篇 2022年7月4日 00:45
下一篇 2022年7月4日 00:45

相关推荐

  • 大背景网页设计案例赏析。

    越来越多的网站开始用高品质的摄影大图来作为网站的背景,让自然的色彩和真实的细节抓紧用户的眼球。随便找一张来体验一下: 大背景图片(Large hero areas),是从印刷设计中借来的专业术语,指包含少量文字内容、位…

    2022年7月4日 建站资讯
    0140
  • 学会这20招PS操作技巧,提高80%的工作效率。

    @阿随向前冲 :每天用上千次的PS 基础工具,如果连这 20 招技巧都不知道,谈什么工作效率? 1. 在“旋转视图工具”中“旋转画布” 旋转画布,是在很多设计任务中都会用到的命令。使用时,在英文输入状态下,按键盘快捷键…

    2022年7月4日 建站资讯
    0197
  • 网站设计中页面背景应该如何设计。

    如今科技发展和设计趋势日月牙异,网页设计人员要时刻保持敏感,要对国际化的网站设计趋势时刻关注,如许才能让网站团体的感觉不至于那么过时。为了让网站显得当代化优雅,网站制作公司要在与客户充分沟通的基础上…

    2022年7月3日
    0101
  • 企业官网建设的六大好处。

    1、打开电子商务: 电子商务( EC 也就是 E-Commerc 缩写)关于电子商务的界说世人议论纷纷,从不同的视点启航有不同的界说。能够理解为以 Internet 为依托,凭借必定的信誉支付手法,网路上进行产品的购销、费用支付…

    2022年7月4日
    0117
  • 超实用写给零基础新手的配色指南。

    色彩是十分重要的。色彩是设计的表现手法之一,色彩的不同搭配可以改变商品给人的印象。我们生活在这个五彩缤纷的世界里,虽然每天都在享受大自然给予我们的视觉盛宴,但轮到我们自身来运用色彩时,是不是又觉得束…

    2022年7月4日 建站资讯
    0108
  • 微网站和手机网站是一样的吗。

    很多人都不知道什么是手机网站,什么是微网站,很多的人都迷惑了,虽然这些程序对日常使用的感觉没有区别,但如果你需要建站的话,可要分清楚不然就要闹笑话了。接下来,我们会告诉你手机网站和微官方网站之间的区…

    2022年7月4日
    0120
  • UI设计师急需掌握的平面设计基础。

    曾看到网上一些帖子讨论UI设计师和平面设计师的差异,总结为思维方式的不同: UI设计师考虑用户习惯和易用体验,平面设计师专注于更具吸引力的信息传达。两者侧重不同但专业上有非常大的交集,信息传达的核心基础技…

    2022年7月4日 建站资讯
    092
  • 为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法。

    你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方…

    2022年7月4日 建站资讯
    099

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息