日历 App 设计：日视图重设计前后对比

日历日视图只有一个任务：告诉你接下来是什么，以及今天还剩多少时间。下面的初稿什么都知道，但它把五个事件涂成五种刺眼的颜色，还加了月历网格，顶上再放一条红色提醒，结果没有什么比别的更重要。19 分钟后的会议和午饭一样重。

修复方案保留所有功能，只改变权重。长会议看起来就长，空闲时间就是空着，而此刻真正重要的那场会议，得到属于自己的一行安静展示。

整个屏幕，前后对比

初级草稿

修复后

左边，视线无处落脚。标题、四个按钮、红色横幅、月历网格和一摞饱和的卡片都在争夺第一眼。事件卡片是屏幕上最响的东西，而且它们一样响。红色用了两次：一次是提醒，一次是事件，于是红色不再代表任何意思。

右边，屏幕从上到下有清晰的顺序：我在这一周的哪里，接下来是什么，这一天其余时间长什么样。颜色很安静，只用来做一件事，就是区分事件。

改了什么，用数字说话

修复 1：把卡片变成时间线

之前

之后

五张堆叠的全彩卡片，蓝、红、橙、绿、紫，高度全都一样，每张都带铃铛、头像和标签。对比之下是一条时间线：有小时标签、一场灰色的已过会议、9:41 处的红线，以及四个带细颜色条的浅色块，其中午餐和客户电话比一对一会议更高。

卡片列表只会说“这里有五件事”，别的什么都不说。一小时的碰头和三小时的工作坊占一样大的空间，而它们之间的空隙，也就是人们真正想在日历里看到的部分，完全看不见。

时间线给一天一个形状。45 分钟的会议是矮块，长会议是高块，空闲时间是看得见的留白。颜色从整张卡片搬到了左侧的细条和背后的淡淡底色上，所以文字可以一眼读完，颜色仍然能区分工作电话和午饭。

两个小细节带有含义。Team Standup 是灰色，因为已经结束。一条红线标出 9:41，让你确切看到自己在一天中的位置。

可复用的规则：把时间表现为空间，把刺眼的颜色留给正在发生的那一件事。

修复 2：下一件事，一行安静的展示

之前

之后

一条带铃铛的红色横幅，写着“今天有 5 个事件。下一个事件在 19 分钟后”。对比之下是一行白色内容：Roadmap Review，红色的“19 分钟后”，旁边是 Zoom、三个小头像和一个黄色的“加入”按钮。

草稿里的提醒想用一句话告诉你三件事：有多少个事件，其中一个是下一个，以及什么时候。读起来像一条报错。没人需要知道今天有几个事件，因为屏幕上都显示着。

修复方案回答的是人们打开日历时只有的那个问题：下一件事是什么，我能加入吗？名称在最前面，红色的“19 分钟后”是屏幕上唯一的红色，36 px 的“加入”按钮就放在拇指够得着的地方。时间也对得上：状态栏显示 9:41，Roadmap Review 10:00 开始。

这个模式和 Notion Calendar 的加入按钮是同一种：会议、倒计时和一个动作。

可复用的规则：把描述这一天的横幅，换成帮你做下一步的一行。

修复 3：用一周换掉一个月

之前

之后

完整的月历网格，五行数字，许多数字下面有小小的彩色圆点，今天是一个小黄圈。对比之下是单独一行周条，每个数字上方有一个字母，3 日星期二是一个大的实心黄色圆，下面写着“11 月 3 日，星期二”。

月历网格回答的是日视图根本没在问的问题。它占用手机 158 px 的空间，只为展示 30 天的彩色圆点，而这些圆点看起来又和下面的卡片一样，所以屏幕上有两份相互竞争的同一件事的摘要。

周条保留了日视图所需要的：今天和它旁边的几天。一个实心圆标出今天，完整日期用文字写在正下方。月份还在：顶部的 11 月可以回到月视图，在周条上滑动就能翻一周。

可复用的规则：展示屏幕所关心的缩放级别。日视图需要的是一周，不是一个月。

修复 4：把四个按钮收进一个菜单

之前

之后

一个顶部栏，有 2026 年 11 月、两个箭头、一个文字标志、一个“今天”标签、搜索和设置图标，下面是四个同等大小的描边按钮：日、周、月、年。对比之下的顶部栏有返回箭头和 11 月、一个带箭头的小“日”菜单、一个搜索图标和一个加号图标。

四个同等大小的按钮在说，四种视图被使用的可能性一样。其实不是：人们待在一个视图里，很少切换。这些按钮占满一整行，还长得像它们下面的卡片。

修复方案把它们收进一个显示当前视图的小菜单。周、月、年只需点一下。搜索和添加变成朴素的 24 px 图标，设置留在标签栏里，文字标志也去掉了，因为屏幕就是产品，Apple Calendar 也没有。

可复用的规则：当各个选项的使用频率不均等时，显示当前的那一个，把其余的藏在它后面。

其他更小的修复

• 每个功能都保留。 箭头变成周条上的滑动。每个事件上的铃铛、标签和地点，打开事件后就能看到。
• 同样的事件。 五个事件在两个屏幕上都有，每个都以淡色底保留了原来的颜色。Team Standup 是灰色，因为已经结束，Roadmap Review 是品牌黄，因为它是下一个。
• 悬浮标签栏。 62 px，一天的内容从它下方穿过，屏幕用上了全部高度，标签栏也不再像一个单独的盒子。
• 没有悬浮按钮。 那个 52 px 的加号以前盖在最后一张卡片和上面的人头像上。现在它是顶部的一个图标。
• 均匀的边距。 草稿左边 14 px，右边 12 px。修复后的行在同一套网格上从边到边。
• 两边都是 Zoom。 Roadmap Review 在两个屏幕上都是 Zoom 会议，所以“加入”才有意义。

审查你自己的日历屏幕

获取 Figma 文件

免费文件包含初级草稿、修复后的屏幕，以及每个部分的组件。

免费 Figma 文件

日历日视图重设计，前后对比

两个屏幕和每个部分的 Figma 组件。免费，仅供查看，复制到你的草稿即可。

在 Figma 中打开

FAQ

日历 App 的日视图该怎么设计？

做成时间线，块的高度等于会议时长，用安静的淡色底和细颜色条，空闲时间留空，再加一条当前时间线。把下一场会议放在它上方的一行里。

日历 App 里怎么展示下一场会议？

用一行展示会议名称、“19 分钟后”这样的倒计时、参与者，以及有通话时的“加入”按钮。避免用统计今天事件数量的横幅。

日历 App 的日视图要显示月历网格吗？

通常不要。周条加今天的一个实心圆，就能提供日视图所需的上下文，月视图从顶部点一下就能到。

日历 App 需要几个视图按钮？

一个。用一个小菜单显示当前视图，这里是“日”，把周、月、年放进菜单里。

为什么日历里的全彩事件卡片不好？

当每个事件都很饱和，每个事件看起来都很紧急，颜色也就不再起到区分作用。浅色底加细颜色条既保留了分类，又让文字好读。

日历的“加入”按钮应该用什么颜色？

用品牌色，作为屏幕上唯一的实心按钮，红色只留给倒计时。

来源

• 两个屏幕都是我们自己在 Figma 中设计和测量的。App Sundial、人物和事件都是虚构的。时间是一致的：状态栏显示 9:41，Roadmap Review 10:00 开始，2026 年 11 月 3 日是星期二。
• 文字与对比度检查：墨色 #1B1A17 在万寿菊黄 #FFC233 上是 10.8 比 1。事件文字在其淡色底上分别是 8.1（黄）、6.5（橙）、6.8（绿）和 8.4（紫）比 1。红色的“19 分钟后” #D70015 在白色上是 5.4 比 1。
• 研究的模式：Apple Calendar 的日视图（左上角返回月视图、搜索和添加为朴素图标、周条上只有一个实心的今天、带颜色条的淡色块、空白即空闲时间），以及 Notion Calendar 的加入按钮。
• 之前屏幕中的文字标志：Playfair Display Bold。头像照片来自 Pexels：Peter Platou、Son Hoa Nguyen、Luthfi Ramaditya 和 Carlos Gutierrez。
• 最初作为轮播图发布在 App Brainy。