Axure制作仿淘宝搜索原型

Axure制作仿淘宝搜索原型

学会一个案例,是为了丰富我们的交互原型设计,俗话说,实践出真知,我们可以在此基础上变换出层出不穷的效果!那么今天我们从大众所熟知的淘宝搜索来进行Axure仿淘宝搜索原型的实例教程。其实我们不难发现,不管是淘宝,或者是微信,亦或者是各大网站的搜索栏都包含在UI设计里面,以及详情页,像淘宝这些做的非常成功,一整个页面的布局以及指向搜索做的都非常好。

说了那么多,我们今天就用Axure软件来做一个仿淘宝搜索的原型。看着小小的框架,但包括的内容还挺多的。

我们可以先看一下淘宝页面的搜索栏:

Axure淘宝    

操作步骤:

首先添加元件:

第一部分:

1.拖入一个矩形元件,宽度和高度可以不需要完全按照淘宝页面的设置一样,比如,宽500、高50。

2.选中矩形,在样式里面设置边框的颜色和粗细,边框可以调整粗细为2,边框颜色就类似于淘宝橘黄色,比如选择FF6600。

3.再拖入一个矩形2,进行缩放,与矩形1对齐,双击输入文本“搜索”二字,对齐之后,选中矩形2,把它的填充颜色更改为和矩形1边框颜色相同,可以通过最近选择颜色填充,边框设置为无,“搜索”二字字体大小设置为14或者16,加粗,文字颜色设置为白色,文字之间空格直接双击按空格键。

Axure矩形元件

4.我们在点击淘宝搜索的时候发现它会产生一个简单的变深的颜色,如果要实现这个效果。我们点中矩形,添加交互。在属性里面,选择鼠标悬停,点击鼠标悬停,会谈话一个对话框,然后对填充颜色设置为FF3300,然后点击更多,将选择的颜色往下拉,加深,点击确定:

Axure边框颜色

5.设置完之后可以看一下预览效果,在这里,我们发现淘宝搜索其实是有一个超链接效果的,我们也可以在属性里面,设置,点击“创建链接”,可以选择page1。

Axure创建链接

第二部分:

长搜索框已经设置完成,接下来要对三个小框进行设置。

1.拖入三个矩形2,设置大小,宽设置为70、高为30。输入文字:宝贝、天猫、店铺。宝贝的填充颜色为和之前一样的橘黄色,另外两个填充颜色为白色,边框无,宝贝的字体颜色是白色,加粗,天猫、店铺字体颜色为橘黄色。鼠标划过时,天猫和店铺的颜色变色,设置交互,当鼠标悬停时,填充颜色设为灰色。

Axure设置颜色

2.设置输入框,找到表单元素,拖入第一个文本框,把文本框拖入矩形1中(也就是长矩形搜索框)宽度和高度设置为一样的。因为文本框的默认填充颜色为白色,我们把他设置为无,在属性中选择隐藏边框:

Axure隐藏边框

3.然后放入搜索框的位置。然后在属性里面,找到提示文字,输入“请输入宝贝名称”,在提示文字前面按两个空格,提示样式可以自行设置,比如我设置为“获取焦点”时文字消失:

Axure提示文字

第三部分:

搜索框前面的放大镜和后面的上传照片的按钮,我们把这两个效果也操作一下。

1.先把文字提示之前再多按几个空格,留出足够的空间放置放大镜。元件库中找到放大镜和相机元件,直接拖出来,把款设置为20,高为18。放大镜的颜色太深了,可以在样式里面降低透明度值。(可能外观有些不同。)

Axure空格

2.两个元件同样设置交互,鼠标悬停变色,填充颜色设置为橘黄色。跟之前的操作方法一样。

3.我们在输入文字的时候,需要把放大镜隐藏。我们选择属性中“文本改变时”选择放大镜隐藏:

Axure隐藏

动画那边也可以选择,我就直接默认了。我们可以看一下预览效果:

Axure预览效果

仿淘宝搜索框原型到这里就完成了,更多教程点击文章:Axure设计支付宝底部标签导航模板

在线客服
客服邮箱
客服电话
17051276424