SUSI Skypebot交互卡片设计实战:HeroCard与ThumbnailCard提升聊天体验的秘诀

发布时间:2026/10/12 5:31:50
SUSI Skypebot交互卡片设计实战:HeroCard与ThumbnailCard提升聊天体验的秘诀 【免费下载链接】susi_skypebotSUSI Skypebot项目地址https://gitcode.com/gh_mirrors/su/susi_skypebot点击查看免费下载SUSI Skypebot 是 Fossasia 开源 AI 助手 SUSI 的 Skype 聊天机器人。它通过 botbuilder 框架中的 HeroCard英雄卡片和 ThumbnailCard缩略卡片把枯燥的纯文本对话变成可点击、可浏览的富媒体聊天体验让新手用户也能在 Skype 里轻松使用 AI 问答。为什么聊天机器人需要交互卡片纯文本机器人最大的痛点是用户不知道能问什么答案也无法结构化呈现。SUSI Skypebot 的解法是卡片三件套卡片类型来源适用场景HeroCardbuilder.HeroCard品牌介绍、单条重点内容展示ThumbnailCardbuilder.ThumbnailCard问题引导、快捷入口HeroCard 轮播AttachmentLayout.carousel表格数据、RSS 多条资讯 核心思路用卡片承载信息用按钮承载交互。HeroCard 实战一句话完成品牌自我介绍当用户发送get started时机器人不会回一长段文字而是推送一张 HeroCard——包含标题、副标题、正文和跳转按钮一眼看清我是谁。相关逻辑见 app.js标题SUSI AI副标题Open Source personal assistant按钮跳转官方代码库设计秘诀HeroCard 只放一句话价值主张 一个行动按钮信息密度低用户零压力。ThumbnailCard 实战3 个按钮解决不知道问什么新手用户打开聊天窗口最常卡住的环节是第一句该说什么。机器人对start chatting的回应是一张 ThumbnailCard内置 3 个示例问题按钮What is FOSSASIA?、Who is Einstein? 等点击后通过imBack直接把问题回传给机器人实现点一下就能开始对话。这段代码位于 app.js。最佳实践按钮文案直接用用户想问的原话而不是点击这里之类的空话。动态卡片轮播表格与 RSS 数据这样呈现普通问答走 SUSI 官方 APIhttp://api.susi.ai/susi/chat.json见 app.js但表格类和 RSS 类答案会被转换成多条 HeroCard 轮播表格答案按行生成卡片第一列作标题、其余列作正文横向滑动浏览app.jsRSS 答案第一条直接文本回复后续条目转成卡片轮播app.js轮播布局通过builder.AttachmentLayout.carousel一行开启让多条内容横向滑动而不是刷屏这是保持聊天界面整洁的关键技巧。提升聊天体验的 4 个隐藏细节输入中指示每次回复前调用session.sendTyping()app.js让用户知道机器人正在思考兜底话术解析失败时回复 Oops looks like SUSI is taking a break try again later.永远不让用户面对空窗app.js加好友欢迎语contactRelationUpdate事件里按用户姓名打招呼建立第一印象app.js文本 卡片搭配先session.say给一句导语再推卡片信息层次更清晰快速搭建你的 SUSI Skypebot整个项目核心仅 app.js 一个入口依赖 botbuilder、restify 等见 package.json启动方式简单npm install npm start完整部署流程在 README.md 中有图文说明注册 Microsoft Bot 框架账号创建 Bot、获取 App ID、部署到云端服务、回填 messaging endpoint 即可。Bot 资料配置页如下项目还支持 Kubernetes 部署YAML 清单位于 kubernetes/yamls/application/deployment.yaml 与 kubernetes/yamls/application/service.yaml容器化配置见 Dockerfile 及 docs/installations/gce-kubernetes.md。小结SUSI Skypebot 用最轻量的代码演示了交互卡片设计的完整范式HeroCard→ 重点内容与品牌展示ThumbnailCard imBack 按钮→ 引导新用户开口Carousel 轮播→ 多条数据不刷屏掌握这套卡片三件套你的聊天机器人也能从能用升级到好用。赞分享【免费下载链接】susi_skypebotSUSI Skypebot项目地址https://gitcode.com/gh_mirrors/su/susi_skypebot点击查看免费下载相关推荐完全掌握SUSI Skypebot的API集成3种SUSI AI响应如何渲染成文本与卡片完全掌握SUSI Skypebot的API集成3种SUSI AI响应如何渲染成文本与卡片 SUSI Skypebot 是一个基于 Node.js 的开源 Skreact-transition-group动画设计原则提升用户体验的秘诀react transition group动画设计原则提升用户体验的秘诀 你是否曾遇到过页面元素突然出现或消失的尴尬用户点击按钮后内容瞬间切换没有任何过前端UI组件重构实战让iOS聊天界面库JSQMessagesViewController代码质量提升300%的秘诀重构实战让iOS聊天界面库JSQMessagesViewController代码质量提升300%的秘诀 你是否也曾面对这样的困境接手一个功能强大但代码臃肿的UI组件即时通讯创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询