交互设计 » 如何用axure做搜索功能交互的下拉框

如何用axure做搜索功能交互的下拉框

发表于: 交互设计. 评论
Sponsor

要在Axure中设计一个搜索功能的下拉框,您可以按照以下步骤进行操作:

演示效果:

如何用axure做搜索功能交互的下拉框

将要实现的功能

  • 当输入框的文本发生变化时,下拉列表显示搜索的内容
  • 当点击下拉列表中的项目时,输入框显示该项目文本
  • 当输入下拉框值包含的字符时,自动筛选出对应的内容

如何实现这些功能

  • 当输入框的文本发生变化时,在下拉列表中添加一个过滤器来过滤输入框中的文本。
  • 当设置下拉列表的项目被点击时,输入框显示下拉列表的项目文本。

制作过程

第一步:Widgets设置

  • 将一个单行输入框拖入画布,并命名为 “First Name”。
  • 将一个中继器拖入画布,然后添加一个新的行数据。

如何用axure做搜索功能交互的下拉框

创建一个动态面板,包括中继器,并且将动态面板命名为Search Panel。

如何用axure做搜索功能交互的下拉框

第二步:设置交互

如何用axure做搜索功能交互的下拉框

添加过滤器。选择文本字段,添加[when TEXT CHANGED]的交互,添加[Add Filter]的新动作,并设置中继器规则:[First_Name] [contains] [Text on widget] [First Name]。

如何用axure做搜索功能交互的下拉框

添加GOT FOCUS动作。设置动态面板的选择状态。

如何用axure做搜索功能交互的下拉框

  • 双击中继器,选择矩形,并添加[Click OR TAP],将矩形的文本分配给搜索文本字段,隐藏搜索面板,同时取消选择。
  • 默认隐藏搜索面板,并且设置搜索框的选定样式。

作者:小斐实战

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }