1.3.2 耐看的版式
在电商设计中，各个元素信息的排版和布局是否合理直接决定着该设计是否成功。那么如何进行合理的排版和布局呢？要遵循以下4个原则。
1. 对齐
对于设计来说，“对齐”属于一个很基本的原则。我们随手翻阅一下身边的图书、杂志或报纸等，里面几乎所有的图文都会运用到对齐。依照“对齐”原则设计的页面给人稳重、统一和工整的感觉，如图1-24所示。
在日常设计中，对齐具体划分下来有左对齐、右对齐和居中对齐3种方式。其中左对齐和右对齐相对比较容易理解，这里不过多描述，如图1-25所示。
图1-25
居中对齐这种方式主要运用在一些房地产、珠宝产品等的海报设计上，整体给人一种正式、大气和高端的感觉。在排版过程中，主要会选择将文案直接放在产品的上方位置，并利用文案对产品进行适当的遮挡处理，以营造出一前一后的层次感，最后加上一些光效，能提升整个画面的视觉影响力，如图1-26所示。
图1-26
小提示
要注意的是，居中对齐的排版方式并不适合设计新手使用，因为它对画面的布局把控有着比较高的要求。同时，在依照“对齐”原则进行排版时，注意同一张图中只能使用一种对齐方式，避免出现多种对齐方式。
2. 对比
在电商设计中，合理地运用好“对比”可以让页面层次分明，而且能够很好地将页面中的主要信息突显出来，增强页面的视觉效果，如图1-27所示。
图1-27
在日常生活中，对比具体划分下来有虚实对比、冷暖对比、文字大小对比和粗细对比这4种方式。
（1）虚实对比
“近实远虚”是日常生活中的一种视觉现象。在电商设计中，把握好虚实对比的关系可以很好地将产品主体呈现出来，并增强画面的空间感。而想要实现这样的效果，一方面可以通过减少图像的色彩层次，降低图像的纯度来实现，另一方面可以对作为背景的图像进行适当的模糊处理，产生近实远虚的感觉，如图1-28所示。
图1-28
（2）冷暖对比
电商设计中的冷暖对比主要是指色彩的冷暖对比。在进行电商设计时，使用冷暖对比方式进行排版，可以让画面看起来更加活泼，而且具有较强的视觉冲击力，如图1-29所示。
图1-29
（3）文字大小对比
在电商设计中，通过文字大小对比方式进行排版，可以将画面中的主要信息呈现得更加清晰，同时增加画面的层次感，使其看起来更加舒服和合理，如图1-30所示。
图1-30
（4）粗细对比
粗细对比即“刚”与“柔”的对比。在电商设计中，较粗的字体给人强壮、刚劲和稳重的感觉，较细的字体则给人纤细、柔弱和活泼的感觉。在电商设计中，对于主题内容信息，通常建议使用较粗的字体进行排版，而其他的则可以使用较细一些的字体，如图1-31所示。
图1-31
3. 分组
在电商设计中，设计师如果遇到一张产品图文案过多的情况，可以考虑对文案进行分组，将同组的文案摆放在一起，再进行排版。这样做的好处是不仅可以使整个画面富有条理，方便消费者阅读，还会让版面看上去更加美观，如图1-32所示。
图1-32
4. 构图
电商设计中构图有很多种方式，在这里笔者主要列举以下5种。
（1）几何切割
在日常生活中，三角形、正方形、长方形和圆形等几何图形可以组成很多有趣的图形，也很符合现代审美需求。而在电商设计中，适当加入一些几何图形，以斜切或正切的方式处理画面，会让画面看起来更加有动感和节奏感，如图1-33所示。
图1-33
（2）实物变图形
在电商设计中，若是遇到刚好符合设计想法的产品元素，不妨将其制作成图形，然后放到画面当中，不仅可以起到填充画面的作用，让信息表达更明确，还能让画面看起来充满创意，而且更加有艺术感，如图1-34所示。
图1-34
（3）放射表现
在电商设计中，通过放射的方式将画面表现出来，能让画面呈现出较好的立体效果与空间感，同时让视觉焦点更明确，视觉冲击力更强，如图1-35所示。
图1-35
小提示
需要注意的是，放射状排版的文字不适合阅读，因此要特别注意文字排版，同时建议在文字数量较少的情况下使用。
（4）直观场景的有效利用
此种构图方式往往是在内容不多，又要突出个性的页面设计中使用。这时，我们需要尽可能多地往画面上添加元素，同时在添加元素前，最好就定好画面整体的风格，设想并搭建一个框架来承载这些元素。这样处理出的画面不仅能够非常直观地表现出产品信息，而且充满情感，容易引起消费者的关注，如图1-36所示。
图1-36
（5）流程化表现
流程化的构图方式特点是从上往下逐一展示出商品信息，看起来视觉动线非常清晰和明确，且画面生动有趣，如图1-37所示。
图1-37
小提示
在电商设计中，无论采用何种构图方式，都需要以消费者的要求为基准，同时能够简单、明了和有效地向消费者传递商品信息。