首页

B端产品 — 浅谈Atlas设计思路

资深UI设计者

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

今天分享一款运维相关的B端产品,主要阐述自身的设计思路及产品的优化过程。

B端产品功能聚焦、讲究效能,对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角,以体验及效率为先,我们需要协调全局一致性,遵循产品链路,在视觉上减少对于用户的负担和干扰,避免打断用户的使用流程,确保流畅、优质的用户体验。

在产品优化上,我们在每个版本迭代后,会对用户进行访谈及收集意见反馈,建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处,这样的好处是可以让用户帮助你优化产品。

在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式,对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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

看太多网上的灵感创意素材,也是一种设计时代病?

资深UI设计者

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

互联网让全世界都无线互联,大家可以无视距离随时浏览世界另外一头的设计师所上传的设计作品。无论是 Dribbble、Behance、Pinterest 还是国内的各大社交媒体,想浏览别人作品获取灵感,几乎是0成本的事情。那么这样做对于做设计、激发灵感进行创造,真的有好处吗?它所引发的抄袭的问题,其实是最现实可见的,对此,昨天所发布的文章《如何界定借鉴和抄袭?看这7位设计大咖怎么说!》里,7位来自世界各地的设计师,已经对此发表了看法,而今天的文章里,99U 邀请了三位顶尖的创意人,阐述他们如何看待这种设计师中的「时代病」。

不断上网浏览别人的作品这种「灵感时代病」对于做设计激发创意而言,到底有哪些利弊?在的设计辩论中,Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 对无休止的灵感素材的视觉进行了权衡分析。

插画师 Nadine Kolodziey

过于关注在线设计灵感类素材,会让设计思路趋于千篇一律,扼杀创意。这就是为什么我们必须明智地管理我们的个人信息流。——插画师 Nadine Kolodziey

我们每时每刻都在上网,这意味着我们将会不断地接触到各种各样的视觉刺激。

如果你总是在公交车上或休息时关注别人的设计作品,那么你就会不自觉地把它融入到自己的作品中。很快你就会意识到:「糟了,我刚刚做了一些看起来和其他人完全一样的东西。」你会发现,你在不断地复制和重复别人的东西,尽管可能一开始是下意识的,但最终你会成为潮流的一部分。你忽略了你个人独特的视角,别人的作品开始影响你的判断和直觉。

而属于你自己的那部分最独特的东西,才是最有力道的。

我完全理解为什么人们想成为潮流的一部分。客户可能想要一些入时的东西——在特定的圈子里以特定的方式行事,这样做是有所帮助的。但最终这种做法所带来的同质化,对双方的发展都会有所制约。插画师在他们的作品中没有个性,所有的客户都在购买类似的风格——这意味着他们的品牌缺乏独特性。

如果你想获得灵感,看其他的创意作品并不是最好的选择。

看看其他的设计作品固然重要,这可以让你紧跟行业发展步伐,但是要适度。如果你想获得灵感,看其他的创意作品并不是最好的选择。当我在网上关注其他插画家的作品时,我个人很难受到启发。我已经使用 Instagram 两年半了。起初我总是看其他插画家的作品,这是我的本职工作,我热爱插画。但后来我发现,这阻碍了我的创作潜力。

我开始注意到我的配色方案与其他人的相似。我注意到,看其他的作品降低了自己尝试新事物所需的勇气。当我看到另一位插画家的作品时,我不可能洞悉他的创作潜力。当我在模仿他人的时候,我不可能有属于自己的独特创造力。

但是这个问题并非是无解的。解决之道就在于有选择地关注。看同事的作品和看一般的图片是有区别的。我对线上的灵感素材很感兴趣,但是我更多地将这些素材视作为一个个「小贴士」,因此我注重于管理我的社交媒体所关注的账号。我不再关注 Instagram 上的其他插画家,而是关注那些在审美上吸引人的内容。例如,我将关注那些收集不同寻常的石头的人,或者为摆放得精美的和风食物拍照的人。

我特别喜欢「I’m Google」这个账号,它不是按主题而是按视觉来排列图片。当我看到这样的图片时,尤其是当我开始着手准备新项目的时候,它们会立即在我的脑海中激发出新的概念和全新的思路。这些资源成为我的灵感来源:当我滚动鼠标时,我将看到来自外太空的岩石图像,它的形状将启发我如何安排构图。

创意总监 Thomas Kronbichler

线上灵感素材固然可以鼓励国际交流和对话,但问题出现在这些图像在传播的时候脱离了相关语境。——Thomas Kronbichler Mut工作室的创始人 创意总监

在 Mut 工作室,我们是当之无愧的互联网拥簇,我们从不害怕灵感素材过载这种问题。我们是阿尔卑斯山脉中部一个叫做海蒂·兰德小镇上的一个小工作室,互联网不仅为我们提供了来自世界各地令人叹服的灵感,而且提供了一个展示自己作品的平台,这在10年前是不可想象的。

正是因为图片可以在网上广泛地传播,我们才能让欧洲和美国的用户看到我们的作品。由于有了在线订阅和社交媒体,平面设计社区现才有了如今繁荣的模样。当然,这也有负面影响,很多人说如今平面设计在审美上变得太相似了。但积极的一面是,现在有更多的平面设计作品涌现出来。任何地方的人都可以进入这个行业而不再受到地域的限制,平面设计行业变得更具包容性。例如,欧洲各地的小镇上都会有人在尝试更疯狂的创作,我们能透过网络在不同的地方跟进观察,支持彼此。丰富的网络灵感图片的流通,最终有利于平面设计作为一种艺术形式而广泛存在。

我并不是受到某张特定的图片启发,而是在听设计师讲述设计思路的过程中获益良多。

问题是对此互联网并没有过多关注。一些博客和自媒体上并没有关于图片来源的解释。为朋友设计的项目和为大公司做的项目都在同一个空间中流通,这很有趣,但同时也弱化了应有的差异化和环境。

作品背后的故事,以及设计过程中各种问题的解决过程,才是真正重要的内容。我并不会受到某张特定图片的启发,而是在听设计师讲述设计思路的过程中获益良多。了解设计师的独特理念,则更有可能启发我,我对设计师处理客户关系的部分也很感兴趣。当然,这一切是不能用一张简单的图像来进行概括的。

我已经不再浏览 Tumblr 和 Pinterest,因为我最感兴趣的点,是了解一个问题是如何解决的。最终,我在设计师会议上发言的视频实录中获得了最多的灵感。听设计师们讲述作品诞生的过程是最令人振奋的。我从一个人如何构建一个项目,以及如何实现它的过程中学到了很多。我喜欢听他们谈论客户关系,讲述他们遇到的困难以及如何克服它们。确切地说,更能鼓舞人心的是设计态度和思维方式。

在阿尔卑斯山的工作室中足不出户,我就可以看 Michael 所有的视频。

例如,就在上周,我狂看了所有 Michael Bierut 在线演讲的视频。我喜欢他展示作品的方式,喜欢他大方地和别人分享成果,我钦佩的是他的工作态度。在阿尔卑斯山的工作室中足不出户,我就可以看遍迈克尔所有的演讲视频,这简直太棒了。

艺术总监 Polina Joffe

对正在发生的事情有所知觉是非常重要的,而上网获取灵感会简化这个过程。——Polina Joffe,艺术总监和平面设计师

如果你知道别人在做什么,你可以选择参与其中,也可以选择拒绝。而形成自己的观点并做出明智决策的前提是你足够了解。

我一直在关注其他人在网上会做什么,我也会在博客和社交媒体上上传一些实用的干货。当涉及到具体的项目时,我会做具体的项目研究。我们会从互联网上获得大量的灵感,这使得研究阶段变得非常简单和。我经常会想起设计师们以前在社交媒体上使用过的概念和想法,然后我会把这些想法和我自己的想法进行重新转化,组合并且更新,这样它们就可以运用在我的设计大纲中了。

浏览在线灵感素材,然后它们会形成属于我自己的一个巨大的视觉词典,里面有我脑海中所有的概念和方法,每当我开始一项新的任务时,我都可以沉浸其中。

我们经常谈论来自内心的创造力,但我不确信我是否真的要相信这一点。万物皆有源头。

我最近为泰特伦敦美术馆的教育团队做了一个项目。这个项目是针对年轻人的。首先,如果你的目标受众是年轻人,了解年轻人都在做什么是很重要的事情了,因为这些信息很有参考价值。你需要运用观众能够理解的视觉语言。在项目的研究阶段,我看了其他设计师是如何处理和学习这些属于年轻人的理念的。最初我想用笔记本和活页夹做点什么。然后我想起了我在网上看到的那些用活页夹或记事本纸做的项目,然后我回去重新又看了一遍,看了其他人如何处理类似的主题,由此激发了我的新想法。

我们经常谈论来自内心的创造力,但我不确信我是否真的要相信这一点。万物皆有源头。我认为创造力通常是学习前人如何混搭各种想法,然后自己进行特定的调整组合,二次创造。

诚然,视觉交流的发展是一部复制、更新、转移的历史。但重复别人已经做了太多遍的东西,并使用类似的元素来直接窃取它们是有危险的。当你在做研究获取灵感时,你必须通过多种方式参考海量的资源。如果我们能妥善地使用现有的大量图像,就能鼓励创新,跟上时代发展的步伐。

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

作品粗糙不耐看?用实战案例教你快速提升作品质感!

资深UI设计者

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

质感是什么?如何让画面拥有更高端的质感?本文由质感的原理出发,深入分析质感表现所需要的要素,并通过实例来讲解如何在作品中表现高端质感。

很多同学在设计完成后,总是会发现页面很单薄,导致整体看起来很粗糙、不耐看。究其原因,大多数是因为页面缺乏质感。

质感,对于设计作品来说,是一个非常重要的视觉元素。它能够提升作品的层次,让整个作品更高端、更有品质。

什么是质感?

质感,基本释义为所表现的物体呈现出的物质真实感和细腻的品质感。这是一种视觉的综合感受,会触动你的某种本能的综合感官,让你感觉非常舒服、非常爽。

我找了几张比较富有质感的图片,大家可以感受一下这种感觉。

观察完这些图片后,你发现有什么共同点了吗?我们可以试着来分析一下。

首先,物体本身的型是好看舒服的,并且细节足够精致。

其次,在光的影响下,物体的表面呈现出细腻的光泽变化,以及通透而舒服的阴影,展现了丰富的层级关系。正是光的作用,让这些视觉元素得以表达,让我们没有触摸便能感知到这种质感。

我们再来看一些优秀的拟物作品。大家对照一下,是否都遵循相同的要素。

观察这些优秀的拟物作品,为什么会觉得有质感呢?首先图标很精致,它的形具有一定的美感。但是这不足以让它富有质感,关键是它也符合了上面所说的几个质感要素。

最后,我们可以总结一下,质感产生的要素:

  • 整体光感:符合视觉原理的整体光感。
  • 细腻的渐变:通过色彩渐变所模拟出的真实的质感和丰富的层次感,以及柔和舒服、符合光感的投影。
  • 细节/纹理:精致的细节/纹理,让画面足够精美和耐看。

所以除了作品本身足够精美以外,整个作品的光感需要和谐统一。每个元素表现的色彩变化规律(渐变色)、投影大小和投影间的相互影响,都需要与光感严谨的统一。

这就要求你在绘制所有元素时,需要去假定一个统一的光源,这样才能让物体拥有更真实的质感。

我们已经了解了质感产生的原理,下面就开始实际案例。每一个步骤我都会讲解思考的过程和原因,方便大家理解。

案例解析

1. 整体背景和主体框架绘制

建立画布(1200 x 900)。用矩形工具绘制背景和主体框架(1100 x 700),图层样式为渐变叠加,光线方向统一。

渐变是为了模拟背景的质感和在光线下的变化,两层光线方向需要统一。背景颜色稍浅且饱和度低,符合远近的视觉规律。

2. 绘制投影和主体背景

复制矩形作为投影层,颜色调整为黑色,转为智能对象后,加入高斯模糊效果。调整矩形图层的模糊度和透明度,移到适当位置。具体参数对照图中。投影的位置根据假定光源位置而定,使其符合视觉原理(详见光线分析图)。

绘制主体深色背景(1070 x 670),添加渐变叠加模式,渐变方向与前面保持一致。渐变的颜色对于质感非常重要,恰当且高级的渐变色,能够在本质上提升画面质感。而渐变方向则需要根据假定光源进行判定。

为什么要这么绘制渐变与投影的位置呢?我绘制了一张光线分析图,大家可以从图中看出假定光源的位置,以此来确定渐变的方向以及投影的位置。

只有整体光感的统一,整个画面才能表现出强烈的质感。大家在绘制这一步时,需要用心体会假定光感的这个过程。

3. 将人物融入背景,提升发丝层次和质感

放入人物图片,图层模式改为正片叠底。调整图层透明度,添加蒙版使人物下半部分渐隐,与背景融合。

复制人物层,取消图层模式和透明度。用选择颜色命令提取发丝高光,添加蒙版抹去不需要的高光,图层模式改为变亮模式,调整透明度使其融合进人物。

为什么要做这一步呢?单纯的人物在画面中显得太平了,所以需要丰富细节、增加层次。

4. 主体字体和投影绘制

输入主体文字,图层模式调整为渐变叠加,根据光源调整颜色渐变。案例中的英文字体为「Monotype Corsiva Regular」。这一步需要反复的尝试,大家可以换一些字体尝试一下。

复制一层作为投影,文本颜色改为黑色,图层样式设置为正片叠底,转智能对象后模糊对象,调整图层的透明度和大小,放在字体后面。字体的立体感依靠的仍然是统一的光源,需要想象字体在假定光源下的阴影关系。

投影能够模拟真实感,需要若有若无的感觉,让文字悬浮在图层上面,丰富画面层次。

5. 主体文字细节刻画

根据字体的结构,用形状工具绘制出字体的立体关系。每一个形状图层绘制后需要两层蒙版,一层为了限制字体范围,一层为渐变蒙版。让充满立体感的文字悬浮于画面中央,提升视觉中心的细节品质。

6. 穿插细文与投影绘制

输入细文,并复制一层作为阴影。不过因为字体较小,距离拉远后投影肯定是看不清细节的,所以已经模糊的若有若无,但还是需要有的。

表现文字穿插关系,让「is an」悬浮于「L」上,并留下近距离投影。让「attitude」穿过「e」字,遮挡部分文字。丰富的穿插和相互投影,进一步增加主体文字的细节和层次,让画面细节丰富且更加耐看。

7. 绘制辅助图形,增强画面流动感

为了丰富画面细节,增强画面流动感,可以适当加一些飘零的辅助元素。

绘制时需要注意的是,你需要明确整体视觉中心与运动的方向。辅助图形沿着整体画面,水平中心向右运动,你可以想象图形散开后的画面,并反复调整元素的合理位置。

如果没有一定的规律,所有图形就不像一个整体,就会看起来很乱。大家可以根据这点来判断辅助元素是否需要进一步调整。

8. 收尾工作,大功告成

最后,根据页面需要,搭配上合适的元素,让画面更完整。

需要注意的一个细节是,由于所处的位置不同,这些元素在光照中呈现的颜色也会出现深浅变化,所以左边的元素较浅,而右边的元素会深一些。

怎么样,是不是看起来并不难?

希望大家可以抽空认真地跟着教程去尝试一遍。只要你能够理解每个步骤的目的,耐心地绘制每一个细节,相信你也能够做出这种非常高端的质感。

如果你能在制作时,用心思考和体会整个过程。就能在以后的作品中举一反三,让这个技能成为你自己的技能了。

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

交互设计定律-大白话解析席克定律

资深UI设计者

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

席克定律也是交互设计中非常重要的一部分


在视觉设计中也起到很重要的作用、会使用户体验更佳~


今天我们共同了解一下交互七大定律之——席克定律


...


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

 

UI设计-筛选功能选择类型的总结

资深UI设计者

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

筛选是资源聚合类APP中不可缺少的功能,可帮用户快速、精准地找到需要内容信息,根据资源分类形式的不同有多种筛选类型,并且不同的筛选类型还可以进行自由组合,让复杂的内容信息更容易被筛选出来。


目录

1. 横向tab式筛选

2. 标签筛选

3. 下拉筛选

4. 底部筛选

5. 抽屉式筛选


1. 横向tab式筛选

这是最常见的筛选样式,属于一级筛选。通常出现在导航栏或者是导航栏目的下方,根据分类层级的多少有4种展现形式。

一个层级

  • 分类2~5个:所有类目都可以直接在tab栏目上展示出来,用户可快速地在各个分类之间进行切换;

  • 分类大于5个:所有类目以相同的间距进行横向排布,引入横滑操作,方便用户浏览被隐藏的分类信息;有些产品也会在栏目右侧增加下拉操作,点击后下拉展示所有的分类,用户可对所有分类进行直观的浏览;




两个层级分类

  • Tab 栏目上只展示推荐分类或者用户自己选择的分类

当内容分类有两个层级且分类比较多的时候,产品会根据用户的喜好推荐几种分类在tab上进行展示;右侧有筛选操作,点击后在一个页面里展示所有的分类。用户可以在这个页面自主选择增减展示在tab上的分类,并且可以调整展示的顺序。

交互细节

  • 用户在不同的类目间进行切换的时候,筛选内容在当前页面刷新展示;

  • 不同的tab分类可以通过横滑进行切换;

  • 位于内容信息的上方,对下方的列表内容进行控制;

  • 当触发筛选条件时,筛选栏目直接定位到导航栏下方。



2. 标签筛选

是一种辅助筛选样式,通常位于某一分类标题下方,或者跟tab筛选和下拉筛选搭配使用,有4种表现形式

① 内容分类标签,充当内容入口。产品设定的内容分类,分类层级较高,且内容之间无交集,当触发操作的时候,会跳转页面进行内容展示。


② 大分类下的子筛选条件,分类层级比较低,当用户触发操作时,内容在当前页面进行展示。


③ 筛选页面,多维度的筛选条件以列表的形式进行排布,标签是单一维度下的多种分类,可横滑操作,这种方式可以帮助用户快速进行多维度的内容筛选。筛选的结果直接展示在筛选条件下方,最常出现在视频类APP内做电影、电视筛选;马蜂窝游记中也使用了这种分类形式。


3.下拉筛选

通常是在一个大的分类下做具体选择的时候使用,这种筛选样式可以承载1~3级分类层级。

单一层级

分类以列表的形式展示在页面中,当分类字段少且分类较多的时候也可以排2~3列进行展示。

 

两个层级

有三种排布方式

  • ①直接以栏目标题加列表内容的形式排列。适用于两个层级分类都较少,或需要用户进行操作(比较输入框、滑块)的场景使用。

  • ②左侧为一级分类信息展示区,右侧为二级分类信息展示区,可以通过左侧的一级分类控制右侧的二级分类。适用于两个层级分类都比较多的情况使用。

  • ③上面为tab式的一级分类,下面是二级分类内容的展示。适用于一级分类较少,二级分类较多的场景使用。



三个层级

一级分类为tab形式展示在最上面,二三级为左右排布形式。


交互细节

  • 放在内容信息的上面,对下方内容进行控制;

  • 当触发筛选条件时,筛选栏目直接定位在导航栏下方;

  • 有2~3种信息层级的筛选,结果通常取得是不同信息之间的交集,所以需要在筛选中向用户展示筛选结果数量,帮助用户判断是否调整筛选条件 ;如图左

  • 我们也可以选择在筛选结果页展示筛选标签,用户可以在当前页面删除部分标签,以查看更多的内容信息;如下图

备注:下拉筛选通常是多维度组合在一个栏目上展示,通常应用在电商、外卖等内容分类层级比较多,且层级内的分类也比较多的场景里


4. 底部筛选

某一具体内容需要通过多个筛选维度辅助筛选时使用,比如XX-XX的火车票展示列表、马蜂窝的地图酒店筛选。这种筛选通常能承载1~2级的筛选层级,每种层级下的分类目都不能过多,是一种比较简单轻便的筛选过程

单一筛选层级

① 与下拉筛选筛选一样都是以列表的形式展示在筛选内容

 

两个筛选层级

① 直接以栏目标题加列表内容的形式排列。

② 左侧为一级分类信息展示区,右侧为二级分类信息展示区

交互细节

处于页面的底部导航栏的位置

当用户出发操作的时候,内容从下往上弹出展示。


5. 抽屉式筛选

电商平台应用较多的分类形式,通常是有两个分类层级,一、二级的分类类目都比较多,默认情况下,如果分类特别多时可以只展示第一层级信息,用展开收起辅助用户浏览二级类目信息。

交互细节

  • 因为筛选的分类比较多,且通过展开收起会将已选择的内容遮挡上,所以我们需要以一种方式将已筛选的条件展示出来,方便用户及时调整。eg.马蜂窝将所有用户选择的内容都放置在最前面,而京东选择在栏目上方展示出来。

  • 显示有多少个符合筛选条件的内容,帮助用户决策筛选条件是否合理。

总结

本文主要讲述了5种内容筛选种类:tab筛选、标签筛选、下拉筛选、底部筛选和抽屉式筛选,选择何种筛选类型跟内容分类层级和分类数量相关,所以设计之前要先了解产品的分类及数量,有助于选择更适合用户使用的筛选样式。

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

 

灵感枯竭怎么办?来看滴滴设计总监的方法!

资深UI设计者

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

程峰,滴滴出行高级设计总监,具备互联网和广告行业工作双重经验,同时拥有用户体验思维跟创意思维的他,对互联网设计和创意设计都有着自己的独到见解。

如今互联网设计圈,方法论大行其道,很多设计师为了走捷径过分依赖方法论,但他一直保持着初心,不骄不躁,他认为:方法可以被总结创造,但设计功夫与思维是更可贵的东西,功夫+思维>方法论。

本次访谈,程峰分享了自己的观点,包括设计师如何融合创意和用户体验,在遭遇灵感枯竭的时候如何理性的找灵感等干货内容。不仅如此,他还偷偷告诉湖湖他在招聘设计人才时最看重的特质。

△ 程峰,滴滴出行高级设计总监

滴滴出行高级设计总监;曾就职于搜狐、百度、Ogilvyone、Cheil鹏泰等知名互联网公司及 Digital Agency;资深创意人、设计师,获奖众多,对创意、设计有深入的了解。

蓝湖:

介绍一下你自己,另外,可以跟大家详细讲讲您的工作成长经历吗?

程峰:

Hello,大家好,我是程峰。

我毕业后的第一份工作在是一家正版音乐公司担任 GUI设计师,当时正版音乐行业的市场土壤还没有形成,所以公司没能发展下去,一年后,公司成为了行业「先烈」,我也只能选择离开,那是我第一次接触 UI设计。

在05年的时候,产品用户体验设计在国内开始萌芽,我出于对这个行业的喜欢和好奇,加入搜狐从事体验设计的工作,07年的时候,加入百度做交互/UI,在这个阶段,体验设计思维方式深深扎根在我的脑海。

后来,因为当时国内的用户体验设计还不够成熟,同时出于对广告视觉表达有极大的兴趣,在互联网用户体验行业呆了几年之后,我投身广告行业,将本土、4A Digital、媒介型公司都体验了一把,我在这个阶段形成了创意思维思考方式。

体验设计思维跟创意思维,对我来说都有非常大的价值,可以让我更灵活面对不同的任务。这两种思维方式的区别在于:一个是解决产品体验问题;一个是解决沟通问题。我认为现在的设计师/创意者需要同时具备这两种思维。

几年之后,我又回到了互联网,来到了滴滴。

总体上我的经历跟大部分设计师朋友一样,其中不同的可能是我接触过的领域比较多,在音乐、游戏、搜索引擎、交通、广告等行业都有过职业经历,我个人也比较喜欢跨界。

蓝湖:

您同时拥有互联网公司(甲方)及广告公司(乙方)的工作背景,甲乙方最大的区别是什么?这种经历对您在工作中分析、解决问题会有什么帮助和优势?关于这种交叉背景带来的优势,您可否深入和我们分享一下?

程峰:

设计师在一般的互联网公司工作跟乙方公司工作相比还是有区别的。

在乙方,由于接触到的行业领域比较多,所以适合产出跨领域的通用方法论,思考方式更加横向,更重视规律,从而能够解决不同行业的共性化、模块化问题,但也有可能因信息不够及时对等,跟进不够持续,可能导致对问题的理解片面,无法深入。

而在互联网公司,设计是服务于单一企业产品和业务的,比较单一,但更专注,会对具体行业的具体问题理解更加深入,具备持续性,更重视对变化的即时响应,但同时也容易陷入视角局限,导致脱离规律,无法全局思考。

对我个人来说,甲乙方的双重经历使我更加灵活,看待问题具备了更多视角,更容易保持客观,可以快速切入找到符合规律的问题本质,同时还可以深入并持续性地解决。

蓝湖:

创意&设计是服务于品牌和产品的,您是否可以举一个实例来详细讲讲,好的创意&设计是如何服务于产品和品牌的?

程峰:

以滴滴为例,首先,滴滴CDX 很重视不同专业之间的打通与整合,聚沙成塔、汇点成线,这对于创意&设计产生好的效果尤为重要。

2017年,我们曾经在 CDX 内部构建了一个需求关联池,把产品、品牌、运营三块设计需求主动整合,并关联思考,跨专业团队协作,输出了司机端App 5.0升级+司机故事+司机教育等相关项目设计,提升了司机师傅们对平台的认同感,最终达成了1+1+1>3的效果。

设计师要具备敏锐的全局观和主动性,任何一个体系组织都不可能做到彻底扁平化,信息只要在流通,多少会出现一定程度的不对等和信息失真,各职能都不可能对所有信息细节彻底掌握到位,大多数时候需要主动接触,主动思考,以建立项目间的共性联系,而不是坐等被告知,不能过度理想主义。

△ 滴滴「司机故事」创意设计

△ 滴滴「司机故事」创意设计

 

△ 滴滴「司机端」5.0配色标准

△ 滴滴「司机端」5.0启动页面

△ 滴滴「司机端」5.0导航设计

△ 滴滴「司机端」测试环节

蓝湖:

创意和用户体验是设计师必须思考深入的两个点,要更好地融合创意和用户体验,设计师应该怎么做?举一个例子?

程峰:

这两种思维方式虽然一个偏产品,一个偏传播,但最终都会回归到一个点上,也就是以用户为中心,站在用户的角度思考,基于这个点衍生出来,站在产品层面叫做痛点,站在创意层面叫做洞察。

举个通俗的例子:一个人早上很难起床,需要借助外力才能被叫醒,这是痛点;一个人早上很难起床,但如果第二天早上有重要的事情要赶飞机,他按时起床的可能性就会变大,这是洞察。

再举个例子:小朋友容易把衣服弄脏,妈妈洗起来很累。用某品牌洗衣液,针对小朋友衣服常见污渍进行洗涤,省时省力,这是基于用户妈妈的痛点想出的产品解决方案。小朋友容易把衣服弄脏,但妈妈总是会在第一时间,像变魔术般把干净如初的衣服放在他的床边,这是基于妈妈勤劳,母爱的洞察表达。

痛点与洞察交融在一起,可以使设计师在思考的时候更周全,在进行产品体验设计思考的时候更具备情感引导性,在进行创意思考的时候不至于忽略功能性。

蓝湖:

设计类工作需要创造力的支撑,您是否可以跟我们分享一下,如何科学、系统地提高自己的创造力?

程峰:

不得不说,创造力很大程度上是天生的,可以理解为直觉。但洞察力是创造力的前提,是创造力被激发的基础,洞察力是可以被后天锻炼的。我个人并没有总结过科学系统的方法,但我相信一话:「观察和经验和谐地应用到生活上就是智慧。」

如果一定要说方法的话,就是把自我提升需求转换为习惯,养成针对性定期阅读并定期总结的习惯。这里的关键词是:定期、针对性。说得再直白点,就是多看多想并持续下去,任何事情的通用诀窍都是持之以恒。

提到这点,想多说几句,近几年看到了太多设计师过度重视方法,期望通过方法论找到解决问题的捷径,我认为这是浮躁的。对于创意&设计,我个人并不否定方法论的价值,但设计本质上还是功夫活,思维的跨越也是从量变到质变积累的过程。在这个阶段,我更想跟大家说的是:功夫+思维>方法论。

尤其是希望很多年轻设计师,多下点苦功,多思考,不要把希望都寄托在方法论上。方法可以被总结创造,但设计功夫与思维是更可贵的东西,是设计师真正的能力壁垒。

蓝湖:

在滴滴拥有众多产品,设计师持续提出服务于产品和品牌的好创意和设计似乎并不容易,在设计师们遇到瓶颈时,您会给他们什么建议?在灵感枯竭的情况下,您有什么快速找灵感的好方法吗?

程峰:

滴滴虽然产品众多,但好在都是在解决出行问题,所以很多产品之间是具备共性的。

作为设计师,不该局限于自己的产品,应该横向多看,找到不同产品之间的关联,多加以借鉴,找到可持续的复用性的解决方案,这是避免陷入到困境的好办法。

在灵感枯竭的瓶颈期,设计师应该明确一点:任何灵感都来源于对事物、信息的重新组合,当把不同的元素组合应用在不同场景中的时候,会有意想不到的收获。

脑洞是不能随意大开的,我认为,找灵感、开脑洞需要两个前提:第一是持续关注,日常积累,只有一定量的持续积累才能让大脑里的数据库足够大,才能确保可以在需要的时候,第一时间任意调取信息并进行重组。第二是逻辑性的结构化思考,可以确保将信息进行有条理、有效、有价值的组合。

蓝湖:

面试的时候,您会比较关注候选人的哪些特质?是否具备优秀的创造力,可以通过面试得出结论吗?您有什么能在短暂的面试时间内找到更适合的人选的秘诀吗?

程峰:

坦白讲,我认为在面试的有限时间空间环境下,很难做到全方位的考察,我个人也无法做到,这也是为什么会有多次面试的原因。

但是关于面试设计师,我还是有一些心得的。首先,设计师的专业能力是根本,除此之外,最重要的是心理成熟度的考察。就设计师的发展来看,很多时候遇到的问题都不是技术问题,大多是心理问题。创造力也同样重要,虽然个人是否具备创造力可以在沟通中发现一些,但最好的办法还是设置笔试题来考察。

除此之外,恒心、雄心、好奇心,分别体现了一个人达成目标的能力,自我提升的可能性,以及对专业探索的热情,优秀的设计师,这三个特质缺一不可。

蓝湖:

在提拔设计人员成为设计管理者时,您会重点考察候选人的哪些方面?

程峰:

如果将设计团队比喻成一支球队的话,我对团队内设计管理者的要求是从明星球员变成主教练。

最简单的考察标准:

  • 专业必须要过关,这是基础条件;
  • 要具备让其他设计师变得更好的能力,要带动团队专业能力整体提升;
  • 个人的牺牲精神,要把心态调节为利他思维,懂得赋能别人让自己更好,无论是对团队内还是对外,这点都尤为重要。

蓝湖:

滴滴CDX 内部是如何分工协作的?设计有时会是一个比较主观的,容易出现分歧的工作内容,如果团队内部的意见出现分歧,您是如何做决策的?

程峰:

CDX 专业分为两侧:体验设计+创意设计。既解决产品的体验设计问题,同时也关注业务运营效率及品牌创意设计问题。

我想目前的分工是阶段性的,未来的趋势应该是设计师职能更加融合,最终合并成只有「设计」这个职能。

在面对专业分歧的时候,最的解决办法依然是沟通。事实上大部分的分歧都是因为目标不一致导致的,所以在遇到分歧时,要保持让产品、品牌更好的端正、开放的心态,就会被更有道理的观点说服。

△ 滴滴「CDX」部门成员合照

蓝湖:

您作为设计管理者,对于提升产品设计效率,有什么经验分享给大家吗?

程峰:

首先,推进设计师成为更「复合」型的人才,设计细分专业之间的融合,能够降低理解成本。

其次,要继续推进产品组件化的建设和组件使用率。

最后,针对性使用设计工具,比如使用蓝湖完成自动标注和切图,通过工具规范标准化流程,避免无效沟通和重复劳动。

这些都是提升设计效率的办法。

蓝湖:

对于相对年轻的设计师,您有怎样的职业发展建议?

程峰:

保持初心,永远记得你为什么踏上设计这一行,并且时刻具备长远规划。

坚信设计的价值,任何职能都不可能解决全世界的问题,专注设计能解决的领域,设计自然更有价值。

保持思考,不仅是对专业的思考,更是对业务的思考,甚至生活和世界的思考。

我也是这样要求自己的,希望对各位也有帮助。


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

 

浅析插画设计中的风格和例子

资深UI设计者

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

什么是插图呢?或者艺术中插画的定义是什么?插图的样式有哪些?将在本文揭晓!


Image title



写在前面


什么是插画呢?或者艺术中插画的定义是什么?插画的样式有哪些?


插画是指艺术家将一段文字,甚至是社会意义翻译成一幅图画。


插画是用来创造情感或传达信息的。它在风格上很有表现力,不需要注意。插画用于书籍,杂志,广告,漫画书,漫画,时装设计,故事板和视频游戏。没有单一的方法来说明,有很多的说明风格。




插画风格


虽然有许多不同的插图风格,但这些可以分为以下几组:


Image title



文字插画


文字插画风格以与非小说类书籍相似的方式描绘现实。这幅画描绘了一个可信的场景,即使使用幻想或戏剧。我们来举一些文字说明的例子:


Image title


创造一个摄影图像


艺术家以照片为素材,以细腻的细节创造出逼真的复制品。


在现实主义摄影中,艺术品常常被误认为是照片。绘画、透视和色彩的选择对这种艺术形式至关重要。艺术家经常使用喷枪,或手画与丙烯酸或油达到最终的结果。


展示历史或文化的插画


Image title


这种类型的插画用于描述历史或文化事件。通常被一种文化用来描述场景或环境,这种形式的插画也可以用来描述情绪或增加戏剧感,甚至在摄影的时代。


虽然有时用来美化或贬低文化或人物,这些插图是现实的,足以被视为文字图像。



超现实主义



这种形式的插画试图抹去艺术和现实之间的界限,被认为是对摄影现实主义的一种进步。


有时,一些额外的功能被添加到一个代表或艺术家可能与单色铅笔工作,以创建一个社交信息。然而,我们的目标是创造一个尽可能接近现实的形象。这种形式的插画试图抹去艺术和现实之间的界限,被认为是对摄影现实主义的一种进步。


概念插图


Image title


概念插画是隐喻性的,以思想或意象取代了现实主义。虽然这部作品可能包含现实的元素,但其目的是传达情绪、隐喻和主观性。这种形式的插画可以与小说相比,在任何地方。我们来举几个例子:



图像顺序


Image title


按顺序排列的图像讲述一个故事,可以用于卡通、漫画小说,甚至是电影场景的规划。风格可能有所不同,从快速素描,以喷枪的细节微调图纸。根据信息的不同,一幅图像可以使用清新干净的颜色,也可以使用墨水、锯齿状的线条和混乱的布局来描述政治的混乱事务。



信息图形


Image title


这些是知识的图形表示。它们通常用于帮助理解复杂的信息。 


虽然它们向观众展示了他们正在看的内容,但这通常以包含其他见解的方式表示。有些可能看起来像文字插画。



抽象或扭曲的设计


Image title


一种表现形式的说明,从现实中分离出来,从想象中显现出来。因为它是如此主观,两个抽象的艺术品看起来会非常不同。



手绘数字图纸或插画


Image title


在这种类型的插画中,艺术家在一个数字画板上作画,允许光影之间的平滑过渡。艺术家可以使用图像层来创建复杂的背景和添加精细的细节。许多这样的图像使用栅格(或点)格式,限制了它们在失去质量之前可以放大到的大小。



矢量图形和插画


Image title


利用矢量图形,用数学方程进行设计。由于矢量图不像徒手数字绘图那样使用笔画,图像不像徒手设计那样平滑。然而,它们可以在不损失质量的情况下被炸毁。这些图像有清晰的形状和轮廓,非常受欢迎的网络插画。




儿童插画


Image title


儿童插画讲述一个故事,或给予一个故事,甚至一个虚构的存在的视觉表现。插图的风格取决于孩子的年龄。有些可能是复杂和现实的,而另一些可能是天真的。许多儿童插画色彩丰富,包含许多动作或活动。人物通常是明亮的,丰富多彩的和友好的。



社区书籍和图形小说插画


Image title


漫画书或超级英雄通常会让角色参与到行动中。样式通常很复杂,从线条图到喷绘图像都有。然而,漫画通常是漫画中最常用的风格之一。


漫画图片通常以小组形式出现,并经常涉及到对话框或叙事。有些词可能与动作结合在一起,比如POW!面板的大小以及它们出现的频率有助于设定故事的节奏。


书籍封面和出版物


Image title


在许多旧书中,例如那些侧重于地理或自然历史的书,插图都是手工设计的,然后再版。然而,现在,书籍插画被设计成许多不同的方式,然后印刷。


插画家经常被用来设计书籍的封面,以便使他们在书店中脱颖而出。封面常常暗示书中的内容,并给人以幽默、严肃、文化或运动的印象。


书籍插画从卡通风格的图画到历史或文化形象。虽然“不要以貌取人”这句话经常被重复,但它实际上是能卖书的封面,并能帮助书吸引正确的读者。


标志或品牌设计


Image title


logo是一种非常特殊的插画风格。通常他们的目标是提供有关产品的信息,使用颜色、字体或图像。流行的和容易辨认的标志包括耐克勾或与麦金塔相关的苹果。标识通常很简单,但却能抓住人们对产品的注意力,将其定义为属于某个特定品牌。


通常,这个品牌与想象中的品质有关,比如速度、力量或创造力,而商标有助于唤起这种情感信息。有时,企业不仅仅使用一个标志来辅助品牌建设。


许多公司使用吉祥物或员工形象来传达信息。这有助于超越鞋子这样的产品,让它在顾客心中有更深的含义。



发展你的插画风格的技巧


Image title


使用互联网,我们经常被介绍到插画在网上新闻文章,我们可以下载的音乐,漫画书,广告,甚至电子邮件。这向我们展示了广泛的样式,这是一件好事,因为它创建了广泛的示例供我们借鉴。


Image title


然而,如果你经常被许多高质量的插画轰炸,你如何发展自己的风格?这里有一些建议:



了解基本原则


Image title


虽然可以通过实践来学习插画,但这往往意味着要模仿其他已经形成自己风格的插画家的风格。释放你自己的创造潜力是非常重要的,这样你才能建立和成长,发展你自己的才能和分享你自己的信息。


Image title


没有复制,你可能会问“什么是插画师?”“正规的教育将教会你插画的基本原则、动机和技巧,这样你就可以用这些积木来创造你自己的设计。”


除了向那些已经在这个领域内的人学习,你还会学到一些哲学,这些哲学将使你能够加入其中,在你这样做的时候表达你自己的风格。



探索新的插画风格


Image title



如如果你觉得自己陷入了风格的窠臼,重复做了很长时间的工作,你可能想学习一些新的插画风格或技巧,进一步发展自己的作品。


Image title


然而,请记住,没有理由强迫自己进入不舒服的空间。如果你觉得停滞不前,或者不喜欢你正在尝试的工作,请记住,没有一个艺术家能够做所有的事情,如果有些事情感觉不太好,准备好继续前进。



尝试新媒体


Image title


如果你因为你的钢笔画而出名,试试丙烯酸树脂怎么样?转换你使用的媒介可能会给你的工作带来一个新的维度,专注于一个新的氛围,颜色或闪光。如果您已经使用多种介质,您可以尝试纹理、蚀刻、模板甚至金属。


Image title


您可以将您的格式从小型绘图更改为大型画布,或者从大型绘画更改为漫画书大小的图像。尽管一开始你的结果可能并不出众,但探索新的媒介会让你走出舒适区,走出你的风格窠臼。你的实验是值得的。


做真实的自己


Image title


当定义你的插画风格时,不要围绕当前市场上销售的东西来设计它。你的第一个委托是一个巨大的成就,从艺术中赚钱是值得的。


然而,在市场上分享你自己的风格,这样你才能发展自己的艺术身份。随着市场的不断变化,试图模仿或模仿当前的趋势会让你落后一步。


Image title


通过发展你自己的风格,你将不断地在你自己的技术上工作,改进和发展他们,而不是保持一个二流版本的插画家你钦佩。发展你自己的风格意味着分享你自己的意思,把你自己的想象带到前台。


没有这些,你就不会有创造性的能量来帮助你定义你的工作和保持你的动力。没有这些,你可能会失去你对插画的热爱。



最后说一下对插画风格的思考


有许多不同的插画风格或技术。有些是重复的。然而,理解不同的风格和它们所使用的技术使您能够了解每种不同设计背后的原则,使您能够探索和扩展您的插图实践。

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

如何让用户对你的设计印象深刻

资深UI设计者

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

相比于典型的字、句型结构和图像,不同寻常的字、句型结构以及图像会更容易被人们记住。正因为如此,我们在日常工作中才会经常接到类似以下的需求:将新/重要功能的入口,或者运营活动的入口做特殊化处理,增加趣味性来让用户加强印象。


这种现象被称作为梵雷斯托夫效应(相对于普通事件或物体,要记得独特、有特色的事件或物体可能性会大增)。梵雷斯托夫效应有两个触发条件:背景不同以及经验不同。背景不同是指一个刺激物与周围的刺激物不同,比如在一串字母中突然出现了一个数字,那个数字就会让人印象深刻;

经验不同则是指一个刺激物与记忆中的经验不同,比如一些经常被我们误读的成语,因为与平时的经验相悖,所以看到正确解释的时候印象特别深刻。

我们在了解了这两个触发条件之后,就可以利用它们来触发梵雷斯托夫效应,从而帮助我们做出令用户印象深刻的设计。下面就结合实际案例来看看如何利用它们。


前面说过,背景不同是指一个刺激物与周围的刺激物不同。具体到界面中,我们可以理解为在一堆相同类型的元素/模块中,对其中需要突出的做特殊化处理。


案例1 功能入口

京东金融底部导航中的“信用”以及保险页面中金刚区的“1元购”,都采用了与同类型元素不同的视觉样式。前者采用了色块+动效,后者采用了3D视角,分别让它们在底部导航和金刚区中“脱颖而出”,引起用户的关注。


案例2 列表内元素

爱奇艺的首页推荐中,其中一个视频内容的封面是采用动图的形式,在其他静态封面的衬托下,就显得格外醒目。飞猪的首页推荐中,则是把专题栏目的信息部分(彩色底白字)设计得与其他商品(白底黑字)差异较大,来吸引用户关注点击。


案例3 模块之间

美团外卖的个人中心将一些常用功能至于一个单独的模块中,并且将其中的图标设计成与其他模块内的图标所不同的样式(黄色填充),如此即突出了常用功能模块。另一边爱奇艺的个人中心,“会员服务”与“我的泡泡”则是直接从下面的宫格式布局中脱离出来,并且将各自的一些功能外置,布局交互完全不同于下面的其他模块,以达到突出这两个模块的目的。

以上三个就是典型的“背景不同”触发梵雷斯托夫效应,从而让用户印象深刻的案例。不难发现,对于“背景不同”,已经应用的比较广泛,并且大家也较为熟知了,接下来看看“经验不同”。


经验不同需要颠覆过去的认知,我们可以理解为在一些已经被大家所熟知的视觉/交互中,对其进行“改革创新”。


案例1 虎扑评论点赞

虎扑中的评论点赞不同于我们看到的其他产品,它采用的是一个灯泡ICON来表达该评论“亮了”,更贴合用户对有趣评论赞赏认同的真实场景。与众不同的方式也加强了用户的印象,提升了用户的黏度。


案例2 哔哩哔哩打赏

哔哩哔哩中的打赏采用了“马里奥踩蘑菇”游戏的形式,不同的砖块代表不同的打赏数额,选择完数额,滑动马里奥顶一下砖块就完成了打赏的整个过程。相比于普通的宫格式菜单选择,是不是有意思多了呢?


案例3 微信读书推荐

微信读书的书城中有一个“摇一摇”的功能,摇动一下手机或者点击一下“摇一摇”ICON,就会随机推荐一本书给你。每一次摇动背后的不确定性就像抢红包一样,满足了用户的猎奇心理,提升了体验的趣味性。相比于普通的推荐版块,不仅能让用户印象深刻,更会让他们对此爱不释手。

其实这些“经验不同”的案例也不完完全全是创新,比如摇一摇之前就是微信中的一个社交功能。大家可以将平时看到的有意思的设计记录下来,并思考一下可以复用在哪些地方,说不定下次功能更新就能用上了哦~


在利用“背景不同”时,需要注意避免出现处处都强调的情况。每个元素/模块都突出了,也就失去了重点,如下图。

而“经验不同”需要注意的是,避免为了创新而创新,让“惊喜”变成“惊吓”。如下图,

“清音”作为一个标签指示,显然与我们平时所看到的那些标签样式大不相同,足以让我们印象深刻。但是,在知道它是一个标签之前,我曾误以为它是一个按钮。在触击无反馈并且右滑屏幕发现后面还有“浊音”之后,我才知道原来这是一个标签……这样的“经验不同”只会造成“负面”的印象深刻。


相对于普通的事物,特殊化的事物更容易让人印象深刻,我们称这为梵雷斯托夫效应。触发梵雷斯托夫效应有两个条件:背景不同经验不同,我们可以利用这两个条件来做出令用户印象深刻的设计。


“背景不同”:对需要突出的元素/模块做特殊化处理,在同类型元素/模块中脱颖而出。需要注意的是,避免到处都强调,从而失去强调的意义。

“经验不同”:对过去所熟悉的视觉/交互进行“创新”,从其他不同类型的产品中复用、移植过来。需要注意的是,避免让“惊喜”变成“惊吓”。

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

如何设计节日闪屏?来看腾讯设计师的实战思路!

资深UI设计者

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

情感化设计已经不是一个新概念,唐纳德·诺曼在《情感化设计》一书中,清晰地阐述了情感化设计的重要地位与作用。现阶段,同类型的产品在功能、服务、内容上日益趋同,差异越来越小,想让产品触及用户的内心,除了功能满足需求之外,也需要进行情感化运营。

微云在不断完善基础功能的同时,还基于用户行为,增加了许多情感化的体验,比如往年今日、人脸相册等。在情感化运营上,微云在2018年开始了较为完整的节日闪屏设计,希望向用户传达节日的祝福,拉近产品与用户的距离。

什么是节日闪屏?

节日闪屏是指在特定的节日进行情感化设计,传递品牌关怀的闪屏。优秀的节日闪屏,在内容上不仅能够触达用户的记忆点,也能够与品牌相融合,这样既拉近了用户与产品的距离,也强化了品牌的认知和记忆。

确定设计目标

在开始设计之前,我们期望节日闪屏能够达到以下两个目标:

  • 传达节日祝福唤起用户回忆
  • 体现微云品牌调性

不同的节日有不同的文化背景和风俗习惯,节日祝福可以结合最典型的特征,这样更有利于唤起用户回忆,后文会结合案例进行分析。然而,品牌调性是贯穿所有节日的,在设计之初,我们明确微云的品牌调性,这样更有利于品牌的传达。

1. 品牌调性研究

Alan Cooper在《About face 4》中提到,在传达品牌调性时,可以用一组形容词来描述产品及体验,这些词可以组成词云,用来指导视觉设计。如何创建这组词云呢?Allan Cooper 提供了四个方法:从品牌大纲提炼关键词、分析现有产品的界面和服务、分析竞品的界面和服务、收集用户反馈。

结合微云的特征,我们从现有产品的界面和用户反馈两个角度进行分析,提炼符合微云调性的词云。

2. 分析现有产品界面

微云的平台较多,包括WEB端、PC端、移动端、小程序等,其中WEB端和移动端的用户最多,就从这两个端入手,分析产品界面的品牌特征。从结构布局和色彩比例上,可以归纳两端的共同点:结构清晰、留白较多、简约干净。

3. 分析用户反馈

微云用户在职业分布上,白领用户占最大。结合使用场景分析,用户反馈最多的词是:轻量、方便、下载快速。

4. 提炼微云品牌词云

结合产品界面「结构清晰、留白较多、简约干净」的特征和「轻量、方便、下载快速」的用户反馈,我们提炼出适合描述微云品牌的词云:简约、干净、留白。

如何做一个节日闪屏?

接下来就以劳动节闪屏为例,从节日特征和品牌调性两个维度来阐述节日闪屏的设计过程。

1. 节日特征

利用穷举法,筛选最典型的节日特征。

微云是一个工具化的产品,旅行/度假更适合旅行类产品,劳动/休息与微云更契合。结合产品功能,定了两个方向,第一个是「五一不劳你动,微云帮你整理」,与备份照片功能结合;第二个是「劳动光荣」,凸显节日气氛。以下是一些草图方案:

2. 品牌调性

前面三个方案重点在于功能的表达,把用户目光吸引到场景上,内容丰富,但可能造成用户在3秒内无法明白画面主题。方案四重点在于气氛的表达,关注人物故事,角色正在辛勤的劳动,直接点题,场景只起烘托作用。结合「简约、干净、留白」的品牌调性和「唤起美好回忆」的品牌期望,我们选择了氛围方向进行深入设计。

主题确定之后,就开始进行优化设计了。围绕着关键词,采用扁平化的设计手法,在色彩搭配上,由于劳动节没有明显的色彩倾向,故以品牌蓝为主色调,橙色来源于产品的图标,作为辅助色提亮整体画面;在页面排版上,保持大面积的留白,简约清爽。

3. 小结

劳动节闪屏上线后,我们进行了复盘,我们希望微云的节日闪屏给用户传达的是「你的珍贵回忆微云帮你记录」这样的小心思,而不是「我们有xx功能」之类的广告,所以在以后的节日闪屏中,我们会更加倾向节日故事性的表达。视觉风格则采用简约、干净、留白的方式,重点突出人物故事,不在场景上过多渲染。

4. 其他的节日闪屏设计

按照上面的思路,我们完善了其他的节日闪屏设计。

母亲节闪屏

母亲节是一个西方的节日,在这一天,孩子给母亲送康乃馨,来表达自己的爱意。在节日故事上选择了最具代表性的孩子给母亲送花的场景。

端午节闪屏

一提到端午节,就会想起粽子的「甜咸之战」,可见粽子在端午节的重要地位,所以端午节的节日故事就围绕粽子开展,三个好友齐心协力包粽子。

七夕闪屏

牛郎织女,鹊桥相会,是七夕节的美丽传说,这一天情侣相聚,相互表达爱意。七夕故事定格在情侣相会的瞬间,女生飞奔向男生,在银河上翩翩起舞,表达久别重逢的喜悦。

中秋闪屏&圣诞节闪屏

中秋节故事主题是合家团圆、赏月吃饼。圣诞节故事则以父女二人齐心协力装饰圣诞树为主题。

△ 备注:圣诞节最终效果图由另一同事绘制

所有节日闪屏合集

输出节日闪屏规范

节日闪屏除了故事性的表达之外,在设计上我们也输出了一部分规范,用来把控风格的统一。

1. 配色规范

色彩作为用户最容易感知的部分,使用时与品牌相呼应,主色与辅助色均来源于产品图标。有明显色彩属性的节日,以节日固有色为主,比如春节红色,中秋黄色等等。无明显色彩属性的节日,可以以品牌蓝为主,强化品牌印记。

2. 角色规范

我们希望重点展示的是人物的珍贵回忆,基于此,我们设计了一批角色,讲述角色的故事,让用户产生代入感。为了保证统一性,我们制定了人物的细节规范,包括角色头身比=1 : 9、服装款式以休闲为主、服饰颜色与品牌色呼应等。

在设定好人物细节规范之后,我们也完善了角色资源库,方便后期在其他场景的应用。

3. 场景规范

在场景设计上,我们以简洁,明确为主,场景主要起烘托人物故事的作用,而不进行过多的渲染。

拓展场景的使用

做了一系列闪屏之后,这些插图和角色并没有闲置,我们在线下挖掘了一些新的使用场景。这些素材被重新利用起来,变身为办公室的装饰挂画,营造出一个充满品牌气氛的办公环境。

总结

2018年微云希望通过节日闪屏的情感化运营,给用户传达节日关怀的同时也强化微云的品牌认知。在后续的规划中,我们希望节日闪屏不仅仅是单方面的给用户传递关怀,还能够和用户互动,实现更深层次的情感交流,比如点击节日闪屏,跳转到往年今日,帮助用户回忆起以往的美好回忆,增加用户粘性。2019年微云会继续给大家传递节日的祝福,也会不断探索新的闪屏设计风格,敬请大家期待。

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

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

资深UI设计者

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

模型交互的设计分析及体验建议模型交互的作用范围及交互特点


当用户在真实环境的场景中稳定放下物体模型后,会有与模型进行进一步互动的需求。这类模型交互,通常会改变模型本身的物理属性。例如:

  • 移动:改变物体在环境中的位置。
  • 缩放:改变物体的大小。
  • 旋转:旋转物体便于用户不改变自身位置观察物体。
  • 删除/重置:让模型在环境中消失或出现。

基于目前的 AR技术和手机设备限制,目前的模型交互主要是通过屏幕利用二维交互驱动 AR 三维场景中的模型,从而与模型进行互动。屏幕二维交互设计,主要是利用二维手势和界面控件去达到交互的目的。例如:

  • 按钮/摇杆:在手机界面中设计按钮、摇杆。
  • 手势:目前技术支持的瞬间的手势操作、连续的手势操作。比如单指点击、单指长按、双指缩放、双指旋转等等,我们在日常使用APP常用的手势操作。

通过进行合理的分析设计,赋予这些手势和界面控件具体的功能,去控制三维场景中模型的移动、旋转、缩放。

模型移动的交互定义及设计形式

用户会与模型进行互动,移动是最为常见的一种操作行为。通过在手机屏幕的手势操作或按钮操作,控制模型在现实场景中的位移。

我们需要通过设计用户使用常用并熟知的手势与模型进行交互,利用二维手势驱动三维空间中的模型在X轴、Y轴、Z轴的位移。

放置模型后根据移动范围X轴、Y轴、Z轴,与在现实环境的虚拟模型进行移动互动操作,设计手段包括手势、摇杆的方式。可以参考以下五种设计内容:

  • 单指按住左右移动:模型移动以屏幕有效的外侧边沿为限。
  • 单指按住前后移动:纵深移动遵循近大远小的透视效果。
  • 单指按住上下移动:模型以中轴线上下移动,实际为改变模型所在平面位置,投影以暗示高度。(需注意,单指按住前后和上下移动不会同时出现。)
  • 点哪去哪:模型从原位置向目标位置移动。
  • 界面摇杆:若屏幕手势交互有可能对控制对象造成持续遮挡,或者无法很好的完成复杂操作要求,可以通过屏幕控件满足需求。

模型移动并非需要X、Y、Z三个轴均开放,实际是根据模型位移交互的具体需求去选择开放维度,并设计合理的交互方式去响应模型的移动。可参考以下案例:

模型旋转的交互定义及设计形式

在现实场景中除了移动模型的位置,还可以通过旋转360°来观察模型细节,不仅控制模型还能把玩模型,赋予模型生命感,让用户更好地与模型进行互动。设计手段主要是针对手势的设计。可以参考以下三种设计内容:

  • 双指顺/逆时拧:一只手双指顺时/逆时拧旋转模型。
  • 双指向左/向右滑动:一只手双指左右滑动。
  • 单指向左/向右滑动:一只手单指左右滑动。

旋转模型是为了全方位观察模型,让用户更好地把玩模型。通过以下案例来进行说明:

模型缩放的交互定义及设计形式

移动模型、旋转模型都是与模型互动,如果想深入了解模型则需要对模型进行缩放操作。设计手段包括手势、滑动条、缩放倍数的按钮。可以参考以下三种设计内容:

  • 双指扩展/捏合缩放:以模型的中心点等比缩放。
  • 拖动滑动条缩放:拖动滑动条在0-100%的范围内进行缩放,当标尺拖动到极限时,则模型不再响应缩放。
  • 固定缩放倍数按钮:倍数已经固定,限定缩放的大小。

双指扩展/捏合缩放是在二维手机界面被大家熟知的手势操作,而滑动条、固定缩放倍数按钮的缩放形式,在AR场景多用于游戏类产品,一般在模型放置时固定模型大小,进入游戏后不支持手持操作。可以参考以下案例:

有一种特殊的情况,当支持放置多个模型时,如何设计呢?此时,需要通过点击选中模型,模型进入选中态,与其他模型区分开,选中后进行的操作只作用于该模型,并支持删除模型的功能。

为了增加模型交互时体验的丰富和细腻程度,模型交互(过程中、成功后)会有相应的反馈设计。包括:模型自身的动效、符合真实世界的视觉表现、音效、震动、语音反馈等。

模型交互的设计原则和建议

1. 根据模型需要定义交互自由度

模型的交互程度,需根据特定模型的自身属性/产品的类型去定义,并非所有可交互类型都需要涉及。跟核心模型体验无关的交互可禁止或增加操作难度。例如科普类模型固定放置在平面后,需要便捷地旋转以查看模型细节,但Y轴移动查看的需求不大,部分场景可考虑禁止Y轴操作。又例如游戏类 AR 模型位置相对固定,更多的体验在于与固定模型进行的细部交互。

2. 手势设计简单且符合直觉

手势设计优先使用通用的方式,若没有通用的方式,则尽可能使用简单和符合用户直觉的方式进行设计。若违反该原则可能造成用户的理解和记忆障碍,需要加重用户引导,避免给用户造成操作困难。

3. 手势设计按需搭配且不可冲突

在设定模型的交互自由度后,可选择合适的手势进行搭配使用。但一种操作方式只可匹配一个交互结果,不可出现手势冲突。手势的搭配需要成套考虑。例如以下搭配:

异常处理的设计分析及体验建议

1. AR中异常情况的定义及设计内容

传统APP设计存在异常情况,比如无网络加载失败,登录发生错误等情况,那在放置类AR 中是否存在异常情况呢?

在放置类AR 场景中体验时,由于使用者操作不当,导致模型出屏或模型丢失,无法与其再进行交互,我们统称为异常情况。还有一种情况比较特殊,当正在体验放置类AR时,其它应用突然被唤起,再重新返回放置类AR 场景的处理。所以我们从交互设计层面需要对异常情况进行及时处理,正确引导用户解决困惑,给使用者一个良好的 AR 体验。

在与模型互动过程中,会出现异常情况,需要通过一些设计形式可以及时地帮助使用者解决异常问题,设计手段包括:文字、动图、语音、辅助图形、重置、复位,具体运用根据实际设计需求而定。可以参考以下设计内容:

  • 模型出屏:模型出屏后视觉线索引导用户找到模型,可以搭配文字、动图、语音等形式,按照设计场景来自由组合。
  • 模型丢失:当视觉线索引导未找到模型时,通过点击按钮将模型复位。按钮可以常驻或非常驻。

当发生模型出屏、模型丢弃复位的异常情况,根据产品类型和场景选择合适的设计手段,解决用户的困惑。结合具体案例以说明:

在异常情况中有一些相对特殊的情况,第一种情况:体验放置类AR时,手机来电后不得不离开,当再次返回时,根据技术能力来进行交互设计引导,保留场景及模型或引导用户重新获取平面建立AR场景。第二种情况:当进入AR场景后,模型是固定大小尺寸,在设计时,需要考虑让用户可以重新放置模型在新的位置,提供重置按钮。

游戏类、科普类设计时需要保留之前AR场景,有延续性的体验,技术做不到保留,则需要重新识别平面再次建立AR场景进行体验,如果支持放置多个模型的场景,建议不保留。当进入AR场景后,模型是固定大小尺寸,在设计时,要考虑界面上需要重置按钮,让用户可以重新放置模型在新的位置。下面结合案例具体说明:

此外,在AR内容体验中也会发生丢失平面的异常情况。这里的异常处理可以使用话术准确告知用户原因,还可以配以图片、动图、语音,更具象更清晰引导用户解决问题。需注意与平面识别引导的设计形式保持一致性,若平面识别未使用语音,则识别失败提示也不能使用语音,避免突兀感。可以参考以下设计内容:

  • 纯文字话术:通过简单明了的文字正确引导用户操作。
  • 图片/动图+文字话术:图片/动图诠释文字的含义,帮助用户理解如何操作。
  • 语音+文字话术:语音辅助文字,使信息更有效传达,从而引导用户操作。

2. 异常情况的设计原则和建议

模型出屏后需要及时引导用户找到模型,避免焦虑感。

模型丢失后需要通过设计形式的组合搭配,以操作便捷的交互引导用户。

建议在设计游戏类、科普类AR产品时,再次返回APP 需要保留之前的AR场景,保留延续性。

注意如果进入AR场景时无音效和语音,则异常情况引导不能出现音效和语音,避免突兀感。

平面识别失败后需要及时反馈用户如何操作,需注意设计形式保持前后一致。

放置类AR的设计核心原则

以上就是AR放置类交互节点的分析和设计建议的详细内容。我们希望设计师能围绕AR应用的真实场景,考虑到每个体验节点的细节,结合上文提到设计建议,在设计过程中关注以下关键目标,为用户创造更加友好和细腻的交互流程和体验过程。

  • 清晰:传达的内容清晰明了,不会产生疑惑或歧义。
  • 有效:能帮助用户成功达到交互目标。
  • 流畅:无停顿感,过程一气呵成。
  • 愉悦:用户感觉愉快、无压力。
  • 可控:可自主交互,过程反馈清晰,给用户尽在掌握中的感受。

希望通过我们提出的设计内容、设计原则建议能帮助到作为阅读的设计师、开发者们,在日后的产品设计、交互设计中能让用户在放置类AR场景有更好的体验,这也是我们编写的目的所在,为AI科技尽绵薄之力。

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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档