AI 摘要：介绍了由 Paul Smith 制作的 Classic Mac OS System 1 背景图案，这些极小尺寸的复古像素图案可通过 CSS background-repeat 实现无限平铺效果。尽管源自经典的 Mac OS 设计风格，但它们在现代网页中依然有独特的美感和实用价值。

AI 摘要：ColorMate 是一款面向设计师与开发者的免费在线配色工具，可快速生成符合无障碍标准（Accessibility）的调色板。用户可提取图片配色、即时预览 UI 效果、进行对比度测试（Contrast Checker），并将结果以 HEX、CSS 或 PNG 格式导出。它还提供由 AI 命名、锁定颜色及实时生成新方案的功能，并收录多种热门配色示例。

金属渐变研究

AI 摘要：文章探讨了 UI 动画在交互设计中的价值与风险，提出动画必须有明确目的，且要考虑交互频率与速度感知。作者强调：合适的动画能提升可预测性与愉悦感，不合理的动画则会破坏效率与信任。有时，最佳的“动画”就是没有动画。

1. 动画的双刃性
• 正确使用动画可让界面更自然、流畅、愉快
• 滥用动画则会使界面显得缓慢、不确定，甚至损害用户信任

2. Purposeful Animations（有目的的动画）
• 动画需服务于具体功能或信息传达，而非纯粹装饰
• 案例：Linear 用动画展示功能逻辑；按钮点击缩放增强响应感
• 动画可营造 delight（愉悦），但仅适合低频使用，避免变成负担

3. Frequency of Use（使用频率）
• 高频操作（如 Raycast 命令输入、键盘快捷键）不应使用动画，否则会拖慢效率
• 低频操作可适度加入动画，提高体验的独特性和愉悦感
• hover 或菜单切换等高频交互场景更适合零动画或极快动画

4. Perception of Speed（速度感知）
• 动画速度需足够快，保持用户与界面的即时连接
• 一般 UI 动画时长应低于 300ms
• 案例：下拉菜单在 180ms 内更灵敏，tooltip（提示框）应有初始延迟但切换时不应再延迟

5. 设计原则与结论
• 动画不是必然元素，而是用户体验的加速器或负担
• 最佳实践：以用户需求为导向，基于目的、使用频率和性能感知来判断是否加入动画
• 有时，没有动画，才是最好的设计

Emil Kowalski

Why you are animating more often than you should.

AI 摘要：这篇文章系统介绍了 CSS 中的颜色插值 (color interpolation) 概念，解释了其在渐变 (gradient)、过渡 (transition)、动画 (animation)、颜色混合 (color-mix) 等场景中的应用。文章重点区分了矩形色彩空间 (rectangular color space) 与极坐标色彩空间 (polar color space)，并详细阐述了色相插值 (hue interpolation) 的四种方法（shorter / longer / increasing / decreasing），展示了如何通过不同插值策略影响渐变、颜色过渡以及动画效果，从而为网页设计实现更自然、更富表现力的色彩体验。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 颜色插值的基础概念
• 定义：在两个颜色点之间计算中间颜色的过程。
• 作用：生成独特色彩、改进渐变、增强动画与过渡效果。
• 典型示例：利用 oklch() 在 CSS 动画中平滑过渡。

2. 应用场景与支持插值的 CSS 功能
• 所有渐变函数 (linear-gradient, conic-gradient 等)。
• color-mix() 函数：可指定色彩空间和插值方法。
• 动画 (animation) 和过渡 (transition)。
• 图像滤镜 (filter)。
• 相对颜色语法 (relative color syntax)。

3. 插值语法与规则
• 一般形式：
color-mix(in <color-space> <hue-interpolation-method>, color1, color2)。
• in 关键字：用于指明插值的色彩空间。
• <color-space>：包括矩形与极坐标空间。
• <hue-interpolation-method>：定义色相插值方式 (shorter / longer / increasing / decreasing)。

4. 色彩空间分类
• 矩形色彩空间 (Rectangular color space)：
• 以直角坐标 (XYZ 轴) 形式描述，如 srgb, lab, display-p3。
• 极坐标色彩空间 (Polar color space)：
• 以圆柱坐标形式表示，三个值分别是明度 (lightness)、彩度 (chroma)、色相 (hue)。
• 插值时色相是角度，因而需定义旋转方向。

5. 色相插值 (Hue Interpolation) 四种方式
• shorter：沿最短路径过渡（默认）。
• longer：沿最长路径过渡。
• increasing：始终顺时针方向过渡。
• decreasing：始终逆时针方向过渡。
• 类比时钟：类似指针从一个刻度旋转到另一个刻度，可以走近路或远路，也可强制顺/逆时针。

6. 实际应用场景
• 渐变 (gradient)：利用色相插值生成更自然的平滑过渡。
• 颜色混合 (color-mix)：可指定色彩空间并控制过渡方向，获得更独特的混色效果。
• 动画 (animation)：通过关键帧在不同色值之间平滑过渡，展现动态的色彩体验。

CSS-Tricks

What You Need to Know About CSS Color Interpolation | CSS-Tricks

Color what? Sunkanmi Fafowora explains how an everyday task for CSS can be used to create better colors experiences.

很有意思的副标题：劝 Apple 牢记初心，不忘使命，力戒形式主义、官僚主义，坚持实事求是的思想路线，树立正确设计观，真抓实干，改变作风

AI 摘要：本文深入分析了 Apple 在最新系统中引入的 Liquid Glass 材质与新视觉设计系统，指出虽然在界面质感上有一定突破（折射、HDR 高光、动态层级效果），但在实际交互和系统适配上存在明显不足：iOS 标签栏和工具栏设计复杂化、macOS 工期仓促导致界面割裂、Safari 与相机等核心 App 出现交互违和感。作者认为 Apple 为了设计形式感而牺牲了过往的易用性，这种“视觉优先”的改动可能是 Beta 阶段的过度尝试。最后总结：Apple 借由 Liquid Glass 等 shader 技术试图确立设计新高度，但缺乏完整生态适配，反而让用户体验受到冲击。

Design Scenes

#92 Liquid Glass 之外 Apple 的改变

劝 Apple 牢记初心，不忘使命，力戒形式主义、官僚主义，坚持实事求是的思想路线，树立正确设计观，真抓实干，改变作风

AI 摘要：本文探讨了如何在长篇内容（long-form content）中创造性地使用图片。作者认为图片不仅是插图工具，更能影响页面节奏、阅读体验和用户情绪。通过打破网格（grid）、使用全幅图像（full-bleed）、模块化布局（modular grid）、CSS Shapes、创意化图注（caption）以及留白（whitespace）管理，图片可以成为叙事与设计的一部分，从而提升文章的表现力与吸引力。

1. 引言：长内容与图片的关系
• 传统的内联矩形图片容易显得功能化但缺乏灵感
• 图片在长文本中应参与节奏与气氛塑造，而不是“附加元素”

2. 打破与利用 Grid（网格系统）
• 网格让排版平衡、整齐，利于阅读，但可能过于呆板
• 偶尔打破网格：扩大图片尺寸、偏移位置，可突出重点并增加灵动感

3. 图像宽度的处理：Text-width vs Full-bleed
• Text-width（跟随文本宽度）：适合信息图、图表，保持阅读秩序
• Full-bleed（全幅铺满）：制造视觉冲击力，打破阅读节奏，但不可滥用

4. Modular Grid（模块化网格）展示多图
• 通过网格组织多张图片构成整体布局，而非单调堆叠
• 可以混合横幅与竖幅图，用大小对比制造层次感，突出相关性

5. CSS Shapes 与文本环绕
• 传统文本环绕矩形边框，可能与图片形状不匹配
• CSS shape-outside 可让文字依据图片轮廓流动，更加自然、富有- 有表现力
• 利用图片 alpha 通道直接定义形状，减少复杂路径

6. Captions（图注）的再设计
• 不必是小字附注，它们可以是故事叙述的主动元素
• 图注可放置在图片侧边、覆盖图片，甚至作为装饰化的 pull quote

7. Whitespace（留白）的作用
• 紧密留白：制造张力，适合多图组合
• 宽松留白：形成停顿，让内容节奏更舒缓
• 留白是页面呼吸感与层次控制的重要因素

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.

AI 摘要：本文深入探讨了前端开发中主题和颜色命名的设计实践及困惑，从流行 CSS 框架的色板设计现状、手动与程序化生成色板的方法谈起，剖析了颜色变量定义中的“语义命名”混乱，并提出了更灵活与语义化兼容的命名及管理方式，以支持更加多变且有辨识度的 Web 设计系统。

CSS-Tricks

Thinking Deeply About Theming and Color Naming | CSS-Tricks

Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

AI 摘要：本文是作者 Nic Chan 撰写的新网站构建系列的一部分，重点介绍了如何采用现代字体回退方法来优化网站性能，尤其是减少累计布局偏移（CLS）。作者详细阐述了利用在线工具调整 CSS 字体属性（如 size-adjust 等）以实现无缝字体切换的实践，并分享了新增艺术作品和工作展示区的设计与实现，包括使用 View Transitions 和容器查询来提升用户体验。

• 作者 Nic Chan 分享了此篇草稿延迟发布的原因，并感谢读者的支持。
• 介绍了网站新增的拖放功能（桌面端）和改进的窗口分层效果，强调了渐进增强（progressive enhancement）的应用，即在确保无 JS 可用性的基础上，通过 JavaScript 增强用户体验。
• 字体优化与回退 (Font Optimization & Fallbacks): 讨论了网站在字体加载时遇到的累计布局偏移（CLS）问题，特别是自定义字体 W95FA 较窄的特性。作者希望实现像素字体和抗锯齿字体之间的无缝切换。他利用了“Modern Font Stacks”提供的字体堆栈，并发现了一个名为“Font Fallback”的工具，通过调整 size-adjust、ascent-override 等 CSS 属性来创建视觉上无缝的字体回退效果，甚至为此修改了工具的源代码。
• 艺术作品展示 (Artwork Showcase): 作者决定在网站中添加艺术作品展示区，尽管这与专业无关。他受到 Josh Crain 网站的启发，并利用 View Transitions API 实现了窗口最大化时平滑的缩放和标题淡入效果，配合少量 JavaScript 进行状态管理和回退。
• 工作项目展示 (Work Projects Showcase): 面对多种图片尺寸和可选标题的复杂布局挑战，作者采取了非对称设计，并限制了三种核心布局模式，避免每次新增案例都需编写新样式。此处完美运用了容器查询（Container Queries）来适应可用窗口空间内的尺寸变化，并结合 CSS Grid 实现有趣的重叠布局和纹理效果。

AI 摘要：本文详细探讨了 Apple 在 WWDC 2025 上推出的全新设计美学“Liquid Glass”（液体玻璃），分析了其设计理念、技术特点以及引发争议的焦点。文章从 Apple 官方介绍、设计师和开发者的反馈、无障碍性问题到社区的实验和教程，全面梳理了 Liquid Glass 的影响与应用前景。作者中立看待这一设计，既对其创新性表示兴趣，又对其可读性和无障碍性表达了担忧，同时整理了大量相关资源和讨论，为读者提供了深入了解这一设计趋势的入口。

CSS-Tricks

Getting Clarity on Apple's Liquid Glass | CSS-Tricks

Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the context of Liquid Glass, as well as techniques for recreating…