|
网站不管是pc端还是wap端都是讲究层次结构和排版布局的，这个是为用户方便浏览体验的重要操作。在网站制作过程中有两大点是一定要注意的，第一是页面混乱，主次不清，所有东西都引人注目；第二是背景干扰用户浏览。这个是直接干扰用户查看网站的视觉，在用户受到这方面的影响一定大大增高了网站跳出率。
pc端排版布局
1.把页面分割成清晰明确的不同区域，因为可以使用户迅速判断出哪些区域是重点，哪些模块内容不是用户需求。
例如：站点版块不清晰不明确，对用户浏览体验大大降低，网站排名上不去
2.创建清晰直观的页面层次结构；越重要越要突出；逻辑相关的内容视觉上也应该相关。
例如：页面层次结构不清晰，相当于页面逻辑不通顺，不符合要求。
3.用嵌套的方式形象地显示从属关系。
例如：站点层级嵌套混乱，让用户找不到对应信息，不符合要求。
pc端布局代码运用：
1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
移动/wap端排版布局
1.页面应注意排版精良，段落分明，合理使用不同字号区分页面的主次信息，图片、视频等多媒体资源的位置及尺寸选择配合页面整体布局，保证页面整体的美观度和用户浏览页面信息的最佳可读性。这样利于整站优化
例如：站点页面排版差、段落距离不合理影响用户阅读
2.首屏主体内容必须占屏幕的50%以上。并且主体内容应位于手机屏幕的中心位置。
例如：首屏主体内容小于50%，广告等其他内容过多，不符合要求
3.展开全文功能：展开全文的设置必须具有文字标示，且功能实际可用；展开全文功能最多只能出现一次，但不可出现在落地页的首屏内容中（列表页除外）；展开全文与广告等引导性内容要设置一定距离间隔，避免干扰用户操作。
例如：展开功能无文字标示，且与APP调起按钮距离过近，不符合要求
例如：小程序展开全文按钮出现在首屏，不符合要求
4.主体内容应与广告、相关推荐等次要内容板块之间有明显间隔距离或分割线，使用户获取信息时不受任何干扰。
例如：翻页功能键与广告之间无间距，易引发用户误点击，不符合要求
例如：小程序主体内容与广告之间距离过近，不符合要求
5.页面的导航的功能与位置明确，避免用户使用过程中被误导。
例如：点击服务导航按钮，小程序未跳转到对应页面，不符合要求
pc端布局运用：
1、全适配：响应式布局+流体布局
2、移动端适配：流体布局+少量响应式、基于rem的布局。
注意：留白，这是网站都要考虑的问题。网页要有留白的作用，使整个内容排布得松紧有度，利用留白使页面布局平衡，可以提高网页的视觉效果和艺术感染力。减少页面的干扰；使有用的内容更突出；使页面篇幅较短，无需滚屏。
在搜索引擎优化中，如今的时代更趋向于移动搜索营销，这个时候就提出了pc端与移动端页面相匹配的对应关系，这个词功能出现，被称之为移动适配。具体含义百度官方是这样说的，提升搜索用户在移动搜索的检索体验，会给对应PC页面的手机页面在搜索结果处有更多的展现机会，需要站点向百度提交主体内容相同的PC页面与移动页面的对应关系，即为移动适配。
移动适配的作用：有助于移动搜索将移动用户直接送入对应的手机页结果；有助于您的手机站在百度移动搜索获得更多流量，同时以更佳的浏览效果赢取用户口碑。
2.URL适配：1）每行输入一对PC-移动规则表达式，最多输入2000对；2）规则表达式以两列展现，第一列为PC表达式，第二列为移动表达式，两列之间以空格键隔开。
移动搜索结果落地页必须是移动页而不是PC页。因此，针对PC站点我们建议：
（1）设计搭建与PC站形成对应适配关系的移动站，并积极向百度提供移动页面及适配关系；
（2）若网站暂时没有搭建移动站的计划，请将PC站点进行自适应改造，以便适应移动浏览器的界面，给用户带来良好视觉体验。
例如：PC站点移动端用户浏览及交互体验差，不符合要求。
关于移动配置，百度不建议的做法：
1、单一域名下请使用同一种配置方式(跳转适配、代码适配、自适应)，例如：不要把移动站的页面作为pc站网址中的一个子目录来配置。
2、如果使用跳转适配的方式，请不要使用JS对ua进行适配跳转。这种方式存在两个缺点：
a)对用户：会加大由重定向的客户端造成的延迟；这是因为客户端需要先下载网页，接着解析并执行JavaScript，然后才能触发重定向。301或302则不会有这个延迟。
b)对搜索：爬虫也需要使用支持JS渲染的爬虫，才能发现此重定向。
注意的是：移动适配用于拥有pc端和移动端，且移动页面和PC页面的主体内容完全相同。如果网站是自适应，是不存在移动适配。
| 
发表于 2021-5-7 06:21:44
|
/1 
发表于 2021-3-16 17:50:41
