Axure与生成式AI对话原型开发：从零搭建智能交互设计系统

1次阅读

没有评论

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

在传统对话原型开发中，UX 设计师通常需要手动编写大量对话脚本，这不仅耗时耗力，还难以覆盖多轮对话的复杂分支。随着生成式 AI 技术的发展，我们可以借助 AI 的力量，大幅提升原型开发的效率和质量。

纯 Axure 方案 ：依赖手动编写的静态脚本，灵活性低，难以应对复杂对话场景。
AI 增强方案 ：利用生成式 AI 动态生成对话内容，能够覆盖更多分支，提升原型的真实感。

GPT-3.5：平均响应时间约 500ms
GPT-4：平均响应时间约 800ms
自定义小型模型：平均响应时间约 300ms

在 Axure RP 10 中创建一个动态面板
添加一个按钮，用于触发 AI 对话
配置按钮的交互事件，调用 JavaScript 代码

使用有限状态机（FSM）管理对话状态，确保对话逻辑清晰。以下是一个简单的状态转换图示例：

stateDiagram
    [*] --> 初始状态
    初始状态 --> 等待用户输入
    等待用户输入 --> 生成 AI 响应
    生成 AI 响应 --> 等待用户输入

设置超时时间（如 3 秒）
超时后显示默认回复
记录错误日志以便后续优化

interface AIResponse {
    text: string;
    status: number;
}

async function callAIApi(prompt: string): Promise<AIResponse> {const apiKey = localStorage.getItem('apiKey') || '';
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [{role: 'user', content: prompt}]
        })
    });
    return await response.json();}

function saveConversation(history: string[]) {localStorage.setItem('conversationHistory', JSON.stringify(history));
}

function loadConversation(): string[] {const history = localStorage.getItem('conversationHistory');
    return history ? JSON.parse(history) : [];}