交互学堂
专注分享专业知识

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

做了个模仿淘宝搜索原型,先上图啦
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.选中“宝贝”元件,添加鼠标单击时的动作,如下图
注:在此添加了光标定位,选中某个标签时,光标就直接定位在搜索框内,可直接输入文字,省去鼠标再次定位的动作,更加人性化,很多网站目前还是要再多点一步的。
Axure实例教程:仿淘宝搜索原型

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

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

Axure实例教程:仿淘宝搜索原型
用类似的方法添加另外两个动态面板状态的动作

完成到还差一步哦,在最后,添加页面交互,添加页面载入时的动作,如图
Axure实例教程:仿淘宝搜索原型
到这里,大功告成啦,哈哈。

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

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

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

赞(0) 打赏
未经允许不得转载:IAMUE » Axure实例教程:仿淘宝搜索原型

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏