首页

整个2018年,Dribbble 反映出来设计趋势是什么?

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

每个人都在关注趋势,Dribbble 是设计师的集散地,那么在2018年,Dribbble 反映出来设计趋势是什么?

整个2018年,Dribbble 反映出来设计趋势是什么?

每个人都在关注趋势,Dribbble 是设计师的集散地,也是设计趋势最容易体现的地方。如果你经常关注 Dribbble 上的那些设计作品,你总会注意到许多有意思的共性,在更长的时间尺度上关注这些共性,会发现其中不少会延伸到更大的设计领域和范畴,其中很多会以趋势的形式成为阶段性甚至长期的设计趋势。这些流行的趋势有的关乎技法,有的则是色彩、风格,甚至是某种隐喻。

当然,不论如何,作为设计师,这些趋势的价值是毋庸置疑的,关注它们,以开放的心态面对着,也许它们会在下一个阶段在我们自己的设计作品中开花结果。

1. 非标准比例的人物形象

以人为核心的自定义插画是这两年来,最显著的设计趋势之一。这种插画展现形式能够快速呈现想要呈现的环境、流程,更重要的是创造情感诉求。标准而写实的人物形象在大量的设计诉求之下,显得平庸而不够突出,这也使得走样但是富有张力的非标准人物身材比例显得更加出彩,这也是为什么近年来我们能够如此频繁地看到诸多非标准的人物插画。

整个2018年,Dribbble 反映出来设计趋势是什么?

这幅插画来自 icons8 。巨大的鞋子,不成比例的巨手,水壶纤细的握柄和壶颈,强烈的对比显得颇具张力。

整个2018年,Dribbble 反映出来设计趋势是什么?

Diana Stoyanova 的插画呈现了一个忙碌女性的形象,非标准的身材略显抽象,但是很有力量。

整个2018年,Dribbble 反映出来设计趋势是什么?

Diana Stoyanova 的这幅插画作品用夸张巨大的人物形象来强调你比手机更大,更重要。

整个2018年,Dribbble 反映出来设计趋势是什么?

而 Radio 的这幅插画则使用走样的身材营造出有趣而可爱的形象,让交互更加有意思。

2. 提供辅助信息的界面插画

时至今日,插画在 UI 中已经不再鲜见。自定义的插画早就不是装饰性的设计,它让UI界面更加具有视觉吸引力,和情感表达的能力。更重要的是,它是功能性的,它为界面的功能和信息提供支撑,以「互文」的方式来告知用户界面想要呈现的功能,毕竟图片和插画所呈现的视觉信息比文字更快。

整个2018年,Dribbble 反映出来设计趋势是什么?

这个界面也是 icons8 团队制作的。辅助性的插画让报错信息也显得足够明亮而正能量,让用户不会觉得难受。

整个2018年,Dribbble 反映出来设计趋势是什么?

这组作品同样来自 icons8 ,这次的风格不同,并且是为移动端新用户引导而设计的。引人瞩目的插画将文字描述的优势更加具象化地表现出来。

整个2018年,Dribbble 反映出来设计趋势是什么?

Netguru 的报错页面显得非常纯粹也非常可爱。

整个2018年,Dribbble 反映出来设计趋势是什么?

Hoang Nguyen 所设计的这个插画甚至是交互式的,它的灵感来源于一款经典的滑块游戏,动效模拟了这个效果。

3. 动态的 LOGO 和图形

动画效果是强化视觉的重要手段。在以往,视觉和图形化元素绝大多数都是静态的,但是现在为了更加积极地迎合用户体验,动态的设计已经成为常规,许多动效所带来的效果是静态设计所无法呈现的,在情绪和氛围上的营造也更加强大。

动效不仅能够让产品在视觉上更加吸引人,而且能够向用户呈现出产品的品质感。此外,你还能够在网站、通知、教程和交互流等吧托女个的地方找到动效。这也是为何 Dribbble 的设计作品中,有如此之多的动态的图形化元素。

整个2018年,Dribbble 反映出来设计趋势是什么?

Motion Design School 的这个动态 LOGO 借用了负空间的设计方法,主体则采用了狗的形象,动态呈现下极为可爱生动。

整个2018年,Dribbble 反映出来设计趋势是什么?

Awsmd 则更有意思,将水母的运动方式赋予了花朵,良好总生命体在体态上贯穿一致,有着的视觉表现力。

整个2018年,Dribbble 反映出来设计趋势是什么?

Markus Magnusson 将一组风格一致情节连贯地插画动态地连接到了一起,让LOGO 具备了强大的叙事能力。

整个2018年,Dribbble 反映出来设计趋势是什么?

Yup Nguyen 的动画则不仅时尚,而且非常有趣,让人感到愉悦,而忘记等待的烦恼。

4. 工作流程和工作区主题插画

Dribbble 上的数字插画主题之一,就是对各种工作流程和场景。插画和平面设计师热衷于相对艺术地呈现设计工作的流程,团队的协作,创意的发散过程,沟通的状态,工作空间的呈现。它流行的另一原因,是这种内容的插画在着陆页和博客文章页面中非常适用,且非常流行。

整个2018年,Dribbble 反映出来设计趋势是什么?

Tubik Studio 的这幅插画展现了设计师的工作空间,整个视角似乎是在广角相机下被扭曲了,非常有趣。

整个2018年,Dribbble 反映出来设计趋势是什么?

来自 Walid Beno 的这个插画则呈现的是团队协作的场景,巨大的UI界面显得颇为夸张,不过主题性也是借此才得以体现和强化。

整个2018年,Dribbble 反映出来设计趋势是什么?

Pitch 的这幅插画同样呈现的是团队协作的场景,不过加入的动效非常微妙,将协作的趋势和状态给放大了出来,视觉上更加动感,且足够时尚。

整个2018年,Dribbble 反映出来设计趋势是什么?

Ted Kulakevich 的插画中则描摹的是一个正在工作,喝着咖啡的角色形象,和日常的设计和创意工作者的状态非常接近,令人赏心悦目的色彩则让整个状态令观者非常舒适。

整个2018年,Dribbble 反映出来设计趋势是什么?

如果你的工作状态也是如此的忙碌,那么你应该能够从 icons8 的这幅插画中找到共鸣。插画中被工作内容所包围的状态不就是你嘛?

5. 有趣的吉祥物和奇妙的生物

设计是一个需要想象力的工作。有趣的小怪兽,奇妙的机器人,经典或者原创的卡通人物,只存在于传说和想象中的生物,从来都不会在 Dribbble 上缺席。品牌吉祥物的设计在这种趋势下越来越具有明显的情感表现力,而卡通化的角色形象很大程度上会利用人们对于特定动物或者特定形象的情感关联,人格化、角色化之后的吉祥物,能够让用户产生在和它进行情感交流的错觉。

整个2018年,Dribbble 反映出来设计趋势是什么?

设计师 Mike 的网页设计作品当中,有趣的卡通形象作为视觉主体,让产品和用户更快和页面产生视觉连接。

整个2018年,Dribbble 反映出来设计趋势是什么?

和Mike 的设计目标不同的是,Alexandra Zutto 的插画是借助机器人的形象来呈现未来主义的氛围。

整个2018年,Dribbble 反映出来设计趋势是什么?

Motion Design School 使用可爱的动态插画来强化品牌的展示。

整个2018年,Dribbble 反映出来设计趋势是什么?

这组来自 icons8 的插画所营造的是一个典型的结帐场景。真正特别的地方在于角色的设定,人和机器人之间的交互,营造出科幻的氛围。

整个2018年,Dribbble 反映出来设计趋势是什么?

Ramothion 灵活的运用狐狸这个吉祥物形象,结合UI元素,表达了「演示」的主题。

整个2018年,Dribbble 反映出来设计趋势是什么?

icons8 的这幅插画则利用了噪点来赋予角色以一种带有艺术感的气息。

6、各式各样的运动状态

运动就是生命,对于设计师和插画师而言,最有张力的东西大概都藏在运动将要开始的时候,藏而未发的一瞬间,或者运动过程中,姿态舒展的某一秒。

体育运动中往往能够更快找到这样的状态,不过其他的主题之下,也存在类似的运动状态。这样的运动状态充满了表现力,设计师和插画师们常常会借助色彩、图形、曲线等元素来构建这样的设计作品。

整个2018年,Dribbble 反映出来设计趋势是什么?

Unfold 的插画呈现的是冲过终点的运动员,主题暗示出了成功、成就,明亮的色彩和舒展的姿态在整体上保持了一致,艺术性也不低。

整个2018年,Dribbble 反映出来设计趋势是什么?

同样是呈现的跑步,但是Jack Daly 所表现的是即将开始的运动,蓄势待发的一瞬间的状态。这幅插画是给 InVision 所设计的,主题是设计冲刺,而这幅插画非常贴合这一隐喻。

整个2018年,Dribbble 反映出来设计趋势是什么?

Walid Beno 的插画所呈现的场景非常独特,现实的路径和虚拟的景象连在一起,人物仿佛骑行在现在与未来之间。

整个2018年,Dribbble 反映出来设计趋势是什么?

这幅来自 Tubik 的插画则将运动的场景和手机熔于一个场景当中,整个构图非常动态。

7. 阴影和负空间

平面设计另外一个重要的趋势,就是使用尽可能具有表现力的插画设计,利用阴影和负空间来创造戏剧感和视觉影响力,就像Vogue 的御用设计师 Malika Favre 的插画作品那样。

有限的色彩,引人瞩目的色彩对比,光影之间的互相成就,大胆而有意义的细节。如果你稍微有意识地去看,会发现每天都有设计师在 Dribbble 上发布这样风格的作品。

整个2018年,Dribbble 反映出来设计趋势是什么?

比如 Ksenia Shokorova 的这幅插画就很好地呈现出夏天的炎热和慵懒的夏日气氛,以富有表现力的人物轮廓作为构图的中心,甲板和水面构成鲜明的对比,色彩不多但是令人印象深刻。

整个2018年,Dribbble 反映出来设计趋势是什么?

Joanna Lawniszak 的插画则使用强烈的光影,让一个简单的着名变得具有明显的舞台效果,相当大气。

整个2018年,Dribbble 反映出来设计趋势是什么?

Yoga Perdana 的这个LOGO设计作品利用的是负空间,让文字当中融入了一个非常清晰的猫的形象,并且还呈现出猫在文字之间穿插的效果。

整个2018年,Dribbble 反映出来设计趋势是什么?

这个名为 Mr.Travel 的LOGO设计作品来自设计师 Yuri Kartashov,他将男人的面部和山脉的形象结合到了一起。

整个2018年,Dribbble 反映出来设计趋势是什么?

Dmitry Stolz 的设计项目 Fetch My Meds 中使用了两个可爱的动物角色,微妙的动画和明确的对比使得两个角色显得活泼而有趣。

8. 3D 图形

3D 无疑是现在 Dribbble 上最热门的趋势。大家用3D建模来做各种各样的东西,无论是等轴测的插画还是游戏角色,还是以往大家会用PS来绘制的光影,现在一并使用 3D建模和渲染来实现了。

整个2018年,Dribbble 反映出来设计趋势是什么?

Ueno 这个引人入胜的动画效果就是在 3D 渲染的基础上实现的,有趣的元素构建成的场景让人爱不释手,而这居然是一个招聘广告?有意思。

整个2018年,Dribbble 反映出来设计趋势是什么?

Tubik Studio 的这个首图中的插画形象,同样是使用3D建模来实现的,这样的角色形象很容易让人联想到动漫和游戏,结合风格类似的CTA元素,可以极强地影响用户的注意力。

整个2018年,Dribbble 反映出来设计趋势是什么?

这是设计师 Mohamed Chahin 精心设计的等轴测插画,柔和的色调和模糊的光影让家的氛围得到了强化。

9. 关于 UI 界面的插画

随着精通插画的设计师越来越多,插画开始深入到设计的方方面面,包括在 Web 和 UI 界面当中的字体、图形甚至整个氛围和环境。由于注意力的竞争如此的激烈,以往原本只需要普通图片就能做到的事情,现在需要借助插画来做到。

整个2018年,Dribbble 反映出来设计趋势是什么?

在 Dropbox Design 的这篇创意相关的文章当中,包含有一些这样带有粗野主义风格的插画。也许你并不是那么青睐这种风格的插画,但是即便如此,你也不会绕过这幅插画只单纯浏览文字。

整个2018年,Dribbble 反映出来设计趋势是什么?

这是一幅关于医生和专业交互界面的插画,作者是设计师 Alexander Savic ,插画会将人迅速带入进医疗保健相关的领域。

整个2018年,Dribbble 反映出来设计趋势是什么?

这幅插画来自设计工作室 Fireart Studio,它暗示了约会 APP 背后的真实和潜藏的精彩,让人主动追求属于自己的爱情。

整个2018年,Dribbble 反映出来设计趋势是什么?

Dmitry Stolz 的插画则呈现了移动端APP 上的交互,做决策的关键时刻。

10. 多层次剪切效果插画

最后一个值得一体的趋势,则是类似剪纸一样的多层剪切视觉效果插画。这种设计效果让插画具备了丰富的层次,显得深沉而原创,带有更强的物理工艺质感和难以磨灭的印象。

整个2018年,Dribbble 反映出来设计趋势是什么?

Eddie Lobanovskiy 的插画就是使用的这样的效果,主题关于太空,这种多层剪切效果让太空显得更为深邃。

整个2018年,Dribbble 反映出来设计趋势是什么?

Michael Fugoso 的设计作品,他将这种插画定义为具有深度幻觉的平面数字插画。

如果这种插画风格和卷轴效果结合起来,就更加强大了,

整个2018年,Dribbble 反映出来设计趋势是什么?

Studio VØR的多层次剪切插画在交互中次第呈现,各个部分相互之间影响并关联着。

整个2018年,Dribbble 反映出来设计趋势是什么?

这是 Anano Miminoshvili 所创建的一个网页滚动交互的案例,随着用户不断滚动,不同的层级的元素次第运动,一个接这一个被激活。

结语

毫无疑问,Dribbble 本身正在逐步成熟,越来越多的设计作品中,开始融入更为明显的艺术特征,设计的层次和力量感比以往更强了。作为设计师发布各种小样、练习的Dribbble,本身也作为设计领域的试验田而存在,很多设计趋势在这个平台上酝酿,成熟,并且逐渐走向世界。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

温暖与生命力!2019年潘通年度流行色「活力珊瑚橙」新鲜出炉!

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

2019 年的潘通年度流行色终于发布了。这家专注于色彩研究和标准化的公司,针对过去一年甚至更长时间维度上的文化和色彩趋势进行广泛分析之后,选出了这款 Living Coral —— 「活力珊瑚橙」 作为2019年的潘通年度流行色。

在这个全球都处于动荡而不确定的时间点,潘通希望这样一个充满生命力,象征活力的色彩能够像一针强心剂,给每个人都注入能量。

对于这款珊瑚橙,潘通色彩研究中心副总裁 Laurie Pressman 是这样说的:「就像这种色彩所依附的连绵的珊瑚一样,我们期望这个颜色能够在接下来不断变幻的10年里面给人以向上的浮力和确信的力量。在技术疾速发展和全球动荡的背景之下,我们希望这种色彩能在全球文化上带来扭转,加速转变。」

如果你对于色彩的心理效应和历史有所了解,那么你会发现,活力珊瑚橙并不是一个带来变革和飞跃的色彩。在这个权威主义盛行的时代,它的存在目的更像是在给每个人的一种精神加持,提升确信感。活力珊瑚橙是一种曾经流行于上世纪50年代和60年代的色彩,你可以在当时的汽车、配饰、海报和时尚穿搭当中看到它的影子,在现在看来这就是一种传递复古的感觉的色调,它代表着那个简单、热情而单纯的年代,换句话说,它能够唤起「简单时代」的感觉,没有红蓝白三色(美国国旗的颜色)所营造出来的强烈的政治意味。

潘通色彩研究中心的执行董事 Leatrice Eiseman 在声明当中提到:「当我们透过自然和数字设备来透视我们的生活的时候,色彩是贯穿始终、保持平衡的镜头,而活力珊瑚橙更是这样的一种色彩。大众对于人与人之间的沟通与社交联系的期待越来越高,珊瑚橙这种色彩的人性化的特征可以让人更加振奋。」

在新闻发布会上,潘通官方表示:「在它光彩夺目又难以琢磨的色彩气质之下,仿佛带着海洋的呼吸感,珊瑚橙用仿佛泛着气泡的活力感冲击着我们的视觉和大脑。」

潘通每年所选取的流行色通常都有着一系列比较富有凝聚力的主题,而活力珊瑚橙本身和大自然有着非常紧密的联系,这总让人忍不住想起 2017 年所选取的年度色彩,草木绿。

「这种色彩很令人舒适!」Pressman说道:「越多东西推着我们前进,我们就越是想回归根本。周遭的一切都令人畏惧,所以我们希望有东西能够让我们感到安全、快乐,期待感受到舒适和温暖。」

色彩所带来的情绪影响并不只是停留在理论当中。活力珊瑚橙是一种非常实用的颜色,无论是在现实生活中,还是在虚拟的屏幕以内,都能帮我们弥合鸿沟,缩小差距。

在接受采访的时候,Pressman 提到了活力珊瑚橙的许多特性。在过去的几年当中,珊瑚橙越来越受欢迎。它整体上是处于橙色的色相当中,并没有偏向粉红,它温暖的质感和肤色相得益彰。在室内设计当中,珊瑚橙有着更强的功能性,可以和多种不同的色彩搭配,有着近乎中性色的强大兼容性。在移动端 UI 当中,珊瑚橙呈现出饱满的色感,足以让界面显得充盈而活力十足,在社交媒体上呈现出非常强大的传播性。

即使是在数字界面当中,活力珊瑚橙都隐约传递出和自然界之间的紧密联系。

▲设计师 Julien Blouet

今年9月份,以多彩配色的 iPhone XR系列产品当中,也有采用了近似活力珊瑚橙的配色,这无疑也是这一色彩流行的明证。在此之前,潘通公司已经推出过相似的色彩,不过苹果发布的新机当中包含这一色彩这件事情依然让潘通公司感到惊讶。

在采访过程中,Pressman 还盛赞了 Airbnb 这家公司,因为 Airbnb 早在 2014 年的时候就已经在进行品牌重设计的过程中融入了这一色彩。「可以说是非常有先见之明了」,Pressman 称赞道。

▲设计师 Peter Tarka

最后,附上年度活力珊瑚橙的相关参数:


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

15年图标设计经验,总结出1套专业流程和8个注意事项

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章不一样,今天我们的文章不会花费很长时间来单独介绍某一个图标的设计,而是设计任何一套图标应当遵循的基本流程,以及一定要注意的8个关键的注意事项,你可以将这些东西带入到一些现成的案例当中去验证。

这个注意事项清单,也可以被视作为给设计师所编写的图标设计指南,即使设计趋势发生变化,这些规则和经验依然适用。遵循这些规则和技巧,能够确保图标从设计到使用都可以更加无缝和顺畅。

我们并没有重新发明轮子,相反,我们会以这种方式来呈现我们的工作流程细节,希望它也能帮你有效地组织工作。

循序渐进地设计图标

像我们需要系统而大量地设计图标,设计流程是最重要的事情。正如你所看到的,绘制流程在图标绘制之前,就已经开始了。

  1. 了解你要创建的图标的含义。明白不同图标的使用场景,不同的图标分别代表着什么,了解哪些图标需要使用隐喻,哪些图标使用现实世界中真实的形象。
  2. 梳理出图标正确的隐喻,脑暴出可能的符号和形象。记住图标的含义和形象之间的关联,以最佳的形式呈现图标,直指本质。借助词典和单词集来获取图标相关的概念的关键词,同义词和定义。简化和抽象你的想法,你会找到一个抽象概念「翻译」出来的对象。
  3. 不要拘泥于现在当前的任务和状态,尽量进行彻底的调研,尽可能地搜集相关参考资料。可能有人已经为这一主题设计了很不错的图标版本,可以参考已有的设计,获取灵感。
  4. 确定图标的样式。图标应该是扁平的,线性的,Material Design,是用符号还是借助手绘来呈现。有的 UI界面有很清晰的要求,比如 iOS 平台和 Material Design,如果 UI 有非常清晰固定的设计风格,那么图标的设计需要尽量贴近。
  5. 按照选定的方式来呈现设计,看看它最终呈现是否正确。保持整体设计的一致性。
  6. 注意图标要矢量化,连基本的草图都应该是矢量化的。
  7. 在 UI 布局中测试图标的设计。

Icons8 的实战案例

按照上面的流程,能够绘制出不同样式足够优秀的图标合集。下面是我们在这样的流程下所设计出来的图标示例。

▲ Material, Outline: Science and Studies Icons

▲ Carbon Copy: Animals

▲ Nolan Icons: Aging

注意事项清单

如果你像我们一样每天设计图标的话,也会碰到各种各样的问题。其中最重要的是下面的注意事项清单,它们能够确保我们不同的人在不同的时期不同状态下,设计出来的图标能够协调到一个主题、一个系统当中。如果你也要设计图标的话,可以将下面的清单打印出来,贴在自己的桌子旁边作为参考。

1. 像素完美

让图标踩在每个像素点上,确保清晰不模糊。

2. 视觉重量

用斜视的方法来感知图标,看看成套的图标是否都具有相同的大小。斜视、调整、再看、再调整,直至均匀理想。为了保持总体视觉重量的一致性,我们会使用「完美的圆形和正方形」来和所有的新图标进行对比。

3. 几何图形

尽量使用简单坚实的几何形状来绘制所有必要的线条,它们会让你的图标显得更加牢固可靠,具有吸引力和说服力。

4. 清晰简洁

删除所有无法传达图标概念的细节,避免让图标显得沉重而复杂。

5. 足够的空间

确保图标内每个细节和元素都有足够的空间,不会显得过于拥挤或者空旷。

6. 对比度

在黑色和白色的背景上检查图标的全部细节,看看是否其中的每种颜色都是可见的,以及元素之间的对比是否足够。

7. 视觉统一

检查线条的粗细重量,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

8. 图层排序

确保图标中图层顺序清晰而规整。这是一种良好的习惯和专业的精神。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

2019年让用户爱不释手的8大UI设计趋势

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

什么?都已经开始讨论2019年的设计趋势了?我依稀还记得最后一次看见秋叶在窗前坠落的场景,仿佛就发生在昨天。


但2018年也是真的到了底。在2018年的最后一月,说说2018年的设计热点,谈谈2019年的设计趋势,再合适不过。因此我们选取了8个一定会在2019年当中发光发热的设计趋势!


这篇文章的要点包括:

  • 有哪些影响2019年UI设计趋势的元素?
  • 2019年7大UI设计趋势是什么?

我们认为这些UI趋势不单单会满足用户的审美需求,同时也会提供给用户极高的可用性。这些趋势的广泛结合会取悦用户并且推动你的产品走向成功。


有哪些影响2019年UI设计趋势的元素?


目前的科技生态圈对UI趋势有着持续的影响。回顾这个年头看看,2018年已经发生了什么?


设计第一主义的改变


产品设计中,设计第一主义已经在今年变成了次要因素。为何?设计应该改善人们的生活并且帮助实现商业目的。


在2019年中,设计趋势比以往任何时候都要符合以下要求,他们会优先考虑速度、精简的页面配合不对称的排版,最重要的是,移动端第一。主要要考虑到目前用户访问网站或者APP时,时下最主流设备。


圆边移动设备


目前大多数的移动设备都放弃了边框转为了圆边。这样的改变也深深地影响了界面。这个也会对使用使用锐边元素的设计师在移动端UI设计上造成挑战。


所以,不用多说,2018年的这些UI趋势也可能早2019年依然存在:


2019年UI趋势1:排版和讲故事

Image title

2019年中,围绕产品体验讲一个优秀故事的能力将会成为首要的趋势。


排版本身可以构建强大的视觉层次结构。UI是一个非常关键的元素,它在带来卓越的用户体验方面发挥着重要作用。


文本样式本身也是不够用的。文案正在成为优秀用户体验最重要元素之一。


虽然风格吸引了用户的注意力,但是叙述会让用户感知品牌,使品牌作为故事的一部分。反过来也让用户不会表面的浏览内容。


2019年UI趋势2:插图和动画图形                 

Image title

随着2019年的来临,微动画逐渐变得流行起来。它能够通过交互帮助用户区分屏幕上的元素。事件触发后,反馈承担起了重任,确保用户清楚预期的操作事实上发生了。


数字或手绘的自定义插图在2018年中发挥了巨大的作用。自由形式,不对齐设计和巨大的不对称性不仅帮助平台脱颖而出,而且还创造了一个友好和温馨的环境。反过来又为用户带来了更好的体验。


此外, 为了使这些页面脱颖而出,这次插图经常以复杂的动作呈现。


这样的动感更容易吸引用户注意力,并且可以一目了然地解释公司或品牌提供的内容。一个引人愉悦的插图可以为网站或移动App提供鲜明的个性,从而使其更加难忘。


2019年UI趋势3:色彩,渐变和重叠效果

Image title

一种可能在不久的将来变得更加受欢迎的技术,重叠效果包括颜色、文本和图像。重叠可以创建空间感和更结构化的界面。


由于现代显示器具有比以往更好的色彩再现水平,渐变色在2018年大幅回顾。明年可能会给我们带来大量色彩和渐变混合透明的材料。


我们可以在任何地方看到它们:插图、UI元素、文本、我们喜欢渐变,因为它们为平台增添了现实感和深度,是我们在现实生活中看到一切的方式。这可呢解释了为什么具有渐变的元素感觉更自然。


越来越多的人使用大胆的颜色,无论是组合还是单色。通过使用超大文本,设计师发现最好限制极端的色彩展示。这会减少用户使用次要元素的注意力,让他们专注于他们应该做的事情。


2019年UI趋势4:AI

Image title

在未来一年中,AI技术将继续朝着更完美的方向发展,人机交互会变得更为平滑和一致。到2020年,语音在搜索引擎查询的比重预期会达到50%。


聊天机器人和通信接口也趋于困难。伴随着人工智能和机器学习技术进步,聊天机器人变得更加聪明。因此,许多网站和APP已经开始使用语音交互来增强体验。


当我们在所有平台上说话的时候,机器人变得越发普遍,包括Google的自动提示,智能家居语音交互(比如Google Home或亚马逊的Alexa),虚拟助手(如Apple的Siri)以及帮助台的机器人等。


2019年UI趋势5:VR

Image title

虚拟现实在ui趋势中有着重要作用,并且这个地位短期内不会动摇。凭借它对用带来的影响,我们可以把它称为互联网体验。


VR可以用于医疗保健以治愈恐惧症或者用于教学以增强互动。因此,为了在2019年中真正增强UI效果,它看起来也是非常有前景的。


想知道UX研究中如何使用VR?看看这个有意思的文章。


2019年UI趋势6:AR

Image title

设计师需要跳出仅限屏幕内的界面来,考虑到物理交互。增强现实开创了UI设计的新纪元,开辟了一种全新的思维方式。


2019年当中,网页设计趋势将跳出固有模式。我们需要忘记固定在屏幕上的UI,相反,我们应该强调在现实环境中发生的交互。


谷歌和苹果已经推出了自己的AR开发平台,ARCore和AEKit,它们融合了物理世界和数字世界。


AR UI有不同实现方法:


参考某个对象,与现实世界物体产生羁绊和交互; 固定到屏幕空间,用户需要以特定的形式固定镜头; 参考真实世界,充分结合现实物理环境。


因此,我们必须仔细思考AR体验的场景和功能。


2019年UI趋势7:3D图像

Image title

目前大众市场对这项技术的需求很少,对网站来说也不常见。 尽管如此,专为平台呈现的3D元素也是今年UI趋势列表中的特色。


它接近尾声,因为它不仅生产成本很高,而且加载时间也更长。 没有人喜欢等待。



用户希望平台能够立即加载。 任何为用户旅程增加时间的元素都会让人感到沮丧。


但我们不必完全放弃3D元素。Fauz-3D技术让物体看起来是三维的,尽管在光线和阴影方面并不完全令人信服。


2019年UI趋势8:动态“原型

Image title

UI设计绝对不是产出一张张静态的设计稿,而应该是包含着设计思维,用户流程,交互链接的动态“原型”。


这其实不仅仅是意味着UI设计师的能力增长,也是产品得以快速实现落地的必要成长。


设计不是一个单独的工作,它和产品、开发甚至用户是存在着千丝万缕的关系。就拿和开发的关系来说,handoff design已经是一个火热的话题和趋势,设计和开发的协作,设计和产品的交流,都离不开一份“动态”的“设计稿原型”。它传达的信息至少包含(以摹客iDoc为例):


(1)智能标注:

Image title

  1. 间距标注
  2. 尺寸智能标注
  3. 百分比标注,兼容多屏幕分辨率
  4. 多选标注,告别点击
  5. 放大镜,查看微小间距

(2)智能切图

Image title

  1. 自动切图
  2. 自动生成不同高倍率
  3. 自由切换平台
  4. 下载全部切图

(3)绘制交互

Image title


  1. 设置交互动画
  2. 设置返回链接
  3. 自动跳转
  4. 克隆交互


伴随这一趋势,协作平台将会喷涌出现,比如ZeplineMockplus idoc,前者是更早的一个产品,后者是我2018年接触到的新平台,都在有力的提醒我作为一个UI设计师改要增长的能力和视野。同时,我的工作效率乃至整个团队的效率也会提升。



总结:2019年UI设计趋势


1、排版和讲故事


排版不仅是创建品牌形象的绝佳工具。将它与一个很棒的片段相结合,让用户能够沉浸到故事当中。


2、插图和动画图形


随着19年的临近,微动画越来越受欢迎了。它们通过交互帮助用户区分屏幕上的元素。


3、颜色,渐变和重叠效果


重叠效果包括颜色,文本或图像。 重叠可以创造空间感,从而创建更加结构化的界面。


4、AI


在未来一年中,AI技术将继续朝着更完美的方向发展,人机交互会变得更为平滑和一致。到2020年,语音在搜索引擎查询的比重预期会达到50%。


5、VR


虚拟现实在ui趋势中有着重要作用,并且这个地位短期内不会动摇。凭借它对用带来的影响,我们可以把它称为互联网体验。


6、AR


设计师需要跳出仅限屏幕内的界面来,考虑到物理交互。增强现实开创了UI设计的新纪元,开辟了一种全新的思维方式。


7、3D图像


目前大众市场对这项技术的需求很少,对网站来说也不常见。 尽管如此,专为平台呈现的3D元素也是今年UI趋势列表中的特色。


8、动态“原型”


从handoff design而来的交互设计稿原型图,包含自动标注和切图,交互原型演示,评论批注和全貌画板于一体,极大的促进和产品、开发的写作和交流。


总而言之,UX / UI设计师需要在工作中与创造力和创新为伴。 虽然我们无法避免一成不变的状态的渴望,但是紧跟热点并且充分利用起来至关重要。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


用户体验旅程图 | 概念&实操&模板

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

让产品(服务)团队了解用户使用过程中的看、想、听、做,让他们能够从用户角度去考虑产品、设计产品。

什么是用户体验旅程图?


概念&作用


从用户角度出发,以叙述故事的方式描述用户使用产品或接受服务的体验情况,以可视化图形的方式展示,从中发现用户在整个使用过程中的痛点和满意点,最后提炼出产品或服务中的优化点、设计的机会点。同时让产品(服务)团队了解用户使用过程中的看、想、听、做,让他们能够从用户角度去考虑产品、设计产品。这个过程的产出物即为用户体验旅程图。









由什么构成?


这里分为功能定义前和功能定义后;

定义前即为:准备规划做的功能、进入用研阶段时;

定义后:已经上线的功能、需要优化的功能。

Image title

如何做?


1、创建用户角色模型(用户画像)


既然旅程图是梳理用户使用产品上的体验问题,那么我们需要以用户的真实情况为基准,这样会使旅程图更真实。


这里可以通过前期的用户研究,比如:访谈记录、行为研究、调查问卷、意见反馈等方法,获得大量真实有效的用户数据。


然后对产品的主要目标用户进行分类,并为每个用户创建角色模型(包含基本信息、诉求、期望、痛点),每个角色将对应不同的用户体验地图。


Image title




2、开始制作旅程图


这里就以功能定义前为场景,因为用户画像和使用行为是单独知识体系,后面会单独产出一篇关于用户画像的,敬请期待哦!


(1)为了便大家理解,我在这里列举一个生活中都经历过的小栗子。



开始:起床

目标:到达公司


我们先回想一下今天早上起床的过程。把这段场景分成下面几个阶段:


一级行为:


Image title


起点和终点并不代表结束,要联想到相关的场景,比如:到到达公司后,还有没有有可能解决上班相关的问题?


Image title


(2)在真实做项目过程中,大家在这一步可能会写出不同颗粒度的故事,需要设计师或产品经理把控场景大小。这段场景可以再往下梳理一层颗粒度更小一点的场景,比如起床就可以再细分为:


二级行为:


Image title


剩下的场景模块都可以继续这样细化并归类。


Image title


这样我们的主线场景就有两个层级:一级行为和二级行为,场景从左至右形成一个时间线。

但是,真实的用户场景不会按照你所画的顺利进行,情况会变得复杂、多变(交互设计师要考虑到异常情况和特殊场景的发生),这个时候我们可以借助流程图的方式连接我们的场景:


Image title


(3)拆分场景

此时,我们需要在刚刚梳理的每个二级行为下面停留,继续细化二级行为,从中获取更多的信息。


体验设计就是需要不断地问“为什么”、不断发掘潜在需求。


参与人员会围绕这个行为场景写出很多细节来。我们可以按照以下几个维度对细节进行归类:


Image title


其中情绪曲线可以通过固定的问题获得,也可以通过用户想法、用户的痛点结合主观判断。

在这个过程中,先限制时间,让大家按照自己的想法写出来,每条思考写在一张卡片上,相互不干扰,然后每个人阐述自己的卡片内容,让参与者了解大致的信息


注意:要以完整的流程为中心,一定要广度优先,而非深度,比如起床这个故事里面,找衣服、穿衣服这类场景在这个阶段我们无须关注,不要过早的沉浸到细节中。


Image title





完成上述步骤后,你将得到一份重要的节点清单,下面需要对重要的节点进行分类,以便在绘制旅程图时更加的方便。比较常用的做法是将所有关键节点写在便利中并黏在墙上,然后将同类别的关键节点集中在一起,并为每个类别贴上分类标签。分类完成后,对核心的节点进行筛选,移除掉重复、没有价值的内容。



(4)接下来,我们可以根据问题点的数量来衡量每个节点的情绪水平了。一般可以用积极、平静、消极这三种情绪来表达用户的使用感受。这一步做完,我们一眼就可以看出痛点在哪个环节上了。



(5)针对痛点,讨论可行的解决方案

先根据自己的经验,对标竞品,设想一些解决方案,然后组织产品、设计、leader再进行一次脑暴(核心人员即可,人多会导致丧失方向),让大家一起进入旅程图,以用户的角度再走一遍流程。在这个过程中,如果发现旅程图中有偏差和遗漏的地方,大家就可以一起修改、补充、审核。



总结并通过可视化模板记录:






Image title


最后,结合体验地图行为的情绪曲线、设计的机会点,梳理优先级:


a.对情绪的最高触点,思考还有没有优化的空间,能否将它继续优化做到;

b.对情绪的触点,思考是否能将其他触点较高的地方,分担一部分功能(次要功能)到触点,来均衡体验情感;

c.可以对标竞品,看看别人是怎么解决问题的,寻找适合自己产品现阶段的解决办法。


补充:

大家发现没有?参与人员在写想法的时候,就是头脑风暴的过程,抓住机会,通过一些开放式、引导式的提问来刺激大家脑暴出更多的内容(有利于产品经理和交互设计师获取灵感)比如:

Image title





总结:







Image title


另外,功能或痛点的解决优先级可以通过四象限法则归类,与旅程图同时交付,

做到:用户、场景、行为、问题、解决办法、解决时间一目了然


Image title

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

上亿人使用的百度网盘是如何做品牌升级的?

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文章包括品牌理念、品牌识别、APP大改版、品牌延伸。

△ 点击查看完整视频

一、项目背景

百度网盘是百度提供的个人云存储服务,自2012年上线至今,通过强大的技术能力以及承担高额的带宽成本,为7亿用户提供文件存储、备份、分享、共享等服务,成为行业领先位置。

这6年里,我们从满足基础存储需求的一款工具,到现在越来越意识到高品质和情感化的体验对于用户的重要性。

因此,团队希望通过本次的品牌升级,能够从视觉识别、产品体验、线上线下推广等多维度来传递品牌核心价值,同时遵从极简克制的百度「高级感」设计理念,形成一套完整统一的设计语言,真正的做到像 slogan 所传递的:「让美好永远陪伴」。

二、品牌升级目标

本次品牌升级希望传递用户3个核心点:更有温度、更便捷、更年轻。

1. 为什么要「更有温度」?

网盘一直以来存储着用户的美好回忆,比如:每一次难忘旅途的照片,宝宝成长记录,家人团圆时的合影,激情工作时的陪伴。因此,它不仅仅是一款冰冷的工具,而是一个懂你的、有情感、有温度的生活助手。

2. 为什么要「更便捷」?

过去几年,网盘一直主打的品牌核心点是「安全」、「免费」、「大空间」,不可否认之前的品牌传递是成功的,因为通过这些核心点,在同行业的用户占有率达到80%以上。

但是,未来除了最基础的「安全」以外,还需要传递什么感受呢?我们深知产品体验还有很大的提升空间,比如:如何让产品更易用、存储更便捷、查找更方便、浏览更沉浸等等。因此,「便捷」是接下来品牌需要传达给用户的核心价值。

3. 为什么要「更年轻」?

通过数据分析,网盘的用户24岁左右占大多数,也就意味着我们的主流群体是年轻人。除此之外,保持品牌的年轻化,也是每一个公司都希望做到的。

因此,本次品牌升级,我们希望不管是从视觉层面,还是文案互动,以及运营手法,都更加年轻化及趣味性。

三、品牌理念渗透

品牌升级不是虚喊口号,而是应该通过各个设计触点的配合给用户传达融合、一致的感受和体验。因此,我们从以下几个场景进行渗透:品牌识别、APP设计、品牌延伸。

1. 品牌识别

在品牌识别渗透环节,涉及到以下几个方面进行优化设计:品牌色、品牌标识、品牌字体。

品牌色

品牌色是用户感知品牌最直观的方式,比如:想到可口可乐就想到红色,想到百事可乐就是蓝色,想零度可乐就是黑色。对,好的品牌色能够占领用户心智,从而产生联想,这就是品牌色的重要性。

那么百度网盘呢?网盘的品牌不是从0到1的小而美的创新设计,需要兼顾7亿用户量对品牌的已有认知,这是一个令人头疼的挑战。

因此在品牌色的选择上,考虑到较大改动带来的用户认知成本的增加,所以经过多轮尝试和讨论后,决定延续用户已有认知的「红蓝」配色,在此基础上,进行调整并渗透新品牌的理念。

同时,在品牌色上希望传递「更年轻」的品牌理念。我们大量收集体现「年轻」的场景进行多轮讨论筛选,提取色调,结合情绪板,最终提炼并定义了我们的品牌色。

品牌标识

在做品牌标识(LOGO)阶段,大家发散了很多想法,尝试了很多方案。

通过多维度思考以及利弊权衡,最后选择在延续原有 logo 特征上,体现新品牌理念——「更有温度」的感受。

那么,现实生活中什么场景,会给人「有温度的」感受呢?我们想到了拥抱、爱心、阳光、火焰等等。最终觉得「微笑」更符合我们所传递的感受,同时也能更好的跟原有 LOGO 特征进行结合。

以下是 LOGO 的设计思路,用颜色体现「年轻」,微笑体现「温度」。

LOGO的最终造型:

品牌字体

LOGO 确定后,还需要设计与之搭配的品牌文字,这个阶段最主要是找到跟品牌性格以及图形风格相契合的字体骨架。同时兼顾原有字体的认知,在此基础上进行微调。比如:统一字体的粗细,以及切角的角度,使整体视觉更加协调。

LOGO和字体组合的最终版本:

2. APP设计—NA端9.0全新升级

不可否认,传递品牌理念最直接的方式,就是在用户使用它时。因此,我们对产品 NA端进行9.0全新升级(这是自上线以来第一次大改版)。

品牌基因

在互联网产品越来越同质化的今天,做出有差异性和符合品牌调性的设计是我们面临的挑战。因此,在品牌基因方面,做了大量的尝试。

经过多轮讨论,我们选择以「积木」作为网盘的品牌基因。因为「积木」陪伴着我们成长,代表着我们的童年,给人温暖的感受,同时,不同几何形的积木看似单一,组合起来又有很多可能性,体现了年轻和趣味。

在图形设计(ICON)时,提取「积木」中的几何元素进行叠加处理,用色上更加鲜亮,突显年轻化,形成网盘自己的图形体系。

相比「尖锐」的直角,圆角给人柔和的视觉感受,同时经过多轮的尝试,最终确定圆角大小为8px。

同时在空白页上延续图形风格,能够更好的统一视觉语言,传递更加一致的品牌感。

动效上,采用了符合「积木」运动特征的物理属性。因此,运动节奏上利落的不拖泥带水。比如,积木受到一个力,由于摩擦力会快速停止,而并非很Q 的弹性动效。

下图中,「蓝球」代表目前网盘中元素的运动方式,「红球」代表了市面上常见的弹性运动方式。

下图,是将这种运动规则使用在产品界面中时:

同时底部 tab 在运动节奏上,也采用相同的运动规律,赋予产品年轻活力的视觉感受,同时又不会喧宾夺主过度抢戏。

下拉刷新,是增强品牌记忆的最好体现。本次提取 logo 基本元素,同时强调「微笑」,加深用户对品牌的印象。

功能设计

前面有提到,百度网盘保存着用户非常多美好回忆的照片,或许那些回忆,用户都已经忘记,但往往这些才是最大的惊喜和感动。

因此,9.0版本新增「故事」模块,让美好回忆与你不期而遇。通过技术对优质、精彩照片的筛选,生成故事卡片,推送给你,给你带来温暖。

为了节省用户时间,传递品牌「更便捷」的理念,本次改版我们优化「分类」模块,将「分类」外置于首页顶部,减少用户操作步长,轻松查找自己的文件。

同时在首页新增「最近」功能,方便用户便捷查找历史操作,而不是像以前,反复点击层层相套的文件夹去浏览与查找。

排版布局

文件列表是用户使用网盘最高频的路径,针对这个场景,我们遵循视觉服从功能,极简克制的百度「高级感」设计理念,通过视觉手段区分信息层级,让用户浏览时「更便捷」。

因此,本次对文件列表排版布局,从以下几个维度进行优化:大小、重量、间距。

大小

改版前,用户打开文件列表,首先看到的是满屏黄色的文件夹,而这些并不能帮助用户进行浏览或筛选,反而会造成视觉干扰。

因此,本次对文件图标大小,缩略图尺寸,以及标题信息大小,进行整体调整,从而提升浏览效率。

重量

对于文件列表,信息层级重要性依次为:名称>图标>时间,因此,本次优化了视觉重量对比。

通过视觉重量的处理(对标题字号加粗、颜色增强),让用户更加便捷的获取有效信息。

间距

以下是旧版安卓端和改版后对比,去除顶部蓝色双导航的同时,通过缩小文件图标,进而缩小列表间距。

同时,调研行业内有代表性产品的列表行间距,综合分析对比,最终确定列表行间距为「180px」,平衡体验的同时,让用户在首屏看到更多内容。

还对 NA端进行统一的栅格化布局,让页面富有统一的秩序感和韵律。让元素、模块、页面间距有规律可循。

栅格化布局落地全部界面:

以上,是品牌理念渗透到 APP 设计中,进行9.0大改版的相关设计,从品牌基因、功能设计到排版布局,统一的传递全新品牌理念。

3. 品牌延伸

线上线下的活动和物料设计,也是品牌和用户的触点,在设计的时候需要延续整体的品牌调性,传递出统一的品牌感。

总结

以上,是百度网盘本次品牌升级背后的原因,以及相关体验设计优化。从前期定义品牌核心理念(更有温度、更便捷、更年轻),到通过不同场景及接触点进行渗透(品牌识别、APP设计、品牌延伸),线上线下多维度的传达统一的品牌理念。所做的这一切,都是希望能为用户提供更好的服务。

本次品牌升级,是百度网盘所有同学努力的结果,我们深知还有很多体验需要提升,这次升级只是开始,会持续让用户感受到「让美好永远陪伴」。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

高手总结的15个技巧,让你轻松玩转数据可视化!

雪涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大数据时代,数据驱动决策。处理不好庞大、复杂的数据,其价值将大打折扣。

那如何缩短数据与用户的距离?让用户一眼抓到重点?让老板为你的汇报方案鼓掌?

本文通过连环15关,层层深入,传你数据匹配图形神功,让数据可视化更。

无论数据总量和复杂程度如何,数据间的关系大多可分为三类:比较/构成/分布&联系。

一、比较

基于分类/时间的数据对比,通常需用到比较型图表。用户通过图表轻松识别最大/最小值,查看当前和过去的数据变动情况。

常见场景:哪个地区的收件量最多?今年的收入和去年相比如何……

1. 条目少 – 柱状图

比较条目较少时,如5个地区收件量的对比,可选用柱状图表示。

△ 柱状图

2. 条目多 – 条形图

当条目较多,如大于12条,移动端上的柱状图会显得拥挤不堪,更适合用条形图。一般数据条目不超过30条,否则易带来视觉和记忆负担。

△ 条形图

3. 看趋势 – 折线图

当X轴为连续数值(如时间)且注重变化趋势时,则适用折线图。

△ 折线图

4. 扩大差异 – 南丁格尔玫瑰图

除柱状图外,有无更新颖的表现方式呢?那就属南丁格尔玫瑰图了。

△ 南丁格尔玫瑰图

由于扇形的半径和面积是平方的关系,南丁格尔玫瑰图会将数值之间的差异放大,适合对比大小相近的数值。它不适合对比差异较大的数值,因为数值过小的类目会难以观察。

此外,因为圆有周期性,玫瑰图也适于表示周期/时间概念,比如星期、月份。依然建议数据量不超过30条,超出可考虑条形图。

5. 双向 – 双向条形图

前面的例子都是单维度比较,当比较正反两类甚至更多维度的数据时,可尝试双向条形图,下图为各大区的重点地区的收派件量的对比。

△ 双向条形图

用颜色区分大区,空心/实心区分收件量和派件量,既能整体比较大区,又能详细对比地区的情况。

打怪升级,再加点难度。在双向图上再增加一个维度,如下表,比较5个地区的利润及相应的收入和成本。请先思考一下,再下滑看推荐图表。

△ 业务数据

△ 双向条形图(多维度)

通过图形一眼就能看出深圳区的利润低于广州区,即使它的收入高于广州区,但成本相对来说高于广州区。

6. 目标达成 – 子弹图

实际业务中,常要考察指标的达成情况,如收入达标情况及所处区间(优、良、差),如下表,你会怎么可视化呢?动手画一画吧!

△ 业务数据

△ 子弹图

子弹图,因为像子弹射后带出的轨道。相较于仪表盘,它能够在狭小的空间中表达丰富的数据信息,在信息传递上有更大的效能优势。

若还要比较4个季度的收入情况,只需用不同颜色区分。如下图,一眼便知第二季度表现较好,而第一季度则不佳。

△ 子弹图

7. 性能 – 雷达图

对于一些多维的性能数据,如综合评价,常用雷达图表示。指标得分接近圆心,说明处于较差状态,应分析改进;指标得分接近外边线,说明处于理想状态。

△ 雷达图

以上就是「比较」类的常用图表,可归纳如下。

此表并非一成不变的「铁表」,相互之间还会串联交叉,大家还需灵活应用。

二、构成

部分相较于整体,一个整体被分成几个部分。这类情况会用到构成型图表,如五大区的收件量占比、公司利润的来源构成等。

1. 单层 – 饼状图

第1关中,对比5个地区的收件量时用到了柱状图。若看占比情况,饼状图更合适。

△ 饼状图

如果变成17个地区,会怎样?

像不像彩色七星瓢虫?

所以饼图分类一般不超过9个,超过建议用条形图展示。

除饼图外,环形图(甜甜圈图)亦可表示占比,其差异是将饼图的中间区域挖空,在空心区域显示文本信息,比如标题,优势是其空间利用率更高。

△ 环形图

2. 分层 – 环形图、旭日图

对于管理层而言,需先把握大局和重点。比如大区负责人需一眼看到重点地区及重点分部的情况(如下图),如何展示?

△ 环形图

△ 旭日图

这个叫旭日图,逐层下钻看数据,大区的重点地区及相应分部的构成情况一目了然。

3. 累计趋势 – 堆叠面积图

接下来,看看数值构成随时间变化的案例:第一大区(包含四个重点地区)近四年收入构成的趋势要如何可视化?自己想一想,再下滑看推荐方案。

△ 业务数据

△ 堆叠面积图

推荐方案是堆叠面积图,可以展现分量(地区)对于总量(大区)的贡献,并显示总量(大区)的变化过程。需要说明的是,地区收入的起点并非从 y=0 开始,而是在下面的地区基础上逐层叠加,最后组成一个整体。

4. 累计比较 – 堆叠柱状图

如果将上图X轴的标签文字(即年份)和图例(即地区)互换(如下图A),用来看每个地区近四年的收入构成,用哪个图更合适?

△ 堆叠柱状图

是不是觉得都可以?那图中 X1 有何含义?堆叠面积图 A 方案和堆叠柱状图 B 方案都可以表现累加值。差别在于,堆叠面积图的 x 轴是连续数据(如时间),堆叠柱状图的 x 轴是分类数据。此案例中的 x 轴是非连续的分类数据,因此用 B 方案更适合。

5. 累计增减 – 瀑布图

若想表达两个数据点间数量的演变过程,可使用瀑布图。开始的一个值,在经过不断的加减后,得到一个值。瀑布图将这个过程图示化,常用来展现财务分析中的收支情况。

△ 瀑布图

以上就是「构成」类常用图表,可归纳如下。

三、分布&联系

通过分布&联系型图表能看到数据的分布情况,进而找到某些联系,如相关性、异常值和数据集群。

常见使用场景:客户的年龄段分布?单票成本与收件量的关系?

1. 两个变量 – 散点图

仍以业务为例,下图为全国网点的单票成本/收入分布情况。

△ 散点图

单单这样看,可能看不出什么,如果加两条平均线就不一样了。

加了平均线,就知道哪些网点高于平均线,哪些低于平均线。但网点那么多,总不能逐个点击查看是哪个大区的,给散点加上颜色后,就很有意义了。

通过此图,可以看出哪些大区单票利润较低,急需提升,比如广泛聚集于右下角的第四大区,单票收入低于平均线,单票成本却高于平均线。

2. 三个变量 – 气泡图

大家都知道,网点总利润除了和单票利润有关,还和体量(即收件量)有关,用散点的面积大小表示收件量,就变成了气泡图。

△ 气泡图

3. 结合地图 – 热力图

气泡图与地图结合可演变为热力图。通过热力图,能看到哪些网点收派件量较多,需进行资源调配。

△ 热力图

以上是 「分布&联系」类的常用图表,可归纳如下:

小结

当我们拿到数据后,先提炼关键信息,明确数据关系及主题,再选择合适的图表进行可视化。希望下图能给各位一些参考(结合可视化专家 Andrew Abela 的图表选择指南,进行了简化调整)。

数据可视化设计只要多练习、多总结,总有一天会得心应手。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

《龙猫》公布中国版海报,设计师黄海12年作品全回顾!

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

今年是宫崎骏电影《龙猫》上映的30周年,吉卜力工作室已经将电影原版胶片转换成了高清数码,进行了修复与重制,并将于12月14日在内地上映。

近日,龙猫中国版终极海报公布,由我们熟悉的著名设计师黄海设计:

小梅与小月在看似是稻田实则是龙猫毛茸茸的肚子上玩耍。

设计师黄海大家想必已经不再陌生,被称为「天才设计师」的他设计了包括《一代宗师》、《黄金时代》、《大鱼海棠》、《我不是药神》、《小偷家族》、《影》、《邪不压正》等电影海报,收获了外界的一致好评。

一、初出茅庐

黄海出身「广告界的黄埔军校」奥美,在这里他遇见了他的恩师——台湾著名的文案大师刘继武先生。

在奥美的经历为他打开了创意的大门,之后他加入了一家本土广告公司担任美术总监,2007年,一次偶然的机会接到姜文的电影《太阳照常升起》的海报设计任务。这是他第一次设计海报,却在戛纳电影节上一亮相就艳惊四座,从此声名鹊起。

△ 2007年《太阳照常升起》

在此之后,黄海受到大量知名导演青睐,包括陈凯歌、姜文、冯小刚、冯德伦、徐克、王家卫、陈可辛等,在此期间也设计了相当一部分的早期优秀电影海报,例如《让子弹飞》、《唐山大地震》、《太极》、《一代宗师》等等。

他的设计逐渐成熟,风格也十分多变,唯一不变的是让人惊叹的创意和构图。

△ 2008年《梅兰芳》

△ 2009年《花木兰》

△ 2009年《白银帝国》

△ 2010年《让子弹飞》

△ 2012年《白鹿原》

△ 2012年《太极》

△ 2013年《一代宗师》

△ 2013年《中国合伙人》

二、走进大众视野

时间来到2014年,一组《黄金时代》的电影海报,黄海从设计界走到了一般群众的视野中。

这组极具东方色彩和现代美学的海报在微博、微信上被疯狂转发,似乎就是以这为契机,所有人记住了这位天才设计大师的名字——黄海。

海报根据在不同上映国家的特点,制作的张张样式都不一样:

△ 中国大陆

△ 美国

△ 日本

△ 台湾

△ 韩国

△ 香港

相比于《黄金时代》,同为2014年的作品,《匆匆那年》和《黄飞鸿之英雄有梦》似乎就并不出名。

三、优秀作品井喷

2015年,有了之前《黄金时代》的出色表现,黄海更加引人瞩目,从这一年开始,他的优秀作品呈井喷式地出现在大众视野中。

△ 2015年《寻龙诀》

△ 2015年《山河故人》

△ 2015年《道士下山》

△ 2015年《念念》

△ 2015年《捉妖记》

2016年,国产电影《大鱼海棠》崛起,而黄海和插画师@sheep卍 共同合作为其设计的海报再次惊艳四座。

跌落水中的椿,和大鱼的一眼凝望,开启了这场奇幻的故事。2016年7月8日,赴你十二年之约。

△ 定档海报

当海洋与火焰相融,7月8日,我们终将重聚。

△ 终极海报

同年,中国中央电视台出品的一部三集文物修复类纪录片《我在故宫修文物》上映。

海报分别以6件国宝级珍贵文物为背景,分别是:元代「剔红水仙花纹图盘」、明代「边景昭 竹鹤图轴」、清代「黑色绸绣菊花双蝶图竹柄团扇」、清晚期「掐丝珐琅万寿无疆中碗」、明代「自在观音像」、宋代「汝窑天青釉弦纹三足樽」。

当然这一年还有喜剧之王周星驰的大爆电影《美人鱼》:

黄海更是在这一年操刀第53届金马奖海报,他以杨德昌《牯岭街少年杀人事件》为灵感,设计出男主角拿手电筒探照暗处的身影,除了向经典致敬,也带出「回看来时,照亮前行」的期许。

△ 2016年 第53届金马奖

四、作品赏析

时间推进到2018年,今年黄海更是收割了整年大半的优秀电影。而他的惊艳的设计风格也逐渐变得让大众看到海报的同时就能反应过来「这是黄海老师设计的吧」。

△ 2018年《我不是药神》

△ 2018年《江湖儿女》

△ 2018年《少年的你》

△ 2018年《犬之岛》

△ 2018年《小偷家族》

有人说,黄海把中国电影海报设计拉至了国际水平,他将艺术、灵魂和故事完美地结合在一起,他的魅力在于很多人仅仅因为他设计的海报而去看相关的电影。

如今黄海设计的电影海报作品越来越多,我们不妨开始期待,他的下一份作品会带来什么样的惊喜。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

优秀用户体验设计师的12个特质

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

要怎样才能算上一个优秀的设计师呢?优秀的设计师意味着要在大公司里工作?还是要打造了一个意义非凡的世界?抑或是因为写了本设计领域热销的著作?…

一个优秀的设计师可能会满足以上的所有条件,也可能一条都不符合,这其实都不重要。当你和优秀的设计师一起共事的时候,你就会从他们工作和为人处世的方式——独处方式、思维方式、设计方式——来感受优秀的设计师到底是什么样子的。其实他们都有自己独特的处事风格,并且各自有着不同的特长和个性。我有幸和一些非常棒的用户体验设计师和产品设计师一起共事过,他们有一长串无法数尽的本领。但我观察到一些他们共有的特质:

“成为一个优秀的设计师的秘诀,就是热爱设计。”—— Onur Cobanli

 

1、他们善于提问(They‘re interrogators)

“有效的提问带了来洞察力,洞察力滋养了好奇心,好奇心浇灌了智慧”

在设计师的眼里,世界是千变万化的。优秀的设计师经常会对事物进行质问。如果有什么是难以理解的,他们就会去问个明白。

 

2、他们不会“走直线”(They avoid the straight line)

“‘走直线’是走不了太远的”

探索者将“永远不去走直线”视作自己的信条。探索的过程中总会伴随着未知。探索者不知道他们不知道的事情有哪些,他们的目标也不是去寻找有哪些事他们不知道,而是去理解事情的本质是什么。在我看来,优秀的设计师会用一种开放的思维来探索他们的项目,因为他们自己也不确定他们最终会发现什么。

 

3、他们是“双重性格者”(They’re ambiverts)

“双重性格者(同时具有内向和外向性格的人),往往更有创意,因为他们更能适应新环境”

双重性格者能很好地应付团体活动和社交场合,当然他们也喜欢有独处的空间做点自己的事。优秀的设计师既需要与团队通力合作,也要喜欢独立地想点子。

 

4、他们是很棒的废话探测仪(They’re great bullshit detectors)

“开发一个内置的废话探测仪”——Ernest Hemingway

当你跟形形色色的人一起共事时,你必须学会把他人的废话扼杀在摇篮里。优秀的设计师知道什么样的人废话多,并在工作中杜绝他们说废话的机会。

 

5、他们在“累积变化”中工作(They work in ‘cumulative change’)

“聚沙成塔 ”(“Small changes eventually add up to huge results”)

在会计学里,“累积变化”是指所有差异的总和。革命性的变化往往是累积而来的。优秀的设计师会抓住让他们不爽的东西,并且试着去做改善。他们善于把眼光放远来观察事物的全貌,并且明白微小变化会引起巨大的转变。

 

6、他们善于自我批判(They have a strong disbelief system)

“不要一开始就对自己设计方案的抱有自信,开始的时候应该持有一种好奇和质疑的态度”——Simon Pan

这条黄金法则是Simon Pan在读了Marty Neumeier 的《创造力提升的46条天才法则》后提炼出来的。在这本书中, Marty 强调说人的意识形态对学习新知识是有害的,我们要抛开先入为主的观念,并思考为什么我们相信我们所做的事情。

 

7、他们不怕犯错(They like to be wrong)

“掌声固然动听,但禁得起批判更难能可贵””——Paul Arden

优秀的设计师并不会特别在意自己的观点能否成为解决方案,他们更想要的是完美的结果,自尊心被他们扔在一边。他们的终极目标是:在使用它的用户和创造它的公司眼中,这款产品是最棒的。

 

8、他们会有一点点“魔怔”(They’re slightly obsessive)

“用不寻常的眼光来观察寻常的事物”——Vico Magistretti

“我喜欢和那些有创造力(雄心壮志)并且’魔怔’ (专注)的人一起共事”——Nicole Kidman

设计师在解决问题时会变得非常专注。我见过一些优秀的设计师,他们对自己的项目抱有极大的热枕,并且被它们牢牢地吸引着。当事情不顺利的时候就会令他们相当的苦恼。

 

9、他们是善于合作的独行侠(They’re collaborative loners)

“成为一个独行侠吧,这样你就有时间去思考,去探索真理。保持神圣的好奇心,让自己的人生变得有意义。”——Albert Einstein

优秀的设计师既能自得其乐地独自关在小黑屋里工作,也可以和团队一起合作,达成他们想要的目标。

 

10、过程是一切的关键

“把你最爱的东西都干掉,从你的想法中走出来,投入到过程中去”——Chirryl-Lee Ryan

过程是一切的关键。我们要对过程报以信任。这个过程是带领设计师通向最终目标的引路牌。在这个错综复杂的世界中,过程就是设计的关键。

 

11、他们善于倾听和观察(They’re great listeners and watchers)

“要想成为与人交流的大师,首先要学会闭上嘴来倾听”——Rick Warren

人都有两个耳朵,两只眼睛和一张嘴。优秀的设计师会遵照这个比例来使用它们(即两分听,两分看,一分说)。大多数人倾听是为了做出回应,优秀设计师的倾听则是为了试图去理解人们的所思所想背后的本质。

 

12、他们富有同理心(They give a shit)

“即便是简单的关心也是值得敬重的”——Edward Albert

好的设计师潜意识里是富有同理心的,他们关心人本身,喜欢问“为什么”,同时他们关注人的技能和本质。

“与普世观点不同的是,设计师并不是艺术家。我们通过艺术的手段将我们的思维和工序可视化,但与艺术家不同的是,我们致力于解决客户的问题,而不是展示我们自己对世界的看法。”——Erik Spiekermann

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


用户角色模型 | 拒绝“我认为”的设计

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、什么是用户角色模型(用户画像)?


概念&作用


用户角色模型是真实用户的虚拟代表,通过一系列的真实数据分析,得出的目标用户模型。模型通过抽象来代表复杂的现象,好的模型强调结构的显著关系,弱化不太重要的细枝末节。我们要了解:用户与用户,用户与期望,用户与环境,以及用户与产品之间的关系并且将其视觉化


这里的视觉化可理解为:海量的数据标签(标签化、数据可视化)。比如我们要统计每个用户的行为特征,细分到人口基本属性、社会属性、生活习惯、消费行为等信息,抽象出各个具体的标签,赋予名字、照片、一些人口统计学要素、场景描述等,最终形成一个人物原型(personas)


创建用户角色模型的好处


· 与利益相关者、产品团队在研发中抛开个人喜好,聚集在用户动机和行为上,了解用户深层次动机与心理;

(抛开个人喜好:产品团队容易将自己的目标、动机、技巧代入产品设计中,这就是设计者心理模型)


· 避免设计陷阱,让产品设计更聚焦,防止走偏,避免把过多的心思花在其他边缘性功能上

(更聚焦、防止走偏:有人物模型为基准,团队就能清晰的对功能进行优先级排序,以核心功能、解决用户诉求的功能为主,可避免把注意力放在非核心且次要的功能点上。)


· 有助于为营销活动、组织架构、客户支持、战略规划及设计决策 提供有价值的信息。



由什么构成?


Image title


显性画像:用户群体的基本信息描述,如目标用户的年龄、性别、职业、地域分布、兴趣爱好等信息,一般通过客服人员线上交流、用户账号数据、常关注的内容做判断,间接获取数据;


隐性画像:用户群体深层次的特征描述,如使用产品的目的、解决什么问题、偏好、诉求、场景、愿景、使用频率等。主要以问卷、访谈、意见反馈等方式直接获得数据。


说到底,用户画像就是先对逐个有代表性的用户进行特征描述,然后对共性特征进行提炼、分类,最终将用户标签化、数据可视化。

Image title


二、用户画像构建的基本流程


用户角色模型不是拿来既用、用完即丢的,而是建立在系统的调研分析、真实的数据统计之上得出的有力结论。


这里要考虑用户画像的优先级,画像一般会存在多个(多个用户),通常一个用户只能有一个,不能为拥有三个以上画像的用户设计产品,容易产生需求冲突,要分清楚哪些是核心用户(既目标用户、产品的支撑者),哪些是非核心用户,所以我们的设计目标就是维护、培养、促成核心用户。


同时要以适合产品团队和项目需求为出发点,用户画像不是一成不变的,而是根据现实情况同步更新,现在我们进行四步画像构成法: 


Image title


1、确定分析维度


用户角色模型是针对特定产品或特定功能的,所以人物角色的分类一般是根据用户的目标(用户需求)、行为和观点(行为倾向)进行。


举例:

目标?什么原因促使你使用该产品?解决你什么问题?

观点?产品中最喜欢的功能?为什么喜欢?是否达到了你的预期?

行为?你最近一次使用产品做了什么?用了多久?


下面以2个维度做参考:

Image title


2、基础数据收集


数据是有力证据,是构建用户画像的核心依据,在基础数据收集方面,可以先列举出构建用户画像所需要的基础数据。


具体的思路如下:

Image title

上面列举的数据纬度相对比较多,在构建用户画像过程中可根据需求进行筛选。


这些数据有三个来源:相关文献资料和研究报告、产品数据后台、问卷调研和用户访谈,可以按照以下维度区分:

Image title

(这里涉及到用户研究中重要的环节:用户访谈、数据收集,将归纳为单独的知识点于下篇文章分享,期待有你~)


3、分析建模

通过以上收集方式并成功采集后,下面开始对不同的角色进行分类(通常采集多个用户做参考,如单个用户可直接将其标签化,然后套入完整模型中)


(1)先确定好产品属性,按照用户角色进行分类,比如外卖APP有:商家、消费者、骑手 三种角色,图例:

Image title


(2)然后将角色内的用户身上观察到的一些显著的行为列出不同的几组行为变量,例如:对产品的积极性、热情度、学习能力、熟练程度、消费观等


(3)将访谈对象和行为变量对应起来

这里就以电商产品为例,将用户个性(行为变量)做成一个区间轴,再把访谈对象放到区间轴上面对应起来,不需要那么,标出相对位置即可


注意:行为变量有两种情况

· 一种是连续性,比如使用频率的描述是:经常到从不

· 另一种则是非连续性,比如使用的平台:移动端、PC端


对这两种情况,大家要视情况而定,图例:


Image title


(4)找出重要的行为模式

把对象映射完后,寻找在变量轴上的对象群。如果一组对象聚集在6~8个不同的变量上,这很可能代表一种显著地行为模式,而这个模式是构角色模型的基础,图例:


Image title



三、画像呈现

找出行为模式后,画像呈现即从显性画像、隐性画像、场景和需求等方面,给用户打标签,并且增加一点描述性语言(描述人物行为和痛点,而不是描述解决方案),图例:

Image title


四、总结


(1)确定分析维度:当前产品处于什么阶段?需要什么信息?

(2)基础数据收集:对目标用户进行访谈,收集相关数据

(3)分析行为模式:将访谈对象和行为变量对应、找出重要的行为模式

(4)整理并呈现画像:描述特征和行为,创建人物故事


聊到这里可能有人会问:


Q:用户模型做出来会不会有人看?它是不是设计者虚构出来的套路?

A:用户角色模型是设计者通过用户访谈和观察得出来的真实用户行为,是有真实数据为依据的,所以不进行大量的用户调研,不为用户建模,不去创建用户模型,只知道意淫需求,说着“我认为该怎么怎么做”,都是一本正经地耍流氓。用户研究、用户模型是我们做好产品的基础和风向标。


Q:用户角色模型到底什么时候开始做?

A:先确定目标用户 → 对目标用户进行访谈 → 访谈后再建立用于模型

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档