Axure学习笔记：自定义搜索，模拟真实网站搜索

这个是一个自定义搜索组件，可实际应用于用Axure做高保真个人网站，集合常用的搜索在一起，可以灵活切换如：百度、搜狗、必应、谷歌、知乎、bilibili、微博、豆瓣等网站搜索。1

原型效果预览地址：https://axhub.im/pro/2117b72d75a3c4e8

实际应用于个人网站地址：https://dwz.cn/eeZN11mE

接下来是具体教程：

本次教程运用的制作原型工具为Axure RP8。

首先我们先简单的用原型做一下百度搜索，这一块是基础，也是重点，后面都是基本这一块的扩展运用。

1. 观察分析一下我们常用的百度搜索中，搜索是怎样进行的。

随便打一个“产品经理”百度搜索一下，得出的是 https://www.baidu.com/s?wd=产品经理

也就是https://www.baidu.com/s?wd=文本输入框的内容

如下图所示：

观察分析得出的结论是：获取文本的内容进行搜索，也就是想要搜索什么内容，就替换输入框内容就可以了。

2. 实际原型操作一下

• 打开Axure，建一个项目，拖入元件：文本输入框和按钮；
• 给按钮添加事件
• 添加链接跳转事件和配置功作
• 跳转链接插入变量和设置局部变量
• 确定保存完成

如下图所示：

演示效果如预期一样，能进行百度关键词搜索。

接下来就是以这个为基础，扩展为自定义搜索功能，也就是集合常用的搜索在一起，可以灵活切换如：百度、必应、谷歌、知乎、bilibili、微博、豆瓣等网站搜索。

1.打开Axure，建一个项目，拖入元件：矩形、文本输入框、下拉选项框、按钮，如下图所示：

2. 调整元件位置和样式，可根据自己习惯爱好进行调整，示例效果如下图所示：

3. 下拉选项框加入要进行搜索的网站，如百度、必应、谷歌、知乎、bilibili、微博、豆瓣，这一步是为了后来搜索作准备。

4. 美化元件，加一些交互事件，如调整宽高，填充按钮颜色，给矩形加入鼠标移入移出交互效果等等，示例效果图如下：

5. 给按钮添加事件，对应选项进行搜索。

如图所示：

6. 最后演示完成

小结：总体来说原理很简单，难得的是要懂得观察分析，然后举一反三。

不过这个教程可能不适用于新手入门学者，尤其是对Axure工具不熟透的同学来说，有部分知识点在里面。这个作为知识学习爱好来学习就好，对实际工作中运用也不大。

学海无涯，我愿意。