网页设计七个要素，按上线顺序排一遍

网页设计的七个要素都知道，做起来还是乱，问题出在顺序。先做视觉再定结构，改稿次数会翻倍。

一、先定导航结构

菜单项不超过 7 个，二级菜单不超过 5 个。导航结构定下来，页面清单才有依据。面包屑要能点回上一级，导航体验才算完整。

二、再做响应式布局

断点定 3 个就够：手机 375，平板 768，桌面 1280。断点太多，维护成本成倍上涨。

响应式布局要在设计阶段就做，别留到开发时靠代码凑。品牌形象靠重复建立，同一个主色在每页出现的位置尽量固定。

三、写一份风格指南

颜色和字号各定一套值，间距与圆角也要定，阴影同理。风格指南写出来，后面新增页面才不会各写各的。

字号要在指南里写死。手机上正文 16 像素是底线，标题 24 像素起步。

四、视觉素材按用途配

首屏 1 张主图，正文配图按段落节奏放。一个页面 20 张图，加载速度和阅读节奏都会毁掉。

视频能提升参与度，但自动播放的静音视频会让手机端变卡。放之前先算清代价。

五、文案和设计同步写

先排版再填字，最后一定会有字放不下。文案和设计同步推进，改稿次数能减一半。

六、行动按钮留出对比

主按钮颜色和页面主色拉开，位置跟着动线走。一个页面一个主按钮，其余弱化。

七、页面速度最后压一遍

用 PageSpeed Insights 和 GTmetrix 各测一次。移动端 3 秒内打开算合格，超过就回去压图。

压图之前先看是哪张拖慢的。一张 2MB 的首屏大图，换掉它比改十行代码管用。

图文混排的版式规矩，见查看详情。