axure商城

Axure學習筆記:自定義搜索,模擬真實網站搜索

這個是一個自定義搜索組件,可實際應用于用Axure做高保真個人網站,集合常用的搜索在一起,可以靈活切換如:百度、搜狗、必應、谷歌、知乎、bilibili、微博、豆瓣等網站搜索。

這個是一個自定義搜索組件,可實際應用于用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=文本輸入框的內容

如下圖所示:

觀察分析得出的結論是:獲取文本的內容進行搜索,也就是想要搜索什么內容,就替換輸入框內容就可以了。

 

  1. 實際原型操作一下
  • 打開Axure,建一個項目,拖入元件:文本輸入框和按鈕;
  • 給按鈕添加事件
  • 添加鏈接跳轉事件和配置功作
  • 跳轉鏈接插入變量和設置局部變量
  • 確定保存完成

如下圖所示:

 

演示效果如預期一樣,能進行百度關鍵詞搜索。


接下來就是以這個為基礎,擴展為自定義搜索功能,也就是集合常用的搜索在一起,可以靈活切換如:百度、必應、谷歌、知乎、bilibili、微博、豆瓣等網站搜索。

1.打開Axure,建一個項目,拖入元件:矩形、文本輸入框、下拉選項框、按鈕,如下圖所示:

  1. 調整元件位置和樣式,可根據自己習慣愛好進行調整,示例效果如下圖所示:

  1. 下拉選項框加入要進行搜索的網站,如百度、必應、谷歌、知乎、bilibili、微博、豆瓣,這一步是為了后來搜索作準備。

  1. 美化元件,加一些交互事件,如調整寬高,填充按鈕顏色,給矩形加入鼠標移入移出交互效果等等,示例效果圖如下:

  1. 給按鈕添加事件,對應選項進行搜索。

如圖所示:

  1. 最后演示完成

 

小結:總體來說原理很簡單,難得的是要懂得觀察分析,然后舉一反三。

不過這個教程可能不適用于新手入門學者,尤其是對Axure工具不熟透的同學來說,有部分知識點在里面。這個作為知識學習愛好來學習就好,對實際工作中運用也不大。

學海無涯,我愿意。

 

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

Axure中繼器教程:使用中繼器實現菜單及tab頁簽聯動的展示

2020-11-6 18:10:36

案例教程

Axure教程:用中繼器做一個漂亮的系統首頁

2020-11-27 16:05:35

axure商城
2 條回復 A文章作者 M管理員
  1. 努力學習

    為啥我一搜索出來的都是LVAR1啊,是哪里出現問題了呢?

?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo