Axure结合生成式AI构建智能对话原型：从设计到实现的全流程指南

1次阅读

没有评论

共计 2659 个字符，预计需要花费 7 分钟才能阅读完成。

在对话式交互场景中，传统的 Axure 静态原型存在明显不足：

无法模拟真实的自然语言交互过程，只能通过预设路径展示有限对话分支
缺乏上下文理解能力，难以测试复杂的多轮对话场景
维护成本高，每次对话逻辑变更都需要手动调整大量交互节点
用户测试数据收集有限，无法获取真实的语言输入反馈

优势：对话质量高，支持长上下文记忆（16k tokens），微调功能强大
适用场景：需要复杂推理和创造性响应的对话系统
成本：按 token 计费，高并发时成本需控制

优势：响应速度快，对指令跟随更精确，自带一定的内容过滤
适用场景：需要严格遵循业务流程的对话场景
成本：定价模式与 OpenAI 类似，但长文本处理更具性价比

在 Axure 中创建对话界面组件
输入框（Text Field）
发送按钮（Button）
对话历史显示区域（Dynamic Panel）
添加以下 JavaScript 代码到按钮的 OnClick 事件：

// 配置 API 参数
const API_KEY = 'your_api_key';
const ENDPOINT = 'https://api.openai.com/v1/chat/completions';

// 获取用户输入
const userInput = document.getElementById('userInput').value;

// 构建对话历史（存储在 Axure 全局变量中）let conversationHistory = [];
if (window.axure.globalVars.conversationHistory) {conversationHistory = JSON.parse(window.axure.globalVars.conversationHistory);
}

// 添加新用户消息
conversationHistory.push({
  role: 'user',
  content: userInput
});

// 调用 AI API
async function callAI() {
  try {
    const response = await fetch(ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: conversationHistory,
        max_tokens: 150
      })
    });

    if (!response.ok) throw new Error(`API 请求失败: ${response.status}`);

    const data = await response.json();
    const aiResponse = data.choices[0].message.content;

    // 更新对话历史
    conversationHistory.push({
      role: 'assistant',
      content: aiResponse
    });

    // 保存到 Axure 全局变量
    window.axure.globalVars.conversationHistory = JSON.stringify(conversationHistory);

    // 更新 UI
    updateChatUI(aiResponse);
  } catch (error) {console.error('API 调用错误:', error);
    fallbackResponse();}
}

// 节流控制（防止快速连续点击）let isWaiting = false;
if (!isWaiting) {
  isWaiting = true;
  callAI().finally(() => {isWaiting = false;});
}

推荐插件：AI Prototyper

安装插件后，在 Axure 工具栏会出现 AI 交互组件
配置项包括：
API 提供商选择
对话风格设置
敏感词过滤列表
通过可视化界面绑定组件事件，无需编写代码

使用 Axure 全局变量存储对话历史
设置合理的 token 上限（建议保留 20% 余量）
关键信息显式确认机制（如：” 您说的是 XXX 对吗？”）

// 设置 5 分钟超时
const TIMEOUT = 5 * 60 * 1000;
let lastInteraction = Date.now();

function checkTimeout() {if (Date.now() - lastInteraction > TIMEOUT) {resetConversation();
  }
}

// 每次交互时更新 lastInteraction

const BANNED_WORDS = ['违规词 1', '违规词 2'];

function filterInput(text) {
  return BANNED_WORDS.some(word => 
    text.toLowerCase().includes(word.toLowerCase())
  );
}

使用 localStorage 缓存常见问题的标准回答
对相似问题做语义哈希匹配

const RATE_LIMIT = 1000; // 1 秒 1 次
let lastCall = 0;

function throttledCall() {const now = Date.now();
  if (now - lastCall < RATE_LIMIT) return;
  lastCall = now;
  // 执行 API 调用
}

预置常见问题应答库
网络不可用时切换至规则引擎模式

graph TD
    A[用户输入] --> B{敏感词检查}
    B -- 通过 --> C[调用 AI API]
    B -- 不通过 --> D[返回警告信息]
    C --> E{API 响应成功?}
    E -- 是 --> F[更新对话历史]
    E -- 否 --> G[使用本地回退]
    F --> H[显示 AI 回复]
    G --> H