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

相关推荐

  • Justinmind 6.5 激活/破解 延迟使用时间FOR MAC

    Justinmind6.5 for mac延长试用时间 1、解压后获得jm6.5_cr.sh文件 2、打开终端(方式一:到“Lauchpad”中找到“其他”,里面找到“终端”点击打开;方式二:快捷键“control + 空格”,在“spotlight搜索”中输入“终端”启动…

    2015-05-28
  • 019. 菜单组件——axure线框图部件库介绍

    软件类的教程,我写不出长篇大论,这里面的都是基础的操作,希望初学者,根据一个功能演示,可以自己测试其他功能菜单的效果! Axure自带的菜单组件,我几乎没有用到过,做菜单导航,我第一时间想到的还是矩形组件…

    2014-09-12
  • Axure中文教程:注释功能

    AxureRP将交互与注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明。交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时,发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开,但是他们的实际功能是一致的,可以一起来说。这里主要讲述annotations,即注释说明,这个部分主要应用于后期的产品规格说明书的生成,详细可参见《AxureRP教程–生成规格说明书》。

    2015-01-01
  • 『交互指南』即便你已经是一个交互设计师,这篇文章也值得一读,交互设计入门完全指南。

    准备好涉足交互设计了吗?在这篇文章中,作者对交互设计的各个方面做了简单介绍:包括历史、原则、知名设计师,以及他们的设计方法等等。即便你已经是一个交互设计师,这篇文章也值得一读。 相较于网页设计波澜不惊…

    2015-01-27
  • axure日常使用问题集锦,不断更新!

    1. axure生成的原型文件,如何自动隐藏sitemap和page notes 答:axure默认打开的都是index为索引的文件,我们只需要打开其他的页面文件,就可以自动隐藏sitemap和page notes 2. axure 6.5版 如何让一个部件在页面向…

    原型设计教程 2014-09-12
  • Mockplus原型交互跟我做之9–再说“链接点”

    上次我们已经对链接小圆点进行了图文并茂的说明,其实无论是跨页链接还是页内链接,在链接创建好了之后,选中按钮,当你把鼠标移动到小圆点的时候,它会自动指示链接目标(链接到的页面或者组件),请参考如下演示…

    2016-07-07
  • Justinmind6.8汉化包下载以及Justinmind6.8新功能新增苹果手表部件库

    Justinmind6.8汉化包已经出来了,您如果更新到最新版本截至2015年9月11日 可以下载本汉化包,汉化包来自QQ群:156360020 邀请码iamue 安装汉化的方法压缩包里都有,还有你还可以参考历史版本的汉化包: Justinmind6…

    2015-09-11
  • Axure基础教程:Axure中表格使用的技巧

    对于新手来说,用Axure做一个表格是一件麻烦的事情。本文教你如何快速学会Axure表格的基础应用。

    2015-01-01
  • Mockplus: 一款简单而又强大的原型设计工具

    在网络技术蓬勃发展的当今社会,各类线框图和原型设计工具也随之而大量涌现。但是,作为一款简单又不失强大的新型工具,Mockplus借着它的独特之处在市场中也占有着它的一席之地。 作为一款简单,易学,易用,无代码…

    2015-11-05
  • 023. axure制作项目符号列表样式

    像这样的在文字前面添加项目符合列表,不只是在word中可以实现,在axure中也可以很方便添加 l  Axure rp 6.5的软件安装、汉化与注册 l  认识Axure的软件界面 l  生成网页原型的三种方法 l  如何关闭IE浏览器在生成…

    2014-09-12