• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 想要提升用户体验,这6种使用插画的方法颇为不错

想要提升用户体验,这6种使用插画的方法颇为不错

作者:Nick Babich 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UX设计,插画设计,用户体验设计,经验分享等相关知识,Nick Babich希望在学习及工作中可以帮助到您

相比于文字,视觉对于用户的影响更为直接、明显。人们对于图形和视觉信息的处理速度更快,这是深入人类基因的基本特征。这也是为什么图片和插画对于设计有着巨大的影响。

在现代的用户界面当中,图片和插画和文本内容同样是核心的交互元素,而插画作为一种承载着多样艺术风格和内容的视觉载体,它可大可小,可以作为主视觉而存在,也同样可以作为点缀和装饰,甚至可以作为小图标成为交互的关键因素。今天的文章我们会从现代UI设计的角度,来回顾一下插画的主要功能。

插画是如何提升用户体验的

和其他的视觉元素相似,插画可以是用户和界面之间进行沟通的有效工具。精心制作的插画对于用户体验有着明显的提升:

  • 吸引用户的注意力,以视觉的方式提供关键的、易于理解的信息。
  • 将复杂的信息清晰地勾勒出来。使用视觉化的内容来呈现想法,甚至不需要过多的语言来说明。
  • 可以吸引用户。漂亮的插画能够引起用户对于产品本社你的兴趣。
  • 激发用户的想象力。插画有着融合现实和想象的可能。

1、更快地呈现主要特点

正如同前文所述,插画有着强大的阐释能力。在网页和APP设计当中,有许多不同的插画展现形式来提升界面的用户体验。最典型的,就是新用户第一次打开APP的时候,会看到带有插画的新用户引导流程,视觉化的设计让用户可以更快了解APP的特色和使用技巧。插画让设计师避免了在屏幕上放置大量的文本说明。

插画让设计师可以更好地呈现产品不同的功能模块。

插画还可以更好地展现不同的服务套餐之间的差异。

最重要的是,插画能够通过幽默有趣的展现形式,让产品显得更加富有人性化。

这是Google 的报错页面。

2、创造更多难忘的体验

我们日常使用的APP和网站其实非常多,但是真正能够创造令人难忘体验的产品并不多。

作为设计师,想创造一个令人难忘的体验,我们需要真正了解人类大脑的运作方式。Barbara Fredrickson 和 Daniel Kahneman 曾经提出了一种启发式的“高峰期规则”,根据这一规则,人们更加倾向于基于他们感受的高峰期(情绪和体验最强烈的时刻)来判断体验或者经验,相反,不会根据体验的平均值来判断一个事务的好坏。无论这种高峰期是愉快还是不愉快,他们的效果最终都会保留到最终的评判。

换句话来说,在我们回忆过往的体验之时,其实是更加倾向于回忆当时的关键性事件,而非完整地回忆整个过程。所以,在进行设计的时候,尽量创造一个令人足够愉悦的快乐体验,能够更好地提升品牌知名度和好评度。

在许多产品设计的时候,吉祥物被视作为创造优秀体验的重要载体,因为它常常作为品牌和用户之间产生情感联系的载体。

Silverback 是一款 Mac平台的应用程序,它使用大猩猩来作为吉祥物。

3、创造与用户直接联系的体验

每个用户同产品进行互动都是一次独立的历程,每个历程背后都藏着用户想通过产品达成的目标。如果能将整个历程转化为角色化的历程,并且将用户目标设置为整个历程的终点,那么插画能够成为勾连用户和用户历程的载体。

Omono 就是一个很好的案例。这款应用使用猫头鹰来引导用户逐个通过不同的界面,完成任务,让产品以更加友好的方式呈现在用户面前,帮助他们达成目标。

4、强化已有的概念

插画不仅仅能够进行具体的说明,还能够为网站或者APP强化整体的风格,在视觉上提供支撑。插画能够结合品牌的LOGO、字体、色彩对于整个产品产生显著的影响。当设计师开始根据特定的风格定位来制作插画的时候,能够通过元素的融合和调整,营造出更为自然协调的感觉。为了达到这个目标,插画的一致性一定要特别注意。一旦做好,插画能够很好的强化已有的概念。

5、让交互更加鲜活

现在面对APP和网页的时候,我们很少将他们视作为静态页面了,因为交互的概念已经深入习惯了,转场动效和动画作为界面和界面、状态和状态之间的连接普遍存在,他们弥合了体验之间的裂缝,让产品更加自然。同样的,插画在这个环节也是广泛存在,它们提供了真正令人难忘的体验,让交互更加富有生命力。

就像提供专业文档服务的 Readme.io,每次用户输入密码的时候,都会看到微笑的动态插画。人们喜欢这样的设计,这会让产品显得更加人性化。

6、增加游戏化的体验

游戏化设计是目前越来越流行的提升用户参与度的技术。设计师可以在界面中采用插画来强化游戏化的设计,无论是用户历程还是成就系统,都非常适合使用插画来呈现。

【这些趋势好文,让你的设计走到用户心里】

  1. 《这3种独特的趋势,能让网页设计增色不少》
  2. 《2017年最后几个月,网页设计师值得注意的趋势》
  3. 《这3个流行趋势虽然好,但依然要注意这些细节》
  4. 《看了那么多的设计趋势,你知道怎么落地实践吗?》

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 这个帮你改善睡眠的APP,是这样设计出来的
  • 什么决定了设计师的职业高度?来看资深UX的思考!
  • 设计实战!扁平风的手机赛车游戏UI界面是这样设计的
  • 一个针对女性用户的照片编辑软件,要如何设计UI?
  • 这个APP的UX设计,把订购汉堡玩出花来了
  • 沪江UED团队出品!用户体验设计师进阶实战指南(下)
  • 沪江UED团队出品!用户体验设计师进阶实战指南(上)
  • 如何判断你的产品“好不好”?来看高手的角度!
  • Airbnb设计经理:一个好的交互设计师应该具备什么素质?
  • 设计实战!健身应用Mannva的UX/UI设计流程是怎样的

相关文章

  • 2018-08-23AI教程!教你临摹超酷炫的平构人像插画
  • 2018-08-23PS合成教程!记忆大师的海报风格是怎么做的?
  • 2017-08-06前端开发大众手册(包括工具、网址、经验等)
  • 2018-08-23作品落地效果不行?你要好好学习印刷基础知识和技巧了!
  • 2018-08-23即使是最靠下的网站页脚,设计上同样很讲究
  • 2017-08-06html、css基础注意点(前端必看篇)
  • 2018-08-23为什么说MVP已死,MAP当道
  • 2018-08-23超全面!色彩无障碍设计之「对比度」的探索
  • 2018-08-23热爱写写画画的你,可以用子弹日记激发全部创意
  • 2018-08-23学会插画的这四种玩法,能让你的UI体验更优异

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 这10个小技巧,帮你创造出可用性良好的微文案
    • 文案启蒙:感动是个好东西,我们都要保护它
    • Google对话式交互规范指南(六):用户对话中的自然惯例
    • 亚马逊语音交互设计规范(二)用户说的内容
    • 这些设计规则不是用来遵守,而是用来打破的
    • Google对话式交互规范指南(三):设计原则与方法
    • 从零开始设计APP!快速提升引导页格调的设计方法总结
    • 做了50多个项目,才知道总监们看重的调研是这样的
    • 学会这10条设计技巧,新手也可以做出合格的设计!
    • 正在疯狂流行的等轴测图标,千万不要错过

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有