如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
看了很多版式技巧仍排不好版？懂得很多套路仍做不好设计？其实也正常，因为大部分技巧都比较笼统，每个人用起来也会有不同的效果，所以葱爷特地总结了7个比较具体的小技巧，算是属于一学就会且很容易出效果的排版小妙招，希望能帮你解决一些比较具体的问题。
该技巧操作起来很简单，就是在标题或内文下面，增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意：
之所以这么处理是为了增加版面的层次、对比，以及丰富元素。
这是增强标题设计感的另一种处理方式，单纯的文字标题难免显得单调，我们可以通过增加辅助元素使它变得更丰富一点，比如在文字的基础上加小色块。
色块的高度最好大于笔画厚度，小于文字的高度，加上去的方式可以是叠加于文字之上，或是置于文字底部，创造出文字的一部分在色块内一部分在色块外的对比效果。还有，色块的颜色最好来源于版面中的其他元素。
在做设计的时候常常会遇到这两种情况，一是版面中会多出一些影响版面平衡的空白，但已经没有合适的内容可以填充了，如果硬塞一些装饰文字或者图案，很可能会弄巧成拙；二是有的区域小元素小信息比较多、比较散。怎么办呢？
这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形，然后把它填充在空白处就可以平衡版面，且不会造成突兀的感觉，如下图案例：
要点：线条不宜太粗，点也不宜太大，而且此方法只适合填补小空白，不适合填补大面积的空白。
在比较散的元素下方排一组斜线，可以把各个分散的元素联系起来，使其成为一个整体。如下图：
背景能很大程度地影响版面的设计感，这一点应该都有体会，常规的处理方式是把背景作为一整个色块，而如果把背景分割成两个几何色块时，设计感立马就会增加不少。
分割的方式好比用一把刀在背景的黄金分割处，划一条倾斜的直线贯穿版面，使整个背景一分为二，而这两个色块的颜色对比要比较强烈。另外，在横版中用左右分割，竖版中用上下分割效果会比较好。
增加对比关系是加强设计感的最有效技巧，我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物，那么在这些图片上加一个圆形的色块，创造出虚与实的对比，通常也能得到不错的效果。
要点：
该手法在画册和海报设计中比较多见，与直接在一段文字下方加一个大色块不同，而是要根据每行文字不同长度，单独加一个相应长短的色块，所以这些文字每一行的长短最好是不一样的。
这种处理方式可以使整段文字看起来更整体，增加文字视觉冲击力，而且还能使文字与背景区隔开，加强文字的识别性。
要点：
如果你看过的食品包装够多，你应该能发现，很多包装上的产品名称、广告语或者卖点等信息，都会摆放在一条飘带上。这么处理的效果通常不错，因为飘带具有礼品、赠送的寓意，用在哪里都不会太唐突，而且飘带的形式简单、有细节、变化丰富，很适合用作装饰元素。
还有一点也很重要，飘带的形式一般都是柔软的曲线，这与版面中其他直线元素可以形成鲜明的对比，加强版面的灵活性。
以上的七个小妙招是不是既简单又实用，你们在做设计的时候记得拿出来试试。不过这些也确实只是小技巧而已，只能优化局部，不要指望用上这几招就能做出很好的设计，而且它们也不一定适合所有情形，在实际操作中一定要具体问题具体分析，灵活运用。
蓝蓝设计( 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界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
不懂手绘，但又想做插画风格的Banner？那就必须看看今天分享给大家的 humaaans 人物插画素材库，它由 Pablo Stanley 设计师设计，是一套符合现代扁平化设计风格插画素材，而它最大的特色是组件化绘制，用户可通过素材库的元素自行 DIY 成不同形象的插画，适用于网页、移动UI、以及 PPT 等用途。
目前该素材包含有人物及场景元素，但最多的是以人物为主，包含有不同的头像、服饰、袜子，让用户能自由 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界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
插画在中国被俗称为插图，有着非常悠久的历史，最早在佛教文化中出现，以「变相」图解宣传佛教教义，如今一般指为企业、产品、服务所绘制的图画的一种艺术形式。作为现代设计的一种重要的视觉传达手法，插画以其直观的形象性，真实的生活感和美的感染力，广泛应用于现代设计的多个领域，涉及到企业宣传、社会文化活动、影视文化等诸多领域。插画一方面富于灵活表现，可根据设计师思维和想法进行各类创意，适用于各类视觉主题，另一方面又与严选简约、精致的品牌形象契合度较高，因而是严选专题设计的一个主要表达方向，经常在严选各类专题设计中得到应用，受到广大用户的喜爱与推崇。
许多刚入行的视觉设计师认为插画风格专题设计需要非常专业的插画功底才能完成，因而尽管觉得插画风格专题唯美、形象却敬而远之不敢轻易尝试，今天个人从以下五个步骤去解构插画风格专题设计，通过相对简单易学的基本操作，让没接触过插画风格的设计师也能轻松驾驭与运用。
和所有风格的视觉设计一样，插画风格设计首先也需要进行整体的需求分析，主要进行以下方面工作。
首先需要对专题的受众进行简单的社会化分析，通过分析大体了解受众的年龄层次、收入水平、审美品味、兴趣爱好等，根据社会化特征信息建立用户画像，有利于设计方向与基调的确定。比如严选的目标用户定位于20-35岁，具有稳定的工作与收入，追求高品质生活的都市白领。
其次需要深入分析专题所需要表达的目标和信息，通过色调、版式、字体、元素等设计手法准确传达信息内容的同时，带给用户更多美的感受，升华主题思想，强化品牌概念与服务。
所谓情感关键词，就是我们产品的视觉所要表达的情感感受，比如情人节专题确定的「浪漫」、「温馨」、「甜蜜」，新年专题的「喜庆」、「欢快」、「热烈」，父亲节的「责任」、「担当」、「感恩」等等。确定好专题活动的关键词后，将有助于我们进行整体风格的把握与塑造。
确定好专题的方向后，接下来就可以构思整体的意境以及挑选合适的素材，如新年专题我们会想到用大面积红色作为主色调的布局，结合鞭炮、春联、灯笼、年画等中国传统元素，通过合理的组织和编排，加上中国风的字体设计与适当的细节完善，共同勾勒营造一派喜庆祥和的气象。
基于前一步骤的构思的整体意境，我们需要对挑选的现实素材进行插画化改造。通常我们通过鼠标勾选的形式，将素材的轮廓勾勒出来并填充相应的颜色，使写实的风格形象化、概括化和扁平化。
插画风格相对实物风格，去掉了大量的写实细节，只保留主要的特征信息因而显得扁平简约但不失形象生动。因此在这个步骤我们需要将勾勒好的图形进行简化操作，以简单图形代替写实描绘、多以面和色块去代替原有的细节，简化后的图形具有高度的概括性。
除了保证插画的形象性与直观性外，我们需要进一步对素材进行细节上的完善，以满足进一步的审美性与趣味性，同时赋予元素一些创造性，可以尝试通过以下方法进一步完善。
移花接木指将现实中不同时间和空间各类元素进行解构和重组，创造出一些妙趣横生的新事物，增加插画内容的趣味性。
将重要的、核心的元素进行强调刻画、次要的元素进行弱化处理，从而拉开主次元素的层次关系，使画面更加具有层次感和空间感。
通过调整元素间的比例关系，夸张的创造现实中并不存在的事物，更加容易吸引用户的目光焦点。
经过以上的步骤，我们的素材基本已完成插画风格的改造，但插画素材在整体专题界面中并非孤立的存在，而是和整体色调风格、版式、字体设计形成一套有机和谐的整体，共同去呈现专题需要表达的信息与目标。
整体构思
情感关键词：清新、唯美
整体意境构思：以嫩绿色作为主色调，结合桃花、阳光、汽车、风筝营造轻松出游踏青的欢快意境。
提取轮廓
从田野、桃花等几张现实图片中将页面需求的主体元素进行提取，作为背影进行主体页面的大面积辅色，将整体的色调感觉搭建出来。
简化图形
初步提取的轮廓由于过于具象，与唯美的主题风格不太协调，在这一步我们将主体元素进行简化处理，用圆润、可爱的几何图形加上明快的色块去代替树木，整体更加扁平、卡通化，营造更加轻松、自由的氛围。
完善细节
为了更好的体现春天外出郊游的意境，我们对细节进行完善，增加了汽车、风筝等小元素，将桃花进行树枝刻画、太阳光芒的刻画等处理，同时将远处山景进行虚化，形成层峦叠障的连绵山脉，拉开了画面的层次空间。
优化整体
最后我们根据主题进行专题的字体设计，将常规的宋体进行变形处理，部分笔划好似春风轻抚而飘逸，又加上了象征春天生机勃勃的嫩芽，富有生活趣味。通过一片桃花作为主体分别呈放若遇到新欢、若重拾旧爱的对应专题好礼，使页面整体和谐统一。
目标：呈现出情人节情侣间的爱情的甜蜜与浪漫。
情感关键词：浪漫、甜蜜
整体意境构思：以甜美暖色作为主色调，通过主体元素礼物盒与情侣间夸张的比例关系抓住用户眼球，浪漫甜美同时不失趣味性。
目标：呈现出春节喜庆热闹与琳琅满目的商品。
情感关键词：喜庆、热闹
整体意境构思：以中国传统舞狮、牌楼、鞭炮等作为主体元素，谷仓作为次要元素，前后对比主次分明、空间感强，呈现了新春集市的纵深与五谷丰登的产品，整体氛围热烈喜庆，激发用户的购买欲望。
插画风格的表达，既遵循着艺术设计的通用规则，又具备自身独特的审核特征，需要设计师更多去发现生活中的美，通过以上五部曲将生活中各类元素进行不断的重组、创造，在专题中进行特有的形象性、生动性、趣味性、创造性的艺术表达，从而丰富专题内容，更好传达专题思想。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本期给大家带来的内容是关于视觉张力的应用技巧，听到这个词也许会给人一种云里雾里的感觉，我们在日常工作中也总会听到这些「视觉张力」「视觉冲击力」「视觉重力」等等专业词汇。那么这些带有视觉前缀的力学词到底是什么意思呢？今天我们来一起分析一下这其中的「视觉张力」，看它在版式设计中都起着哪些作用。接下来让我们一起学习今天的内容吧。
首先我们来了解一下张力的概念，从百科中的解释可以初步了解到，张力是物体受到拉力而产生的牵引力，这么说是不是还有点晕？
通俗一些解释，可以将它理解成在拔河时绳子两端受到的左右拉力，我们看整个画面在视觉心理上产生了一种向左右扩张的感觉。
就像上图中的气球一样，内部充气后产生了向外膨胀的扩张力。外部的包裹部分也同时向内产生收缩的力，从而产生了一种相互制约的紧张感。
在艺术和设计以及文学领域中，视觉张力这个词也经常用来形容和谐与冲突之间的强烈对比，它是一种经过美学经验与审美倾向后的主观评价。
今天我们不讲那么深奥的直觉式感受，而是从平面构成的角度来深度解析视觉张力在版式设计中的作用，客观的了解康定斯基在其著作《点线面》中所提及到的视觉张力理论。
支撑起我们身体外形的是藏在内部的骨骼部分。而在版式设计中也同样需要支撑起整个版面的骨骼元素。
新人设计师经常会出现的问题就是会把整个版面填充的很满，他们认为这样能让版面变得饱满。但事实上这样并不能解决什么问题。
我们需要转换思维模式，客观的重新认识版面中元素起到的作用。
从构成的角度说，版面中只要出现一个很小的点就已经足够吸引观者的注意力了。点是视觉力量的中心，它在版面中能够产生占据空间的作用。
当版面中出现两个点元素时，我们的视线会下意识的在他们之间形成一条隐形的线，即使他们离的很远。正是由于存在着这条无形的线段连接，才让两个点之间产生了关联。包括两点之间的空白区域在内，它们都会被看做一个整体。
当版面中出现三个点时，我们在心理上便会自然形成一个负形的三角形，它与背景之间会形成图底关系，点与点之间的距离决定了这个三角形的大小。
同样的道理，当版面中出现四个点时，矩形的负空间与版面形状产生了呼应。四个点之间的内部会形成一个假想的视觉面积，点与边界的距离也为我们定义的版心的大小，这也是版面中张力的主要来源。
点具有相互连接的属性，当很多个距离相等的点占着水平方向排列会产生线段的印象。
而一个阵列的点相互连接就成了一个面。
举个比较常见的例子，段落文字就是由许多个点组合而成的面。
古人为了记忆天空中的星象，会将相邻的星星连接起来，就像图中的北斗七星，通过同形联想，它就像是一个勺子。人们就是通过记忆勺子形状来找到北斗七星的。
西方的星座也是同样的道理，将相邻的点连接形成对应的图案，最终形成我们现在看到的星座图形。
当版面中只有两个点时，我们可以得到的信息只有版心的宽度距离，而想要得到一个完整的版面。我们还需要一个确定高度的点才行，通过这三个点的位置来脑补出整个版心的张力大小。
也就是说，想要达到支撑起整个版心的目的，版面内最少需要三个支撑点。
这种脑补的原因来自于视觉的闭合心理，我们会将那些区域闭合的图形自动视为一个完整的内容，就像图中的图形。通常人们会认为他们是三个完整的组，因为括号内的距离更接近，那么事实上真的是这样吗？
实际上六组图形的物理距离是完全相等的，之所以会产生括号外大于括号内的错觉完全是因为视觉心理在作怪。
到此我们可以大致总结一下版面中的张力是怎样产生的，以版面的四角作为支撑点，在这一基础上，如果还有剩余的元素可以编排在垂直与水平的位置上。这样整个版面就被支撑起来了，形成了一个完整的面积，给人传达出了饱满的视觉印象。在实际编排中由于层级的介入，版面中的元素并不一定都是等大的，同时随着主体轮廓的不同，也会形成绕排等不同位置的结果。但万变不离其宗，版面中每个元素的聚散离合都会影响到整个版面的张力大小。
这个版面主要运用了点的分散和连接作用，点与点之间虽然面积较远但是依然在视觉上会被看成一个整体，其余层级的内容则是以线的形态出现在版面中。经过解构我们可以看出，版面中的张力主要来源于版心四角的位置，这个版面是通过四个点支撑起来的。
接下来看这个版面，首先我们标示出人物的面积，随后是山峰的面积，文字以点的形式分散于版面中。由于点与点之间的连接作用，我们可以将其看做四条竖线。而线与线之间相连就成了一个面，这个版面主要起到支撑作用的是边缘的三个点。
对于这个版面来说，与之前的版面相比，版面中元素并不是等大的。它的元素分布情况大概是这样的，接下来我们标出它的版心大小，可以明显看出这个版面中起到张力作用元素主要有三个，而其余的元素则分布在版心的内部空白位置。
从元素的排布上看就基本可以得出版心的大小了，元素之间通过对齐与扩张，形成了一个方形的面积，版心的四个角落都有支撑点。
我们再看这个版面，它由一个主体，和两个文字组以及 logo 构成，这是一个典型的由三点支撑起来的版面。
这个同样是由三个点支撑起来的。
这个版面经过结构可以很明显的看到，元素分散到版面的四角，形成向外扩张的结构，其余信息放置在空白位置。
这个版面较之前就要更复杂一些了，来看一下它的结构，标出版心后可以看出元素基本上是围绕着版心的大小进行排布的，左下角为了增加元素的张力作用，依然采用了三点的分布方式来占据更大的空间面积，从宏观角度来说版面依然采用了三个点的骨骼结构。
这个版面，可以看出版心采用了四个点来支撑，剩余两个文字信息分布在版面的水平方向，就是图中标注成蓝色的位置。
这个版面中出现了带有出血的元素，看一下它的版心和元素的构成情况，采用了四个点的出血结构。
这个版面的变化性相对难度更大，我们来看它的构成结构，可以看到整个版面大致分为两栏，左侧小栏和右侧大栏内的元素编排都采用了三大支撑点来产生版心的张力效果。从整体的角度观看版面，也会得出同样的三点支撑版心的印象。
这个版面中，主体的形状变化较强。除编排在四角的元素外，其余元素都采用了绕排的呼应形式安排在了空白位置上，整体看去采用了四个点来产生张力作用。
这个也是一样，采用纯文字的版面编排，占据四个角落，其余元素编排在空白位置。
这个呢，版心的张力主要来源是四个角落的元素位置。
我们来总结一下，当版面底部已经有一个很大的图像或者文字时，版面顶部只要有一个元素就可以撑起整个版面的张力。
顶部也可以是两个元素来同时产生张力作用。
对于主体位于中心位置的版面，我们最少需要三个点来起到支撑版心的作用。
这里也可以是四个点来描述版面的张力大小。
此外，如果这时还有其余的元素需要添加，可以添加到垂直和水平的空白位置上。
接下来我们拿这个版面来进行举例，中心的圆形是版面中最大的元素，被编排到了版面的正中心位置。
随后出现在版面中的是四个角落的文字元素，它们的出现加大了版心的张力大小。
随后，其余的文字信息被编排到了版心的垂直和水平的位置并贴近版心的边缘。
接下来在垂直位置添加装饰性的点元素来起到占据空间的目的。
最后在版面的空白处继续添加其余的文字信息，这个版面就基本上变得非常饱满了。
接下来我们看一下它的元素构成结构。
并不是只有文字的位置才能起到加强版面张力的作用，换成图形和图像也是同样的道理。我们看这个图，将周围的元素去除后，版面中原本热闹的氛围消失了，版面占据空间的张力也随之变小了，但绝对不是说底部的版面就是不对的，一切都是根据项目的定位来判定的。
这个版面同样具有热闹的节日氛围，去掉周围的图像元素后，明显变得冷清起来，版面的张力也随之缩小了很多。
这个版面也是同样的道理，去除周围的元素后，版面的视觉张力缩小了，与之前相比缺少了冲击力，变得安静了。
这个版面因为点元素的出现，整体给人的感受非常饱满，将点去除后，原本被占据的空间变小了，明显没有之前的版面具有视觉张力。
这是广告牌，投放尺寸主要设定在一个人能够近距离观看的大小，也就是说版面中可以出现一些比较细小的文字。
（这里需要特别提醒的是，在实际应用中如果广告牌挂得比较高，就需要根据实际情况来调整最小的文字字号了。否则说明文字的出现也就没有实际意义了。）
接下来我们来看一下文案内容，一个航拍无人机的宣传广告，含有品牌的标志和文案以及图片信息。
根据文案信息，我们给项目添加气质关键词，及表现出科技的领先感，同时因为产品属于亲民定位，我们还需要加入具有轻松与温情的气质。主视觉决定采用文字为主强调产品名称，加入文字并放大成为版面中最大的面积。
这里需要注意的是，这个文字的外形轮廓给人一种浓厚的历史气息，就像演员走错了片场，完全与我们的定位不符。
换成无衬线体后，明显觉得好多了。但是还是觉得哪里怪怪的。原因在于它的外形没有给人很特别的印象。从「S」的收口处可以明显看出切割感很强，缺少一些书写的痕迹，整体显得有些平淡无奇。
这个字体大体感觉上还不错，带有书写感的曲线，几何形的外观似乎都很符合定位。但作为版面中的主视觉元素似乎还少了点装饰感。
最后选择了这个字体，同样具有书写感的曲线开口，带有几何特征的外形以及类似电路排线一样的装饰结构。
色彩方面采用橙红色作为主色调，烘托亲民的色彩氛围。接下来将产品叠压在文字之上，加强版面的层次感。
为了继续加强版面的中层次变化，我们在文字与图像之间添加阴影，细节决定成败，一个简单的阴影也是需要体现出层次变化的。从模糊到清晰，从暗淡到浓重的变化都是塑造细节的关键，这里为投影添加三层强中弱的变化，这样一来，阴影部分的刻画就完成了。
与之前相比，添加阴影后的画面在视觉层次上要更丰富一些。在视觉表现上也更立体。
最后我们将文字信息划分好层级后一次添加到版面中。这个画面就完成了。主体位于版面的中心位置，其余信息分布在版面四周，形成向外扩散的视觉张力，一共使用了三个点元素来支撑版心的大小，剩余的文字信息则添加在版面底部的空白位置。
我们试着将信息全都集中到一起会怎样呢？
可以看到，版面中元素全都集中在了版面的中心位置，这使得原本占据整个版面的视觉张力变小，版面的两端会显得很空旷，相对于之前的版面来说变得没有那么饱满了。这种情况下，也可以采用添加图形元素的手法来填充版面两端的空白处，让画面变得热闹起来，增强版面的动感与活力。
这里我们添加一些抽象的气泡元素，为版面添加一些概念性的印象。添加元素后，新的问题又出现了，由于两侧的元素仅作为装饰出现，但是目前的视觉又显得比较抢眼，这就有些干扰到了主视觉的层级地位了。
那么解决这个问题的方式也很简单，就是弱化掉两端的气泡元素，让主视觉与装饰元素之间的层次更分明。经过弱化处理后，这个版面看上去就舒服多了。这里需要注意的是，气泡的虚化程度也同样遵循了强中弱的层次变化，这样的处理也进一步加强了整体的视觉纵深感。
经过圆形气泡的填充后，版面的张力恢复到了之前的大小。整体给人更加饱满的视觉印象。
今天我们一起学习了视觉张力在版面中的应用技巧，一起了解到了图像与文字在版面中不同位置所起到的作用，也讲解了版面的骨骼是如何构成的，希望我们的内容依然能够对你有所帮助。
蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
平时设计工作中，关于投影，简单一点的就是一个图片中的主体抠下来放到画面中，这个时候就要设置一个投影，让主体在画面中更和谐。难一点的就是在合成设计里，涉及到每个物体的投影形状、颜色、透视等等，根据分析画出投影，这期教程就给大家普及一下投影的相关知识，以及如何去做投影。
阴影是什么呢？阴影是光带给这个世界的礼物。
还是正经解释一下什么是阴影？
在客观世界中，光线总是从光源沿着直线方向发散。
在光线的照射下，受光部分称为亮面，仅次于亮面的受光是灰面，而光线无法照射到的部分，称为暗面；由于被受光面遮挡，物体所在环境中出现的阴暗部分称为影，阴与影的总和就是阴影。
阴影形成的要素有哪些呢？
首先要有光源，光源就是光点，光点向下的垂线与承接面的焦点就是光足，阳光的光足在地平线上，灯光的光足在照射的基面上，然后是要有物体，光点发出的光线，经过物体上阴点，光足与物体底点也就是阴足连线，与光线相交的点就是影点，阴影就是阴足到影点的部分。
画阴影时，一般是先定光点和光足，然后是阴点阴足，光点连接阴点，光足连接阴足，这样阴影自然就画出来了。
用这张照片来做个简单说明：
光源的位置，就是太阳，向下垂线交于海平线于一点，这个就是光足。
然后，定出一些椅子上的阴点和阴足。
光点连接阴点，光足连接阴足，这样就能画出阴影的大致形状了。
光源总体上可以分为两大类，一类是自然光，比如：太阳光、月光。一类是人造光，比如：灯光、烛光。
自然光有两个特点：光线平行；随着时间的变化而变化，不会为⼈的意志所转移。
光线平行
因为太阳、月亮这样的发光体离我们太过遥远，所以可以把它发散的光线视为平行的。
再来说下这张图片，同样是自然光，为什么它的光线不是平行的？
这是因为透视的现象，就像这个地板，不也是平行的吗？但是因为透视的关系，它们会相交于一点，光线也是同样道理，因为我们以这个角度观察，所以光线会出现透视现象。
也就是说，当我们从侧面观察的话，就很明显看到光线是平行的。
随着时间的变化而变化，不会为人的意志所转移
日升日落，阴晴圆缺，都是自然的规律，不会为我们的意志所改变。
人造光有两个特点：光线不平行，呈放射状；根据需要变换位置。
光线不平行，呈放射状
用这张图片来举例，画面中光源是路灯，物体是消防栓，我们对它进行一个简单的分析：
它的光点是路灯，向下的垂线，到地面上的光足，然后是消防栓，光点连接阴点，光足连接阴足，画出阴影，可以看出，因为与光源距离近，所以光线是不平行的，呈现一种放射状，并且影子也会呈现放射状。
根据需要变换位置
为了呈现想要的视觉效果，可以随意移动光源的位置，甚至调整它的颜色、明暗等，可以人为改变。
灯光属于电光源，它可以是单一光源或者组合光源，常见的像这样的白炽灯，还有日光灯等等。
当各个方向都有光源的时候，投影就会消失。在医学上，用的无影灯就是根据这个原理制成的，因为医生做手术的时候，手和器械都有可能对手术部位造成干扰的阴影，所以无影灯就能尽量消除阴影。
我们模拟一个太阳移动的轨迹，当太阳位置比较低的时候，光线与地面的夹角就会比较小，影子会很长；升高一些，夹角就稍微大了些，影子缩短了点；再升高一些，夹角更大，影子很短了。然后当太阳在物体正上方的时候，与地面的夹角接近90度，影子基本就是一个点。那另一边，基本就是相同的情况，所以，光源离照射物体越高、越远、光线角度越大，阴影越短。
我们再通过几张图片来进一步了解阴影规律及特点。
我们看到人物的影子非常的长，光线与地面夹角比较小，说明它的光源在一个比较低的位置上。
这个正俯视的图片，影子也很长，说明它的光源也在一个较低的位置。
影子的长度也不算短，但是看光线与它的夹角比较大，证明它的光源在相对比较高的位置上。
这张照片比较明显了，影子比较短，接近中午的阳光。
△ 接近中午的阳光
我们之前在透视的那篇教程里说过，物体的透视线，最终都会消失在视平线上，所以，当画面中先有一条视平线，我们同样可以画出一个立方体。
当物体有一个阴影，我们可以通过影点与阴点和阴足的连线，找到光点和光足。这样也就找到光源的位置。
这张图片，我们就可以通过倒推的方式找到光点，如果画面中再放入其他物体，就可以用光点和光足对其连线，从而做出投影。
正常情况下，物体在光源下的投影，如果在其中出现一个台阶会怎样？
影子就会随着阶梯的形状而产生变化，也就是说阴影投在不同的承影面上，会随着受影面的变化而变化。
这两张图片就明显看出阴影根据地面起伏的形状而变化。
第一个是接触阴影，是物体与物体之间接触所产生的阴影，一般这种我们都可以用图层样式当中的阴影来设置。
还有一种接触阴影，是物体立面与承影面之间的投影关系。
第二种是悬空式投影，这类投影给人很强的空间感，并且大多数情况，投影都会成为画面中的主角。
第三种是倒影，针对反光较强的面会有，比如镜面、水面、琉璃台面等，并且在表现一些高端产品设计时候经常会使用到。
第四种是长投影，也是这几年扁平化流行起来，带动的一种投影形式。
第五种合成设计中的投影，和实际照片中的场景是一样道理的，这也是所有投影当中比较难操作的。
最后一个创意投影，它不会根据物体本身的形态去表现，而是根据文案和设计构思而产生的很有创意的投影形式，当然，这个主要靠大家发散思维的联想了。
用两个简单的小案例，来给大家讲解一下如何做投影。
给下面右侧的书籍做一个和左边一样的投影：
给图层添加投影图层样式，不透明度调整到45，角度137，距离26，扩展10，大小35。
我们把外围一圈的投影已经设置好，下面就再添加一个投影，也就是最贴近书籍边缘部分。这个部分投影我们可以称之为闭塞投影，是近光量最少的地方。
再添加一个投影，不透明度33，角度不变，距离5，扩展10，大小10。
利用图层样式的投影就完成了，大家在调整的时候可以边调整边观察，以达到一个自然的效果。
第二个方案，是给画面中的立方体添加一个投影，要符合光影关系。
第一步要按照透视关系，把立方体看不到的面给画出来。
根据之前我们学到的知识点和画面中其他阴影来进行分析：
先连接几个人物的影点和阴点，我们知道自然光的光线是平行的，并且我们标记出来的也确实近乎平行的光线，既然这样，我们就不需要找到光点的位置。
只要复制其中一条光线到立方体上的阴点即可，然后我们再去找光足的位置。
为了找光足，可以先把画面扩展一下，然后连接影点和阴足，三个参照物连线的延长线会相交于一点，这个点就是光足。
从光足往回连线，与阴足的延长线，相交于影点，这里为了区分，三条线我用三个不同的颜色，然后我们把三点连线，就是阴影的区域了。
可以发现绿色和蓝色是基本重合了，我们就可以忽略蓝色的那条线了。
立方体阴影的范围与形状，然后再进一步刻画。
做个高斯模糊处理，数值2。
在阴影上方新建一个图层，用钢笔工具勾勒一个闭塞阴影，不要太大哦，填充深灰色，模式正片叠底。
做高斯模糊，数值1.4。
为了不让影子边缘太生硬，选择滤镜 – 扭曲 – 波纹 – 41%。
用吸管工具吸一下旁边影子的颜色，填充到立方体影子。
如果影子太重，可以适当降低不透明度，再统一暗部的色调，这样阴影就做完了。
蓝蓝设计的小编 http://www.lanlanwork.com
