为什么 AI 工具 flowith 用起来特别累

#设计AI #迷你设计课

flowith 是一款以白板方式组织 AI 对话、使用动态 UI 实现人机交互的 AI 工具，它在 ChatGPT 那种毫无新意的对话式 AI 界面之外，重新发明了 AI 工具的使用方法

设计很有意思，但是用起来很累

从设计角度说一下“很累”的原因

Hierarchy！Hierarchy！Hierarchy！

层级关系是优良 UX/UI 设计的基本要素，突出重点、弱化次要信息的界面，可以减轻用户的认知负担，让操作更直觉

flowith 整个界面灰灰的，UI 元素在视觉上缺乏对比、缺乏重点

比如重要文字、次要文字、UI 文字、信息文字都差不多灰灰的。多数文字颜色太浅，不同颜色之间缺乏对比。UI 和信息块和信息块的容器……也是差不多的灰灰的

UI 和信息的层级关系也不直观

比如登录页面（图三）是个错误的设计。因为不注意层级关系，设计师把登录按钮放在跟 AI 对话的对话框里 - 我输入用户名、按登录按钮，满以为会登录进入系统，其实我输入了跟 AI 的一句对话😒

flowith 让我想起傍晚朝着西边开车的感觉，因为阳光直射，前方所有车辆、行人、道路都糊里糊涂变成看不清楚的一锅粥…

设计师可以分辨“50度灰”、区分不同的控件，但缺乏层级、缺乏对比的 UI 会导致普通用户劳累

对比一下 Miro（图二），它的界面层级关系非常清晰，所有信息一目了然，在我身后 3 米远的老板都能一眼看清楚

变化的视觉焦点

flowith 动态 UI 的一个特色，是 AI 输出信息块时，信息块的位置、大小都会随之变化，整个工作区也会自动缩放尺寸

距离、视角、焦点动态变化…的直观感受像打游戏。如果把这套动态 UI 移植到苹果 Vision Pro 或者 Meta Quest 的 VR 空间里，肯定还得再屌 10 倍😎

但是很遗憾，在日常操作里，这些变化会导致用户丢失视觉焦点，这就累人了

操作时我必须死死盯住界面，否则 AI 一回答、界面动态变化，我就找不到对话的上一句在哪儿，也搞不清那句是 AI 的回答

反直觉、不直观的交互

flowith 的信息块散乱在工作区里，而 AI 对话的输入框固定在屏幕下方

选中一个信息块之后，我不能直接与之交互，我得把鼠标光标移到屏幕下方的输入框里操作，与屏幕上方的某个信息块交互

每次操作都像遥控，输入和输出都不直观，而且会产生“操作很重”的错觉

更麻烦的是，因为 UI 设计缺乏层级/对比，以及视觉焦点总在动态变化，我经常看不清我在跟哪个信息块对话

以上三个原因，都跟人机交互相关，这些特点决定了 flowith 需要眼睛盯着很专注地操作，工作时得耗费很多额外的体力，来维持不断被人机交互打断的心流

假白板

Miro 那种白板使用“无结构”的信息架构，即白板上的每张即时贴都是独立的、无关的，方便发散思维和协作

flowith 的信息块是类似脑图那样树状的、关联的结构，可惜既不能像 Miro 那样随便放置放子节点，也不能像脑图那样把 A1 子节点挪到 B 下面变成 B2 子节点

比如我分别问 AI 洛杉矶、拉斯维加斯旅游攻略，问完了我很难把两地的酒店信息拎出来放在一起…

用树状的脑图呈现顺序的、线性的对话

跟 AI 的对话一般是很多句对话的推演过程，很多时候我们只想要结果，不想要对话过程。flowith 节点下面展开所有对话，甭管多长

通俗地说，把细长条状的几十句对话、挂在方块形的节点下面，占地方、看起来也累

后面这两个原因，都跟信息架构有关，flowith 的信息架构挺适合轻度使用，但是到“生产力工具”这种高度追求效率的层面，就让人觉得劳累了

多说两句

平时我给客户项目做设计评审，比较怕遇到特别“创新”的设计师，一方面要鼓励宝贵的自我驱动力，另一方面也得说实话：创新不等于成功

为了避免尴尬，后来我就给大家推荐美国工业设计大师 Raymond Loewy 的“MAYA 原则” ：

“Most Advanced，Yet Acceptable”，意思是做最先进的、但不超出用户接受范围的设计

https://t.co/jzKpQxIqr5

flowith 已经拿到投资，后面优化 UX/UI 应该不是难事，相信可以在创新、易用和效率之间找到甜蜜点

值得期待🙌

点击图片查看原图

点击图片查看原图

点击图片查看原图