网站pc/wap端排版结构要求及网页布局方式

来源 | 学神SEO、网络优化SEO运营

ID | anxunitt

网站不管是pc端还是wap端都是讲究层次结构和排版布局的，这个是为用户方便浏览体验的重要操作。在网站制作过程中有两大点是一定要注意的，第一是页面混乱，主次不清，所有东西都引人注目；第二是背景干扰用户浏览。这个是直接干扰用户查看网站的视觉，在用户受到这方面的影响一定大大增高了网站跳出率。

pc端排版布局

1.把页面分割成清晰明确的不同区域，因为可以使用户迅速判断出哪些区域是重点，哪些模块内容不是用户需求。

例如：站点版块不清晰不明确，对用户浏览体验大大降低。

2.创建清晰直观的页面层次结构；越重要越要突出；逻辑相关的内容视觉上也应该相关。

例如：页面层次结构不清晰，相当于页面逻辑不通顺，不符合要求。

3.用嵌套的方式形象地显示从属关系。

例如：站点层级嵌套混乱，让用户找不到对应信息，不符合要求。

pc端布局代码运用：

1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。

2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

table布局和HTML+CSS布局(DIV+CSS)优缺点：

table表格布局：

优点：布局容易、快捷、兼容性好。

缺点：改动不便，需重新调整，工作量大。

DIV+CSS：

优点：布局灵活、改动方便。

缺点：需考虑平台的兼容性，对制作人员技能要求较高。

移动/wap端排版布局

1.页面应注意排版精良，段落分明，合理使用不同字号区分页面的主次信息，图片、视频等多媒体资源的位置及尺寸选择配合页面整体布局，保证页面整体的美观度和用户浏览页面信息的最佳可读性。

例如：站点页面排版差、段落距离不合理影响用户阅读

2.首屏主体内容必须占屏幕的50%以上。并且主体内容应位于手机屏幕的中心位置。

例如：首屏主体内容小于50%，广告等其他内容过多，不符合要求

3.展开全文功能：展开全文的设置必须具有文字标示，且功能实际可用；展开全文功能最多只能出现一次，但不可出现在落地页的首屏内容中（列表页除外）；展开全文与广告等引导性内容要设置一定距离间隔，避免干扰用户操作。

例如：展开功能无文字标示，且与APP调起按钮距离过近，不符合要求

例如：小程序展开全文按钮出现在首屏，不符合要求

4.主体内容应与广告、相关推荐等次要内容板块之间有明显间隔距离或分割线，使用户获取信息时不受任何干扰。

例如：翻页功能键与广告之间无间距，易引发用户误点击，不符合要求

例如：小程序主体内容与广告之间距离过近，不符合要求

5.页面的导航的功能与位置明确，避免用户使用过程中被误导。

pc端布局运用：

1、全适配：响应式布局+流体布局

2、移动端适配：流体布局+少量响应式、基于rem的布局。

注意：留白，这是网站都要考虑的问题。网页要有留白的作用，使整个内容排布得松紧有度，利用留白使页面布局平衡，可以提高网页的视觉效果和艺术感染力。减少页面的干扰；使有用的内容更突出；使页面篇幅较短，无需滚屏。

分享学习

【分享1】

公众号回复“seo”关键词，学习SEO优化知识

【分享2】

教学视频——快速搭建企业站教学视频，想要的站长们，请分享朋友圈（无分组）截图发送到公众号，并回复“搭建网站”关键词。

更多学习资料可添加微信

除非注明，文章均为原创，欢迎转载！转载请注明本文来源，谢谢！（QQ：2279894256、微信公众号：网络优化SEO运营）