基于web的网站设计

网站设计这件事，基于很多人以为就是网站把页面画好看。真做过几个项目就知道，设计视觉只是基于最表层的东西。一个能用的网站网站，背后是设计结构、性能、基于交互三件事互相拉扯的网站结果。

HTML 是设计骨架，这点没什么争议。基于但骨架怎么搭，网站决定了后面 CSS 和 JavaScript 好不好写。设计我见过不少初学者，基于一个 div 套一个 div，网站套了七八层，设计最后自己都找不到某个元素在哪。其实很多布局用语义化标签就能解决——header、nav、main、article、aside、footer，浏览器认识它们，搜索引擎也认识。用对标签，代码量能少三成，可读性翻一倍。

CSS 的写法这几年变化很大。Flexbox 和 Grid 基本取代了当年用 float 硬撑布局的做法。我记得早些年调一个三栏等高布局，得用负 margin 或者 padding 补偿，现在一行 display: grid; grid-template-columns: 1fr 2fr 1fr; 就完事。工具在进步，但选择变多了也容易乱。我的习惯是：一维排列用 Flex，二维网格用 Grid，别混着用。混用不是不行，是维护的时候容易骂人。

响应式设计不是加几个媒体查询就交差。真正要处理的是内容在不同宽度下的优先级。手机上把侧边栏藏起来，平板让它折叠，桌面才完整展开——这套逻辑得在设计阶段就想清楚，不是写完桌面端再“适配”移动端。顺序反了，返工量会很大。

性能这块，图片是最大的坑。一张没压缩的 banner 图能到 3MB，用户加载五秒还没看到内容，直接关页面走人。WebP 格式现在兼容性已经很好，配合 loading="lazy" 延迟加载，首屏速度提升很明显。字体也是，自定义字体文件动辄几百 KB，中文字体更夸张。如果不是品牌强制要求，系统字体栈 system-ui, -apple-system, sans-serif 其实够用，还省了加载时间。

JavaScript 要克制。不是每个交互都需要框架。一个下拉菜单、一个标签切换，原生 JS 几十行就写完了，引入 React 或者 Vue 反而让页面变重。当然，如果整个项目就是复杂的状态管理，那该用框架就用。判断标准很简单：这个页面的交互复杂度，值不值得引入一整套运行时。

我自己的博客站点就是纯 HTML + CSS 搭的，没有构建工具，没有 npm 依赖。写起来慢一点，但部署就是拖文件到服务器，五年后打开还是那个样子。现在很多前端项目，半年不碰，node_modules 就装不上了。简单有简单的好处。

可访问性经常被忽略。alt 属性不写，键盘 Tab 键走不通，颜色对比度不够——这些对普通用户可能无所谓，但对视障用户就是能不能用的问题。加 alt、保证焦点可见、对比度至少 4.5:1，这些不花多少时间，但体现的是做网站的人有没有把用户当回事。

网站设计说到底是在约束里找平衡。老板要好看，用户要快，开发要省事，三边不可能同时满足。能做的就是在每个决策点上想清楚：这个取舍，代价是什么，谁承担。想明白这个，比会多少框架都管用。