首页

一些视觉知识点

纯纯

视觉空间、字体性格、颜色情绪三个大方面来谈一下我对视觉知识的部分理解!目录如下


1. 视觉空间

1.1 什么是空间感

空间感:空间感( sense of space)是指艺术形象通过一定手法引起的类似现实空间的审美感受。艺术家通过特定的瞬间造型和空间深度的追求,使人联想到其活动、生活的环境空间。在绘画、摄摄影艺术中,形象存在于二维平面中,但通过构图、透视、线条走向、光影和色彩处理,使人感受到空间的整体性、立体性。

而在我理解总结,空间感其实就是运用各种手法,打造出画面的空间纵深感,让二维的画面变成三维,从而提升画面的品质、细节、冲击力。

1.2 空间感的优点

我们以人物海报为例对比几张图,直观感受一下:

无空间感:



有空间感:

我们直观的可以看到,都是人物海报,下面的两张明显更有品质感。有空间感的图,画面会更高级。

那是因为空间感会让你的画面更有层次,更灵动和富有场景感。这就是空间感的有点。

1.3 如何打造空间感

空间感,其实就是打造画面纵深,让元素之间形成前后关系,那有哪些方法来打造画面纵深呢?我们总结了5个方法来分享给大家:

1.3.1 构图

富有极强透视线的构图能很直观地表现出空间感。

比如




这类

这类拥有很强透视的构图,不用做别的,光构图就能体现出很强的空间感了。

实际运用中,我们还可以利用标题文案排列出这种透视构图来打造空间感:


1.3.2 虚实

虚实分为:

1.轮廓虚实

2.颜色虚实

轮廓虚实:两个相同的元素,轮廓模糊的在空间上会感觉处于轮廓实的元素后方。



这是两个元素,放到一起就会感觉上是在同一个平面上的。没有虚实关系。

如果把其中一个圆的轮廓虚化:



是不是就会感觉出右边的会在左边的前面,拉出了前后的空间感。这就是我们的轮廓虚实了。

颜色虚实:越贴近背景色的颜色,在空间上会感觉处于后方。



还是这两个元素,如果把其中的一个颜色调成和背景贴近:



两相比较,颜色更实的飞碟,会处于颜色较浅的飞碟前面。

1.3.3 大小

越大元素会感觉越近,越小的元素感觉越远。

在实际操作中我们一般可以利用不同元素来制作这个效果。

比如这是一堆元素,如果大小都差不多,就会感觉是平铺在一起的,没有空间关系。



如果调整它们的大小, 重新摆放,通过近大远小的原理,就可以很轻易地打造出元素之间的前后关系,从而营造出空间感了。



大小对比空间再其他画面中的应用:



1.3.4 明暗对比

除了虚实、大小之外,明暗也能对比出前后关系,从而营造空间感。



通过纹理层次的明暗对比,一明一暗的对比,也能拉出前后关系。从而营造空间感。



1.3.5 穿插

利用元素相互穿插产生的前后关系,也能营造出空间感。

这是1个元素和两个圆的平铺,没有交集。



如果我给他们穿插重叠在一起:



那就能产生元素之后的叠压前后关系,从而也能营造空间感。

利用在海报中:



以上这五种方式就是我们今天分享给大家的方法啦,

在视觉海报的打造中,基本都不是只靠其中一种方法去打造空间感,而是3种,甚至5种一起运用,可以让塑造的空间感的更有层次细节和冲击力。

比如:轮廓虚实+颜色虚实+大小,或者:穿插+大小+明暗。

大家一定要灵活运用,自由组合,以画面最优效果为目标去做,不要局限在某一个框架里。

2. 字体性格

2.1 什么是字体的性格

字体也有字体的性格,不同的字体会呈现出不同的字体性格特征,比如高矮胖瘦、敏捷、邪恶、可爱、优雅文艺等等等等。通过精准地对字体的结构,笔画粗细,细节调整,字体效果等的处理表现字体的差异化,使字体的性格调性,与画面内容相匹配。

2.2 性格有哪些

2.2.1 力量感、沉稳

特点:横细竖粗/留白少/重心偏下/转折笔直



2.2.2 可爱

特点:圆润/不规则/扩张



2.2.3 优雅

弧度/纤细/重心偏高



2.2.4 活力

特点:倾斜/笔画延伸/笔画干脆,转折弯曲很少


2.3 字体设计实操

字体还有各种各样的性格,比如魔幻、哥特、血腥、恐怖等等。

我们在做项目的时候,字体的感觉就一定要抓得准,符合整个画面的调性:

比如这种欧式哥特的画风, 字体就可以加一下哥特元素,点缀点玫瑰、藤条。



刚硬科技的画风,字体笔画就可以粗一些,添加点科技感和几何图形,营造超前科技的感觉:



植物自然的风格笔画就可以柔和一些,带有弧度,把一些画面元素图形化点缀在上面:


2.3.1 字型特点的提取

具体实操怎么做的呢?我们今天就给大家分享一个案例,看看是怎么操作的:

这是一张视觉,我们要给他做一个主标题,这个主标题的字型特点应该如何从图里提取呢?


我们要提炼出三个点出来才能知道如何去做:


1.风格

我们先分析这张图,它的一个风格是有点魔幻+复古,神话传说加西域古代的一种史诗感。

我们可以找一些神话类史诗的类似的参考看看:



特征:

1.复古

2.重心高.

3.不用那么特别复古可用衬线体变形

2.特征

这个我们可以从人物身上去提取,人物有盔甲,我们可以把盔甲的特征提取出来:



3.配色

颜色也不是乱选的,一定要和图能呼应关联起来,那颜色怎么选呢?其实画面里已经帮我们选好了配色。我们观察一下画面:



整体偏冷调,墨绿色居多。,对比色有红色和黄色。

那我们为了突出字体,又能和画面呼应,那黄色就是再好不过的选择了。

那到这我们的设计目标就比较明确了:


2.3.2 字型设计

1.基础字型:

虽然是往复古了去做,但也不是真做成甲骨文,还是结合一下使用场景,和识别度。参考中也有部分是使用宋体去变形的,所以我们可以先选一个宋体的字体出来当做基础字型。


为了保证识别度,我们可以只做部分复古。

这里我挑灵下面“火”字,因为这个字处在中间,比较显目。



2.调整重心

参考复古类型的字体重心都会往上偏移,让字体稍显长一些。



3.加入特征

(1)锋锐:默认字体上有很多圆润的地方,我们都改成尖锐的感觉。



把每一个笔画都改掉:



(2)弯曲的尖角:

图形提炼:


加入到字体当中:



字型到这里就完成啦。

(3)字体转折的厚度:

字型完成了,字体转折的厚度我可以再字体效果上去做。在笔画中间加一个层次,以明暗分隔开,以实现盔甲上这种转折的厚度:



全部加上,看下完成效果:



结合到画面中看下:


效果还是很不错的,整体风格也比较统一。

这一块就是关于字体性格的内容,我们继续往下看!

3. 颜色情绪

接下来我们来说下关于颜色情绪的问题!

配色感觉不对?颜色脏?配色不高级?

这些问题一直困扰着我们。应该怎么配色呢?其实颜色也是有规律可循的,这篇文章就是带给大家一些颜色方面的启发,让你了解配色的底层逻辑,从而更明确快捷地配出想要的颜色。


3.1 饱和度到底在传递给我们一些什么

认识色彩饱和度的情绪:

因为不同的配色会带给观者不同的情绪感受,只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉,这种感觉对应什么颜色?

只有搞懂了逻辑,在之后的工作中,才能为我们的配色方案指明方向,而不会一开始就被难住。

如果我想配一个积极热闹活泼的画面,颜色怎么配呢? 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢?他们都有什么特点,为什么会这样?往下看

3.1.1 积极活力

我们先来看几组图片



用吸管工具提取一下它们的颜色观察

我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。

通过颜色提取,再观察它们选色的位置,可以发现它们的的配色的纯度和饱和度都非常高。

这是为什么呢?接下来我们降低饱和度看看会发生什么:



可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了,整体更趋于平稳和安静。

所以,高饱和度的配色会带给观者活力,动感,热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中,用来渲染or打造年轻、活力、热闹、动感等氛围。

3.1.2 温柔平静

我们再来看一组:


这一类图片就会给人一种文艺小清新的feel,这类配色和热闹、运动的感觉完全不同。

都是低饱和度高明度的颜色。所以,低饱和度的颜色会给人传达平和、放松、舒适的心情。

3.1.3 轻松休闲


这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性,不过高,也不会过低。

其实原理就是在取色器里,



我们看同一张图片,给我们的感觉:


高饱和度配色给人感觉冲击力很强,具有活力,对比非常强烈。

中饱和度画面就弱了一级,视觉冲击力没那么强。画面会放松一些,适合传递休闲的感觉。

使用低饱和度的颜色时,我们看到画面更冷静了,有些高级灰的感觉。

在以往的实际工作当中,我也是先用饱和度来定画面的大情绪基调,只有大的感觉对了,后面才不会出大问题。比如像一些战斗、pk、热血类的banner,都用高饱和颜色:


我们可以来吸取他们的颜色看看:



基本都是靠右边的颜色。

而像我在做下面这种类型的banner时,就会使用到中饱和度的颜色,给人一种轻松休闲的感觉:



我们再看下他们的色域:



都是趋于中间的位置。

最后一种低饱和的颜色,像下面这种作品,就有一种文艺、清新的感觉:


再来看看他们的颜色色域



都是比较靠左的颜色。

用饱和度来定画面的大基调,还是非常好用的,可以说是屡试不爽,大家可以好好理解并且用起来!

总结:



高纯度,高饱和度的颜色,会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官,常常应用于一些电商、运动品牌的视觉项目中,用来衬托年轻、活力、热闹、动感等氛围。



中饱和度的颜色饱和度和纯度都适中,显得中正平和,又不会有低饱和度那样的“平缓“,想要视觉年轻一些,但又不想饱和度那么的强烈,可以尝试选择中度的颜色。


低饱和度的颜色,会给人平和,舒适的感受,常常会结合大量无彩色一起使用,让画面传递出简约,自然,小清新文艺的感觉。


   

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

排版中的对比与对齐

纯纯

01. 对比原则

在版式设计中对比其实就是差异化。若两个元素有所不同,那就让他们截然不同,不要拖泥带水。

比如我用两个圆表达大小对比,那么下图则是拖泥带水的反面教材。



因为此图中的大小对比并不明显,看不出要强调哪个圆形,主次不明,对比含糊不清。



对比上图,此图大小对比明显,更能够有效的传递出重要信息,所以要用对比的话,就让元素差异化强烈一些。



对比的分类


对比的分类有很多种,比如:


除了这些还有字体类型的对比、距离对比、虚实对比、远近对比等,可以说存在差异的地方就存在对比。而在版式设计上,我们要将这种对比最大化,以达到吸引眼球、方便阅读的效果。



对比的作用


对比能简化画面,使版面主题更明确,更直观。


运用对比能使视觉冲击力更大,更抓人眼球。


对比使版面层级清晰,能够突出重点,从而更有效的传达信息。



对比的应用


通常一个作品中不会只用一种对比,而是多种对比方式组合使用的。比如上面左图用强烈的大小对比出标题与正文的层级,同时加入光影对比为主体打造立体感,更抓人眼球。右图使用方向对比与位置对比使版面更活跃,更有视觉张力。



几乎所有的作品都会用到对比原则,在设计中我们也要善用对比原则。



2. 对齐原则

对齐原则是让版面中的元素有一种视觉上的联系,以此来打造一种秩序感。



此版面中没有运用对齐原则,各元素间没有联系,凌乱而没有秩序感。




使用了对齐原则之后,整个版面规整又美观,建立了一种秩序感而更利于阅读。



对齐的分类


左对齐:版面中的元素以左为基准对齐。左对齐是最常见的对齐方式,简洁大方,利于阅读。



右对齐:版面中的元素以右为基准对齐。相对于左对齐来说不太常见,给人一种人为干预的感觉,阅读比率慢一些。



居中对齐:版面中的元素以中线为基准对齐。居中对齐给人一种严肃与正式感。



两端对齐:版面中的元素拉伸或缩放与同一元素两端对齐。两端对齐通常用于大段落文字编排中,利于阅读。



顶对齐:与左对齐相似,版面中的元素以顶部为基准对齐。



底对齐:版面中的元素以底部为基准对齐。



轴线对齐:轴线对齐是以版面中心线为对齐基准,而不是元素的中线。


除了上图的案例为轴线对齐外,下图的这几种也都是轴线对齐的形式。



轴线对齐能给人正式感,同时各个部分又富有变化,比较灵活。


对齐的作用


对齐的作用总结下来其实只有一点,就是能够使版面统一简洁更有条理,能够引导视觉流向。



案例1


这是一个同学的名片作品,给人感觉凌乱、没有秩序,信息传达也不清晰。那么问题出在哪儿呢?



首先,绿点部分的文字大小差不多,缺乏对比,导致层级关系不分明。



其次对齐方式不统一,没有秩序感。


那我们运用两个原则修改后是什么样子呢?



我们强调名片持有人的名字,将联系方式等其余信息左对齐,LOGO与二维码则置于右边,是不是整洁规整了不少,信息的传达性更强了。



同样的,我们也可以将联系方式与二维码移到版面右边,LOGO置于左下方,同样很规整,简洁美观,利于传播。


对齐与对比的组合会有多种变化,运用好了会使版面规整美观不少。


接下来看一下修改前后的对比图。




案例2


这是某同学的周练的海报作品,可以看到她对齐是统一的左对齐,没有问题。但是画面中却缺乏对比,主次感不强。另外图片选择也不美观。


同个主题下,另外一个同学的作品:



这个同学的作业突出了主标题,对比也非常明显,其余的信息层级也有对比变化,视觉上比较丰富,统一的左对齐也非常有条理。



同样的内容与主题,对比与对齐原则应用的好坏会直接影响版面的美观性与易读性。大多数情况下,对比与对齐是缺一不可的。


当然版式设计中有四大基础原则,「对比」、「对齐」、「组合」、「重复」,一般情况下这四个基础原则都是组合使用的。「对比」与「对齐」只是一部分,「组合」与「重复」我们以后再细说吧。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何更好的统一颜色规范?这个方法正在成为新趋势!

博博

Hi,我是彩云。咱们平时在做 UI 组件库的时候,会遇到一个问题,定义了很多颜色但在团队合作的时候,却依然还是会根据每个设计师自己的喜好来配色,很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰,那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例,希望能帮你解决这个难题。

如何更好的统一颜色规范?这个方法正在成为新趋势!

我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素:它们构成视觉语言,帮助定义品牌,并被开发和设计师每天用在产品设计中。

但如果我们在使用颜色上没有明确的指导原则,颜色被团队中的设计师按喜好使用时,将会导致产品看起来非常混乱。

如何更好的统一颜色规范?这个方法正在成为新趋势!

我们 APP 中的不一致例子

接下来我会告诉你,我们是如何做好颜色规范以及在整个项目中面临的挑战,正如你将看到的,这个项目并不像看上去那么简单:

  • 如何通过 Getaround 在设计和技术方面管理颜色
  • 概述这个系统的局限性,并说明我们如何改进它
  • 什么是语义颜色
  • 我们是如何实现它的,以及它带来的优势!


我们之前在 Getaround 中如何管理颜色?


1. 在设计方面

如何更好的统一颜色规范?这个方法正在成为新趋势!

和许多设计团队一样,我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中,可以在其中找到我们在产品中使用的所有常见样式,例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库(iOS、Android、Web、电子邮件)。

颜色名称过去是基于它们的外观。例如:紫色颜色是我们的主要颜色,而石墨色是基本文本的常规颜色。

2. 在技术方面

如何更好的统一颜色规范?这个方法正在成为新趋势!

在我们的 APP 中,曾经会用相同的系统来管理颜色。此外,还有一些语义颜色,但仅限于 iOS,开发用的也不多。

我们在旧系统中面临的限制


在使用这个系统时,团队反复面临同样的问题:

  • 如何确保从一位设计师到另一位设计师以相同的方式使用颜色?
  • 如果没有适当的指导原则,我们如何确保开发很好的还原?
  • 如果明天我们必须用全新的配色方案来改造我们的品牌,要怎么快速统一?

让我们试着找出我们是如何陷入这种境地的?

1)没有明确的颜色使用规范

所有设计师都使用相同的色板,但自 2019 年 Getaround 品牌重塑以来,除了引入不一致之外,没有明确关于如何使用它们的规范,所以设计师在选择颜色时迷失了方向。

然后他们将开始建立自己的参考资料,每个设计师都有不同的配色想法。

如何更好的统一颜色规范?这个方法正在成为新趋势!

例如:设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色?颜色命名在这里不是很有帮助

2)旧品牌的设计包袱

以前品牌的一些旧颜色仍在使用(按钮上的蓝色阴影,标题……)。到现在也没有真正的行动计划来迭代它们。

如何更好的统一颜色规范?这个方法正在成为新趋势!

旧驱动器品牌


我们对新系统的设想


在 2021 年初,我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。

我们问自己“5 年后我们的 APP 会是什么样的?”。我们会回顾,Getaround 品牌是如何成为我们视觉方法中心的。

如何更好的统一颜色规范?这个方法正在成为新趋势!

以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分

致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而,为了使这一目标成为现实,我们面临着一些挑战:

1)制定指导原则

我们如何确保每个设计师都可以依赖易于理解和使用色彩系统?拥有一个简单系统将加快使用速度。

2)颜色能通过可用性标准

我们如何确保从一开始就设计出易于使用的颜色?

3)易于维护并符合未来趋势

我们如何才能使系统易于维护并符合现在和未来的行业标准(例如:暗模式)


我们新的颜色系统:语义颜色


在我们的探索阶段,在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色:(主要?强调?)

我们还测试了 APP 界面在黑暗模式下的外观,以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本?我们开始与开发讨论这个问题,以了解他们有什么解决方案来处理这些问题。

语义颜色的概念很快就被开发人员提出来,因为他们知道并且很好地使用了这个概念。但对于设计师来说,又要如何准确理解呢?

1)什么是语义颜色?

语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。

如何更好的统一颜色规范?这个方法正在成为新趋势!

例如,你可以将颜色命名为“成功”或“积极”,因为它指的是含义,而不是“绿色”或“翡翠绿”。

甚至可以根据颜色在屏幕上的应用方式来命名颜色,例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……

2)从基于外观的配色方案到基于语义的配色方案

如何更好的统一颜色规范?这个方法正在成为新趋势!

如何更好的统一颜色规范?这个方法正在成为新趋势!

语义颜色并不新鲜,越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习

google: https://material.io/design/color/the-color-system.html#color-theme-creation

Apple: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color

Shopify: https://polaris.shopify.com/design/colors#navigation

Asana: https://asana.com/brand

显然,这种颜色系统有很多优点。因此,现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。

3)深入研究语义颜色

我们的新颜色系统由两部分组成:

  • 基础色板
  • 语义颜色

如何更好的统一颜色规范?这个方法正在成为新趋势!

基础调色板

我们与品牌团队密切合作,他们定义了一个全新的品牌,我们在工作时会围绕这个品牌考虑。

该品牌的每种颜色都采用多种色调进行调整,以创造更大的灵活性,一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们,但他们会选择在产品中效果最好的那些。

如何更好的统一颜色规范?这个方法正在成为新趋势!

基础调色板

语义颜色,语义颜色建立在用作参考的基础调色板之上。正如我之前解释的,命名不再是指颜色的“外观”(洋红色、棕色、绿色……),而是指UI 元素它们被应用于(文本、图标、按钮、背景……)以及该元素的状态(活动、非活动、成功……)。

请参阅此处的命名法和一些示例:

如何更好的统一颜色规范?这个方法正在成为新趋势!

语义颜色结构和示例

这意味着来自基础调色板的颜色可以用于多种语义颜色:

如何更好的统一颜色规范?这个方法正在成为新趋势!

这就是我们根据这个新原则重新调整颜色命名的方式:

如何更好的统一颜色规范?这个方法正在成为新趋势!

如何更好的统一颜色规范?这个方法正在成为新趋势!

我们通过设计师和开发进行了内部用户测试,以确定命名语义颜色的最佳方式。

我们尝试了很多不同的命名方法,发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护,同时在命名方面有足够的延展性。

如何更好的统一颜色规范?这个方法正在成为新趋势!

如何更好的统一颜色规范?这个方法正在成为新趋势!


语义颜色的好处


1)语义色彩嵌入设计原则

语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测,因为视觉语言直接传达了设计决策。

如何更好的统一颜色规范?这个方法正在成为新趋势!

例如:在这里,颜色命名使设计师更容易做出正确的选择。在我们的原则中, *Accent* state 用于交互元素。

2)解锁黑暗模式

语义颜色可以适应不同的主题。语义颜色的名称始终相同,但它的外观可能会根据所选模式而改变。例如,语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式,将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者,因为它将使它更加面向未来。

如何更好的统一颜色规范?这个方法正在成为新趋势!

明暗模式下的语义颜色 Primary.Background

3)语义颜色高效灵活

如果我们将来要更新颜色,使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。

另一种情况可能是更新特定 UI 元素的颜色,例如按钮,而无需触摸使用紫色颜色的其他元素。在这种情况下,我们只需要更新 ButtonBackground.Primary 颜色,非常简单。

如果没有该系统,更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。

如何更好的统一颜色规范?这个方法正在成为新趋势!

4)颜色组合指南

这个系统似乎很容易使用,但设计师仍然有一些问题:

  • 我什么时候可以使用正常文字颜色?
  • 我什么时候可以使用次级文本颜色?
  • 我什么时候可以使用可交互颜色?

为了帮助设计师选择颜色,我们创建了一个交互式指南,列出了所有可能的颜色组合。

我们在 figma 原型中创建了这个指导原则,每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合,以最大限度地保持一致性。

如何更好的统一颜色规范?这个方法正在成为新趋势!

Figma 中内置的语义色彩交互指南

如何更好的统一颜色规范?这个方法正在成为新趋势!


结果


采用这种新的颜色系统产生了一些变化:

1)我们从“Foundation”库中提取颜色,并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到  Dark 模式。这也使库更轻且更易于维护。

如何更好的统一颜色规范?这个方法正在成为新趋势!

2)语义颜色已在我们的 iOS 和 Android 应用程序上成功实现,我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。


总结


总结下今天学到的内容:

1)发现并准确描述团队在使用颜色时遇到的问题

2)如何从提出设想,到以新的方式来定义颜色

3)如何通过语义化颜色来使得大家更方便的使用颜色,我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理,这样团队协作才会更加高效。

作者:彩云Sky¹

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

博博

B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系,从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。

格式塔主要包括 7 个基本原则:

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

今天我们就来总结下,格式塔原理在 B 端产品中是如何应用的?

接近性原则


我们先看 2 张截图,分别是不同分辨率下的界面效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

可以明显的感觉到高分辨率下,菜单列间距离较大,菜单的归属关系很清晰。而低分辨率下,菜单间的距离变小,特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则,距离近的关联亲密,距离远的就各自独立分组。

当我们想要传达给用户层级关系时,就需要善于利用接近性原则。例如表格上方的功能按钮,通常我们将高频、核心操作放置在左侧,低频、辅助功能放置在右侧。通过增大元素间的距离,达到功能分区的目的。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

相似性原则


相似性原则是通过颜色、尺寸、图形等方面的共同属性,实现信息的分组或者高可读性。

例如在可视化图表中,不同范围值的指标采用不同的背景色。通过背景色的差异,将同一范围内的数据形成视觉关联,提高用户对信息的识别效率。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页,都采用了双列设计,左侧主要以高频的业务功能信息为主,右侧是辅助运营信息。两列尺寸宽度有明显差异,用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异,并有效地突出业务信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

闭合性原则


IBM、苹果的 Logo 设计,无论是“用刀砍过”,还是被“偷咬了一口”,用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在 UI 设计中,则会通过对齐方式,形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色,内容区借助标题、卡片对齐形成视觉闭合空间,最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

另外闭合性是需要元素之间相互辅助的,单独的元素无法构建出闭合空间。以下图为例,虽然四个小的卡片做了间距分割,但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

连续性原则


用户更习惯于从左到右的横扫阅读,因此连续性主要体现在横向空间中。

下图中,虽然左侧的标签文字与右侧的内容信息有较为明显的间距,高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体,而是理解为两组信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在某些场景中,如果信息平均分布,不会产生连续性的视觉感知。

例如下图指标监控中,指标都是采用小卡片,间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点,没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时,需要逐个检索,花费的成本更高。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

简单对称原则


通过上述很多图片,我们可以看出页面元素基本都是横平竖直,中规中矩的元素和分割方式。或许有些单调乏味,但是胜在简单,不会带来额外的视觉噪点。

特别是 B 端产品,基本看不到异形的存在,甚至全圆角矩形都很少见到。即使有异形,也只是作为视觉表现元素存在于内容中,而不会作为空间的划分边界。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

主体与背景原则


主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性,凸显弹窗信息。

当我们需要着重表现内容时,同样适用于主体与背景原则。例如登录界面的设计,会通过差异化的背景、阴影等方式,带给用户清晰的视觉层级,适当凸显输入框的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

而 B 端内容区是核心空间,基本都是采用纯白背景,与页面背景形成对比,从而占据信息的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

共同命运原则


共同命运原则听起来有点玄学,指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少,我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如 iOS 系统中,桌面布局编辑态下抖动的图标,可以与静态不可编辑的内容形成隔离效果,视觉引导性更强。同样今日头条频道编辑时,也采用了抖动效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

总结


虽然 B 端产品没有 C 端色彩丰富,表现力上没那么炫酷。但是两者对信息传达的要求是一样的,要求和谐、有序、层次分明,辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现,产品经理或交互设计师在原型设计时,也要重视格式塔原理,辅助设计方案表达,提高团队间的协作效率。

今天的分享就到这里了。如果有更好的案例,欢迎评论区留言分享给大家~


作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



终于整理完了,这些图标库也太好用了!

seo达人


首先先给大家推荐两款sketch插件:Dapollo、Kitchen 3 

 

Dapollo

Dapollo插件是一款由蚂蚁金服和Iconfont打造的设计插件集,这套插件包含了组件库、页面模板库、色彩库、图标库等设计素材,而且质量很高,最厉害的是支持设计稿一键导出前端代码,能帮助开发效率提升和保证还原度。

里面集成iconfont的图标功能,亲测在iconfont系统维护期间还可以使用,直接搜索拖拽使用即可。

图片

插件获取:后台回复“Dapollo”自助领取

 

Kitchen 3

kitchen3集成了Ant Design、Creek Design、Rex Design L 等设计系统的图标资源可以在图标面板中快速拖拽对应设计系统中的图标。iconfont升级期间可以作为临时性的备选方案使用。

图片

Kitchen 支持图标的一键替换!只要是从Kitchen 中拖出的图标,就可以点击其他 icon 直接替换,演示如下:

图片

同时集成了iconfot上的图标资产(iconfont维护期间,暂时不能使用),可以直接选择自己项目中的图标资产:

图片

更多介绍请查看往期文章设计师必看|这款设计神器让你效率提高十倍!

后台回复“Kitchen3”自助领取插件包

 

下面推荐几个图标备用网站,大家按需领取:

1、https://iconpark.oceanengine.com/official

图片

字节跳动的官网图标库,可自定义大小和线宽,就是图标资源相对iconfont较少。

2、https://icons8.com/animated-icons

图片

icons8内置了3700 多个动画图标,全部以 JSON 格式提供Lottie、GIF 和 After Effects 格式,可直接下载源文件,不过企业商用需要授权收费的。

3、https://www.flaticon.com/

图片

线性、面性、插画类图标资源提供PNG、SVG、EPS、PSD 和 CSS 格式,会有付费内容。

4、https://iconmonstr.com/

图片

iconmonstr – 免费的、巨大的、不断增长的简单图标来源,由来自德国的资深设计师 Alexander Kahlkopf 创立,拥有超过 20 年的图标设计专业经验。

5、https://ikonate.com/

图片

与字节图标库类似,可自定义图标大小、线宽、颜色,缺点就是资源相对较少。

6、https://remixicon.com/

图片

Remix Icon 是一组为设计师和开发人员精心打造的开源中性风格系统符号。所有图标均可免费用于个人和商业用途。

7、https://feathericons.com/

图片

国外免费开源图标库

8、https://akveo.github.io/eva-icons/#/

图片

va Icons 包含480多个精美的开源图标,用于常见的操作和项目。在桌面上下载我们的套件,以便在您的 Web、iOS 和 Android 数字产品中使用它们。

9、https://heroicons.dev/

图片

麻省理工学院授权的图标,可直接在Figma上打开。

10、https://3dicons.co/?utm_source=appinn.com

图片

制作精美的开源 3D 图标在CC0 下100% 免费用于商业和个人用途与任何设计工具一起使用。里面图标内容挺丰富,大家可以多点点看下。

以上网站地址也更新在图象官网上了,大家可以自取链接地址:https://www.tuuux.com/design/toollist

图片

以上给大家分享了两款sketch插件和10个图标资源站基本能够满足大家的需求,希望能够帮助你在工作中提高效率。

 

原文地址:小六可视化设计(公众号)
作者:小六
转载请注明:学UI网》终于整理完了,这些图标库也太好用了!

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

截屏2021-05-13 上午11.41.03.png

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

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

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



B类新品场景设计

seo达人


大总管默默 APP设计  46浏览 

图片
前序背景

整个电商导购模式伴随着着人群与场景的精细分层,从传统的商品货架式延伸至更具多元化的场景导购式,如“聚划算”、“百亿补贴”、“有好货”等。

 

图片
什么是 B类买家场景

基于1688平台商家和货源情况,结合对买家人群的洞察,我们发现B类买家来平台的核心诉求是“找商机、找供给、好服务”,商机寻找是B类买家建立新采购关系的主要动机。B类买家场景本质就是围绕某一类买家找商机诉求,聚合对应不同属性特征商品及服务,帮助买家高效找挑建立新的采购关系。

图片

以“找新”场景为例,简单介绍一下我们的设计思路

 

图片
新品场景设计案例

B&C买家的找新差异

新品消费崛起通常C端以新品体验价、限量抽取、试用等模块来打造新品频道的心智;而与C类消费者“满足个人喜好、看重个人体验”有所不同,B类买家“找新品”的行为背后其实是一个商机发现与判断的过程;

图片

现状

首先依靠数据分析得到平台找新买家的三大身份占比,对他们的生意特点、拿货特征、服务诉求进行分析,结合定向的调研走访,梳理出核心关键问题,主要集中在“找挑效率低、决策参考少、新品找不到”;

因此我们制定了设计方向:通过直播的方式,以“新品首发”栏目打造新品心智;围绕人群个性化差异,进行商机新品卖点表达并在链路中透出,助力买家提升找挑新品效率。

频道场景搭建

从场景心智设计开始,以2个核心维度展开:1.了解用户行为特征;2.心智框架构建;

1、用户的行为特征

 针对商品卖点信息比较少,无法判断哪个商品好卖的问题,思考如何基于买家动线做有效的设计表达方案更好的引导决策。我们去分行业进行厂货内容维度拆解定义,从行业货盘分类、卖点分类到核心特征提取,多维度抽取关键要素。基于站内外用户触点和进货渠道的差异做不同的表达方式,通过视频动态化引流吸引用户注意产生认知,通过图文做高效的决策判断。

图片

下图是一个典型的买家画像(如图)

图片

不同类型的买家对新品的定义和需求不同,对进货渠道、商品特征、商家要求也存在差异。买家在新关系中拿货选择较谨慎,提升货盘匹配度、建立对商家的认知信任、降低拿货决策成本成为当前首要解决的问题。

2、心智框架的构建

基于对买家找新诉求关键信息抽炼,设计内容浏览路径,与用户进行认知匹配,加深用户对于场景心智的认知;

进行以下三个设计方向实施:

图片

01.入口有感知

通过渠道上新、新趋势与线下模式相匹配,让买家快速了解频道定位,满足强发现性买家需求;

图片

02.内容有认知

通过强化服务及货盘映射,满足买家低门槛快速测款需求,以流行风格、渠道牛商、趋势新品等主题内容高效聚合,加深买家对于场景心智的认知;

  • 找新拿样阶段下服务诉求被满足:起批门槛低、小单拿样;发货退货有保障、快速测款;
  • 与自身线下找新习惯相匹配:下线档口、货盘风格映射、平台趋势参考;

图片

03.导购有效率

对于B类买家来说,选新品更多侧重对未来商机确定性的投资;新品在前期普遍销量较低,无法单以销量热度做为决策条件;围绕商品生命周期、货盘特征拆解商机关键决策点在链路中透传,提升买家导购决策效率;

a 商机因子拆解 – 以动态封面、商机表达助力找挑效率

  • 初期:款不确定,基于商家硬实力,以商选品,快速捕捉商机;如:十三行档口、青岛即墨产业带商家;
  • 发展上升期:风向标、商机热度逐步增多,具有流行新元素;如:新材质、新图案、新工艺;
  • 爆发热卖期:下游市场热度升高、消费数据初步形成,以款找商,选更优供给 ;如:同款更低价、服务更确定;

图片

图片

b 动线设计 – 不同阶段环节下的拆解表达

图片

 

写在最后

在打造新品场景中,除了刚刚所提到的场景的搭建、卖点的表达,同时我还对商家做了研究和分析,了解商家线下发新的渠道和方式,以及不愿意把新品发布在平台的原因;我们通过“直播首发”集中上新,同时以工具、数据的方式帮助商家更好的对商品进行表达,增强播后一定周期内商品转化和新关系建立的效果感知,从而提升商家新品上行的意愿度。

对于B类导购场景的设计我们还在不断的探索,在B端的场景下,围绕用户多类型角色、多阶段需求以及成熟的下线模式去做特征的洞察和映射,以设计的手段解决改善问题;B端的设计师除了要懂设计本身,还要拥有业务、商业的思维,尽可能走进了解你的用户,也许在这里我们很少有推陈出新的大动作,但每一个设计小点的背后都藏着对用户诉求不断分析拆解的努力。

感谢阅读

文中设计稿仅做DEMO演示用,具体以实际线上为准

 

原文地址:AlibabaDesign(公众号)

作者:CBU设计部

转载请注明:学UI网》B类新品场景设计

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

截屏2021-05-13 上午11.41.03.png

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

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

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



LOGO设计

seo达人


图片

底板类型,只是众多创意方法的其中一种。
这种类型的优点是效果氛围丰富, 自身的风格调性比较明确。常常用在大型活动主文案、或是比较复杂的画面中,能很好地串联元素跟文字之间的联系。

这种类型都有什么要点和制作方法呢?等我依次给大家分享

 

特点

我们先来看一些同类型作品的样例:

图片

1.底托

很清晰的一点,这种风格最主要的一点就是有一个经过设计的字体底托以让字体清晰,不受画面其他元素影响。

2.重量感

字体厚度、底托厚度、高光、阴影

3.主题感

主题感很强,这种方法设计出来的字体往往会有很强的主题倾向性。也就是风格指向。不用看见搭配的画面 也能知道传达的是个什么样的氛围。

图片

 

主题感怎么找?

1.分析需求

第一步我们要做的就是分析需求,提取关键词,明确设计目标,我们才能顺利地往后执行。

我们看看这个需求,首先,这是一个漫画LOGO需求。我们应该先了解故事剧情并收集整体一些画面风格,从这些画面中提取可以提炼视觉元素的关键点出来:

图片

观察漫画内容,我一共提取出了下面6个关键词:

图片

然后把他们转化提炼成视觉元素。

2.提炼视觉元素

我们挨个关键词提取视觉元素,

比如科技感:

图片

科技感的特征一般由科技线条构成。

装甲:

图片

这个漫画里就有,直接仿造画风就可以。

灯光:

图片

能量:可以做成类似能量护盾,或者闪电的样式。

图片

以上就是我们视觉元素的提炼了。接下来就是具体的执行。

 

执行

底板类型的我们第一要做的当然是底板了,我想到的是可以用机甲的元素做底板,把文字承托在上面。

1.制作底板

底板要注意两个点

(1)排版

我们可以先做一个大概的排版

图片

要注意底板不要太大也不要太小,字体在底板上占80%左右的面积比较合适。

(2)造型

造型这里也是比较重要的,我们可以多观察漫画里的视觉元素来做。比如我这里是参考的战机:

图片

它整体的一个机翼造型还是蛮酷的,我们大概秒回一个剪影出来

图片

还是蛮帅的。
放上字体看看比列结构,跟着排版调整一下:

图片

注意控制占比在80%左右。

(3)层次

底板如果只有一层的话,就会显得有点单调,层次不够。也就做不出厚度来。

参考了下底板类型的层次是怎么做的,总结了三种出来:

厚度增加层次:

图片

做出字体的厚度和,底板的厚度来增加层次感,比较稳定厚重。

元素穿插点缀增加层次感:

图片

刻画一些贯穿前后空间的元素, 可以增加层次感和统一性。

层次堆叠:

图片

这种就比较直观,就是一层一层的去堆叠累积,以增加层次感。

我们可以结合起来使用:

所以我们可以在不变动大型的情况划分一下,划分些大的层次出来。

图片

图片

这样就丰富多了,其他的一些厚度啊之类的,可以在上色的时候再添加。

(4)配色
我同样参考下样例:

图片

总结几个点:

1.底板颜色要和字体形成对比,才能凸显文字。

2.一般底板使用暗色。文案使用亮色,或白色。第四个那种使用同色系的可能就有点区分不开,字体不够突出。

方向:

字体:使用白色

底板:暗色

白色好说,暗色怎么找呢?检查了一遍视觉参考,发现有一个飞船颜色挺好的。

图片

刚好又是暗蓝色,这不是符合我们的要求吗?

用到底板上看看:

图片

感觉不错啊!

(5)刻画细节:

把我们提炼的视觉元素拿出来用上

图片

飞船上的线路缝隙,手掌上圆形的灯。

添加下看看:

图片

精致多了。

这里要注意添加细节的两个目的:

1.让我们的元素象形意义更明确,简单说就是画啥像啥。让人一眼能看出来你这个是什么。

2.层次,有凸起的地方(灯光,厚度),有凹陷的地方(比如缝隙,线路)。增加细节上的层次感。

 

2.文字制作

1.结构

图片

我们看下现在的效果,如果直接放文字就会显得很薄,字体压不住底部。轻飘飘的感觉,我们上面总结的参考中都会给字体增加厚度来压住底部,我们可以试试,给文字再增一层底板,来增加厚度:

图片

是不是就整体多了?
所以字体结构,分了字体本身和字体底板两部分来组成。

2.字型

字型肯定是要做的,但因为字体设计单独一个门类,我这里就不细讲了。
我们参考一些比较英朗科技感的参考来做就可以,展示一下:

图片

3.细节

提取科技线的元素:

图片

添加到字体表面刻画出科技感:

图片

4.一个亮点

在字体上提取一个笔画,做特殊效果,使其与别的笔画有明显的视觉差异:

图片

这里我是把“灵”字中间那一横提取出来做了发光灯灯光的效果,使之成为一个视觉亮点。

 

3.添加特效

最后我们把字体放上去,整体加上一些前面提炼出来的闪电能量类的效果:

图片

图片

这样我们的logo就制作完成了。

 

总结

当我们要做某一种类型视觉的时候,不要光看表面的东西。好看或者不好看,什么也学不到。可以总结提炼他们的特点出来去深挖研究,理解里面深层次的逻辑,这样我们才能进步得快。

然后要去学习挖掘提炼某一种类型视觉元素,把他们融合应用到我们的项目中去。把控好每一处细节,才能出优秀的作品。

希望对大家能有所帮助和启发,谢谢。

 

原文地址:菜心设计铺 (公众号)

作者:慢热

转载请注明:学UI网》LOGO设计

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

截屏2021-05-13 上午11.41.03.png

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

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

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




设计师突破瓶颈的四大狠招,专治止步不前

seo达人



设计是一个看上去有点难,实际做起来更难的行业,一件作品看起来平平无奇,可你真要做起来还不一定有人家的好,又或者你觉得别人的作品只是比你的好一点点而已,但你不要小看这一点点,想要跨越这一点点,你也许需要付出一两年的努力,甚至是更久,因为设计师的瓶颈期非常多,很多设计师在两三年期间都没有任何长进也是很正常的事情。不进则退,在这个竞争激烈的行业里,我们要尽量缩短自己的瓶颈期。葱爷本篇文章给大家推荐四个突破瓶颈的办法,希望对你有用。

 

01.刻意练习基础技能

大部分设计师做不出好的设计作品主题是因为基础不够扎实,其实这也正常,大学里安排的课程太多,学生也认识不到基础的重要性,不会好好学,或者会严重偏科,所以很设计师都没利用好这个打基础的绝佳时间段,包括我自己。而非科班出身的设计师问题会更严重一些。所以,针对基础的技能进行刻意练习很有必要,特别是自己明显的短板。

 

平面设计师的基础技能主要有这么几个:图形设计、字体设计、版式设计、色彩搭配。那么要怎样进行刻意练习呢?

❶ 选择一个自己最需提升的技能,比如你目前的主要工作就是排版,而你的版式又很弱,那你就优先对版式设计进行刻意练习;如果你的工作是海报设计、广告设计、包装设计这种考验综合能力的工作,那你就选择自己最薄弱的环节去提升。

❷ 买一些该类的书籍、找一些该类的文章来看,并且要收集、赏析巨量的作品,最好是每天都看点此类的作品。

❸ 每天都花一点时间做练习,如果想要提升色彩搭配,可以每天搜集几张图片并提取出它的配色,还可以每天用颜色来表现一个主题,比如春、夏、秋、冬、喜、怒、哀、乐、酸、甜、苦、辣等等。

图片 

❹ 把自己每天的工作内容或成果分享到朋友圈、微博或者是微信群里,也可以是某个人,这么做既可以适当给自己增加一点打卡的压力,也有可能收到一点反馈。

❺ 什么时候可以暂停呢?首先,这项技能已经基本可以满足你的工作所需,客户或上级几乎不会再挑你这一方面的毛病。其次,你自己觉得已经有很大进步,套路和方法基本掌握,短时间很难再有提升,这时你就可以暂停去提升其他技能了。

 

02.学习新技能

对于基础还不错的设计师,特别是一些老鸟,最有效的突破瓶颈的方式就是学习一项新技能,比如3D、插画、合成或是动效,最好是选择一个你在工作中能最常用到的技能, 比如电商设计师可以优先选择3D或合成,品牌设计师可以优先选择插画。

图片

这些都是比较主流、比较实用但是大部分设计师都不具备的技能,这些技能可以大大丰富设计的表现手段,能给你的设计作品带来完全不一的感觉,算是横向提升了自己,这种方式比纵向提升自己更快,效果更明显。

 
 

03.进一个好的团队

大家都知道环境对学习的重要性,另外,很多人都应该听过“跟对人,做对事”这句话,而加入一个好的团队实际上就是找到了一个好的环境,以及跟对了人。曾经就有朋友跟我说过,在某家公司待了一年,感觉比在上家待了两年学到的东西还要多。

当然,好与不好是相对的,我们没法都一下挤到头部的公司里去,毕竟面试者与公司是一个相互选择的关系。但是对于想突破瓶颈的你来说,一个理想的设计团队应该要有一些基本的要求,我自己是这么认为的:

❶ 团队中一定要有水平比你高比较多的设计师,比如主管或总监;有高人指点比你自己摸索要进步快很多。

❷ 该公司的设计出品不能低于行业平均水平,公司整体水平不行,你想你能行吗?

❸ 公司老板是认可设计的价值的,乙方基本都能满足这一点,但是很多甲方老板都觉得设计可有可无,或者觉得设计要有,但是好与坏不重要,有就可以了,这样的公司对设计的要求基本上是只求快不求质,能做出啥好作品。

 

04.用营销思维做设计

很多人说设计是技术活,其实这句话只对了一半,因为设计师确实需要懂一些技术,比如设计软件,你也可以把设计的基础技能看成是技术活,就像手艺人一样,设计确实有熟能生巧的成分。但是仅仅懂一些技术很难做出真正优秀的设计作品,纵观那些真正优秀的商业案例,通常会有消费者洞察、品牌思维、营销思维在里面,设计的形式、图形、文案、编排都是有逻辑、有目的的,而不仅仅是从美观、艺术的角度去考虑。

图片 

当你学会站在更高、更广的角度去思考设计、去做设计时,你的设计能力就得到升华。

 

 

图片 

古人有云:“活到老,学到老”、“学无止境”,不管你做哪个行业,学习都是一件需要持续做的事情,这哪是什么内卷啊?这明明就是老祖宗留下来的文化。

 

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

作者:葱爷

转载请注明:学UI网》设计师突破瓶颈的四大狠招,专治止步不前

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

截屏2021-05-13 上午11.41.03.png

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

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

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




UI设计细节分析

seo达人


正文

产品设计做到极致的时候,发挥的空间就会深入到细微之处的功能,看着简单的功能,也会被设计师脑洞大开。不仅带给用户更好的使用体验,也通过趣味性和差异化的表现方式,带来不一样的感官体验。

为了提高大家对于细节设计的灵感,今天黑马哥为大家整理了一些细微之处的优秀设计方案,希望可以带给大家更多设计思维。

 

 

一、个性化的 UI 设计风格

随着用户群体的年轻化趋势,产品 UI 视觉层也在尝试更多年轻化的风格,更独特的视觉风格才能增加年轻用户的好感度。最近体验到皮玩 APP,描边风的设计手法和青春活泼的配色,整体的界面设计带来独特的视觉风格,让人眼前一亮。

通过描边可以中和色彩之间的排斥感,也能强化风格特征,是色彩构成中较为常用的手法。被运用到 UI 设计的表现中,带来的风格感也是独特新颖的,将成为一种风格趋势被延续。

图片

 

 

二、视觉区域的业务动态演绎

强化主界面视觉感通常会在顶部区域进行,通过品牌色、插画、IP 形象配图等形式居多,再配合动效形式效果更佳。在每平每屋 APP 首页中,顶部区域通过动画形式演绎业务属性,不仅增强了该区域的视觉感,达到吸引用户关注的目的;也将产品的业务属性表达出来,加深用户的记忆点。

图片

 

 

三、增强操作体验的情感氛围

通过爱奇艺 APP 在端午节期间观看视频时,单击或者双击屏幕则会出现欢快舞动的粽子形象,营造出节日氛围。情感化的设计增强了操作体验度,趣味性的设计也营造出更好的感官体验。

 

 

四、带给你美食诱惑的下拉刷新

麦当劳在麦麦商城栏目的下拉刷新设计中,采用汉堡形象结合层级动效进行表达,让人眼前一亮。动效拉长的汉堡不仅体现出份量感,激发用户的食欲;汉堡形象就十分麦当劳,展现出品牌关联性。

源图像

 

 

五、刷新状态下的趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多,不仅可以带来情感化的体验,也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象,还通过下拉的程度将形象拉长,最后再配合表情和动态营造出趣味性。

 

 

六、滚动的 3D 元素强化视觉感

随着三维设计的流行,在 UI 场景中也掀起了流行趋势,出现在视觉强化、图标设计、按钮设计等元素中。吃货笔记 APP 将 3D 元素的图标作为登录界面背景设计,配合滚动的动画表达,带来了非常惊艳的视觉效果。强化视觉感和青春潮流的风格,可以将用户的关注度转移,降低对于功能操作的排斥感,也提高了产品设计的感官体验。

图片

 

 

七、积分兑换的可视化表达

积分兑换是增加用户粘性的惯用形式,如何提高积分活动的参与度是设计重点。麦当劳 APP 将积分兑换模拟真实用餐场景,不同积分值对应不同套餐,交互形式简单易懂。可视化的设计表达增加用户的理解度,实物照片增加美食诱惑,吸引用户参与积分活动,用户体验度较好。

 

 

八、个性化的界面布局设计

随着产品设计越来越成熟且丰富多样,在 UI 布局层面也不断突破常规束缚,呈现出更大胆的设计解决方案。PODO 漫画启动页过度到首页时,布局做到自然过渡且风格特异,打破常规的界面布局给人眼前一亮的体验。在浏览过程中不仅有视差感的体验,动效的结合也增加了设计的关注度。

图片

 

 

九、3D 实景增强购物体验度

如今的生活方式已经是足不出户就可以满足购物需求,众多产品为了提高购物的真实感和体验度,利用 3D 实景逛店提高场景代入感。屋颜 APP 利用 3D 实景打造了线上体验馆,虚拟空间体验过程中点击家居产品即可进一步了解商品信息。场景感的体验馆让商品展示更有代入感,也打造了不一样的购物场景,带给用户更好的使用体验。

图片

 

 

十、情感化的步骤设计

针对步骤或者流程设计,除了简单易懂的描述方式以外,通过配图/图形等来辅助用户理解,往往可以使得传递效率事半功倍。每平每屋 APP 在展示装修步骤的设计中,通过 IP 形象结合场景来表达不同步骤的场景感,不仅让步骤信息更易理解,也使得单调的步骤变得更有趣味性,带给用户的感官体验也是非常不错的。

图片

 

小结

越是简单的设计越容易被人忽略,看着简单做起来却难以突破,想要做出差异化的设计,就要从细微之处探索不一样的表现形式。体验和分析优秀的设计,是为了提高我们的设计感知能力和积累解决设计问题的灵感。

希望今天为大家分享的设计案例可以带给大家更多灵感,描述内容仅代表个人观点,不足之处大家互相弥补。

 
 

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

作者:黑马青年

转载请注明:学UI网》看着简单,老司机做出来就完全不一样(UI设计细节分析)

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

截屏2021-05-13 上午11.41.03.png

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

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

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



探秘|QQ社交形象年度盘点设计密码

seo达人



图片

 

概述

每年年底,QQ都会迎来一年一度的年终盘点活动,帮助用户实现QQ社交记忆回溯。通过生成用户专属的社交形象,拉近用户和QQ之间的距离,体现品牌温度。

 

一、设计目标

年度盘点活动不同于主题运营活动,是对QQ用户年度高光时刻的总结。在活动设计目标的设立上,我们希望塑造QQ温暖品牌形象的同时清晰展示QQ用户年度的社交记忆点,通过创造用户记忆点,激发用户分享。

图片

 

二、创意构思

我们从QQ用户熟知的社交行为、场景出发,进行视觉元素延展。将用户的浏览过程喻作QQ社交记忆的探索历程。通过QQ元素等场景映射,唤醒用户的社交记忆,最终形成用户专属的社交形象。

图片

 

三、风格设定

基于活动的目标我们衍生出以下设计关键词(见下图),简洁有品质是本次活动视觉风格的核心传达目标。

图片

1、色彩

为凸显回忆感知以及透传QQ品牌。在色彩的选择上我们使柔和的蓝黄渐变色系,背景色系就像天空会跟随活动节奏、故事内容而动态变化,利用色彩变化传达时光回溯的氛围感知。

图片

2、质感

考虑到整体的风格设定偏洁净明快的感受,我们多以玻璃、半透明3s,哑光三类材质为主。选择透光性强与色彩融合度高的材质搭配使用,让画面更具轻盈、简约的品质感。

图片

 

四、视觉表现

1、信息传达

年终盘点活动与主题运营活动不同,繁冗的氛围传达并不等同清晰的信息传达,在活动的设计上,我们希望一页只讲述一件事,弱化装饰,突出主体内容。

图片

2、品牌透传

场景内我们融合了QQ品牌调性的元素,如聊天aio、消息气泡,QQ空间等,加强用户代入感。

 

图片

3、动效编排

我们根据页面场景的展示内容类型,进行动画节奏上的编排。保持信息传递的效率,并在需要氛围强化的环节增强动画吸引力。营造灵动的内容浏览体验,提升动画张力。

图片

在动画的运动样式上,我们提炼出映射QQ社交场景的动态设计语言。通过模拟聊天气泡出现、新消息通知弹出、空间访客踩一踩等社交场景中的动画形式,透传QQ品牌调性,增强动画表现力。

图片

图片

 

五、激发分享欲

从设计层面,如何激发用户的分享欲?在本次活动分享中用户的专属社交形象扮演着重要的角色,接下来我们将介绍影响社交形象品质的三大设计因素。

 

图片

1、形象设定

我们选用QQ作为社交形象主体,根据用户不同的社交属性去赋予其色彩、材质的变化。在初步的生成方案上,我们尝试挖掘更多的组合可能性,从QQ围巾、嘴巴等部件进行材质变化。但三维的部件设计、审核成本高且组合起来多种情况形象差异性小。

图片

图片

为此我们降本提效精简了生成逻辑,在鹅身上视觉强感知的场域进行差异化设计。

图片

2、构成规则

我们将社交关键词分为三大阶级并衍生出社交形象构成的梯度规则。从社交小白到社交天花板,不同强弱的社交属性决定着鹅身的变化。例如低阶的材质表现使用的是石膏、木纹,形容人们在社交上木讷、寡言少语,而高阶的鹅身质感、色彩,图案表现更加丰富。 

图片

图片

3、隐藏款埋入

在QQ形象设计上,我们根据不同的社交关键词进行了不一样的设计,包括样式、材质、颜色等,这些不一样的设计在隐藏款上尤为突出。

图片

例如针对社交关键词“一呼百应KOL“,此社交关键词形容的是人气高,是众人的焦点,为了体现这种超高人气,QQ形象通体采用透明材质,并在内部放置了很多不同的体现开心的黄脸表情。

图片

图片

在隐藏款“自带光环的主角”的设计上,我们希望传递出受人瞩目的光感,结合我们的生活,光线经过玻璃后,通过不断折射反射,能很好的传递出多彩和绚丽感觉,所以这款QQ形象通体采用了玻璃材质,强化和传递出受人瞩目的主角光环。

图片

图片

隐藏款之外,其他更多QQ形象我们也会根据社交关键词进行不一样的设计。

 图片

图片

图片

 

六、形象展示

  • 金属鹅 Metal Q

图片

  • 玻璃鹅 Glass Q

图片

  • 树脂鹅 Resin Q

图片

图片

图片

图片

 

七、形象延展应用

除此之外,我们在春节贺卡活动中还复用了部分鹅身形象,并为虎年设计了专属的虎纹迷彩鹅。期待后续在运营活动中尝试更多的个性化QQ形象,刷新IP,升华品牌。

图片

 

结语

在当今社会强调本我的趋势下,活动千人千面的属性越发重要。将经典的QQ形象与用户社交特征相结合,传递具备独特性、品质感的品牌视觉表现,更能拉近QQ与用户的距离。我们相信在未来的年终盘点活动中,QQ会带给大家更多的惊喜,敬请期待吧!

图片

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》探秘|QQ社交形象年度盘点设计密码

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

截屏2021-05-13 上午11.41.03.png

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档