首页

UI动效设计指南!三个要素打造流畅的动效体验

seo达人


一、持续时长和速度

动效设计中的持续时长和速度是两个密切相关的因素。在动效设计中,需要确保动效不要移动得太快或太慢,从而影响可用性,破坏使用体验。

那么,动画的最佳时长是多少呢?

一般来说,标准的UI动画时长应该在200毫秒-500毫秒之间——这组数字是基于我们大脑的处理能力而得到的时长区间。

小于100毫秒的动画是瞬时的,不会被用户注意到;如果时长大于1000毫秒(1s),会让用户感到动画很缓慢,带来一种拖沓的感觉。

 

同时,我们也要考虑其他可能影响动画速度的因素:

屏幕尺寸:由于手机和电脑有着不同物理尺寸的屏幕,尺寸的不同会影响动效的速度,屏幕越小,运动路径越短。对于移动屏幕,动效速度应保持在200-300ms之间,平板电脑应该保持在400-450ms之间;

图片

web动画:在浏览网页时,我们更习惯于网站的即时响应效果,因此网站的动画速度也更快。因此对于网站来说,转场动画的时长保持在150-200毫秒之间,更符合用户的浏览习惯。

以上提到的区间是相对保准的动效时长,并不是一成不变,具体的动效时长和速度需要根据具体的需求、场景,灵活分析。

 

二、缓动

现实中的物体由于受到重力、阻力等因素的影响,速度并不是恒定不变的。换句话说,物体都会有加速、减速、平滑等不同的运动状态。

为了使动画更真实,我们需通过缓动来模拟出这些因素,让界面中的元素运动的更自然,避免过于死板。

图片

缓动决定了元素在运动过程中速度的变化,常用的类型包括:线性匀速、缓入、缓出、缓入缓出。

 

1、线性匀速

当元素没有受到物理力的影响,速度保持恒定,就会发生线性匀速运动的效果。

线性匀速在改变元素位置的设计中使用相对较少,更多是用在改变元素的状态、属性(透明度变化)等不涉及元素位置改变的设计中。

 

2、缓入

缓入对应于元素的加速曲线,通常用于当对象从静止到加速离开用户视线的过程。例如一辆汽车驶出时,速度从0开始逐渐增加,然后在驶出时达到最大值。

 

3、缓出

缓出是缓入的对立面,用于屏幕上的对象从高峰值进入,逐渐减速直到到达特定位置的过程。例如一个人从屏幕外全速进入屏幕内时,进入画面时的速度最高,然后逐渐减速到零。

 

4、缓入缓出

缓入缓出也称为标准曲线,指对象从画面的一个部分移动到另一个部分,整个移动过程中始终保持在帧中,通常用于为在同一界面中改变位置的元素创建动画。例如一个钟摆,它的速度从峰值开始,缓慢减速到0,然后再次加速,不断在一个固定的位置区域循环。

图片

需要注意的是,不对称标准曲线会使物体的运动变得更加自然。

在使用缓入缓出时,要强调减速而不是加速,因此减速的时间要比加速时间要长。在这种情况下,用户会更关注物体的后半段,从而更容易关注物体的新状态。

图片

 

三、动效编排

动效编排是指对界面中不同的元素进行统一、有序的编排,让元素间更协调,通过更流畅的动效来引导用户的注意力。动效编排包括平等互动和从属互动。

 

1、平等互动

平等互动指对象根据相同的规则移动

在这种情况下,界面中的元素会变得整齐有序。以界面中的卡片列表为例,平等的互动编排保证卡片一个接一个,从上到下以一种协调的方式出现,能够从上到下引导用户的注意力。

图片

如果不按照这种编排规则,界面中元素的出现顺序会产生混乱,从而影响用户的浏览。

在表格类页面中,元素的运动情况会更复杂。

在表格视图中,应该按照对角线的方式来引导用户的关注点。如果使用水平方向的运动让元素一个一个展示,会造成元素的加载时间过长,用户的浏览路线来回曲折,体验不流畅。

图片

 

2、从属互动

从属互动指界面中有一个主体对象,用来吸引用户的注意力,界面中的其他元素都从属于这个主体对象。这样的编排方式让用户的注意力更聚焦到界面中重要的元素上,保持元素的运动主次更清晰。

还需要注意元素的运动曲线。如果一个元素不成比例地改变大小,例如从一个正方形变成一个矩形,那么元素应该沿着弧线移动。

如果元素的大小按比例变化,元素应该沿着直线运动。

此外,我们可以将曲线运动分为两类:垂直向外(水平开始,垂直结束)、水平向外(垂直开始,水平结束)

例如如果页面上下垂直滚动,页面中的元素应该以垂直向外的方式展开,先移动到右侧,然后向下运动。如果页面是水平滑动,元素则以水平向外的方式展开。

另一个问题是元素的运动路径相交时,元素间应该遵循物理定律,不能互相穿越。或者在元素移动前将元素提升到最上层,让动效看起来更自然。

图片

 

四、UI动效设计常用到的软件

当看到一个好看的动效时,常常会有小伙伴问到使用什么软件做的。

目前有很多软件可以进行UI动效设计,借着这次讲解动效的机会,我简单列举三个自己用过并感觉还不错的软件,仅供参考,建议大家可以去亲自体验一下每款软件。

 

1、ProtoPie

图片

ProtoPie是一款轻量级的动效软件,将页面原型、交互和动画整合到了一起,既可以直接在里面设计高保真的UI页面,还能让这些页面快速动起来。

ProtoPie操作页面设计简洁,上手相对简单,没用过的新手也能快速开始。ProtoPie通常和Sketch搭配起来使用,先在Sketch里设计UI页面,之后导入到ProtoPie中进行动效设计,效率贼高。

 

2、Principle

图片

Principle也算轻量的动效软件,相对更成熟。Principle通常是和Axure搭配使用,产品经理或者交互设计师在设计界面原型和交互时用的比较多。需要注意的是,Principle只能在MAC系统中使用,可能对于不熟悉它的人来说,刚上手使用可能会有一点点困难。

 

3、After Effects

图片

AE作为一个老牌的设计工具,大家应该都或多或少接触过。AE功能非常强大,可以实现很多复杂的动效效果,但操作起来相对复杂,学习成本也相对较高。

目前大部分的动效都可以通过这三款软件做出来,小伙伴们可以根据自己的需求,选择适合自己的动效软件,从而提升设计效率。

 

五、最后

以上就是UI动效设计需要考虑的三要素,希望通过这些内容能帮助你对动效设计有更多的认识和思考。

 
作者:Clippp

转载请注明:学UI网》UI动效设计指南!三个要素打造流畅的动效体验

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


万字透析 [行为设计与触发式引导] 赋能体验

ui设计分享达人

循序渐进的内容结构,不放目录了,内容框架如下:

1. 为何说应用程序是一种行为设计

————用户行为视角进行设计和解决问题

2. 行为设计下的设计模型理念

————运用模型理解行为、设计行为

3. 行为设计不能没有用户引导

————挖掘行为设计重要的部分“引导”

4. 正在被滥用的用户引导

————烦人的引导信息源源不断

5. 善用触发式引导赋能体验

————让触发式引导更棒的5个建议
————新一轮的趋势,克制与降噪

分割线-------------------------------------

应用设计为啥要行为设计视角?是因为酷还是更有挑战性?可拉倒吧,我都瘫工位上了还卷啥?只是在实际的设计过程中,通过观察或共情用户行为可以反映出很多问题,可以帮助洞察出更多价值或新的机遇。

此前我在试图寻找一款具还不错的机械美感鼠标,但是没有一下子找到合适的,准备第二天摸鱼的时候再看看,结果第二天上午十点左右,手机回复消息时,就收到了一条淘宝的通知。是关于鼠标的,你猜对了,之后我就顺势打开了淘宝,看看是否会有新的收获,淘宝根据我的搜索行为记录,果然在首页零零散散穿插了不少鼠标,我在首页看到了一张鼠标商品图,我迫不及待的点开,结果发现是穿了身衣裳的罗技G502HREO,不禁感叹道这些商人们的洞察力。 


那么回过神来,你是否已经感受到了行为视角加一点点同理心一点点洞察力,就可以产生如此奇妙的价值?

1|应用程序就是行为设计

1.1|数字化应用下的用户行为

应用程序本质就是数字化服务,只是将行为方式进行了转变,以及采用了网络进行信息交互。当我们有了需求后就会使用这些应用程序提供的功能完成需求。比如原本要在菜市场才能完成选菜、选量、付钱、带回家,而通过数字化服务则可以足不出户,在手机设备上完成购菜。当然了,这也意味着行为方式或成本的变化,但是本质不变。



数字化视角下,我们看见用户实现需求仅仅是手机上敲敲打打就做到了,而其本质只是调整了实现的行为方式,基本就是内容输入输出、查看选择、传递交换,再深入点就是界定用户输入什么输出什么,看见什么选择什么等一系列设定,自下而上来看,就是围绕产品服务或产品目标展开,然后界定功能服务的范围与内容范围,通过交互与信息框架定义用户行为的方式与范围。 



1.2|功能背后是行为的精心编排

应用本身就像是一个行为框架,尽管不能严格控制,但它规定了用户行为的方式、范围、路径以促导用户实现需求,表象是各种功能的设计,而背后也可以看做是用户行为的精心编排,而超出预期的用户行为则可以看作违规或设计漏洞,而我们通过数据埋点或数据分析来密切关注用户行为,也正是为了检验设计编排是否合理或满足商业预期,如此看来我们为何重视用户行为与数据收集也就很好解释了。

1.3|行为视角的三级维度两层映射

或许你在疑惑知道了行为设计视角又如何?实际在产品设计过程中,行为视角确实能带来太多惊喜,以至于一些场景化交互问题,我会代入行为视角思考每一步行为过程,而不是单纯的考虑流程与线框图。我认为行为表现能够清晰反映出一个用户的特征,当我们说通过一个人的行为表现了解对方时,也就这个意思啦,愈发真实自然的行为表现越能反映出一个人的特征画像,这应该也是为什么HR会用“行为面试法”来筛选应聘者的原因吧。



那么回到应用设计上,当我们通过技术手段收集到了用户数据,也只是一些数值罢了,唯有清楚数据涵义并结合用户行为视角,才能够分析还原出更有价值的信息,当获取到足够的用户行为信息后,我们就可以还原出相对真实的用户特征画像,以用于行为设计分析改善,来驱动产品体验或是商业目标。



2|行为设计下的设计模型应用

说到行为设计,不得不提到HOOK模型与福格行为模型吧,一个产品往往不仅需要行为设计也需要习惯培养,唯有这样才能使得用户能够熟练掌握应用并产生粘性,HOOK上瘾模型,一个关于如何让用户对产品上瘾或培养习惯的模型;福格行为模型,解释用户发生行为的条件与关系式的模型。

2.1|行为的开始:福格行为模型



简单概括就是要产生行为,就需要一瞬间产生内在的行为动力“动机”,并且有足够的“能力”执行,还需要适当信息提示来助推行为产生。我用人话解释一下哈,在此前了我们玩一个动动手指就行的小游戏。

一、首先伸出左手,掌心面朝自己;
二、然后仔细盯着中指的末端;
三、为了更佳集中注意力,把其他四个指头慢慢握拢;

好了,是的就好了,这个过程中,我说开始一个小游戏其实就是为了形成一个动机,而后续一系列步骤引导就是对应的触发信息,当然了动动手这么简单的事儿,我相信大家能力十足。其实这个模型就是告诉我们要想行动起来就要让你“想做、能做、开始做”。

首先是一个开始:提示触发
第一个是来自我自身或脑海里的提示触发,通常管这个叫做需求,洋气点叫做“内部触发”,比如刚刚肚子叫了,感觉有点儿饿了,当然了这些“内部触发”随机且不稳定,来自我们的心理活动以及身体本能。
而生活场景下的各种应用程序则需要媒介对我们产生触发,与之前“内部触发”相反,这些诱因我们称为“外部触发”,你在生活中看见的广告、好友安利的商品、手机通知消息、小红点提示、铃声震动等一系列均是外部触发。

具备一个行为动力:动机
凡事我们要做出行动前都会有一个动机,还记得刚刚我说肚子饿了吗?是的,于是大晚上的我想搞点儿烧烤吃吃,想到肉香四溢,酒足饭饱的感觉真是快乐啊,也不用吃药抑制胃酸过多的痛苦了。
而让你打车的动机、点外卖的动机、网购鼠标的动机、打开网页阅读的动机,你是否已经清晰看见,总归是有一个的,甚至会有多个。



能够进行执行的条件:能力
当一切刚刚好,触发有效,动机也有,可以做了吗?不不不,能力才是执行的硬核条件,如果我的能力相差悬殊我可能会直接放弃或降低预期调整目标,所以我想到烧烤店就在小区,票子也足够,腿脚也麻溜,这不,烧烤已经拧在手里了。所以你看,现在的应用程序不断在降低操作难度或消费门槛不就是这个理儿吗?


*你白天忙没时间娱乐?没关系,直播午夜档、24小时轰趴派对等候你。
*你工作完脑力体力有限?没关系,这些短视频幽默好玩不费脑,不喜欢轻轻一划下一个,不想滑?没事儿,短视频已经在流行自动播放下一个呢!
*最近手头紧了?没关系,咱们的商品统统优惠哈,还能分期付款,再不行还能组团砍一刀来点儿优惠。



产品设计中的可用性、易用性、统一性各种交互定律,以及各种营销手段不就是在不断的降低难度促成用户行为的发生吗?总之产品会想办法让你更轻松用起来,让你慷慨消费起来。

大概是该动一动了:行为
就像前面动动手指的游戏一样,当行为发生前的三个条件同时满足时,我就该动起来了,我的行为向着动机目标有序的进行着。

2.2|行为的习惯:HOOK上瘾模型



HOOK上瘾模型的核心在于使用产品后,会获取酬赏激励,我们为了追求更多的花样酬赏,以加大投入,并且持续的投入会提升对产品的价值积累,同时我们行为上就会不断的反复,之后就会留下惯性的操作模式,即习惯。整个过程中触发与行为部分即福格行为模型部分,而新的部分主要包括多变的酬赏与投入部分;


多变的酬赏:激励上瘾的根因
社交酬赏:产品社交互动中的反馈激励,例如常见的分享点赞、评论互动、人际关系建立等,在社交类产品中是极具分量的部分,良好的社交酬赏能够很好的激励用户参与互动与自发的创作内容,属于UGC重要的一环。

猎物酬赏:这就包括了金钱奖励、知识、资讯、娱乐等一系列你主动在产品中搜寻的信息或资源满足。当你还处于清醒活跃的状态时,脑子不会突然的呆掉而是胡思乱想或想找点内容填充无聊的时光,于是你打开手机一个又一个的短视频、资讯文章或是图文段子。

自我酬赏:以自我为中心的快感满足,如产品体验中的操作感、成就感、终结感。我们为什么要玩游戏?因为游戏有各种操作感可以满足自己,并且还有丰富的美术视觉,一旦我们获取对战中最优数据或MVP时是不是很兴奋!因为有成就感,这时你完成了最后一个敌人的击杀!恭喜你完成最后一击!是不是终结感也很不赖。



持续的投入:习惯的培养
上瘾就是一次不够还想要,习惯就是不知觉的在对应场景中重复某个行为,一旦当你在某个产品中不断的注入你的投入,你也会获取更多的激励与成就,它可以是你存储的照片、发布的动态、收集的歌单、你的粉丝团、你的名气信誉或是技能收获,慢慢的你会对该产品的价值评估提高,你会越来越难以割舍,甚至想要推荐伙伴在这里和你一起,而接下来就是另一个触发再次把你拉回来。

因为什么而上瘾:期待没有止境的舒服
实现上瘾就这么简单吗?想想好像不是,所以根因是什么?你有没有同样的感受,貌似大部分人对工作并不上瘾,是因为没有酬赏吗?貌似对有酬赏的家务也不会上瘾,甚至学习打卡也不叫人上瘾,反而是刷短视频、刷帖子、玩游戏、线上交友、语音派对这些娱乐更叫人上瘾,这是为什么呢?
回到前面的行为部分再结合HOOK的酬赏部分来看,如图,你是否会有什么启示呢?



酬赏快乐
让你痛苦不堪的产品必然是与上瘾无缘的,对于自身有益且美好快乐的事物我们会追求,反之则避免或逃避,寻求短暂的刺激来麻痹痛苦,不过这只是让用户接受和乐意使用的初步条件,上瘾?还不至于。

充满期待
为什么模型中指出是多变的酬赏?因为不是一次性满足,而且还是多元化的满足刺激,想象一下你,打开短视频,看完一个后接着下一个,但是相似度极高,于是你继续滑动,一个又一个,但是内容依旧极其相似,你开始反思,情绪低落,对后续的内容不再充满期待,你停止继续并退出了应用。这是另一个重要因素,带有期待,我们会本能的追求希望逃避恐惧,如果对后续不再抱有期待或希望时,那么这将是中断心流与上瘾绝缘的一个信号!

没有止境
你是否有发现不论是追剧、短视频、搞笑段子、游戏等一系列让你短暂成瘾时,都有一个相似点,似乎没有受到干扰时,根本没有终点,你可以忘却时间持续性的沉浸其中,享受着一个接着一个的高潮或激励。
如果要打造一款成瘾的热销产品,我想这三个点也是值得深思熟虑的因素,HOOK模型是精简的,但是内涵不止于此。


而对于习惯养成型,则有一部分是因为逃避痛苦或麻烦,我之前离单位比较近,到公司不会太早,但是研发工作却很积极,以至于我为了避免耽误研发或形成负面的同事形象,我都会早上习惯性的打开工作群看一下有没有红色的“@”,如果有的话,则赶紧看一下什么情况回复一下。

2.3|更完整的行为设计模型思考

在以上的模型中,找到了用户行为调动的方法,以及习惯养成甚至成瘾的关键点,但是结合应用程序设计的特征,我注意到还有一些行为层设计的关键点散落在各个环节,为更好满足设计应用的目的,我在HOOK上瘾模型的基础上细化了一些值得注意的节点,并试图在应用设计的过程中找到了节点的映射关系,验证可行性,在此我会穿插一些案例进行各个节点介绍。



2.3.1|触发

为什么在我们生活的场景中,处处充斥着广告或品牌的概念,因为商业产品需要触发!唯有当你了解一个产品的用途时,你有了内在需求才能及时的想起对应的服务品牌,并使得这些产品有机会被你翻牌子,然后你打开这个应用,应用:多谢恩宠~


外部触发的诱因,就是在适当时候提醒你是否需要,让你产生动机,或是引导你完成某个事件的动作,例如电话铃声响起,你掏出你的手机查看并思考是否接听。然后发现是骚扰电话你挂断了,这时手机弹出通知,是否开启骚扰电话拦截?然后你又开始点击查看骚扰电话拦截服务。

精髓在于打造良好的品牌卖点与口碑,在适当的情景能够激起用户的使用欲或消费动机,能够激起或助推动机、引导辅助用户行动、提示反馈牵引用户。



2.3.2|动机

不论是出于自身需求还是外部诱因产生的动机,一个让你做出行动前的心里动力,之所以被分为感知、情感、社会三个成层面,则是为了在适合的场景下给出更被需要的动机的触发指引,例如在炎热的大马路上,出于感知动机口渴,我推出冰爽的饮品更容易被需要或产生购买动机。并且当一个动机无法直接满足时,我们还会有更多间接的动机。



2.3.3|规划

大多时候我们处于惯性思考的状态,习惯性做事儿,但面对复杂的目标,我们都会预先进行一个规划,这不像屁股痒痒了就反射性伸手挠一挠这么简单,这个过程中围绕心理活动展开,给予已有目标与动机,我们会初步的思考以下多个问题,我该怎么去做?我能够做什么?先做什么再做什么?并且这个过程中会结合能力与自我感知进行决策,触发这一行动前可能还会补充很多间接的动机来完成初始目标,所以可能对一些间接动机先规划行动起来。



特别是当用户身处于产品应用中,所有活动事件我们应该给予一定的信息可视反馈,以便于用户决策规划和判断实行难度,这需要设计者做好一下几点;


可视化:有效的反馈软件或设备当前状态,给出相关信息让用户决定哪些行动是合理可行的。


用途示意:简单直接的体现出可以交互的形式或范围,例如显示一个带有放大镜的按钮,就可以感知与搜索放大有关系,并且是一个按钮可以点击交互。


引导信息:进行辅助示意的提示,特别告知用户应该操作哪里或如何操作的指引信息,减少沟通或理解的成本。

2.3.4|能力

能力会直接影响动机的强弱,能力不足就会消弱动机甚至放弃行动,如果动机高涨那么就可以做出更有难度的事情,这一关系在福格行为模型中有明确体现。在应用设计中,则更多以有效性、效率指标、交互原则及相关定律展开,目的则是减少门槛与使用阻力,帮助用户建立操作信心和有效易用的开展任务。



2.3.5|行动

当以上多个条件就绪后,那么你就要开始行动了,即使是准备五分钟开始,那么的你的等待都是具有目的性的行动,一旦时间到了便会触发生效。而行动正是与一切产品开始交互的开始,行动过程可能会具备多个子目标或动机来达成你的最终目标,也就是你面对复杂目标的动机规划,在进行中,你可能还需要一系列反馈来告诉你,是否符合预期,需不需要调整规划来达成最终目标。

2.3.6|反馈

如果说你的行为没有任何反馈或是延误错误的反馈会这么样?混乱。想象一下烧壶开水去,听不见咕噜咕噜,看不见热气或翻滚的气泡,直到你不小心碰到手上,该死的,烫出泡泡来了。难以想象没有反馈是多么的混乱,以至于我们没办法获取有效的结果来纠正下一步的行动或规划。



这个阶段里,反馈不仅仅是指用户行为发生后的变化响应,也包括了用户反思和比较的过程,在产品应用的过程或实现较为复杂的目标时,目标与动机都会面临拆解和阶段化实现的情况,那么每次我们对阶段目标付出行动后,就需要比对结果反馈是否符合预期,是否需要对后续的规划做出调整来达成最初的动机。



反馈阶段是整个行为设计中重要的一环,如果不能给予用户即时有效的反馈,后面的一切设计阶段都将是徒劳,并会给用户造成糟糕的体验。那么如何做好这一环,这不仅要做好产品可视化内容、用途示意、引导信息,还需要在用户行动的过程中,做好产品交互的约束、映射与反馈。

约束:通过提供物理硬件、流程逻辑、文字描述、符号标注等一系列方式来约束引导用户的行为,帮助用户理解避免操作出错。

映射:在用户交互的过程中给予即时有效的映射反馈,使得用户在持续的操作过程中能够追逐到对应变化的结果,例如通过滑动屏幕的进度条来感知和控制屏幕亮度的调整就是一种映射的表现。



反馈:用户进行任何操作后,应给出即时有效的状态反馈或是撤销操作,并且尽可能的与操作前的信息保持关联,以符合用户的预期,若未能操作成功,则给出失败的原因或解决方案,甚至主动进入修复中,避免用户在界面前不知所措。

2.3.7|酬赏

多变的酬赏,也许是为了快乐,也许是为了逃避麻烦与痛苦,在完成目标的同时我们必然会获取满足,如果在满足的同时给予了你额外的、意外的激励,谁不爱呢?鼓励用户发布或互动,获取社交酬赏;给予用户首充奖励,获取猎物酬赏;丰富的资料编辑,让用户完成更个性的展示,获取自我酬赏;面对复杂任务,完成后给予情感化的激励或奖品反馈。

2.3.8|期待

杜绝一成不变,不然只会呆板无聊,人总是会对新事物保持兴趣,想象一下每天刷着一成不变而乏味的短视频你会满足吗?不论是推出新的活动、新的玩法、新的功能、新的挑战、新的好友、新的八卦总是会让用户有所正向期待,愿意更多尝试与投入,就像抖音的短视频一样,嘎然而止意犹未尽,期待下一个更精彩。

2.3.9|投入

所在产品上产生的数据、时间投入、金钱投入、关系来往都将是产生情感或上头的重要原因,我不能想象时常来往老友,好好地说断交就断交,也没办法突然的将我在音乐应用中辛苦集成的歌单说删就删,因为这一切对我们都有特别的价值,未来的某一天我依旧需要。那些产品年度报告不就是在唤起应用时的回忆进行情感升温吗?

2.3.10|回到触发

再一次的,可能是我突然想起来需要了,可能是一个手机Push通知、一个短信、一个广告、一个回访电话,总之又一次的吸引到我了,并且此情此景所见所闻,我有了兴趣也有了动机,新的一轮又将开始。

3|行为设计与用户引导

[行为设计用户引导就像是西方不能失去耶路撒冷]


它是在任务能够进行的基础之上建立的指示信息。这是一对玻璃门,它约束了只能推开拉开,而用户引导就是贴在玻璃门上的“推开”或“拉开”,它们告诉我们最好怎么做,以快速作出正确或符合预期的行为。用户引导是帮助用户快速成功的捷径,在程序应用中不论是出于用户体验还是商业目的都具有极为重要的作用与影响力。



其实在行为设计模型中的诸多环节都是要运用引导设计的,不知道你是否也感知到了,这些引导可以从用户动机唤起开始-到动机助推-行动指引,出于不同目的,这些引导信息甚至可以覆盖在整个行为设计环节中,在适当的时候产生各种意想不到的效果;



3.1|从体验视角看用户引导

国内的应用五花八门包罗万象,即使被广告吸引完成下载,但打开后,甚至可能不知道从那里开始这个应用的探索,这个应用究竟能做什么,有什么服务亮点,于是乎就需要一系列的用户引导帮助我们开始探索和了解这个复杂的玩意儿,如果不能让用户快速抓住亮点(也就是Aha时刻),那么就很难保证之后的时段里不被卸载。

而这个数字化的时代,为了给用户提供更优质的服务,企业则需要引导用户在产品中产生数据,以帮助企业获取更多信息了解用户,并提供更契合的服务或是推荐匹配来改善体验。



3.2|从商业视角看用户引导

产品出于商业目的,不论是业绩指标、用户留存、消费转化,往往都需要用户引导来促成目的。就商业转化来看,这时候用户引导就像是导购一样,通过培养用户消费心智从而达成消费行为的动机,而关心用户在应用程序上的消费行为、复购行为、支付中断行为等,也是为了做好导购获取更多收益。 



3.3|常见的引导类别与形式

为了满足不同的业务目标,用户引导出现了各式各样的类别与形式,从广泛的视角来看其实就是各种信息提示,并且为了方便用户进入下一阶段,可能会直接附属相关操作或路径。通过促达的程度我们可以归类到这三个类别中:



主动式:在你还没有透出任何行为目的前,收到的引导性通知,用于吸引用户启动程序进行消费或互动。干扰较弱的形式有应用内外的通知、应用内弹窗等,中等干扰的有短信通知、邮件通知,再强一点的还有电话推销。

陈列式:在应用场景中,将相关的引导信息直接陈列在界面中对用户进行引导,可以在不操作的情况下直接看到,例如常见Banner形式、缺省图形式、注释信息、悬浮Tips等。

触发式:用户有意图的进行操作后给出的引导信息,相对来说是一种用户接受程度高、体验亲和、动机相对吻合的类型,展现形式丰富,有弹窗、Tips、Toast、注释信息等,具体根据场景做搭配。

4|正在被滥用的用户引导



4.1|被淹没在引导信息中

手机似乎响了一下,嗯?屏幕没亮,错觉吗?
手机刚刚是不是震动了一下?有短信吗?
我刚刚看手机干嘛来着?嗯?供奉战犯吴啊萍被刑拘?看看


你是否有过这般恍惚?明明什么声音都没有,却好像清晰的听见手机在呼唤你,每每打开手机时,除了个别还在艰苦奋斗的强迫症们,总是会看见一个又一个的小红点,点开手机通知栏,一长排的通知等候着你的光临。点开一个应用A,闪屏说应用B有活动,逐点击进入应用B,闪屏说去应用C点份午餐吧,然点开进入应用C,闪屏说来应用A专治无聊,对哦,我是无聊来应用A的啊,好一个圈圈圆圆圈圈开屏大法;

圈圈圆圆圈圈
天天年年天天的我
深红色的引导
商业的陷阱
指标的陷阱等你
不懂工作规划重要的我们
都以为摸鱼也能让工作完成
相信就一天 搞定工作
.......不好意思,给唱起来了

然而回到了应用A,别急,还有青少年模式引导、最新活动引导、会员续费引导、求你开个通知引导、底部消息99+引导等等。
这是一个眼花缭乱的世界,稍不注意就忘了我本来是做什么的,当时我只是准备买一个鼠标,但我在淘宝的短视频中神游了许久,直到点开一则评论被问答?你来淘宝是干嘛来的?我终于回过神来,我只是来买个鼠标的,我这点儿注意力还真是废物呢,以至于手头的事儿搁置了这么久。
而你,又在如何应对的呢?


4.2|目的不纯的引导信息

没几个应用是做慈善事业的,总归会有一套自己的盈利模式,商业指标造就了这些目的不纯的引导设计,例如用户取消订购时的种种阻扰、为推动新内容不断发出的骚扰引导、特定场景对用户的消费心智干扰、带有隐瞒信息的协议引导等,甚至还有一些令人不爽的强制性引导。
商业视角下,用户掏钱,则俯首称臣,不掏钱则软磨硬泡引导消费,很多时候不是在引导用户体验,而是在引导用户参与消费罢了,而设计师能做的,也许只能是想办法让用户钱花的舒服点吧。



4.3|开始想要回归平静



很熟悉吧,如果不够我还能列举,碎片化的时间似乎都被刷手机的习惯占满了,每次打开手机都会被各种引导所吸引,久而久之一得闲大脑就渴望来点儿数字化补品[刺激多巴胺],我们习惯打开这个,再看看那个,尽管眼睛是不乐意的。


不知道什么时候,高效便捷的服务能力不再是一个产品的核心指标,取而代之是让用户刷个不停,沉浸其中不得自拔,但我们也知道刷手机的若干不好,干扰视线、干扰学习工作、虚度光阴、还能砸到脸、睡不好、快速近视...


于是有那么一批人开始意识到,并减少手机上的引导带来的干扰,忽略一早起来手机上的若干通知、逐步加强对小红点的忍受、对各个群组逐一免打扰、关闭若干应用的通知授权、体验先进的适老化设计、设置免打扰时段等,想想没有了这些引导干扰,少看一看屏幕,也不会损失什么。

5|用户引导的救赎之路

5.1|善用触发式引导

为什么我们不反感快递到货的取件短信、不反感1008611查询后的话费流量情况短信、不反感求职后的Offer邮件通知,因为这一切的通知或引导,都是在你动机触发后给出的结果,它们可能正是你所需要的,甚至你正在期待的搓搓小手。



所以这也解释了为什么那些“预判设计”可以快速出圈,被用户所青睐,因为这些预判设计并不是凭空捏造的,而是基于用户行为触发预测了动机,为后续带来了的行为方向的指引,就此我们为用户提前准备好了相关操作或服务供给,例如常见的截图后,打开微信输入栏更多按钮,会直接提供截图选取服务。

那么如何做好触发式引导呢?
除了擅用行为设计的方法与视角,这里再分享五个我自己的见解

5.1.1|借“机”行事

我们的精力是很有限的,不该滥用引导,应该结合用户特征或行为触发来洞察需求,再用友好且符合用户意图的内容来引导用户,提高转化和品牌温度,而不是一味的引导轰炸,不然有一天被打上垃圾信息的标签了,发送再多的引导通知也不会有结果,所以找到一个合适的或是用户自己触发的“契机”很重要,商业与体验平衡很重要。

5.1.2|借助社交

除了一些工具类或没有社交属性的产品,大多数产品可以通过社交来建立用户之间的联络,并以社交消息来做功能引导或用户召回引导等,例如:



当然了,控制好时机并保证内容真实性也很重要。而借助社交是因为我们喜欢跟有共同点的人靠拢,彼此会有更多话题与乐趣,通过好友背书、社交扩列与社交酬赏做杠杆,让引导事半功倍。

5.1.3|循序渐进

引导设计需要耐心,分成必要的步骤循序渐进,不要一股脑儿塞给用户,也不要过于拖沓冗余,适当的阶段给予奖励,调动积极性,就像游戏关卡设计一样,采用阶梯式用户行为引导。并且从开始到结束不要信息断层,减少跳失率,我就看见过很多用户因为广告是穿搭而下载了某个应用,结果安装后玲琅满目,找不到兴趣点,最终选择了吐槽卸载。

大多数消费场景,讲究的是循序渐进的心智引导,欲速则不达,目的是建立用户信任、接受度、消费意向、好感度等促成消费结果,我们常见的电商好评、权威认证、专家推荐等就是在引导消费心智,这也体现了为什么一个好的销售会先跟你拉近距离而不是“哥!人傻钱多不”。



5.1.4|行为视角

行为视角的作用不用多说了吧,结合用户当前的行为我们可以洞察出下一步行为方向,提前做好准备,当然了,不要过分揣测,对应的引导要考虑服务范围、服务时间、服务要求、服务场景等,可以是面向全局用户、也可以是私人定制服务,重点是要契合用户意图,借“机”行事。

5.1.5|光明磊落

好的引导设计应该让用户觉得有价值、靠谱、不过分干扰,而不是为了指标做出一堆阴暗设计,老生常谈的恶心案例应该就是网页上的弹出广告吧,明明显示了关闭按钮,点击后却发现还是假的,直接就给跳转了,尽管我们说把用户当作小白,但不是当傻子,用户总归会发现上当的时候,到时候就该差评或控诉了,所以长久看来,为保证口碑与竞争力,还是建议光明磊落少些阴暗的引导设计。

5.2|开始克制与降噪

作为一个设计者,说来惭愧,安装一个新的应用程序后,一下子根本搞不清楚怎么用?有什么用?不得不说引导设计还是很重要的,但引导并非是让我迷茫的主要原因,庞大而臃肿的功能反而是主要原因,并且一旦功能倍增后,就很容易丢失服务焦点,以至于即使做用户引导也不好下手,做完了迭代又还要反复改。
现在的应用底部菜单从4个趋于5个,顶部Tab也越划越多,首页也是玲琅满目的,这对于用户体验是一个挑战,即使是专家级用户,也难以用到大部分的功能,这是一个信号!新一轮的趋势可能是克制与降噪了。

5.2.1|克制什么

克制业务范围,下钻业务优势,好的产品不是什么都做什么都有,而是应该定位清晰,业务更清晰,尽管很多产品有着类似的服务,但是每个用户都有自己产品上的小圈或价值积累,产品优势也有差异,不会因为有类似功能就轻易转移阵地,例如直播。一个产品想通过扩展业务丰富跨界优势是很难实现的,还记得支付宝做社交的吗?


幸运的是嗅觉敏锐的企业已经注意到了,如你所见,应用市场有了更多的极速版APP,微信支付宝等APP也允许用户配置核心服务之外的功能模块搭配,似乎软件们又开始轻盈好用了。



5.2.2|降噪什么

减少干扰,注重效率。一个好的产品应该注重效率,快速帮助用户找到要的、快速帮助用户完成任务、快速完成信息匹配等,看见随申办APP获得了GXA好体验奖了,不过想想新一代的数字化服务不就该如此吗?让流程简单易懂,办事少走两趟,结果反馈更及时,惠民政策早知道。



不知道什么时候开始适应和喜欢清晰简洁的产品设计,就像我喜欢逛逛无印良品,找一点精致自然的物件,有时候设计也是,多一点克制少一些喧嚣,当满屏都是重点都是标签引导、文字说明时,哪里还有什么重点,就像小红点诞生时,醒目的提示能帮我们找到重点,但现实处处是红点,哪里还弄得清什么是重要的。


就像一个简单模块入口设计,又是封面/标题/描述,又是用户信息/互动数据/品类标签啥的,这么多信息,我搁这儿读书呢?为什么不循序渐进呢?找到用户正真会看的焦点信息很难吗?


终于,在工信部的要求下,广告与算法推送也得以控制,这意味着干扰又少了,但是这也侧面反映了产品对用户数据的过分收集甚至有所交易,如何让用户放心用,隐私或权限的最小可行获取又何尝不是“降噪”的重点。


6|回顾

洋洋洒洒的写了一大片,也非本意,怕词不达意,只好多分一分内容节点,至于这么多字究竟在说些什么,我们简单回顾一下;

6.1|行为设计部分

数字化应用即经过精心编排的行为设计,本质是通过不一样的行为方式完成我们的需求,通过行为设计视角我们可以共情以洞察出更多的用户需求,并且在进行数据分析时,也需要善于使用行为视角洞察分析用户特征或痛点,这种方式我们可以记作三级维度两层映射。而上瘾模型与福格行为模型则可以为设计提供更多的指引,同时可以在模型的基础上完善更多环节来作用于实际的设计过程,帮助我们打造受欢迎的产品。

6.2|引导设计部分

用户引导是非常具有价值的设计,好的行为设计不能缺失引导设计,而现在引导设计正在被滥用,它的优势正被埋没,被用作一些不友好的地方,产品体验也因此大打折扣,而掌握触发式引导设计,通过借机行事、借助社交、循序渐进、行为视角、光明磊落五个方法也许能帮你改善。对于现在的数字化产品现状,或许克制业务范围,下钻业务优势,减少干扰,注重效率会带来更多惊喜。

原文地址:站酷

作者:泡泡_PAO


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计师如何避免反复修改?

ui设计分享达人

最近新的一批应届生开始步入职场,让我想到自己刚入设计这一行时,遇到的大大小小问题感到很是无助。今天这篇是结合自身经验写给入行不久的设计,希望你们眼中有光心中有梦对设计仍不忘初心。

前言

相信你在设计工作中一定遇到过这样的场景,当好不容易拿着设计稿推进时,被各种角色提出意见:
“我觉得这个设计不高级”,“我觉得这里可以再大一点,颜色更亮一点”,“我觉得可以试试竞品那样”,“算了,还是用第一稿吧”等等,然后陷入无限改改改的循环中,往往做着做着就开始怀疑自己是不是不适合设计






为什么会发生这种情况?

我认为有3个方面的问题

1、视觉的主观性

每个人的审美不一样,天然会掺杂着主观因素,导致每个人都能很容易的提出自己的意见。而我们对设计关注往往是各种好看概念稿、当前流行趋势等等,导致我们过于追求视觉表现,而忘记从需求层面出发

2、用户洞察缺失,设计方案不符合用户认知

每个需求都是有具体的目标用户,用户身份不同,同一个问题背后的需求也是不一样的,当与真实用户脱节,业务理解不到位,很可能就把整个需求理解错误,这样修改的几率就很大


3、目标不清晰

没有理解每个功能是什么,背后要解决的问题是什么,满足了什么需求,能够得到的价值是什么

产品或运营提出一个需求的背后,往往都有一个非常明确的结果预期,他们也需要层层审核。我们不应该想“他是不是对我有意见”“他不懂设计的吧,就喜欢瞎BB”“每次都这样针对我,设计做的真没意思”等等,而是需要主动沟通,了解为什么?只有充分的理解需求,才能寻找更正确更好的解决方案。



我们做稿子时常存在问题是我们仅仅关注了设计视觉表达环节,整个项目流程我们理解的过于狭隘,腾讯百度这些大厂设计流程往往从项目立项设计已经开始介入了



如何解决?

想要提升设计方案的说服力,首先要从思想上改变对设计认知,然后再从执行层上落实每个小点

1、体系化的思考

1. 1、拓宽边界

这里需要设计师站在更高的视角,把设计从表现和执行抽离往前后延展,在整个过程中往前去挖掘需求和规划产品结构,往后做到把控和沉淀,跳出视觉认知层,才能宏观看待整个业务改版



1.2、转换视角

从不同的视角看待问题,学会拆解问题和解决问题,从产品、设计、开发不同的角度来全盘看整个产品,分析这个需求的投入产出比是否足够,是否能达到目标(包括设计目标和产品目标)。设计、产品、开发从来都不是对立的,都是不同角色为了整个产品发力。



1.3、追本溯源

我们在开始着手项目的时候,不要单点去看要在某个页面要做什么改动,而是从问题入手,和产品同学对齐好目标,结合设计理念。


最后找到发力点在哪里,循序渐进,这样很大程度上能避免项目的反复,对设计流程的准确把控也是输出优秀设计方案的基础。



1.4、认知创新

有些新设计师认为创新就是把原项目进行翻天覆地的改变,初入职场会觉得负责的业务和项目都很小,没有什么意思,其实创新的维度有很多,包括设计工作流程的优化,还有从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜。



陌陌情感化设计和贝壳旗下被窝家装产品图标设计异曲同工之处,大方向上都是利用大色块、细节处用线条勾勒,整体设计轻量化符合年轻人喜欢,但两者又有不同之处。陌陌对表情和动作的处理线条更简洁更抽象,而被窝家装图标融入品牌IP趣味化表达,传达出诙谐、幽默的正面情感

2、理解需求

设计师往往对信息的获取比较片面,很多往往坐等原型,然后刷网站找图接着打开软件撸图,这种不充分理解需求就开始做设计的行为,属于思维懒惰,就被称为常说的美工

我们在需求阶段设计师应该主动跟需求方深入沟通,搞清楚以下方向的问题:




3、明确目标

明确目标是为了最终设计方案可衡量,设计师工作不是提供一个天花乱坠的方案,而是尽可能走在一个正确道路上提供给需求最合适的方案,只有大方向不错的情况下才有好坏之分



4、实际案例带练

4.1、前期分析

在业务探索初期,旧版满足了业务方和用户的基本诉求。但是随着业务扩张与更新迭代,我们逐渐发现现有的租售模块实价登录信息不能提供用户有效的参考价值,该页面点击到实价登录页面的用户量极少



(1) 价值点展示不足,人均点阅量较低

这个改版的背景是在租售业务上优化实价登录社区的需求,租售详情页的上内容的呈现还是旧版,现有框架和内容对社区价值点展示不足


解决办法:优化信息框架,丰富该房屋社区信息,满足用户找房时了解社区资讯需求
比如整个社区在该市的排名、整个社区的配置图、口碑评分等以及在实际找房场景过程中,用户会找这个社区内同格局同户型的房屋等等

(2) 与用户预期不符,跳出率较高

整个591APP是台湾地区关注度最高房屋的产品,但是从二手房引流过来的用户很少,埋点数据不理想


解决办法:除了在视觉上也要与本身租售的业务分开,让用户理解注意到该模块的价值外,另外在体验层也需要优化

4.2、用户分析:深挖用户真实的场景诉求

为了更好的明确实价登录的价值定位,以及确认用户期望什么的信息呈现,我们在实际改版时对用户做了多轮的摸底调研,挖掘用户在使用关注功能时的真实场景诉求。


在调研过程中,我们发现使用实价登录的用户分两类,分别是观望期的用户和决策期的用户,这两类用户虽然都使用,但是对实价登录功能的场景诉求是不一样的。



(1) 观望期用户

观望期用户一般是有买房计划,但是对于自己要买什么样房或能卖什么样的房子需求没有那么明确。这类用户大多数是了解为主,从慢慢对比中做到心中有数

(2) 决策期用户

决策期的用户大多已经线下看过房,有些甚至已经到了和议价阶段,他们对于自己的购房诉求已经十分清晰。在这个阶段的用户,期望提供更多有关体现房源价值的信息,比如挂盘时间、成交表、周边完善程度等等,这些信息一方面可以展示出目前房源再市场内的定位,重新调整价格预期;另一方面也能了解到业主心里预期,提升线下斡旋的成功率

我们可以从这两类用户的使用诉求看到,大家都期待能提供更丰富有效的信息,帮助自己明确需求和辅助决策。

4.3、设计目标

由上述信息得出我们的设计目标,提高租售模块的实价登录的点阅、降低跳出率,当我们的设计方案每个细节,都是以目标为导向时,你输出的方案将更有说服力



4.4、设计实践

结合实价登录历史现状和不同阶段用户场景使用预期。我们在本次关注改版上制定了对应的设计策略。

(1) 首屏

旧版分析:仅满足用户基本使用,其中承诺的误差率未达标,与内政部信息同步也存在问题;同时,视觉上更像是内容说明展示,点击感不明显


优化策略:围绕用户买房租房场景,为用户提供最新的实价登录信息,同时添加点击指向性箭头,告知用户可点



通过对首屏不断的优化和迭代,打磨体验细节和设计细节,首页的点阅提升了43%

(2) 实价详情

从框架层对功能和层级进行梳理,原层级主要功能不突出,根据功能的重要层级以及用户使用频次进行梳理,将入口进行提炼,同时针对多样化需要增加新的入口

旧版分析:用户在不了解社区情况下缺少关注动机;折线图不明所意;同社区是否有成交与当前用户缺乏联系;查看更多实价登录却到社区详情页与预期不符


优化策略:围绕用户买房租房场景,展示与用户切身利益相关信息






(3) 保持规范,风格统一

关于颜色

整个产品主色是橙色,但是目前租售详情页上蓝色橙色混用,当然设计的改版也需要锲机,所以我们这次改版沿用橙色,当好区别之前的蓝色,达到凸显实价登录模块的目的



配色从朴素到亮眼跟从LOGO配色,“暗蓝色”到“亮橙色”增强年轻感,加强了颜色的对比度,让品牌感知更加直接,增加品牌视觉分量

关于圆角

圆角,代表友好、亲和,具有更强的内指向性。我们对于圆角的取值上也做了足够的思考:结合房屋特性,卡片内需承载的内容信息众多,圆角太大会影响边角信息的呈现,所以我们在圆角选取上将圆角数值整体缩小,采用了可根据场景精细程度选择合适数值的圆角(4-6-8px),使卡片容器信息展示更聚焦。



5、高效沟通

设计师不仅要会设计,还要能够有理有据的,跟需求方陈述自己的设计方案。尤其是在项目合作和设计推进时,非常重要。方法可以分为以下几点:a.有逻辑;b.能坚持;c.会妥协。



5.1、有逻辑

向别人推进自己方案之前,先把自己要表达的内容梳理清晰,进行调整和简化。试想你小时候全校上台发表考试获奖感言,是不是有个长长的稿子
多问自己一些为什么,比如下面稿子类似于广告位的地方,当前目标是提高点击率。但是整个模块展示是在另外的业务上,也是存在突出的同时不能太突出的问题



初稿给出的时候也是出于2个方向考虑,方案一是出于页面整体风格一致性同时优化视觉,稍作强调;方案二考虑到方案一视觉引导弱了,用重色强引导达到产品目标。2个设计方案都可达到产品目标,剩下的就是调优了

5.2、能坚持

在符合最终产品目标的设计方案,必须坚持。但是,你要有证据证明为什么它值得或者能够坚持


这里再分享一个案例来,台湾用户往往特别注重个人隐私,基本不开通系统定位,但是买房租房位置选择及交通地域选择是第一步,否则后续搜索无法定位到用户预期。所以此次产品目标是加强导航的视觉层级,当然这只是优化需求里面一个小需求

经过竞品分析、加强品牌感知和用户使用习惯等方面确定使用品牌橙。但是这个橙饱和度比较高,在测试阶段非专业人士提出疑问导航这个太刺眼,让整个页面感觉不高级,让产品和交互再次怀疑这个橙色是否需要调整



这个时候设计坚持是非常有必要的,因为大量结果验证是可达到产品预期也符合用户使用习惯,仅因为大陆同事质疑就在测试环节随意修改,这个是非常没必要的。测试环节离上线时间是非常紧迫的,这个急促的时间推翻重来结果也可想而知

5.3、会妥协

体验设计会有很多不可控的因素,是在各种局限下做出最合适的选择。要处理好问题的优先级,分清楚哪些是核心目标,哪些是兼顾目标,这样才能更有效的管理自己的时间以及项目的进度。

6、方案阐述

6.1、什么是清晰有效的设计方案?

清晰设计层面来说就是方案能做到方向明确,方案明了;有效字从设计层面来说就是输出的方案可以解决存在的问题,能达到设定的目标以及可以切实落地。



清晰和有效的维度是不一样的:清晰更多是针对设计,在于不同方向/方案的差异度和侧重点;
有效更多需要联合设计上下游(用户/产品/开发),对于优秀的设计方案来说两者相辅相成,缺一不可

6.2、清晰:方向明确,方案明了

数量并不代表一个设计师的专业,最多只能说明设计师技法娴熟。在评审的过程中,不建议将所有的设计方案直接平铺。而是你要先经过自己思考、衡量与推敲,挑选出最优的 1~2 个方案进行方案评审,并给出设计说明,陈述方案的思考逻辑。

在设计最初期先思考有哪些途径达到目标,确保所有实现手段的方式都有考虑到,整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归,才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。



之前的例子比如目标答案是提高点击率和阅读量,我从3个方面阐述方案的可行性
方案一:沿用当前页面的比较扁平设计样式,选用大间隔大标题区分模块,在页面里加入品牌色装饰强调我们的模块,吸引用户点击;
方案二:可以采用卡片式设计突出点击感,吸引用户点击;
方案三:因为头部有用橙色装饰强调,所以整个头部模块不用卡片式呈现,突出后面2个模块

这样3个方案给需求方,即满足对方产品需求,又满足设计需求,对方就不会全盘否认设计方案,走入改改改模式了,就算对方有修改意见也能说出具体点去修改,而不是说我觉得不好,不够突出这样非常主观的想法



强调一点:我们在方案都没说服自己的情况下不要推出去,专业度是每次和对方碰撞中中慢慢建立起来的,如果说服不了自己的情况下,推出去对方很大可能性要你试无数稿对比;另外在阐述发需求方时候,也要注意语言的引导,慢慢理解对方的意图

6.3、有效:解决存在的问题、能达到设定的目标、可以落地的方案

初入行时认为满足了需求方便是好的设计,当其他角色提出不同意见就会觉得他们不懂的设计。这些现象是因为设计师在项目前期没有正确思考需求本身需要解决什么问题、方案能否达到团队共同设定的目标,以及方案是否能平稳落地这三个维度



(1)解决存在的问题——从问题出发

我们在实际输出方案的时候,不能从产品经理的需求文档开始,而是要把考量维度更前置,从项目现有的问题出发。这个问题的搜集包括外部用户的反馈,内部团队的声音,同时对问题进行筛选和甄别。

比如下面同一个产品按钮2种悬浮状态,左侧案例按钮hover状态是由正常状态面型变成线型;右侧案例按钮hover状态是正常状态下加投影。



如果我们仅从产品需求文档开始,不去深究其背后的原因,很可能把右侧hover状态直接变色处理,没有去思考hover的几种样式哪种是更适合当前场景的的,这样简单粗暴的处理方式多了之后使得产品体验大大折扣



(2)能达到设定的目标——从目标启动

问题还需要结合目标一起考虑,解决问题的思路并不完全等同于目标,目标是大家一起制定的未来产品的发展方向。比如之前导航的案例,未发版前部分工作人员认为颜色偏重,但是从产品目标和品牌调性及目标用户审美上是没有问题的



(3)能落地的方案——技术可以实现

在输出设计方案的时候,需要考虑到开发实现的可行性,需要消耗多少资源去实现这个需求,最低成本达到目标的路径是什么。最常见的就是情感化设计,下图案例2个空状态下的场景,原本考虑到趣味性及品牌属性加入动效,但是开发的业务需求已经排到下月,最后只能以静态图展示,先满足基本需求后续有时间再进行优化



再例如下面三组数据的排版方案一:文字最左边间距30px,文字最右边间距30px,中间一组数据中间对齐;

方案二:三组数据分别在360px宽的格子里距离左边30px。方案一在视觉上可能更加合理,当宽度是1200时右侧不会空太多,但是按方案二的逻辑写更加便捷,一组数据样式可以解决3组数据的排版,大大提高开发效率,如果用方案二评审加入开发实现方式的思考,那么按过稿率大大提升了



以上是跟进项目一整个具体过程,了解背景、分析问题、设定目标、到方案推导及执行输出、再到方案的落地,整个过程与产品研发沟通非常顺利,最后也获得良好的用户反馈,整个团队满满的成就感是非常开心的



总结

进入互联网公司工作初期,大多数人对设计的理解更多停留在表现层,对设计的判断标准更多是好不好看、喜不喜欢。但作为设计师我们不要盲目的去画设计图,只有在设计方案前,更好的理解和分析了需求,才能很好地服务用户帮助用户使用产品;同时,只有站在用户的角度去分析理解产品,才可以帮助产品站在全局的视角提升用户体验和设计需求,从而打造优秀的用户体验。这2点综合起来才是设计师价值的体现。

原文地址:站酷

作者:贝贤设计笔记

转载请注明:学UI网》科幻机甲风格海报怎么做?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


科幻机甲风格海报怎么做?

seo达人

图片

我们在去做这种类型的风格时,要学会总结,机能风的海报版面虽然整体呈现较为复杂的效果,但如果仔细观察,基础的元素都比较简单。

 

大家在做之前可以去先总结,通过观察这类作品可以得到以下元素,比如:

01. 电子元件/芯片

02. 机械感元素

03. 不规则标签

04. 警告符号,装饰性符号等

05. 黑白灰及荧光色的搭配使用 

 

图片

然后我在准备教程案例就开始画呀画,画了蛮多适合应用在机能风格海报中的元素,最后干脆想了一下,那就索性把所有的画完,源文件都送给大家吧…

教程突然就变成了素材分享…

下面我们来先看一下本期分享的素材,总共分为四个部分,每个部分的形状细节都有不同的差别。

图片

图片

图片

图片

但是下载素材只是第一步,很多同学平时电脑里也攒了不少素材了,误以为收藏等于学会,下载等于精通…

设计毕竟是个手艺活,还是要动手试试才知道怎么使用。

 

 

图片

01、首先我们从我给的素材里面挑选几个元素,我这里选择了三个,大中小。

图片

02、人物抠图后,先观察一下,人物本身自带了黄色的轮廓光,那么主色我们就尽量要选择黄色了,画面才会有合理性。

图片

03、这一步就是将图形按照较为平衡的构图方式进行放置,可以和人物有适当的叠压穿插关系。

为了避免图形太过零碎,强烈建议大家可以先以一个大色块为主,可以避免主体散乱。

图片

04、接下来将文字信息进行空白处放置,注意这里比较主要的信息就三块,人名,活动名称,时间地点,编排上主要突出这三个部分即可。

多余的装饰性英文信息适当缩小,起到一个点缀的作用就可以了。

图片

05、最后添加一个纸张褶皱的效果,因为我元素及色彩处理的比较简单,所以加深质感的处理,可以让海报更有层次感。

图片

 

 

 

图片

接下我们看第二个案例,这个案例我打算使用元素拼接的方式让画面更整体,细节可以适当处理多一些。

01、老规矩,开始挑选图形元素…

挑元素的过程确实是…太爽了,怪不得大家这么喜欢素材,尽管素材是我一个一个画的,但是我挑的时候也感觉…太方便了…

这里我顺便将元素组合了一下并且加了个颜色。

图片

02、如果只是在画面中间这样放置的话,四周缺乏呼应的元素,所以大家可以根据已经选好的图形特征自己简单画一些。

效果如下,是不是感觉完整性好多了。

图片

03、然后图片放置进图形中,图片整体也是呈现红色调的,所以整体的色彩和元素我已经用了红色,那么建议重点的信息在这里都用白色,可以简单做一个色彩突出的作用。

无论装饰元素和文字有多少,最终还是要想办法突出重点信息,这两者本身并不冲突。

图片

 

 

图片

看第三个案例,先选元素。

01、顺便选一些简单的图形装饰元素,比如箭头条形码等。

图片

02、这个图片本身已经蛮好了,底色也很简单,所以我不打算抠图了。

图片

03、接下来注意观察图片,底部有大量的黑色,所以我们的标签部分可以直接放图片下方就可以了。

其余文字环绕人物进行编排即可。

图片

04、正在这个案例中,我想添加一下类似毛玻璃和磨砂的效果,增强图形的质感。

图片

05、按照这个方法,我为其他地方也添加了这样的磨砂效果,下图为最终效果。

图片

 

 

图片

01、看第四个案例,先选元素。

其实我个人还是更喜欢这种带圆角的感觉,感觉有点高端的样子…

图片

02、将元素和人物图片进行合理构图,其实就是控制每个元素的大小和位置,放置他们的错落感,保证人脸不要被色块遮挡,文字信息顺便也放置进元素中即可。

图片

03、还是按照上个案例做磨砂效果的步骤,我们再加几处磨砂效果。

下图为最终效果。

图片

04、注意这里的磨砂效果除了加描边,我还加了投影,让整个画面的色块错落有点纵深感。

图片

 

 

图片

01、第五个案例我们换一下人物…一个题目做了四个案例,估计大家已经看腻了…挑几个图形元素。

图片

02、我们将图片和元素做一下结合处理,人物的部分我做了错位的处理,有点视觉迷幻的效果。

人物名字放置图片顶部即可。装饰性文字可以适当的跟元素做一个整体排版处理。

图片

03、最后,老方法,再加几个磨砂效果,你别说…这个效果确实有点上头,普通人受不了这种诱惑…

不要怪我非要做的花里胡哨,花天酒地也不是我想要的方式…

图片

 

 

图片

01、第六个案例,还是…

挑几个图形元素…

图片

02、人物图片本来是这个样子,背景是白色,不好处理整体的色彩变化,而我…也不想抠图…

所以在ps里加了一个渐变映射效果。

图片

03、图片用一个元素,标题用一个元素,这样就做好了构图排版处理。

图片

04、但是到这一步,画面还是会有点空空荡荡,填充一些呼应的元素即可。

最后,再加入纹理的效果叠上去就可以了。

图片

 

 

图片

01、第七个案例,挑几个细节较为复杂的元素,这次我们是单独拿来做背景使用。

图片

02、为了做出层次感,可以给色块适当添加渐变色和投影,有点立体的效果会更好,因为本来就都是偏白色的,没有投影和渐变的话效果不明显。

图片

03、重点信息我们就用以复本来的颜色就好,可以多一点装饰性元素作为点缀,不然白色的背景还是有点空,有一些点线面的变化版面会舒服一些。

图片

04、最后…

再加几个磨砂玻璃效果…

这次我是真的腻了腻了…

图片

 

 

图片

01、第八个案例,元素选好之后,我这里直接处理了渐变的效果,作为背景,有了一点质感。

图片

02、黑白的人物放上去就很适合,这一步我们就搞定了背景和人物的画面整体处理。

图片

03、然后将文字编排进画面中,但是整体除了黑就是白…

颜色有点太单调了,所以我们要换换颜色。

图片

04、这个颜色…

就…

挺好…夜店风的感觉…

图片

 

 

最后来放一下合集

图片

 

 

原文地址:胡晓波工作室(公众号)

作者:王猛奇

转载请注明:学UI网》科幻机甲风格海报怎么做?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B端营销创意|数字藏品能否成为B端业务力爆发的新介质?

seo达人


图片

品牌价值“藏品化”的可能性

通过对阿里云用户调研发现,数字藏品这项技术有着广泛的用户认知基础,有91%的阿里云用户对阿里云推出数字藏品感兴趣,其中81%的用户比较感兴趣及非常感兴趣,40%的用户曾经购买过数字藏品。这项结论让设计师们非常兴奋,这就意味着利用数字藏品传递阿里云品牌价值存在确实的可行性

图片

 

 

图片

致敬里程碑 

设计师和业务团队就数字藏品的设计方向进行了多轮沟通和论证,以阿里云飞天5K纪念碑为表现形态的思路脱颖而出。

出发点是设计师们想借此项目重塑营销品牌心智,回到“为了无法计算的价值”阿里云品牌主张,用“飞天5K纪念碑”这个开发者心中的图腾,在网站上进行数字藏品与任务平台的联动,通过创意与品牌为业务带来用户增长价值。

图片

回溯历史,阿里云飞天5K是阿里云计算技术发展的一个里程碑,飞天5K集群上线是中国云计算最值得纪念的时刻,代表了中国云计算技术人勇敢追梦、追求极致的理想主义精神,其在用户心中的意义不亚于一次成功的“登月”,这种寄托已经成为阿里云品牌的核心资产之一

图片

图片

图片

图片

图片

因此选择云计算开发者的精神图腾——“飞天5K纪念碑”作为创意原型,进行数字藏品的设计,进一步拉进与用户的距离,同时能在开发者圈层中打造心智,营造传播声量,链接阿里云品牌与用户间的情感共鸣。阿里云首款数字藏品让用户充满期待,用户关注的将不仅是藏品的使用价值或增值价值,更多的是一种不可替代的情绪价值

图片

 

图片

 

 

图片

业务目标的自然融入

 破圈裂变组合拳

在整体方案设计上,团队将拉新的核心目标和飞天5K数字藏品做了深度结合,利用「阿里云IP品牌价值+首发造势+大促氛围+精准的种子用户裂变+所见即所得的虚拟权益」的超强组合拳,构建了完整的爆点传播链带来规模化新增用户,完成了一次成功的破圈尝试。

 多端联动引发爆点

通过所见即所得的虚拟权益,突破用户预期,引发了活动参与用户通过微信群、朋友圈、微博、论坛等各种平台的自传播,形成稳定裂变链条,吸引更多玩家参与。同时官方通过阿里云App、官方微博、鲸探App、鲸探小程序形成流量矩阵为活动背书,引爆活动传播。

图片

用户因情感的唤醒,通过数字藏品活动自然的完成了对阿里云产品的了解,并在主会场产品力彰显、爆款价格吸引下,成为了阿里云新用户,帮助业务完美的完成了既定目标。活动仅仅上线6天即完成一万份数字藏品的发放,首购ROI达到58,同比上一次奥运小宝的拉新活动提升230%。

 

 

图片

未来之路 

数字藏品未来将成为阿里云传递品牌价值的重要载体,更多承载了中国云市场情感的作品将定期与用户见面,逐步形成阿里云独有的云数字藏品矩阵,赋能云业务的发展。

 

原文地址: 阿里云设计中心(公众号)

作者: 阿里云设计中心

转载请注明:学UI网》B端营销创意|数字藏品能否成为B端业务力爆发的新介质?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



在UI布局排版中,让界面快速出彩的7个技巧

seo达人

一、优先考虑重要内容

图片

优先考虑重要的内容,在页面中保持重要的信息占比更大、更明显。

为了让用户能够快速看到关键信息,可以通过滚动的交互方式和指导性的按钮设计,帮助用户找到他们想要的信息。

图片

‍▲ 例如《纽约客》网站的布局设计,在中间位置优先展示最重要的资讯,突出重点,网站两侧的资讯展示相对弱化。

 

二、保持合理的视觉层级

图片

页面中清晰的层级结构对用户来说也很重要。通过打造明确的视觉层级结构,页面内容的主次关系会更清晰和合理,方便用户更容易理解页面信息。

 

图片

▲ 在Netflix影片详情页的布局中,保持了清晰的视觉层级关系。跳到详情页后,我们首先会看到页面顶部的预告片和大尺寸的白色高亮播放按钮,然后是关于影片的介绍和其他功能。

 

三、使用非对称布局

图片

对称布局和非对称布局在日常设计中都很常用。对称的布局能够让页面看起来更加统一、整洁,但也导致页面效果缺少对比,效果单调。

非对称的布局刚好可以弥补这个缺点,在保证排版整齐的基础上增加页面的对比关系,让页面看起来更有吸引力。

▲ 例如在这个网站首页中,左图右文的非对称布局设计让整个页面看起来更有对比性和冲击力,快速吸引用户的注意力。

 

四、使用间距

图片

通过间距,能够将页面中不同的版面和内容划分出来,让页面的布局更丰富。

同时,通过调整间距的大小能有效区分内容间的关联程度。例如,同一组信息采用间距小的布局方式,让内容的关联更紧密。

图片

▲ 在Instacart页面中,上下有两种不同的布局方式,通过增加间距,让页面看起来更清晰。

 

五、打破统一的布局

图片

过于统一的布局方式会让页面看起来很单调,无法突出重点。

如果想让页面中的某个内容吸引用户的注意力,可以尝试在打破一致的布局情况下,让页面看起来更有节奏。

图片

▲ 在Airbnb网站中,图1、2和5采用了相同的尺寸,图3和4打破了统一的布局,让页面看起来更有动态感。

 

六、使用网格

图片

网格系统是使用网格作为辅助,进行页面设计的方式。通过使用网格系统,可以更准确地定义页面的布局。

图片

当然,网格不仅能用在页面布局设计中,在其他类型的设计(海报、画册等)中也常用到,是非常值得设计师学习的系统。

 

七、保持对比

图片

在设计页面的布局关系时,要尽可能做到图文搭配,保证既要有文字、按钮等元素,也要有一定量的图片,让页面保持对比性。

图片

▲ 例如这个网站首页中,左右两部分采用了一致的布局方式,以图片作为背景,文字和按钮等元素与背景产生对比,提高页面的冲击力。

 

最后

通过这些实用的布局技巧,希望能够帮助你设计构建出更好的界面布局~ 对界面中内容的划分和信息的掌控带来进一步的提升。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》在UI布局排版中,让界面快速出彩的7个技巧

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



P了两个圆,价值800万?

seo达人


下面这两个圆大家可能不熟悉,这个是万事达的最新logo,就是由两个圆组成,价值800万。那为什么两个圆形能够价值这么多,今天跟大家聊聊,几何在整个设计中的运用,怎么让你的图形更高级。

图片

图片来源于网络,版权归作者所有

 

一、几何简史课 

欧几里得常被称为“几何之父”,因为他写了一本叫《几何学》的书,这是数学史上最有影响力的著作之一。

图片

几何图案来源于几何学,几何学是数学中对形状和线与面之间关系的研究。图案被定义为“重复的装饰设计”。

在设计中,几何图案反复使用形状和线条来创造引人注目的设计。几何图案非常适合用于设计,因为从本质上讲,我们的眼睛自然会被它们吸引。通过将几何图案与合适的颜色相结合设计引人入胜的视觉内容。

图片

世界内外的一切都可以通过数学来推断和理解,这正是许多文化将几何视为神圣的原因,从一开始就被人类直观地使用和理解。

因此,几何形状和图案在艺术和设计中具有很大影响力。从伊斯兰艺术到包豪斯运动、立体主义、装饰艺术等等,几何图案一直并将继续在设计中发挥关键作用。

图片

我们可以将几何设计用于从品牌到产品、插画、网站、应用程序设计等等的任何设计中,下面带大家看一些几何图案在不同设计环境中的运用案例。

 

二、几何在设计中的运用 

1、平面设计

图片

杂志封面设计结合了三角形和充满活力的各种配色,创造出炫酷的图案,色彩缤纷的效果。

图片

平面设计师 Atul Charde 设计的长途汽车,展示了几何图案可以很好的吸引人的注意力。Charde 还结合了黄色、橙色、海军蓝和白色的配色,创造出一种正在忙碌行驶的感觉,很生动形象的体现了长涂汽车的概念,十分契合产品。

图片

几何设计也非常适用于包装上面,用简单的形状组成复杂的图案来包装产品。

图片

这瓶酒使用简单的线条来创造一个有趣的几何图像。这是一个很基本的设计方法,但通过巧妙地结合颜色填充几何形状,设计感就出来了。一个复杂的图案就是由一个简单的图形组成的。

图片

图片

卢塞恩纽巴德俱乐部音乐会系列海报,用绘画与几何的结合,表现了音乐的非常规和自由特点。

闪电形、星形、三角形表达音乐的激烈抑扬顿挫感;圆形、传达音乐的平静、缓和感;自由笔触有序直线,传达音乐的有序、绵长感。

 

2、品牌

图片

Nymble 健康套盒品牌视觉提取品牌首字母“N”与人奔跑时的姿态结合,虽然是简单的几何线条和点,却非常有动感,简洁而传神。

图片

图片

图片

品牌延展部分是对品牌标志更进一步的理解和演绎,沿用了标志中的点、线元素,通过对点与线的位置、距离、粗细、大小的调整,构建出一整套可变的网格图案。

图片

图片

涉谷时装周2020-2022的视觉设计用圆形几何化的视觉语言,将SFW2020组合成图标,并拆分重组成为辅助图形,运用到画面整个体系中。从2020-2022,通过不同视觉展现不同的视觉风格,2022的工业鬼马感、2021休闲时尚感、复古都市感。

图片

图片

玻璃质感和几何图形的结合完美诠释主题,体现宏大精致的美。元素简洁,通过细腻的质感增加丰富的对比。

图片

图片

这是一款国外的披萨品牌的logo设计,特别之处在于logo的名字和图形看似分开,实则是用一个邮票作为一个整体。图形的人物是一个由几何组合,用黄金比例切割出年轻妈妈的样子。

图片

图片

图片

这是国外的一个茶饮品牌的包装设计,插画的人物服装和植物元素是当地人的特点,设计师将这些具有丰富变化的民俗服装用几何图形有规律的重新组合。

通过将复杂的事物用几何有规律的概括后,再通过合适的配色,呈现的整体设计感很强。同时在文字以及装饰框上,也统一用了这种具有民俗风情的风格,在字体上也会用几何作为流苏一样去代替字母一部分的笔画。

 

3、插画

图片

图片

简单几何元素拼缀出的人物、场景,色彩上深浅深的对比,图形上方圆方对比增添了画面的呼吸感和视觉冲击力。

图片

图片

这种风格的插画区别于以往的插画风格,整体是几何体和不规则形状组合而成,噪点的运用和颜色的搭配完美,夸张的手法,大胆的设计让它脱颖而出。

图片

无论是简单的图案还是复杂的图案,几何设计都可以完美地制作出引人注目的壁画。

 

4、网页设计

图片

图片

这个网页运用极细的线条,规则的块面,将界面的功能展示区域分明,简约不失严谨,传达出品牌的专业度。

图片

B端设计的页面采用圆角卡片,以及大规模几何体使用,界面立体感和层级感比较突出,立体几何插画的表现效果很好可以在UI中运用。

图片

配图用三维几何体,搭配很年轻化的色彩风格,显得画面感很强。整体色调很舒服,界面干净整洁,很年轻。

图片

图片

这组网页设计首屏融入几何元素包裹着主图,灵动多变的几何装饰打破惯性的设计思维,创造出新奇的视觉效果。

图片

图片

这个体育网页头部使用红色和黄色,运用对比色,视觉冲击力强,使用三角形和异形,简单的几何图形,营造页面的空间感。

图片

图片

背景采用柔和的微渐变点缀淡淡几何图形,既不会喧宾夺主分散用户的注意力,又可以避免纯色背景的单调。

 

5、UI设计

图片

这个绿植商店页面采用大圆角搭配圆润的线性icon,用几何拼接形式表现插画,整体风格自然简洁。

图片

这个医美产品的UI设计,按钮和产品的背景沿用同类型的几何图形,类似超级符号的存在,加深品牌印象的同时,打破常规背景图的形态,使页面充满生机活力,贴合医美产品赋予肌肤青春活力的初衷。

图片

从画面感来看,有点像游戏或者娱乐产品风格的界面。背景用很多几何元素符号,画面感很活跃。

图片

这组启动页设计,通过人物和几何图形穿插,突出人物主体,拉开主体和几何形的层次感;并运用色彩叠加的方式,画面更具青春、趣味和视觉冲击力。

图片

图片

这是一款体育运动场馆预订的产品,用几何形状表达不同的运动,简约又生动,也与整体高级感匹配。

图片

几何插画设计风格,头部卡片像一个抽象的人物,整体风格偏年轻化,卡片和背景生动有趣不单调,颜色多彩充满活力。

 

三、最后 

今天的分享就到这里,期待每天一个小知识点,可以给你的设计路上增加一点点能量。

 

原文地址:我们的设计日记(公众号)

作者:叮当猫

转载请注明:学UI网》P了两个圆,价值800万?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



私货来了|分享两个宝藏作品源文件 !!【移动端UI】

seo达人


图片

先看看这套数据可视化的吧。这套文件里面的数据组建跟配色都非常的丰富,而且耐看,光是吸一吸里面的颜色,都会让自己的稿子精致不少。

图片

图片

图片

 

篇幅原因截图就不一一展开了,这套素材规范严谨、组建丰富、色彩配套较多,层次分明,比较适合从事Web端、产品工具型、Saas后台、偏向于B端的同学。

亲测用起来还是有效果的,推荐大家使用。

图片 

 

接着给大家看看第二套素材,这套素材主要是移动端的APP设计,适合于从事C端、偏向于业务设计的同学。

图片

整体风格很简洁,颜色很高级,看着就很舒服。

所以如果这套素材下载下来,直接拷贝图层的颜色、阴影、还有风格化样式,可以让自己的稿子高级不少。

图片

反正我特别喜欢这套素材里面的弥散投影,右键直接拷贝图层样式参数,就能让我自己的稿子,一样拥有这么高级的投影样式啦。

图片

图片

图片

案例很多,就不展开一一给大家看了,确实好用。


原文地址:UI小学(公众号)


作者:素材干货

转载请注明:学UI网》私货来了|分享两个宝藏作品源文件 !!【移动端UI】

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


160种常用的配色方案,把设计调性拿捏得死死的

seo达人



一、高端

图片

视觉调性高端的色彩,通常具有明度低、饱和度低、颜色数量少等特点,所以很多高端的设计都会以深色作为背景色,因为深色更显低调、更具神秘感,所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。

图片

 

二、科技

图片

想要表现科技感,色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果。

图片

 

三、时尚

图片

其实所有调性的配色都应该要尽量时尚一点,即使是想表现复古,也不能太土,所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类,一类是以纯色作为背景,这种色彩比较适合于品牌设计、网页设计、画册设计等;一类是以渐变色作为背景,这种色彩比较适合于电商设计、广告设计等。

图片

图片

 

四、酷炫

图片

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配,比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格,其色彩就属于酷炫类的。该类设计通常也是以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多。

图片

 

五、好吃

图片

即让人感觉很有食欲的色彩搭配,这种色彩通常以暖色为主,比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业;而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。

图片

 

六、夏天

图片

目前正值火热的夏季,所以葱爷专门整理了一些适合表现夏季的好看色彩,该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色,然后以黄色或红色、白色作为辅助色,这种色彩组合会给人清凉、快乐的感觉。

图片

 

七、清新

图片

小清新的视觉感受为轻松、柔和、淡雅,要达到这样的效果,颜色的明度通常是比较高的,饱和度偏低,常用的颜色有浅青色、浅绿色、浅黄色、粉红色等,在奶茶、女性护肤品的相关设计中比较常见。

图片

 

八、快乐

图片

快乐是张扬的、是活泼的,所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多,通常也是以暖色为主,但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性,所以想要表达快乐,黄色通常是少不了的。

图片

 

九、可爱

图片

跟儿童、年轻女性相关的设计,通常需要表现出可爱的调性,这类色彩通常是用冷色和暖色相互组合,颜色的明度同样不会太低,否则会有压抑的感觉,另外饱和度也不要过高,饱和度稍低一点效果会更柔和一些。

图片

 

十、健康

图片

想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶,还有黄色的小野花等等,所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩,红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉,所以整体的颜色明度不要太低。

图片

 

十一、运动

图片

要想让色彩动起来,对比一定要强,可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色,所以常用于表现运动的设计里。

图片

 

十二、科幻

图片

这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合,给人的视觉感受是稳重而大气,科技感和神秘感并存,所以背景色通常也比较暗,喜欢用青色和黄色这种比较亮的颜色作为点缀。

图片

 

十三、喜庆

图片

在设计节日海报或促销海报时,通常需要表现出喜庆的调性,有些设计师会局限在大红色、黄色、和橙色里,这样搭配出来的色彩容易土,而想要解决这个问题,一方面可以加入冷色搭配使用,另一方面颜色的饱和度和亮度也不要过高。

图片

 

十四、复古

图片

这类色彩的特点是颜色的饱和度会相对低一点,而且大多数情况下,整体的明度通常也不会太高,常用类比色搭配和对比色搭配。

图片

 

十五、中国风

图片

具有中国风特色的颜色和色彩组合有很多,葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高,有点复古和充满文化气息的感觉。胭脂(暗红色)、缃色(中黄)、绀青(深蓝色)、黛(褐色)等是中国风常用的颜色。

图片

 

十六、梦幻

图片

梦幻具有奇妙和神秘的感觉,好像在黑暗中找到了一点曙光,奇遇了惊喜一般,所以大多数情况下,背景色会使用从深色到亮色的渐变。颜色相对会比较丰富,而且以渐变色居多。

图片

 

十七、女性

图片

女性是温柔的,是感性的,所以该类色彩组合通常为类比色,偶尔会用一点对比色作为点缀,以增加画面的活泼气息,颜色的明度和饱和度都不能太低,当然饱和度最好也不要过高,粉色、紫色是常用于表现女性的色彩。

图片

 

十八、优雅

图片

优雅可以理解为低调、高级、温和、安静,所以这类色彩的对比通常不会太强,饱和度也会比较低,整体的色彩调性会偏中性,常用卡其色、麻色,还有单色组合及类比色组合。

图片

 

十九、经典色彩组合

图片

除了以上十八大调性,葱爷还给大家推荐一些经典的配色,很难把它们具体归为哪一类,但是我们在做很多设计时,用上这种配色总能得到不错的效果,比如红黄黑、红白蓝、黄绿黑、等等,在很多平面海报设计中经常能看到。

图片

 

 

图片

以上所列举的色彩组合,矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。
当然,能体现以上这些调性的颜色还有很多,大家可以自行补充,建立起自己的色库。 
 
 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》160种常用的配色方案,把设计调性拿捏得死死的

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



不会画图标,这些源文件拿去用吧!

seo达人

正文

图标设计对于UI设计师来说属于非常基础的技能要求,甚至很多入门级设计师都会画,只是画得不一定规范,或者缺少创意和质感。不过也有一些刚入行的新人设计师,图标设计的能力还比较薄弱,在项目中效率比较低。

因此图标素材成为了提高工作效率的途径,为了帮助这部分同学获得更多图标资源,黑马哥为大家整理了十余个优质的图标素材库,希望可以带给大家更多帮助。

 

1. 善用图标库

我们可以运用图标素材库的资源来提高我们的工作效率,但是不适宜过度依赖,仅限于入行前期的经验过度。

针对已经具备一定经验的设计师来说,不适合过度使用素材解决工作需求,可以将图标素材库作为灵感来源。参考别人的风格和技法表现形式,以此来创作出属于具备自己思考的作品。

图片

 

2. 图标素材库推荐

为了方便初入行业的同学掌握更多资源,为大家整理了如下图标设计网站,大家在使用的时候自行阅读相关平台的规则说明。

2.1 Flaticon

Flaticon 拥有超过 780 万多个矢量图标和贴纸等素材,提供 PNG、SVG、EPS、PSD 和 CSS 等格式。该图标素材库包含界面图标、动效图标、标志和贴纸等,作品的质量还是比较高的,可以满足很多设计场景的需求。

图片图片

2.2 Noun Project

Noun Project 提供了超过 300 万个艺术品质的免费图标,可以下载 PNG 或者 SVG 等文件以便于编辑。

图片

2.3 ICONS8

ICONS8 对于一些设计师来说比较熟悉,提供了几十款样式的免费图标素材,还有设计工具和插件的推荐等。除了图标素材以外,还有插画素材和一些不错的照片素材,种类丰富且质量都还不错,值得没事的时候逛一逛。

图片

2.4 Iconfinder

Iconfinder 拥有图标、插图、3D 插图、贴纸等素材,里面提供了非常多的图标素材,还可以通过内置的色彩编辑器进行调整。只需要简单的操作就可以对图标和插图进行重新着色,下载 SVG、PNG 格式或者复制参数等。

图片

2.5 IconPark

IconPark 图标库已被字节众多产品线使用,拥有 2600+ 基础图标,29 种图标分类,为你的设计提供更多的选择。

图片

2.6 Freepik

Freepik 提供的素材不只是图标,还有字体、插图、漫画、海报、样机、标志等等内容,种类比较丰富。图标的分类也比较丰富,素材资源众多,可以满足我们多样化的设计需求。

图片

2.7 Iconfont

Iconfont 对于大家来说非常熟悉了,相信很多设计师都去下载过图标素材,是由阿里妈妈 MUX 倾力打造的矢量图标管理和交流平台。设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的 icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

图片

2.8 Ionicons

Ionicons 提供了完全开源的图标设计素材,用于 Web、iOS、Android 和桌面应用程序,支持 SVG 和代码文件下载。

图片

2.9 Flat Icon Design

来自日本设计师团队创办的提供免费图标素材下载的网站,和别的图标素材网站不同,该网站收录了众多扁平设计风格的图标,带给各位设计师更多样化的选择。

图片

2.10 Fontello

图标字体生成器,将你的图标拖进网站自动生成。网站也提供了众多图标可以下载。图标大小可以自动调节,然后批量选择好一次性下载,非常方便实用的一个网站。

图片

2.11 Logobook

Logobook 提供了很多黑白的创意图形,可以作为我们设计灵感的参考来源。通过对基础图形的创意灵感,探索出图标设计的想法,是一个灵感来源不错的平台之一。

图片

2.12 Iconsfeed

Iconsfeed 展示了很多的应用图标设计案例,分类也是非常的丰富,可以根据自己的需求寻找对应的设计灵感。

图片

 

小结

为大家选择了 12 个图标素材网站,大家使用时记得仔细阅读各平台的条款说明,本分享仅为参考。

3. 温馨提示

通过图标素材库虽然可以让我们偷懒一些,但是并非长久之计,一旦遇到更高要求的设计需求时,过度依赖素材容易让我们提前步入瓶颈期。要掌握图标设计的规范、风格趋势、表现技法、深入质感的方向等等,只有具备优秀的图标设计能力,才能在项目中随意发挥。

图片

4. 图标设计能力提升

图标设计入门很简单,但是从“会画”到“画好”之间却存在一定的差距。图标设计的能力属于动手能力的提升,没有捷径可走,唯有掌握方法并反复磨练。

4.1 临摹起步

临摹是图标设计训练的起步,大量的临摹可以提高软件操作的熟练度和造型设计的把控,也能不断提高简化图形的思路。临摹的量不能太低,临摹几个几十个是没有作用的,起码也得上百个起步,只有量变才能引起质变。

图片

4.2 拆解图标素材

从运用素材到拆解素材,是依赖素材到探索技法的转变。拆解图标素材的造型结构、规范参数、表现技法、配色关系、细节和一些比例关系等,掌握并还原素材的能力,这样才能不断掌握各类图标风格的设计能力。

图片

4.3 图标案例分析

具备技法层面的能力是基础,培养灵感需要积累大量案例并分析总结。体验线上的各类产品,分析图标设计的风格趋势,并形成经验总结,只有不断体验和总结才能把控图标设计的运用趋势。

图片

4.4 强化日常输出

除了完成项目需求以外,日常的探索和磨练也是至关重要的,只有经历过千锤百炼之后才能随心所欲。看到优秀的作品要去研究并转换成自己的作品,掌握技法并形成自己独特的理解。定期输出作品是为了不断强化自己的动手能力,也是持续激活脑细胞的过程,让我们的灵感源源不断的成长。

图片

 有人带好进步 

如果你通过自学无法更快的提升自己图标设计的能力,专业能力依然处于入门级或者初级阶段,那就找黑马哥带一下吧!有人带进步更快,才能在短时间内从入门级进阶到高级以上能力。

图片

黑马哥会带你分析设计思路、拆解技术难点和掌握设计原则,通过案例实战的形式让你更快的掌握。再配合日常作业的一对一指导,发现你作品中的问题并逐个修改,达到较高质量的输出。

图片

也会指点工作项目中的设计,让你在工作中更快的提高效率和发挥更高的价值,实现专业能力的落地和职场路径的晋升。

图片

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》不会画图标,这些源文件拿去用吧!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档