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.