Conversation UI 对话式界面的交互初体验

Conversation UI 对话式界面的交互初体验

Yuki 顾雪Yuki 顾雪
2014年,我还在Wiredcraft, 老板 Ronan 在做一个 Chat.ops 的聊天机器人应用,下图是我设计的一个生成机器人的按钮,像拉老虎机那样生成机器人,对了!里面的那个机器人很熟悉吧 机器人Sketch教程

Bot generator - Dribbble

我在这个项目上纯做设计和创意,对Chatbot 完全不懂,而且经常和Slackbot 聊些没有意义的内容。去年,我开始对吃的感兴趣,很想学做菜,而市面上的菜谱应用都是图片流的内容分享结构为主,对我的帮助真的不大,我很需要的功能是,可以像记笔记一样,在一条时间线上看到我冰箱里还有什么,或我想吃什么,接着直接看到购物单和菜谱,那些细细碎碎的细节真的很容易就忘记,回头又要重新Google,或翻菜谱软件,如果是Youtube上的菜谱就更麻烦了,所以我经常会在超市里待很久很久。现在会用便利贴记下来贴墙上,是目前找到的最方便的方法。

我经常用 Principle 做概念原型,脑补我心中好用的产品框架,下图就是当时做的一个有关食物的原型,今年被某菜谱应用的 PM 看到了,想挖我过去,蛮喜欢他们公司的,毕竟是jia fang

动图看这里 Foodlab - Dribbble

下图是期间帮他们做的一个分步教学功能的原型。

动图看这里 Cooking Steps - Dribbble

我家离单位就五分钟,我经常会利用午休的一小时回家做个饭,这种菜谱选择的范围更窄,时间安排很重要,同时要保证营养均衡,制作过程最好少油烟,否则我还要洗头换衣服,如果男友过来还要考虑多放芝士和肉这件事,下图这道是我觉得蛮适合的一道烤箱菜,不用炒,没油烟味,煮意面的时间比米饭快,有荤有素,味道好。

芝士焗意面 - Instagram

最近做的一个项目中需要用到Conversation UI,我发现这个框架实在是太适合这个选题了,于是认真的做了一些功课。

我下载了一些App,罗列了 UI pattern,和表单一样,具体分析 下拉菜单怎么做,输入框怎么做,单选和多选怎么做,日期选择怎么做,弹出框怎么做等。之后,把项目中需要使用的一些模块用黄色便利贴画出来,接着在上面添加紫色便利贴用来思考如何链接上下文。

下班后开始琢磨关于我的那个做菜的 CUI 的流程:
查看冰箱剩余食材 - 根据剩余食材推荐菜谱 - 根据菜谱生成购买清单 to do list.

大家有空可以帮我看一下,因为关于CUI的资料很少,所以没有太多可以参考,很需要大家的意见,我非常喜欢前几篇文章里帮我挑错别字或格式问题的同学们哈哈哈,好像小时候老师帮我批作业。

关于交互,目前发现的问题是:生成菜谱后应该添加一轮对话关于设置几人份,用于确定购物单的食材数量,以及添加一些标签用来分类筛选不同类型的食谱,如素食,低卡,省时等。由 @胡点Vivian 的回复想到的。

这种没人碰的领域我好喜欢挑战,欢迎交流哈!之后我会尽量补充更多内容的,今天太晚先睡了。

23 条评论