Axure实例教程：仿淘宝搜索原型

做了个模仿淘宝搜索原型，先上图啦

看似简单的搜索栏，包括的内容可不少哦，包含了：矩形、文本框、动态面板等。

操作步骤：

一、添加元件

1.新建三个矩形， 宽：51，高：26 ， 无填充色、无边框， 分别命名为：宝贝、天猫、店铺，并为三个矩形添加交互，设置鼠标悬停与选中的交互样式；
注：选中的交互样式中，天猫的填充色与其它两个不一样哦。
2.新建一个动态面板，宽：720，高：39，命名为：搜索，添加3个状态，分别命名为： 宝贝、天猫、店铺 ；
3.分别编辑3个状态，以宝贝状态为例
3.1.添加3个矩形
    1.宽：720，高：39，填充色：橙色
    2.宽：616，高：33，命名：宝贝-搜索框
    3.宽：81，高：35 ，填充色：橙色 ，字体：白色
3.2.添加放大镜图片，命名：放大镜-宝贝
以类似的方法添加另外两个状态中的元件；

二、添加动作

1.选中“宝贝”元件，添加鼠标单击时的动作，如下图
注：在此添加了光标定位，选中某个标签时，光标就直接定位在搜索框内，可直接输入文字，省去鼠标再次定位的动作，更加人性化，很多网站目前还是要再多点一步的。

用类似的方法添加另外两个矩形的 鼠标单击时的动作 

2.为动态面板中“宝贝”状态添加动作
选中“宝贝-搜索框”，添加文字改变时的动作和失去焦点的动作

用类似的方法添加另外两个动态面板状态的动作

完成到还差一步哦，在最后，添加页面交互，添加页面载入时的动作，如图

到这里，大功告成啦，哈哈。

原型下载地址：http://pan.baidu.com/s/1c0zVC9E

原文地址：http://blog.sina.com.cn/s/blog_132c33ba10102v21q.html

转载请注明：木卫艾欧网 » Axure实例教程：仿淘宝搜索原型