【Axure】如何画查询框

【前言】

       如何在做系统之前能够最大程度的把系统面貌展示出来呢？Axure就是一个很好的原型工具。因为系统需要，所以最近一直在研究Axure。经过了这段时间的学习，也算是有一点收获吧，和大家分享。

如何画查询框？

一、案例效果：

输入文字前：

 

输入文字后：

 

二、案例描述：

文本框可以添加文字提示，输入时消失。在查询按钮里，矩形中的文字提示包含图标。文本框和查询框边角为圆角，边框颜色分别为蓝色和灰色。

三、元件准备：

 

四、操作步骤：

1、从元件库中找到图标，拖放到画布。（查询图标可以用图片代替）

2、将想要背景显示的文字输入到文本框属性的“提示文字”中，隐藏提示触发选择“输入”。（点击提示样式可以修改提示文字样式，默认为灰色）

 

3、将文本框设置隐藏边框和背景透明。

 

4、将左侧矩形设置为与文本框同样大小，放在原文本框位置，设置为底层。拉动左右矩形上面的小三角，调整圆角半径（也可以在样式内修改）。

 

5、设置边框。在样式中的边框设置边框宽度，颜色和线段样式。

 

6、设置右侧矩形框字体颜色和背景颜色，选择合适的颜色和透明度。

 

7、完成以上操作，即实现了整体效果。

【总结】

       在研究Axure的过程中，我从一个不知道Axure是什么的小白，到可以熟练的运用Axure，这个过程中有迷茫，有混乱，有厌倦，但也有学到知识的快乐和收获时的兴奋，这个过程是珍贵的。实践告诉我们，没有什么是你不会的。多查多学，了解的多了，就会了，实践的次数多了，就能够把东西做好了!相信自己！Yeah！