平面设计网页设计

平面设计（Graphic Design）与网页设计（Web Design）是视觉传达领域里最亲近、却又最容易被混淆的“两兄弟”。

很多优秀的平面设计师在转型做网页设计时，往往会经历一段痛苦的阵痛期。这是因为平面设计是“静态且有限”的纸张艺术，而网页设计则是“动态、无限且充满交互”的屏幕艺术。

平面设计（Graphic Design）与网页设计（Web Design）是视觉传达领域里最亲近、却又最容易被混淆的“两兄弟”。

很多优秀的平面设计师在转型做网页设计时，往往会经历一段痛苦的阵痛期。这是因为平面设计是“静态且有限”的纸张艺术，而网页设计则是“动态、无限且充满交互”的屏幕艺术。

从“平面思维”到“网页思维”的四大跨越

如果把平面设计比作“装潢一幅静止的画框”，网页设计就是“建造一栋允许用户在里面散步的房子”。

维度	平面设计（Graphic Design）	网页设计（Web Design）	网页思维的转变核心
媒介尺寸	固定且有限。如 A4 纸、海报（$60times90text{ cm}$）、名片。你可以精确控制每一个元素的绝对位置。	无限且多变。从 4K 商业带鱼屏、笔记本、iPad 到各种尺寸的折叠屏手机。	响应式（Responsive）：网页元素必须像水一样，能自动流进、并完美适配任何尺寸的容器，拒绝绝对定位。
色彩规范	CMYK 印刷色。关注的是油墨、纸张质感、网点和吸墨率。	RGB / HEX 色彩空间。关注的是屏幕发光、色域（P3/sRGB）以及深色模式（Dark Mode）的丝滑切换。	光感即高级感：网页可以通过 CSS 滤镜实现毛玻璃、环境光晕（Glow）等发光和悬浮质感。
核心布局	视觉主导。读者顺着你的排版看下去即可，主要为了“传达信息和引发共鸣”。	UX/UI 行为引导。用户会随时点击、悬停、滑动。核心是为了“引导点击和促成转化”。	视觉动线（F型/Z型）：按钮（CTA）的大小、色彩和摆放位置决定了用户会不会点击，设计必须服务于用户的操作行为。
交付成果	导出的高分辨率 PDF / TIFF 印刷原文件。	Figma 原型或转化为 HTML/CSS/JS 的代码包，或直接在 Framer 中发布。	动效交付：网页拥有“时间维度”，不仅要交付静态图，还要设计元素淡入淡出、视差滚动的交互逻辑。