缕思

一个快速批量地组织卡片形成文章的AI辅助工作台

DEMO/PROTOTYPE

ROLE

体验设计师

TIME

2023.4—2023.6

DESIGN TYPE

体验与交互设计

TOOLS

Figma&Figjam

A

团队

RESEARCH


我与另外2人:

深度访谈、桌面研究、需求分析

DESIGN


我与另外2人:头脑风暴


我:MVP 设计、价值定位、设计原则定位;流程设计、UI工程、视觉语言

PROTOTYPE


我:Figma原型

缕思

一个快速批量地组织卡片形成文章的AI辅助工作台

缕思使一个使用AI帮助用户组织卡片文本,形成文章的平台,它帮助学生的卡片文本更易理解,也使学生对笔记印象更清晰,最终帮助学生解决堆积起来的早期笔记,将它们关联成有意义的文章。

————详细介绍————

背景

记录知识与技术革命


人类历史中,记笔记与写文章历程悠久。古代用石板、竹简记录,中世纪纸张普及后学者抄录经典写心得。文艺复兴时繁荣,近代印刷术发展使记笔记更普遍。现代信息电子设备成重要工具,始终推动社会进步。


卢曼卡片盒笔记法


20 世纪 60 年代,德国社会学家尼克拉斯・卢曼发明的笔记法通过文献笔记盒与永久笔记盒的配合使用,实现高效知识管理、促进思考创新并方便创作输出。


当代知识管理软件流行


以卢曼卡片盒笔记法、双向链接等概念为基础的笔记类应用和以云服务为基础的办公协作类应用在近年来期间大量涌现。为提高工作效率,学生、工作者等群体将从巨量的新兴应用中选择不同应用融入自己的工作流。


当代AIGC技术的兴起会对知识写作产生什么影响?

竞品

双向链接


Tara、Obsidian、Roam……

白板可视化


Heptabase、Scrintal、Milanote……

Block


Loop、notion、

卡片记忆


Anki、Remnote……

随手记


Flomo……

清爽写作


Bear、Ulysses……

竞品Feature均分布在视觉直观地编辑和回顾的维度上,且未应用AI技术

田野调研

我们将日常记录想法的本科生和研究生确定为我们的核心用户,我们使用多种设计方法进行研究,并通过一个交互式的原型来提供问题的解决方案。

情景访谈


我们发现学生在整理自己大量的笔记时感到厌烦

方法论


我们收集了使用竞品的用户对他的使用情况的反馈,并半结构化地访谈了一些对笔记产品颇有理解的用户。

发现


学生表示他们原本期望这种笔记法可以帮助自己在写作时节省时间获得启发,但是将零散的笔记整理成文档耗费了他们巨量的时间而感到厌烦。

“将零散的笔记整理成文档”耗费过量时间的原因是什么?

我们发现,在记录前期笔记或者灵感时,用户通常不注重写下的文字是否容易被阅读、理解或形成完整的文章,更注重于将脑海中涌现的词、句、图形全部复刻下来。由于想法逝去地很快且没有章节,而打字速度无法可以跟上想法的变化,他们碎片化地、不在乎数量地记录灵感,最后堆积成了数量庞大内容不完整的卡片,他们无法理解卡片意义,因此需要更长的时间回忆、阅读并理解。


由于整理笔记在PC端比移动端更方便,用户不会立刻整理自己的灵感笔记,而是在相当长一段时间后集中处理。堆积笔记并稍后批量处理的方法让用户早已忘记自己早期杂乱笔记的含义,也让笔记的数量倍增,进一步加剧了用户整理笔记的回忆和数量负担。

最终,用户期望快速地形成完整的文章,但是在连接/关联卡片时无法即时地理解并关联数量庞大、形式散乱的早期笔记,因此在花费了大量时间以回忆灵感后,才能重新关联为有意义的段落。

用户需求归纳

1

遗忘自己早期笔记的含义

  1. 无法快速便捷地整理、查看自己的笔记

  2. 无法在移动设备整理自己的笔记

  3. 无法形成定时整理卡片的习惯

2

不理解繁乱卡片的意义

  1. 没有办法快速地找到内容零散的卡片

  2. 没有足够打字速度以跟上想法

  3. 没有手段处理积攒一段时间后数量庞大的笔记

How might we

帮助学生理解繁乱卡片的意义,对卡片的记忆更清晰?

从而解决堆积起来的早期笔记,将它们关联成有意义的文章

Our Approach

一个使用AI帮助用户组织卡片文本,形成文章的平台。

AIGC Solution

AI使零散的文字容易地组织成有意义的、容易阅读的文本,而且可以创造性地关联看起来毫无关联的文本。AI可以帮助用户记录生活中的灵感与知识,并将零散的笔记组织成有意义的文章的过程。

Aspired Values

卡片文本易理解

学生无法理解卡片意义,因此需要更长的时间回忆、阅读并理解。

笔记印象更清晰

学生忘记自己早期杂乱笔记的含,加剧整理笔记的回忆和数量负担。

Design principles

想法记录更灵活

学生缓慢的记录速度无法跟上想法,导致记录的文本零散、不全。

卡片文本有意义

记录的文本零散、不全,导致流失大量信息使卡片难以阅读。

卡片连接更迅速

学生碎片化地记录想法,堆积了大量未处理卡片,难以快速处理。

笔记整理有习惯

学生不会立刻整理自己的笔记,笔记内容的记忆早已模糊,降低了连接卡片的速度。

笔记整理随心意

目前仅有PC端可供整理笔记,加剧了笔记整理的拖延。

卡片责任

学生群体需要承认自己生产的内容,而不是杜撰攫取的。

—————— 方案展示 ——————

缕思

一个快速批量地组织卡片形成文章的AI辅助工作台

卡片文本易理解

易阅读,快连接

1

语音、图像、文字快速输入

  • 设计前: 用户一边记录一边遗忘,记录信息不流畅。

  • 设计后: 语音、图像、文字,三种记录格式直接上传到库,加快用户记录速度。

随意记录,AI稍后整理

  • 设计前: 用户记录的卡片零散片面,可阅读性不高。

  • 设计后: 缕思的卡片建议系统将用户储存的笔记卡、灵感卡、文章卡整合起来,形成一个巨大的知识系统。

3

“清单”式连接新卡片

  • 设计前: 用户的未处理卡片大量堆积,难以快速整合。

  • 设计后: 建议卡片清单式排布,使连接旧卡片、判断新卡片更加快速。

4

卡片责任系统

  • 卡片建议系统上的三个按钮,“否定这张卡片”、“补充新卡片“、”认同这张卡片“,使用户可以预防AIGC写作自行编造文本的风险。

否定

补充新卡片

认同

灵感卡转笔记卡的建议:

人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。岑夫子,丹丘生,将进酒,杯莫停。与君歌一曲,请君为我倾耳听。

灵感卡

笔记卡

2023-05-24 12:06:42

卡片印象更清晰

1

限量整理,信息梳理

  • 设计前: 新卡片长时堆积,用户遗忘笔记含义。

  • 设计后: 每日限量整理笔记,通过形成习惯保持对卡片的新鲜记忆。

手指整理,笔记井井有条

  • 设计前: 无移动端笔记整理,加剧笔记整理的拖延。

  • 设计后: 在移动端整理笔记,随时随地地完成整理任务。

旅程图

记录、梳理、结构化

该应用的使用步骤包含基本三步:记录、梳理、结构化。通过这三个步骤,脑中的想法转变为灵感卡,再转变为笔记卡,最终成为文章卡。

记录

灵感卡

梳理

笔记卡

结构化

文章卡



灵感卡



灵感卡

2023-05-24 12:06:42



有建议标记的灵感卡



笔记卡

2023-05-24 12:06:42



灵感卡转笔记卡的建议



文章卡

2023-05-24 12:06:42

记录

在记录的过程中,用户可以通过录音、文本和图片三种文件格式来更灵活快速地记录想法,储存下来的灵感卡片将被AI分析,并为后续建议卡片做语料。

梳理

缕思应用分析用户的灵感卡给出建议的笔记卡,用户可以快速地查看提供的笔记卡来重新修整格式杂乱的灵感卡片。

结构化

缕思分析用户的笔记卡和文章卡给出建议的文章卡,用户可以快速地查看提供的文章卡来结构化自己所有的想法,而最终形成一篇巨大的文章。

在“记录、梳理、结构化”的用户旅程上,制作页面。

原型制作

依据设计理念建立用户旅程图

依据用户旅程图建立关键任务页面原型

依据任务建立全部页面原型

填充页面细节

建立交互式原型

设计呈现

记录

记录:用户可以通过录音、文本和图片三种文件格式来更灵活快速地记录想法,储存下来的灵感卡片将被AI分析,并为后续建议卡片做语料。

默认状态

文本键入中……

滑动选择语音按钮

语音录制中……

滑动选择相机按钮

拍摄实时图像……

梳理

梳理:缕思应用分析用户的灵感卡给出建议的笔记卡,用户可以快速地查看提供的笔记卡来重新修整格式杂乱的灵感卡片。

默认状态

卡片可组合状态

判断卡片组合可靠性

修改组合卡片内容

增加新卡片

形成笔记卡

结构化

结构化:缕思分析用户的笔记卡和文章卡给出建议的文章卡,用户可以快速地查看提供的文章卡来结构化自己所有的想法,而最终形成一篇巨大的文章。

形成文章卡

展开文章卡

卡片可组合状态

判断卡片组合可靠性

增加新卡片

设计系统

组件库(Components)

记录:用户可以通过录音、文本和图片三种文件格式来更灵活快速地记录想法,储存下来的灵感卡片将被AI分析,并为后续建议卡片做语料。

设计指令(Design Tokens)

Tokens:使用设计指令来控制设计中使用的颜色、间距、圆角等数量,同时能够快速批量更换颜色。

设计语言

Hex: FFFFFF

Hex: F0F1F1

Hex: DCDFE1

Hex: 00EBAA

Headline Large

FZLTHProS

Bold

20

FZLTHProS

Regular

12

Headline Midium

FZLTHProS

Regular

14

Body Large

FZLTHProS

Regular

12 50%

标签

Product Sans

Regular

12 50%

Date

卡片+品牌



灵感卡



灵感卡

2023-05-24 12:06:42



有建议标记的灵感卡



灵感卡

笔记卡

2023-05-24 12:06:42



灵感卡转笔记卡的建议



灵感卡

笔记卡

2023-05-24 12:06:42

我们平时根本不会去整理、或者翻阅零散的灵感记录。

这样的困境如何解决?
使用Threads缕思,它可以帮助你整理杂乱无章的文本,并交予你检查或修正。而我,只需要认可或否定生成的文本就可以了。

文章卡

2023-05-24 12:06:42

我们平时根本不会去整理、或者翻阅零散的灵感记录。

这样的困境如何解决?
使用Threads缕思,它可以帮助你整理杂乱无章的文本,并交予你检查或修正。而我,只需要认可或否定生成的文本就可以了。

展开

文章卡

2023-05-24 12:06:42



笔记卡



笔记卡

2023-05-24 12:06:42



有建议标记的笔记卡



笔记卡

文章卡

2023-05-24 12:06:42



笔记卡转文章卡的建议



笔记卡

文章卡

2023-05-24 12:06:42

录音中

灵感卡

2023-05-24 12:06:42

拍摄中

灵感卡

2023-05-24 12:06:42

可用性测试和方案优化

1

测试规划

我与该产品设定的主要用户进行了可用性测试,以验证新设计是否能解决他们的问题,并获取一些迭代优化建议。

我写了一个脚本,其中包括一个场景和一个问题列表,要求用户在缕思界面上体验完整的灵感到文章卡片的链路,并通过结构化问题询问用户建议。

2

测试任务和问题

测试任务设置表

卡片库页面——创建新灵感卡片(语音、文本、图片任意)

卡片库页面——查看AI建议卡片

AI卡片审核页——修改卡片内容或创建一张新灵感卡片

用户测试评价表

1、您对缕思整体产品的使用满意度如何?——1~5

2、您觉得缕思的页面易理解程度如何?——1~5

3、您能顺利找到指定的内容/信息/功能吗? ——1~5

4、您认为缕思的交互体验顺畅吗? ——1~5

5、您对缕思的界面布局结构满意吗?——1~5

参与者

1、何**,20岁,学生

2、刘**,22岁,工程技术员

3、王**,25岁,公务员

4、胡**,28岁,程序员

5、刘**,31岁,学生

3

测试反馈结果

计算评价均分,并聚类访谈文本,获得用户反馈结果。

交互流畅

布局合理

可用易用

容易理解

满意程度

4.8

4.8

4.3

4.7

4.5

迭代问题梳理

  1. 卡片承载文本内容较长,在AI审核页面查看和编辑时不太方便。

  2. 创建灵感卡时,文本样式编辑可能和文本输入框距离过近容易误触,小文本输入框承载大量文字时输入体验将骤降。

  3. 图像、音频和文本之间的信息流通与联系在信息布局上没有得到体现。

  4. 不能单独查看灵感卡组。

4

方案迭代

问题对应的迭代策略:

新增卡片全屏按钮,当用户点击卡片全屏按钮后,卡片会以页面的形式展开。

调整文本输入框位置。现在用户点击下方“+”号,系统将创建一张空白新卡片,用户可直接在新卡片上输入文本。

按住“+”号并滑动,可创建”图像”和“音频”灵感卡片。

添加文章卡筛选Tab

卡片库默认界面

点击“+”新建文本卡片

按住“+”号滑动选择记录类型

在卡片库新建空白卡片

双击卡片扩展为全屏

总结与反思

1

从0-1的全链路产品设计经验

常说用户建议要一概不听,但这样并未说明用户的提议和设计师的提议仅在需求的视角下有何区别。匹兹堡学派认为一个句子的意义是由它所处的全部推论关系决定的。在该案例中,我将用户诉说的痛点置入用户的任务流程中考虑,找到了用户在笔记过程中2条主要的困难和6条次要的阻碍作为用户痛点的推论结构,从而在用户的角度理解了用户痛点的由来,对用户需求有更准确的判断。(可理解为一个bad-ending的故事)

2

期望价值和设计框架的应用

悉尼科技大学设计创新教授Kees Dorst提出了实践的四个层级(如图),并认为:任何价值都可以通过多种原则来实现,通过多种不同的方法来实现,从而导致更多可能的行动。因此,设计师进入四个思考层:从考虑现有竞品和用户的行动和方法到处理问题情况,再回到原则和潜在价值观/需求。然后,从对这些价值观的广泛考虑中,可以提出新的原则、方法和行动。这样就有可能发明针对特定背景的全新方法和用户行为场景。

常说用户建议要一概不听,但这样并未说明用户的提议和设计师的提议仅在需求的视角下有何区别。在该案例中,我将用户诉说的痛点置入用户的任务流程中考虑,找到了用户在笔记过程中2条主要的困难和6条次要的阻碍作为用户痛点的推论结构,从而在用户的角度理解了用户痛点的由来,对用户需求有更准确的判断。(可理解为一个bad-ending的故事)

在该案例中,对照前述的1个用户痛点、2个困难和6个阻碍,我提炼出了2个产品价值,并重新设计了6条设计原则:卡片文本易理解、卡片印象更清晰。

Dorst, Kees. 2018. 《Mixing Practices to Create Transdisciplinary Innovation: A Design-Based Approach》. Technology Innovation Management Review 8 (8): 60–65. https://doi.org/10.22215/timreview/1179.

3

面向设计方案的设计推理方法

设计与工程的区别是设计学领域的常见话题。悉尼科技大学设计创新教授Kees Dorst指出,区别于工程设计在确定的规则中进行溯因推理,设计思维则是一种在没有固定规则的语境中进行溯因推理获得具体方案。在该案例中,我们在确定了产品给卡片盒用户带来的价值后,从多个角度头脑风暴才形成具体的方案。

Dorst, Kees. 2018. 《Mixing Practices to Create Transdisciplinary Innovation: A Design-Based Approach》. Technology Innovation Management Review 8 (8): 60–65. https://doi.org/10.22215/timreview/1179.

Dorst, Kees. 2011. 《The Core of ‘Design Thinking’ and Its Application》. Design Studies, Interpreting Design Thinking, 32 (6): 521–32. https://doi.org/10.1016/j.destud.2011.07.006.

B

Acknowledgement

设计分工


胡棋翔、与另外2人:用户研究、竞品分析


胡棋翔:

MVP 设计、价值定位、设计原则定位;

用户旅程设计、UI设计

时间


2023 春天

湖南,长沙

Qx Hu, 2023-2024

Tel:18907348727

E-mail:hqx@hnu.edu.cn

Wechat:owomfo