容易被忽视的图形，不仅能传达不同的情绪，也能提升视设计的品质感。
本文节选自德国红点获奖设计师大凡的分享，主要包括三个部分：
1 图形是什么
2 好的图形设计长什么样
3 图形设计创意思路分享
提到图形设计，你脑海中对应到的第一个画面是什么？我们打开了某搜索器，检索了「图形」二字，这里的图形多集中于「几何图形、标志、矢量图形、图标」。
我们又搜集了一些不错的设计网站，搜索「图形设计」或「graphic design」，它的表现形式与应用范围都扩大了，海报、信息、插图、包装、图标、字体、摄影、标志、品牌，无所不在。
如果给图形下个定义，它主要指二维空间中可以用轮廓划分出的空间形状，设计中无处不在的表现手法。它与色彩、版式、字体等一样，在设计师的知识体系中处于相对重要的位置，但往往容易被忽视。
在优秀的设计作品中，图形可以作为主体、符号、辅助、信息等不同角色出现在设计的各个应用场景中，可以通过抽象的、具象的、平面的、空间的多样化表达手法，传达出不同风格的视觉表现力。
那么，好的图形是什么样的？我们可以从3个维度去感受好的图形设计作品：抽象、创意与风格。
抽象是对日常事物的提炼与概括，我们先来感受一下下面两组建筑，某搜索器中的「最丑建筑」和「知名建筑」之间的对比。可以很直观的感受到，抽象的图形与色彩可以传递更加丰富的情感。
对企业来说，沟通成本代表的就是金钱，而一个抽象的符号就能巧妙地为企业节省了很多说话的时间。
我们可以看这个案例，1个点产生了多少可能性？这是美国一家大型连锁超市的logo，以这个点为原型，衍生出了各种解锁生活方式的海报。简单的点，发散出各种生活方式，一看就能够知道超市供应的各种商品。
设计的创意体现在哪儿呢？我们先看看那些脑洞大开的大师们是如何使用图形的。
第一位是福田繁雄大师，在他的年代没有人用这样的图形方式做设计，炮弹朝向炮筒里面，一张非常简洁的反战海报。他也特别擅长运用图形的异形同构。
第二位是瑞士的史蒂芬邦迪大师，这些是他为剧场设计的宣传海报。简单的人形搭配鲜血撕裂感的方式就可以把卡门剧情表达出来了。
创意是天马行空的。我们看下面这个音乐节海报设计，拆解其中包含的文字、吉他、人影、波浪等，每个元素与音乐都息息相关，组合在一起就缺了些创意表达。
再看网易云音乐与快手联合做的民谣音乐节H5，音乐的感觉一下就出来了。
很简单的图形运用，就能产生创意性的差距。
著名的可可香奈儿女士曾经说过，流行稍纵即逝，但风格永存。
从包豪斯开始，设计风格发展到今天已经是多元混合存在的，很多所谓流行不过是循环与往复。
即使是运用最简单的图形，也可以表达出不同的风格，甚至引领浪潮，为品牌传播加分。比如，下面这组图，你能猜的到是同一家公司的传播海报吗？
现在，我们感受到了图形的巧妙之处。但具体拿到一个需求后，我们该如何去用图形辅助设计呢？这里分享一个“三步理性创意发散法”。
举个栗子，我们为「夏季青年音乐节」设计一张活动海报。
我们首先给主题做一个分析、把关键词拆解与排序后，视觉的重要程度依次是：音乐、夏季、青年、节日。
这些关键词让你最直观的感受是什么呢？
基于感受，我们可以尝试提取出基础的图形元素了。
色彩方面，我们也可以根据对应的元素去设置，最终我们提取出了这组图形元素。
这一步需要我们设计师发挥想象力了，为一组元素找到视觉上的联结关系。这也需要大家平时能去多看、多想、多练。
然后，我们为图形融合进更多的细节。
我们首先采取最简单的主体式构图方式，将想突出的图形最大化、成为视觉焦点，添加海报所需文字进行排版。
这种方式能够做出相对合格的图形海报，但我们可以用不同的版式与分割构图，去尝试更多的可能性。比如第三个海报，我们可以先建立不一样的版面分割、进行配色，然后再放入图形与文字进行排版，营造不同的画面感觉。
其他两组也可以用这种方式、进行不同尝试。
最后，我们可以整体上对比一下。
大师级的创意难得，但基本的图形创意确实有迹可循，希望本次的分享能够给大家带来图形思维上的启发。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文字 LOGO 的设计经常会采用优质的经典字体作为基底，那么我们所熟悉的著名品牌会使用哪些经典字体？这些字体本身又有哪些特质，被这些品牌所选择？而设计师在设计的时候，又是如何借用这些字体的特质来凸显品牌的特征？这回借用一个 LOGO 「逆向工程」设计项目，盘点8款经典英文字体，以及一系列优秀的 LOGO 设计范例。
虽然很多品牌LOGO 在设计的时候，会专门设计字体，但是实际上，很多品牌的 LOGO 其实是使用既有的字体来进行小幅度优化来进行设计的。最近几年，设计师 Emanuele Abrate 一直在关注一些著名的品牌 LOGO 背后的设计处理技巧，他开始借助这些字体背后原始的字体来进行「逆向工程」。
Abrate 的 Logofonts 项目就是这个「逆向工程」之后的结果。「当一些你陌生的元素和你熟悉的元素结合到一起的时候，有趣的事情就会发生……所以我决定重新拆解这些大众所熟悉的品牌，然后将文字部分替换成这个 LOGO 对应的字体名称」Abrate 的思路就是这样来的。
其实，以这种方式来重新解构这些令人熟悉的 LOGO 本身是一种非常有趣的尝试，给人的体验也颇为不同。但是回过头来说，这也证明了一件事情：即使是那些你感觉很熟悉的字体，同样可以借助一些并不复杂的方式，来制造出爆款设计，营造出令人过目不忘的独特视觉体验。
如果你使用 Instagram，那么你可以在上面关注一下这个 LogoFonts 项目。
在这些品牌 LOGO 的文本字体当中，有很多大家非常非常熟悉的字体，它们在英文字体中的大众认知程度，完全不亚于「微软雅黑」在中文世界里的认知度。
Futura 字体的灵感来自包豪斯运动，继承了包豪斯的设计理念，由设计师保罗伦纳1924年至1926年所创建。Futura 不仅本身大获成功，而且成功催生了新的几何无衬线字体。
在国外的设计圈中，设计师私下经常调侃，在设计的时候尝试过很多不同的字体，最后总会用回 Futura ，于是有了「字体不决就用 Futura」的调侃。当然，很品牌的 LOGO 设计是否几经修改重回 Futura 就很难说了，但是我还蛮认可这种说法的。
FedEx
Supreme
PayPal
Nike
Red Bull
Helvetica是一种被广泛使用的的西文字体，于1957年由瑞士字体设计师爱德华德·霍夫曼（Eduard Hoffmann）和马克斯·米耶丁格（Max Miedinger）设计，体现了瑞士设计的理性主义精神，同时被认为是现代主义设计理念的典范。
很多现代都使用 Helvetica 字体来作为设计的基底，借助基础的倾斜、色彩和装饰，在它现代和整饬的设计基础上，来营造独特品牌视觉特征和气质。
Target
Energizer
Post-it
The North Face
CAT
Behance
Avenir是由Adrian Frutiger设计的一款无衬线字体，最初于1988年由莱诺字体公司发布。「Avenir」在法语当中是「未来」的意思，在某种意义上，它和 Futura 在精神内核上有所呼应。
和 Helvetica 一样，Avenir 字体是为了「基本适合用在任何平面设计场合」的一种字体，同时，Frutiger 先生也认为，无衬线字体是不应该有斜体的，所以他也仅仅只是为了商业需求，使用光学仪器制作了伪斜体的效果。
Avenir 这款字体整体呈现出一种中性、去性格化的特点，是一种气质「透明」的字体。
Toyota
我们常说的 Avant Garde 字体完整的名称应该是 ITC Avant Garde Gothic，它原本是 Avant Garde 杂志的 LOGO 字体，由 Herb Lubalin 所创建。
之后他与卢巴林设计公司的合伙人 Tom Carnase 一同努力，将这款字体完善成为一套完整的标准字体。
由于 Avant Garde 出色的几何特征，很多品牌 LOGO 在设计的时候都考虑并采用了这款字体。
Adidas
New Balance
Durex
Gotham 是一款 2000 年的时候为 GQ 所设计，并于 2002 年向公众开放的字体。它出现的地方很多，从可乐瓶、推特、Spotify、Netflix、Saks 到纽约大学、翠贝卡电影节，这还不止，包括《柯南秀》和《周六夜现场》在内的电视剧、包括《盗梦空间》、《点球成金》、《可爱的骨头》和《月光男孩》在内的电影，都用到了这一字体。
关于这款字体的故事，可以看看这篇文章：
Gotham 原本的设计构思中，是要呈现出一种「新鲜和阳刚」的气息，不过真正投入使用的时候，才发现它的细体非常的具有女性的「优雅感」。Gotham 在现代的品牌和 LOGO 设计中应用广泛，它兼顾了灵活和高级感，说是「可盐可甜」一点错都没有。
TikTok
Spotify
Discovery
Univers 字体和 Avenir 同样出自设计师 Adrian Frutiger 之手，不过 Univers 是 Frutiger 的早期字体作品，它和 Helvetica 并称为「瑞士风格字体」，最初是作为一款照相排印字体所发布的。
Univers 字体的字重控制和其他的字体不同，是按照数字来进行区分的，到现在 Univers 字体族当中所包含的变体已经非常之多了，多达44种，不同宽度、粗细变化的衍生字体使得它作为 LOGO 字体非常方便。
Alibaba
ebay
正如同你从下图看到的，Myriad 字体就是 Adobe 的LOGO 品牌用字，因为这款字体原本就是 Robert Slimbach 和 Carol Twombly 为 Adobe 定制的字体。不过，值得一提的是，Myriad 字体的基底是 Frutiger 字体——而 Frutiger 、Univers、Avenir 三款字体系出同门，都出自 Adrian Frutiger 之手。
和很多早期的非衬线体字体不同，Myriad 从一开始就是为了数字化而设计的，字体家族内不同字重、样式的变化是动态的，通过不同的字母宽度调解平衡，给人温暖友好的感觉，而这一点也使得它在屏幕和印刷品上，显得更加协调和自然。
Adobe
Visa
Walmart
其实 Arial 这款字体能走向世界，和微软息息相关。这款 Monotype 出品的数字字体是随着当年的 Windows 3.1 操作系统和当时的 Truetype 技术一同分发出来的，它的竞争对象则是最为经典的 Helvetica 字体，而在视觉上，Arial 和 Helvetica 是非常相近的。
Monatype 在设计Arial 时，考虑到会在电脑上面使用，在字体及字距上都作了一些细微的调整和变动，以增加它在电脑屏幕上不同分辨率下的可读性。
Skype
Pxxxhub
其实经典的字体有很多，你单独看这些字体的时候可能会感到单调，但是Abrate 的 Logofonts 能够帮你了解到这些经典的英文字体是怎么应用到 LOGO 当中，让你看到这些字体本身丰富的可能性和多变性格气质。我将一部分字体打包存到百度云当中，供你学习研究。如果你需要在设计项目当中使用，请购买正版授权。
文章来源：优设 作者：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着大众消费生活多元化和个性化的发展，卡通形象在当下社会的影响力变得越来越重要，它们活跃在各个文化领域中，特别是在商业中应用也越来越频繁。
在信息爆炸时代，大多数人对过量的文字信息容易产生排斥的心理，并渐渐乐于接受视觉图像形式的表达；而卡通形象由于其本身简洁的视觉形象，也成为了最理想的视觉传播符号之一。
本期分享会先从比较知名的几个卡通形象切入，然后分享过去几年我自己创作过的一些形象，希望对正在设计卡通形象或自己想创作形象的朋友有些许帮助。
先罗列几个比较有名的卡通形象
卡通形象一般分为具象动物类型和抽象类型两个方向。一提起动物类比较有名气的卡通形象（比如熊这种动物），你大概会先想到熊本熊、布朗熊、泰迪熊，还有韩国的倒霉熊……兔子类的就是兔斯基、找死兔、可妮兔、流氓兔，还有很早的兔八哥……太多太多。
熊本熊的特征比较明显，一身黑色加上两个红腮点，颜色上本身就给人很潮很时尚的感觉，体型略宽厚偏呆萌。很多女生会觉得它给人一种安全感，我的印象里它一直都是很憨厚的面瘫造型出现，特别是出现在GIF动图里大量真人穿着它的道具摔倒的画面（有了“智障熊”这个外号）比较搞笑，有点愣头愣脑。
所以设计造型上除了能让粉丝记住的特征外，更多的是对于它的性格打造成，给人总爱卖萌的印象。
流氓兔（MASHIMARO）是一只眯著眼的韩国兔子，随着无厘头文化的兴起，流氓兔调皮又带戏谑的个性通过原创者创作的网络动画形式呈现，其FLASH动画在亚洲乃至全球掀起不小的风潮。
还有监狱兔、兔斯基、兔八哥…这些耳熟能详的形象，这里不一一列举了。
以具象动物创作卡通形象既简单又挺难的，为什么简单？因为不用你去较劲脑汁再重新创造一个新的形象，具象动物（比如熊）就是那个样子。那为什么又很难？具象动物卡通形象太多了，不管你怎么去变着法儿努力画的不一样，但最后的效果可能还是会雷同，况且知名的具象动物IP形象又很多，所以不容易创作。
如何创作一个有特征的卡通形象
那么，今天主要是聊一聊我之前创作过的卡通形象当中的心得体会和一些过程稿。第一个例子是在创作浪小花时候，主要从微博品牌标志找切入点，提取LOGO的主要特征（就是图形头上的三个波浪，如下图），这也是比较能体现卡通形象与品牌之间关系的地方。
前期草图探索是比较漫长和煎熬的，（下图）这些是其中的一部分比较靠谱的草图，尽管只是三个波，但做了很多种不同的变化。比如可以像个公鸡冠一样长在头上，也可以帽子形式戴在头顶上，还可以长在后背上。
在创作形象时是先从PC端的动态表情（下图22px大小）开始的，也就是先从主要使用场景着手，所以做出来的表情利用好有限的展示活动区域，头身比例控制好，既要考虑形象的完整性，又要考虑动作展示能够看得最清楚，还要能突出这个不一样的品牌特征（脑袋上那三个波），这也是一个非常具有挑战性的案例。
到了手机移动端里，表情基本上是把PC上的表情一部分移植过去，不改变比例和动作情况下，尽可能丰富设计的细节。
这里要提的是形象颜色的选择，考虑要最贴近用户，不用微博那么重的红色，由于表情是最开始是用在PC网页版微博文字里，颜色太重就会看来视觉比较突兀，所以选了一个跟人的肤色很近的肉粉色（有点像小婴儿），这样表情用起来就比较具有亲和感。
而在设计微小米的时候选用了LOGO本身的颜色大红色，由于使用场景是手机端聊天对话里（下图），感觉不会那么影响阅读（其实我个人很喜欢这个红色，给人很喜庆的感觉）。
（下图）在确定这个形象之前的一些探索草图这里也发出来，而且这一次创作了三个形象，包括一个白胖子和一只小鸡，（有参考了Line的形象）希望能出一个小家族，这样后期延展运用也能玩起来。
在创作这个形象前，尝试了很多不同的形象（上图），最后采用了这个大红口袋娃娃：脸和身子是连在一起的，也看不到脖子，所以这个形象的特点也就在这里。另外，头上加了一个小揪儿。
（上图）这个是优化前的样子（头上是圆圆的揪儿），为了制作动态GIF时，让头上的小揪儿动起来更带感，就改成了（下图）这个样子，跳起来可以一甩一甩的。
在进行卡通形象提案之前，如果能花点心思做一个小小的场景（下图）也能给自己的方案加分。
每个形象都尝试一些动作变化，这样它们各自的性格就很容易把握了。比如，我会觉得（下图）红框那个表情延伸感觉很猥琐，不太适合这个形象，所以后面的表情延展尽量让微小米表现得更萌一些，避开这种很猥琐的感觉。(当然这些说起来都比较偏个人感受，只有作者自己可以体会到）
把这几个形象性格先摸透很有必要（来一张定妆的全家福）。
我个人比较满意（下图）这一组系列的扁平化风格，没有描线的感觉确实更轻快，偏小清新。
下面是几组自己平时的创作，也是利用业余时间创作的几个形象，我会思考如何抓取每一个形象不一样的特征？于是，这些特征可能是发型的变化，可能是眼睛的变化，也可能是衣着的变化……
这些不一样的变化都是让这个形象看起来与众不同，让人先记住它，但最打动人的还是这个形象能否跟看到它的人产生互动和共鸣……这也是这个形象的灵魂和存在的意义。
这一个形象的创意点是借用大家都熟知的“小红帽”这个经典童话造型，让这个小人长着胡子，名字和形象就会形成一个心理和视觉的反差。
将自恋、贪吃、自大、邋遢……这些小人物的缺点赋予这个形象，这样一个活脱脱的“小屌丝”的形象可能就会给人很深的记忆。
毕竟生活中大部分人都有着这样那样的缺点，但都希望摆脱囧态，让自己变好的那分励志感。
我很喜欢画一些丑乖的东西，现在大家都审美疲劳了，可爱的东西都乏味了，反而更喜欢一些丑的可爱的形象。那么给这些形象加个厚嘴唇、小胡子什么的，反而很容易出效果。
好了，写到这里……下面的图大家自己发现亮点，自己感受脑补吧……总之，创作形象时还是要抓住大众的心理软肋，先打动自己再去感染别人。
在画卡通形象时候，我们往往很容易陷入两个难以跳出的区域：一个是容易画得偏低幼、低龄化；另一个就是表情动作偏呆板国企风。这是受我们从小周围接收的图像信息影响的，在还没有将练习探索的草图量形成一个质的提升之前，先有这种意识也很重要，这种意识会帮助你在以后摸索练习的时候注意到形象的头身比例，以及思路惯性的打破。
欢迎对品牌、插画和卡通形象感兴趣的朋友可以一起讨论、练习。
文章来源：我们的设计日记（ID：helloskys）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为一名专业的设计师，版面设计能力直接影响到该设计师水平。我们很多设计朋友在临摹的优秀作品中，往往只是被作品华丽的外表吸引了，比较少去思考设计背后的秘密。
那么在这里，我总结了版式设计原理的几个方面，结合一些具体例子实际操作演示，让对这块不熟悉的设计师朋友们能快速掌握版式设计。
目录
一、版式组成
主体：视觉焦点，主导着整个设计（可以是人/物/文字/图片），整个版面最吸引人的部分，相当于主角的作用。
文案：对主体的辅助说明或引导，毕竟有时候我们放一只小狐狸在旁边，用户也不能准确的知道它在说什么，配角的作用。推荐阅读：平面广告的版式风格与创新！
点缀元素：装饰元素，可有可无，具体根据版面需要；好的点缀元素能够渲染气氛，大部分的点缀元素遵循三角形原则，类似下图中的云朵，群演的作用。
背景：可分为纯色/彩色肌理/图片/图形等。
二、构图平衡
在设计中，平衡是实现统一的一条重要途径。如果上面所说的元素组合起来处于平衡状态，那么这个设计看起来就是统一的，就会给人一种整体印象。
因此，平衡是视觉传达设计的一个重要方面。版式平衡总共有3种分类，分别是：对称平衡，非对称平衡和整体平衡。
1. 对称平衡
对称是同等同量的平衡，对称式设计是一种静态的，可预见的，讲究条理和平衡布局的设计。对称构图相对比较易于创建，特点是稳定，庄严，整齐，安宁，沉静和古典。
2. 非对称平衡
非对称在不对等的元素间创设出秩序和平衡，非对称设计由于版式不可预见，所以空间是变化的。特点是动态的，灵活的和富有活力。非对称构图比较多，常见的有以下6种形式。
对角线构图：
文案摆放在版面的对角线方向，一方面避免了司空见惯的居中版面，一方面给中心主体留出了更多的创作空间；另外中心的图形也可以是对角线的设计，这样会让整个构图看起来比较平衡。
发射状构图：
点缀元素围绕中心的文案或者图形发射，这样的构图会让中心的视觉容易聚焦，视觉冲击感会更强烈。
像电商大促活动，淘宝和京东等等会经常使用发射性构图来营造大促活动的热闹火烈程度。
中心构图：
这是我们最常见的构图之一，文案和主体居中页面，注意的是位于版心的主体要尽可能的出彩，利用设计技巧吸引读者的眼光，这样才能避免平淡乏味。
s形构图：
文案或者图形放在线条转折的地方，整体呈一个 s 形。另外线条的起点和重点也同样是读者容易关注的地方，可以放一些重要的信息。这样的构图灵活，有趣，而且可以引导用户沿着 s 形轨迹阅读信息。
二分构图：
文案和主体分开，呈左右或者上下的构图形式，注意的是文案要采用对齐原则。这样的构图也是比较容易创建的。
形状构图：
主体和文案组合的形式可以是圆形，三角形，矩形等形状构图。注意如果是用三角形构图，最好呈倒金字塔结构，这样更加轻易引导用户进入下一个信息层。
3. 整体平衡（满版平衡）
整体平衡，是指图片充满整个版面，文案布局在上下，左右，中部的位置，特点是主要以图像为诉求，视觉传达直观而强烈。满版型构图，给人大方，舒展的感觉。
注意：在设计的过程中，这种类型的文字处理很容易显得「嘈杂」，因此为了避免拥挤的空间，适当删减些文字。
三、设计原则
对构图形式了解后，我们还要知道一些基本的设计原则，虽然这些原则我们可以在其他地方反复的看到，但是我在这里还是要强调一遍，因为它可以帮助我们在打破规则之前，必须清楚规则是什么。另外注意一点就是，这几个原则不是独立分开的，而是可以同时考虑和结合，不是唯一选择：
1. 对比
缺乏对比，作品会变得平淡乏味并且不能有效地传递信息。艾美奖设计师、Blind 公司创始人 Chris Do 说过 contrast is king（对比至上），运用好对比，可以在页面上引导用户的视觉，并且制造焦点。
一般产生对比的方法可以有：大小对比、粗细对比、冷暖色对比……不管是哪种对比，当你期望对比效果有效的话，需要大胆一些，明显一些，不要拿12号和13的文字做大小对比，这是没有任何意义的，不要畏畏缩缩，做设计也是一样。
2. 对齐
任何元素都不能在版面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。在版面上找到可以对齐的元素，尽管它们可能距离比较远。需要注意的地方是避免同时使用多种对齐方式。
左边的海报采用了矩形构图，右边的海报采用了二分构图，但是文案都是找到了一条明确清晰的对齐线，这样让版面产生了秩序美。
3. 亲密性
同类相近，异类相远，相关的元素距离靠近，归组在一起，成为一个视觉单位，而不是多个孤立分散的状态，这样有助于组织信息，减少混乱，让结构变得更清晰。根据文案内容，进行合理的分组与归类。
左边海报文案分成了4组，清晰有条理，中心的主体和点缀元素也利用了亲密性原则，使得中心主体显得更饱满；右边海报主体采用了发射构图，整体呈倒置的金字塔形式，这种锥形容易引导用户阅读下一个信息层。
4. 重复
重复的目的是统一，并增强视觉效果。比如标题都是同一个字体或大小或粗细。但需要注意的是，要避免太多地重复一个元素，重复太多只会让人讨厌，要注意重复的「度」。太多的重复会混淆重点，都是重点等于没有重点。一般来说，呈均匀的重复式图案，是作为背景使用的。
左边海报中，我们的视线会被那一个不同的女孩吸引住，这个女孩和左上角的文案「敏感词万岁」相呼应，这种同质中的不同，即是变异元素，用来制作视觉焦点。
右边海报是葛西熏设计师为日本著名仲条正义设计的个人展海报，其中重复的形象是一个腮帮鼓起的小孩形象，不知道是在喝东西还是吐东西，这个具有冲击感的形象其实和这次展览主题「饮&呕吐」呼应的，设计师想表达仲条正义的创作于人生，正如这个重复的形象，不断吸收，不断推翻，最后不断创造。
5. 留白
留白是虚实空间对比的作用。适当的留白能让页面透气，有呼吸，给人舒适感。大量视觉信息堆砌时，每个元素都要经过眼睛扫描，大脑处理，当找不到重点的时候用户眼睛和大脑容易疲惫。在内容比较多的情况下，尽量在视觉上减少视觉分组；另外，多利用负空间创作一些巧妙的负空间。
左边在留白的同时，利用了负空间巧妙的将海报的主题「美食」和「美酒」结合起来。右边的海报是日本大师原研哉的设计作品，大量的留白空间更加显得中间寿司的精致，少而静的视觉元素提升了作品的品质感。
6. 变化
一成不变的元素会容易乏味无趣，版面也缺乏灵活感，如果将一些元素发生位置，大小或者颜色变化，打破版面呆板、平淡的格局，使得画面非常有层次感，不失为打破格局的好方法。
左边的海报如果将所有的元素归位，这将是一个文案和人物分开中规中距的构图，当他们的位置发生了一些位移，整个页面变得有趣多了。右边海报采用了 s 形构图，如果这些圆圈是一样的大小、颜色，可能没有多少人会有耐心的阅读下去。
四、设计流程
前面我们了解了版式组成的元素，构图和设计原则，那么我们在工作中怎么利用起来呢，下面介绍我自己的设计流程，每个人的流程都不一样，大家都可以根据自己的习惯来调整。
1. 需求沟通，确认主题
当接到需求的时候，第一步不要着急马上开工。先要找对需求的方向，才能提高工作效率，事半功倍。沟通主要注意几个方面：
需求的目的是什么？目标用户是谁？背景是什么？——对症下药
这么多文案或者素材里面，哪个是一级二级?——划分信息层级，寻找重点
风格上面有什么要求或建议？能否用3个关键词表达？——预期效果是否达成一致
Ps：关于第3步风格沟通，建议双方用图片交流和表达。毕竟每个人对「高大上」的理解都是不一样的，有的人认为是五彩斑斓的黑，有人认为是大量的留白。有了图片，我们可以去分析图片符合「高大上」的原因是哪些，从而提炼出具体的元素，将「感觉」具体化，这里也是运用到了情绪板设计的体系。
2. 确定构图形式，学会视线引导
根据前面的沟通和风格关键词，收集好用于表达信息的元素，包括图形图像文字等等，然后在草稿或者脑海中构思好，怎样的排布能让信息有效的传达出去。另外作为设计师要学会引导用户的阅读视线。比如你找到了一个抬头向上看的模特，你可以把文案放在海报上方，用户会习惯性地自然地沿着模特的视线看到文案。
3. 色彩搭配，5种平衡关系
关于配色，在网上大家都可以看到很多方法和理论，下面介绍这5种色彩平衡的方法个人觉得比较实用，也比较容易理解，大家要根据实际需求来运用合适的配色方案。
互补色——相互衬托
互补色就是色环上相对的两个颜色，海报中的绿色和红色就是这种关系，相互映衬，相互衬托，从而达到了一种平衡。
冷暖色——情感表达
当我们想表达强烈的情感时候，可以用冷暖色去对比，经常会在电影海报或者插画作品中看到。
深浅色——色彩层次
这里的深浅指的是黑白灰对比的重和轻，一般来说，色大而深显得比较重要，色小而浅显得比较次要，我们可以看一下前面讲构图那块展示的海报黑白版，会发现这个规律更加明显。
中性色和彩色——视觉聚焦
中性色指的是黑色，白色和灰色，也叫无彩色，当中性色充当背景色的时候，彩色部分会更加突出和聚焦。
纯色和花色——平衡多色关系
如果一张图中，主体本身颜色比较丰富鲜艳，背景色也五颜六色的话就眼花缭乱了，也就是经常说的辣眼睛，这时候一般采用纯色的背景来缓解视觉疲劳和平衡多色之间的关系。
4. 确定字体搭配
不同的字体有不同的气质，根据风格来选择合适的字体。如果遇到比较好看的字体，却不知道叫什么名字，可以找一些以图搜字的网站，比如求字网等等，避免伸手党。
黑体
工业现代感比较强的无衬线字体，给人感觉端正刚硬，具有力量感，多用于表达简洁或信赖感的主题。
宋体
细致优雅的衬线字体、苗条细长，特点是复古，多用于表达文艺或者时尚的主题。
圆体
圆体的笔画圆润，柔美，可爱，具有亲和力，多用于女性或儿童的主题领域。
书法体
书法体特点是潇洒大方，气势磅礴，具有历史感，多用于表达传统文化或者历史主题。
哥特体
哥特体是装饰性比较强的衬线字体，线条交接处和末端具有明显的粗细变化和装饰。特点是犀利、凌厉，多用于表达惊悚、魔法童话或者战争的主题。
艺术体
艺术体其实是泛指像素风格，手写字体，汉仪六字简等等具有强烈的艺术风格和设计感的字体。特点是轻松活泼，具有观赏性和趣味性。
五、案例演示
上面的案例大部分是平面展览或者电影海报，那么实际工作中的网页，banner、闪屏或者 ui 界面这些怎么办呢？其实方法都是一样的，版面设计的原理应用在各个方面。这里演示一个移动端 banner 设计案例吧。
首先，运营小姐姐的文案非常简洁，没有冗长到让我要分成一级二级三级；其次需求的目的也很明确，就是要突出2个素材和按钮；最后风格也没有奇奇怪怪的提议，只要和产品整体调性一致就好。
那么在这里要介绍一下产品的背景了，pins 是一款少女心拼图 app，界面简洁清新，多种布局模板和背景。很快的，我在脑海中简单地构思了一下构图的方式。其实3种构图形式都是可以的，但是为了更好的突出按钮和素材效果，我最后选择了对角线构图。
先在黑白稿的情况下把文案和主体布局好，让主次关系清晰；考虑到目标用户大部分是女生，使用了圆形字体，配色主要是参考了 pins 的 logo 的配色，少女心的品牌色；最后细节调整，加上一些点缀的元素，其中网格是 pins 比较受欢迎的背景。一个简单的 banner 就这样完成了。
当我们的工作内容无法满足做文字比较多的平面海报的欲望时，可以考虑自命题的练习。当时听到许巍《无人知晓》这首新歌的时候，有一些感悟和想法然后做了一些 C4d 素材，想利用它作为主体和歌名做一下排版练习：
在开始动手做之前我就想好了这次想做一个视觉直观而强烈的海报，再加上主体是文案和素材的结合，所以我才采用了满版构图。在黑白灰中将主角和配角的位置确定好，再去调整字体和距离。推荐阅读：版式必备的7招处理方法
然后调整主体中4个字和素材之前的交叉和重叠，细节调整后，我尝试了2个配色方案，一种是利用主体素材的颜色进行搭配，平静和谐；另外一种是红蓝配色，直观强烈。
总结
最后总结一下，我们在进行版面设计时候，要注意从这几个方面去不断调整和检查，同样当你看到一张海报的时候不知道怎么去思考和分析，也可以从这几个方面入手：
主题是否鲜明？视觉焦点是否突出？
构图是否平衡？（3种平衡关系）
设计原则是否合理运用？（6个设计原则）
细节是否丰富? 是否有趣? 细节考验着设计师的情怀。（字体、色彩、光影等）
以上海报案例图片采编于网络，版权归属原作者。
来源：UID的小伙伴们
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天的这篇文章也将围绕着「文字」展开，相信大家看完后会对「文字」有一个全新的了解，也将明白文字对于版面的意义是巨大的，处理好它，基本上你的版面也就编排的差不多了。好了，下面我们开始今天的内容吧。
首先来看几张不同类型的海报，第一张文字占比较高，第二张图片占比较高，第三张文字与图片占比是五五开。
然而不管是属于哪种类型的，它们的核心目的都是在传达信息。因为对于一张海报来说，我们不光会看还会去阅读它们。
平面设计就是通过文字来「说话」的。
而在广告设计中，图片的占比会非常高，因为广告多以图片为主，通过图片我们能大致的猜测出设计师想要表达的东西是什么。
总结一下：广告设计多以图片为主，意在通过图片传达概念；而平面设计则多以文字或图片为主，意在通过文字传达信息。
那么作为信息传达的载体，字体就显得格外重要了。下面我会从字体的分类、字体的搭配、字体的气质与设置细节着手，慢慢带领大家去认识字体，首先我们来看看字体的分类都有哪些。
中文字体大致可分为：黑体、宋体、圆体、书法体与卡通体等。
其中书法体又细分为：楷书、行书、草书与隶书等。
在列举的这些字体中，最常用就是：黑体、宋体和圆体，而在书法体中，最常用的是楷书与行书。为什么说这些字体常用呢？因为在许多优秀的设计作品中，这些字体的出现概率都非常高，尤其是黑体与宋体。
下面说一下英文字体，大致可以分为：衬线体、无衬线体、手写体与展示字型等。
其中最常用的就是：衬线体与无衬线体。理由与中文一样，它们也是使用率很高的字体，其次还有一个原因就是在以中文为主的设计中，它们与中文字体搭配起来比较契合。
拿黑体来说，与之搭配的英文字体就是无衬线体，因为它们的笔画特征相似度很高。
宋体搭配的就是衬线体，因为宋体的笔画特征是有粗细变化且有装饰线，而英文的衬线体也刚好有与之相似的地方。
而圆体则是搭配拥有相似特征的无衬线体。
因为常用的书法体通常使用毛笔书写，所以在笔画特征上没有与之相匹配的英文字体，大多数时候我们会选择用衬线体来搭配，具体原因我会在后面的字体气质环节为大家讲解。
虽然也有别的搭配方式存在，但我给大家提供的这些都是最常用和最安全的。说完字体搭配问题后，下面我们来看看这些字体，所包含的气质又有哪些。
首先是黑体，它具有科技感与现代感，这是由它简洁干练的笔画特征决定的。
其次黑体也能表现出运动与时尚的感觉，因为运动与时尚本就是偏现代的词汇。
接着是宋体，它具有文化与历史的气质，这个比较好理解。
而除了能表现出历史与文化感之外，宋体还能表现出清新与雅致的感觉，这是由宋体的笔画特征决定的，横细竖粗且末端带有装饰，与优雅精致的感觉十分契合。
圆体的特点也是非常明显的，在看到它时脑海中的第一印象就是可爱与卡通。
除了刻板印象外，圆体那种圆滚滚的笔画给我们的感觉还有安全和易亲近，所以圆体也能用来表现儿童与温暖感觉的题材。
一说到书法体，能直接联想到的关键词就是传统与历史，因为书法的演变就是我们汉字发展的轨迹。然后我们回过头来讲一下，为什么书法体可以和西文中的衬线体搭配。
原因就在于衬线体也具备书法体的某些气质，比如传统、文化、历史等。与书法体在早期的东方一样，衬线体在早期的西方也是主要的字体之一。
温暖、人情味儿，说到书法体可能很难联想到这两个词，但是书法体确实具备这种气质。跟黑体这种棱角分明的字体相比，书法体是手写出来的，它的笔画特征给我们的感觉就是有「温度」的。
在字符面板中，除了选择字体与改变字号以外，这两个区域相信大家用的还是比较多的，它们分别是：行距设置与字距设置。
拿行距来说，在使用时有几个比较常用的设置方法，比如用当前文字的字号乘以1.2、1.732或是2。不过，通过这个方法所算出来的数值只是一个参考，也就是说你可以在这个基础上做些调整。
比如：在计算出的数值的基础上进行递增或是递减，这时你要做的就是用眼睛去观察，觉得大了就减少一些，觉得小了就增大一些。
其中，用字号乘以1.2适用于标题。
比如上方那个标题的字号是40pt，那么行距的数值就是用40乘以1.2等于48。下方这个是在此基础上做的一个调整，稍微增大了一些行距。
字号乘以1.2适用于标题，而用字号乘以1.732或2则更适用于小字号的文字，比如内文。
上方是用字号乘以1.732的例子，字号是9pt，用它乘以1.732得出来的数值是15.588，四舍五入取个整数得到的行距就是16，下方这个是用字号乘以2得到的效果。
大多数情况下我建议大家用字号乘以1.732的行距，大小比较适中。
跟行距不同的是，基本上来说字距是无需调整的。当然还是那句话，要靠自己的眼睛来衡量，如果你觉得字与字之间离的很近的话，那么可以增大一些字距，反之，则可以减小一些。
其次就是，当你遇到一些偏轻松慢节奏的设计，比如典雅清新类的文学小说时，就可以适当的增加一些字距来营造这个感觉。
比如这两张海报，左边的是经典的居中结构，右边的是包围结构，构图都是可以的没有任何问题，但为什么看起来还是怪怪的呢？因为文字组没有刻画好。
为了让大家能更深刻地体会到文字组对于版面的意义，修改了这两张海报，其中构图不变只改文字组。
这个修改前后的对比还是非常直观的，可见文字组对版面的影响有多大。如果说构图是版面的骨架的话，那么文字组就是版面的五官，骨架再好五官不行结果也是可想而之的。
文字组分为：左对齐、居中对齐、顶对齐以及两端对齐。
其中与左对齐与顶对齐对应的有：右对齐与底对齐。
给大家找了一些各种对齐方式的案例。这是左对齐的形式。
这是右对齐的形式，与左对齐相比右对齐属于不常用的对齐方式，主要是出于易读性的考虑，但并不是说不能用。
这是居中对齐的形式，最经典的对齐方式之一。
这是顶对齐的形式，是文字竖排时最常用的对齐方式。
这是底对齐的形式，跟顶对齐相比也是属于不常用的对齐方式。
最后是两端对齐的形式，横排与竖排都可以使用这种对齐方式。
如果作品看得足够多，应该见过这种形式的组合，它同时包含了多种不同对齐方式，我们称其为「对齐组合」。
比如我们可以借鉴结构，以这个文字组为例，它的结构是这样的：两端对齐、中间的文字字号大，上下的文字字号小，按照这个套路我们来试着做一个组合。
在编排前，我们先阅读一下文案，通过文字可以得知，这是一个与篮球明星有关的内容，气质上来说会偏现代一些。
所以字体可以选择一款黑体，英文部分则搭配一款无衬线体。
根据之前总结到的这些特征，下面就可以开始编排文字了。
按照那个组合的套路，我们先将两端对齐中较大字号的文字给编排出来，而标题信息无疑是非常适合用来放大的。
接着再将上方和下方的小字号文字给编排出来。
其中要注意的就是这段文字的行距，我参考了logo的高度来进行设置。而整个组合中，字距是基本没有进行调整的。
值得一提的是，在两端对齐的文字组中，这种小大小的形式非常好用。因为它的节奏变化丰富，所以大家在做两端对齐的文字组时不妨试试。
这就是借鉴结构的效果了，精髓在于要多去分析别人的形式与套路，并从中获取做组合的灵感。除了能借鉴结构之外，我们还可以借鉴标题字数+结构，是什么意思呢？
以这个组合为例，它的标题有7个字，整个组合是由顶对齐与两端对齐构成的一个对齐组合。
它的组合结构为小中大，按照这些特点我们来尝试借鉴。
这是要用到的文案信息，通过阅读文案可以得知，这是一个关于炸鸡套餐的内容。
通过去看kfc的各种物料，发现运用黑体的场景还是比较多的。
所以，在字体搭配上选择用黑体与无衬线体。
根据之前总结到的这些特征，下面就可以开始编排文字了。
按照小中大的特点，依次将信息给编排出来。
完成后可以在组与组之间，添加一根小线段用于连接，以起到过度的作用，如果大家现在回过头去看原图的话，也能发现这一特征。
其中，标题的行距就是用标题的字号乘以1.2算出来的。
字距我也做了调整，因为默认0的字距看上去有些拥挤。
可以看出跟原图相比，在不破坏组合结构的情况下，针对文字信息的编排是做了些调整的，比如：原稿最左侧是两行顶对齐的小文字，在借鉴时将它换成了logo，因为我们是要借鉴它的结构，而不是为了跟原稿做的一模一样，具体还是要根据我们的内容来合理编排。
首先我们来看这张图，一个标准的两端对齐、组合结构与之前那个是一样的，中间的字号大，上下的字号小。
除去这些外还有一个小特征就是，在大字号中间还有一层小字号的文字。
接着我们再来看这张图，它的特点就是图片叠压在了文字的上方。至于它的结构我们可以不用考虑，因为结构已经找好借鉴了。
这是要用到的文案与图片。通过文字可以得知，这是一个关于介绍昆虫的图书，且配有一张插图。这个插图的风格是手绘形的，偏写实一些没有那么的卡通。
结合这些特点我选择的字体搭配方式是，宋体配衬线体。
因为字体搭配这部分我又借鉴了一些相关风格的书，发现它们的字体搭配方式用宋体比较多。
分析完文案找到字体搭配方式后，在结合之前总结的一些组合特征，我们就可以开始编排了。
先将中间比较大的那层文字给编排出来，然后在它中间处置入一个小字号的文字。
中间层编排完成后再来编排上下层的文字，字号不用太大，整体注意好两端对齐。
调整字距的地方有两处，首先是标题，调整的原因在于默认值我觉得有些小了，其次是标题中间的那行文字，调整它的原因在于不想字号放太大。
因为是两端对齐的结构，不调整字距的话。标题中间那行文字只能通过放大字号来达到目，然而这个效果并不是我想要的。
综合考虑，选择了这个，最后，把图片置入进去叠压在文字的上方。
图叠压在文字上有一个无法避免的问题就是，被压住的文字会出现无法识别的情况，英文还好但是中文却不行，因为在这个组合中，中文是用来阅读的文字，英文仅充当装饰用。
既然中文是重要的信息，那为什么还要去遮挡它呢？因为有提示，通过这两个字你也能猜出来被压住的文字是什么。
这就是借鉴结构+表现手法的例子，多一张图片的加入，混合借鉴后的效果与原稿的相似度就会降低。
下面我们来看这张图，它既有顶对齐又有两端对齐的感觉，像这种组合我将它称为顶部两端对齐。
它的组合结构也是一个小大小的形式。
分析完上一个组合后，再来看看这个组合，值得借鉴的地方有两处，首先就是整体的结构，其次就是字体搭配。由于已经借鉴了上一个组合的结构，所以这个组合要借鉴的就是字体搭配。
在原图的这个字体搭配中，英文是最好判断的，这个字体是衬线体，中文则比较陌生了，既不像黑体也不像宋体。
感觉是被设计过的，不像是字库里的字体，我通过观察发现，它既有宋体横细竖粗的笔画感觉，又有黑体干净利落的特征。
所以，我在字库字体中找到了一款具有类似感觉的字体：姚体。
在字体搭配上选择用姚体搭配衬线体。这里需要强调的一点是，在挑选字体借鉴的过程中已经考虑到了与文案的气质相匹配的问题，下面我们就来看看文案。
标题叫「遇见你之前」，给人的感觉比较文艺，而姚体我们前面也分析过了，它是具有宋体特征的，而且笔画细长，整体给人的感觉就是比较文艺的。
分析完成后，结合之前总结的组合特点就可以开始编排了。
第一步，还是按照小大小的感觉将组合给编排出来，注意好顶部两端对齐。
接着在组与组的缝隙处加入线条就完成了。
在这个组合中标题的行距与字距，默认状态下是左边这样的，字距还好，行距却非常大，这个时候你就不能套用之前讲到的倍数去算行距了。那样行距只会越来越大，所以这里我们要根据视觉效果来调整。
这样，一个借鉴结构+字体搭配的例子就完成了。
这是要用到的文案与图片素材，首先，老规矩分析一下文案，选择与之契合字体。书名叫《流星之绊》，还是比较文艺的。
根据这个书名，搜索了一下原书的样子，在这三个不同的版本中，所感受到的气质有：温情和雅致，在字体的选择上与之较为契合的有：书法体与宋体，这两个字体的选择在这三个不同的原版本中也都有体现。
打算用宋体，与其搭配的英文首选就是衬线体了。
这是第一个要借鉴的对象，可能有人会说这不像文字组，这确实不是文字组，但并不代表它不能被联想成文字组。
比如它的结构是由一个顶对齐与一个左对齐构成的对齐组合，而且下方的那个左对齐文字是放在了顶对齐的负空间处的。
其次，顶对齐的文字字号较大，下方左对齐的文字字号较小。
这就是根据那张图所总结出的一些组合特征，下面我们就根据这些特征来编排文字。
先排出顶对齐的文字，然后在其负空间处置入左对齐的文字信息。
排到这发现右下角还有块小缺口，既然是要做一个对齐组合的话，那么就要把它填满。
关于顶对齐的中间部分为什么要这么做，是因为标题的字数不足以作出顶对齐的感觉，为了解决这个问题，选择重复了一次标题并且将它的笔画打散了，而打散的灵感来源于「流星」，它们就像流星一样散布在天空中，不知道什么时候就会掉落下来。到这为止是书封的上半部分，下面我们来编排下半部分。
这是要用到的借鉴图，它也是一个由顶对齐与左对齐构成的对齐组合。
除了这个外它顶对齐部分的文字跟左对齐的比，也是属于较大的。
这是从那个组合中，总结出的组合特征，与上一个几乎一样。
按照总结出的组合特征，将文字给编排出来。
其中顶对齐与这段左对齐的文字，它们的行距是用字号乘以1.732算出来的，字距则是做了些微调整，因为当文字缩小后，它的字距在视觉上看着也会变小，所以我在默认0的基础上将字距增加到了50。
这就是根据那两张图片所借鉴出来的文字组了，下面把它们置入进版面中。
整体是一个上下结构的，这种类型在构图中属于上下构图。这也是为什么会找那两张图来当参考的原因，因为提前已经考虑好了构图。
接下来做烘托氛围的工作，先把底色换成夜空的黑色，然后配上图片。
接着更换字体的色彩恢复识别性，其中黄色的部分是为了与白色部分做区分。
然后给腰封换上色彩以恢复下方的文字的识别性，再挑选一些信息，在它们的下方配上黄色，目的是为了与上方的色彩做呼应。
最后，将书脊编排出来，这个案例就编排完成了。
以上就是版式三部曲之文字篇的所有内容了，回顾一下，由两个部分组成。第一部分是：字体的分类、字体的搭配、字体的气质与设置细节。具体包括：字体有哪些不同的类型、在选中字体的类型后，要如何选择与之搭配的英文字体。字体气质主要讲的是，不同类型的字体都有哪些味道，它的意义在于当你确定好项目的风格后，可以根据不同字体的气质，快速的找到与项目定位契合的字体。
文章来源：优设 作者：研习设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，使作品不仅具有美感，还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化，进而给观者带来不同的心理感受。同的心理感受。本期分享的是上下构图的使用方法，此构图形式具有良好的视觉效果，也比较容易掌握，是非常实用的构图方式。
上下构图形式是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定。
最典型的上下构图由「上图下字」或者「上字下图」两部分构成，图片及文字各占据一部分，互不干预，能清晰明了的传达出版面的信息。
主空间还经常使用图形化的标题文字充当画面主体，可以很好解决画面缺少图片层级的问题。
上下构图空间划分比较固定，为了得到丰富的视觉效果和良好的设计感，需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版，元素之间的对比、点线面的运用、巧妙的留白等。
进行上下构图设计时，可以根据版面内容的信息体量划分画面的空间，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等。在设计时也可以反复进行调整，直到找到最为合适的构图比例。
1. 1:1分割
把画面平分为上下两部分，形成对称均衡的分割构成。
1:1分割比例构成方式，多用于版面中两部分内容处于并列或对立的关系。
2. 黄金分割
「黄金分割比例（1:1.618）」被认为是最具美感的分割比例，具有严谨的艺术性、和谐性，蕴藏着丰富的美学价值。
在设计中有意识地运用黄金分割比例进行设计，可以营造出富有美感的版式效果。
3. 白银分割
「白银分割比例（1:1.414）」是日本率先采用的一种分割比例，目前广泛运用在版式设计的布局中。
与黄金分割相比，白银分割次空间占据的比例更大一些，能够承载的信息量也更多。
4. 2:1分割
采用2:1的比例，图片主体在画面中占据主导地位，视觉焦点更清晰。
主要的信息（标题）常融入图片中放在主空间成为画面主体，阅读性文字则放在次空间。
5. 3:1分割
3:1分割的比例与2:1比例相似，但图片在画面中占据主导地位更强，主空间承载视觉点，次空间承载阅读信息。
通过比例，可以让版面分割更严谨。但没有那个比例关系绝对正确，需要根据画面的项目调性、信息体量、信息功能与图文主体而定。如使用其它比例分割的优秀案例：
把图文按比例分别编排在版面上下方，是比较严谨规范的构图方式，但是为了避免版面的呆板，可以通过调整版面空间变换出多种编排形式。如以下几个案例：
缩小图片和文字空间，使留白处形成外空间，增加层次感。
在背景（绘画作品）上重新划出新的空间，形成内外空间对比，既丰富了画面层次，又让版面变得生动有趣。
通过图片文字的错位排版和负空间的巧妙留白，让原本呆板的上下构图变得灵活多变，充满个性。
让图片位置重心偏移，打破均衡稳定的构图形式。标题的破图处理，也增加了版面的灵活性与丰富性。
在上方空间上划分出新的空间，这样的手法可以很好让空间具有多变性，也可以让我们的设计更加灵动。
上下构图的框架看似比较固定，但是也能通过设计手法，变换出多种编排形式，巧妙破除上下分割的单一性与呆板感。
1. 曲线分割
把生硬的直线改为呈现出动态的曲线或斜线进行画面的分割，版面显得更生动活泼。
2. 图片裁切
把方形图片裁切为其他形状，使上下构图没有明显的分割线，也可以呈现出良好的视觉效果。
3. 文字破图
使用文字串联起上下两个空间，破除上下构图版面的单一性。
4. 元素串联
利用图形、色块等元素串联空间，让主次空间建立起联系，具有丰富的视觉效果和良好的设计感。
5. 图片退底
把图片主体进行退底处理，重新营造场景，弱化空间的分区。
6. 空间留白
使用留白破除两个空间的间隙，拉开画面的空间感，具有良好的视觉效果。
什么是上下构图
构图比例
空间调整
灵活运用
总结
文章来源：优设 作者：艺海拾贝Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
版式设计在我们的设计中是非常重要的技能，无论是UI设计还是平面设计，都会运用到版式设计相关的知识，在版式设计中最常见的就是图文排版、文文排版。一张图片一段文案在不同的需求情况下我们都可以排版出很多种样式，每一种样式展现出来给人的感觉也是不一样的，美的排版总是会使人眼前一亮，也会使整体的设计更耐看。
排版也是会根据重要程度划分层级，我们都知道主题文案都需要醒目，让人一眼就能看到，这样才能达到宣传的作用，当然仅仅只是展示主题文案也是远远不够的，达到主题排版，主图排版，小到副标题排版，我们都需要精心的排版，还可以更精细到小到辅助文案以及图形的排版，而今天我们就来看一下日期这样的文案我们可以怎么排版呢？
日期在一些重要的活动中也是比较重要的信息，比如展会时间，我们需要突出时间，不能用极小的文字排版在角落，用户不注意的地方，这样会给人一种焦虑的情绪，既然是展会活动，那么用户关心的是展会的主题是什么？活动时间是什么时候？活动地址在什么地方？所以这些重要的信息就需要重要突出。而在一些做纪念性的日期我们就可以小化（例如我自己记录自己的学习打卡练习）
我们常见的日期有年、月、日、时、分、秒，接下来我们就通过对日期的展现做一些不同的排版方式，通过与日期的普通排版方式做对比，我们就可以看出微小的日期排版对整体的设计展现也是有很大影响的。
简单的日期排版我们通常就只是将年月日对齐排版就算完成了，但是这样的排版方式会影响整体画面的美观，我们对于小文案也需要花一定心思去整理以及排版出更精细的样式，这样给用户的感觉就会觉得你的每一步设计都是用心设计的，并且为了整体的美观，我们 也不得不从细微之处出发。
日期排版01
例如下面对于日期的排版，TIME这个文案有时候我们也可以去掉，因为用户看到时间就会明白这是什么，在一定的情况下也是可以去掉的，当然有时候为了整体页面的展示效果，我们也可以加上，便于排版，左边只是将年、月、日并排，时间节点作为一个点排列，下面的文案我们可以根据实际情况选择一些特殊的提示文案做装饰
而通过对左边简单的日期排版进行改版后，我们会发现右边的日期排版会显得更美观，排版更精妙，也有更多的细节之处，例如2020后紧接着年（YEAR)的提示，08后面标识是周六(SAT.），年月日和时间节点也同时做了层次区分，这样更有利于阅读。
日期排版02
对于上面同样的日期文案，我们还可以排出右边不同的样式，整体采用横排的方式，将年、月、日同排，时间段缩小处理，使时间之间也能有层次感
日期排版03
下面的日期是年、日期段、时间段的组合，左边的排版显然是比较常规的分层排版，却主要突出了2020，而一般时间我们在这一年将要发生的事，我们更关心的是哪一天那个时间点，而右边的排版主要突出时间段/点，更能让用户看到自己关心的事件。
日期排版04
下面这一组日期是有不同年份的，所以我们在排版的时候可以突出显示年份，这样在排版的时候就可以注意层级关系，排除层次感
日期排版05
这一组日期是比较简单的，只有一个时间点，没有时间段，如果直接按照左边这样的日期排版方式，显然整体看着就很单薄，把这样的日期排版方式融入到版式整体画面中，也一定会显得毫无设计感，而我们只需要将简单的日期经过简单的排版，从年、月、日、时，从上至下依次排列，这样就可以显得信息有层次感，并且阅读也不会有困惑，加上精致的icon做装饰，这样的日期排版就显得更耐看。
日期排版06
这一组日期也很简单，只有月、日、时，都是属于时间段的信息，通过分析这个时间，月都是10月，是相同的，所以我们可以将月份单独拿出来，作为共用信息，这样就可以精简画面重复的信息，依然采用月、日、时这样从上至下的顺序排列，时间小化，但是利用色块突出，也不会柔化时间点的阅读，再通过一条线的连接，将斜线和时间icon相连，形成一个有趣味性的时间装饰，这样的排版更容易吸引用户的眼球
日期排版07
下面的日期也是年、日期段、时间段的组合，和第三个日期排版的案例类似，所以存在同样的问题，左边的排版显然是比较常规的分层排版，却主要突出了2020，右边改版后，我们同样弱化年份（2020），提取相同的月份（8月），突出显示日期
日期排版08
这一个和第五个也是一样的，左边都是年、月、日、时的时间点，没有时间段，第五个我们是采用竖排的方式，而这里我们改版后采用的是横排的方式，突出显示月、日，让整体的层次更加清晰
日期排版09
下面这一组时间改版，我们主要采用错位竖排的方式，像这样的排版方式，我们可以多用于一些比较有设计感或者比较唯美的画面中，显得每一个小的点，都有用心设计，并且也符合这样的气质
日期排版10
这一组日期只有年、月、日。左右两边的排版看起来很相似，但是通过对细节的调整，例如2020的弱化，间距的把控，星期几的友好提示，这样就会使整个日期排版看起来更精细、耐看。
我们通过对上面日期的排版分析和总结，会发现小小的日期排版也是很关键也很追重要的，所以下面我们将通过一张海报案例，来真正体现日期排版对整体画面的重要性。
海报主题是选择的立秋，虽然立秋以及过去两天了，但是我又学会了这个立秋新的排版技巧，所以我想将这一技巧分享出来，但是这里就不详细讲解海报的设计过程了，主要还是分享日期排版对整体画面的影响作用
这里就简单的说一下海报设计的思路，海报主题是立秋，所以我现在一片黄色的枫叶作为画面的主视觉，画面整体体现秋天的感觉，一片黄灿灿的画面，给人感觉就像是秋天到了，画面元素简约，只选择了一片枫叶加上它的投影，体现空间感，主题文案排版在枫叶上，与枫叶融为一体，这样用户得分第一视觉就会被主图吸引，同时看到主题相关文案，下面的其它文案通过从|秋|字垂落的竖线，分别右对齐以及左对齐，显得画面规整
第一张海报的日期排版就是采用普通常规的排版方式，我们会发现这样的日期排版方式，在整个画面中会显得有点僵硬，并且左右两边不对称的关系，会显得右边偏轻，使画面的平衡感缺失，也正是日期的排版太粗糙的原因，导致整张海报的精细度大减。
样机效果
我们保持其它元素以及排版都一致，只改变日期的排版方式，我们就会发现右边的海报整体给人的感觉更精美，平衡感更强烈，所以我们在做设计的时候不要忽略每一个点。将每一个点都细心的设计，这样的作品才会更耐看。
版式设计是我们设计中最基本的知识，我们在做设计的时候，通常会注意主题主图的排版，而经常会忽略哪些不是很重要的信息，但是我们在分析文案信息的时候，也需要考虑整体设计的目的，有时候日期信息也是非常重要的信息，所以我们在做排版的时候，也需要认真考虑日期与整体需求的关系，并且日期排版风格也会影响整体的气质。
案例分享
案例实操
总结
文章来源：优设 作者：设计小余
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
不管是平面设计、品牌设计，还是UI设计，配色都是一个基础，决定着作品的视觉效果。这篇文章就从色相、纯度、明度（色彩的三大属性）三个角度，展开谈谈色彩的搭配。
很多时候，设计师需要在公开场合借用幻灯片演示设计作品，或者给客户展示的设计方案，又或者是需要在文章当中，展示作品，选取配图。如果你希望你的展示和演讲更加具有吸引力，那么可能需要针对这些视觉素材进行处理，让你的观众或者读者，被内容吸引，被信息打动，能够 Get 到你所要表达的东西。
今天这篇文章，梳理了 20 个对关于幻灯片/演示文稿的处理技巧和经验总结，希望能够帮到你。
在创建任何用来展示的幻灯片之时， 你首先要搞清楚一个问题——你的目标或者目的是什么。明确了这一点，才能做好下一步的设计。
除了了解自己的目标，你还要搞清楚你的观众或者你的受众是做什么，有什么特征，对什么感兴趣，会具备什么样的动机，这样你在设计的时候，才能够更加具有针对性。如果是甲方，那么甲方是什么样的人？你是否要提供一个具有代入感的故事，在最后再进行报价是否合适？搞清楚观众，后面的问题你就有答案了。
如果你的幻灯片准备得过长，那么最好大概每20分钟就需要中断，适当休息一下，或者调整演示内容的媒体形态，让你的听众可以借此修整，并重新集中注意力。
讲故事能够更好地同用户建立联系，保持用户的参与感，集中注意力。如果用户无法集中注意力，那么你的展示和设计做得再好都没有用。你可以参考一些常见的、有效的叙事框架，拿捏好关键的因素：
关键角色：客户、用户、组织、团队等；
核心问题：挑战、痛点、风险等；
框架指南：产品、公司、服务等；
完整历程：解决问题的愿景、具体执行计划等；
抵达成功：光明的未来、最终的成就等；
这意味着，如果你的幻灯片当中的内容，下面的观看者无法在 8 秒内消化，那么它可能就失去效果，并且用户会快速分心。
幻灯片要简短，不要让它像书本一样堆满信息，你应该提供最快速有效的简短展示，减少文字，增加辅助的视觉效果，帮助用户集中注意力。
如果你的文本内容无法进一步增减，那么你需要做的就是梳理出它的层级关系，让字体的层级来辅助观看者更快 Get 到其中的信息。我们习惯于快速扫视，而不是逐字阅读。
凸显重要内容，控制好字号大小，排版结构，让观看者能够清晰阅读内容。过于鲜艳的色彩会产生视觉频闪，对比度过低会让可读性极差。
在实际的展示的过程中，展示者在电脑上看到的，和最终在大屏幕上演示的内容是不一样。演示给下面观众的内容一定要简约直观，而更多的辅助信息只需要显示在展示者自己的电脑上，作为提示即可。
提取最重要的信息点，使用更大的展示性的字体来呈现，这是有助于让这些信息脱颖而出的，而不是简单地、没有筛选地铺陈出来。
信息图和简单的数据展示有着极大的差别，信息图所展示的信息更易于被观看者理解和吸收，使用信息图还能让整个展示过程更加视觉化、富有创意。
我经常会听到这样的要求：「这套幻灯片只能有7个页面，同时我们不能删除任何内容。」
千万不要将内容塞到固定数量的幻灯片当中，那是没有任何意义的。一套用来演示的幻灯片的数量应该是可以增删的，它们的数量取决于你所要展示内容的多少，以及呈现的方式。对于绝大多数的展示和演讲而言，20~30 张幻灯片是一个合理的数量。
留白是制作幻灯片时最容易被忽略的元素，通常而言，我在修改幻灯片的时候，将留白的空间放大三倍，视觉上的呼吸感就正正好好。
好的图片素材，通常会有着相对充沛的感情和自然的叙事。在你的幻灯片当中，需要采用更加富有真实感的照片，以营造真实的叙事感。不幸的是，这种设计知易行难，绝大多数的图库所提供的照片都缺乏这种应有的真实感。当然， Unsplash.com 所提供的照片，相对而言会好一些，而且是免费的。
影响幻灯片视觉样式的因素有很多，主题、受众、品牌等等等等，都会有影响。但是不论情况如何，你都应该让整个幻灯片所采用的字体、图标、配色、插画的样式始终保持一致。其中，最常用的方法是定义整个幻灯片的模板，来协助你保持一致性。
不要把幻灯片用信息全部填满，可以在其中插入一些可以帮助观看者「中场休息」的幻灯片，它可以起到过渡作用，也可以帮助观看者不用一直紧绷着情绪。
转场动效和动画可能会成就你的整场演示，也可能让它沦为一场灾难。我的建议是，尽量让动画和动效微妙一点，让它们紧贴内容，对信息提供支撑，而不是喧宾夺主。
对于较长且复杂的演示，让观众看到进度条，了解整个演示的进程是非常有必要的，当他们感受到演示的进程，就能体会到掌控感和安全感。
做好幻灯片之后，一定要自己排练一下整个过程，走一遍之后会让你对于整个演示过程中，哪里有问题，哪里要改进有更清晰的认知。借助排练来排查问题，迭代展示，非常有必要。
当然，设计幻灯片和设计 APP、网页是截然不同的，但是设计思维层面上，这几个领域确实完全相通的。你可以借用各种设计规则和方法来将幻灯片设计得更加合理优秀。
文章来源：优设 作者：Taras Bakusevych
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
「空间陈列法」是说先构建一个空间，然后将主体元素用合适的形式陈列出来。
这是随着手机兴起而真正流行起来的一招，因为PC时代都是宽大的横屏设计，适合展现视野开阔的大场面，像大漠、海边等等，而「空间陈列」作为小场景，在PC端就显得不大气，因此使用较少；而手机端却刚好相反，瘦长竖屏就适合表现长焦特写的小场景，像微距下的花鸟鱼虫等等，这时「空间陈列」就用的恰到好处。
如图所示，同样的产品展示图，在PC端就显得单薄，版面空缺，整体不饱满；而在手机端则用的刚刚好，确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱，所以在手机时代，空间陈列图才会呈现井喷式增长。
其实合成、三维和摄影都可以实现「空间陈列」，但本书还是以合成为主，而合成的难点就在于如何将产品和空间进行自然融合，不能有违和感。
若想合的天衣无缝，第一步就是要做到「透视准确」，而透视作为构图中的重要知识点，可以说是无处不在，在前面的章节里也多次提及。我们只有掌握透视的变化规律，才能准确表现出元素的空间关系，如果透视不对，那空间将会失真，下面就来详细讲讲这个理性知识点——透视。
日常生活中，当我们看周围事物时，会有远近、高低、长短、宽窄等不同，这是由于距离、方位等差异在视觉中呈现的不同反映，这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感，它广泛用于绘画、建筑、环艺、设计等诸多领域，而常见的透视共3类：空气透视、散点透视和焦点透视，这3类的侧重点各有不同。
空气透视又称「色彩透视」，由于空气介质的存在（雨、雪、雾、烟等），使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象，例如下方海报中的「烟雨蒙蒙」，这种近实远虚感就是典型的空气透视，随着镜头拉远，山川也变得越来越模糊。
散点透视则是中国画特有的一种透视类型，例如下方的《清明上河图》就是这类透视的代表作，在这五米长的画卷中，很难找出画家的具体观察位置，好似在移动中作画，每到一处画一部分，最后拼接起来，这种视点不断移动的画法就是散点透视，散点透视适合表现景色的波澜壮阔，重在写意，体现一种气势和意境。
而焦点透视才是本文重点，它是透视学中的核心理论，也是西方绘画所遵循的透视原则，最早研究透视就是从这里开始，如果散点透视是「写意」，那焦点透视则「写实」，一切都以客观还原为准。
例如名画《最后的晚餐》，所有视线都汇聚一点（称为灭点），营造出一种立体空间感，这些就像自己身处画面中央所看到的逼真景象。
而我们在设计中常说的透视也都指「焦点透视」，这是我们需要掌握的重中之重。记得高中学习素描时，老师就说画静物要「近大远小」，其实就是对焦点透视最为形象的描述，例如草地上的奶牛，离我们越近就越大，越远则越小，正是这种近大远小的透视变化才使场景有了空间和层次。
在介绍焦点透视前，我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼（称为视点）在观察事物时视线之间所形成的角度。
如下图所示，其实就是人眼观看角度的变化，常见有3种：当我们平视前方时就是「平视视角」；仰头看时则是「仰视视角」；低头看时便是「俯视视角」。
其中平视时人眼和物体形成的假想连线称为「水平视线」，这是判断视角高低的参考线。
当我们将产品放入空间时，就要根据陈列形式选择合适视角，从下方的示意图中能看到，三种视角给人的感受都不相同：
而上图的仰视和俯视都属于小视角，即产品视线和水平视线的夹角较小，这是设计中的常见视角，大概就是把头微微抬起或低下时看到的场景，这时画面最自然也最舒服。反之若视角过大，即头抬的很高或压的很低时，这时产品的形变就很夸张，显得刻意、不舒服。
说完3种视角，现在正式讲解焦点透视，一般根据物体灭点的数量不同，焦点透视又分3种：平行透视（一点透视）、成角透视（两点透视）和斜角透视（三点透视），它们都有各自的透视效果和适用范围，但若铺开讲会很复杂，因此下面就结合「空间陈列」进行介绍。
用立方体简单说明，就是有一面与画面平行，这时物体的厚度边线若向内延伸，最后都会汇聚到1个点上，因此又称「一点透视」。这是最简单也最易掌握的一种透视形式，其中汇聚点称为「灭点」，而灭点所在的那条线则是「视平线」，即与人眼等高的一条水平线。
再来看看平行透视在生活中的场景呈现，如图所示，将各种景物进行前后连线并延伸，最后都是汇到一点才消失。平行透视适合表现场景纵深，给人一种正式感和平和感。
电商中的产品展示也一样，例如下方示意图中，不管哪种视角，产品和立方体都是正对观众，让人觉得摆放角度正正好。
总体来说平行透视只有1个灭点，变化并不多，视觉表现单一，没有太多的空间变化，基本就是从正面来表现整个场景，因此上手简单，只要确保前后连线都汇聚一点即可，这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感，显得很平，此时可尝试俯视视角或者强化背景的空间纵深。
下面展示平行透视在3种视角下的应用案例，注意观察不同视角下的产品呈现和透视变化，虽然微妙，但每种视角确实给人不一样的视觉感受。
平行平视
当画面为平行透视和平视视角时，这时的观察位置很正。如下图所示，空间和产品都显得有些平整，虽然场景的立体感较弱，但视觉舒服协调，表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处，即是说人眼此时正对前方物体的中心，这样才会有平视效果。
平行仰视
当画面为仰视时，一般视角都不会太大，微微仰视即可，这样视觉才舒服。如下图所示，其实和平视比起来，小角度仰视的透视变化并不明显，没有夸张形变，但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置，这时人眼明显是从下往上看。
平行俯视
如果觉得画面的层次感和立体感不够，那就尝试下俯视视角，如下图所示，由于俯视时我们能同时看到物体的顶面和正面，这样就能表现物体的厚度，立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置，这时人眼就是从上往下看，但同样属于小角度俯视。
平行透视的俯视还有一种特殊情形——正俯视，即视角为90°的俯视，这时我们是从物体的正上方低头往下看，如下图所示，当产品平放桌面时，正俯视能清晰看到产品的全貌。
在空间陈列中这是一种常见视角，上手简单，展现清晰。例如下方案例中，俯视下的产品摆放非常灵活，根据构图需求可以工整 ① 也可以随意 ② ，并且产品多以正面展现为主，整体直观、舒服。
以上都是产品的陈列案例，其实正俯视有时也会用于场景呈现中，如下图所示，视点位于场景的正上方，有点类似无人机的俯瞰拍摄，这种看似「刁钻」的视角能给画面带来独特的戏剧效果，令人印象深刻。
空间平行透视
除了3种视角，这里还要介绍一种平行透视的常见形式——空间平行透视，这种形式即画面的正前方有个类似方盒的纵深空间，而人物或产品就放置在空间里。
如图所示，该形式也有视角的3种变化，但为了确保视觉的自然舒服，仰视和俯视也都是小角度的上下摆动，所以产品的透视变化并不明显，场景呈现也没有很夸张。
为何要将该形式单独列出？因为它非常适合手机端的竖屏构图。
手机不像PC，无法通过宽屏来表现视野开阔的大场面，手机屏更适合长焦特写的小场景，但这样有时就会显得左右拥挤不透气，这时「空间平行透视」就刚好取长补短，通过「深度」刻画将狭窄空间的纵深感体现出来，最终使观者视线在前后维度上有了延伸和舒展。
该形式正是利用平行透视的纵深性，才缓解了手机屏的拥挤感。下面分视角列举案例，要注意不管平视、仰视还是俯视，空间里的所有元素最后都要汇聚一点，这样透视才合理，纵深效果也最好。
3种视角中，空间平视最常见，因为这种方方正正的空间展示最适合手机的竖屏构图，看着最舒服，上手也简单，易于搭建。在平视下，由于没有视角的高低变化，空间基本位于人眼的正前方，无任何偏移，摆放角度非常正，构图给人一种稳定感，元素也没有夸张形变，组合方便，真实自然。
对于「空间平行透视」，「深度」刻画很关键，我们要根据版面构图选择合适的深浅。例如下方案例中：① ② 的深度浅，空间相对封闭，适合展现小空间，给人温馨感和趣味性；而 ③ 的深度深，空间开阔，适合展现大空间，这样能让视线更舒展，画面更透气。
在仰视下，我们是抬头向上看，这时空间显得高大，给人强烈的气势感。如下图所示，视平线贴近地面，像是我们蹲着向上看，这种仰望视角，建筑和人物都很高大，再加上强烈的纵深感，虽然空间左右依然狭窄，但上下和前后维度却变的非常开阔，画面通透。
空间仰视能渲染氛围，提升场景的戏剧效果，突出视觉冲击力，但要注意仰视视角不能太大，否则夸张的仰视效果反而给人一种压抑感。
在俯视下，视平线处于空间中心的上方，类似我们站在高处往下看，如下图所示，这时空间显得立体，远近的各类元素也能得到清晰展现，层次分明。
俯视适合展现空间的全局观，也让各物体有着丰富的体积感。除非有特殊的构图需求，不然和仰视一样，俯视视角不能过大，否则俯视就变成俯瞰，会产生遥远的距离感，空间也压缩的厉害，进而导致形变和失真。
还是拿立方体举例，就是物体与画面形成一定夹角，这时物体的所有边线分别向各自方向进行延伸，最后会在视平线上形成一左一右2个灭点，因此又称「两点透视」。这类透视最接近我们日常的观察角度，即是说大部分时候，我们看到的物体都属于成角透视。
虽然成角透视只比平行透视多了1个灭点，但2个灭点的位置却很灵活，这样空间的透视变化也更加丰富。
例如下方是我们经常看到的景象，虽然都是典型的成角透视，但 ① 是2个灭点都在画面外，这时建筑给人的感觉结构平稳，立体感强，侧重写实；而 ② 则是1个灭点在画面内，另1个在画面外，这时空间右侧的透视形变较大，产生纵深感，整个场景更有张力和冲击。
其实还有第3种情形是2个灭点都在画面内，但由于空间会产生夸张形变和失真，因此总体少见，不再举例说明。
再看看成角透视下的产品展示效果，如下图所示，不同于单面展示为主的平行透视，成角透视则以展示物体的两面为主，这样立体感更强，构图也更稳定。注意在成角透视中，画面所有的竖向边线都是平行，不会产生灭点。
相比平行透视，成角透视在表现上更复杂一些，一般都以2灭点在画面外的情形为主，这时透视最舒服。注意要想画面只产生2个灭点，那当中的所有元素都需排列整齐，这也是成角透视的常用做法，此时画面会显得整齐统一。下面列举3种视角下的电商案例，其中以仰视和俯视最为常见。
平视下的成角透视相对少见，因为使用成角透视就是为了凸显物体的立体感，但平视由于视角很正，恰恰就会显得立体感较弱，这时2种效果会有矛盾，影响场景的协调性。例如下方的2个案例中，产品看着就有些平整，和方形盒子以及立方体稍显冲突，但整体视觉真实平和，没有形变。
仰视下的成角透视就显得刚刚好，如下图所示，所有元素均用2个立面展示，加上透视形变，这时空间的立体感强，产品和立方体也都有明显的体积感，视觉平稳、饱满，而且还能体现产品形象的高大，凸显价值感。
注意2个案例中，视平线上都只有2个灭点，这是因为产品和立方体的排列都很整齐，反之若无序排列，就会产生多个灭点，这样画面会显凌乱，视觉不舒服，所以在表现成角透视时，尽量确保所有元素都能整齐排列。
在成角透视中，俯视视角最常见。因为该视角下的物体可以展现3个面，能进一步强化元素的立体感和方位感，如图所示，物体的空间关系明显，层次分明，构图也平稳。
一般成角俯视适合小场景陈列（若是大场景则垂直方向会发生严重形变，这就是后面要讲的「斜角透视」），刚好这是手机屏的擅长，小空间配上小角度俯视会给人一种亲切感，类似长焦镜头的特写画面，很好的拉近了观者的心理距离，因此属于手机端的常用构图。
空间成角透视
成角透视的优势在于画面立体、稳定和写实，这些优势刚好适合空间的立体呈现，如下图所示，成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ，类似我们站在空间侧面看整体，此时空间立体、饱满，结构有张力。
但由于成角透视都是在画面两端形成灭点，所以该透视下的空间更适合横构图，但手机屏却是竖构图，对于横向拥挤的竖长屏，成角透视就会有些施展不开，左右狭窄，无法像横版那样开阔的展现空间，也没有平行透视那样看着规整，因此使用较少。
物体与画面存在一定夹角，并且在2点透视的基础上，再加入了高度变化，这样垂直方向的连线会向上或者向下汇聚，最终画面形成3个灭点，又称「三点透视」。相比成角透视，斜角透视其实就是让本没有交集的竖线有了交集，这样垂直方向就有了强烈的汇聚感。
斜角透视的形变夸张，常用于大型物体的仰视或高处俯瞰，类似广角拍摄。
如下图所示，该透视能表现出建筑或空间的宏大感，并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小，给人一种压迫感，也让场景有着极强冲击力，同时带来了更加刺激的视觉感受。
其实只要观者在场景中显得很小，这时看到的画面就会产生斜角透视，例如当我们仰望高楼时，相对高楼而言，渺小的我们就会看到斜角透视。
但如果产品展示采用斜角透视时，就会有一种强烈的不真实感，因为相对产品来说，我们并不渺小，所以日常是不会看到这样的场景，这种场景更像是「昆虫视角」，如图所示，斜角透视下，虽然画面不真实，但会有种特别的戏剧效果。
另外斜角透视没有平视视角，因为平视物体的竖向边线依然平行，不会在垂直方向产生第3个灭点，因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时，才会看到斜角透视。
这种形变强烈的夸张透视虽然生活中相对少见，但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗？其中一个方向就是使用斜角透视。
这种透视可以体现物体的巨大（仰视）或者场景的宏大（俯视），正是这样一种不真实也不自然的视觉感受，反倒给人一种强烈的气势和冲击，画面极具张力的构图往往能脱颖而出，并在第一时间抓人眼球，吸引注意，所以成角透视特别适合大促主题的场景搭建和氛围营造，下面分视角举例。
斜角仰视
视能让物体显得高大，而斜角仰视则让物体显得「巨大」。如图所示，2个案例中的产品都十分「巨大」，通过这样一种「刁钻」视角和夸张手法渲染出了产品气势，使产品显得分量十足，同时也提升了视觉冲击力，整个场景都变的大气。其中 ① 由于版面有限，有个灭点没有标示出来。
斜角俯视
当我们站在一个很高的地方俯瞰周围，或者用无人机在高空航拍，这时看到的景象就是斜角俯视。如图所示，尽管竖构图并不适合展现辽阔的大场面，但在斜角俯视的帮助下，2个案例依然体现了场景的宏大，视觉冲击强，这种居高临下感使人视野开阔。
平行斜角透视
斜角透视中还有一种特殊情形——平行斜角透视，就是当空间或产品的一面与画面平行时，此时不管透视多强烈，画面也只有2个灭点。
如图所示，当立方体的一面正对视点时，侧面便从2个主立面减为了1个，这时除了垂直方向的1个灭点外，原本视平线上的2个也就成了1个，虽然只剩2灭点，但本质仍属于透视强烈的斜角透视。
既然是与画面平行，那和平行透视有何区别？
下面看张空间对比图，能看到2者的形变差异还是相当大：左图为平行透视，像是我们在看一个小方盒，亲切、自然、真实；而右图则是平行斜角透视，更像是我们在仰望一个巨大空间的入口，充满戏剧性，并有压迫感。
其实对于手机端，「平行斜角透视」才是斜角透视中的常用形式，因为它的摆放角度很正，这种正面观察很适合手机端的竖屏构图，而且前后的纵深刻画也能缓解版面的左右拥挤，另外画面纵向的汇聚感还能迅速吸引注意，给人一种巨大冲击力和强烈氛围感，其中仰视比俯视更加常见。
平行斜角仰视
近几年这类透视越来越多见，因为它既适合竖构图，也能提升画面的形式感和表现力，非常利于促销主题的氛围打造。
如图所示，整个画面就像是我们站在宏大场景的正中央仰望时看到的景象，各元素摆放很正，虽有压迫感，但空间和产品都显得非常高大，张力十足，能让用户牢牢聚焦，同时也产生了强烈冲击力，更易在用户脑海中形成记忆。
平行斜角俯视
在这类透视下我们会感觉自己拥有高高在上的「上帝视角」，元素摆放同样很正，视野辽阔，场景宏大。但过大的俯视视角会对场景进行一定压缩，再加上俯瞰产生的遥远距离感，这样就显得元素有些「小气」，无法体现仰视下的高大，因此画面的刺激感没那么强烈，总体相对少见。
以上便是焦点透视的3种类型，我们再来回顾下各自的使用情形，如下图所示，这是一张3种透视的转换示意图，都是仰视视角，旁边小人则是观察者的大小示意：
希望通过这张示意图能帮大家更好理解什么时候该用哪种透视，总之小场景搭建一般以「平行透视」和「成角透视」为主，而恢弘的大场景则以「斜角透视」为主。
当然现实里的透视远不会这么单一，根据物体不同的摆放位置以及不同的观测距离，很多时候同一画面也会存在多种透视，例如平行透视和成角透视就经常组合出现。
电商设计也一样，例如下方案例中，整个空间是平行透视，而里面的盒子则是成角透视，这时视平线上会有3个灭点，其实若产品的摆放再凌乱些，还会出现更多灭点，但这种无序组合会让空间塑造变的复杂，看着也不规整，因此并不推荐。
但要注意不管画面的透视多复杂，当中的视平线却只能有1条，并且无论水平方向有多少个灭点，最后也都会落在视平线上。
除了以上3种透视外，其实还有4点透视（超广角透视）、5点透视（鱼眼透视）等等，但都过于复杂，用的也很少，这里就不做展开。对于电商里的「空间陈列」，3种透视已够用，它是我们塑造空间的基础，如果一开始的透视错了，即便配色、光影做的再出彩那也无用。
总有人说透视难掌握，其实只要我们在生活中多观察、多留意身边物体的透视变化和规律，及时总结，那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达，所以透视虽要遵循，但切忌生搬硬套，视觉协调即可。
讲完了焦点透视，我们知道了空间塑造的基本原则，下面就来说说都有哪些陈列场景。
相对PC来说，手机端受屏幕所限，陈列场景其实没那么复杂，核心是要先构建一个空间，然后让产品以合适的视角及透视在空间里呈现出来，而这个空间场景则要和主题氛围、产品气质都高度匹配。
一般来说，手机端常用的陈列场景有4类：盒子陈列、台面陈列、自然陈列以及舞台陈列，选择哪类则要看哪个场景对产品的烘托效果最好。
在介绍每个场景前，我先说说关于产品组合的2原则，因为很多时候在空间摆放的产品数量较多，这时它们的组合形式就变的尤其重要，稍不注意就会显得画面杂乱无章，不够协调，而且凌乱的摆放也会降低产品的品质感，缺少吸引力。关于组合原则，核心有2点：大小合理以及三角构图。
大小合理
如果将多个产品摆一起，则要确保它们之间的相对大小符合现实中的真实差异，现实中尺寸大的产品就要相对大些，而尺寸小的产品就要相对小一点，这样才会真实并经得起推敲。
而有些设计师在组合产品时，也不管大小的真实差异，放进版面后就很随意的放大或缩小，最后出来的组合要不就大小一样，要不就比例失真，这些都会给用户一种强烈的不协调感和不真实感。
下面再看一组对比图，明显大小一样的左图会有不适感，也缺少层次；而大小合理的右图则更有美感也更舒服。
其实大小合理的最终目的是希望整体结构错落有致，就像右图一样，这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择，那我们就选择一些尺寸差异较大的产品，尽量避免出现大小差不多的情况。
当然如果必须陈列大小一样的产品，那也可以通过透视或者辅助元素来改善，例如空间里的近大远小、立方体加高都能改变高度一样的情形。
三角构图
当我们选好不同大小的产品后，就要注意它们的组合形式，千万不能乱堆一气，不同的摆放会形成不同结构，而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性，因此当产品采用正三角构图时，会让人觉得版面平稳、视觉舒服。
如图所示，所谓三角构图，其实就是将尺寸大的产品放中间，而尺寸小的产品放两边，这样不但构图稳定，而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式，而本节展示的所有案例中，大部分也都是三角构图。
明确了产品的组合原则，知道了如何陈列才舒服，下面就正式讲讲空间陈列的4类场景。
盒子陈列
「盒子陈列」就是在盒子里面放产品，而盒子多以礼盒为主，使用场景和主题相对单一，基本用于送礼之意的专题页。创意虽然普通，但却不易出错，是种相对安全的表现方式。当然若能在盒里加些小心思，画面也会很出彩，像我之前看过一个新年Banner，就是礼盒里装着一个大家庭在吃年夜饭的温馨场景，这样的新组合便让人眼前一亮。
另外若能提升礼盒刻画的精致度，那画面也会有不错的设计感。而盒子外形也不只有方形，常用的还有圆形和异形。观察视角则以小角度俯视居多，因为这个视角最接近我们日常看礼盒的真实情形，盒内产品在俯视下能看的一清二楚，展现也立体。
盒子陈列的难点在于当盒内要摆放很多产品时，如何能让产品真实、自然的呈现，这需要我们既注意摆放的合理性，也能准确表现透视，还要刻画出产品的明暗变化，总之只有把握好产品的空间感、立体感以及光影感，画面才会舒服协调。
方形盒是最常用的盒子类型，毕竟也是生活中最常用的礼盒外形，结构感强而且易表现。如下图所示，礼盒都是成角透视，且左右灭点都在画面之外，这样结构最稳定，立体感也强。注意盒里的产品呈现，特别是俯视视角下，产品越多越要注意它们是否协调统一，透视、光影等细节一个都不能少，把控不到位就会显得凌乱，画面别扭。
圆形盒比较少见，因为和立方体比起来，圆柱体的透视没那么强烈，结构感偏弱，但圆润的外形能使画面变的柔和，给人一种亲和力和温馨感，如图所示，由于圆形盒没有明显块面，所以不管透视还是光影，刻画起来都相对简单。
异形盒是指外形为不规则形状的盒子，总体也很少见，但易出彩。形状用的好便能打破「盒子陈列」的常规感，使画面变的新颖有创意。
例如下方案例中，不管是心形、猫头轮廓还是圣诞树，都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角，其实除了小角度俯视外，这种视角也很常见，因为该视角下的产品陈列清晰完整，盒子外形也能直观显示，的展现了其外形的特别之处。
台面陈列
在空间陈列的4类场景中，「台面陈列」用的最多，适用范围也最广，可以说电商中的大部分主题和产品都能使用，算是一种真正白搭的表现方式。
「台面陈列」就是在空间里搭建一个「台面」，然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主，元素形变不能太大，因此画面常用平行透视和成角透视，视角则很灵活，跟着构图走，3种（平视、俯视、仰视）都有。「台面陈列」上手简单，场景多变，其中的关键元素——台面需要根据主题、场景进行灵活变化，常见有2类：桌面和几何体。
桌面很好理解，就是桌子顶部的陈列面，所有产品都放置其上。由于桌子是家里常见家具之一，因此桌面陈列往往能传递一种「家」的温暖和温馨。
可能有人觉得「桌面」形式有些单一，其实远没那么简单，我们不要固化思维，要能灵活变化桌子的样式和装饰，例如方桌还是圆桌？木桌还是大理石桌？光面还是铺桌布？这些都是可变量，再加上视角和周围环境的变化，总之形式可以很丰富。
如图所示，桌面陈列尤其适合各类美食的组合呈现，这时整个场景贴近生活，颇有带入感。
就是将各种几何形体作为陈列产品的台面，几何体相对抽象，表现场景更多元，因此比具象「桌面」更加常用。
如图所示，几何体一般都是组合出现，特别适合多产品陈列，简约大方，能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感，总之是一种 「上手简单、易出效果」的表现方式。
常用几何体有「立方体」和「圆柱体」，它们适合陈列，高度调节方便，使用灵活。
如下图所示，整体表现并不复杂，就是将各种产品放在几何体上。但作为画面的核心元素，这时几何体的形态、排列、视角和透视就变的非常重要，我们要根据创意需求和产品气质选择最合适的展现方式，而这些展现本身就有不错的形式感。
几何体陈列既能营造空间关系和简约气质，也能让用户聚焦产品本身，因为它的外形简单，不抢产品，不像一些复杂元素或场景，虽然视觉丰富但最后却让产品淹没其中，这样就本末倒置。
自然陈列
「自然陈列」需要先创建一个合适的自然环境，然后再将产品以合适方式融入其中。相对其他场景，自然环境显然复杂一些，呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄，为了风格统一，自然环境会偏向写实风格，这样2者结合才协调。
从下方案例能看到，「自然陈列」常用于季节感受或者产地溯源等主题，画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多，呈现复杂，这就需要我们具备优秀的整合能力。
对于「自然」塑造，视角以平视和小角度俯视居多，但画面由于没有太多的几何型物体，所以透视没那么严谨，核心是注意近、中、远景的层次区分，还有光影的合理添加。如果这些把控不到位，就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面，最终沦为各种素材的乱堆一气。
以上列举的都是以花草树木为主的自然环境，确实绿色场景在「自然陈列」中用的也是最多，但除了绿色场景外，有时也会用到其他环境。如下图所示，像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景，特别是夏季主题会经常用到。
舞台陈列
最后一类「舞台陈列」常用于大促主题的气氛营造，这类场景不挑类目，任何产品放在「舞台」上，灯光一打，色彩再斑斓些，都能营造出热闹的促销氛围。
如图所示，舞台外形以圆形居多，因为圆形的透视感较弱，构图灵活，而且也符合大家对舞台的第一印象。舞台视角则很灵活，3种均很常见，核心是和产品视角保持一致。
关于「舞台」塑造，还有2处需要注意的地方：
舞台外形除了最常用的「圆形」外，还有半圆形、方形和六边形等等；舞台造型也可以很丰富，并不局限于常规的表演舞台，各种造型都可尝试，例如上方左四图就是现代感十足的三维舞台，总之我们要根据创意和风格塑造相匹配的陈列舞台。
另外就是灯光运用，可以说这是「舞台陈列」和其他场景的最大区别，但灯光也不是越多越好，太多反而显得眼花缭乱，其实能渲染出绚烂气氛即可。而有光就有影，在灯光照射下，产品一定要有准确的光影呼应，这样才不会显得突兀。例如上方案例中，仔细观察灯光下的产品呈现，能看到产品表面都产生了被灯光照射后的色彩、明暗等变化，这些细节刻画才让画面更真实，融合更自然。
本次案例会用胶原蛋白口服液作主体元素，然后用这4类场景（盒子、台面、自然、舞台）来设计4张不同视角、不同风格的Banner，让大家看看在不同场景下，如何将产品融入其中。先展示案例会用到的3种产品视角， 下方案例会根据不同的场景视角选择对应素材。
「空间陈列法」的内容量挺大，主要分成了「焦点透视」和「陈列场景」2大部分来介绍，其中焦点透视是立体「空间」的塑造基础；而陈列场景则是产品「陈列」的具体环境。
常用场景有4类：盒子陈列、台面陈列、自然陈列和舞台陈列，每种陈列都有各自适用的主题和氛围：「盒子」常用于温馨的送礼主题；「台面」则能根据不同主题灵活应变，属于百搭场景；而「自然」则适合季节或者溯源主题，体现天然清新感；最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景，都要确保产品和空间的视角、透视相一致，这样场景才会真实协调。另外多产品陈列时，还要注意它们之间的大小比例以及摆放结构，其中三角结构最常用。总之在手机时代，「空间陈列」是一种真正适合小屏竖构图的表现方式。
文章来源：优设 作者：贤辈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com