Axure PR 9 搜索 百度引擎 设计&交互


大家好,我是大明同学。

这期内容,我们来探讨用Axure制作带百度搜索引擎的搜索设计与交互技巧。

百度 搜索引擎

创建搜索所需的元件

1.在元件库中拖出一个矩形元件,在样式窗格将宽设为900,高设为60,字号20,线段填充颜色设置为灰色(#D9D9D9)线宽 为 1,圆角设为10,边距左侧 15。

2.在元件库中拖出一个按钮元件,在样式窗格将宽设为150,高设为60,字号20 白色 加粗 输入文本"百度一下",填充颜色 蓝色(#4E6EF2),线宽0 圆角 10 可见性 右上,右下角。

3.插入百度 logo

创建交互

输入框

1.选中输入框,在交互窗新建交互,单击时,设置变量值,添加变量 url 默认值:https://www.baidu.com/s?wd=

设置变量值 url 值 插入变量函数 :https://www.baidu.com/s?wd=

看一下完整交互

2.文本属性,显示全部,提交按钮设置为"百度一下",就可以直接按回车键搜索。

百度一下按钮

1.选中"百度一下"按钮元件,在交互窗新建交互,单击时,打开链接 链接到URL或文件路径 插入变量或函数 添加局部变量 LVAR1 等于 元件文字 (文本框)插入变量 [[url]][[LVAR1]]

点击更多选项,打开在 新窗口/新标签

预览效果

点击预览,在输入框中输入文本,点击百度一下按钮或按下回车键可以使用百度引擎。

预览地址:https://sfh1mz.axshare.com

OK,这期内容到这里就结束了。

我是大明同学

下期见

相关推荐
Dxy12393102162 天前
DrissionPage使用js点击:突破常规交互限制的“隐形手”
开发语言·javascript·交互
Autumn_ing2 天前
2026国内外主流设计工具大对比:Axure、墨刀、Figma、Pixso
ui·aigc·axure·figma·墨刀
放下华子我只抽RuiKe52 天前
机器学习核心算法全景指南
人工智能·python·深度学习·算法·机器学习·机器人·交互
一字白首2 天前
进阶实战:微信小程序路由、交互与生命周期全攻略DAY03
微信小程序·小程序·交互
UXbot3 天前
为什么 AI 正在重新定义 UI 设计工具的入门门槛
前端·人工智能·低代码·ui·交互·ai编程·ux
okra-3 天前
Axure RP 10 进阶指南:从全局变量到JavaScript语法,打造高效原型设计!
javascript·axure·photoshop
V搜xhliang02463 天前
医疗场景多模态交互
大数据·人工智能·机器人·交互·语音识别·xcode
梓贤Vigo3 天前
【Axure高保真原型】卡片和表格间切换
交互·产品经理·axure·原型·中继器
小龙报4 天前
【AI】高效交互的艺术:AI提示工程与大模型对话指南
人工智能·深度学习·神经网络·自然语言处理·chatgpt·交互·语音识别
梓贤Vigo4 天前
【Axure教程】拖动分组
交互·产品经理·axure·原型·教程