层次感是什么？
把画面中的各个元素合理的、清晰的、有节奏的组合在一起，使整个画面看起来更加的舒适、愉悦和协调。是不是感觉很深奥？好吧，换句简单的话来说就是——不多、不少，看起来舒服正好！
这篇文章分为3个章节，而每个章节都有若干细分的知识点，各位看官请仔细看哦！
初步理解，先来看看文章大纲：
一、画面的层次
使用点、线、面来分割画面
留白
在摄影中找层次
二、色彩的层次
颜色的对比
渐变色的流行
多种颜色搭配的控制
三、文字的层次
字体的对比
文字的对比
一、画面的层次
1.使用点、线、面来分割画面
点、线、面是设计中最基本的设计元素，学过平面构成的同学应该都有些了解，连点成线、连线成面、而面缩小到一定程度就是点。而面的边界就是线，线的宽度增加和点扩散到一定的面积也就成为面。
上面的这几句话看起来比较复杂，其实仔细想想这就是世界里一切元素的原理甚至是宇宙星空。我们下面来举个例子。
请点击输入图片描述
上图就基本可以把点、线、面的所有变化全部概括。下面我们来分析一下。
请点击输入图片描述
红圈里的十字元素可以看作为“点”做为整体画面中的装饰元素出现。要注意的是所谓的“点”并不只是圆形的哦。任何在画面中尺寸和面积相对最小的元素都可以看做成“点”。而画面中的小圆点既可以看做“点”，也可以看作“面”。所以连点成面也是没错的。
请点击输入图片描述
黄色圈里的线大家认为是什么？我认为它并不是线而是点。为什么呢？因为无论从它在画面中的占比还是所起到的作用来看，它都属于点的属性。而线在那？在绿色块和红色块的交界处。还有色块的边界处。而这正说明了“线”的一个重要的用途——分割。画面中的“线”把整个画面分割成了4个大小不一的区域，这种分割让画面更加有趣味性也更加有层次感。
请点击输入图片描述
而线分割出来的4个区域也就是元素“面”。
这个图例不仅说明了点线面的几个重要的特征，也证明了点线面并不会因为它的形状而固定的，而是会不断变化的。
最后总结一下点线面的一些特点：
点：是最有装饰性的元素，因此大多情况下在画面中起到装饰作用。
线：除了装饰作用外还起到对画面的分割、元素的穿插和对视觉引导的作用。
面：往往起到稳定画面和承载重要信息的作用。
另外要注意的是：点线面是组合使用的，想想看没有面的衬托又怎么能显示出点和线的特征呢？
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
通过这些设计案例我们可以分析并总结出，有效的利用点线面的组合可设计出层次丰富的作品。而我们要如何做呢？——置换临摹。借鉴好的设计作品的点线面的构成元素再加以利用和创新。
请点击输入图片描述
2.留白
留白是设计中很常用的手法，留白除了让画面整洁、干净和透气外，更是对“面”的更深刻的理解和使用，而现在用的非常广泛的极简设计就是在留白的处理上用的比较好的一种设计类型。
我们这里再说一下留白对层次的影响，先看几个设计案例。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
上面的几个设计作品的共同特点就是有大量的设计留白，并且在留白的同时对画面的层次进行了处理，例如留白与主图之间的大小对比，标题与补充性文字直接的对比。
请点击输入图片描述
我把上面的图做了个处理，分成背景层，留白层，主体模特层，标题文案层和功能文案层。从这里我们就能看出这幅设计的层次是如何设计的了。大家也不妨把自己喜欢的设计这样分层解构，来研究一下设计的层次。
3.在摄影中找层次
现在的设计中，摄影图片的使用也是越来越多了，尤其是质量高的摄影作品往往能最大限度的提高设计的品质。但是这是为什么大家想过吗？其中一个原因是摄影中也存在着层次。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
这个装B耳机大家熟悉吧，这就是用摄影的方式来做的，并且其中近景，中景，远景三个层次全都有。不仅看起来画面非常细腻丰富，而且也品质感十足。
但是如果图片层次少怎么办？很简单，我们可以使用文字来做为图案元素来增加画面层次。
请点击输入图片描述
请点击输入图片描述
二、色彩的层次
1.颜色的对比
使用对比色和反差大的颜色来设计也是增加层次感的一个常用方法，因为有非常强烈的颜色对比，画面的冲击力会非常强烈，给人们的视觉观感也会更加刺激。
黑黄对比是非常经典配色方案，虽然只有两个颜色，但是通过画面中的文案和图片的组合也会显得非常丰富，在这种极简的配色中更加需要对点线面的合理运用否则会显得有些单调。
请点击输入图片描述
从上面的设计来看，设计师在用黑黄配色的时候又用了黄色的对比色——蓝色，这样既可以让画面的颜色更加丰富不会单调，又会让画面中的一些重要元素凸显出来，起到强调作用。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
黄蓝配色和红绿配色也是经常用到的经典配色，上面两个案例可以看到，黄蓝配色多用饱和度比较高，这样显得年轻时尚有科技感，而另一个设计是红绿蓝的配色，饱和度较低，显得更加复古和深沉。
2.渐变色的流行
渐变色已经流行了几年，今年淘宝的手机app也是以渐变色来设计的，可见渐变色的使用范围也是越来越大了。而渐变色本身就具有层次丰富的特点，因此，使用渐变色加上合理的点线面元素的搭配会在具有冲击力的同时最大限度的丰富画面的层次。
在我们日常的设计中渐变色的使用还是需要更加精心的选择颜色的色值，一般来说会选择同色渐变、邻近色渐变和对比色渐变。而渐变的颜色数量也不宜超过2种。2种以上的渐变色就需要非常强的控色能力来驾驭了。（我这里说的是在同一渐变色里的2种以上的颜色哦）
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
渐变色的使用大多都出现在UI设计中，而随着UI设计的发展，web端的设计，无论是网页还是电商也有很多借鉴UI设计的设计方法和配色方法。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
渐变色的配色是可以搭配使用的，例如上图，都属于同色渐变，但是这样使用有一个规则，就是互相搭配的几个渐变色的饱和度要基本一致，否则会出现颜色“花”的问题。
3.多种颜色搭配的控制
对于多颜色的设计我们要做的就是控制饱和度和明度，尽量使各个颜色的饱和度和明度保持协调的一致。无论是清淡的中国风，还是浓烈的欧美风，都会让画面丰富有层次的同时不会“乱掉”、“花掉”。
请点击输入图片描述
请点击输入图片描述
我们可以看到，上面的几个图例里的颜色非常多，但是为什么我们会感觉非常丰富而又有层次呢？没错，就是饱和度和明度的控制到位。
请点击输入图片描述
请点击输入图片描述
三、文字的层次
1.字体的对比
字体是我们设计中必须使用并且比较难的一个环节，但是正式这个让大家比较闹心的环节会使画面的层次变得异常丰富，即使在只有文字没有图案的时候，只要排版合理也可以得到惊人的效果。
请点击输入图片描述
请点击输入图片描述
不同的字体表达不同的意境和涵义，尤其是中文字体传承几千年每一个字都有特定的涵义。而西文主要是以衬线体和非衬线体的字形装饰的变化。时而粗犷，时而纤细。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
2.文字的对比
这里的对比包括文字的字体、大小、粗细、颜色等等。为什么单单要挑对比来说呢？因为对比是最能拉开并体现层次的方法，我们逐个来说。
请点击输入图片描述
我来那这个作品来分析解构一下，30%是文字里面积最大的，也同样是画面元素里占比最大的，通过DISCOUNT VOUCHER的解释说明这是折扣信息，而这个解释也是画面里第二大占比的文字。然后就是下面的时间、地址、电话等信息，使用最小号的文字。通过这三种文字大小来把层次拉开，并且一下就得到3个层次，在加上最后面的花纹背景、白色背景和金蝴蝶结总共是6个层次。另外为了统一画面，文字的字体都采用了衬线体。
请点击输入图片描述
请点击输入图片描述
上面的这两个海报也是同样的道理，大家可以解读一下。
字体的颜色，上面两个aranya的海报是个系列，分别把主题文字aranya的颜色换成绿色和蓝色，一方面可以增加文案的层次感，另一方面可以与视觉主体的颜色统一。下面是一些设计的案例大家可以试着分析一下。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
最后说一说对齐，对齐是使画面更加有秩序，看起来更合理且舒服。我们用上面这个海报来分析一下。
请点击输入图片描述
看这些蓝色的线，就是这幅海报的对齐方式。
总结
其实层次是在综合的运用了点线面的分割，色彩的搭配和文字的排版而形成的，并且在大小比例，颜色选择，对齐等这些细节上精益求精，层次自然立现。
运用分组建立层次 在设计中，相邻的元素比分开较远的元素会更加吸引人注意，在做设计阅读顺序时，利用设计分组是一个非常有效的方法，将不同信息进行视觉间距分组。能提升用户对于内容上的理解。▲如上图slack的设计，插画引导图和底部按钮上面文字拉开了距离，使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。 ▲stadium-live的产品设计上，登录页面按钮为一组，顶部品牌LOGO和slogan一组，人物为一组，每组信息之间分组非常明确，互相都不会对对方视觉产生干扰，后面两张页面也是如此，顶部的导航，和下面表单信息，以及头像和底部按钮，通过分组处理，内容更加符合用户的视觉动线。 ▲在球员定制的处理上，最右边那张图，通过卡片和线条分组处理，从视觉上很清晰的看见排名；哪两个球队之间正在进行比赛。 ▲当一组信息比较接近时，证明他们是有关联的，如果距离比较远，这意味着这组信息和他们是不同的，简单来说，通过邻近性原则创造这些关系，为信息带来层次。 运用空白建立视觉层次 空白也是视觉设计元素，并不是留白就是空着，如果设计中留白运用合理，可以帮助用户理解很多信息，因此任何设计都需要通过适当的负空间来传递信息。▲如上图我喜欢的一个应用classpass设计非常极简，页面中大量运用留白来凸显内容。 ▲classpass的设计不会使用太多的视觉元素，而是运用留白把内容进行分组，每个页面的留白恰到好处，同时留白本身就是对信息进行区分，所以页面中减少了很多线条使用，会更加干净有品质感。 ▲must是一款电影软件，整体设计非常杂志风，页面就是通过图文处理，以及留白空间的处理，增加对比，基本产品使用过程中你不会感觉到视觉负担，元素之间的信息组织的非常清晰。 ▲在电影展示页面，信息的处理，以及打分设计上，多次运用留白来处理信息层级，在设计中，当你元素周围留白越多，它产生聚焦注意力的作用也越强，如右边的打分页面，几乎所有焦点都在这个d窗上。 ▲Artsy是一款艺术品电商网站，整个app的设计也充满了艺术气息，每次我设计找不到感觉的时候就会去打开看看，里面的排版、还有设计的细节处理，都值得我学习，但我喜欢的还是他对于板式和留白空间的处理。 ▲在首页设计，我最喜欢他相框的设计，就像欣赏美术馆的一幅画，页面留白也非常大，衬线体和非衬线体的对比也运用的非常好。 ▲整个APP的设计被大量留白包围，虽然现在流行各种质感，光感，C4D的设计，但是大量视觉元素会让页面过于饱和，如果没有很好的视觉引导，用户会感到不知所措。这种简单的返璞归真，也能让人视觉不容易产生疲劳。 运用氛围建立层次 ▲每个纹理的运用，有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力，但是背景纹理的运用不能为了设计而设计，而是需要和产品内容有关系。比如纹理和文字内容、和信息是密切相关的。如上图，是一款打车软件，背景结合了打车的地图，公路线路，用车场景；让页面对比和设计层次更加突出。 ▲Jour这款产品在设计上，背景通过有层次的氛围纹理和质感，使得页面氛围感很强，层次细节更加丰富，当然在设计时候切忌对于设计氛围过度运用，那样会让用户分散注意力。 ▲其它场景上氛围纹理的运用，卡片上通过系列插画的塑造，页面虽然有很多插画，但是页面平衡感同样被把握的很好。用的时候需要考虑用户在不同界面看见的元素视觉感受是一致的。 ▲氛围除了图形，其实色彩也是很重要一种方式，我很喜欢的ASANS的设计，在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富，这些几何图形丰富细节的同时也让整个内容更加凸显。 ▲如上图是里面一个注册登录场景，界面中，除了背景灰色底纹通过几何图形来烘托视觉层次，同时在插画上也非常巧妙，用户输出时，完成后，整个插画到品牌图形的连贯变化体验非常好。 ▲Sift是一款新闻类阅读产品，这类型产品设计一般就是文字排版，设计简约为主，但是sift运用了一种大胆的设计，背景氛围上采用一些点线底纹的肌理效果，和内容结合的平衡感把握的很不错。 ▲Lugg是一款货车APP有点像国内的货拉拉，整个设计氛围感也非常强，运用的全插画设计，从引导页，到核心功能页面的设计都能看见完整插画的运用，是我目前见过运用插画氛围作为主设计最好的产品。 ▲感兴趣的同学可以去美国苹果商店下载使用，页面中增加氛围是一种增加层次很好用的方式，但是同样需要注意好视觉平衡，不要本末倒置。 运用字体对比建立层次 ▲运用衬线字体和非衬线字体对比是非常常用的方式，如上图运用了Adelle Sans和Tiempos这两款字体的对比让页面内容结构非常清晰 ▲上图官网的设计，干净的排版，通过字体大小、字型进行对比，体现出视觉层次。 字体的选择本身也是设计中很重要的因素，好的设计不仅能提升设计品质，同时也能让页面视觉层次更加分明。本人产品小白一枚，此文章也是参考上的大大所写，感觉他用的比喻十分恰当，借来用用。自己深刻理解一下：
战略层 ：明确公司与用户对产品的期望与目标
我们要确定产品目标和用户需求，如：我要盖房子，必须清楚盖房子要干嘛，给谁住。
输出：MRD、用户研究报告、竞品分析报告等
范围层 ：将战略层的目标转化为产品提供的功能及内容
这个产品需要做哪些功能。根据用户的需求排列功能的优先级。如：盖这个房子要包含什么东西？电梯？卫生间？几居室？阳台？
输出：PRD、产品功能规格文档等
结构层 :设计产品的架构图，将分散的功能和内容组成一个整体
主要做功能的架构，用什么样的结构来展示你的功能以及基本的交互。如产品分几个模块，每个模块包含什么。如：怎么摆放这些东西，楼梯在哪？wc在哪能
输出：架构图
框架层 ：将抽象的框架图转化为详细的线框图，确定界面外观，导航信息及信息要素的布局
具体到所有功能的设置，通过原型表现出来。如，首页放置什么功能，每级的结构链接是什么。类似于盖房子的图纸
输出：原型图
表现层 ：根据产品目标，结构等因素，决定产品的风格。用什么样的色彩，什么样的设计模式等。类似于房子装修.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）