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,专为设计师而打造的创新性原型设计工具。Mockplus适合于各种应用软件的制作,无论是手机应用,网页应用,亦或是桌面应用,方便快捷。让我们先来看一看为什么说Mockplus…

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

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

    2016-01-06
  • JustinMind交互与事件

    JustinMind交互事件说明 1.事件与交互 事件是JustinMind的一个关键功能,Justinmind Prototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义一个特定…

    2015-04-22
  • Axure教程:如何学习AxureRP Axure学习方法

    【编者按】本文作者@朱军华Ronzhu , 本文借用官网的描述定义,介绍了在学习AxureRP过程当中所要经历的各个阶段,也结合了作者自身学习AxureRP使用的经验,讲一下在各个阶段中的一些学习方法和经验总结,以帮助刚开始学习使用AxureRP的朋友更好的制定自己的学习计划,以便尽早掌握其使用方法,设计出中高保真度的原型。

    2015-01-01
  • 【Mockplus教程】为什么我不能设置链接的切换动画?

    目前只有mobile项目和pad项目支持链接切换动画,桌面项目、网页项目、空白项目均没有支持。

    Mockplus 2015-09-23
  • Chinco(摩客串串)——App原型交互演示利器

    Chinco是继国产原型设计软件Mockplus之后,由摩客团队独立设计开发,秉持了摩客团队“关注设计,而非工具”的一贯理念和产品风格。 Chinco是一款用于App原型交互演示的工具,为UX/UI设计师、交互设计师、视觉设计师的…

    2015-11-18
  • Axure RP 8.0新功能解析

    这个版本强化了Axure的三个核心功能——原型、交付,和协作。 8.0 Beta版改动相当之大,且这几个月会有一些重要更新,我们一起期待吧 :) 用户界面 1.合并了三个部分:部件交互和注释、部件属性和样式、页面属性。将…

    2016-05-09
  • 5款常见原型工具,产品特色知多少?

    工欲善其事必先利其器。天天和产品打交道,无可避免的要做一些页面原型,当然也离不开各种工具。好的原型工具软件可以大大提高工作效率,但是每款工具各有优劣。之前写过一篇基于不同平台的原型工具介绍,分别是基…

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

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

    2015-11-05
  • web产品设计规范

    新浪乐居常用交互控件的使用规则。 下载地址:web产品设计规范-新浪乐居

    原型设计教程 2014-10-28