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

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

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

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

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


接下来是具体教程:

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

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

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

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

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

如下图所示:

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

 

  1. 实际原型操作一下
  • 打开Axure,建一个项目,拖入元件:文本输入框和按钮;
  • 给按钮添加事件
  • 添加链接跳转事件和配置功作
  • 跳转链接插入变量和设置局部变量
  • 确定保存完成

如下图所示:

 

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


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

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

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

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

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

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

如图所示:

  1. 最后演示完成

 

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

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

学海无涯,我愿意。

 

人已赞赏
产品专栏图文教程

Axure教程:PRD产品需求文档

2020-11-20 10:46:14

产品专栏图文教程

Axure原型:AI翻译平台功能介绍和梳理

2020-11-21 10:01:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧