任务应用设计:Today 页面改版前后对比

任务应用应该让人感觉是在帮忙。下面的初稿清楚地知道今天有什么要做,然后却用每行一个红色日期、每个优先级一个彩色标签,还有一个停在最后一项上的按钮来表达。读起来像警报。修改后的版本保留了每个任务和每条信息,只是把警报的音量降到了一份安静清单的水平。

整个页面,改版前后

新手初稿

修改后

左边,每个任务都带有描述、最多三个标签、一个红色日期和一堆头像。右边,每个任务只有一行半,眼睛第一眼落在的就是列表。

数一数眼睛要处理多少东西。初稿有一个带底色的进度框、五种颜色的五个筛选标签,每个任务还有描述、彩色标签、红色截止日期,常常还有一簇头像。修改后的页面只有一个圆环、一个三段式切换和一个列表。

修改 1:进度用圆环和一句话

之前

之后

分数、两位小数的百分比、进度条加一句打气,对比一个圆环加一句话。

初稿把同一件事说了三遍:“1/5”、“20.00%”,还有一条五分之一满的进度条。两位小数就是破绽:“20.00%”是程序打印出来的数字,不是人需要的数字。它下面那行字又小又灰,还以两个感叹号结尾。

修改后只选一幅图,20% 的圆环,再加一句包含两个关键事实的话:五项完成一项,还剩四项。这句话以有用的部分结尾,“下一项在下午 4:00”,告诉用户接下来该做什么,而不是给他们加油。

圆环用的是品牌红,和添加行、当前标签栏是同一个红色。

修改 2:按时间筛选,而不是按颜色

之前

之后

五种颜色的五个优先级和状态标签,对比一个切换里的三个词。

初稿的标签混合了两个问题。高、中、低问的是任务有多重要,已完成问的是任务处于什么状态,全部 (5) 问的是所有任务。这五个标签用了五种颜色和两种圆角,连形状都不统一。

用户要使用它们,必须先学会红色代表紧急、橙色代表中等、绿色代表低,而且

修改后只问一个问题,也就是人们对待办清单会问的那个:什么时候。全部、今天和即将到来是一个切换里的三个词,读起来就是一个控件、一个选中状态,而且和下面的标签栏相呼应:今天标签、即将到来标签。优先级并没有消失。它移到了每一行上,变成一个小圆点(修改 3)。

修改 3:一个任务一行半

之前

之后

每个任务有标题、描述、标签、红色截止行和头像,对比标题、时间和清单。

初稿中的每个任务可以带五种信息:描述、最多三个彩色标签、红色的“截止:10/24/2026 5:00 PM”、一组头像和一个复选框。“紧急!!”作为标签出现在一个截止行本来就已经是红色的任务上。每个任务都是今天到期,每个截止日期都是红色,于是红色不再代表逾期,而是变成了“这里有个任务”。

修改后每个任务只有一个标题和一行灰字:时间,以及它所属的清单。“下午 5:00,工作”。日期去掉了,因为页眉已经说明了是哪一天。

标签合并成了清单名。优先级变成右侧的一个小圆点,第一个任务是红色,第二个是橙色,没什么需要标记的就没有圆点。已完成的任务留在列表中,带删除线并标注“已完成”,勾选框填充为品牌红。

这些任务放在一张白色卡片里,之间用细分隔线隔开,所以列表读起来是一个整体。

修改 4:“添加任务”放在列表末尾

之前

之后

遮住最后一个任务的悬浮按钮,对比列表末尾的一行。

悬浮按钮会跟着用户走,并遮住下面的一切。初稿中它压在最后一个任务上,切掉了该行右侧的头像,而且它是页面上最重的对象:56 px,饱和的红色,还带阴影。

修改后做的是列表该做的事:以你可以往里添加的东西结尾。“添加任务”就放在最后一个任务结束的位置,带一个小加号,和其他操作用同一个红色。没有阴影,也没有任何东西被遮住。读者滚动列表时本来就在看列表末尾,所以添加操作就在眼睛停下的地方。

更小的修改

• 四个标签,而不是五个。 今天、即将到来、浏览和个人取代了今天、即将到来、项目、搜索和个人。
• 一个边距。 初稿左边 14 px,右边 12 px。修改后两侧都是 20 px。
• 一个像样的页眉。 “我的任务”加完整日期,变成大号“今天”上方一行小字“10月24日 星期六”,头像换成了铃铛。
• 一种红色。 品牌红 #E5484D 覆盖圆环、添加图标和当前标签栏。红色文字用更深的 #D92D20,保证可读。
• 一套像样的字号体系。 文字从 8 到 20 px 改成 iOS 的 11 到 28 pt。

审查你自己的任务应用

获取 Figma 文件

免费文件包含两个页面的组件、每处修改的前后对比、颜色变量和 iOS 文字样式。

免费 Figma 文件

任务应用 Today 页面,改版前后

两个页面和每个修改后的部分,都是 Figma 组件。免费,只读,可复制到你的草稿。

在 Figma 中打开

常见问题

任务应用的 Today 页面应该显示什么?

今天的进度、在全部、今天和即将到来之间切换的方式、带时间的任务列表,以及“添加任务”操作。描述和长日期可以放到任务详情里。

任务应用应该如何显示进度?

用圆环或进度条加一句话,比如“5 项中完成 1 项”。不要把同一个数字同时用分数、百分比和进度条打印出来。如果显示百分比,就取整。

任务应用应该如何显示优先级?

在需要的行上用一个小圆点或旗标,而不是给每个任务都加彩色标签。优先级也可以作为筛选或排序,但不必是主要的那个。

待办应用应该用悬浮添加按钮吗?

悬浮按钮很常见,但在列表页面上它可能遮住最后一项。列表末尾的“添加任务”一行不遮挡任何东西,还处在眼睛停下的位置。

待办应用的筛选应该是什么?

人们会问的问题:全部、今天和即将到来。每个控件只问一个问题,不要在同一行里把优先级筛选和状态筛选混在一起。

来源

• 两个页面都是我们自己的作品,在 Figma 中设计和测量。任务、人物和客户都是为练习虚构的。5 个任务完成 1 个就是 20%。
• 照片来自 Pexels,作者为 pessoas uem、Iphanyi Ezemenari 和 Ajan Yogi。
• Apple Human Interface Guidelines: Typography,修改后页面使用的 iOS 文字大小出自这里。
• Apple Human Interface Guidelines: Color,关于不要只靠颜色传达含义。
• 最初作为轮播图发布于 App Brainy。