Todoist：17年的温暖极简主义与极致克制

7 分钟阅读 • 199 字
Todoist：17年的温暖极简主义与极致克制 screenshot

“终于，清晰了。” — Todoist

Todoist 在过去17年间始终坚持一个核心理念：最好的任务管理器是你真正会用的那个。2007年由 Amir Salihefendic 创立，Todoist 经历了每一次效率工具的潮流——GTD、子弹笔记、第二大脑、AI 智能体——却始终拒绝追逐复杂性。Doist，这家完全远程且盈利的公司，以一致性与克制而非新奇为设计哲学，服务着超过5000万专业用户。没有增长黑客，没有暗黑模式，没有在核心功能上设置”升级解锁”门槛。最终呈现的产品给人一种理所当然的感觉，仿佛任务管理器本就该是这个样子。

核心要点

  1. 一个品牌色就够了 - Todoist 仅在主要行动按钮和 logo 上使用红色（#E34432），其他地方一概不用。这种极致的克制让每一个红色元素都显得重要。
  2. 基于透明度的文字层次创造自然和谐 - 所有文字均源自同一种温暖的深棕色（rgb(37,34,30)），通过不同透明度（100%、66%、49%、18%、7%）来区分层次，完全消除了对多种灰色值的需求。
  3. 温暖的米白色不是白色 - 背景色 #FEFDFB（几乎难以察觉的奶油色）决定了界面是冷淡还是温馨，而大多数用户永远不会有意识地注意到它。
  4. 阴影几乎从来不是答案 - Todoist 完全通过色彩和间距来实现视觉层次。设计中几乎看不到任何阴影。
  5. 17年的精炼胜过17个功能 - 设计中没有任何元素看起来新潮或赶时髦。一切都像是经过近二十年的测试、精炼和验证。

为什么 Todoist 值得关注

Todoist 证明了持久性和克制是设计中的竞争优势。当竞争对手追逐功能对等和视觉潮流时，Todoist 的设计却通过减法进化——移除一切不服务于”捕获、整理、执行”核心循环的元素。产品对 AI 的态度（”Ramble”，将语音输入转化为结构化任务）也体现了同样的哲学：服务于现有工作流，而非创造新的交互范式。

核心成就： - 在所有平台（网页、iOS、Android、Mac、Windows）上以一致的视觉语言服务5000万以上专业用户 - 作为一家约100人的独立盈利公司，维持了慷慨的免费增值模式 - 构建了自然语言输入解析（”每周二下午5点买杂货”自动变成周期性任务），消除了表单填写的摩擦

核心设计原则

1. 单一品牌色

红色（#E34432）是唯一的品牌色。它出现在主要行动按钮、logo 和品牌展示时刻。仅此而已。没有辅助强调色，没有渐变，没有色彩系统。这种纪律本身就是设计——当所有元素都在争夺注意力时，什么都赢不了。通过将红色限制在真正重要的时刻，Todoist 确保了视线被精确引导到它需要去的地方。

悬停状态加深为 #CF3520，文字链接使用独立的蓝色（#0F66AE）以维持蓝色下划线文字可点击的惯例。但品牌本身是单一颜色，以外科手术般的精准度应用。

应用内的优先级系统仅在承载功能含义时才引入颜色：P1 紧急（#D1453B）、P2 高（#EB8909）、P3 中（#246FE0）、P4 默认（无颜色）。即便在此处，颜色服务于信息，而非装饰。

2. 基于透明度的文字层次

这是所有现代效率工具中最有纪律的排版系统。页面上每一段文字都是 rgb(37,34,30)——一种带有微妙暖色调的深棕黑色，与米白色背景相呼应。标题使用100%透明度。正文使用66%。弱化说明使用49%。边框和细微分隔线使用18%。背景色调使用7%。

这种单色调方法创造出多种灰色值无法实现的和谐感，因为每一个文字元素都共享相同的基础色，只是在存在感上有所变化。文字系统中没有灰色值，没有辅助颜色。

透明度阶梯：
100% ████████████████████ 标题、主要文字
 66% █████████████        正文、描述
 49% ██████████           说明、元数据
 18% ████                 边框、细微分隔线
  7% ██                   背景色调

全部源自 rgb(37, 34, 30)

3. 温暖极简主义

背景色 #FEFDFB——rgb(254,253,252)——与纯白色几乎无法区分。但差异就是一切。这种温暖的米白色创造了一种温馨的画布，使应用程序给人的感觉像是打开一本井然有序的笔记本，而不是启动一个冰冷的软件工具。产品截图在布局中自然浮动，无需厚重的阴影或边框来将它们与背景分离。

绿色表面（#F4FBF7）和灰绿色表面（#F6FAEB）通过同样微妙的色调变化提供区域区分。这些不是醒目的分区线——而是轻柔的环境变化，引导视线而不强求注意力。

可迁移的设计模式

Todoist 的设计系统因其简洁性而具有极高的可移植性。基于透明度的文字层次适用于任何项目——将 rgb(37,34,30) 替换为你自己的基础文字色，五个透明度级别即可创建一套即时、和谐的排版系统。

CSS 的实现揭示了这种方法的优雅之处：

:root {
  /* Todoist's warm minimal palette */
  --color-background: #FEFDFB;
  --color-surface-green: #F4FBF7;
  --color-surface-sage: #F6FAEB;
  --color-text: rgb(37, 34, 30);
  --color-text-secondary: rgba(37, 34, 30, 0.66);
  --color-text-muted: rgba(37, 34, 30, 0.49);
  --color-text-faint: rgba(37, 34, 30, 0.18);
  --color-text-whisper: rgba(37, 34, 30, 0.07);
  --color-brand: #E34432;
  --color-brand-hover: #CF3520;
  --color-link: #0F66AE;

  /* Typography */
  --font-sans: Graphik, "Graphik fallback", Arial, Helvetica, sans-serif;
}

/* Warm off-white body */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Hero — confident but not aggressive */
h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.55px;
}

/* Single-color CTA — red IS the elevation */
.button-primary {
  background-color: var(--color-brand);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  transition: background-color 0.15s ease;
}
.button-primary:hover {
  background-color: var(--color-brand-hover);
}

定制字体 Graphik（来自 Commercial Type）在几何体与人文体之间找到了一个甜蜜点——比 Inter 更温暖，比 Helvetica 更不拘谨。它中性的温暖感与米白色背景和棕黑色文字相得益彰。带有哈希值的文件名模式（Graphik-af49fcca2967e850）表明使用了 Next.js 字体优化，确保了系统字体无法保证的跨平台一致渲染。

标题在 55px/600 字重、1.15 行高下，明显比 Rivian 或 Obsidian 等品牌中常见的 1.0 行高更显亲和力。负字间距保持了一致的 -1% 比率（55px 时 -0.55px，38px 时 -0.38px），创造出比例化的紧缩效果，而非任意数值。

对于 SwiftUI，基于透明度的文字系统可以干净地转换：

extension Color {
    static let todoistBg = Color(red: 254/255, green: 253/255, blue: 252/255)
    static let todoistText = Color(red: 37/255, green: 34/255, blue: 30/255)
    static let todoistSecondary = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.66)
    static let todoistMuted = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.49)
    static let todoistBrand = Color(red: 227/255, green: 68/255, blue: 50/255)
    static let todoistSurface = Color(red: 244/255, green: 251/255, blue: 247/255)
}

// Opacity-based text hierarchy in practice
VStack(alignment: .leading, spacing: 8) {
    Text("Clarity, finally.")
        .font(.system(size: 55, weight: .semibold))
        .tracking(-0.55)
        .foregroundStyle(Color.todoistText)

    Text("Join 50+ million professionals who simplify work and life.")
        .font(.system(size: 16))
        .foregroundStyle(Color.todoistText.opacity(0.66))
}

设计启示

克制是一种竞争优势。 Todoist 的单一品牌色迫使每一个红色元素都必须有意义。当竞争对手使用三四种强调色时，什么都不突出。当 Todoist 只用一种时，行动按钮无法被忽视。

温暖的米白色背景改变了情感基调。 #FFFFFF 和 #FEFDFB 之间仅差三个 RGB 点——单独看几乎无法察觉，但整体效果却是颠覆性的。温暖的背景让整个体验感觉亲切而人性化。冰冷的白色让界面感觉像工具。温暖的米白色让界面感觉像你愿意停留的空间。

透明度层次比灰度阶梯更和谐。 同一基础色的五个级别创造出毫不费力的统一感，因为每一个文字元素共享相同的色调。五个不同的灰色值（如 #333、#666、#999、#CCC、#EEE）会产生微妙的不协调，因为每一个都是不同的颜色，而不仅仅是不同的强度。

当间距和色彩足够时，避免使用阴影。 Todoist 证明了整个视觉层次可以在没有投影阴影的情况下运作。红色行动按钮之所以突出，是因为它是温暖、柔和画布上唯一的饱和色——而不是因为它漂浮在表面之上。这种方法更经久耐看，且在不同设备上渲染更加一致。

当温暖是品牌核心时，营销页面避免使用深色模式。 温暖的米白色画布是 Todoist 的身份标识。深色模式存在于应用中（长时间使用时更实用），但营销网站始终是浅色的。启示：如果温暖是你品牌的核心，请在最显眼的界面上保护它。

避免潮流化的排版极端。 没有 100px 以上的展示文字，没有极端的负字间距，没有 800 字重。Graphik 在 600 字重时已经是最粗的了。这种克制意味着设计不会让自己过时——它五年前看起来合适，五年后依然合适。

常见问题

是什么让 Todoist 的设计感觉”浑然天成”而非”刻意设计”？

十七年的持续打磨。每一个元素都经历了多次设计潮流的考验，却从未被更时髦的方案所替代。温暖的米白色背景、单一的红色强调色、基于透明度的文字层级体系，以及 Graphik 字体——这些都不是追逐时尚的选择，而是经过近二十年验证的经久之选。当没有任何元素显得多余或赶时髦时，设计便浑然天成。

Todoist 基于透明度的文字层级体系是如何运作的？

页面上所有文字使用同一种颜色——rgb(37,34,30)，一种温暖的深棕黑色——通过五个透明度级别呈现：100% 用于标题，66% 用于正文，49% 用于说明文字，18% 用于边框，7% 用于背景色调。因为每个元素共享相同的基础色相，层级体系自然协调统一，无需使用多种不同的灰色值。

为什么 Todoist 只使用一种品牌色？

克制即是设计策略。通过将红色（#E34432）限定于行动号召按钮和品牌关键时刻，Todoist 确保视线精准聚焦于需要关注的位置。没有第二种强调色争夺注意力。单一品牌色的自律也简化了跨平台的一致性——同一种红色在网页、iOS、Android、Mac 和 Windows 上的表现完全一致，无需复杂的色彩系统。

设计师能从 Todoist 的 AI 功能设计中学到什么？

Todoist 的 AI 功能”Ramble”将语音输入转化为结构化任务，而非引入聊天机器人或全新的交互范式。其启示在于：AI 应服务于现有工作流，而非创造新的工作流。设计通过将自然语言输入置于最显眼的位置来支撑这一理念——输入或说出一句话，系统自动完成解析。没有 AI 品牌标识，没有聊天气泡，没有为了新奇而新奇。

Todoist 如何在不使用阴影的情况下实现视觉层级？

仅通过色彩和间距。温暖的米白色背景（#FEFDFB）提供了一块素雅的画布。单一的红色行动号召按钮因其是整个色板中唯一的饱和色而格外醒目。文字层级通过同一基础色的大小和透明度变化来建立。区域区分则使用向绿色（#F4FBF7）或鼠尾草色（#F6FAEB）的柔和色面过渡。最终呈现的是一种扁平、统一的设计，历久弥新，在每一种设备上都能一致渲染。

参考资料