Axure 实例 - 搜索框提示 & 输入联想

最近对于用 Axure 来模拟高保真的交互效果有点上瘾,虽说在实际运用中不太提倡这种极致的做法,但日常拿来练练手却是个不错的选择。不仅可以掌握更多软件的高级功能,还可以在还原一个高保真模型的过程中激发想法以及提高自己对于更多细节的关注度。

这次用于练习的实例依然是很常见的场景,主要模拟的效果是搜索框的输入联想功能,同时还包括了相关的一些交互细节。

预览 | 下载

要求:
1、实现搜索框中提示文案在焦点触发和实际输入两种事件下的不同效果。
2、实现对于输入内容时的即时联想提示和相关的鼠标事件。
3、实现输入内容为空时的提示效果。

对主要的控件做 Lable 命名:
[搜索框]search-box
[输入联想列表]search-list

一、搜索提示的效果:
1、默认显示[请输入关键词]的提示文案。
2、焦点触发时提示文案的颜色转淡。
3、输入开始时提示文案消失。
4、无输入内容且焦点离开时提示文案恢复。

对 search-box 设置好默认的文案, 由于 Text Field 控件中的文案在变量替换时不支持代入颜色,所以这里需要用一个 Dynamic Panel 来存放焦点触发时颜色转淡后的文案,命名为 search-tip,状态隐藏,并将位置微调至与默认文案重合。

添加 OnFocus 事件:
If:search-box 的 text on widget 为[请输入关键词]。
Case:设置 text on widget 的值为空值,并显示 search-tip。

添加 OnKeyUp 事件:
If:search-box 的 text on widget 不为空值。
Case:隐藏 search-tip。

添加 OnLostFocus 事件:
If:search-box 的 text on widget 为空值。
Case:隐藏 search-tip,并设置 text on widget 的值为[请输入关键词]。

二、输入联想的效果:
1、即时模拟显示与当前输入相匹配的关键词列表。
2、输入超过 7 个字符时隐藏列表,用以模拟无匹配结果时的效果。
3、对列表中的关键词添加鼠标移入背景高亮的显示效果,同时用高亮的关键词替换当前输入的内容。

用一个 Dynamic Panel 来做输入联想的列表,命名为 search-list,状态隐藏,并在 其中添加 10 个 Text Panel 并依次命名为 list-1 ~ list-10 。

对 search-box 添加 OnKeyUp 事件:
If:search-box 的 text on widget 不为空值。
Case:显示 search-list,将 text on focued widget 的值赋值给变量 searchbar,并逐个设置将 list-1 ~ list-10 的 text on weiget 替换为该变量,格式可以改为类似 [[searchbar]] ×××××,以便更好的模拟实际效果。

If:search-box 的 length of value 值 > 7
Case:隐藏 search-list。

If:search-box 的 text on widget 为空值。
Case:隐藏 search-list。

添加 OnLostFocus 事件:
If:search-box 的 text on widget 为空值。
Case:隐藏 search-list。

Else If:search-box 的 text on widget 不为空值。
Case:隐藏 search-list。

完整事件:

在 list-1 ~ list-10 下方添加 10 个 Dynamic Panel 来做为高亮背景,状态隐藏,依次命名为 listbg-1 ~ listbg-10 。

对 list-1 ~ list-10 添加 OnMouseEnter 事件:
Case:显示 listbg-1 ~ listbg-10,并用当前 list-1 ~ list-10 的 text on widget 值替换 search-box 的 text on widget 值。

对 list-1 ~ list-10 添加 OnMouseOut 事件:
Case:隐藏 listbg-1 ~ listbg-10。

三、输入为空的提示效果:
1、点击按钮后搜索框闪烁红色边框。

由于 Text Field 控件无法对 border 设置属性,所以需要用 Rectangle 控件来模拟,长宽设置与 search-box 一致,边框改为红色,背景调为透明即可,放置在一个 Dynamic Panel 中 ,命名为 search-none,状态隐藏,并将位置微调至与 search-box 重合。闪烁效果可以利用 Show Panel 事件的 Animate 属性来实现。

为按钮添加 OnClick 事件:
If:search-box 的 text on widget 为空值 or 为[请输入关键词]
Case:显示 search-none,隐藏 search-none,再显示 search-none,再隐藏 search-none,并将每一次的 Animaate 属性 Fade 时间设为 500 ms。

这个实例在设计的过程中为了使最后的效果趋于完美,特别需要考虑到在实际中各种可能出现的逻辑问题,所以对每个事件几乎都要设置相应的规则作为触发条件。

  • Jony

    工作上正好用到这个效果,请求给下源文件,非常感激,跪谢!

  • Jony

    我也想要源文件,求大神给个源文件,地址下载不了

  • zheng

    可以提供一下原型文件么?我摸索了半天没弄明白
    zhengliyan1106@163.com
    谢谢了

    • http://24says.com 24Says

      文中开头有下载地址的,所有的案例都在 GitHub 上。

  • pingping

    大神,可不可以发原型文件研究一下
    149422710@139.com

    • http://24says.com 24Says

      下载地址更新了。

      • pingping

        已下载。谢谢!妈妈再也不用担心我的学习

  • nora.chan

    我也想拿下原型。我也是下载不了!
    谢谢啊!

    cjz741262008cjz@gmail.com

    • http://24says.com 24Says

      下载地址已更新。

  • liyang

    我也想要下原型研究下

    • http://24says.com 24Says

      文中有下载地址。

      • liyang

        但是我下载不了

        • http://24says.com 24Says

          邮件发你了。

  • zilong

    好厉害啊,求原型文件,谢谢!!

    wangzilong1109@gmail.com

    • http://24says.com/ 24Says

      站内有提供下载的。

  • jinnhan

    我想要一下原型文件,好好学习学习,谢谢!
    jinnhan@126.com

    • http://24says.com/ 24Says

      已发,注意查收。