axure实现搜索功能_Axure案例：电商网站下拉搜索框的制作

Axure案例应用

电商网站的搜索框，对商品、店铺和卖家进行搜索。切换下拉框中的内容时，切换到不同的搜索输入框，样式也相应改变，下面通过设置下拉列表框“选中项于”逻辑条件，实现上述交互效果。

Axure选中项值用例条件

设置选中项值的基本逻辑表达式为：如果“选中项值”等于“值”，那么执行动作

选中项值对应部件：下拉列表框

逻辑条件设置灵活，分别可以设为：

-值1：选中项值：可以设置部件

-运算符号：可以设置为：等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是

-值2：可以设置为值、变量值、部件值、变量及部件值长度、动态面板状态

Axure制作原型：步骤1拖入一个下拉列表框，双击“下拉列表框”，打开编辑选项窗口，点击“+”号，添加3个列表值：商品、店铺、卖家，在部件交互和注释命名名称为：搜索条件

步骤2拖入2个矩形到编辑页面，设置矩形大小：h:35，一个放到最下面，做为搜索框的背景，另一个做为搜索按钮，编辑矩形文本为：搜索。设置2个矩形边框颜色：红色；搜索按钮填充颜色：红色

步骤3拖一个文本框(单行)到编辑页面，设置位置与大小：w:407 h:31；将文本框放到下拉列表框的后面。在部件属性和样式窗口：勾选隐藏边框。设置提示文字为：请搜索商品名称；部件交互和注释窗口，设置部件名称为：商品。

步骤4选中步骤2-3中制作的部件，右键快捷菜单选择：转换为动态面板

步骤5双击动态面板，点击“新增”按钮，添加2个状态，编辑3个状态名称为：商品、店铺、卖家，点击“编辑全部状态”按钮，打开3个状态的编辑页面

步骤6复制“商品”编辑状态中的部件，分别粘贴到“店铺”、“卖家”编辑页面中，修改矩形的边线及填充颜色，文本框(单行)中的提示文本

步骤7：设置下拉选择框“选项改变时”事件

选中“搜索条件”下拉列表框，双击“选项改变时”事件，打开用例编辑器，编辑用例1：

用例1：

第一步：用例说明，点击“编辑条件”按钮，打开条件生成器，编辑逻辑条件为：如果搜索条件选中项等于: "商品"

第二步：点击新增动作，选择“设置面板状态”动作

第四步：勾选区域前复选框，设置选择状态为：商品

点击“确定”，关闭用例编辑器

步骤8继续双击“选项改变时”事件，重复步骤6，添加用例2、用例3：

用例2：第一步逻辑条件设置，设置逻辑条件为：如果搜索条件选中项等于: "店铺"；第四步，设置选择状态为：店铺

用例3：第一步逻辑条件设置，设置逻辑条件为：如果搜索条件选中项等于: "卖家"；第四步，设置选择状态为：卖家

步骤9

生成原型，查看效果

axure实现搜索功能_Axure案例：电商网站下拉搜索框的制作相关推荐

react基础06--react综合案例-电商网站导航
react基础06--react综合案例-电商网站导航 1 介绍 2 案例设计模块 2.1 分类导航数据模型设计 2.2 一级分类导航切换高亮效果 2.3 显示二级分类导航 2.4 路由跳转到二级导航 ...
网站搜索功能怎么实现_电商网站上的搜索功能是如何实现的？
今天是刘小爱自学Java的第159天. 感谢你的观看,谢谢你. 学习计划安排如下: 索引库本质上和数据库类似,也是存储数据的,既然如此自然也会有增删改查. 那么这个索引库到底有何特别应用呢? 索引库的 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
项目案例——电商网站
初学程序结构写的一个简单网站,使用了大量的循环语句,代码重复较多,因此参考度不大. 下面是完整代码: """ 用户登录的电商网站 """ # ...
web前端学习笔记:电商网站结构搭建与基础区块制作
思维导图 1.站点结构搭建项目背景前端开发工程师的主要任务就是将UI设计图以网页.app.小程序等前端界面呈现给用户的过程. 对于大部分前端初学者来说,直接开始写代码其实是错误的学习步骤,在企业实 ...
【ES】Elasticsearch实现电商词库提示搜索
文章目录 Elasticsearch实现电商词库提示搜索前序一. 自定义analyzer 二. 自定义mappings 三. 数据的测试 3.1 添加测试数据 3.2 测试 3.3 导入数据四. ...
从用商派Onex到SAP的hybris开发电商网站
商派,10多年国内电商网站开发领军企业. SAP,几十年国际ERP领军企业,尤其最近几年收购了hybris,靠hybris进入国内电商网站开发领域. 一年中,本人有幸先后使用两者开发电商网站,现将两者 ...
《Spark SQL大数据实例开发》9.2 综合案例实战——电商网站搜索排名统计
<Spark SQL大数据实例开发>9.2 综合案例实战--电商网站搜索排名统计 9.2.1 案例概述本节演示一个网站搜索综合案例:以京东为例,用户登录京东网站,在搜索栏中输入搜 ...
基于MaxCompute+开放搜索的电商、零售行业搜索开发实践
简介:搜索一直是电商行业流量来源的核心入口之一,如何搭建电商行业搜索并提升搜索效果,一直是电商行业开发者努力攻克的难题.基于传统数据库或开源引擎虽然能够搭建基础搜索服务,但随着商品数据的增多和业务流量 ...

axure实现搜索功能_Axure案例：电商网站下拉搜索框的制作

axure实现搜索功能_Axure案例：电商网站下拉搜索框的制作相关推荐

最新文章

热门文章