【Axure RP9基础】自制搜索框组合

miroro0921

已于 2022-10-21 08:45:11 修改

阅读量3.5k

点赞数

分类专栏： Axure RP9 产品文章标签： axure

于 2022-10-20 16:31:55 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/miroro0921/article/details/127428997

版权

本文档介绍了如何在Axure RP9中创建一个具有交互效果的搜索框。通过组合矩形和文本框，设置不同状态的样式，实现搜索框获取焦点时底框变色，失去焦点时恢复原色的功能。详细步骤包括矩形和文本框的组合，矩形框和文本框的交互样式设置。最后，还提示了如何将搜索框转化为母版以便于后续使用和统一调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【Axure RP9基础】自制搜索框组合

当制作高保真原型时，为了交互效果，需要将搜索框做一个获取焦点的交互。
最终效果如下图,获取焦点底框变色，失去焦点恢复：
在这里插入图片描述

步骤1：矩形和文本框进行组合

拖动一个矩形框，一个文本框，文本框放入矩形框内，略小与矩形框，调整对应的大小颜色，文本框取消线框。选中这两个元件，右键点击“组合”，起名搜索框组合，要养成起名的好习惯，方便以后查找元件。
拖动矩形框和文本框

步骤2：矩形框设置

选中外部的矩形框，点击右侧“交互栏”下方的“添加交互样式”，选择“元件选中的样式”，点击“更多样式选择”，选择“线段颜色”，挑选一个突出的颜色（这个颜色就是获取焦点时显示的颜色，需要突出，抓住眼球，与产品整体色调风格统一）

最低0.47元/天解锁文章

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。