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实例教程:仿淘宝搜索原型

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/2450/

(0)
TinadminTinadmin
上一篇 2014-12-31 19:00
下一篇 2014-12-31 21:01

相关推荐

  • [Mockplus教程]如何批量导入图片到收藏夹中?

    有项目打开时,定位到“我的收藏”的“图片”选项,在下拉菜单选择“批量导入图片”, 根据提示选择导入图片。 完整演示如下:

    Mockplus 2015-09-18
  • 跳出思维圈,“类H5”助你市场推广一臂之力

    HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来…

    2023-03-03
  • 第五章 PC软件首页交互设计

    互联网产品的第一印象就是首页,重要性毋庸置疑,首页可突出设计值或决策者希望第一时间重点表达的内容。现在市场上的WEB产品,APP产品,PC产品等没有完全相同的首页,几乎所有的团队都根据自家的需求与侧重点进行…

    2014-10-12
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • Axure官方教程中文版第4课:构建交互动作-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(4).MP4 新建文件 1、添加一个按钮和两个文本框 2、禁用第二个文本框 3、设置第一个文本框不可点击 4、设置第二文本可用 5、将第二个文本框设置获…

    2015-01-26
  • Axure 8.0正式版发布,下载文件、汉化包、激活码在这里~!

    2016-10-31 更新:AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key! https://www.iamue.com/18540 正式版已经发布,官方地址已经由:http://axure.com/beta,换成了:http://axure.com/features/n…

    2016-04-16
  • 使用Axure制作App原型怎样设置尺寸?

    最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?
    若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。
    这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。

    2014-12-31
  • Axure快速原型设计

    该教程中包括入门篇、案例篇、秘笈篇,非常适合刚接触Axure的人学习。   Axure使用教程下载地址:Axure快速原型设计

    2014-10-28
  • 013. 图片热区——axure线框图部件库介绍

    首先,我们将图片热区组建拖动到axure页面编辑区域 1. 图片热区为页面图片或者其他部件添加热区,添加交互 我们一般在做专题的时候,会遇到一些组合商品,但是又需要单独分别设置连接,如果是2张图片还好办点,可是…

    2014-09-12
  • Mockplus演示和分享原型设计的8种方式

    Mockplus目前是国内比较流行的原型设计工具,功能上,相比Axure不算全面和强大,但在不少功能上有它独到之处。Axure有个比较让人头疼的地方,就是对于移动App项目的预览和演示比较麻烦,而这个方面,Mockplus展现了…

    2023-03-03