引言
在 ChatGPT 流行后的一年半后,相信大家都已经在日常生活和工作中或多或少的使用 AI 来娱乐,解答疑问或者提高效率了
这次分享在协助其他项目原型设计时的一些使用 AI 的经验
背景
简单的说,我们在设计某个截图 app 的一项功能原型: 制作截图后的快速访问功能, 它类似于使用 iPhone 截图后, 图片出现在屏幕左下角, 让用户可以拖动分享图片到各种 App, 或者直接在上面点开编辑图片或 pin 到屏幕上等
挑战
在进行原型设计时，我们面临了许多问题需要解决：
- 多张截图时是否要折叠？
- 如果折叠，怎么展开,动画是什么样的？
- 鼠标悬浮在图片上时，操作按钮的布局如何设计？
- 悬浮时的视觉效果应该是怎样的？
虽然和设计一起讨论了n 多不同的设计效果并画图,但还是不够直观
局限性
虽然这些图片很有帮助,但静态的原型图还是有不少局限:
- 难以真实感受实际效果，只能靠想象
- 最终设计/开发出来的效果可能与预想不符
- 与别人沟通时，难以直观地准确传达意图
而如果开发人员来实现各种效果Demo的话效率很低,浪费大量时间
(和情绪,相信大家都有被需求改来改去困扰的时候😂)
AI 来拯救世界(划掉)
受到 Claude 最近推出的 Artifact 功能的启发，我们想到可以利用网页来制作UI/UX Demo。
简单的介绍一下它吧,它可以将 AI 生成 Web 代码或 Markdown 或者一些数据可视化到侧边的窗口, 虽然并不是以前 LLM 做不到的事情, 但现在可以用它很直观和方便的体验它给出的东西了
比如尝试要求他写一个小游戏,直接就在右侧体验而不需要保存后再看怎么修改
或者可视化的讲解一些知识
使用它创建交互式原型
于是要求它以网页来模仿桌面,来模仿我们截图后的快速访问功能
让我们可以非常快速的尝试各种不同效果
比如多张截图展开的动画效果和是否需要按钮来触发
或者按钮怎么布局以及微妙的选中效果等
总之最后经过各种尝试和迭代后终于得到了比较满意的原型⬇️, 这是我们只使用 figma 绘制原型图难以体会到的效果和效率
总之虽然不能真的用它当做开发的结果,但确实这种用网页模拟设计原型能让我们大概了解到如果做成成品会是什么感觉