Print lab

六个印刷、贴纸和手记元素的研究版本。内容借用 SubLime Captions 案例,文字是样稿。手写批注这里用 SVG 笔画代替,定稿时换成本人笔迹扫描。所有动画在“减少动态效果”设置下直接显示终态。

01 · Proof marks

校对批注

设计决策写成校样上的修改:删掉的旧方案、插入的新方案、圈出的问题,批注编号对应页边说明。笔画滚到时画出来,每次打开笔画略有不同。A 是红笔校样,B 是铅笔加荧光笔。

A · Red pen

My first prototype asked for context in four fields: Speaker Names, Topic, Keywords and Additional Context. The corrections were good enough to prove the idea. But filling it in felt like paperwork. Before typing anything, you had to decide which box each fact belonged in.

  1. The real problem. Not the AI.
  2. Let the model sort it.

B · Pencil + highlighter

My first prototype asked for context in four fields: Speaker Names, Topic, Keywords and Additional Context. The corrections were good enough to prove the idea. But filling it in felt like paperwork. Before typing anything, you had to decide which box each fact belonged in.

  1. The real problem. Not the AI.
  2. Let the model sort it.

02 · Dot stickers

圆点筛选贴

Work 页的筛选器。选中项贴上一枚板块色圆点贴,角度每次不同;换选项时旧的那枚被撕掉。A 撕掉后什么也不留;B 留下一圈淡淡的残胶,记得你看过哪些板块。

A · Clean peel

  • SubLime Captions
  • Same Money, Different Story
  • Postmo
  • Insomniac Sparrows
  • Shader studies

B · Glue residue

  • SubLime Captions
  • Same Money, Different Story
  • Postmo
  • Insomniac Sparrows
  • Shader studies

03 · Crop-mark focus

裁切线焦点框

键盘焦点框画成裁切线。点一下示例区域,再按 Tab 试。A 是四个 L 角;B 的角从外面收拢对准,带一个套准靶;C 先出一套错版色的角,再和墨线角对准。打开“全部显示”可以不用键盘直接看。

A · Corners

B · Register in

C · Off-register

04 · Vellum

硫酸纸叠加

旧方案印在一张硫酸纸上,盖在新方案上面,透过纸能隐约看到底下的成品。A 拖动下边的把手(或聚焦后按方向键)把纸往上掀;B 点按钮,纸沿上边翻过去。

A · Lift

After: one prompt box for everything the AI should know
After
Before: the AI Studio prototype with four fieldsBefore · 2024
↑ Lift

B · Flip over

After: one prompt box for everything the AI should know
After
Before: the AI Studio prototype with four fieldsBefore · 2024

05 · Index tabs

索引贴目录

案例页的章节导航做成从页面右边缘伸出来的索引贴,正式页面里固定在屏幕边缘。滚动时当前章节的那张凸出来,点击跳转。A 每张一种板块色;B 都是纸色,只有当前那张换成本页的套印色。

[ 01 ]

Context

A YouTuber friend’s interview videos took longer to caption than to edit. Each 15 to 20-minute video produced 800 to 1,000+ subtitle lines.

[ 02 ]

Case 1

I replaced a four-field form with one prompt box. The model tells background, names and instructions apart on its own.

[ 03 ]

Case 2

Every AI edit stays visible and can be undone, for one line or a whole paragraph.

[ 04 ]

Case 3

Selecting 200 lines takes one drag: drag, invert and jump, and search the way people remember.

[ 05 ]

Case 4

Proofreading and translation run in either order, with three controls that appear only for translation.

[ 06 ]

Outcome

Proofreading and translating an interview went from 8 to 12 hours to about 1 hour.

[ 07 ]

Reflection

Building with real data from day one changed how I validate design. Next: test with a wider group of creators.

06 · Sticky-note wall

便利贴研究墙

研究发现按亲和图分组贴在墙上。悬停时便利贴下沿翘起,点一下撕下来翻到背面,看“所以我做了什么”。再点贴回去。颜色只用站内的 aqua、orchid 和纸色。

Giving context

Trust

Selecting