做了个模仿淘宝搜索原型,先上图啦
看似简单的搜索栏,包括的内容可不少哦,包含了:矩形、文本框、动态面板等。
操作步骤:
一、添加元件
1.新建三个矩形, 宽:51,高:26
注:选中的交互样式中,天猫的填充色与其它两个不一样哦。
2.新建一个动态面板,宽:720,高:39,命名为:搜索,添加3个状态,分别命名为: 宝贝、天猫、店铺
3.分别编辑3个状态,以宝贝状态为例
3.1.添加3个矩形
3.2.添加放大镜图片,命名:放大镜-宝贝
以类似的方法添加另外两个状态中的元件;
二、添加动作
1.选中“宝贝”元件,添加鼠标单击时的动作,如下图
注:在此添加了光标定位,选中某个标签时,光标就直接定位在搜索框内,可直接输入文字,省去鼠标再次定位的动作,更加人性化,很多网站目前还是要再多点一步的。
用类似的方法添加另外两个矩形的 鼠标单击时的动作
2.为动态面板中“宝贝”状态添加动作
选中“宝贝-搜索框”,添加文字改变时的动作和失去焦点的动作
用类似的方法添加另外两个动态面板状态的动作
完成到还差一步哦,在最后,添加页面交互,添加页面载入时的动作,如图
到这里,大功告成啦,哈哈。
原型下载地址:http://pan.baidu.com/s/1c0zVC9E
原文地址:http://blog.sina.com.cn/s/blog_132c33ba10102v21q.html
转载请注明:木卫艾欧网 » Axure实例教程:仿淘宝搜索原型