扫描关注网站建设微信公众账号

微信二维码

当前位置:济南网站优化 > 技术洞察 > 观点 > 网站pc/wap端排版结构要求及页面布局方法

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

时间:2020-03-27•16:02:43文章来源:网站排版布局文章作者:网站结构设计

  网站不管是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的布局。

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

上一篇:合理设置标题影响推广吗?网站标题撰写原则注意点

下一篇:对于seo体验怎样做到极致?

文章关键词
网页布局
页面布局
网站布局
网站排版