尝试使用Axure RP设计购物车系统

已于 2022-05-06 22:55:23 修改
阅读量2.4k 收藏 10
点赞数 2
文章标签： axure
于 2022-05-06 22:52:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61848611/article/details/124620721
版权
本文介绍了如何使用Axure RP设计购物车系统，包括手机和电脑界面的商品列表、详情、购物车及支付流程。用户可以通过搜索、筛选、添加到购物车、结算等操作完成购买过程，系统提供了丰富的交互体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

购物车系统开发设计

Axure RP介绍

Axure RP是一款可以用于系统开发和设计的原型工具，功能丰富强大，使用方便。

内置多种元件、图标

有页面管理处

实现交互

对元件进行操作的地方

最低0.47元/天 解锁文章
Axure RP：AxureRP原型设计流程_2024-07-22_05-55-58.Tex
11-15 996
菜单栏: 提供文件、编辑、视图、插入、交互、预览等主要功能。工具栏: 包含常用的工具，如选择、移动、缩放等。组件库: 预置了各种网页和移动应用的组件，如按钮、文本框、列表等。画布: 这是设计原型的主要区域，所有设计元素都在这里放置和编辑。属性面板: 显示当前选中元素的属性，可以在这里调整元素的大小、位置、样式等。交互面板: 用于设置元素的交互行为，如点击、拖动、滚动等事件的响应。Axure RP允许使用JavaScript编写自定义脚本来增强原型的功能。
Axure RP：AxureRP移动端原型设计_2024-07-22_06-39-00.Tex
11-15 1244
在开始设计移动端原型之前，定义项目需求是至关重要的第一步。这一步骤确保了设计的方向和目标清晰，避免了后续设计过程中的返工和资源浪费。目标用户群体：了解你的目标用户，包括他们的年龄、性别、职业、兴趣等，有助于设计出更符合用户需求的界面。功能需求：明确应用需要实现的核心功能，如登录、搜索、购物车等。用户体验需求：考虑用户在使用应用时的流畅度、易用性、美观性等，以提升用户满意度。技术需求：确定应用的技术架构，如是否需要支持多平台、数据同步等。除了使用标准元件库，Axure RP还允许你创建自定义元件。
【Axure交互教程】购物车结算效果
Daisy Axure
08-04 5733
作品名称：滑动拼图验证登录效果 作品编号：Case010 软件版本：Axure9 作品类型：交互案例 今天我们制作的是移动端的购物车结算效果，主要涉及的是中继器的使用，全选以及数量的计算。 原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case010 效果预览： 一、中继器数据绑定 准本元件 1.拖入一个中继器元件，命名为「商品列表」，样式列表中设置布局为垂直，间距为10，填充数据如下： 2.双击进入中继器，拖入下图中的所
mui实现分享功能_源码时代UI设计干货分享|带你用AXURE实现购物车功能 (1)
weixin_39755625的博客
11-27 192
1，新建AXURE页面，利用椭圆元件绘制两个基本按钮功能“-”和“+” 并且给出相应的命名minus（减）和add（加） 2，添加标题元件修改标题为默认数字“0”（购物车的基数都是从0开始的） 并且命名为：num（number）3，设置添加“+”交互函数 （1）设置属鼠标单击时 （2）设置文本选择num元件（3）设置函数变量fx （4）插入变量函数（因为在没点击“+”的时候当前的值...
axure，购物车数量递增或递减
weixin_30920597的博客
03-18 911
1、新建一个空白页面，拖入三个文本标签框并给文本框分别命名为减号、值、加号，如下图 2、选中减号文本标签，添加点击事件如下图 3、设置变量值，可用系统自带的或者自己新建一个，我这里新建一个number，下图先执行（图1）中的步骤1及步骤2，然后根据（图2）添加新的全局变量，点击确定后执行（图1）步骤3，流程如下图，具体步骤为（图1）步骤1-->（图1）步骤2-->（图2）步...
购物网站 -(axure) 制作
01-23
本人自己制作 绝无截图制作 感谢大家下载指正
源码时代UI设计干货分享|带你用AXURE实现购物车功能 (1)
ITsource
11-30 2565
1，新建AXURE页面，利用椭圆元件绘制两个基本按钮功能“-”和“+” 并且给出相应的命名minus（减）和add（加） 2，添加标题元件修改标题为默认数字“0”（购物车的基数都是从0开始的） 并且命名为：num（number） 3，设置添加“+”交互函数 （1）设置属鼠标单击时 （2）设置文本选择num元件 （3）设置函数变量fx （4）插入变量函数（因为在没点击“+”的时候当前...
AXURE RP9手机APP购物车流程
11-09
包含一个完整的购物车流程
Axure RP：AxureRP元件库详解_2024-07-22_05-07-14.Tex
11-15 1011
自定义元件是Axure RP元件库的扩展功能，允许用户根据自己的需求创建和保存特定的元件。例如，如果项目中需要频繁使用一个特定样式的按钮，可以创建一个自定义按钮元件，包括其外观、交互和动态面板等属性，然后保存到自定义元件库中，以供后续使用。设计元件：在画布上设计出所需的元件，包括其外观、交互和动态面板等属性。保存元件：选择设计好的元件，右键点击，选择“保存元件到库”选项，然后选择保存到自定义元件库中。命名与分类：为自定义元件命名，并选择合适的分类，以便于管理和查找。使用自定义元件。
Axure购物APP原型
11-15
Axure购物APP原型，包括个人中心、购物车、商品详情、商品列表、搜索页、首页等
购物网站完整原型Axure
04-19
Axure 完整商城原型Axure.RP.Pro案例源代码
购物车的全选，全不选，局部全选，全选判定
11-10
购物车的全选，全不选，局部全选，全选判定,
Axure RP9中继器的可做用途之一，类似于购物界面的展示
x198716的博客
03-07 1285
Axure RP9中继器的可做用途之一，类似于购物界面的展示
使用Axure画出购物车加减效果
RevorWong的博客
03-21 1936
1.把对应的元件都拖进来。（概要这里的话我都命名好啦~） 2.给“加” 元件新增一个单击事件（后续步骤如图） 3.操作完成确认后的样子 4.元件“减”和元件“加”一样，不过就多一个判断条件（当值小于=0的时候就不作为，否则就-1） ...
【案例分享 | 图书电商APP】Axure制作购物车加减的交互效果
小伟
03-11 660
哈喽，大家好！今天给大家介绍如何使用Axure制作购物车加减的交互效果。
axure购物车加减实现
我的博客
09-18 1367
实现目标：    1. 加号或减号时鼠标悬浮变色；    2. 点击加号 +1，减号 -1，最小是0； 步骤一： 放加号减号和输入框元件 步骤二： 设置样式鼠标悬浮变色 鼠标放上时： 步骤三： 点击加号 +1 项目–>全局变量：新增全局变量：ShoppingCart 默认值为0 加号添加点击事件： 设置 变量ShoppingCart +1 设置输入框的值为 变量值ShoppingCart 步骤四： 点击减号 -1 同加号事件逻..
Axure9.0制作简单购物书店APP
weixin_63655126的博客
02-29 1161
而且还有一个大问题，感觉这个APP应该要和数据库进行连接，然后访问数据库的内容，我后面增加了库存一项，因为我的初衷是帮我的社团设计一款书店APP以便我们举办活动，我们的库存有限，如何把页面操作的库存数量实时更新到中继器里面去是个大问题。这个软件功能很强大，它给我的感觉是视觉化的代码，感觉就是在写代码，可能省略了代码的框架和一些冗余的语法，其中设置变量，添加中继器什么的这样的操作真的要非常强的逻辑，这个变量在这一层可以使用，但是在另一层就不能使用了，或者会置零什么的。，密码是1234，加载有点慢。
Axure鲜花商城网站原型图，网上花店订花本地生活电商30页，RP成品
默林工作室
01-02 1332
本作品为「鲜花购物商城」网站模板，高保真高交互，属于O2O本地生活电商平台，网站宗旨为：提供市内送花到手服务，表白快人一步；「前台页面」，首页、登录、注册、搜索、商品列表、商品详情、购物车、提交订单、在线付款、我的订单、订单详情、我的足迹、个人信息；「商户后台」，后台登录、后台首页、分类管理、商品管理、订单管理、用户管理、评价管理、系统管理。
jquery 判断是否有类名_jQuery实现购物车小案例
weixin_39792475的博客
11-19 121
做的一个关于购物车的小案例，用表格实现，欢迎指正！功能包括以下几点：1、商品全选、全不选2、选择删除商品3、清空购物车4、已选择多少件商品5、选中商品总价6、商品数量加减7、删除商品记得引入jQuery插件！记得引入jQuery插件！记得引入jQuery插件！重要的事情说三遍布局：<table cellspacing='0' cellpadding='0'> <th...
axure购物车选择
最新发布
03-02
### Axure 中实现购物车选择功能 在 Axure RP 设计购物车系统时，为了实现在购物车页面中通过点击按钮来选中商品的功能，可以通过动态面板和条件操作相结合的方式完成。 #### 创建基础结构 首先创建一个用于展示单个商品项的矩形组件，并将其转换为可重复使用的母版。在这个母版内部放置多个控件表示商品图片、名称、单价等信息外还需要加入两个重要元素： - **多选框**：用来标记该条目是否被选中。 - **隐藏文本字段**：存储对应商品的价格数值以便后续计算总价使用[^1]。 ```html <!-- 示例 HTML 结构 --> <div class="cart-item"> <input type="checkbox" id="item-select"/> <label for="item-select"></label> </div> ``` #### 添加交互逻辑 对于每一个商品项而言，当用户勾选或多选框状态改变时触发事件处理程序更新关联的商品合计金额区域的内容。具体做法是在“On Click”动作里配置如下指令序列： - 更新父级容器内的特定文本标签（如名为`TotalPrice`），其表达式应累加所有已选项对应的隐藏域所保存的价值； - 如果存在全选控制，则同步调整此全局开关的状态以保持一致性； 此外还需定义额外规则确保每次加载页面或刷新列表视图之后能够自动恢复之前记录下的选择情况[^2]。 #### 处理特殊情况 考虑到用户体验方面的要求，在实际开发过程中可能还会涉及到一些细节上的优化措施，比如防止未选定任何项目的情况下允许访问结算流程等功能限制机制的设计[^5]。 #### 完整示例代码片段 下面给出一段简化后的 JavaScript 片段作为参考，展示了如何利用脚本增强上述提到的部分核心特性： ```javascript // 假设有一个数组 cartItems 存储着所有的商品对象 let total = document.getElementById('total-price'); function updateSelection() { let selectedItems = []; // 遍历所有商品并累计已被选中的那些 cartItems.forEach(item => { if (item.selected) { selectedItems.push(item); } }); // 计算新的总计并将结果显示出来 const newTotal = selectedItems.reduce((sum, item) => sum + parseFloat(item.price), 0).toFixed(2); total.textContent = `￥${newTotal}`; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值