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

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

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

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

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

步骤2：矩形框设置

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

步骤3：文本框设置

选中内部的文本框，点击右侧“交互栏”下方的“新建交互”，选择“获取焦点时”，选择步骤1中的组合“搜索框组合”，设置选中为“真”，此时的预览效果是鼠标点击本文框底框变色；为了让移出时恢复