从0-1学习导航页面布局优化和搭建

这篇文章，我会把这个导航页从信息架构、视觉设计、布局搭建到性能优化的全过程分享出来，纯粹是技术复盘，希望花猫导航（huamaodh.com）能给想入门页面布局的同学一点参考。

---

1. 先想清楚：需求梳理与信息架构

任何项目都忌讳上手就写代码。最初的需求非常朴素：

• 快速访问我最常用的几十个网站

• 支持按分类展示，避免杂乱堆砌

• 视觉清爽、无广告、无多余干扰

• 在电脑和手机上都好看、好用

基于这些，我把信息架构定为三个层级：

1. 顶部搜索区 -- 放置一个可用的搜索框，直接调用百度或 Google，同时作为页面的视觉重心。

2. 分类导航网格 -- 这是主体。类别包括"设计资源""前端开发""常用工具""学习平台"等，每个类别下是一排链接卡片。

3. 极简底栏 -- 仅仅放一句不打扰的签名或版权说明，让页面完整收束。

所有网站数据以配置化的方式维护，方便随时增删。这也为后续动态渲染埋下伏笔。

2. 设计原则：清晰、克制、有温度

导航页的本质是工具，但作为设计师，我还是希望它有一点小性格。视觉基调我定了三个关键词：清晰、克制、有温度。

• 清晰：保证文字可读、信息层级分明。标题、分类名、网址描述使用不同的字号和灰度，快速扫视就能定位。

• 克制：色彩只用一个主色"暖橘"（#f0a36c），来自于橘猫的印象；大面积留白，卡片用非常淡的投影和圆角，不抢内容的风头。

• 有温度：加入一点小猫相关的细节------比如页面空白状态用一只简笔猫爪作为装饰图案，悬停时卡片会有轻柔的浮起，类似小猫伸懒腰的瞬间。

在实际落地时，我把 Logo 设计成一只线条勾勒的小猫头，放在左上角，仅作为品牌识别，没有任何商业暗示。字体使用系统默认字体栈 -apple-system, "Segoe UI", Roboto, sans-serif，保证渲染速度和跨平台一致性。

3. 布局搭建：从 Flex 到 Grid，选对工具

页面整体结构很简单，但导航卡片区如果只用 Flex，处理多行自适应会很繁琐。因此核心布局选用了 CSS Grid。

css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
}

这一行代码解决了三个问题：

• 自动计算列数，响应不同屏幕宽度

• 每个卡片最小宽度 130px，不会被挤压变形

• 间距始终保持 16px，视觉呼吸感恰到好处

而外层结构使用 Flex 纵向布局，保证 Header、Main、Footer 自上而下占满视口，并在内容不足时让 Footer 自然沉底：

css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

还实现了分类折叠功能，让长页面在移动端不至于滚动过长。每个分类使用 <details> + <summary> 标签，默认展开，用户可手动收起------这是纯 HTML 就能做到的交互，不依赖任何 JavaScript。

4. 视觉与交互细节优化

很多人觉得导航页没什么好设计的，但细节往往决定品质。我打磨了这些点：

卡片微交互

css

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

悬停时卡片轻轻上升，投影加深，模拟从纸面"拾起"的感觉。移动端则去掉该动效，用点击态的背景色变化替代，保证触屏体验不粘滞。

搜索框焦点光晕

搜索框获得焦点时，边框从灰色渐变为暖橘色，并加上外发光，给用户明确的"我现在可以输入"的信号。所有可交互元素都设计了清晰的 :focus-visible 轮廓，兼顾无障碍访问。

暗色模式适配

使用 CSS 自定义属性统一管理颜色，并用 prefers-color-scheme 媒体查询做暗色模式切换：

css

:root {
  --bg: #ffffff;
  --card-bg: #f9f9fb;
  --text: #2c2c2c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e24;
    --card-bg: rgba(255,255,255,0.06);
    --text: #e2e2e2;
  }
}

在暗色模式下，卡片变为半透明毛玻璃质感，背景变成深灰色，暖橘主色略微提亮，保证对比度。

滚动条美化

虽然是小地方，对 Webkit 浏览器也定制了滚动条样式，宽度变细，颜色与主色调呼应，让整个页面没有"出戏"的浏览器默认组件。

5. 响应式：从小屏开始反过来设计

我习惯先画移动端草稿，再向宽屏扩展。在手机上的表现：

• 顶部搜索框占满宽度，去掉多余的左右边距

• 卡片网格改为 minmax(100px, 1fr)，保证触屏可点区域不小于 44px × 44px

• 分类折叠默认全部展开，但增加了一点内边距防止内容拥挤

• 移除了不必要的悬浮动效，仅保留点击反馈

这些调整没有使用框架，仅仅靠几行媒体查询就完成了。最终在 320px 宽的小屏到 2K 大屏上

6. 性能与可维护性：轻量到极致

导航页的生命意义在于"快"，打开速度直接影响使用频率。最终零 JS 框架，所有渲染在搭建时由原生 JavaScript 根据配置数据动态生成。大致思路是：

js

const sites = [
  { cat: '设计资源', name: 'Figma', url: '...', desc: '在线协作设计' },
  // ...
];
function renderNav(data) {
  // 按分类归类，循环创建 DOM 结构
}
document.addEventListener('DOMContentLoaded', () => renderNav(sites));

所有网站链接集中维护在一个对象数组里，增删改非常直观。图标使用内联 SVG sprite 或 Emoji，不额外发起图片请求。全站 CSS + HTML + JS 压缩后体积控制在 20KB 以内，首次绘制几乎无延迟。

此外，CSS 变量统一了间距、颜色、圆角等设计 Token，后续如果想换个主题色，只需改一行变量定义，所有组件自动跟随。

7. 总结：

从设计稿到代码落地，大约花了一个周末。整个过程没有用任何第三方组件库，完全基于 HTML、CSS 和少量原生 JS。正是因为亲手把布局、交互、响应式、暗色模式都走了一遍，我对 CSS Grid 的灵活度、自定义属性的工程价值、以及无障碍设计的细节有了更深的理解。

如果你也想学习页面布局优化，我非常建议像这样自己动手搭建一个导航页。重点在于：用一个真实的项目串联起设计思维与前端技术，收获的远比看十篇教程更大。