设计语言 · 手帐

一页认真整理过的手帐

视频是素材,笔记是你整理好的那一页。界面像一本干净的手帐:暖白的纸、柔和的颜色、手写感的标题。工具退到边上,笔记放在中间。

原则

笔记是主角

界面保持安静,只有笔记用文楷标题和宽松的行距。

温柔一点

暖白底色,玫瑰色做主色,圆角和胶带一样的小装饰。不用冷硬的深色块。

出处要看得见

时间点做成淡紫色的小贴纸。按字幕对齐的是实心,估计的是虚线并写“约”。

不确定就标出来

视频没说的地方用蜂蜜色荧光笔标出,单独列在“做之前留意”里。

话要说短

一句话说一件事。状态写清楚发生了什么,出错时说下一步怎么办。

标志

圆角的玫瑰色方块里,播放键连着三行字:视频进来,笔记出去。

VidQuireVidQuire

颜色

暖白和可可色做底,玫瑰、淡紫、蜂蜜、鼠尾草绿各管一件事。

暖白页面背景--bg
卡片卡片和输入框--surface
纸笔记的纸面--paper
米色次要背景--bg-sunk
可可正文--ink-1
浅可可说明文字--ink-2
灰褐次要信息--ink-3
线分隔线--line
玫瑰主按钮和品牌--rose
淡紫时间点和链接--anchor
蜂蜜要留意的地方--check-bg
鼠尾草已保存--ok
砖红错误和删除--danger

字体

标题和笔记正文用霞鹜文楷,界面用无衬线,时间和数字用等宽。

display · serif 56把视频整理成笔记
doc title · serif 34柠檬磅蛋糕
doc body · 16 / 1.9黄油加细砂糖,打发到颜色变浅、体积膨大。正文用文楷,行距宽一些,读起来像手写的笔记。
ui · 14 / 1.6界面文字 14px,说明 13px。
mono · 1203:26 · 482/600 · 170 °C

两个记号

时间点和荧光标记是 VidQuire 的两个记号,所有出现时间或不确定信息的地方都用它们。

03:26时间点 · 按字幕约09:10时间点 · 估计06:51播放中
糖粉 视频未说明荧光标记2 处要留意计数

做之前留意

  • 糖霜的比例视频没有说。
  • 烤箱用的是上下火,已在 03:56 确认。

组件

食谱按字幕小红书常用
提示文字用灰褐色。
已保存。
这个视频需要登录才能看。 改成上传视频

放在一起

食谱卡和教程卡。