网站前端设计是什么

你打开一个网页，第一眼看到的前端颜色、字体、设计按钮位置、网站图片怎么滑出来——这些都是前端前端设计干的事。它不负责从数据库里捞数据，设计也不管服务器扛不扛得住并发，网站它只管一件事：让用户看见的前端、摸到的设计、点到的网站那个界面能跑起来，还不丑。前端说直接点，设计前端设计就是网站给网页穿衣服、摆家具、前端装门把手，设计还得保证门一推就开。

我见过不少刚入行的人把前端设计和 UI 设计混成一锅粥。UI 设计师在 Figma 里画个漂亮的按钮，圆角 8px，渐变蓝，阴影柔和——那是设计稿。前端设计师拿到这张图，得用 HTML 搭出骨架，CSS 调出那个圆角渐变和阴影，再用 JavaScript 让按钮点下去有反馈。中间差着十万八千里。比如那个阴影，设计稿上写 box-shadow: 0 4px 12px rgba(0,0,0,0.1)，你得试半天才能让浏览器渲染出来跟设计稿看起来差不多。有时候差一个像素，设计师能跟你急。

“前端设计不是画画，是拿代码当画笔，而且画布还会因为浏览器不同、屏幕尺寸不同、网络快慢而变形。”

我刚开始学那会儿，以为把 PSD 切好图，用 Dreamweaver 拖拖拽拽就完事了。后来才发现，一个简单的导航栏，在 Chrome 上好好的，到 Safari 就错位；在 27 寸显示器上居中完美，到手机上挤成一团。于是你得写媒体查询，得用 flexbox 或者 grid，得考虑 viewport 的 meta 标签。这些琐碎的事情堆起来，就是前端设计的日常。

有人觉得前端设计就是调调颜色、改改字号。那是没碰到过复杂交互。比如一个电商网站的商品筛选，你勾选“红色”和“M码”，列表要实时更新，还不能整页刷新。这背后是 JavaScript 在监听事件、过滤数据、重新渲染 DOM。但前端设计要保证这个过程丝滑——不能卡顿，不能闪屏，加载时得有个骨架屏或者转圈动画。我见过一个网站，筛选一次卡三秒，用户早跑了。所以前端设计不只是“好不好看”，更是“顺不顺手”。

再说个具体的。你注册一个账号，输入邮箱后旁边冒出个绿色对勾——那是前端用正则表达式即时验证的。密码强度条从红变黄再变绿，也是前端算出来的。这些细节不需要服务器参与，浏览器里就搞定了。用户体验的提升往往就在这些不起眼的地方。反过来，如果前端设计偷懒，把所有验证都丢给后端，用户填完一整页点提交，等三秒才被告知“邮箱格式不对”，那火气蹭就上来了。

工具也在变。五年前 jQuery 还是标配，现在 Vue、React、Svelte 满天飞。但不管用什么框架，底层还是 HTML、CSS、JavaScript 这三样。框架帮你组织代码，可最终浏览器认的还是那些标签和样式。我见过有人用 React 写了个按钮，结果不会写 CSS 的 hover 效果，到处找库。其实一行 :hover { background: #ddd } 就解决了。前端设计有时候就是得回归基础。

还有一点常被忽略：可访问性。你设计的按钮，色盲用户能分清吗？图片有没有 alt 文本？键盘 Tab 键能不能正常切换焦点？这些不是额外工作，是前端设计的一部分。我认识一个开发者，他给所有交互元素都加了 :focus-visible 样式，就为了让键盘用户知道现在选中了哪里。这种细节，设计稿上通常不画，但前端得想到。

最后说个实在的。前端设计好不好，打开控制台看看就知道了。有没有一堆红色报错？网络面板里图片是不是几兆大？Lighthouse 跑一下，性能分低于 60 的，用户早就想关页面了。所以别把前端设计想得太玄，它就是个手艺活——用代码把视觉稿变成能用的、好用的、快速加载的网页。做久了你会发现，最难的从来不是写代码，而是平衡：平衡设计还原度和性能，平衡开发速度和浏览器兼容，平衡花哨效果和可访问性。

下次你看到一个网页，别光说“好看”或者“丑”。点一点，滑一滑，转个屏幕，断个网。那些让你觉得“自然”的地方，背后都是前端设计在撑着。