网站开发培训-高端面授网站开发培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

UI设计师进阶教程:如何合理的在UI设计中使用插画?

  • 发布时间:
    2019-07-25
  • 版权所有:
    云和教育
  • 分享:

在过去几年当中,插画开始以一种坚挺的姿势,站在设计趋势的最前列。不止是原本身处各个领域的画手和插画师开始越来越受追捧,而且连网页、UI和动效设计师都纷纷学习插画设计。当然,更显著的变化,是插画在网页和UI中的使用越来越多,越来越频繁,甚至越来越多样。

多年来,插画被广泛地运用在杂志、图书、报纸、海报、传单等不同的传统载体之上,新的工具和技术使得它更加轻松地植根于数字化媒体当中。

配图1 如何合理的在UI设计中使用插画.jpg

作为设计中,最具有表现力的元素,一张插画所传递的信息比文字更多更丰富。在UI和网页中,使用插画来辅助传达信息,无疑更加直接到位。而插画的可定制性之强,犹在图片之上。

插画在UI界面中的运用,可以说相当广泛了,它更清晰,更时尚,也可以更加精准,甚至更有表现力,那么,它可以运用到哪些地方呢?

●页面主题图

●网页首图和Banner

●吉祥物和形象插画

●博客文章配图

●新用户引导教程

●工具提示

●奖励页面和成就页面

●游戏化设计的页面

●通知和系统消息

●聊天表情

●讲故事的辅助配图

●信息图

●营销和广告图

●图标和装饰性内容

●社交媒体页面

●支持性内容的页面

插画的适用范围之广,这些总结出来的使用场景,并不是全部。插画本身的属性很有意思,它连接了设计,作为内容呈现,还带着明显的艺术化的属性。今天的文章,我们总结一下如何合理的在UI设计中使用插画

一、人性化处理

配图2 如何合理的在UI设计中使用插画.jpg

用户对于传统互联网产品一大吐槽就是过于“机械感”,对此设计师们对产品进行了人性化处理。拿谷歌日历举例,一般的日历类应用界面可以做的很简单,直接给用户展示一个“日历”就行了,用户同样可以看懂。但是谷歌日历很聪明的使用了插画,而且每一个月份都会更换,这可以很好的拉近用户与产品之间的距离。

配图3 如何合理的在UI设计中使用插画.jpg

二、高效的信息传达

此外用户对于具象元素(插画,icon,图像或摄影图等)的感知能力远比文字要强得多。根据尼尔森的一项统计显示,用户平均只读每页文本内容的28%。这意味着,面对大段文字,用户很少去读,他们更多的是“扫描”。

配图4 如何合理的在UI设计中使用插画.jpg

所以同样的一个日程安排,使用了插画了以后,用户可以在极短时间内明白,这个是和同事的咖啡约会,那个是要去牙医那里看病。

三、增加产品趣味性

Know Lupus是一个旨在向人们科普狼疮这种疾病的网站。我们都知道医学知识都是比较晦涩难懂的,所以学习过程比较枯燥。为了改变这个窘境,设计师们将学习过程做成了一个卡片问答游戏。寓教于乐,并且引入了插画和动效,使整个学习过程充满了趣味性。

配图5 如何合理的在UI设计中使用插画.jpg

四、插画or图像

插画比图像应用更广泛的一个原因是插画在UI设计中更具有实际意义。因为无论是插画还是图像都是为了让用户更好的的接受页面中内容,而现在页面中的内容正在变的越来越抽象,图像很难直接来表现。

Dropbox Carousel是一个为Dropbox用户管理照片和视频的app。即使这款app管理的主要都是摄影图,但是设计师在进行UI设计的时候还是摒弃了摄影图。因为他们认为,用户看到一张照片,只要主角不是本人,他们就很难产生关联感。比如图中的那个过生日场景,这里采用插画会给我们一种很温馨的感觉。如果是真人出镜这种感觉就会减弱,因为那个人不是我啊。相比于图片,用户对于插画更具有代入感。

配图6 如何合理的在UI设计中使用插画.jpg

五、值得思考的问题

当然,插画的设计不是没有门槛的,在设计的时候,要求也是比较高的。在使用和设计插画的时候,需要考虑以下的几个方面:

●目标受众(身体能力,年龄,文化背景,教育水平等)

●产品的使用环境

●产品和内容的在全球范围内和当地的传播水平

●所选图形的隐喻以及是否容易被识别

●插画是否会让人分心

六、总结

插画是改善用户体验一个强大又重要的工具,它能使界面既美观又高效。设计中如何运用插画并没有硬性规定也没有速成法则,最重要的是要牢记一件事:发挥插画的作用。因为最终任何插画的目的都是使人更深层次的理解你的产品或品牌。