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.

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

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

Design Scenes

#92 Liquid Glass 之外 Apple 的改变

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

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 摘要： 本文通过对 100 多个开发者工具登陆页面进行深入研究，总结了 2025 年有效的设计与布局策略。作者 Anton Lovchikov（Evil Martians 设计负责人）分析了从 Linear 到 Vercel 等知名工具的页面，提炼出适用于早期产品的高效结构：包括英雄区、信任模块、功能展示、社交证明、支持模块和最终行动号召（CTA）。文章强调简洁设计、用户导向的故事叙述以及建立信任的重要性，同时提供了基于研究的开源模板，助力开发者快速构建登陆页面。

1. 引言与研究背景
• 介绍了研究的目的：帮助开发者工具创建者避免设计中的常见错误，快速构建有效的登陆页面。
• 研究对象为 100 多个开发者工具页面，涵盖从早期初创公司到成熟产品的案例。
• 提供了一个基于研究的开源模板，供快速部署使用。

2. 总体布局注意事项
• 核心原则：避免过度销售，注重简洁与巧妙设计。
• 大多数页面采用居中布局与最大宽度容器，确保可读性与开发速度。
• 少数页面采用全宽设计以突出高端感，但执行难度较高。

3. 英雄区（Hero Section）
• 设计趋势：居中布局，带有静态或动态产品展示及引人注目的 CTA。
• 视觉元素类型：动态 UI 演示、静态 UI 截图、可切换的多产品 UI、实时嵌入产品、代码片段或抽象插图。
• 附加元素：眉毛文本（Eyebrows）用于突出新发布或融资信息；顶部横幅传递更长信息。
• CTA 策略：主 CTA 醒目且具体，次 CTA（如查看文档）视觉上区分开。

4. 信任模块（Trust Block）
• 目标：通过展示客户 logo 或用户数据快速建立信誉。
• B2B 产品：展示知名客户 logo 或客户评价，常使用自动滚动轮播。
• 个人用户产品：突出数据指标（如 GitHub 星级、使用量）或奖项。

5. 功能展示模块（Feature Block）
• 核心：聚焦用户痛点与解决方案，而非单纯列举功能。
• 叙事方式：功能列表、任务导向故事、问题导向故事、大胆声明、使命陈述式叙事。
• 布局形式：全屏截图、棋盘式布局、图标文本、全宽卡片带、便当式网格、选项卡分组、步骤流程、富卡片设计、视频教程。
• 附加支持：包括“工作原理”说明、使用案例、兼容性与集成展示。

6. 社交证明模块（Social Proof Block）
• 策略：精选用户评价，注重相关性与正面反馈，通常位于页面底部。
• 呈现方式：简洁引用，包含用户头像、姓名及公司 logo。
• 创新模式：将用户评价与功能模块结合，增强上下文相关性。

7. 支持模块（Supporting Blocks）
• 非必需但常见模块：包括 FAQ、对比表格、定价信息、博客或更新日志预览。
• FAQ：以折叠式设计解答常见问题。
• 对比表格：突出产品优势，适用于竞争激烈的市场。
• 定价：简洁展示不同计划，常链接至单独页面。

8. 最终行动号召（Final CTA）
• 设计：醒目且独立的全宽模块，使用对比背景色与简短激励信息。
• 目的：抓住未在早期点击的访客，提供最后转化机会。
• 创新案例：嵌入日历小部件，便于直接预约沟通。

9. 快速部署工具
• 提供基于研究的无冗余模板，适用于开发者产品，支持 Webflow 和静态 HTML 版本。
• 鼓励读者免费获取并快速应用。

evilmartians.com

We studied 100 dev tool landing pages—here’s what really works in 2025—Martian Chronicles, Evil Martians’ team blog

While designing a landing page template for dev tool startups, we reviewed 100+ real product sites. Along the way, we uncovered practical insights—here’s what’s worth knowing if you’re building one yourself.

Adrian (@uiuxadrian): Bad typography kills good app design.
Most designers guess font sizes instead of using proven standards.
Here's the ultimate guide to UI font sizes for mobile apps (iOS):

🧵 Thread • FixupX

Adrian (@uiuxadrian)

Bad typography kills good app design.

Most designers guess font sizes instead of using proven standards.

Here's the ultimate guide to UI font sizes for mobile apps (iOS):

AI 摘要：本文详细介绍了如何使用 CSS 滚动驱动动画（Scroll-Driven Animations, SDA）创建一个随着用户滚动页面而动态变化的粘性标题效果。通过结合伪元素和滚动时间轴，作者展示了如何实现标题文本的动态切换和动画效果，同时兼顾了浏览器兼容性和无障碍访问。文章从基础的语义化标记开始，逐步深入到动画实现、兼容性处理及用户偏好考虑，最后鼓励读者发挥创意，探索 SDA 的更多可能性。

1. 引言与背景
• 介绍了滚动驱动动画（SDA）作为一种强大的工具，可以根据用户的滚动位置动态变换页面元素，增强网站的互动性和吸引力。
• 作者分享了通过 SDA 实现主标题（h1）文本随滚动变化的创意，并将在本文中逐步拆解实现过程。
• 强调效果仅在支持 SDA 的浏览器（如 Chromium 系）中有效，且提供了不支持时的静态回退方案。

2. 动画效果的初步解析
• 探讨了文本动画的核心原理，灵感来源于早期的打字机效果。
• 通过伪元素的 content 属性实现文本内容的动态切换，而无需依赖宽度动画或特定字体，保持灵活性。

3. 构建基础结构
• 从语义化标记入手，使用 <main> 和 <section> 结构，包含多个带有标题和内容的section（如“Primary Colors”主题）。
• 初始 CSS 仅做基础样式调整，确保内容静态、语义化和无障碍访问，为后续动画效果奠定基础。

4. 添加滚动驱动标题
• 在页面顶部添加一个额外的 <h1> 作为动画标题，并通过 aria-hidden="true" 确保其对屏幕阅读器不可见。
• 其他静态标题使用 .srOnly 类隐藏视觉呈现，但保留无障碍访问支持，确保语义完整性。

5. 兼容性处理
• 使用 @supports (animation-timeline: scroll()) 检查浏览器对 SDA 的支持，不支持时隐藏动画标题，显示静态内容。
• 确保无障碍技术和不支持 SDA 的浏览器用户仍能访问完整内容。

6. 实现粘性标题
• 通过 position: sticky 和 top: 0 让动画标题固定在视口顶部。
• 添加背景、边距等样式优化视觉效果，确保标题在滚动中清晰可见。

7. 关键帧与滚动位置
• 使用自定义脚本显示滚动进度百分比，帮助确定标题切换的精确位置（如 30%、60%、90%）。
• 通过伪元素的 content 属性和滚动时间轴，设置关键帧以切换标题文本。

8. 文本动画细节
• 清除动画标题的初始内容，使用伪元素动态填充文本。
• 设置 animation-timing-function: step-end，确保文本在指定关键帧处精准切换。
• 手动编写关键帧，逐步增减字符，模拟打字动画效果，增强过渡自然感。

9. 用户偏好与无障碍
• 考虑 prefers-reduced-motion 偏好，使用媒体查询禁用动画，提供静态替代方案，照顾对运动敏感的用户。
• 强调无障碍设计，确保内容对所有用户可访问。

10. 效果扩展与创意
• 提出动画标题的多样化实现，如固定部分文本，单独动画其余部分，或通过 SDA 改变颜色、背景等。
• 展示如何叠加多个滚动驱动动画，丰富视觉效果。

11. 总结与号召
• 强调 SDA 不仅是炫酷技巧，更是网页设计的革新工具，能显著提升用户体验。
• 鼓励读者尝试 SDA，探索创意可能性，并分享作品、想法或问题，激发社区交流。

CSS-Tricks

Scroll-Driven Sticky Heading | CSS-Tricks

I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven animations, change the headings based on the user’s scroll…

AI 摘要：本文由 Amit Sheen 撰写，详细介绍了如何使用 CSS 和少量 JavaScript 创建一个交互式的聚光灯效果（Spotlight Effect）。该效果通过鼠标位置驱动 CSS 自定义属性，结合背景渐变、滤镜和混合模式等技术，实现动态、流畅的视觉交互。文章从基础设置开始，逐步深入到复杂的“粘性”效果、图案设计、移动端适配以及主题切换等内容，旨在启发开发者探索 CSS 的创意潜力，同时注重用户体验和无障碍访问。

AI 摘要：本文探讨了通过 CSS 和 JavaScript 实现高级自定义光标样式的方法，强调在提升视觉效果的同时需兼顾用户体验和可访问性，强调谨慎替换原生功能，保持默认可访问性，避免过度设计。

CSS-Tricks

Next Level CSS Styling for Cursors | CSS-Tricks

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

AI 摘要：本文介绍了如何设计高转化率的表单。文章涵盖了表单设计的重要性、表单构成要素（操作、描述符、输入控件、反馈机制）、表单类型（简单表单、向导式表单、可导航表单）、十个表单设计最佳实践（简洁、清晰标签、避免只用占位符文本、分组相关字段、单列布局、有效处理错误、预防错误、启用内联验证、确保无障碍性、移动端优化）以及三个表单创建工具（Typeform, Zoho Forms, Jotform）的优缺点。核心要点在于：保持表单简洁明了，减少摩擦以鼓励填写完成，优先考虑无障碍性和包容性。

LogRocket Blog

Better form design: UX tips, tools, and tutorial - LogRocket Blog

When designed well, forms can leave a user feeling delighted and accomplished. These guidelines can help you create a smooth user experience.