产品设计的三个层次

功能可见性

信息优先级

层次-内容层次与视觉表现的强弱相对应

主线、支线

视觉引导

路径依赖、轨迹（用户习惯）

留白突出重点

视觉轻重区分-亮点适当突出

氛围创造（精致、海量信息）

容错-反馈-方案提供（recovery）

用户话语代替计算机术语（字母代替字节）

拟人化

微交互-网易云刷新、facebook like、

iconfont搜索、icity皮肤切换专转场

本人产品小白一枚，此文章也是参考上的大大所写，感觉他用的比喻十分恰当，借来用用。自己深刻理解一下：

战略层 ：明确公司与用户对产品的期望与目标

我们要确定产品目标和用户需求，如：我要盖房子，必须清楚盖房子要干嘛，给谁住。

输出：MRD、用户研究报告、竞品分析报告等

范围层 ：将战略层的目标转化为产品提供的功能及内容

这个产品需要做哪些功能。根据用户的需求排列功能的优先级。如：盖这个房子要包含什么东西？电梯？卫生间？几居室？阳台？

输出：PRD、产品功能规格文档等

结构层 :设计产品的架构图，将分散的功能和内容组成一个整体

主要做功能的架构，用什么样的结构来展示你的功能以及基本的交互。如产品分几个模块，每个模块包含什么。如：怎么摆放这些东西，楼梯在哪？wc在哪能

输出：架构图

框架层 ：将抽象的框架图转化为详细的线框图，确定界面外观，导航信息及信息要素的布局

具体到所有功能的设置，通过原型表现出来。如，首页放置什么功能，每级的结构链接是什么。类似于盖房子的图纸

输出：原型图

表现层 ：根据产品目标，结构等因素，决定产品的风格。用什么样的色彩，什么样的设计模式等。类似于房子装修.

一直有种说法，美是主观的，所以有些美是不懂的人无法欣赏。但作为职业，视觉设计不可能这样游离在主观评审之中，总有一些划分标准来对设计的水平进行划定。我觉得看评审一个视觉设计师作品处于何种水平，可以通过以下标准：

第一层，也是视觉设计的最基本的层级，是呈现秩序感。视觉设计不是艺术创作，其目的首先是服务大众，所以最初级的视觉设计是让作品让人赏心悦目。而秩序感是一种比较共性的美学追求，因为秩序往往带来舒适，无序带来冲突。那设计的秩序感如何衡量？一是产品的整体性，二是细节的精致化。这两个标准都蕴含了设计中一致性的追求，但同时各自有不同的考虑。整体性更注重布局，而细节更注重交互中控件、动效等具体模块。这阶段设计师传递是产品的品质感，是考校设计师的基本功，如果连基础都没能做好，讲其他文化、情感都是浮云。

第二层，是视觉设计核心层，是符合群体文化审美。设计师与美工的分化始于设计师开始考虑用户的审美要求。美工可以按照要求去做到最美，但设计师是寻找群体文化的独特美学元素，并融入到产品中。这个阶段考校的更多是设计师的同理心，最常用的方法应该是借鉴。这里的借鉴不是狭义的同类竞品分析，因为这会限制视野，而且有时定位不同，用户也会有差异。所以借鉴更多是去探寻引发特定群体聚集的事物，可以是线上社区或产品，可以是线下活动，更可以一起讨论的影视剧等等。设计师需要从中提炼出引发特定群体共鸣的元素 ，并在设计中有机结合。这个阶段往往是造成一开始说的“有些美是不懂的人无法欣赏”，但这些美应该是产品服务对象能够欣赏的。

第三层，是视觉设计的高阶层，是引导用户产生情感或思考。一个有追求的设计师，应该是一个独特的创作者。高阶设计师不是全然按照客户或用户的需要来设计，而肯定是会有自己的思考。但是仅有思考是不够的，他必须通过设计来体现，引导用户去感受并认可这种思考。而且与艺术作品的天马行空不同，我觉得视觉传达的结果不应该是一千个人眼里有一千个哈姆雷特，起码在思考的方向上不应该是。

视觉设计是通过外在视觉传递设计师对产品思考的手段，决定设计水平高低的是设计师思考的层级及其传递手段是否有效。

层次感是什么？

把画面中的各个元素合理的、清晰的、有节奏的组合在一起，使整个画面看起来更加的舒适、愉悦和协调。是不是感觉很深奥？好吧，换句简单的话来说就是——不多、不少，看起来舒服正好！

这篇文章分为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的颜色换成绿色和蓝色，一方面可以增加文案的层次感，另一方面可以与视觉主体的颜色统一。下面是一些设计的案例大家可以试着分析一下。

请点击输入图片描述

请点击输入图片描述

请点击输入图片描述

最后说一说对齐，对齐是使画面更加有秩序，看起来更合理且舒服。我们用上面这个海报来分析一下。

请点击输入图片描述

看这些蓝色的线，就是这幅海报的对齐方式。

总结

其实层次是在综合的运用了点线面的分割，色彩的搭配和文字的排版而形成的，并且在大小比例，颜色选择，对齐等这些细节上精益求精，层次自然立现。

空间意识

空间意识是四个意识中的首位，所谓“空间”，一般是指整体画面内部设计与划分出的种种局部空间形式。设计师在建构有序合理的版面秩序时需要对版面空间进行理性的划分与合理布局，也就是有空间意识，这种做法首先是一种整体策划，其次是要处理好整体和局部的关系。

理性思维是一种有明确的思维方向，有充分的思维依据，能对事物或问题进行观察、比较、分析、综合、抽象与概括的一种思维形式。平面设计师进行理性分割、合理布局，在版面设计中，设计师较好地利用图版比例与画面的分割，会给人以理性、科学、有序的视觉效果，从而达到有效信息传达的目的。

另外，在版式设计中，一定要充分发挥留白的作用，有意识地、有目的地去留白。因为借留白给画面带来更广阔的空间，使画面主次分明、主题突出，虚实得当。空间意识在设计师创作中很关键，我们也要好好学习这种意识。

层次意识

在版式设计中构成画面层次关系主要因素有肌理、黑白灰以及虚实对比关系等等。有的设计师在版式设计过程中总觉得画面缺乏张力，显得有些“板”。究其原由，缺乏层次关系对比可能是其中重要原因之一。

层次就是各种对比关系的具体体现。在平面设计中，层次具体表现在两个方面：一是利用不同肌理对比产生视觉上的虚实节奏感二是利用黑白灰明度关系形成一种前进与后退空间感。通常而言，设计师有了较好的创意构思之后，会选择适合而有效的表达形式来进行诉求，可见，层次意识在设计中的重要性。

总之，版式设计的功能并不在于仅仅去美化版面、吸引读者注意，更应体现诉求流程合理、传达信息有效以及编辑思想手段等层面上。以上就是今天的分享，咱们下期接着聊。

品牌VI设计需求中的层次理论包括以下内容：

第一层次：识别需求（是品牌设计的目的），第二层次：美感需求（是品牌设计的接触点），第三层次：应用需求（是品牌设计的价值），第四层次：版权需求（是品牌设计的保障），第五层次：创意需求（是品牌VI设计的灵魂）。这形成品牌设计金字塔的结构。通过这五层次需求来指引品牌设计方向，帮助品牌快速创建优秀的形象，带来商业价值。

奥慧 东莞

在一个版面中，信息的组别越多，拉开信息之间的层级关系就越为重要，当然，难度也会越大，这篇文章葱爷就带着大家一起来解决这个问题。1.为什么要有层级关系？因为通常一个版面中的元素和信息是多样的，例如在一个画册版面中可能会有：图片、标题、小标题、正文、注解、页眉、页脚等等。而且这些信息会有重要和次重要之分的，如果在排版上毫无层级关系，如下图：那么这个版面在视觉上就会显得非常平，缺少变化和设计感，所以也不会好看。更重要的是，由于没有层次、缺乏视觉引导，受众感受不到画面中的主次关系，所以会大大降低阅读和信息传播的效率。而上图经过重新排版后，把各个不同类别的信息都刻意做了视觉上的调整和加工，版面具有了比较强的层次感，所以在美观性和阅读性方面都大大提升了，这就是版式设计为什么要有层级关系的原因。 2.如何正确安排层级关系？01. 按信息的重要程度来安排它们的层次等级有层级就会有主次，而视觉上谁是主谁是次呢？这就得与信息的重要程度相呼应，我们要使最重要的信息最为突出，次要的信息次要突出，而不重要的信息则要弱化处理。上图的文字排版就有着鲜明的层级关系，标题最为重要，使用大写的Didot字体，且关键单词“ART”和“FASHION”字号最大，为第一层级；非关键单词“THE”和“OF”用了比较小的字号，为第二层级；引文为第三层级，使用小写和普通衬线体，字号比标题中的非关键字小一点，且使用水平倾斜效果，以区隔其他信息；正文为第四层级，字体与引文相同，但字号要小一点；注解为第五级，字体为无衬线体，字号比正文更小；页码为第六层级，虽然字号比正文和注解要大一点，但是由于位置在左下角，且整体的面积较小，所以并不突出；页脚为第七层级，字号和字体与注解一样，但位置位于右下角，且排版方向为竖排。所以在使用一些修饰技巧时，我们要知道哪些技巧可以最大程度上突出信息，哪些次之，哪些可以将其弱化，具体有哪些技巧，葱爷后面会做总结和分析。 02.层级区分要尽量明显比如字号大小区分，如果标题文字比正文的字号只大两三号，那么虽然标题在理论上要更突出一些，但是效果会很不明显，所以我们可以大胆地把标题拉大一些。

01. 确保你的标题、副标题和正文的字号是逐渐减小的

这些是印刷党的三剑客。让字号从最大到最小，可以让读者自然的根据你的顺序去阅读。你的标题应该是首先让读者看到的，所以一定要确保他非常明显。你可以用比较大的字号并且非常醒目的字体。

副标题应该是相对于标题来说较小的字体。正文字体是最小的，应该清晰易读。避免使用复杂的字体或特别刺目的颜色，因为这样会分散眼睛的注意力，让文字更难阅读。

02. 增加图标的大小，来反映其重要性

记住保持最重要的对象是最大的。元素尺寸越大，说明越重要。上图中增大图标大小，给人传递一种“行动呼吁”的信息。与图片主题更相关的图标，作用会更强。

03. 使用颜色作为一种视觉亮点

色彩不仅能唤起感情，还能区分什么是重要的，什么是不重要的。使用明亮、大胆的色彩能够吸引眼球，让它成为设计中的焦点。在这个例子中，“sunshine”的颜色是选择的黄色的花的颜色，这使得他更加明显。

04. 混合使用不同的字体样式

大多数字体有不同的风格，如粗体和斜体，在您创建层次结构时，他可是特别有用。

05. 用框架来排列您的图片

使用网格的层次结构是创建一个设计的简单的方法，特别适合叙事性主题的设计。您可以把主要的图片放在最大的方框中，次要的放在较小的方框中。还有，可以通过同样的滤镜将所有的照片设为同种风格。

关于怎么让平面设计作品增加层次感，环球青藤小编就和您分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣，希望分享的这篇文章能够对您有所帮助。如若您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。

层次感可以从几方面着手

一是空间层次感

你可以充实一点

该亮的亮

该暗的暗

该虚的虚

该实的实

一是色彩层次感

你可以用色彩对比强烈一天

或者用所谓的表现形式突出

一是板式层次感

在物体空间层次的基础上

加上独具风格的板式元素拼接

。。。。

不过最重要的是和客户沟通

客户需要什么类型的层次感

比如说

他喜欢画面满一点

还是简约而不简单

还是色彩丰富点

还是空间突出点

不过你得注意问话方式

如果他说都要

看你怎么办

或者就让客户指一些给他看的案例

是不是照这样的类型整