网站设计与网页制作

打开一个网站，网站网页用户停留还是设计离开，平均只需要0.05秒。制作这不是网站网页我编的，是设计Google做过的一项视觉研究得出的结论。0.05秒里，制作用户根本来不及读文字，网站网页他们看到的设计是颜色、留白、制作字体粗细和图片摆放的网站网页位置。换句话说，设计网页设计的制作第一战场不在内容，在视觉。网站网页

很多人把"网站设计"和"网页制作"当成一回事。设计其实它们有明确的制作分工。设计解决的是"长什么样"——版式、配色、图标、交互反馈；制作解决的是"怎么跑起来"——HTML结构、CSS样式、JavaScript行为、后端数据对接。一个偏审美与逻辑规划，一个偏代码与工程实现。两者脱节，结果就是设计稿惊艳、上线后走样。

HTML不是随便堆标签

我见过不少初学者写HTML，一个页面从头到尾全是<div>。能跑，但语义全丢了。搜索引擎看不懂哪块是导航、哪块是正文、哪块是侧栏。屏幕阅读器也读不出重点。

正确的做法是用对标签。<header>放页头，<nav>包导航，<main>装核心内容，<article>标记独立成篇的文章，<aside>处理侧边推荐，<footer>收尾。这套语义化标签从HTML5开始就是标准，用了不亏。

代码大概长这样：

<nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> </ul> </nav>

别小看这几行。结构清晰了，CSS写起来顺手，后期改版也不容易崩。

CSS的取舍比技术更难

Flexbox和Grid出来之后，布局已经没什么硬骨头了。真正难的是做减法。一个按钮，加阴影、加渐变、加圆角、加悬停位移，堆到第五种效果的时候，用户反而不知道能不能点。

我自己的习惯是：先保证可点击区域不小于44×44像素，这是移动端手指触控的底线。然后颜色对比度至少达到WCAG AA标准（正文4.5:1）。这两条守住了，再谈好不好看。好看是加分项，可用是及格线。及格线没过，加分项没意义。

响应式不是加个meta标签就完事

有人以为在<head>里写一行<meta name="viewport" content="width=device-width, initial-scale=1.0">就算响应式了。差得远。那行标签只是告诉浏览器"别缩放"，真正的适配要靠媒体查询和弹性单位。

举个实际场景：三栏布局在桌面端好看，到了手机上三栏挤成一团。你得用@media (max-width: 768px)把布局改成单栏，导航收进汉堡菜单，图片换成更小的源文件。这些细节不做，移动端体验就是灾难。

制作阶段容易踩的坑

图片不压缩直接上传，一张banner图3MB，用户4G网络下等五秒还没加载完，早跑了。WebP格式比JPEG小30%左右，兼容性现在也没问题，该换就换。

另一个坑是表单验证只做前端。JavaScript验证能提升体验，但后端必须再验一遍。前端代码用户随手就能改，只靠前端等于没验证。

还有字体。中文网页加载一套完整中文字体动辄好几MB，首屏渲染直接被拖死。解决办法是用系统默认字体栈，或者只截取用到的字符做子集化。别为了一个标题字体让整页陪葬。

网站设计与网页制作，说到底是一件事的两面。设计决定用户愿不愿意留下来，制作决定用户能不能顺利留下来。两个环节都做扎实，网站才站得住。