笔记应用设计:首页改版前后对比

笔记应用的首页只有一个任务:带你找到想要的那条笔记。下面的初稿具备找笔记所需的一切,但它用六种颜色画了十二张便签,正文只有 8 px;又加了八个颜色各异的标签;你还没读一个字,它就先警告你存储空间;最后还在一条笔记上方悬浮了一个加号。

修改后的版本保留所有功能,只去掉笔记周围的装饰。彩色标签变成细线文件夹胶囊,置顶的笔记变成两个白色卡片,其他笔记都变成朴素的一行,搜索则是朴素标题下面的一个灰色输入框。

整个页面,改版前后

新手初稿

修改后

左边,所有东西都在用同样的音量大喊。六种便签颜色、八种标签颜色、一条黄色横幅和一个黄色加号互相争抢,而笔记本身反倒是屏幕上最小的东西。

右边,页面按人的思考顺序来读:这是什么、能不能搜、哪个文件夹、我置顶了什么、还有什么。唯一的颜色只存在于笔记内部。

改了什么,用数据说话

修改 1:朴素的标题和一个搜索框

之前

之后

一个很小的衬线字标压在“全部笔记 (128)”上方,旁边有按修改日期排序的下拉菜单、两个视图切换和一个搜索图标,下面是黄色存储横幅和“立即升级”按钮。对比之下是大号“笔记”标题、三点菜单,以及一个写着“搜索”二字的灰色搜索框。

初稿的页头在你看到任何一条笔记之前,就放了七个控件:菜单、字标、数量、排序、两个视图切换和一个搜索图标。然后一条横幅告诉你已经用了 85% 的空间,还带一个付费按钮。

修改后的版本给页面起了名字,也给了入口。“笔记”是 34 px 粗体。搜索是一个通栏输入框,10 px 圆角,浅灰色(#F2F2F7),看起来就是个输入框,没人需要猜那个图标是不是搜索。

排序和视图依然存在,只是收在三个点后面。存储警告和升级移到了“我的”,那是人们管理账号的地方。

可复用的规则:屏幕顶部应该给它命名,并提供主要入口。其他一切都放进菜单。

修改 2:用文件夹胶囊代替彩色标签

之前

之后

八个很小的实心标签,工作是红色,灵感是琥珀色,日记是绿色,个人是蓝色,旅行是青色,食谱是橙色,家是紫色,书是粉色,全都挤在一行里。对比之下是细线胶囊,写着“全部、工作、灵感、日记、旅行”,“全部”填充为黑色,其余的延伸出右边缘。

八个标签、八种颜色,用不了多久就没法靠颜色区分,而且 9 px 很难点中。它们还刚好填满一行,所以这一行看起来已经完整,完全没暗示还有更多。

修改后使用 32 px 的细线轮廓胶囊。被选中的“全部”填充为黑色,其余保持朴素,“旅行”之后的文件夹从右边缘滑进来。被屏幕边缘切掉一半的胶囊会告诉拇指可以滚动,根本不需要箭头。

可复用的规则:用填充来表示选中项,而不是给每一项配一种不同的颜色。

修改 3:把常用笔记置顶成两个白色卡片

之前

之后

一排三张彩色便签,黄色、粉色和蓝色,每张的上角各有一个很小的图钉和更多图标,文字为 8 px。对比之下是带琥珀色图钉的“置顶”标题和两个白色卡片:一幅小木屋铅笔素描,标题为“小木屋翻新”,时间为 2 小时前;另一个是发布清单的文字预览,带标题和上午 9:12。

在初稿里,置顶的笔记和其他笔记看起来一模一样,只多了一个 11 px 的图钉图标。前两张便签就是修改后版本里被置顶的那两条笔记。置顶并没有改变它们的待遇,所以也完全没让你更容易找到它们。

修改后的版本给置顶笔记单独的区域和单独的形状。两个 169 px 的白色卡片,12 px 圆角加细线边框,放在“置顶”标题下面。小木屋笔记显示它的素描,发布清单显示文字预览,每个卡片下面都有 14 pt 半粗体标题和 12 pt 日期。现在置顶会改变你看到的内容,这才是置顶的意义。

可复用的规则:如果某个状态很重要,就给它在屏幕上一个位置。一张相同卡片上的小图标不算位置。

修改 4:其他每条笔记都是朴素的一行

之前

之后

两排彩色便签,绿色、橙色、紫色、黄色、粉色和蓝色,每张都塞满很小的正文,底部有“编辑于”日期。对比之下是白底上的四个朴素行:五月的里斯本、酸面包笔记、书籍灵感和晨间笔记,每行是 16 pt 标题,下面有日期和一行正文,行与行之间用细线分隔。

便签会完整展示一条笔记,所以你只能得到几行 8 px 的文字。读不了,也扫不了,十二张就占满了整个屏幕。六种颜色没有任何含义,所以你从中什么也学不到。

修改后是一个列表。每条笔记是 16 pt 的标题、一个日期,以及一行 14 pt、以省略号结尾的正文。每行高 57 px,行间有细线,所以置顶卡片下面大约能放下八行。你一眼就能读完所有标题,并凭第一行打开对的笔记。

可复用的规则:列表用来找东西,卡片用来看一样东西。选和任务匹配的那个。

修改 5:标签栏和新建按钮

之前

之后

初稿的底部:一个黄色圆形加号按钮压在最后一条笔记上,下面是一条扁平的标签栏,有五个带文字的标签,笔记、每日、任务、标签和我的,图标实心与线框混用。对比之下是一个带四个图标的悬浮胶囊,其中一个被选中,笔记从它下面延伸过去,旁边另有一个带铅笔的琥珀色圆形新建按钮。

初稿把一个悬浮加号压在最后一条笔记上,所以它会遮住文字。它的标签栏有五个带文字的标签,“笔记”图标是实心的,其余都是线框。

修改后做成两个控件、两项职责。一个 52 px 的纯图标胶囊放四个标签,统一一种图标风格;旁边是一个 52 px 的琥珀色铅笔新建按钮。笔记在两者下方继续延伸,所以整个页面像一个长列表,而不是被一条栏截断的列表。“标签”这个标签页没有了,因为文件夹胶囊已经承担了它的作用。

可复用的规则:把“新建东西”的按钮放在拇指所在的位置,并给它独有的形状和颜色,这样就不会被误认为导航。

那些更小的修改

• 所有功能都保留。 搜索就是标题下面的输入框。按修改日期排序和网格、列表切换都在三点菜单后面。“全部笔记 (128)”变成了“全部”文件夹。更多按钮在每条笔记内部。存储警告移到了“我的”。
• 统一边距。 初稿左边 14 px,右边 12 px。修改后的页面两侧都是 20,区块之间间隔 10 px。
• 一种强调色。 琥珀色(#F5B301)只用在置顶图标和新建按钮上。其他全是黑、灰、白。
• 能读得清的字号层级。 初稿的字号从 8 到 14 px。修改后从日期的 12 px 开始,到标题的 34 px。
• 真实内容。 素描卡片显示的是一幅真实的画,而不是一个彩色方块,所以置顶区域在你打开之前就能展示这条笔记的内容。
• 没有字标。 初稿的页头有一个衬线字标 Margin。修改后的页面没有,因为在 Apple Notes 里,页面标题就是页头。

审查你自己的笔记页面

获取 Figma 文件

免费文件包含新手初稿、修改后的页面,以及每个部件的组件。

免费 Figma 文件

笔记应用改版前后对比

两个页面以及每个部件的 Figma 组件。免费,仅供查看,请复制到你的草稿中。

在 Figma 中打开

FAQ

笔记应用首页应该怎么设计?

先放一个朴素的标题和一个搜索框,然后是文件夹胶囊、简短的“置顶”区域,以及每条只有标题和一行文字的笔记列表。把警告和促销挪开,让笔记成为屏幕上最醒目的东西。

笔记应用该用网格还是列表?

找笔记用列表,因为标题加一行文字一眼就能读。完整卡片的网格只有在每张卡片大到能读时才行得通,而宽度 117 px 时,文字会缩到 8 px。

笔记应用该用几种颜色?

一种强调色。Apple Notes 只用一种琥珀色来表示置顶和新建按钮,其他都保持中性,所以颜色由笔记自己来承载。

笔记应用里的存储警告该放哪儿?

放在“我的”或设置页面,或者只在用户接近上限时显示一条小提示。第一条笔记上方的横幅,会让每次访问都以一条销售信息开场。

笔记应用里的置顶笔记应该是什么样?

作为“置顶”标题下的独立区域,显示为两个带预览、标题和日期的卡片。一张相同卡片上的图钉图标并不会让笔记更容易找到。

来源

• 两个页面都是我们自己在 Figma 中设计并测量的。应用 Margin 及其所有数据都是虚构的。两个页面里的笔记是一致的:两个置顶卡片就是初稿的前两张便签,列表行则是接下来的便签,标题、日期和开头一行都相同。
• 研究的模式:iPhone 上的 Apple Notes。
• 照片:Sofya Borboris 在 Pexels 上的铅笔素描,已摆正、裁剪到画面并放在白底上。没有使用 AI。
• 图标来自 Phosphor (MIT)。状态栏是根据测量过的 iPhone 截图绘制的。初稿的字标字体是 Libre Caslon Display Regular。
• 最初作为轮播图发布在 App Brainy。