AI 摘要：本文探讨了现代网页设计软件与真实 Web 技术能力之间的差距。作者 Chris Coyier 指出，设计工具产出的是网站的“静态图片”，而非可交互的真实产品，这导致许多 Web 固有的动态、响应式和交互特性难以在设计稿中表达。文章详细列举了如元素状态、颜色模式、CSS 变量、流式布局、可变内容和动画等多个方面，强调了这些特性在从设计到开发的“翻译”过程中容易失真或被忽略，并认为很大一部分设计工作实际上必须在浏览器中，通过代码来完成。

1. 动态性与交互状态
• 链接与按钮状态 (Link & Button States)：设计软件通常只能展示元素的默认样式，但很难表现如 :hover (悬停)、:active (点击) 和 :focus (聚焦) 等重要的交互状态，导致这些状态在设计阶段常被忽略。
• 颜色模式 (Color Modes)：浅色/深色模式或 Windows 高对比度模式等全局状态会影响整个设计的可见性，但设计工具通常难以系统性地支持这些多模式的设计与预览。
• 变量 (Variables)：CSS 自定义属性 (Custom Properties) 具有级联 (Cascade) 和动态变化的特性，可以在 DOM 的任何层级被修改，这是静态设计工具基于图层的概念难以模拟的。
• 其他应用状态 (Other States)：加载中 (Loading)、错误 (Error)、用户特定权限等各种应用状态，在设计工具中往往需要手动绘制多个画板来表示，容易遗漏且无法体现状态间的排列组合。
• 动画与过渡 (Animations & Transitions)：从简单的悬停效果到复杂的动效，这些动态体验很难在静态设计稿中有效呈现和沟通，通常需要到开发阶段直接用代码实现和探索。

2. 响应式与流式布局
• 视口尺寸 (Viewport Sizes)：设计工具通常采用几个固定断点（如手机、平板、桌面）来处理响应式设计，但这无法完全表达 Web 的流式 (Fluid) 特性，例如容器查询 (Container Queries)、元素的最小/最大宽度以及字体大小的平滑变化。
• 滚动与鼠标相关效果 (Scrolling & Mouse Movement)：静态设计稿无法展示与滚动相关的效果，如 position: fixed (固定定位)、scroll-snapping (滚动吸附) 以及与滚动位置联动的动画等。
• 可变内容 (Variable Content)：设计稿往往使用“理想情况”下的内容（Happy Path），而无法充分考虑真实世界中内容长度不一、内容缺失或多语言翻译后字符数量变化等情况，这可能导致最终布局被破坏。
• 单位与数学计算 (Units & Math)：Web 拥有丰富的单位系统 (如 rem, vw, %) 和 CSS 数学函数 (如 calc(), min(), clamp())，它们是实现复杂流式布局的关键，而设计工具通常只提供固定的、无单位的数值，两者存在巨大鸿沟。

3. 特定设备与媒介
• 设备特定细节 (Device-Specific Details)：设计稿难以模拟和测试触摸目标的大小、移动设备屏幕键盘的交互、不同设备的光标 (Cursor) 样式，以及在不同带宽下的体验差异。
• 媒体处理 (Media Handling)：如何在设计中集成视频、音频或 3D 等复杂媒体，并在静态工具中准确传达其交互和表现，是一个巨大的挑战。

Frontend Masters

Web Design: What is the web capable of that is hard to express in design software?

Designs aren’t websites, they are pictures of websites.