189 8069 5689

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

网站不管是pc端还是wap端都是讲究层次结构和排版布局的,这个是为用户方便浏览体验的重要操作。在网站制作过程中有两大点是一定要注意的,第一是页面混乱,主次不清,所有东西都引人注目;第二是背景干扰用户浏览。这个是直接干扰用户查看网站的视觉,在用户受到这方面的影响一定大大增高了网站跳出率。网站建设★网站设计★网站制作★网页设计-800元全包;企业网络推广☆网站优化☆seo☆关键词排名☆百度快照-2200元全年展示;做网站优化排名-网站建设公司

创新互联建站是一家集网站建设,乌审企业网站建设,乌审品牌网站建设,网站定制,乌审网站建设报价,网络营销,网络优化,乌审网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

pc端排版布局

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

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

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

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

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

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

pc端布局代码运用:

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

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

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

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

table表格布局:

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

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

DIV+CSS:

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

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

移动/wap端排版布局

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

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

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

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

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

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

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

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

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

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

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

例如:点击服务导航按钮,小程序未跳转到对应页面,不符合要求

pc端布局运用:

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

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

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


当前名称:网站pc/wap端排版结构要求及网页布局方式
浏览地址:http://cdxtjz.cn/article/dghspdp.html

其他资讯