首页

Neumorphism(新拟态

纯纯

Neumorphism / soft ui(新拟态也有人叫同化、软UI)是什么?在前一段时间,大家即使没有看过,但是应该也听到过一些关于这种新风格的介绍,或者是在某某趋势中有类似作品的出现,不太了解或者一看而过。简单的介绍一下,标题并非判断结果,而是希望同大家一起探寻一起交流,一起讨论这种风格是否会是接下来的新趋势...


起因是源于2019年11月5日,来自乌克兰的设计师 Alexander Plyuto 在追波和ins上发布了下图的一张作品,作者说明信息:

“让我们想象一下,如果在移动界面设计中,投影的形式发展的更好的话,那将来的界面将会是什么样的,这是我的愿景。”

Dribbble-Alexander Plyuto的作品


目前作品在追波平台收获赞量4000+,浏览量23W+,一路飙升至追波2019年pop排行第一热门的作品,同时在ins上的传播也是异常的火爆,获得很多设计的喜欢,评论顿时炸开了锅,其中有设计师称呼这种风格为“Neumorphism 新拟态”或者“Soft UI 软UI”,于是这种叫法慢慢传开,可能并不准确。


为什么这个风格会火?你怎么认为?

先抛开作品发布的平台带来的热度,很多设计师认为这本身也是一种潜在的趋势,随处可见的C4D的轻质感在不同领域和不同方向的使用,IOS13更新后的部分抛弃了纯扁平,重拾了3D的感觉。它会火的主要还是在视觉上,这种风格刚一出现,它是非常新颖的,在长达半年的几乎高度一致的风格下,它是新的尝试,让人憧憬的方向。


能有不断创新的设计师带给我们不同的设计风格,首先需要感谢,其次再去以个人的视角看待它。那么多风格的作品,那么拟态就变成趋势了?我们带着这个问题,一起继续探讨(我们先把代码实现等话题放在文章最后讨论)。


带着疑问,仔细看一下上面的作品,第一眼看有点像早期的写实风格(如下图),接近真实感,有强烈的质感和空间感......但是不同的是也带了一点当前依旧流行的多彩模糊阴影的感觉。我们试着去找一下这种风格的特点有哪些......


IOS 13 图片编辑界面


 by  Mike | Creative MintsMike


通过观察,我们不难发现这种风格的一些基本特点:

  • 元素并不浮动

  • 元素色彩相对单一,与背景高度统一

  • 左上角亮色投影,右下角深色投影

  • 多以卡片样式出现

  • 更加适合大圆角图形

  • ...

        

克服恐惧最好的办法就是 —— 临摹它!

这种表现方式,其实并不难,去阅读了几乎全部相关的资料,也去查阅了作者相关的介绍和说明,试着去了解一下这种风格。首先我们先以按钮为例,请看下图:


这三个图标,你更愿意点哪一个?

这是我们比较常见的三种也是相对比较流行的表现方式,我们分别从常规的顶部视角和侧面视角去观察它们:


  • 扁平的:首先在层级上,扁平的通常给我们的感知就是与背景是同为一个平面,视觉层级也没有特别强烈的前后关系(不考虑图标本身),对背景没有太大的依赖,如果本身背景与画面整体背景有区分,色彩就划分了层级。   


  • 投影的:带投影的给我们的感知就是漂浮起来的,单独看它,它漂浮在背景之上,与扁平并列看,它还要高于扁平的,通常大家为了突出某些内容,某个模块会去使用这种样式。投影的使用对背景的依赖几乎可以忽略,因为投影除了形状可以调整,包括色彩、大小等都可以调整,且它是无边界的漂浮着,即你可以随意定义它的高度。   


  • 新拟态:顶面看,它似乎是介于扁平与投影之间,侧面看,同样也是漂浮的,但是它有厚度却又没有离开平面,它的范围相对于投影的无边界,似乎还有一些模糊的界定。对背景的有一定的依赖,需要几乎相同的色值去实现。


回到上面的问题,这三个你会更倾向于点哪个?当然上面的案例没有示意在不同色彩下的情况,也有认为抛开体感上,前面两张白色背景的已经高于新拟态,因为它与背景的高度融合,在对比度上已经弱了很多。


可能这时候有人会有疑惑,单独看这一个按钮不是很有对比性,尤其是在视觉上体现的也不明显。所以我们简单绘制了一些卡片试试在作为信息承载的时候,这种风格的效果如何,同时也去将不同的样式融合,看看脱离背景的约束,局部是否可用与协调。



我们可以从上图看出,当这种风格用做内容承载时候,不管是文字图片按钮或者图标,仅仅在用做卡片的时候,效果还是蛮好的,它同前面两种风格一样,仍然可以清晰的区别内容层次、间距等,但是亲测如果大面积使用,页面会变的更加复杂,整体的层级较难清晰划分,那么局部使用效果如何?



局部使用在某种特定的场景是可以用的,如下图的计算器界面。在的卡片、按钮、进度条等样式下也能得以很好的展现。但是它比起投影卡片,除了视觉上,点击感、移动效果......差了很多。



看的这里,大家应该会有一个自我评定标准,这应该(目前)不会是一个大趋势,至少明年不会,虽然这种风格很受人喜欢,但是这种风格还存在很多弊端:


  • 首先,除了卡片等样式,它不能有效的提高信息的传达,页面内容密集,过多使用容易导致混乱,如果靠投影的大小或深浅来区分,即使达到效果,画面会变得复杂沉重。

  • 按钮的凸起和凹陷的状态,绝大部分需要通过投影来识别,这是比较困难也是比较严重的问题,这样是几乎很难区分点击的前后状态的。

  • 背景色的依赖太大,色彩对比度较低,相对于白卡投影等形式的应用,目前的样式不能让内容与背景产生良好的对比,不利于信息传递。


实现问题,其实现实难度到还真不难,话筒交给你们......


所以这种风格就凉了吗?

这种风格其实在某些局部地方还是可以使用的,小面积的和其他风格进行混合使用。无数的可能性需要大家去做更多的尝试和创新。通过对趋势的了解,结合我们认知范围内正确的组合和排列,说不定会创造一个意想不到的“船新版本”。


我们只有在这样的思考和创造的过程中,获得更多的灵感。不能不考虑实现问题,但是我们更需要顺应趋势,不管这个趋势能火多久,在将来能否得到应用,只有不断的探索更多更新的东西,设计才会变得更加美好。动起手来吧~


下面还是简单的分享一下实现的方法,并分享一下相关的源文件与作者的源文件供大家学习交流哦!


凸起部分:

第一步:确定配色,最好是浅色或者是深色,选取高光色和投影色(非同色系的不同组合大家可以多去尝试)

第二部:创建对象,更加适合圆角的对象,可以是纯色,或者轻微的渐变效果也更好

第三部:添加投影,投最好是X和Y轴的位移是一致的,至于角度,大家自由发挥吧,这里建议亮色投影和深色投影分别复制一份制作,如果是在同一图层上做,交界处效果不理想,更模糊。


凹陷部分:

步骤几乎一致,投影换成内阴影做对角线的深浅添加可以。

这里说一下,凹陷部分完全按照这种风格去实现,显示效果其实不好,作者包括其他设计师都在这里做了优化,优化后的实现方式上已经不属于这个风格了,因为最后的实现效果,侧面观察它已经是脱离背景的,如果融合背景也可以,只是边界会更加模糊,所以仔细观察作品,细心的同学应该已经发现是如何处理的:其实就是添加一个边框,再让投影充当浅色高光。


作者:Frannnk   来源:站酷

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

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

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

一些视觉知识点-各类对比

纯纯

通过用各类对比继续为大家带来视觉“热”知识~目录如下

海报视觉如何做的有创意?有哪些方法呢?

比如从构图、拟物、光影、嫁接、对比、或者反差?等等等等

每一种又都可以拆分成很多细类。

比如对比在视觉海报中的运用,又有明暗对比、颜色对比、大小对比、虚实对比等等、太多了!

首先我们来分析一下大小对比是如何应用的。

1. 大小对比

1.1 大小对比的作用

我们先看下这张图:



两个元素, 如果一样大,平铺在画面中,就会显得普普通通的,没有任何亮点。

如果我们把其中一个放大,另一个缩小,再来看:



画面是不是有特点了很多,并且有了节奏感, 就连文案排版也有更多的方式。

所以对比就是让画面的两个组成部分/元素,以夸张的手法,布局构图,以让画面产生强烈的反差。以提升画面冲击力,画面纵深,内容丰富层度。是非常有效提升画面品质的方法之一。

那大小对比如何玩的精通,玩得高级呢?

我们一起来看一下:

1.2 人物与人物

1.2.1 全身与半身对比






这种半身人物和小人物的对比,或者头部表情眼神与小人物的对比主要可以展示人物细节,后面的人物放大表情传递情绪,前面的人物展示全身,传递状态,可以很好地传递内容,常常用在各类视觉海报中。

1.2.2 局部大特写与小人物对比

(下面右侧的图是江湖哥2017年做的图,分析两次了,哈哈,备注下):



这种对比有强烈的大小反差,并且可以很大程度地拉伸画面纵深,表现出很强的空间感!

并且还有一个细节:这两张都是三角形构图,非常稳定。



所以我们在设计的时候要也要注意画面的构图方式,夸张对比同时,要保证画面的稳定和饱满!



1.2.3 全身与全身对比


全身的人物对比很小的人物,让画面有更多的空间可以利用, 可以留白想象,也可以打造场景氛围,展示更多场景氛围。 

1.3 人物与场景

1.3.1 小场景与大人物


夸张化的对比,让本该小巧的人物矗立在场景里,很容易就营造除了一种巍峨磅礴的视觉感受。



一般需要很高的设计成本,工时不小。简单点的做法我们可以直接在人物下面拼接一些小场景,比如这样:


一些日常小需求中,没有那么多的时间去打磨细节,就可以这样做,既能保证按时完成需求,也能有一定的创意性。

1.3.2 小人物与大场景对比

这种方法也非常具有创意性,把一些很小的物体放大,人物缩小, 反差表现两个主体的大小对比。往往也能有出人意料的效果,需要更多的灵感和想法。

创意本身就是打破常规,把不可能变成可能,达到出人意料的效果就是创意。大小对比在画面中的各种玩法就是可以很好达成这种目的的方法之一,大家可以多去尝试,和练习,单这一种方法用好了就很牛逼了。

2. 光影对比

光影是在平面视觉里常用的一种技法方式,再说光影的创意之前,我们先说一下光影的作用。让大家对光有所了解。

2.1 光影的作用

我们为了直观一些,直接用几个图片说明。

现在这张图,这是一个瓶子的图形:


我们给瓶子加入光影:


瓶子就变得立体了!

我们给背景加入光影:


空间变得有纵深了,画面层次也丰富了起来!

所以光在画面中最基础的有两个作用:

⑴让物体变得立体,更加真实!

⑵增加空间纵深,丰富画面层次!

那我们应该如何利用光影,去做更有创意性的设计呢?

光影、光影,先有光后有影。那我们就先来说说主要表现光的几个玩法:

2.2 光

2.2.1 逆光

逆光就是主体在正前方,光源与主体重叠的一种使用方式,可以说是我们最常用的光影塑造方法之一了:


它的特点是光源与主体重合,形成很强的对比,在画面可以可以非常好地聚焦视线,强化主体。

2.2.2 侧光

侧光是光从主体侧面打过来的光,一般不会太强:


主要是起到一个丰富画面层次,营造氛围的作用。

2.2.3 顶光

从主体顶部打下来的光:


这种光,可以有效引导视觉,把需要的部分亮起,不需要的部分暗下去,由上至下,吸引人的视线范围和顺序。

2.2.4 聚光

从前方照射过来的灯光:


聚焦视线,不要的地方全部暗下去,是一种最能收拢视线的打光方式了。有些细节比较丰富的聚光画面,暗部也会保留一定的细节,不会是一个纯黑色。

2.2.5 造型

给光赋予一个造型,可以达到一种形式创意上的突破,

比如这种:



把光塑造成一个人物的造型,下面放置对应的人物锤丧的状态,形成很强的人物情绪反差,可以说是非常有创意了。

还可以把光塑造成物体,比如这种:


把偷过来的光塑造成与主体相关的某个物品造型,中间放置一个小的人物,同样也是一种很棒的创意方式。

2.2.6 分割

除了打光方向,造型之外,其实还可以用光来风格画面,也可以起到一些非常亮眼的视觉效果,比如这样:


以上就是光的玩法了,可以看到,光的玩法多种多样,利用好了可以让画面非常具有创意性。

说完了光,我们来接着说说影子的玩法都有哪些呢?

2.3 影

2.3.1 投射

投射相交来说是比较常规的一种处理方式了:


用投影的方式加入到画面中,可以增加画面层次,渲染氛围,让画面更有深度。

2.3.2 造型

影子也是可以改变造型的:


本来是应该与人物动作一致的影子,被改变造型与人物产生互动或对比,映射出了非常强的故事性,和内容深度,非常具有创意性了。

在一些插画或者游戏视觉中同样也可以应用起来:


内容深度和想象空间直接拉满!

2.3.3 剪影

配合逆光的形式,将主体以剪影的形式表现出来:


剪影的表现形式,为了凸显剪影,背景上都会有一个逆光源存在,并且轮廓要清晰,在素材上刻画一些轮廓光源以让人物变得立体,可以营造出很棒的神秘感,常常应用在神秘嘉宾、新品发售、新角色发布等活动中。

应用在一些游戏中,强烈的明暗对比配合富有气势的人物造型,也可以打造出一些很有视觉冲击力的海报视觉!


光与影的玩法多种多样,既可以让画面变得立体,又可以提高空间纵深。打光方式、造型、剪影、分割等等用法,可以让我们的视觉变得不太平淡单调,让画面拥有无限想象力的创意方式。

3. 其他对比

3.1 阵营对比

阵营对比的特点是5:5分画面,以对比色铺垫画面,形成强烈的视觉对比,和阵营感。常用于表现两个不同的阵营,或者正反派的视觉表现中。


除了影视海报、游戏,竞技类体育类也常常使用这种对比方法:

主要表现:对抗、竞争、阵营

3.2 状态对比

状态对比常用于表现同一个人或主体物的多种状态,比如人物的正常状态和特殊状态对比。通过一些技法让两种状态和谐地拼接到一起,是让单薄画面丰富起层次和内容的一种有效方法。

比如用画面拼接的方式:

或者是同一主体,把两种状态表现到一起的方式:


主要表现:人或物的的两种不同的状态,冰对火、明对暗、正常对黑化等等。

3.3 时空对比

让两个不同的时空联系到一起,形成时间地点上的反差对比。

3.3.1 两个不同空间的对比

由同一个元素贯穿两个不同空间,提供画面的延续性,表现出打破/穿越空间的意境,非常具有冲击力。


3.3.2 两个不同时段的对比

同一人物不同时期通过倒影等巧妙的表现方式,与主体形成时间上的对比。具有延续时间长河的感觉,为观者提供非常大的想象空间,是一种很有创意性的的方法。


主要表现:空间穿越、时间变化的对比。

3.4 情绪对比

这种创意方式更多是传递人物的情绪,安静的状态

对比愤怒的状态,快乐的状态对比悲伤的状态,


也可以表现人物的两面性,正常状态和阴暗面等等:


会让观者感受到强烈的情绪传递,视觉表现上反而不会那么注重。

主要表现:重视情绪的传递

3.5 虚实对比

此虚实非彼虚实。

和我们常说的虚实对比不同,这里指的是虚幻和真实的对比,比如:

用线条或者影子打造一些和实体区别开的虚构元素,和实体的元素形成对比,会有一种很虚幻浪漫文艺的感觉,可以用于表现一些幻想,不切实际的爱恋类似的主题中,能达到很少见的一些视觉效果。情感和创意都能得到很充分的传递。


作者:菜心工作室 来源:站酷

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

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

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



一些视觉知识点

纯纯

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


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时,就会使用到中饱和度的颜色,给人一种轻松休闲的感觉:



我们再看下他们的色域:



都是趋于中间的位置。

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


再来看看他们的颜色色域



都是比较靠左的颜色。

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

总结:



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



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


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

3.2 你想给别人传递什么

配色的方法有很多,搭配在一起千变万化,但都离不开一个点。你想给别人传递什么感觉?是要年轻、活跃,还是安静、唯美?只有明确方向,在想想这个方向上的颜色有什么规律可循?搞清楚目的,我们再去做配色是不是就会轻松很多?


作者:菜心工作室 来源:站酷

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

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

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



如何提升UI设计的高级感

纯纯

创建美观、可用和高效的UI界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。 


1、视觉元素

在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节,一起来学习。


1.1 使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。


每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:

  • 主要内容使用深灰色(诸如标题,但是不要用纯黑)

  • 次要内容使用灰色(比如商品介绍)

  • 辅助性内容采用浅灰色(比如发布日期)

类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

  • 大多数的文本采用正常的字重(400到500,具体取决于字体)

  • 对于需要强调的文字采用较重的字重(600到700,具体取决于字体)

▲主标题字重为600,其他标绿点的文字字重都为400



应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。


灰色文字在无彩/彩色背景下要分开处理

不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。

但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:

一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色



其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃。通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。


1.2 统一色调

选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。


1.3 干净的阴影

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。


这种轻柔的阴影呈现出的干净,增加了画面的精致。如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

阴影不一定是黑色的,还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。


1.4 个性的图标设计

合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。


标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了。要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。

3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。


1.5 Tab的设计感

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。

在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。


我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉独一无二,又进一步强化了用户对品牌形象的认知。


1.6 无框设计 去繁从简

在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:


使用阴影

阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。


使用不同的背景色来区分

通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。


增加额外的留白

创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。


1.7 统一设计元素

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。


1.8 符合产品气质的字体

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。


1.9 第三方图标风格统一

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。


1.10 图片中寻找色彩

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。


1.11 提高图片质量

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。


1.12 卡片式设计

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。



2、情感化设计

心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。


2.1 提示性文字

语言是情感化设计最直接的利器,拟人化的对白相比冰冷的话语更能获得用户的好感,赋予产品的新的生命力。例如App那些push推送通知,因为用户每天收到的PUSH实在是太多了,早已心如止水!这个时候,你就需要一条成本低、效率高的PUSH文案,去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣,让人看到会心一笑。


2.2 下拉刷新

下拉刷新是用户在App使用中经常进行的操作,常见的下拉刷新设计是图标加文字的形式,这种设计简单、直观,但毫无设计感,不能引发用户任何的情绪。


下拉刷新是一种临时状态,丰富它的设计细节不会造成与产品界面的格格不入,相反,一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿,暗示正在快马加鞭的加载新内容,小鹿形象延续了品牌logo。作为资讯类产品,内容更新速度至关重要,奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感,瞬间就让下拉刷新变得生动有趣。


2.3 头像设计

个人中心页与用户信息密切相关,用户的虚拟形象在这里得以展现,常见的设计是一个用户头像加登陆文字的形式,这种默认的头像设计无法得到用户的认同感。

现在很多的产品已经放弃了死板的默认头像,给用户更多的选择。赋予产品一些人格魅力,可以让产品富有生命力,消除人机界面的冰冷交互,帮助用户和产品建立友好的联系。例如美团外卖和躺平,它们各自的身份都代表了产品的气质和用户的属性,让用户产生一种身份的认同感。


2.4 缺省页化解负面情绪

通常状态是,当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式,这种简陋的设计会给用户心理造成很大的落差,陷入负面情绪中。情感化设计在此时就可发挥巨大的作用,它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大,根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景,让用户会心一笑,使产品充满了趣味性。


2.5 标签栏微动效

情感化设计变得越来越丰富,图标设计上升至可以展示动画效果。通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。精心设计的动态效果,能够缓解用户等待时焦躁的心情,从心理上缩短用户等待时长,让品牌更加深入人心。


2.6 模拟用户行为

如果一个产品可以模拟用户的行为,将用户代入真实的情境中,用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化,播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。


情感化设计可以拉近用户与产品之间的距离,在更深的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动。洞悉用户的行为,换位思考去满足用户的需求,情感交流就产生了。例如当你截屏了一张图片,打开微信对话框时就会自动显示这张图片,提前预知了你发截图的需求。

再例如很多观众都习惯了在电影结尾等彩蛋的习惯,因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时,你会发现影片详情页会有彩蛋提醒,告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息,就不必再为了不确定的彩蛋期待浪费时间啦。


2.7 有趣的细节设计

俗话说:有趣的灵魂万里挑一,可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中,有些有趣的设计是隐形的,需要用户自己去发现,当用户找到这颗彩蛋时,就会获得一份喜悦和乐趣,增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右,你会打开鬼畜区的新世界(⊙o⊙)(友情提示:记得戴上耳机或调小音量)其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母,发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕!


有些有趣的设计又是显性的,目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员,不仅可以尊享丰富的影视资源,还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕,让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性,一方面也丰富了弹幕区的多样化,可谓一举两得了。


总的来说:UI设计的“高级感”意味着在视觉层面要从细微之处着手,创造出精致富有设计感的画面;另一方面要从情感化设计出发,使用户与产品产生情感上的共鸣,获得更高层次的使用体验。


作者:印迹_ 来源:站酷

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

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

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


我拼命问清楚了这些问题,结果开发却把我拉黑了!

seo达人

一、代码更容易实现线性渐变、径向渐变、角度渐变。网格渐变往往需要我们切图

设计中,我们通常用的渐变有:线性渐变、径向渐变、角度渐变、网格渐变。

图片
在这当中,代码实现线性渐变、径向渐变、角度渐变 相对来说要简单一些,而网格渐变则需要消耗更多的开发精力。我们也不会在这上面去增加开发工作量。
所以,在我们输出设计稿给开发的时候,有网格渐变的部分直接切给开发。比如下面设计稿上的渐变背景色:

图片

 

二、文字能不用透明度就不用透明度,直接给原始的16 进制色值

16 进制色就是在开发中设定颜色的代码,每个颜色都有对应的 16 进制色,如 #000000 是黑色,#FFFFFF 是白色。

比如我在调这个文字颜色的时候可以用 #000000 40% 的透明度,也可以直接用 #999999 这个色,这两个呈现的颜色没有任何区别。

图片

但是交给开发写的话,第一种除了要写 #000000 的黑色之外,还要写一串 Alpha 透明值,这样做会更消耗性能,且在不同屏幕分辨率、不同操作系统下,所实现的透明效果也会有偏差。

所以,在这种非必要情况下,样式可以用不带透明度实现的话,就不要带。

 

三、切一整张大图,可能会发生拉伸变形或是图片被裁剪的问题

如果是一整张的切下来,会导致不同尺寸的手机把切图拉伸变形,或者会裁剪多出比例的部分。

比如我们切的这张启动页大小为 375*812 的三倍图,这张图在 iphone13 mini(375*812px)和安卓(360*640px)上等比展示就会产生不同的效果——

安卓屏就会被裁切掉一些(展示图片来自网络)。

图片

如何保证在这种情形下,启动页的图片可以适配不同尺寸的屏幕呢?

我们可以将上下分开切,让开发分别定上面插画和logo的位置,以此保证他俩都能完整展示。

将一张图切成这两张:

图片

设定插画距离头部是 30px,底部 logo 距离底部是 30px

图片

这样在其他屏幕上,也是依照「插画距离头部30px,底部 logo 距离底部是 30px」这个规则来写,就能保证这张图上的所有内容不被裁切了!

图片

 

四、不要将切片与 icon 贴在一起

一些初次切 icon 的同学会这么做↓

图片

这么做会导致以下几点问题:

· 如果 icon 有 0.5 像素点,那么贴边切很可能会被裁掉一些;
· icon 的高矮长宽不一,但开发会全按一个尺寸来写,导致 icon 被拉伸或压缩;
· icon 设计规范不一致,出现各式各样的尺寸。

所以我们都会给一套的 icon 固定一个同样大小、正方形的框,以此来规避掉以上出现的问题。

图片

 

五、通知icon与带数量的小红点不用切在一起

我们在做通知消息的时候右上角会有消息数量的标识:

图片

当数字分别为个位数、十位数、99+ 时,红色底板的宽度会根据数字长短发生变换:

图片

我们不需要每种情况的小红点都切一遍,只需要定好数字在红底里的左右间距,让开发根据数字长短做自适应即可。

图片

所以我们提供切图只需要切铃铛部分。

图片

 

总结

以上就是我在实际项目中遇到的切图问题了,切图是一项靠经验积累的UI必修课,希望你在阅读之后留个印象,以后遇到类似问题也有了解决之法。

欢迎在评论区分享你与开发对接所遇到的那些事儿~

 

作者:花菜

转载请注明:学UI网》我拼命问清楚了这些问题,结果开发却把我拉黑了!

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


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


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


职场中要学会拒绝

seo达人

一、拒绝拿来主义

相信大家都遇到过同事或者朋友索要源文件的情况,面对这种拿来主义我们要学会拒绝。工作对接中非必要不提供源文件给无关联的同事,团队项目文件流传出去也许就是这个因素。

图片

要学会拒绝,源文件也是我们的劳动付出,不要把自己的劳动果实提供给别人,助长他误导面试官等情况发生。工作中的对接需要验证人员关联性,团队文件流传出去要先向直属领导汇报,源文件也是属于团队的资产。

图片

拒绝拿来主义,不要被“不好意思”拒绝这种性格所束缚,劳动果实需要付出的关联人员才能共享。

 

二、拒绝不公平待遇

在职场中我们都在不断努力发挥自己的价值,希望以此获得更好的晋升机会和待遇回报。如果只有付出没有与之匹配的劳动回报,只会让员工失去奋斗的意志,我们也是会拒绝不公平待遇的。

图片

根据自己的专业能力和经验值,我们要分析出自己的行业价值,无论是求职谈薪还是在职涨薪,我们都要尽量追求接近公平。如果当时妥协了,就得确保自己不会有心理情绪,不然不仅工作不顺心,也会影响自身专业的提升。

拒绝不公平待遇需要有拒绝的勇气和专业实力,专业能力的提升和作品的沉淀至关重要,只有这样才能拥有更多的选择权。

图片

 

三、拒绝长期职责偏离

在职场中偶尔配合完成非本职工作的内容实属正常,但是仅限于偶尔配合。如果长期偏离自己的专业职责范围,也是得不偿失的,要根据自己的职场计划学会拒绝。

专业能力的提升离不开项目经验的积累,如果长期处于偏离状态,会影响我们的经验沉淀,进而影响专业能力的晋升。如果在一个团队长期干非专业范围的工作,我们要学会拒绝,选择更适合自己的团队。不要受温水煮青蛙式的工作环境而影响,最终使得自己杂而不精,想要跳槽到更好的团队就会变得非常困难。

图片

 

四、拒绝违规设计

工作中的设计任务虽然我们无法改变,但是也要留意自己的设计底线,也是设计范围的法律底线。不要稀里糊涂的干活儿,设计也是要有所为而有所不为,一旦触碰底线设计师也是难逃追责。

如果不幸遇到这样的团队,就要早点离职,不要被高待遇所诱惑。拒绝违规设计,做一名懂法的设计师。

图片

 

五、拒绝同事的“任务”

这个问题就是我们一个老学员咨询我的问题,事情的大概意思就是领导分别给她和同事安排了工作,同事觉得她的内容部分不是很重要,让她随便做做就可以,剩余的时间来帮自己完成任务。遇到这个问题她很苦恼,自己的任务还有别的都还没有完成,是否要答应同事的要求。

遇到这个情况我们要第一时间拒绝,回复的话术是我得先完成自己的任务,如果到时候有时间再根据情况看。职场中没有随便做做这个说法,领导安排的任务就要发挥自己最佳的能力去做到极致,展示出自己在团队里面存在的价值。如果本职工作都没有做完,就不要去当职场“好人”,到时候成就了别人,结果自己的事情一塌糊涂。只有在完成自己职责内容之后,再询问领导有没有其他安排,如果没有其他安排的情况下我们再考虑援助同事的任务。

图片

职场中每个角色都有自己应该承担的责任和输出,所谓的能者多劳是在量力而行的基础上,如果自己的职责都没有做到极致,就应该优先保障自己的输出质量。要学会拒绝同事的“任务”,除非这个任务是属于共同的任务,再结合优先级去进行排序。

图片

 

六、拒绝长期低质量输出

在职场中不只是为了获得报酬,高质量的输出不仅成就了项目,也是成就了自己的专业沉淀。如果是自己没有摆正态度,就要及时调整心态,用最好的输出不断提高自己的职场价值。

图片

如果是团队现状如此,整天干着没有质量的输出,久而久之就会让自己失去专业优势。到时候想要晋升或者跳槽的时候,就会发现自己的专业能力差距甚远,还没有一份像样的作品集。

职场中要理性的分析自己的现状,拒绝长期低质量输出,这样只是在耗费自己的青春。想要不断提升自己,就要不断完成具备挑战的任务,只有项目质量越高,我们才能学习并掌握更优秀的经验。

图片

 

七、拒绝长期无所事事

养老式的职场生活估计大家很羡慕,但是真的置身于这样的团队中,估计距离淘汰也只是时间问题了。

在团队中如果长期无所事事,不仅会荒废自己的设计执行能力,也会让自己的心态变得消极。如果遇到高强度的工作出现,就会想要去逃避,这是一个非常危险的信号。我们不能长期没有输出,这样的职场环境我们要及时拒绝,青春的我们不是为了享乐,现在不去磨练自己,未来就会被职场所抛弃。

图片

 

八、拒绝“画饼”式承诺

还是职场小白的我,也经常被领导或者老板“画饼”式承诺,只能说是踩坑也是一种修行。不过以过来人的经验回顾时,希望大家不会再被“画饼”,学会拒绝“画饼”式的承诺。

图片

职场黄金期是我们提升专业和积累行业经验的关键时期,如果没有发挥的舞台就要及时做出改变,不能被不确定性的承诺而耽误自己的计划。只有在自己的底层能力达到峰值之后,才能具备更好的话语权,现在公司需要你不代表以后不需要更优秀的人,所以自身优秀才是最有保障的。如果是待遇层面的承诺也是无效的,当前公司的待遇条件一定程度上决定了跳槽的谈薪起点,承诺待遇不代表实际待遇。

图片

如果承诺的不能如期而至,我们就要多为自己打算,不能超过自己的忍耐期限还继续拖沓。

 

九、拒绝低能领导

在职场初期进入大公司固然重要,但是跟对领导往往比公司本身更重要。领导的专业度决定了我们在团队中成长的速度,如果遇到低能的领导,不仅容易原地踏步,很容易到达专业瓶颈期。

图片

有的领导也许不是专业出身,但是管理方法和平时的指导性建议很好,我们也能找到更多沉淀经验的思路和方向。如果领导专业能力不行,还过于武断和眼界不足,项目只能是弄得一塌糊涂,这样的领导是不可能给我们带来成长的经验的。

进入团队后通过一段时间的对接,我们要及时判断出领导的能力,要学会拒绝低能的领导。只有跟对领导才能快速成长,从领导身上学到的做事方法、思考角度、项目经验等,是我们快速从小白变得成熟的关键。

图片

 

十、拒绝低要求团队

在项目设计中,不是一稿过就是我们追求的目标,如果团队要求比较低,是很难突破自我的。只有一次又一次的挑战新难度,才能从固化思维中摆脱出来,掌握新的思考技巧。所以,我们也要学会拒绝低要求的团队,不能提前过着温水煮青蛙式的工作状态。

图片

身边都是优秀的设计师,你的能力也会逐渐受到影响,遇到问题才能获得更多解决方案。有一个要求比较严格的领导,团队也比较注重设计质量,你才能输出更优秀的作品,沉淀更优秀的经验。

 

小结

无论是在工作、学习还是生活中,我们都不能过度的顺从和依赖,学会拒绝也是我们成长的关键。拒绝也是新的开始,也许能在新的过程中发现新的机遇,所以我们不要不敢拒绝。只要在拒绝之前做好冷静的分析,排查出利弊关系即可,不能盲目办事也不能委曲求全。

图片

本文观点仅代表个人的一些经验反思,不足之处根据自己的实际情况判断,我们互相进步。

 

作者:黑马青年

转载请注明:学UI网》职场中要学会拒绝

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


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


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


按钮位置如何合理设计?看这篇文章足够了。

seo达人


一、按钮的几种布局

按钮的布局大致分为四种,分别为:导航栏布局、跟随内容布局、偏向底部布局和底部悬浮布局。

图片图片

 

二、导航栏布局

我们平时看到的导航栏布局有很多,如发朋友圈和发QQ动态。

图片

为什么要将「发表」按钮放在导航栏右侧?

以微信朋友圈举例,在发送动态时,核心操作是为照片配文字或继续添加照片。

其他操作例如选择所选位置、提醒谁看、谁可以看,同步到朋友圈,都是次要操作且不会调起键盘。

用户输入文字之后,直接可以点击附近的「发表」按钮,快捷方便。

能否将「发表」按钮放在页面中呢?答案是:不行!

图片

将「发表」按钮放在页面,当输入文字时,会导致键盘遮挡操作按钮,无法快速点击「发表」操作。

除非是「发表」按钮附近有很多需要键盘输入的必填表单,不然不能这么做。目前来看,微信的「发表」按钮的位置设计是最优解。

 

三、跟随内容布局

常见于表单字段填写时,如下图所示。

图片

那么能不能将操作按钮放在导航栏右侧呢?答案是不行!因为放在导航栏右侧的话,操作路径不顺畅。

放在表单下方是正常的从上往下操作流。

有些设计觉得将按钮底部区域,离大拇指更近,更方便操作,如下图。图片

但是因为是表单填写,会调起键盘,将提交按钮给挡住,所以按钮跟随表单之后,更加科学。

 

四、偏向底部布局

偏向底部的操作按钮通常是内容区域不需要调起键盘的使用场景。常见的如引导页或结果页。

图片

 

五、底部悬浮布局

底部悬浮布局,常用于非填写内容超过一屏或审批等使用场景,特点是操作按钮优先级高,方便用户实时操作。

如下图电商购买按钮。

图片

 

六、布局总结:

1、填写内容为必填项、需要调起键盘且均集中在页面头部,则操作按钮放在导航栏右侧较合理。

2、填写内容在头部,且调起键盘不会挡住操作按钮,则按钮紧随内容较合理。

3、不需要调起键盘来填写内容,则按钮放在偏向底部比较合理。

4、按钮非常重要,且非填写内容超过一屏时,用底部悬浮布局比较合理。

 

后记

从这篇文章开始,我尝试写一些工作中很实用且基础的文章。

争取每一篇文章都可以给大家一些收获,这样有助于在工作中使用。

由于每个人的基础不同,基础类和进阶类我尽量都覆盖。


作者:Echo

转载请注明:学UI网》按钮位置如何合理设计?看这篇文章足够了。

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


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


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



LOGO排版,你还在瞎整么?

seo达人


图片

这个LOGO大家觉得怎么样,很简单吧!是不是有手就行?然后用你们经常用的排版排一下看看:

图片

200块钱,不能再多了…我们再看一下原作者的排版:

图片

怎么说?2000块钱怕是拿不下来这个LOGO吧?所以无论你的LOGO做的是简单还是复杂,一个合适的排版都会为你的LOGO增加成倍的价值!

OK,废话不多说,让我们开始吧~~!

 

图片

 

 

图片

所谓谋定而后动,知止而有得。我们在做LOGO的时候,通常会先根据不同的行业和命题选择相对合适的构成方式来表现。

比如企业类的一般会用字母类、几何重复、中英文这种简约大气的构成方式,你用一个拟人化卡通标志提交过去,客户肯定会让你滚犊子,而像餐饮、文娱这类命题就可以选择更为亲民,感染力更强的表现形式。

图片

同样的,LOGO的排版在选择上也应遵循行业和图形本身所体现的气质来进行选择。我们这里分三个点来看一下。

 

图片

LOGO中的文字编排,通常都是为了更好的对品牌进行信息传递及整体美观性而服务的,所以我们在字体的选择上要考虑适不适合这个LOGO所体现的调性。

图片

我们拿小米的LOGO来举个例子,虽然200w的经费主要体现在LOGO里,但是在字体的设计上也是遵循了LOGO里MI的调性来匹配的,非常几何化同时加入了小圆角。

而当我们将字体换成一个文化气质更加浓厚的衬线体时,你会发现这是啥玩意,200w瞬间变成20w。

图片

那我们再换一个偏几何一点,所谓“设计感更强”的字体,得,连20w都没有了…

图片

英文如此,中文同样如此,比如下方的山岛小食府案例,图形LOGO本身是非常具有文化气质的,而如果你选择几何化或者常规的黑体,则也是完全不匹配的。

图片

上面的案例都是关于调性匹配的,还有一个点是图形与文字的灰度匹配。

如果图形是比较厚重粗一点的时候,如果你的字体选择的很细,也是非常不和谐的,有生活阅历的朋友应该都知道尺寸合适的重要性…(如下图)

图片

那到底该如何知道到底咋样才算不粗、不细呢,这个东西其实没有一个评判标准,一般情况下会遵循以下规律:

如果你是面构成的稍微厚重一点的图形,则字体的粗度在Medium-bold左右差不多,可以拿字库比对一下;如果你是线构成的字体,则字体的粗度差不多比你的线的描边粗度粗一丢丢即可。

图片

 

图片

大多数情况下,我们都是要给LOGO搭配标准中文和英文的。根据字体的特征点,我们大致可以将常用中英文字体分为以下几类:

图片

图片

图片

我们在进行字体搭配的时候,一般情况也是遵循这个规律来进行搭配即可。

比如黑体配非衬线体、宋体配衬线体、圆体配圆体等,需要注意的是当中文以书法体为主的时候,英文通常都不会再选择手写的英文字体了,会比较混乱,一般会搭配同样具有文化气质的衬线体作为装饰。

图片

这几种搭配的形式都是LOGO排版里比较基础、常规且不容易犯错的安全范围,肯定也有黑体+衬线体这种不同搭配的形式存在,但是作为一个小白,还是先老老实实的按照常规操作来进行搭配!先保证不犯错,再玩花活…

 

图片

我们先看一些案例来找一找规律。

图片

可以看到上面这些偏大型企业类一点的行业,一般选择的排版都比较简约,往往单个字母或者简单中英文搭配即可,不会有过多的辅助元素出现,我们再看一些。

图片

而上面这些LOGO,都有或多或少的辅助线或辅助文字元素来进行装饰,因为与大型企业注重品牌传播识别度不同,也有很多LOGO是需要一些装饰来提升整体的美感和气质。

我们用两个案例来实操一下看看。

图片

左边的LOGO是比较精致简约的几何化LOGO,所以我们用简单的英文搭配就会非常高级;而右边的LOGO,我们加入一些装饰文字和装饰线来排版。

图片

我们违背这个规律,用相反的方式来做一下,可以看到所体现的气质完全不一样了,左边的LOGO变得复杂,而右边的LOGO则变得单调。

图片

 

 

图片

说是危险区域,其实也可以算是新手禁忌区域,也就是绝不应该犯的一些排版问题!当然了,市面上肯定有一些LOGO是超脱区域之外的,所以给自己留了个台阶,哈哈哈,下面我们来看一下都有哪些需要注意的细节?

首先我们先将LOGO划分群组,可以分为图形部分、文字部分、装饰文字(宣传语等)、装饰图形部分。其中装饰部分都是可有可无的(根据前面所讲的选择性添加)。

图片

 

图片

绝大多数情况下!文字与图形之间的间距要保持一个合理的空间,不能太大,也不能太小,就像爱情一样,太远了不行,容易淡,太腻了也不行,容易烦。

图片

 

图片

我们要知道文字、装饰文字它们是一个组别的物件,所以在编排时也要将他们编排在一起,他们之间的间距不能超过与图形之间的间距。

图片

 

图片

无论是居中对齐,还是左对齐右对齐,最好都要贯彻到底,因为如果不对齐,就会产生额外的负空间,导致整体不美观,不稳定。

图片

 

图片

什么叫阶梯状呢?就是从图形到文字按照从长到短,或者从短到长的顺序进行排列,学过排版或者对排版有一定了解的同学应该都知道,这种排法往往不具备设计感和无法满足视觉上的审美,如下图:

图片

其实就和我们的人生是一样的,我们不会一直幸运的向上,这样生活没有挑战,而且也不会一直向下,会彻底废掉,有起有落,有长处有短处,才是最有意义的人生!

通常我们都会选择长短长、或者短长短这种有错落感的排布方式。

图片

 

图片

装饰文字,一般是指我们放置的品牌slogan或是一些不那么重要的小文字。既然不那么重要,我们就不能对他过度的进行设计和强调,这里一般会出现两种错误:

图片

图片

一般情况下,装饰文字都是文字组内最小的字号,如果是因为不放大而导致排列逻辑出了问题,则可以增加字间距来解决;且装饰文字由于占地面积较小,所以一般会选择阅读性较好的普通黑体或宋体等,过多的设计感反而影响了主次关系。

 

图片

装饰图形的存在,一般是为了弥补空间和强调某些品牌的调性,类似于补丁的作用,所以它也不应该太大太复杂,往往以LOGO中某个小元素演变而来,或者以印章的形式存在。

图片

而很多同学为了装饰而装饰,直接将LOGO拿过来作为辅助图形摆放…这完全就是画龙点龙、画蛇添蛇的做法- -!

图片

还有一点是关于参考线的粗细问题,很多同学拿捏不准,一般情况下,参考线的粗细,会比你所以文字组中最细的笔画再略粗一点点即可,大家平时一定要多观察优秀LOGO的处理方式,多洗洗眼睛!!

图片

 

 

图片

这里指的就是我们常说的标准字体的设计,因为客户毕竟花钱了嘛,往往都希望得到一个专属于自己品牌的字体,而不是常见的字库字,所以一般会字体设计的同学做LOGO都比较容易做的出彩一些,关于标准字的设计,前些时间猴子哥哥已经写了一篇详细的教程,大家可以翻回去学习一下。



可以看到,两组的LOGO都很棒,强哥的二火如果单看LOGO的话妥妥是首页级别的,但是就差在了字体设计和图文编排上面,所以无论你的LOGO做的有多出彩,字体设计也是必不可少的环节!

而字体设计就太深奥了,不可能用很短的篇幅来进行概括的,这里主要为不会字体设计的同学提供一种快速提升标准字设计感的思路及方法!

 

图片

因为LOGO中的标准字更多的还是起到识别性阅读性的作用,不需要很复杂的设计,所以我们可以将某些笔画进行断开,再不影响识别性的同时来提升设计感。

图片

你看,简简单单,也就20秒的功夫,字体的设计感立马提升了一个档次,你说这需要字体设计基础吗?不需要吧,完全是用字库改的…中文同样如此!

图片

断笔的时候需要注意,选择同样的笔画进行断开,而不要这里断一下,那里断一下,很混乱无章法,且数量不要太多,会容易碎,适当来几下就可以了。

 

图片

省略某些不影响识别的笔画,也是常用的一种设计方式。

比如字母A,因为它特有的三角形结构,我们将内部的横线直接省略掉,也是可以识别出字母A的。

图片

再比如字母E,也可以简化成三条直线,不过这个变化幅度就比较大了,一般情况下只能当做唯一一个变形使用。

图片

还有小写字母g,将右下角的连接处断开,也是具备一个基本的识别性的。

图片

像中文里的草字头,将中间连接的地方省略,也完全OK。

其他的类型就太多了,不一一展示了,有兴趣的同学可以自己去尝试一下,记住任何变化的前提都是保证最基本的识别性就好。

图片

 

图片

还有一种操作是结构替换,这种通常都是将某个字母的负空间部分替换成和本行业相关的一个小元素,切记替换的元素不能太复杂,越简单越好。

最常见的就是字母O,因为其内部的空间较大,像咖啡品牌可以在内部填充一个简约的咖啡豆的形态。

图片

再比如字母i的上面的点,也是一个替换的不错方向。

图片

图片

 

 

图片

基本的排版知识已经讲完了,下面来介绍一些常见的组合形式,这里主要分为了六个方向:

1. 横排;

2. 竖排;

3. 左右排;

4. 斜排(特殊角度);

5. 环绕排(徽章式);

6. 嵌入排。

 

图片

横排是最基础常见的排版形式,通常会将文字组排在LOGO的右侧,也有的时候会排在左边,根据LOGO的特征来决定,此类排版基本适用于任何行业的LOGO。

 

图片

竖排和横排一样,也是最基础的排版形式,通常都是可以互相相互转换的,同时因为上下方的空间较大,会比横排有更多创作的可能性。

 

图片

左右排的形式相较上面的横竖排不是很常见,它比较适合于偏向对称形式LOGO,从而保持左右平衡,左右排的好处就是可以自行发挥的空间较大,可以作为横竖排的一个拓展来进行尝试。

 

图片

斜排或者说特殊角度的排版,往往存在于一些偏艺术化、或者抽象化的LOGO中,它可以打破常规的排版方式,给人更耳目一新的感觉。当你的LOGO重心不是很稳定的时候,可以采用这种方式来填补不足的空间,达到整体平衡。

 

图片

环绕式/徽章式的排版,一般常见在偏卡通或者偏艺术一些的LOGO中,它极大地增强了LOGO整体的趣味性,同时为我们增添一些辅助文字和图形增加了想象的空间。一般餐饮行业以ip形象为主的LOGO都会增加一个环绕式排版的方向。

 

图片

嵌入式的排版这个主要取决了LOGO本身的形态,如果LOGO中有很大的空间,则可以尝试将文字组放入其内,这种方式一般更多的是卡通向的LOGO,比如球队队标等,或者LOGO本身不是很复杂的情况下,可以将文字放里面填补空间(类似文字构成的一种)。

图片

 

 

图片

好了朋友们,前面了解了LOGO排版中需要注意的一些事项,叨逼叨了那么多,下面我们分别用不同行业的LOGO实操一下看看排版的可能性。

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

像这种企业类的LOGO,一般采用基础的上下左右排即可,现实项目中,可以根据实际应用场景的尺寸,来制定不同的组合形式。

 

图片

图片

像这类的命题我们可以增加一些装饰英文和图案来提升整个LOGO的调性,一些和前面重复的排版这里就不做演示了,我们尝试一下其他更多的可能。

图片

图片

图片

图片

图片

图片

图片

好啦好啦朋友们,就到这里了,LOGO排版的样式真的是太多了,没办法全部展示出来,但是无论怎么排,都离不开前面讲的需要注意的点,最后再来复习一遍。

 

 

总结:

1. 抓准品牌的调性,选择适合品牌的排版方式;

2. 注意排版中常犯的细节错误,如间距、编组、对齐、错落等;

3. 选择合适的字体进行搭配,适当设计,克制设计;

4. 通过不同的组合方式进行尝试,商业稿一般比较克制,根据实际应用的方向来进行编排,自己练习的时候,则可以尝试变化不同的排版方式,让你的logo更出彩。

OK,那么今天的教程到这里也就结束了,照例,是很感谢今晚的相伴,如果你对本篇教程很满意,请三连支持一下!朋友们!giao辞!


作者:告白天

转载请注明:学UI网》LOGO排版,你还在瞎整么?

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


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


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


你的设计太平了,2022开始流行用这种字体

seo达人

一、Morganite 

图片

Morganite字体是我最喜欢的之一,非常现代的一个字体,特别百搭,最重要的是免费无版权随便使用,在很多大型设计里都能看见这个字体的身影。

图片

电影海报设计就是运用了Morganite字体,调性很足,字体让整个电影画面充满了好奇和神秘,大的数字字体恰到好处。如果你想做一些大型海报,纠结用什么字体,选择这个准没错,平时做练习也可以。

图片

如果你想做出轻奢大牌的感觉,也可以运用这套字体,比如上图的杂志封面,以及耳机广告,运用上去非常现代时尚。

图片

它的数字系列字体很好看,很窄很现代,适合于做大标题的核心视觉。

图片

舞蹈海报设计,主视觉就是这个数字字体和人物的巧妙结合,现代和艺术的结合,让画面非常有艺术气息。

图片

印度海报也是类似的设计形式,将人物和画面结合,形成这种现代文艺的感觉。同时这个字体搭配一些现代建筑,和建筑硬朗的气质也相互呼应。

图片

同样这个字体也适合于体育产品,可以当背景,也可以当主体。比如上图两个设计,Morganite字体都承担了视觉焦点。如果你的产品是体育运动,想做一些调性强,国际点的,直接大胆用这个字体。

 

二、COLORTUBE 

图片

看到上面这个字体,你是不是和我一样感觉这是设计过的字体,其实不是。这个字体打出来就是专业,非常的现代。字体都是采用目前最主流的叠加效果,特别适合做一些海报或者单独使用。

图片

支持大小写,笔画非常简约圆润,适合年轻产品使用,并且配合很高级,看起来不违和,当然你可以自定义配色。

图片

还可以直接拿这套字体做创意背景元素,用在背景上也非常好看,直接可以当背景使用。

图片

这是我随便P的一组,是不是也不错,你可以大胆拿这些数字去做背景或者叠加效果。

图片

当然这套字体也是免费,无版权支持商用,喜欢的话点赞收藏,文末都已经打包好,可直接领取。

 

三、FREE FAT FONT 

图片

我一直在寻找一款能做英文营销设计,并且非常有力量,设计很特别的字体。可惜英文笔画都比较细很难找到那种像方正黑体充满力量的字体,直到我遇见了这个字体FREE FAT FONT,像名字一样非常的粗壮充满力量感。

图片

整个设计非常饱满,特别适合用在包装设计上,比如上图冰淇淋设计就运用了这个效果。

图片

FREE FAT FONT 也非常适合潮流产品设计,比如一些潮流酷炫的场景,运用这个字体能够彰显个性和年轻化。

图片

同时这个字体也有点复古感,比如上图我随便拿了一个80年代磁带搭配了一下,效果也非常不错。如果你的产品想体现复古和潮流感,又希望有一个粗壮有力的字体,用这个准没错。无论做概念设计还是包装作品集效果都不差。

 

四、Kage Pro 

图片

一款好的英文字体不仅仅能让产品有自己独一无二的气质,同时在设计上也是锦上添花。衬线字体因为独特的古典气质,一直受设计师喜欢。比如Kage Pro这款,兼备古典美和现代气息。

图片

随便找个人物照片,简单地排版一下,效果就出来了,非常优雅简约。

图片

比如这个网页,是一个轻奢设计,整体色调暖色和金色。金色其实稍微有点浮夸,需要一些视觉元素压住,然后用上Kage Pro 字体后,瞬间效果上来一大截。

图片

Kage Pro 字体的气质非常优雅古典,如果你的画面有些动感方向会更佳,如上图人物是非常放松惬意的,这个字体运用上去和人物混为一体,让读者注意力不自觉地停留。

图片

同样这个字体在很多高端网站设计、移动端设计都大量运用。效果非常出挑,如果你在做一些海外设计或者概念设计,需要把你设计调性拉高,需要做出很贵很奢侈的感觉,直接用这套字体。

 

五、Canava Grotesk 

图片

我相信看到这里,很多同学会说盖哥,有没有一些适合用在UI的字体,当然了,我相信大家看到很多Behance一些APP设计,里面用的字体一定非常好奇,那么如果只让我推荐一款,那肯定是Canava Grotesk了。

图片

图片

UI的字体和平面不一样,需要考虑识别度。比如上图这个节目设计就是运用了Canava Grotesk字体,相对于苹果原生英文字体会显得更特别更有设计感,同时笔画会更加时尚。

图片

这个字体适用于电子产品,如上图一个智能手环设计,就是采用的这种字体,清晰有力。设计师通过字重搭配让整个画面非常轻盈充满科技感。字体也都已经打包好,大家直接文末领取。

 

六、DST Helfita 

图片

DST Helfita字体我第一次看见的时候,是上图一个咖啡广告,这个广告除了运用咖啡豆子呼之欲出的感觉,最巧妙地把咖啡豆和字母结合。这个广告就是运用的DST Helfita字体,非常广告大牌,非常适合做广告。如果你们的产品需要做广告,需要醒目对比,可以试试这个字体。

图片

用在这种AR/VR产品里面,一样能有非常好的效果,一点不违和。而且这个字体的小写字体很特别,相对很硬的科技字体,大小写结合有一种说不出的特别感。

图片

用在游戏画面里面,是不是也非常有复古感,搭配简单的背景颜色,以及游戏主元素,整个画面简约不简单。

图片

上图是一个电影网站,整体画面简单,一个app界面一个DST字体,但是你不会感觉页面很空,因为DST这个字体很多细节都充满了设计感。

图片

这个字体字重很多,你可以做大小对比,也可以做线框和图形填充对比,效果很好。

图片

具体效果多试试,上图我找了个样机,随便贴上去这个字体,是不是像一个高级品牌。

 

七、GEON 

图片

相信大家是不是看见过上图这样的设计,不会以为设计师设计的图形吧,其实是一个字体GEON,说实话我都有点舍不得分享给大家。这个字体非常个性化,适合用在一些潮流产品。

图片

每个字母都是黄金比例,非常有现代感,哪怕笔画识别度没那么强,但是你一眼还是能知道是什么字母。

图片

适合的场景比如游戏设计、个性化海报、潮流产品,字体充满个性。同样的这个字体也是无版权的,可以大胆使用。

 

八、BD Megatoya 

图片

如果你的产品是科技感非常强的,那我推荐这款BD Megatoya字体,同样是无版权字体,如上图,简单的搭配一个效果就调性非常强,这款字体非常适合高科技产品。

图片

上图是一个可视化的产品,全部采用的这个字体,非常适合可视化。

图片

电动汽车官网设计,这个字体搭配上去也毫不违和,简约的字型和科技馆汽车搭配的天衣无缝。

图片

Apple Watch户外广告设计,也是运用的这个字体,它的字体字重能很好地把画面对比拉起来。

图片

图片

字体的设计,字距,对比,大小写都设计地非常讲究。

图片

AR眼镜发布会海报设计,就问你高级不高级。

图片

运用在传统杂志上,阅读感也非常强,可以说是一款百搭的字体。大家快文末领取使用起来。

 

九、Baunk 

图片

这些年赛博朋克非常火,包括科幻电影。里面很多设计都非常特别,我之前也一直在寻找一款科技感很强的字体,后面被我找到了这款Baunk

图片

这款字体笔画很特别,很飘逸,很有未来感,如果你的设计是科技感很强,可以试试这个字体。

图片

外星人笔记本设计,复古的银色外壳,搭配这个机械感很强的字体,非常贴合。

图片

我简单搭配了下,找了一个机器人的图,搭配了这个字体,是不是瞬间感觉是未来世界的。

图片

再找一个高科技的未来机器人看看效果,好像也还不错。

图片

怎么样搭配都行,所以这个字体哪怕你现在用不上,未来也一定会用上,我之前找了很多科技感字体,目前就这款最具未来感。

 

十、Kurye Light 

图片

Kurye Light是一款非常现代的字体,如上图大小写运用,让我想起sony的设计,很科技现代,还带一点点小小的个性化。比如小写字母的y非常有线条感。

图片

这个字体也是我心头最爱,识别性强适合大面积文字阅读,同时很有科技感。特别适合简约设计。上图随便搭配一个简约画面效果就非常出色。

图片

公司官网介绍这个字体也非常合适,如果我以后做一个公司官网,一定会用这个字体。

图片

字体细节也比较考究,特别注意看小写字体非常清秀和干净。

图片

斜体也是简约大气上档次,怎么搭配怎么好看,关键还是免费。

图片

做品牌设计也合适,比如名片设计,简单一个色彩搭配,效果就出来了。

图片

电商页面设计,作为主标题小标题都合适。


作者:Sky

转载请注明:学习网》你的设计太平了,2022开始流行用这种字体

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


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


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



3个案例,正确理解B端产品中的一致性原则

seo达人


一、一致性的价值

工作过程中,当产品或者开发问到一些设计细节时,设计师很容易回答“与XX功能保持一致就可以了”。这在工作中应该比较常见,也比较容易理解,沿用以往的设计形式省时、省心,何乐而不为呢?

另外设计侧主动建立产品设计规范,很大程度上也是为了做好设计管控,保证产出的一致性,所以一致性的价值是毋容置疑的。

当然除了产品体验提升外,「一致性」对产品设计开发也有帮助。

(1)降低设计成本,提高开发效率

无论是设计还是开发,复用已有的组件资源,保持界面的一致性可以有效地减少设计的投入,避免不必要的设计分歧点。

而在开发阶段,可以避免重复造轮子,提高开发的效率,保证落地效果,也可以减少上线前设计走查、测试的工作量。

(2)形成一致的设计风格

根据原子设计理论,通过原子组件的一致性,可以构建出统一的界面框架、布局,形成统一风格和用户交互认知,从而更好地保证用户体验质量。

 

二、一致性思考的维度

不过「一致性」并不是强制性的标准,而是要以提升用户体验为目标灵活应用。实际落地执行时,要根据产品定位、用户场景,结合业务功能来确定设计方案,不能为了一致而一致。

当我们遇到一致性问题时,还是需要从以下3个方面深入思考,做出准确合理的设计决策。

 

1. 符合产品定位

传统的B端产品都是本地化私有部署,功能仅面向企业内部用户和实际的业务场景。业务属性更强,因此页面的结构形式相对更加统一。

但是随着SaaS产品的兴起,B端产品功能更加丰富,场景和服务更加多元。

例如面向个人用户和团队协作的工具型产品,产品定位首先要满足个人用户的服务,获得足够的用户流量,因此大都开放注册并提供免费的基础服务。在此基础上,通过差异化的增值服务获得商业变现,例如会员特权服务、团队服务等等。

因此在页面结构上既要满足业务功能的需要,又要考虑运营推广信息的展现,单纯地追求一致性是无法满足产品定位的。

例如腾讯文档,首先满足用户日常在线文档编辑协作需求,采用的是管理端布局。

图片

而「模板库」属于增值服务,则采用了版心卡片式设计。

图片

在语雀中也是如此,个人「工作台」界面采用了3栏布局结构,根据屏幕宽度自动缩放适配。而在「广场」频道中采用了版心定宽设计,「空间」频道则变成了引流入口,点击后通过浏览器标签打开新的页面,交互逻辑上也是不同的。

所以当我们在做产品设计时,首先要从产品功能定位和商业模式出发,结合用户需求,不能为了一致而一致。

 

2. 符合用户认知

我们在做产品设计或者制定设计规范,不仅仅要考虑自身产品的一致性,还需要与行业内的产品保持一定的一致性。

先看下面的2张图,两张都是PC端视频会议的邀请界面。

图片

不知道大家是什么感觉,刚开始我在PC上收到左图的会议邀请时,下意识地想点红色“拒绝”按钮,需要思考片刻才能做出决策。或许设计师会说,设计已经遵从行业内的规范,利用红、绿色区分了按钮的功能属性。

但是无论是PC还是移动端产品,弹窗中的按钮一般都是采用「右主+左次」的形式,这已经成为了大多数用户的认知。左边的视频会议产品采用了相反的设计,违背了用户的认知。虽然颜色在一定程度上可以降低用户的误判,但是很难改变用户的认知习惯。

另外PC端按钮仿照「接听电话」的设计形式,我接触的确实不多,还没有建立起绿色接听、红色拒绝的认知,所以产生了一定的困难。

在界面设计时,一致性除了需要遵从产品内部的设计规范,也要考虑行业产品对用户认知的影响,避免设计与用户普遍认知产生冲突。

 

3.符合用户操作习惯

依然是按钮的例子。

我们常见的表单页面中按钮和弹窗中的按钮,位置和组合形式并不一致。

图片

弹窗中通常采用的是「右主+左次」的形式,而表单页面中大都采用的是「左主+右次」的形式。为什么出现这种差异呢?以下是我个人的理解。

1)位置差异性分析

根据「认知负荷>视觉负荷>动作负荷」理论,在页面中我们首先要让用户能够找到按钮,然后完成操作。

相对于弹窗,页面的空间更大,边界感偏弱,用户的视觉重心更容易停留在左侧表单内容区域。所以按钮应该紧随表单,便于用户快速发现按钮。如果将按钮放置页面右下角,或者页面底部,用户的视觉负荷更高。如下图所示:

图片

在紧随表单内容的场景下,设计时优先考虑用户「F型」浏览习惯的原则,将主要按钮居左放置,更加强调主按钮的信息。

而在弹窗中空间更小,内容相对比较紧凑,更加适用于「古腾堡原则」,用户的视觉终点会停留在右下角。而用户的鼠标往往是停留在屏幕右侧,所以主按钮放置在右侧,更方便用户操作。

2)对齐方式的差异性分析

再扩展下对齐的思考,表单中按钮为什么不与标签对齐,而是与输入框对齐呢?

  • 隐喻认知

按钮作为表单的操作项,可以认为与输入框的性质是一致的,是需要与用户发生交互的。而表单中左侧的标签则是信息区,主要承载的是用户信息浏览。因此按钮归属于交互区,需要与输入框对齐。

  • 视觉要求

标签有3种布局形式,顶对齐、左对齐、右对齐。

顶对齐场景下,标签、内容区和按钮三者对齐,不会出现什么问题。

左对齐场景下,标签需要预留一定的信息空间满足长文本标签的场景,如果按钮靠左对齐会造成明显的右侧内容空白,让整个内容区视觉重心不稳。

右对齐场景下,除了视觉重心不稳,还会造成整体的视觉错乱。如下图所示:

图片

所以按钮与输入框对齐,在视觉上整体更加协调。

总结

简单总结下:

1、「一致性」作为设计的基础性原则是非常重要的,对设计、开发以及产品体验的提升都有很大的帮助

2、一致性原则不是强制原则,需要根据产品定位灵活变通地应用

3、一致性的价值在于提升用户体验,需要符合用户的认知和习惯

好了,今天就到这里了,下期见~


作者:子牧先生

转载请注明:学UI网》3个案例,正确理解B端产品中的一致性原则

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


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


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


日历

链接

个人资料

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

存档