发布需求网站用户会以不同的方式浏览网站，扫描和浏览文本，设计Web项目需要了解浏览习惯来进行布局设计，借助浏览模式更好地展示内容，用户浏览模式主要有以下。
1、F模式布局
观察用户在线浏览习惯的变化趋势，可以看到不同的模式，根据研究发现，最常见的习惯是以F形结构浏览信息，在网站中，使用F布局反映了用户的典型浏览模式，F模式用户浏览页面顶部的第一行，浏览垂直向下移动到文本的左侧，读取第二大段落，然后跳转到下一行，浏览文本，用户不会注意到右侧的元素。在第一次浏览之后，用户开始更仔细地查看内容找到相关信息，视线第二次向右移动，从而形成F模式。
浏览过程继续下去，会发现用户仍然在屏幕的左侧浏览，垂直向下到页面底部，这种F布局的起源在于行为心理学，这种浏览方式对于从左到右，从上到下浏览的语言浏览信息很常见，唯一的区别是互联网用户现在更频繁地从跳行，或跳段浏览。
F模式是眼球运动模式，眼球运动追踪是一种识别人眼运动的方法，网站设计也使用该方法，对于探索用户在线浏览习惯很有用。在网站设计中，用户热点图是用于可视化数据的分析，显示用户行为或在线浏览行为，有助于分析和优化网站结构。F模式还应应用于概述页面。通过简要而简明地总结要点，避免F布局中不必要的信息堆积，对于网站设计应该结构化标题，段落，和小标题，这种结构使用户能够更快地扫描文本。标题和小标题不仅仅是一个结构元素，带有相关关键词标题可以作为用户锚元素，在创建文本时，应该留出足够的时间来规划标题。
2、视差滚动
视差滚动是一种动画技术，其中背景图像比前景中的图像移动得慢，在2D场景中产生深度幻觉，网站建设如何更好地实现视差滚动。首先要了解视差，视差指的是一个物体的位移在观察时候发生的变化，举个例子将拇指放在脸的前面，首先闭上左眼观察，然后换到右眼，虽然背景几乎没有移动，但拇指会从一个位置跳到另一个位置，这种跳跃的原因是由于眼睛之间的距离，当眼睛闭合时，会导致观察点的变化。
网页中的视差滚动，属于空间感知，如果从右向左移动头部，很快就会看到视野中物体的相对位置发生变化，前景中的物体比背景中的物体移动得更快。
视差滚动效果很好，由前景，中间和背景组成，以不同的速度穿过屏幕。当前景和背景在一个方向上不断移动时，由于前景沿着屏幕比背景更快地移动，产生了深度感，增强沉浸体验，来看看如何用JS来控制滚动。
Js代码
$(document).ready(function () {
// 读取window
$window = $(window);
// 遍历包含“data-type”的元素，读取并设置Y偏移量、X位置、滚动速度等参数
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// 遍历符合 section[data-type="background"] 选择器的元素
$('section[data-type="background"]').each(function () {
// 存储一起基础变量
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// 当窗口滚动时
$(window).scroll(function () {
// 通过计算滚动条高度和窗口高度判断当前元素是否在视野中
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
// 以设定的速度滚动背景
// 因为我们是向上滚动，所以背景的yPos是负值
var yPos = -($window.scrollTop() / $self.data('speed'));
// 如果此元素有一个Y偏移，将其添加上
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// 最终的背景位置
var coords = '50% ' + yPos + 'px';
// 滚动背景
$self.css({ backgroundPosition: coords });
// 遍历本节点中的其他元素
$('[data-type="sprite"]', $self).each(function () {
// 读取data-type="sprite"规则的元素
var $sprite = $(this);
// 使用同样的方法进行滚动
var yPos = -($window.scrollTop() / $sprite.data('speed'));
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
$sprite.css({ backgroundPosition: coords });
});
// 遍历需要滚动的视频
$('[data-type="video"]', $self).each(function () {
// 读取data-type="video"规则的元素
var $video = $(this);
var yPos = -($window.scrollTop() / $video.data('speed'));
var coords = (yPos + $video.data('offsetY')) + 'px';
$video.css({ top: coords });
});
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
感知心理将这种视差也叫运动视差，来自附近物体的光反射在视网膜上的移动速度比位于更远处的物体的反射更快，由于观察者平行于被观察的物体移动时才发生效果，叫运动引起的深度感知，有助于感知三维空间的进视觉刺激。
视差滚动效果用于网站，产生深度幻觉，设计元素排列在不同的层面上，可以在水平或垂直方向上独立移动，为了触发运动引起的深度感知，访客必须使用滚动浏览，在用鼠标或侧边栏滚动时，前景图层上的元素在屏幕上移动的速度比背景图层上的元素快，给人的感觉是3D的。
我来说两句