待办卡片 · Web / 移动端

把一张卡片的重点找回来

所有文字和按钮都一样醒目时,用户反而不知道先看哪里。

用户的任务快速识别任务内容,并找到下一步操作。

看见修改前后的差别

个人项目今天

给自己的产品,
做一次设计升级。

从标题、间距和一个主要操作开始。
让界面更清楚,也更好用。

预计 25 分钟

标题承担主要层级,时间成为上下文,主要操作集中在底部。

一步步拆解设计决定

  1. 01

    先排信息顺序

    先识别任务,再理解说明,最后决定是否执行。把这个顺序写下来再改样式。

  2. 02

    减少争抢

    降低辅助信息的视觉重量;不靠把字缩到看不清来实现。

  3. 03

    只留一个主操作

    “开始专注”获得强调,其他动作保持次要。

  4. 04

    检查边界内容

    标题变成两行时,操作仍在内容之后,不使用绝对定位。

把规则带进代码

IMPLEMENTATION NOTE
.task-title { font-size: 1.5rem; font-weight: 650; }
.task-meta { color: var(--text-secondary); }
.task-actions { margin-top: 1.5rem; display: flex; gap: .75rem; }
回到所有案例