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

相关推荐

  • 学习AxureRP的成长之路

    原文作者@朱军华Ronzhu , 本文借用官网的描述定义,介绍了在学习AxureRP过程当中所要经历的各个阶段,也结合了作者自身学习AxureRP使用的经验,讲一下在各个阶段中的一些学习方法和经验总结,以帮助刚开始学习使用…

    2014-09-06
  • 【Mockplus教程】删除

    1 删除单个页面或分组 直接选中需要删除的页面或分组,在右键菜单中选择“删除”,或者使用Delete键删除; 2 删除多个页面或分组 在同一个分组下,按住Ctrl键,鼠标单击页面选择多个需要删除的页面或分组,然后右击选…

    Mockplus 2015-09-10
  • 设计师必看:8处满足原型设计的矢量图标根据地

    做原型设计时,我们往往感觉图标素材不够用,尤其是矢量图标不够。矢量图标是矢量图的一种,这种图形也叫做绘图图像,是各种设计中比较常用的图片格式之一。因为其是根据几何特性绘制,并且通过数学公式计算获得,…

    2023-03-03
  • Mockplus原型交互跟我做之1-30秒做一个自动消失的消息框(Toast)

    从现在做,跟我一起来认识Mockplus的交互。 Mockplus的交互,非常简单、直观、容易上手。你所需要做的,只是拖一拖鼠标,然后几步设置而已。 当然,只要你愿意,还可以实现强大的交互效果。 不废话,先来做一个,试…

    2016-01-18
  • 019. 菜单组件——axure线框图部件库介绍

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

    2014-09-12
  • Axure快捷键大全 Axure RP Pro 6.5快捷键

    转载请注明:Axure中文网 » Axure快捷键大全 Axure RP Pro 6.5快捷键

    2015-01-01
  • 021.Axure自动备份功能!让意外不在可怕!

    忘记保存了。。。。。。。。。 电脑意外重启了。。。。。。。。。。。。。。。 不小心删除了。。。。。。。。。。。。。。。。。。。。。。。。。。 每次做axure的时候,多有了太多的意外了!   萧何今天在微…

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

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

    2015-05-28
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 关于Axure rp的相关介绍

    Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。 Axure正确的英文发音应该是(ak sh…

    2014-09-09