IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-05-05 10:47 • 交互设计

网站能承载多种多样的内容,但无论是哪种内容,通常都会遵循一定的信息架构。在这其中,故事是很特别的一种类型。讲故事,往往能以更叙事、更情感化的方式,将内容传递给用户。一个好的故事,往往始于笔端,但是最终呈现,还是要依靠精巧的设计。那么设计是如何讲好故事的呢?今天的文章,为你分享一下创造故事的7个维度。

文章目录[隐藏]

  • 1、图片
  • 2、角色
  • 3、互动
  • 4、游戏
  • 5、微交互
  • 6、叙述
  • 7、简单
  • 8、结语

网站能承载多种多样的内容,但无论是哪种内容,通常都会遵循一定的信息架构。在这其中,故事是很特别的一种类型。讲故事,往往能以更叙事、更情感化的方式,将内容传递给用户。一个好的故事,往往始于笔端,但是最终呈现,还是要依靠精巧的设计。那么设计是如何讲好故事的呢?今天的文章,为你分享一下创造故事的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个维度,让你在网页设计中讲好故事

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

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

  1. 开头:LOGO和标题。让用户知道这是什么网站,以及他们为什么会在这里。
  2. 过程:通过陈述内容,展现特殊性。你的网站能给用户带来什么不一样的东西?他们能预期一些什么东西?
  3. 结局:行为召唤,呼吁用户购买,或者订阅,等等。

7、简单

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

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

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

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

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

8、结语

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

 

原文作者:CARRIE COUSINS

原文地址:webdesignerdepot

译者:@陈子木

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23425/

APP设计logoPSUIVRWEB交互产品产品经理分享动效微交互情感化设计用户网页设计视觉视觉设计设计设计技巧译文
赞 (0)
CatherineCatherine
0
生成海报
UI最佳实践:深度解析模态窗口
上一篇 2017-05-05 09:57
聊一聊不同应用场景下的验证码
下一篇 2017-05-05 11:51

相关推荐

  • 微信热点

    iPhone十年,移动用户体验领域已经到达成熟阶段

    译者:Daisy全文共 3904 字 7 图,阅读需要 8 分钟———— / BEGIN / ————最开始的iPhone于2007年6月发布。2008年末,当我们开始研究第一版移动报告时,大多数人还是在使用有着最极其糟糕的用户体验的原始移动设备。在那个时候,相较于体验糟糕的移动设备和移动网站,任何稍微像样的产品都会带给用户愉悦的体验。三年前,移动报告第三版出来时,我们对移动端可用性做了严密的评估。我们很高兴移动端可用性报告不再是一种矛...

    2018-04-11
  • 多款智能手表的对比

    终于 Apple Watch 将要在下个月上市了。在目前还不知道这款产品售价的情况下,相信设计会成为不少消费者朋友选择产品的重要标准之一。Apple Watch 已经获得了 iF 设计金奖,不过可能有人觉得这无法令他们信服,他们…

    交互设计 2015-03-10
  • 交互设计自查表的建立:思路与项目实例解析 交互设计

    交互设计自查表的建立:思路与项目实例解析

    我习惯从层级的角度由高至低地排查各个交互层面可能存在的问题——首先是信息架构与流程这一最高层级,然后是界面的具体呈现,以及基于界面呈现的交互过程,最后才是以上自查中均未涵括的其他特殊情形。(1)确定当前阶段 → (2)阅读设备、数量、所属项目、请购人员、发起时间等基本信息 → (3)确定自己在本流程中的身份(因为部分场景下,当前用户的身份可能有多种可能性,需要用户再做确认)→ (4)在列表区阅读此前的流程历史,必要时可上下滑动或点击查看附件 → (5)确定当前步骤等待自己完成的是什么任务 → (6)执行该任务。

    2017-05-12
  • 微信热点

    对话式交互设计流程

    上一篇文章介绍了自然对话的基础概念,学习了谷歌对于人类自然对话的研究和理解。本文将通过一个简单的案例来介绍谷歌推荐的对话式交互设计流程,以及本人对该流程与常规的体验设计流程异同之处的对比分析。设计流程1.选择适合的使用场景对话式交互界面的使用场景通常是简单直观的。当考虑任务场景的时候会想到游戏,因为游戏是低风险的。但是游戏界面的设计必须要能够满足用户的期望,以免使用户感到无聊。猜数字的小游戏可以作为对话式界面设计的一个很好的例子,不要求...

    2018-03-31
  • 『APP交互设计趋势』2015年移动应用的开发趋势,交互设计师需要了解到是设计趋势! 交互设计

    『APP交互设计趋势』2015年移动应用的开发趋势,交互设计师需要了解到是设计趋势!

    硬件性能的提升,新技术的出现都是影响移动应用发展的重要因素,而最近几年里,这两个方面都有着不小的进步。从不断增加的屏幕分辨率,64位处理器,到支持所有平台开发的HTML5技术逐步成熟,每个方面都不容小觑。不…

    2015-02-05
  • 功能确定之后,如何做好UCD概念设计? 交互专题

    功能确定之后,如何做好UCD概念设计?

      功能和数据都确定下来了,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。 如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓…

    2016-02-20
  • Android和iOS平台交互方式的不同点 交互设计

    Android和iOS平台交互方式的不同点

    本篇文章属于很初级的内容,之所以写下来,一是为了整理一下自己的思路,二是为了方便初学者们快速了解 Android和IOS在交互上的很多区别。可能有些地方不是完全正确,望多交流。

    2017-06-03
  • 交互新人:如何做用户体验设计

    嗯,毕业来了公司5个月,接触了一些项目,本该早点写些总结,拖延症发作拖延至今。作为交互设计的新人,需要学习和反思的还挺多。 在学校的时候,看了很多书,学了很多理论,一直都希望能够应用起来,来公司发现很…

    从零开始学交互 2015-09-28
  • 微信热点

    酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • Big Than Big ,在移动设备屏幕变大的时代,交互师!你的交互该怎么进行设计? 交互设计

    Big Than Big ,在移动设备屏幕变大的时代,交互师!你的交互该怎么进行设计?

    这是一个大屏手机的时代。强调这件事情的意义在于,这已经成为事实。这是一个大屏手机的时代。

    2015-01-06
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress