您现在的位置:   首页 >> 新闻中心 >> 原型设计

【Axure教程】多条件分类搜索框原型

发布人:www.yunke.ai 发布时间:2021-01-01 137 次浏览

编辑导语:在我们使用搜索的时候,经常会遇到分类搜索框。它们应该如何制作呢?今天,本文作者教大家如何在Axure里做一个高保真的分类搜索框。

一、什么是分类搜索框?

首先和大家简单的介绍一下什么是分类搜索框,就是可以按照不同分类来进行搜索,最简单的例子就是百度搜索,例如我想搜索皮卡丘,我可以按照不同的类别搜索皮卡丘相关的图片、视频、贴吧、产品、资讯等等。

原型预览地址:https://6vytni.axshare.com

下面,我们主要学习如果制作分类外联搜索的原型,后续也可以多条件搜索表格、卡片、产品的内容。

二、材料准备

  • 输入框*1——隐藏边框;
  • 搜索图标*1——放大镜的图标,用于美化原型,相当于搜索按钮;
  • 矩形外框*1——设置为圆角,作用是美化原型;
  • 中继器*1——制作下拉的内容,取消勾选隔离选项组效果,默认隐藏;内部表格第一列填入分类选项,案例中的选项为网页、资讯、视频、图片、知道、文库、贴吧、采购;你们也可以根据实际的分类来制作;
  • 中继器内部矩形*1——设置成取消边框,移入的交互样式将文字设为蓝色,选中样式将文字设为白色,填充颜色设为蓝色,设置为单选组;
  • 文字文本——用来回显选择了那个分类,案例中默认是搜索网页;
  • 下箭头——用于美化原型,

所有材料准备好之后,如下图所示摆放:

三、交互制作