网页排版设计与版式知识

传统平面排版的四大原则：

重复：将元素重复运用（包括颜色、形状、材质、字体、空间关系等）以增加画面的条理性和整体性；

对比：避免页面上的元素形态与关系构建过于相似；

对齐：将画面中的元素进行分类以实现页面的组织性与条理性，让视觉单位之间既有独立性又视觉统一；

亲密性：画面上的每一元素都应该与另一个元素存在某种视觉联系，建成清晰的结构；

网页排版设计

中心型排版（视觉聚焦）：

「中心型排版」主要利用视觉中心突出想要表达的主题，一般会将最主要的设计元素放在版面的最中心。利用大家的视觉习惯聚焦视线，突出主题。画面具有稳定感，但具有较强的视觉冲击力。适用于有十分明确的设计主体元素，且主体元素最好自身具备视觉冲击力.；并且无太多文字元素或文字，装饰性大于功能性。

垂直型排版（理性严谨）：

「垂直型排版」是较常规的排版形式，将图片与文字按照比例在垂直方向进行编排设置。水平排列的版面给人稳定、平静的感受，而垂直排列的版面给人律动感。文字与图片在视觉效果下一般会自然形成分割的形态。版面具有稳定性和秩序感，给人以严谨和理性的美。注意在排列文字元素时通过大小与形式上的对比体现信息层级关系，避免信息混乱。

倾斜型排版（动感与活力）：

「倾斜型排版」是通过将设计主体或整体画面倾斜编排，或是在版面中引入斜线划分画面的形式进行排版。具有不稳定的视觉感受但同时极具律动感和活力，是视觉冲击力很强的排版形式。无论是斜切式的版式编排还是利用斜线指向特定物体或方向，都能在版面中起到主导观者视线的作用。倾斜型排版让呆板的画面变得富有动感。注重画面的整体性避免画面过于琐碎凌乱，注意突出重点减弱其他。

曲线型排版（韵律感）：

「曲线型排版」主要是将视觉元素即图片和文字在版面上按照一定曲线形态进行排版，版面具有不稳定性。画面有纵深方向的空间感与韵律节奏感。常见的是S型构图版式。

对称型排版（平衡感与呼应性）：

「对称型排版」画面呈中轴线上下或左右相互平行，排列图形具有呼应性、多相似性。在突出主体且具有画面稳定性的同时，又有变化和冲突感。素材选取要有呼应性或冲突感，排版时注意对比与统一的平衡。

分割型排版（形式感）：

「分割型排版」是将版面分割，利用有形或无形的分割线使画面具有明确的独立性和引导性。画面分割的面积大小与位置对比，可以较明确的体现出版面中各部分信息的主次关系。每个看似独立的部分联系在一起，整体画面不会拥挤也不显单调。适用于需要处理的内容元素多，即图片多、文字多的时候。当素材本身质量参差不齐时旅游网站制作，可使用分割型排版通过裁切图片局部、调整大小等处理扬长避短。

满版型排版（视觉冲击力）：

「满版型排版」 通过大面积的元素平铺或堆叠，用最直观与强烈的视觉刺激来传达主题信息，画面丰富具有感染力。通常有整体满版、细节满版和文字满版三种形式。缺少素材时可采用重复元素的排版方式或将素材变体进行重复排列来占据版面排版。整体给人大方舒展视觉冲击力强的感受。

设计banner的流程：

1.拿到需求

设计需求包含：文案信息（主标题、副标题），要求（如：必须出现什么元素、用什么风格）。不同类目的用户诉求不同，应根据用户的需求来决定版式形式。

2.思维发散

明确设计需求后，根据主题联想，从文案内容中提取关键词，开动大脑做思维发散，筛选提取关键词。

3.数据分析+灵感收集

设计不是千篇一律，也不需要摸着石头过河，而是要有数据的支持，了解用户需求，再根据需求用设计突出用户所在乎的点，才能达到更好的效果。当我们在设计广告banner前，要先思考banner的投放渠道、产品定位等等来分析目标用户的需求人肉搜索，从而让设计更容易被目标用户接受。

根据关键词搜图片，找灵感。会通过关键词搜灵感图片，找到更多的设计方向。

4.沟通修改

与需求方沟通，告知设计方向。多沟通交流，修改不合适之处。

5.输出设计稿

前期的准备工作能帮助我们顺利的输出设计稿。

关注后期数据网站开发，根据设想的目标，以及对平台实际情况的评估，我们可以试试 AB test，以验证我们的设想是否正确。定期汇总测试结果，检验测试方向是否正确，如有问题及时修正。这是一个不断更新迭代的过程。

Tips：

1.注意品牌的认知惯性

酷炫风格是更适合数码类产品， 快餐类大多使用精美的食物实拍等。

2.文案越精炼越好

字少点击率远比字数高的多，毕竟字数越多识别成本越高，另外标题字数在 6-8 个字之间点击率是最稳定的。

我们要做到文案尽量简洁通俗、文案内容的行数尽量控制在三行以内，确保可读性；在设计上，我们不仅要做到舒服、显眼，还要有信息层级，合理引导用户第一眼的信息内容。

3.情感化设计

好的设计能引起用户注意，而有趣的设计能让用户感到亲切。创意的方式有很多种，能让用户感到有趣的创意才算好的创意。

4.促销banner引导明确

除了情感上的设计外，大多数banner广告设计也会给用户以急迫感，比如在按钮文案上的设计从「点击购买」到「马上购买」再到「立即抢购」，这种急迫感层层递进，促使用户点击成交。

（郑重声明：本文版权归原作者新贝学院小贝所有，转载文章仅为传播更多信息之目的，如有侵权，请联系我们删除；如作者信息标记有误，请联系我们修改。）