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

我是大明同学

下期见

相关推荐
Larry_Yanan4 小时前
QML学习笔记(五十)QML与C++交互:QML中单例C++对象
开发语言·c++·笔记·qt·学习·ui·交互
小雨青年5 小时前
Cursor 项目实战:AI播客策划助手(二)—— 多轮交互打磨播客文案的技术实现与实践
前端·人工智能·状态模式·交互
龚礼鹏16 小时前
Android 图像显示框架三——演示demo以及解析
android·交互
朝新_1 天前
【SpringMVC】详解用户登录前后端交互流程:AJAX 异步通信与 Session 机制实战
前端·笔记·spring·ajax·交互·javaee
AiTop1002 天前
美团LongCat-Flash-Omni上线:5600亿参数实现音视频交互“零延迟”
人工智能·ai·aigc·音视频·交互
葡萄城技术团队2 天前
移动端可视化大屏工具技术实践:从适配到智能交互的全方案解析
交互
朝新_2 天前
【SpringMVC】SpringMVC 小案例:加法计算器初步理解前后端接口交互与数据处理
java·笔记·spring·交互·javaee
前端摸鱼匠3 天前
Vue 3 事件修饰符全解析:从 .stop 到 .passive,彻底掌握前端交互的艺术
前端·vue.js·node.js·vue·交互
越来越无动于衷4 天前
硬件与软件交互全解析:协议、控制与数据采集实践
交互
Larry_Yanan5 天前
QML学习笔记(四十八)QML与C++交互:QML中可实例化C++对象
c++·笔记·qt·学习·ui·交互