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,这期内容到这里就结束了。

我是大明同学

下期见

相关推荐
笑小枫1 小时前
行业新趋势:官网数字人成标配,具身交互重构用户触达
人工智能·交互
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_4:(深入理解CSS选择器的核心机制)
前端·javascript·css·交互
欢喜躲在眉梢里1 小时前
从文字回复到具象交互:官网 Agent 的交互逻辑重构
人工智能·microsoft·ai·重构·交互·ai工具
颜颜yan_2 小时前
Agent 重构大屏价值:从静态数据墙到实时交互体
microsoft·重构·交互
2的n次方_2 小时前
健身 Agent:不止视频,更有 AI 人物实时跟练交互
人工智能·音视频·交互·魔珐星云
池央2 小时前
给自己的官网装上魔珐星云 Agent:24 小时在线的具身交互助手
交互·具身智能·魔珐星云
cy_cy0022 小时前
地砖感应屏在数字展厅的应用实践
大数据·科技·人机交互·交互·软件构建
Mr数据杨15 小时前
【CanMV K210】显示交互 LCD1602 I2C 通信与滚动文本显示
人工智能·交互·硬件开发·canmv k210
Mr数据杨1 天前
【CanMV K210】显示交互 OLED 128x64 智能状态面板设计
人工智能·交互·硬件开发·canmv k210
AC赳赳老秦2 天前
OpenClaw与Axure联动:自动生成原型图组件、批量修改原型样式,提升设计效率
python·web安全·ui·音视频·axure·photoshop·openclaw