使用Adobe XD制作智能电视语音搜索原型

将语音命令和语音播放功能整合到使用Adobe XD设计的交互式电视搜索应用程序中,微信公众号“鲜设计”内回复“20200420”获取教程源文件。

创建引导

使用 Adobe XD 打开源文件,切换到原型模式,选择第一个画板,然后单击蓝色箭头创建交互,“触发”选择“时间”,“延迟”设置为“0秒”,“操作”的“类型”选择“语音播放”,然后在“语音”中输入要播放的语音,以在屏幕加载时自动播放。

image.png

开始搜索

为了模拟用户手动搜索节目的效果,可以从初始屏幕上的搜索图标创建一个交互线条拖到下一个画板,然后选择“点击”作为触发,其他交互属性使用默认值。image.png

图标动画

对语音图标进行动画处理,以提供视觉提示,表明搜索功能还可以识别语音命令。从第一个搜索画板创建交互线条拖到第二个画板,两个画板包括语音图标不同状态的设计。将“触发”设置为“点击”,将“动作”设置为“自动动画”。语音图标在每个画板上都有相同的名称,因此在查看交互式原型时为图标设计中的更改设置自动动画。

image.png

循环播放动画

为了达到应用程序在等待用户时语音图标跳到的效果,从第二个搜索画板创建交互线条拖到了第三个画板。将“触发”设置为“时间”,将“动作”设置为“自动动画”,并增加了“延迟”和“持续时间”以获得所需的效果。为了使动画循环直到用户启动语音命令,选择了第三个画板,单击蓝色箭头,将“触发器”设置为“时间”,然后选择“上一个画板”作为“动作”。

image.png

添加语音搜索

为了模拟用户能够使用语音命令搜索自己喜欢的节目交互交互,将每个画板上的语音图标连接到搜索结果。然后,按住Shift键分别单击三个语音图标多选,将“触发”设置为“语音”,然后输入用户可以说的命令以在测试原型时显示搜索结果。
image.png
点击右上角的“桌面预览”来测试原型,按住空格键说出语音命令来测试。
image.png