鸿蒙智能体开发实战：16.自定义用户界面

前言一个优秀的智能体不仅要有强大的对话能力还要有出色的用户体验。鸿蒙智能体平台提供了丰富的界面自定义功能从背景图片、角色声音到快捷指令、开场对话开发者可以像装修一间房子一样精细地打造智能体的每一个交互细节。本文将全面介绍智能体界面自定义的各个方面。界面自定义总览智能体的用户界面自定义包含以下维度自定义项作用适用模式背景图片对话态和通话态的视觉沉浸感所有模式角色声音语音交互的音色体验所有模式开场对话首次进入智能体的引导语所有模式预置问题引导用户快速体验智能体能力所有模式快捷指令快速发起预设对话的入口所有模式输入文件设置支持上传图片/文件所有模式A2A输出设置卡片输出绑定A2A模式上图展示了小艺开放平台中的卡片管理界面官方卡片和自定义卡片都可以在这里进行管理和发布。背景图片背景图片概述背景图片功能允许开发者为智能体在小艺应用中增加对话和通话状态的背景图片让对话时更加沉浸。对话态背景设置智能体对话状态下的背景图片支持两种屏幕形态屏幕形态说明建议尺寸竖屏背景手机竖屏状态下的对话背景9:16比例宽屏背景平板或横屏状态下的对话背景16:9比例# 对话态背景配置示例background_config{dialogue:{portrait:https://example.com/bg_portrait.jpg,# 竖屏背景landscape:https://example.com/bg_landscape.jpg# 宽屏背景}}通话态背景通话状态下的背景图片配置更加丰富支持 Normal 和 ColdBoot 两种场景# 通话态背景配置示例call_background_config{call:{normal:{portrait:https://example.com/call_normal_portrait.jpg,landscape:https://example.com/call_normal_landscape.jpg,external_screen:https://example.com/call_normal_external.jpg},cold_boot:{portrait:https://example.com/cold_boot_portrait.jpg,landscape:https://example.com/cold_boot_landscape.jpg,external_screen:https://example.com/cold_boot_external.jpg}}}提示通话态背景支持视频和首帧图片配置可以实现动态背景效果。背景图片配置步骤进入智能体编排页面找到背景图片配置区域选择对话态或通话态上传对应屏幕形态的图片/视频预览效果后保存角色声音声音配置开发者可以在【角色声音】部分试听平台开放的音色并为智能体设置一个默认音色{voice_config:{default_voice:xiaoyi_warm,// 默认音色user_switch_enabled:true// 是否允许用户切换}}用户切换控制平台为开发者提供了【终端用户可以切换声音】开关开关打开默认该智能体支持用户在终端自主切换可用的智能体音色开关关闭不支持用户在终端自主切换智能体音色但支持使用自定义音色应用场景如果你的智能体是一个特定角色的虚拟形象如班主任、客服专员建议关闭用户切换功能以保持角色一致性如果是通用助手建议开启让用户自由选择。开场对话和预置问题开场语开场对话是用户首次进入智能体后自动展示的引导信息。它的主要目的是帮助用户理解智能体的用途或背景以及如何与其进行交互# 你好我是你的专属健康管理助手 我可以帮助你 - **记录每日饮食**和运动情况 - 分析**健康数据趋势** - 提供个性化的**健康建议** 开始对话前请先告诉我您的年龄和身高体重~预置问题每个智能体最多可以设置三个预置问题让用户通过点击快速体验智能体的能力{preset_questions:[今天天气怎么样,帮我推荐一首适合跑步的音乐,给我讲个笑话]}提示预置问题应选择最能体现智能体核心功能的典型问题让用户第一眼就知道这个智能体擅长什么。快捷指令快捷指令概述快捷指令配置完成后用户可以通过点击快捷指令快速发起预设对话。每个智能体最多支持配置十个快捷指令和一个动态快捷指令。快捷指令类型类型说明预览支持文本点击后发送预设文本✅ 支持跳转点击后跳转指定页面❌ 需真机事件点击后触发事件❌ 需真机快捷指令配置{quick_commands:[{text:查询天气,icon:weather_icon,type:text,content:今天北京的天气怎么样},{text:我的订单,icon:order_icon,type:text,content:查询我的最近订单},{text:呼叫客服,icon:service_icon,type:text,content:转人工客服}]}动态快捷指令动态快捷指令支持通过执行配置的工作流在不同场景下动态生成不同的快捷指令{dynamic_directive:{workflow_id:dynamic_commands_workflow,event_input:{header:{name:HalfScreen,namespace:System},payload:{timeZone:GMT08:00,time:2026-04-16 10:00:00}}}}// 工作流输出格式{dynamicDirective:[{content:总结摘要,query:帮我进行总结摘要},{content:一起跳舞,query:跟我一起来跳舞}],eventInfo:{directiveName:QuickChips,eventName:HalfScreen}}注意动态快捷指令的工作流开始节点需包含EVENT_INPUT字段结束节点需包含dynamicDirective、eventInfo字段。版本和设备控制快捷指令支持自定义版本和设备精确控制指令的可见范围{visibility:{devices:[phone,tablet],min_version:11.3.8.300,max_version:12.0.0.0}}输入文件设置启用文件输入与智能体对话时除了发送文本还可以通过【输入文件设置】勾选图片或文件。勾选后对话时点击输入框右侧【】可发送图片或文件# 输入文件设置配置input_file_config{photo:{enabled:True,max_count:9,# 最多选择9张max_size:20MB# 单张最大20MB},file:{enabled:True,max_count:1,# 最多选择1个文件max_size:100MB,# 单个文件最大100MBformats:[pdf,doc,txt,xlsx]}}文件类型支持文件类型支持格式大小限制照片JPG、PNG、WEBP、GIF、BMP单张最大20MB最多9张文件PDF、DOC、DOCX、TXT、XLS、XLSX、PPT、PPTX单个最大100MB每次1个A2A输出设置对于A2A 模式的智能体可以通过【A2A输出设置】绑定卡片输出最多可添加20条{a2a_output:[{cardName:weather_card,description:天气信息展示卡片,parameters:{cardData:{type:Object,properties:{city:{type:string},temperature:{type:string},humidity:{type:string}}}}}]}注意输出参数默认必须包含参数名为cardData、类型为Object的参数并且必须添加子项。界面自定义最佳实践1. 风格一致性# 主题配置示例theme_config{style:nature,# 自然/科技/温馨background:forest.jpg,# 匹配主题的背景voice:warm_male,# 匹配主题的音色opening:你好我是你的自然向导# 匹配主题的开场语}保持智能体的视觉风格、声音风格和语言风格高度一致能显著提升用户对智能体的信任感。2. 快捷指令策略# 快捷指令设计策略quick_command_strategy{principles:[高频操作优先将用户最常用的功能排在前面,一屏可见快捷指令数量控制在5-7条,动态优先利用动态快捷指令实现场景化推荐,清晰表达文案控制在10个字以内]}3. 文件输入安全的考虑# 文件上传安全校验示例defvalidate_upload_file(file_info:dict)-bool:验证上传文件的安全性allowed_formats[jpg,png,pdf,doc,txt]max_size_mb100file_formatfile_info.get(format,).lower()file_sizefile_info.get(size_mb,0)iffile_formatnotinallowed_formats:print(f不支持的文件格式:{file_format})returnFalseiffile_sizemax_size_mb:print(f文件过大:{file_size}MB {max_size_mb}MB)returnFalsereturnTrue4. 多场景适配# 多场景界面配置scene_config{dialogue:{background:dynamic_bg.png,show_preset_questions:True},call:{background_video:call_bg.mp4,voice:xiaoyi_warm,user_switch_voice:True},a2a_output:{cards:[weather_card,news_card]}}常见问题FAQQ1背景图片上传后不显示怎么办答请检查图片格式是否支持JPG、PNG、WEBP图片大小是否超标建议不超过5MB以及是否正确选择了竖屏/宽屏模式。Q2角色声音和开场语之间存在延迟吗答角色声音在用户首次进入智能体时会被加载会有短暂缓存时间。建议开场语尽量简洁避免过长导致用户等待。Q3动态快捷指令没有生效答请检查1工作流开始节点是否包含EVENT_INPUT字段2结束节点是否包含dynamicDirective和eventInfo字段3智能体已发布到真机预览区不支持动态快捷指令。Q4预置问题可以设置多少个答每个智能体最多可设置3个预置问题。建议选择最能代表智能体核心功能的典型问题。Q5如何让用户无法切换音色答在角色声音配置中关闭【终端用户可以切换声音】开关即可。总结本文全面介绍了鸿蒙智能体平台的界面自定义功能背景图片对话态和通话态的双态背景配置支持视频和首帧角色声音音色选择与用户切换控制开场对话引导用户了解智能体的首屏体验快捷指令预设对话入口和动态生成能力输入文件设置照片和文件上传的精细控制A2A输出设置卡片输出的绑定配置最佳实践风格一致、快捷键策略、多场景适配界面自定义是提升智能体用户体验的重要环节精细打磨每个细节能让你的智能体在众多应用中脱颖而出。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源背景图片配置角色声音配置开场对话预置问题快捷指令配置输入文件设置A2A输出设置Markdown语法参考小艺开放平台