如何做网页设计？分享12种常见的网页布局设计方法

网页布局应先按内容任务选择：需要横向比较的课程或商品适合网格与卡片；需要讲清一个方案的内容适合分屏或顺序单页；需要持续发现内容的栏目可用杂志式结构。再根据内容数量、更新方式和手机端顺序组合，而不是整站只套一种样式。

下面的12种表达及页面案例中，有些是几何布局，有些是内容组织或阅读引导方法。用Pixso 的多端网页设计能力建立同一组内容的桌面和手机画板，可以直接比较结构是否适合这次任务。

12种常见的网页布局设计方法

1. 卡片式网页布局

卡片就是交互信息的承载体，通常以一个浓缩的形式提供相关网页内容。卡片式网页布局非常适合在页面上放置大量内容，同时又使每个内容保持鲜明。卡片式布局有两种主要的布局格式：

将等尺寸的卡片排列在网格上，便于比较相同字段，例如课程标题、形式和时间。下图Pixso社区以卡片展示资源案例，各条内容有独立入口；设计自己的页面时，要用一致字段帮助用户比较。

不同尺寸的卡片可以形成高低错落的排布，但图片中的几张引导卡片主要展示卡片内部构图。实际采用瀑布流时，还要确认阅读顺序、图片加载后的位移和内容寻找方式；不能只凭卡片高度不同就认定布局适合大量信息。

2. 分屏式网页布局

这种布局既指垂直拆分屏幕，也指水平拆分屏幕。是将页面分割为均等或者不均等的两部分，这种方式的好处就是可以将文字信息和图像元素进行更有效的布局区分，让信息更有条理，人们更容易阅读。同时这样做的目的也是支持快速选择，以便立即更好地与网站互动。例如，下图就是典型的左右分屏案例。整个网页分成左右两部分，文字统一在左侧，图片统一在右侧。整个页面信息分布更有条理，更易于用户快速阅读，分屏是网页布局近几年逐渐成为一种网页设计趋势，想要了解更多分屏式网页设计，推荐阅读《玩转分屏网页设计，这4种手法就够了！》。

3. 大标题式网页布局

大标题可以将核心主张放在视觉中心，适合信息较少的品牌或活动首屏。下图Distillerie Lacs案例用显著标题搭配产品图；标题是否易读仍取决于字形、对比和换行，字号越大不意味着内容一定更容易理解。

4. 个性化推荐网页布局

个性化推荐决定“显示哪些内容、按什么顺序”，并不是一种独立的几何布局。推荐结果仍需用卡片、网格或列表呈现。下图Rotten Tomatoes旧页面可观察影片和专题的分组，但静态截图不能证明其推荐算法。设计推荐区域时，要同时准备新用户无偏好、内容不足和推荐无结果的布局。

5. 网格式网页布局

信息被组织成网格，使其易于浏览，人们可以停下来关注感兴趣的特定主题。网格允许将文本、照片、视频平均分配到网页上，让用户决定每个单元的重要性。

6. 杂志版式布局

杂志式布局非常适合展示大量定期更新的、内容多样的图像，这种杂志式的布局独特而令人难忘。杂志样式的版面设计包括特色文章（有时是轮播或类似格式的多个特色文章），以及首页上的第二和第三篇文章。它们也往往有多个内容列，有时分为几部分。这些杂志版式Web布局非常适合内容丰富的网站，尤其是每天添加新内容的网站。

7. 单页式网页布局

单页布局将网站的所有主要内容放在单个网页上。导航是通过滚动完成的，通常使用快捷方式跳转到特定部分，有时还使用视差滚动效果。

单页布局非常适合叙述性内容，导航提示（“向下滚动”和箭头）使设计更加人性化。对于内容稀疏的网站，单页网站布局是一个很好的解决方案。它们也是叙事内容（例如互动式儿童读物）网页设计的理想选择。

8. F型和Z型网页布局

F型和Z型可作为安排视觉路径的参考，不能当作用户一定按固定路线阅读的规律。文字密集页面可检查标题、段首和左侧信息是否便于扫描；短促的首屏可通过标题、图像和按钮形成清楚的观看顺序。内容和真实阅读任务比画出字母形状更重要。

Z型安排通常把一组主要信息放在上方，把下一组信息放在下方，中间通过图像或留白形成连接。下方Projecto Tasa页面可用来观察标题、产品图和行动区域之间的关系，不必要求浏览者按设计者预设的轨迹移动视线。

同一页面内也可能出现不同阅读路线。把关键时间、价格或行动藏在所谓“视线终点”，并不能保证人们看到；需要通过标题、对比与实际任务观察确认。

9. 不对称网页布局

不对称结构能用大小与位置差异突出内容，适合视觉表达较强的首屏。下方Stata案例把文字与拼贴图形分配到不同区域。若主按钮落在过于零散的位置，视觉活力可能变成寻找成本；手机端需要重新安排各块的先后顺序。

10. 简洁的Web布局

简洁布局减少与主任务无关的元素，将注意力集中到关键内容。下图花瓶集合页保留产品图、标题和必要操作，适合观察留白与层级。内容复杂的网站同样需要分组与导航，不能把“简洁”理解为删去规格、条件或帮助。

11. 导航标签网页布局

导航标签用来呈现栏目或同一区域内的分类，关键是让名称与内容对应。下图ACCIO旧页面展示主导航的空间安排。若标签太多，先区分主栏目与子项，再决定是否使用下拉或其他方式；避免把多级栏目全部挤在一行。

12. 内容轮播网页布局

轮播在同一区域切换多条内容，常见于首页活动区；只有首项默认可见，不能假设每一张都得到同等关注。采用轮播时应提供清楚的上一项、下一项和暂停方式。W3C 轮播指南还要求考虑键盘操作、屏幕阅读器对变化的感知与合理的焦点管理。关键说明或唯一操作入口不应只能等自动播放才能找到。

这12项可以组合，但组合要服从内容。把同一份课程资料分别放入网格和单页后，如果用户要逐项比较场次，网格更容易对齐字段；如果他需要理解完整训练过程，连续章节更容易保留上下文。

把几种布局组合成同一个网站

以工作坊网站为例：首页首屏用分屏说清课程成果与报名入口；第二部分用三列卡片比较课程场次；详细安排采用按时间顺序展开的单页章节。三种结构服务的是“理解—比较—查看细节”三个任务，并不需要把12种布局都放进一页。

在Pixso中使用同一组课程文字绘制这两个宽度，把可复用卡片整理为组件，通过自动布局调整排列和间距。让内容最长的一张卡片也参与比较，再看其他卡片能否保持可读与可点击；画板在不同宽度下的表现需要逐个检查。

如果需要从现成结构起步，可在Pixso 资源社区查看网页案例，依据自己的课程和阅读任务重新安排，而不是只换标题和配色。