大多数聊天机器人界面共享相同的部分:输入区域、消息线程以及每条消息的控件。好的聊天机器人和令人沮丧的聊天机器人之间的区别主要在于这些部分及其状态的细节。
从空状态开始。带有文本框的空白屏幕不知道机器人可以做什么。添加简短的描述和三到四个人们可以点击的示例提示。
使线程易于阅读。保持消息宽度适合阅读,清晰区分用户和人工智能消息,正确呈现列表和代码等格式,并在新文本流入时保持最新消息在视图中,如果用户向上滚动,则不会跳转。
设计每个状态。发送、思考、流式传输、完成、停止和失败应该每个看起来都不同。思考指示器(通常是动画点图案或球体)告诉人们请求已收到。流媒体播放时的停止按钮可以恢复控制权。错误应该说明发生了什么并提供重试。
向答案添加控件:复制、重新生成、编辑先前的提示并提供反馈。对于语音助手来说,使用清晰的视觉来聆听、思考和说话,以便人们知道何时说话。我们制作的 ExodeUI 具有针对这些状态的免费动画球体,可在 React、Vue、SwiftUI、Flutter 和其他框架中运行。