如何做好网页排版设计

新闻 2023-03-25编辑：深圳网站建设阅读（）标签： 排版 如何做好

深圳网站建设公司 帮助企业提升网站形象,彰显公司实力,PC+手机+微信+小程序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您提供1对1的专属VIP服务

　　我不是科班出身，每次做网页排版设计都很头痛，谁能救救我!——不着急，只要你掌握了四个要领，排版从此不是难事!甚至你会爱上干这活!

　　1、视线顺序

　　“阅读引导线”引导阅读顺序，使版面易读。

　　无论是什么样的版面，设置文本与图象时，最需要考虑的就是阅读引导线。一般，在竖排段落里阅读顺序为右上到左下，而在横排段落里则是由左上到右下。在视线顺序的起点处可以设计一些引人注目的文案，例如，大小标题等元素就可以实现这样的效果。

　　2、节奏与平衡

　　与视觉顺序一样重要的，就是节奏与平衡;过于严谨的整齐的版面，容易给人单调死板的印象。

　　“井然有序的版面稍微灵活的错开元素位置能让页面更加有趣”

　　“利用大小不同的元素，使沉闷的页面富有节奏感”

　　可以在图像的使用，大小尺寸/上下左右位置等上面下功夫，这些能够为版面增加强弱对比。

　　如果版面的排列顺序很明确，那么可以有意识的去打破，而且一定要表现出这是有意的。技巧就是，打破常规沉闷时，一定要干脆一些，要么全部采用这种排列顺序，要么全部不采用，千万不要保守。

　　3、留白

　　留白(包含有色背景)并非只是单纯的空白。

　　通常的留白有三种意图

　　1. 留白分割页面

　　“每个区块用空白区分的很开，看起来比较宽松舒适。”

　　2. 留白区分层次

　　“焦点就是标题文本“Hi there”。因为它的字号最大，周边留白最多，所以第一眼看到的就是它。”

　　3.留白活跃版面

　　“图片元素较少时，利用适当的留白，平衡配置元素，使版面动起来。”

　　简洁

　　并不是所有的页面花哨才有效果

　　页面要学会取舍

　　有时即使设计本身不怎么样，但是一个机敏醒目的标题就能够吸引人。

　　一个页面重要的是具体给读者展示你想要表达的内容，并不是让你把全部生平都放上去，页面要切中要点，毕竟浓缩的才是精华。

　　一般来讲，很多高质量的网页界面设计都有一些相似的布局，通过这些有规律的编排设计，可以帮助你在网页设计时达到美观且实用的效果!你可以参考下面这4种设计方案：

　　一、古登堡结构(Gutenberg Rule)

　　所谓Gutenberg Rule就是指当人们浏览一些页面时，大多数人喜欢从左到右或者是从上往下的方式来查看内容。古登堡图表主要是把界面分为四个部分分别为：主视觉区(左上角)、最终视觉区(右下角)、强闲置区(右上角)、弱闲置区(左下角)。这样的一个行为习惯就可以作为你网页设计时的参考标准。

　　主视区(Primary optical area)：....。强闲置区(Strong follow area)：....。弱闲置区(Weak follow area)：....。最终视觉区(Final optical area)：右下方，视觉流程的终点。案例如图：

　　二、Z pattern

　　与古登堡结构相似，这个视觉模型的基本概念也是从左往右，不同的是，Z-Pattern认为网页访客在浏览网页内容时，是按照z字母的形状浏览网页的。在使用Z模式设计时，应遵循以下结构：

　　1.顶部的水平线应该包括醒目的内容和元素，比例logo和导航

　　2.对角线该向用户介绍主要内容。

　　3.一条较低的水平线，可以刺激用户执行某些动作，比如购买、注册、电话、订阅等。

　　案例如图：

　　三、F-Pattern

　　该视觉模型是由知名的网页设计师尼尔森在2006年提出，该模型的概念就是当网页用户访客第一次访问一个网页时，访客会按照F字母的形式阅读内容，因此在做网页界面排版时，你就可以利用这个模型来填充你的网页内容。这个视觉模型可以用于一些文字较多的网页，例如博客、个人作品集网站以及产品介绍介面。

　　案例如图：

　　四、三栏式编排设计

　　一些知名的电商网页有时会选择这个设计方式，这种设计方式能够清晰地展现产品，因为通过三栏分布设计，读者能够在主页面看到你的产品图片以及价格等信息，这样他们点击了解产品的可能性就会很高了。通常来讲，这个网页界面设计包括了三个部分：

　　标题：...侧栏选择：...商品主页面：...。

• 上一章：煮出来的茶为什么是红色,茶水变红是怎么...
• 下一章：网页界面设计技巧，让你的页面瞬间上档...