如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

文叠文

该技巧操作起来很简单，就是在标题或内文下面，增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意：

• 颜色要比上面的文字淡，以免影响其识别性；
• 字体要用粗体，且字号要比上面的文字大；
• 要与上面的文字错位排版。

之所以这么处理是为了增加版面的层次、对比，以及丰富元素。

给标题增加小色块

这是增强标题设计感的另一种处理方式，单纯的文字标题难免显得单调，我们可以通过增加辅助元素使它变得更丰富一点，比如在文字的基础上加小色块。

色块的高度最好大于笔画厚度，小于文字的高度，加上去的方式可以是叠加于文字之上，或是置于文字底部，创造出文字的一部分在色块内一部分在色块外的对比效果。还有，色块的颜色最好来源于版面中的其他元素。

用斜线或点填充空白

在做设计的时候常常会遇到这两种情况，一是版面中会多出一些影响版面平衡的空白，但已经没有合适的内容可以填充了，如果硬塞一些装饰文字或者图案，很可能会弄巧成拙；二是有的区域小元素小信息比较多、比较散。怎么办呢？

这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形，然后把它填充在空白处就可以平衡版面，且不会造成突兀的感觉，如下图案例：

要点：线条不宜太粗，点也不宜太大，而且此方法只适合填补小空白，不适合填补大面积的空白。

在比较散的元素下方排一组斜线，可以把各个分散的元素联系起来，使其成为一个整体。如下图：

把背景分成两个斜切的色块

背景能很大程度地影响版面的设计感，这一点应该都有体会，常规的处理方式是把背景作为一整个色块，而如果把背景分割成两个几何色块时，设计感立马就会增加不少。

分割的方式好比用一把刀在背景的黄金分割处，划一条倾斜的直线贯穿版面，使整个背景一分为二，而这两个色块的颜色对比要比较强烈。另外，在横版中用左右分割，竖版中用上下分割效果会比较好。

给图片加圆形色块

增加对比关系是加强设计感的最有效技巧，我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物，那么在这些图片上加一个圆形的色块，创造出虚与实的对比，通常也能得到不错的效果。

要点：

• 色块可以置于图片底部，也可以采用正片叠底压在图片上方；
• 圆形色块的边长至少要超出图片宽或高；
• 图片与色块要错位排列。

给每行文字都加一个色块

该手法在画册和海报设计中比较多见，与直接在一段文字下方加一个大色块不同，而是要根据每行文字不同长度，单独加一个相应长短的色块，所以这些文字每一行的长短最好是不一样的。

这种处理方式可以使整段文字看起来更整体，增加文字视觉冲击力，而且还能使文字与背景区隔开，加强文字的识别性。

要点：

• 段落文字行数太多或太少效果都不会很好，3-10行左右为最佳。
• 各个小色块可以相互连起来，也可以相互隔开，以实际效果为准。

用飘带装饰包装上的文字

如果你看过的食品包装够多，你应该能发现，很多包装上的产品名称、广告语或者卖点等信息，都会摆放在一条飘带上。这么处理的效果通常不错，因为飘带具有礼品、赠送的寓意，用在哪里都不会太唐突，而且飘带的形式简单、有细节、变化丰富，很适合用作装饰元素。

还有一点也很重要，飘带的形式一般都是柔软的曲线，这与版面中其他直线元素可以形成鲜明的对比，加强版面的灵活性。

结语

以上的七个小妙招是不是既简单又实用，你们在做设计的时候记得拿出来试试。不过这些也确实只是小技巧而已，只能优化局部，不要指望用上这几招就能做出很好的设计，而且它们也不一定适合所有情形，在实际操作中一定要具体问题具体分析，灵活运用。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1.字号的设置

2.根据需求随意组合 

3.英文的行高

4.英文的行间距

5.中文的行高

6.中文的行间距

7.行高的禁忌

8.标题行高

9.正文行高

10.混合编排

11.字体选择

1.字号的设置

字号就是字体的大小，文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。页面的字号我是以4为基数进行递增的，最好采用偶数。像14号字的正文和13号字的注释，这种比较小的字可以不以4为基数来做。不管设计师怎么去定义字号，只要视觉上美观大方并具有关联性，采用哪种规则去约束它都可以。

另外所有的字体都要调试出深色和浅色两种配色，并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。

2.根据需求随意组合

当我们定义好字号，标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系，字号差异越大它们的层级关系就越明显，但它们之间的差异又不能太大，差异过大会影响整体的视觉平衡性，给人一种不和谐不自然的感觉。

例如：标题字号20px搭配正文字号12px；标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。

3.英文的行高

在设置文本行高的之前，需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和设计Affinity Designer等绘图软件都是以“行高”来进行定义的。在CSS-Style line-height属性是行高，值分别以百分比、数值和像素来表示。例如：h1.test {line-height:112px}，那标题h1的行高就是112像素了；绘图软件中控制行上下距离的也是行高。好的言归正传，中文的行高与英文行高会有一些差异，英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，如下图所示。

基线是英文字体结构中的概念，先简单了解一下它吧，以后讲到字体的时候再讲它吧。我们在绘图软件填写行高的数值时，改变的就是上图所示的这段距离。

4.英文的行间距

英文的行间距就没有行高那么复杂，也不用画基线。英文的行间距跟中文相同，指的是一行英文的底部线与下一行英文的顶部线之间的距离。其实也可以简单的理解为“行与行之间的距离”并称之为行间距。另外英文底部和顶部都有对应的专有名词的，在英文字体结构中最顶部/最底部隐性的两条线称为“上沿线/上限线”和“下沿线/下限线”。这块的知识先了解一下就行，以后在字体结构中会讲到。

5.中文的行高

接下来理解下中文的行高。上面讲到说英文的行高是由基线决定的，但中文字体与英文字体结构不一样，中文里没有基线的概念，那该怎么定义行高呢。中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文字体结构中没有上沿线/上限线和下沿线/下限线的概念，它们只存在于英文字体结构中。

6.中文的行间距

中文的行间距就比较好理解了，跟英文的行间距的道理相同。是指一行中文的最底部与下一行中文的最顶部之间的距离。也可以理解为行与行之间的距离。

虽然说行高与行间距的差别不太好区分，而且还有些绕，但理解它们还是很有必要的。

7.行高的禁忌

不管是标题、正文还是注释，他们的行高都不宜过高，行高过高会导致内容不易阅读，文字之间的整体性也会被打散。标题的字号越大行高应该越小，正文的字号越小行高应该越大。当然这些规则都是相对的，行高大小要合理把控，不能太大或过小。那要如何合理设置行高呢，往下看。

8.标题行高

标题的行高由字号决定的。平面设计中有时候可以把行高设置与字号相同，例如120pt的字号设置120pt的行高是没有问题的。在页面中行高是这么计算的，字号x倍数=行高。例如下图所示，大标题H3设置的字号是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字号与行高的倍数是一点点测的，因为字号与行高的比例不会小于1.0（1倍），我就根据自身审美进行测试，从1.0/1.1/1.2/1.3....开始测，直到测出自己满意的行高。如下图所示，带颜色数字的是倍数。

最终的行高还是由设计师直观判断决定的。所以做设计要理性中夹杂感性，规则与创意并存才是一个优秀设计师需要兼备的品质。那我就拿中文字号36px和英文字号24px来举个例子，这样大家好理解一些。如下图所示：

从测试结果中找到自己满意的行高就可以了。字号x倍数=行高，这里也不怕倍数小数位太多的问题。在绘图软件中是以像素为单位，但有时候前端代码会用父继承单位“em”。例如：大标题H3的字号是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那转换为前端代码就是h3.test{line-height: 1.3em}，直接做约等于就行了，差一点点看不出来的。

9.正文行高

来接着往下讲。正文行高与标题行高相同，差异就字号的不同选择的行高也不同。标题行高倍数大概1.0-1.6不等，正文行高倍数大概1.6-2.4不等，这也没有一定的标准，还是得根据项目情况与实际效果综合来看。如下图所示，带颜色的数字是行高的倍数。

说到这里，经常有人问我正文的行高的值应该怎么设置，大家在做设计时都会采用1.5/2倍关系，但这不是绝对的，行高的倍数也是受字号大小影响的。像新浪新闻的正文，字号是18px，行高设的是32px，即字号（18px）x1.777（倍数）=32px（行高），如果行高倍数设置2倍以上，字与字之间的距离变大，就不太好阅读了。

10.混合编排

好的，完全理解上述所有知识就可以把标题、正文和注释进行混合编排了。大标题字号40px、正文字号20px、正文行高40px、注释字号18px、注释行高32px、标题与正文的间距88px、正文与注释的间距64px。

11.字体选择

选择字体就没有什么技术含量了。做页面常用字体就只有那几种，微软雅黑、宋体、Verdana、arial、Times New Roman，就不举例说明了。中文网站最常用的就是微软雅黑+Arial，浏览器兼容性也最好。读到这里有人可能就会问了，载入其他字体也可以啊，是的做企业网站可以载入其他字体，但像做功能页面啊、后台页面啊，载入其他字体几乎就不可能了。所以还是要估计实际项目需求/品牌需求来选择与其相符的字体样式。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

类似这种「矛盾」的设计原则还有好几对，接下来葱爷要把它们一一理清，让这些理论知识能真正指导设计实践。

对齐与变化

对齐是版式设计最基础的原则之一，具体指版面中的字与字、字与图、图与图要对齐，常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。对齐的目的是为了使版面更整洁，更便于阅读，比如下面这些作品都用到了大量的对齐关系。

我们来举个实例，假设你现在要设计一则手机banner图，目的是宣传某款手机的拍照功能，文案如下：

这种图不难做，你打算直接用一部手机和几张摄影作品作为画面的主视觉，于是去图片网站找了几张能体现该手机拍照功能好的图片：

图片找好后，你把其中一张图片填充到手机里作为屏幕背景，其余图片分散在手机周围，然后你把整个视觉主体放在了版面中央，文字则按主次排在了两侧，大致效果如下：

你盯着画面，正琢磨着还要加点什么的时候，总监不知何时出现在了你身后，他面无表情地盯着你的电脑，嘴里慢吞吞地吐出几个字：「太乱了，好LOW」，之后就消失了。你很聪明，立刻明白了总监是想要自己排得更整洁、更有序一点。

在目前的版面中虽然个别元素之间有对齐关系，但是缺乏整体的对齐，且图片采用了自由式排版，所以会显得混乱。于是你尝试把图片对齐排列，文字则以图片为基准进行对齐。

△ 左边的文字部分与右边的图片部分保持上下对齐，标题与内文为左右两端对齐，icon 与文字则是左对齐。

上图很「完美」地执行了对齐原则，整个版面干净、整洁了许多，视觉流程也更简单了。这下总可以了吧，然而事情并没你想的简单。因为总监不知何时又出现在了你的身后，他瘪着嘴一脸嫌弃地说道：「太呆板了，有点变化好不好？」

变化？难道又要调回改之前那种状态啊？当然不是，你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里，既要对齐，又不能机械地对齐；既要整洁有序也要灵活有变化。如何做到这一点呢？我的理解是：要在对齐中制造一点变化，在变化中找到对齐关系。比如下面这些作品：

现在你知道了，上面的方案之所以死板主要是因为文字部分与图片部分对得太整齐，所以需要改变其中一个版块。该版面的视觉主体是图片，所以调整图片更合适。由于文字是呈水平排列的，那么图片部分是不是可以倾斜摆放形成一定的反差呢？这样既可以制造变化还能加强版面的空间感。

△ 除了把图片倾斜之外，LOGO也与内文错开移到了左上角，最下边的直线也可以延伸到了版面之外。

我们现在再回过头来看看这件作品是否符合前面我说的，「要在对齐中制造一点变化，在变化中找到对齐关系」这一要素。

从上图中可以看出，图片虽然做了倾斜，却是在对齐的基础上做的变形扭曲。版面中的元素虽然不是都对齐了某条直线，但是没有哪一个元素是孤立的，每一个元素都与版面中的其他元素有对齐关系。更重要的是，左边文字版块的视觉重心与右边图片版块的视觉重心也是呈水平对齐的，所以整个画面才得以平衡。

统一与对比

虽然设计的构成要素只有文字、图片、色彩，但是每一个要素都有无数种表现形式，不同的字体、字号、色值、质感、风格、图片、方向等等。如果在一个版面内含有太多不同的东西，会显得很杂乱，从而让人心生厌烦，所以，需要通过某种方式把这些「不同」统一起来，以达到舒适、协调的效果。

以一则运动品牌的轮播图设计为例，文案如下：

这类设计以运动员作为主体最容易出效果，所以我们需要找一个正在奔跑的人物图片。

△ 这个人的姿势不错，就他了。

运动品牌最重要的是要设计出动感和时尚感，所以我把背景分割成一红一蓝两个倾斜的色块，然后把人物放在画面中央，文字分布在左右两边，以制造出强烈的视觉冲击。

由于有一个动感十足的模特和背景，所以整体看来还是比较符合运动海报的调性，但视觉上有点乱，因为有很多细节没有统一，比如人物倾斜的角度和背景色块、标题倾斜的角度不一样，主要文字的字体风格不一样（NIKE和JUST DO IT的字体比较硬朗，而蓄势待发的字体相对较柔），元素的风格也不统一（圆角的了解更多按钮与整体风格不搭），还有各元素的颜色也缺少联系等等。

那该怎么办呢？这里就需要用到统一的原则了，我们可以试着把上面提到的不统一的地方都统一起来，如下图：

△ 调整后的方案二，字体都是简洁有力的黑体字，而且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了，「了解更多」的按钮也改成了平行四边形色块、颜色更是被缩减到了三种。

调整之后确实不乱了，但是也有了新的问题，因为各元素太过统一使得画面缺乏层次和对比，该突出的信息也没有得到突出。这时候就需要用到与统一对立的另一个原则——对比。

对比，是把具有明显差异、矛盾和对立的双方安排在一起，进行对照比较的表现手法，目的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。

想要处理好统一与对比的关系，需要记住两个要领：

• 各元素的调性要统一、元素的呈现方式要有对比。
• 要保证画面中的对比关系不会破坏整体的协调性。

顺着这样的思路，我们来给上图增加一些对比关系，例如方案二的标题倾斜角度太大，不美观，所以我干脆把它的倾斜方向改为垂直倾斜，既保留了动感也增强了对比，更加美观。在文字的字号上，我选择突出品牌名缩小广告语，加强了大小对比，并且还恢复了之前把背景一分为二的做法，只是增加了一点空间感，并把人物服装的颜色与背景色做了统一。调整后的效果如下：

我们可以观察一下，方案三确实比方案一更协调，比方案二更有层次和视觉冲击力，且整体调性依然年轻、时尚、有动感，这里就是运用了统一与对比的原则。

简单与丰富

简单应该是大家听得最多的设计原则，简约、极简风格的设计也非常受欢迎，但是我们也很困扰，因为自己做的所谓极简设计经常会被人说太单调、不够丰富；而那些自我感觉很丰富的设计又会被说成是杂乱。为什么会这样呢？我们先来正确地认识一下简单与丰富。

简单并不是指做设计要用最少的元素、不做任何修饰，而是指设计主旨要简单，视觉流程要清晰，视觉要聚焦，主次要分明。

△ 上图的设计虽然元素和色彩都很多，但整体给人的感觉也还是简单的。

而丰富也不是指画面中一定要有很多元素或叠加一堆的效果，而是指有细节、有层次、有品质感。

△ 上图的设计虽然整体看来很简单，但是并不会显得单调。

为了方便理解，我们还是来举个例子：一款农产品册子的封面设计。该封面的必要元素很简单，只有一个 Logo 和一句文案，因此，我们很容易想到做个极简风格的设计。白色背景加一个 Logo 和一行文字，再配一款特种纸，做点工艺，就可以显得很高大上，很多大品牌也是这么做的。

这也是一种还过得去的解决方案，但表现手法确实太过简单，既体现不出设计师的设计功底，也没有体现出农业品牌的调性和特色，且缺乏吸引力，所以我们需要做加法，让其变得更加丰富。

怎么丰富呢？最直接的办法就是引入图片和色块，由于品类为农产品，且文案重在强调健康和安全，所以我们可以找一张绿色、生态的图片。

为了与狭长的版面保持统一，我把图片也裁剪成了竖版的矩形，并与一个同样大小的绿色色块结合在一起，组成版面的主视觉，logo放在图片左侧，如下图：

这么做还是有些设计感的，也增加了品类属性，不过缺少细节、不耐看，所以还需要加点东西。当然，新增加的元素只能作为辅助，不能太过抢眼，图片方面我很快想到了叶脉，叶脉与图片中的叶子元素也能产生关联，且适合做底纹，于是我又找来了一张叶脉的图片。

把叶脉图片放在图层最底部作为背景处理，这里会遇到三种情况，一是如果把叶脉纹完全平铺的话，整个版面就没有留白了，所以会显得压抑；二是把整片叶子都显示出来，但这么处理会显得很小气。所以我只用叶脉纹覆盖了一半左右的版面，与图片部分形成呼应，这样的效果看起来是比较舒服的。

图片部分得到了改善，但现在画面中还缺少一点小的装饰元素，增加一点文案是个不错的思路，所以我把文案和品牌名的英文加了进来。

做完加法后整个画面变得丰富了不少，层次也拉开了，而且给人的感觉依然比较简单，既不杂乱也不压抑，因为各元素主次分明，既有联系又没形成干扰。不过做加法的时候也要把握度，例如下图就有点堆砌过度了，看起来很繁杂、不精致。

想要处理好简单与丰富的关系，需要注意两点：

• 要保证主体单一且足够精致；
• 要保证有简单的装饰元素与主体形成互补。

规范与打破

规范与打破是存在于版式设计中的一对矛盾原则，规范是指把版面中的元素要按某种规律，或是在特定的范围内设计布局，目的是为了让画面更有条理和秩序，也更像一个整体。

△ 上图的主要元素都规范在一个矩形中，然后各个小矩形又组合成一个大矩形，看起来很整体，很有设计感。

与规范对立的是打破，指打破规范、打破束缚、打破平静，目的是为了使画面看起来更灵活、更有动感、更具视觉冲击。

△ 用色块或图片来创造束缚感，然后把部分元素冲出色块，是规范与打破的一个经典组合形式。

可以说经过了严格规范而变得很好看的优秀设计很多，而有些设计却选择了打破规范，也得到了很惊艳的效果。那什么时候该严格遵守规范？什么时候应该打破规范呢？其实在一件完整的设计中最好两者都要有，而平衡这两者的要领就是：先规范后打破，即在规范好的基础上选择一些局部来打破。

葱爷还是以一个画册的封面设计来作为讲解案例。这是一本中国移动云服务平台方案介绍的册子，文案如下：

很明显该封面的视觉调性应该要有科技感，要能体现互联网、信息、大数据这些关键词，所以我找了一张看起来很有科技感的图片。

这类画册的版式通常应该偏向简洁、规矩，所以我决定用网格系统来辅助排版。以图片作为封面的主视觉，除了Logo，所有元素都排列在矩形图片内，并且所有文字都按照网格的设定保持左对齐，所有元素的高度、宽度，以及各元素之间的间距，都严格按照网格来排版。

△ 经过规范的版面整体看起来十分严谨。

不过这么做也造成了版面缺少变化、太过规矩等问题，所以我们可以尝试在此基础上做一些「打破」。

比如原本的 LOGO 与图片靠得太近，显得很压抑，这里就不必完全按照网格来排版，我们可以根据自己的感觉将 LOGO 与图片分得更开一些；中文标题、短线、英文标题这三者也太拥挤了，可以挪开一点；文字部分不一定全部都在图片范围内，所以我给英文标题加了一个蓝色块，并把色块移出了图片区域；以及把最下面的公司名称排在了图片下方等。调整后的效果如下：

△ 调整后的方案，构图也相应发生了变化，之前为上下构图，现在变成了对角构图。

在规范的基础上做了打破之后，我们可以看到，版面的整洁性依然在，整体的调性也依然简洁、严肃，但相比调整之前显得更灵活、更有设计感。

结语

设计不是简单的加减法，也不是只要做到对齐、统一这些很简单，方向很明确的原则就可以了，因为根本不存在什么原则可以让我们直接通向设计的终点，但是我们的目标是明确的，就是要做有效的设计，所有的设计原则、设计手段都要为这个目标服务。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

排版就是要将版面中必要的元素进行有序组织、摆放，在空空如也的画板里把一堆杂乱无章的东西排得好看并不容易，简单的对齐排列？结果可能是既单调又呆板，如果全凭感觉加些几何大色块，又觉得太大众，且跟自己的品牌和主题没有直接的关联，怎么办？今天葱爷给大家分享一个实用的排版方法：图形排版法。

什么是图形排版法？说白了其实就是用图形来承载文字或者图片。

图形排版好处

1、更易排版：在图形里排版，可选择性更少，所以更容易。

2、更有趣：用与内容或品牌相关的图形排版，本身就是个有趣的创意。

3、更整体：把设计元素聚集于图形内排列，自然显得更整体。

4、更有助于：信息传达图形本身也可以传达出一部分信息。

常用于电商设计和海报设计中：

▲用电视机图形排列主播头像和介绍文字

▲用胶片图形排列图片和文字

▲用展示架图形排列游戏装备和文字

▲用红包和单据图形排列促销信息

▲用房屋的形式排列信息

▲用购物券的形式排列促销文字

▲用蒸笼图形排列图文

▲用广告牌的形式排列文字和图标

那么，像上面这种采用图形排版法的设计是怎么操作的呢？可以简单分为四步：

一、观察

观察版面上需要排列元素的多少与形式。举个例子，以下是一本农产品小册子其中1P的文案，册子的成品尺寸为w110x200mm。

客户只提供了这些文字，从上图可以看到，字数并不少，且都是关于企业介绍的段落文字，显然这些文字要集中排版，不过如果只是像上图那样简单的对齐，未免有点单调，最好引入图片或者图形加以丰富，由于没有合适的图片，所以我决定采用图形排版法。

二、思考

用什么样的图形才能把现有的元素组合起来呢？图形的提取和选择有三个方向：

1.根据文字的属性来选择图形，比如下图需要排版的内文是一些优惠信息，所以设计师选择用优惠券的图形来承载文字。

2.根据图片来选择图形，比如下图需要排列的元素中有很多产品，所以设计师用盒子与展示台的图形来承载它们。

3.根据设计（品牌）调性来选择图形，下图是一个春节期间的电商侧栏，所以设计师用灯笼图形来作为排版的载体。

现在，我们再回过头来看看前面说的这个画册设计例子，这里需要排版的元素并无图片，而企业简介类的文字也提取不出合适的图形，所以依据品牌调性来选择图形是最靠谱的，哪些图形可以使用呢？

由于这是一个主打天然、健康的农产品品牌，所以很容易想到太阳、山、白云、树、叶子、花等图形，在这些图形中，哪一个最合适呢？

我们可以根据以下几条标准来选择：

1.图形与品牌调性要相符；

2.图形的造型要尽量简单；

3.图形要美观；

4.要适合承载内容；

5.图形的形态要适合版面尺寸。

由此可见，叶子图形是最合适的。因为其造型最简单比较好承载文字信息，不会影响到阅读性，并且也更便于在狭长版面中运用。

三、设计与排版

即使确定了采用什么图形来排版也还有很多要注意的地方，比如同样一个元素，可以设计成很多不同的图形，它们所产生的效果也会有很大差别。一般来说，抽象的、几何化的图形会比具像化的图形更合适，因为前者更简洁、更适合排版、更有设计感，下图是树叶图形的两个不同设计方向。

显然右边简化后的效果比左图效果更合适。图形设计好后当然就要把文字排上去了，文字排版的方式有两种，一种是沿着图形的内轮廓绕排（如左图），一种是在图形轮廓内自由排版（如右图）。

使用第一种排版方式能使文字与图形结合得更自然，适合字数比较多且呈段式的文字；使用第二种排版方式的优点是不需要完全受限于轮廓，更灵活，适合字数比较少的文案，很显然，在本例中更适合采用轮廓绕排。

提示：在AI中，把文字工具移动到图形的路径处，当出现如下图标时，单击鼠标左键便可以输入文字了，而且每一行文字的起始都会沿着图形的内轮廓排列。

在菜单栏文字选项中点击区域文字选项，即可调出参数框，如下图：

四、补充与优化

当然，如过版面中只是光秃秃的一个图形加上其中的文字，还是会有些单调，所以需要再加以补充、优化，首先要在轮廓之外也放一些文字，比如页码和标题等，然后背景也可以与图形呼应，比如这里用了与叶子呼应的森林图片（背景做了高斯模糊处理）。

现在我们可以看到，版面的右上角明显有点空，而且整体上还缺少一些对比关系，于是我把叶子的图形复制出两片，分别排列在主体右上角和左下角作为点缀，到这里这个小页面的设计就完成了。

总结

图形排版法可以使版面变得更有趣、更有创意，但是用不好也容易造成呆板、生硬的感觉，所以，最好不要把所有文字都限制在图形范围内，上面的例子虽然简单，但基本上回答了运用图形排版会遇到的主要问题。最后请大家记住，版面中没有哪一个元素是独立的，要始终站在整体的角度来设计每一个局部。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

图片相较于纯文字具备更强的视觉性，所以选择合适的好图片就至关重要，下面为大家介绍三种思路。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

不懂手绘，但又想做插画风格的Banner？那就必须看看今天分享给大家的 humaaans 人物插画素材库，它由 Pablo Stanley 设计师设计，是一套符合现代扁平化设计风格插画素材，而它最大的特色是组件化绘制，用户可通过素材库的元素自行 DIY 成不同形象的插画，适用于网页、移动UI、以及 PPT 等用途。

DIY插画介绍

目前该素材包含有人物及场景元素，但最多的是以人物为主，包含有不同的头像、服饰、袜子，让用户能自由 DIY，就像下面演示图一样：

如果你是 Sketch 的用户，还可能利用 Sketch Symol 功能来款式，更加方便。

没有 Sketch 软件也不用担心，设计师将每个元素导出成 PNG/SVG 格式以及@2X大小版本，SVG 也是矢量格式，所以用 Photoshop 或 Ai 去自己 DIY 就行。

注：如果 Sketch 版打不开，通常是因为你的版本过低造成的，只要更新新版本就可以了。

还有几个场景可以切换：

humaaans 的设计元素包含男女生头像和服饰，个个都是年轻貌美啊，穿着都非常时尚呢……

这素材能用在什么地方？

网页 Banner：

这么漂亮的时尚的插画，不用在网页上就是浪费啊，但不建议直接使用，要要学会怎么去 DIY，通过设置大小、比例、旋转以及更改成和你界面一致的配色，让 UI 统一这样才算完美哦。

APP 启动界面：

做移动端的引导页也很好看。

插画海报：

做一个这样的贺卡、海报是不是也很 Nice?

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

插画一方面富于灵活表现，可根据设计师思维和想法进行各类创意，适用于各类视觉主题，另一方面又与严选简约、精致的品牌形象契合度较高，因而是严选专题设计的一个主要表达方向，经常在严选各类专题设计中得到应用，受到广大用户的喜爱与推崇。

许多刚入行的视觉设计师认为插画风格专题设计需要非常专业的插画功底才能完成，因而尽管觉得插画风格专题唯美、形象却敬而远之不敢轻易尝试，今天个人从以下五个步骤去解构插画风格专题设计，通过相对简单易学的基本操作，让没接触过插画风格的设计师也能轻松驾驭与运用。

严选插画风格设计五部曲

整体构思

和所有风格的视觉设计一样，插画风格设计首先也需要进行整体的需求分析，主要进行以下方面工作。

1. 分析受众与目标

首先需要对专题的受众进行简单的社会化分析，通过分析大体了解受众的年龄层次、收入水平、审美品味、兴趣爱好等，根据社会化特征信息建立用户画像，有利于设计方向与基调的确定。比如严选的目标用户定位于20-35岁，具有稳定的工作与收入，追求高品质生活的都市白领。

其次需要深入分析专题所需要表达的目标和信息，通过色调、版式、字体、元素等设计手法准确传达信息内容的同时，带给用户更多美的感受，升华主题思想，强化品牌概念与服务。

2. 确定情感关键词

所谓情感关键词，就是我们产品的视觉所要表达的情感感受，比如情人节专题确定的「浪漫」、「温馨」、「甜蜜」，新年专题的「喜庆」、「欢快」、「热烈」，父亲节的「责任」、「担当」、「感恩」等等。确定好专题活动的关键词后，将有助于我们进行整体风格的把握与塑造。

3. 整体意境构思

确定好专题的方向后，接下来就可以构思整体的意境以及挑选合适的素材，如新年专题我们会想到用大面积红色作为主色调的布局，结合鞭炮、春联、灯笼、年画等中国传统元素，通过合理的组织和编排，加上中国风的字体设计与适当的细节完善，共同勾勒营造一派喜庆祥和的气象。

提取轮廓

基于前一步骤的构思的整体意境，我们需要对挑选的现实素材进行插画化改造。通常我们通过鼠标勾选的形式，将素材的轮廓勾勒出来并填充相应的颜色，使写实的风格形象化、概括化和扁平化。

简化图形

插画风格相对实物风格，去掉了大量的写实细节，只保留主要的特征信息因而显得扁平简约但不失形象生动。因此在这个步骤我们需要将勾勒好的图形进行简化操作，以简单图形代替写实描绘、多以面和色块去代替原有的细节，简化后的图形具有高度的概括性。

完善细节

除了保证插画的形象性与直观性外，我们需要进一步对素材进行细节上的完善，以满足进一步的审美性与趣味性，同时赋予元素一些创造性，可以尝试通过以下方法进一步完善。

1. 移花接木

移花接木指将现实中不同时间和空间各类元素进行解构和重组，创造出一些妙趣横生的新事物，增加插画内容的趣味性。

2. 区分主次

将重要的、核心的元素进行强调刻画、次要的元素进行弱化处理，从而拉开主次元素的层次关系，使画面更加具有层次感和空间感。

3. 突破现实

通过调整元素间的比例关系，夸张的创造现实中并不存在的事物，更加容易吸引用户的目光焦点。

优化整体

经过以上的步骤，我们的素材基本已完成插画风格的改造，但插画素材在整体专题界面中并非孤立的存在，而是和整体色调风格、版式、字体设计形成一套有机和谐的整体，共同去呈现专题需要表达的信息与目标。

案例分析

1. 千万和春住专题

整体构思

情感关键词：清新、唯美

整体意境构思：以嫩绿色作为主色调，结合桃花、阳光、汽车、风筝营造轻松出游踏青的欢快意境。

提取轮廓

从田野、桃花等几张现实图片中将页面需求的主体元素进行提取，作为背影进行主体页面的大面积辅色，将整体的色调感觉搭建出来。

简化图形

初步提取的轮廓由于过于具象，与唯美的主题风格不太协调，在这一步我们将主体元素进行简化处理，用圆润、可爱的几何图形加上明快的色块去代替树木，整体更加扁平、卡通化，营造更加轻松、自由的氛围。

完善细节

为了更好的体现春天外出郊游的意境，我们对细节进行完善，增加了汽车、风筝等小元素，将桃花进行树枝刻画、太阳光芒的刻画等处理，同时将远处山景进行虚化，形成层峦叠障的连绵山脉，拉开了画面的层次空间。

优化整体

最后我们根据主题进行专题的字体设计，将常规的宋体进行变形处理，部分笔划好似春风轻抚而飘逸，又加上了象征春天生机勃勃的嫩芽，富有生活趣味。通过一片桃花作为主体分别呈放若遇到新欢、若重拾旧爱的对应专题好礼，使页面整体和谐统一。

2. 爱恋物语专题

目标：呈现出情人节情侣间的爱情的甜蜜与浪漫。

情感关键词：浪漫、甜蜜

整体意境构思：以甜美暖色作为主色调，通过主体元素礼物盒与情侣间夸张的比例关系抓住用户眼球，浪漫甜美同时不失趣味性。

3. 新春集市新年专题

目标：呈现出春节喜庆热闹与琳琅满目的商品。

情感关键词：喜庆、热闹

整体意境构思：以中国传统舞狮、牌楼、鞭炮等作为主体元素，谷仓作为次要元素，前后对比主次分明、空间感强，呈现了新春集市的纵深与五谷丰登的产品，整体氛围热烈喜庆，激发用户的购买欲望。

总结

插画风格的表达，既遵循着艺术设计的通用规则，又具备自身独特的审核特征，需要设计师更多去发现生活中的美，通过以上五部曲将生活中各类元素进行不断的重组、创造，在专题中进行特有的形象性、生动性、趣味性、创造性的艺术表达，从而丰富专题内容，更好传达专题思想。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

但殊不知其实我们每个人的色感，正是在儿童时期形成的，因为儿童时期的认知更加纯粹，对于色彩的想象力以及受到的限制要比成人少得多，所以赋予色彩的深度和广度也就比成年人更加丰富。

这也是为什么很多人看到小朋友的绘画，会觉得他们很有配色天赋了。

所以我们要做的就是打破对色彩的固有认知，让自己回归到一种单纯的状态，来重新认识色彩。

比如现在给你一个苹果，可能我们的第一反应就是直接把它吃了，事后要你回忆对苹果这个物体的印象，也许你体会的并不深刻。

而如果我们改变条件，假设你从未见过苹果，这一次你不仅要吃掉苹果，还要说出你的感受。

根据你的五官对其进行认知，这时你对苹果的体会将和前一次大不相同。

比如通过视觉我们可以看到绿色，通过嗅觉可以闻到果香，通过触觉可以感受到坚硬，通过味觉可以品尝到酸甜，通过听觉可以听到清脆声。

而重新认识色彩也是同样的道理，就像我们从未见过苹果一样去体验一个假设我们从未见过的色彩，然后通过不同的角度去对色彩进行拆解，最后组合在一起形成属于我们自己的配色体系。

赋予色彩名称

创建个人色彩体系的第一步，就是为色彩命名。

比如我们随便找一个颜色，就拿这个黄色来举例。

根据自己对这个色彩的感觉来命名，可以随意发挥，你想到什么就可以说什么，没有限制。

比如从最基本的色相角度出发，我们可以叫它鲜黄色。

根据这个颜色我们可以联想到向日葵，所以也可以命名为向日葵。

我们还可以联想到月亮，所以也可以起名叫月亮黄。

那我们还可以联想到《变形金刚》里的大黄蜂，所以也可以给这个颜色起名叫做大黄蜂。

还能联想到麦当劳的阳光橙，所以也可以命名为阳光橙。总之当你看到这个颜色时，脑海中能够联想到的词汇都可以使用，哪怕是跟这个颜色相差很多也没关系，最重要的是你自己的感受。

对色彩进行理性分析

对色彩进行命名之后，第二步要做的就是对色彩进行理性分析。

我们还是拿这个颜色来进行练习，先来找出它的色相、明度和饱和度。

首先根据色相环的大致位置，确定这个色彩的色相。

然后通过纯度和明度的调整来找到与右侧颜色相符的色值，这里我们得到了一个数值。

然后用吸管工具吸取右侧的黄色，得到的结果和我们猜测的做比较，只要结果不是相差很大都是可以的，如果相差很多那就说明你对色彩的敏感度还有欠缺。

HSB色值猜想完之后我们再来看看它的RGB色值。

根据RGB原理很明显黄色是由红色和绿色混合得到的。

但是我们对比来看很明显这两个黄色还是有差别的，所以还需要进一步分析。

我们调出RGB色相环，我们看采样的这个黄色是偏向红色多一些还是偏向绿色多一些，很明显是偏红一些，因为它比较偏橙色。

所以我们就可以适当的减少绿色的成分。

我们来看一下对比，已经接近了。

最后我们通过RGB色值来对照一下，虽然红色和绿色的色值相差不多，但是我们采样的颜色中还有少部分蓝色，肉眼其实很难看出来，但是我们可以自己去模拟一下。

这三个成分的三原色混合之后，得到的就是我们采样的颜色了。

△ http://www.rgbchallenge.com/

如果想提升对RGB的敏感度，可以通过这个小游戏来练习一下。

玩法很简单，根据画面中给出的RGB色值来选择你认为相对应的颜色，选对了继续下一关，选错了GAME OVER重来。

接下来我们来看CMYK色值。

黄色是CMY其中的一个原色，所以首先黄色肯定是最多的。

对比来看一下，很明显采样的黄色中还有其他颜色成分。

我们调出CMYK色相环，同样也是看采样的黄色偏向哪个方向，也是偏红色多一些。

所以我们得到这个颜色中需要加入红色，但是应该加多少呢？

这里我们加入了20%的红，同时将黄色的含量降到80%，这个是根据经验和感觉来的。

这时将两个颜色对比来看一下，已经相差不多了。

最后通过数值来比对，可以说几乎已经很接近了。

只不过采样的颜色中还带有少量的青色，但是影响不大。

然后我们再来看看色调。关于色调这种老生常谈的问题这里就不多讲了，因为之前我专门写过一篇关于色调的文章《高手的平面课堂！最容易上手的配色方法》，里面已经讲的很详细了。如果你看过这篇文章，那么当你得到了一个颜色的CMYK色值时，就已经可以判断出是什么色调了。

如果没看过也没关系，我带大家来区分一下，白色和纯色之间是明色和淡色，纯色和灰色之间是浊色和淡浊色，纯色和黑色之间是暗色。

将这些代表性色调提取出来一比对，就可以知道这个色彩的大致色调是什么了。

很明显我们采样的这个颜色是介于纯色调和明色调之间，你可以叫它纯色也可以叫它明色。

色调看完之后我们再来看看它的色彩家族，也就是这五大色相关系。

首先我们来看看它的同类色是什么，如果大家刚开始比较困难可以偷个懒，调出色相环。

这样找到相应的色相就非常简单了，但是不建议大家这样做，除非是新手或刚入门的同学。

然后是近似色，相距45度的颜色。

然后是中差色，距离在90度左右。

接着是对比色，120度左右。

最后是互补色，对比最强烈，也就是相距180度左右的颜色。

这五大色相关系是最基本也是搭配起来最常见的，一般不太容易出问题。这里需要说明一点就是我们在对色值进行猜测的时候，不需要要求太高必须要完全一致，只要差不多就可以。并且大家在看教程的时候可能会觉得有些复杂佷麻烦，我做这些为了给大家演示看上去是花了些时间，但是当你自己在猜想的时候可能只是一瞬间的事情。

对色彩进行感性分析

下面我们再来看看第三步，对色彩的感性分析，所谓感性分析也就是说这个色彩给你什么感觉。

比如这个黄色给我们的正面意象有：阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开放、快乐；负面意象有吵闹、廉价、不雅、软弱、浮躁、轻浮、稚嫩、散漫、不安。注意在提炼感觉的时候不要约束自己，能够联想到的都可以记下来。

对色彩进行行业分析

然后是第四步对色彩进行行业分析，也就是说你认为这个色彩适合哪些行业或者你见过哪些行业使用过这个色彩。

比如最明显的就是儿童、宠物、游戏、时尚、运动、促销、餐饮、农业、传统、汽车等等。

对色彩进行设计应用

以上这些训练做完之后就进入到了最后一步，也就是用这个色彩进行任意内容的设计。

这是我们的文案，这里我们要设计的是关于詹姆斯十六代战靴的三个Banner。

1. 案例一

首先根据尺寸创建版面，找到一张詹姆斯的图片去底之后放到版面中，然后将主题信息放大并选择一款具有力量感的字体编排到版面的中上位置，将中文标题和LOGO做重复编排。

将文字信息放置到人物下方，底部信息做描边和变形处理为画面增加形式感，最后将其他信息编排到空余的左侧。

最后在主标题下方添加色块来丰富一下版面，版式部分就完成了，接下来开始配色。

因为我们要用到采样的这个黄色所以主色已经确定了，但是这个画面只用一个颜色显然是不够的，所以我们还需要其他颜色。

因为考虑到设计的内容和风格所以我觉得配色上应该有一些对比，但是又不想使用对比很强的互补色，所以这里我选择对比色，但是黄色的对比色有两个应该选择哪个呢，这里我选择了紫色。

因为如果了解NBA的话应该知道，湖人队的球衣本身就是黄色和紫色，也就是人们所谓的紫金战袍。

但是这个紫色有些偏红，所以我们可以调整成偏蓝一些。这也是我想告诉大家的一点就是配色是灵活的，千万不要死脑筋。

辅色确定了之后就可以为画面填充颜色了，但是我们看填充完颜色之后人物图片的颜色有些不协调，所以人物的颜色也需要调整。

这样看上去就会好很多，那么第一个案例就完成了。

2. 案例二

第二个案例我们选择鞋子来当主体，然后编排主标题。

将其余信息围绕主体鞋子来编排，通过适当的变形角度来为画面增加灵动。

但是两侧很明显太空了所以可以添加色块和文字，版式部分就完成了。

因为我们设计的这三个Banner是一个系列的，所以配色也应该是统一的不需要改动。

3. 案例三

我们再来看看最后一个案例，前两个案例分别是以人物为主体和以产品为主体，所以第三个案例我就直接用文字编排，将文字信息进行分组给图片留好位置。

为了增加一些形式感，下方的标题同样进行描边处理并进行裁剪。

那么同样使用这组配色，将图片放置到预先留好的位置上，这个案例也就完成了。

最后我们来看一下整体效果和效果图。

本期教程到这里就结束了，我们从几个不同的角度去对色彩进行拆解，大家回去之后可以自己多加练习，每天解构一个色彩，这样长期积累下来，你就会在不知不觉中创建了一套属于你自己的配色体系。

但是我相信肯定会有人有疑问，如果照这样做那纠错机制在哪？因为这些都是大家自己去创建的很多内容不一定对，如果你有这样的疑问那说明你是认真学习的人，但是我这套方法并不是没有纠错机制，这个纠错机制就是你自己，在漫长的时间里你的成长、历练、感受、学习都会影响你对一个色彩的认知，可能几个月甚至几天之后你看待同一个色彩的感觉都是不同的。所以放心大胆的去做吧，只要你肯坚持，火候到的时候自然就会有所收获。

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