第一期 · 每周 UI 拆解：Superlist、Raycast、Linear、Cursor
2025年4月24日 · 809 字
本系列旨在提升自己对优秀 UI 设计的敏感度。每周挑选几个设计优秀的网站，结合自己的感受和设计分析，从「用户视角」和「设计角度」两个方面来进行拆解分析。
🥇 1. Superlist – 情绪驱动的任务工具
用户感知：
- 第一屏的动效演示无需下滑就能立刻理解产品的核心功能，非常适合视觉型用户。
- 整体氛围温柔、不冰冷，有别于传统 to-do 工具那种压迫感，让人愿意使用。
设计角度：
- 使用了大量白底+柔和渐变，强化“轻盈感”。
- 字体选择自由而带情绪（如标题非严肃黑体，而是更现代温柔的款式），配合插画式的动画营造轻松氛围。
- 动效自然且功能导向，不炫技，反而增加了理解度。
🥈 2. Raycast – 给“懂”的人看的高效工具官网
用户感知：
- 首页虽然很酷，但不下滑的话不太能理解产品用途。
- 对现有用户或听过这个产品的人来说非常友好，陌生用户需要花时间探索。
设计角度：
- 整体视觉语言极简，使用深色背景+简洁图标，强调效率与专业感。
- 字体层级与间距控制精细，强化“Apple 生态原生感”。
- 缺点是信息传递优先级偏后，更像是“口碑传播后来的巩固官网”。
🥉 3. Linear – 极简美学与系统感的范本
用户感知：
- 首页视觉非常干净、专业，适合喜欢高效率工作风格的人。
- 但加载不稳定有时首屏卡住，反而影响了第一印象。
设计角度：
- 使用黑底界面是一种高难度设计方式，Linear 利用 blur+阴影+精致截图很好地强化了层次。
- 全站设计语言极其统一，从字体、配色到按钮，贯彻系统性设计原则。
- 它给人的感受不是“漂亮”，而是“每一项都合逻辑”，这正是高级 UI 的标志。
🌈 4. Cursor – 直接告诉你我是谁，我能做什么
用户感知：
- 第一眼就能知道它是“AI 编程编辑器”，大标题直白有力。
- 背景动效简洁直接，没有冗余讲解，非常高效。
设计角度：
- 使用复古 CRT 式彩色渐变背景，但搭配极简按钮和白底文字，营造出“新科技 + 未来感”的 UI。
- 字体选择上，大标题为无衬线大字，正文为等宽字体，进一步强化了“这是为程序员打造的工具”这一产品定位。
- 页面排布集中、聚焦，没有多余干扰项，设计上体现出「我知道你来这里是干嘛的」的产品自信。
🧩 总结思考
在这次拆解中，我发现自己更容易从是否能快速传达信息来判断一个 UI 的好坏，而通过设计视角的补充，我慢慢意识到——
- 配色、字体、动效等设计细节，是为了让产品传达得更有效、更一致。
- “好不好看”是一回事，但“有没有符合产品气质”和“能否承载内容”更关键。