这篇文章分别使用到了我先前的四篇文章：《Axure教程：实现商品分享功能》、《Axure教程：数量加减的实现》、《Axure教程：规格的实现》、《Axure教程：使用动态面板实现收藏→已收藏》。参考第一篇文章的一部分功能；照搬第二、三、四篇文章的功能就完工啦！

预览图

点击“规格”后：

点击“比卡丘”“黄色”，点3下“+”后：

再次点击“比卡丘”，点3下“-”后：

预览地址：https://5j0xci.axshare.com

所需元件

这里不对元件进行详细描述，就放一张展示全体元件的图片以及(展示图片)动态面板的三个面板下的内容。

全体元件图：

(展示图片)动态面板下的“通用”面板：

(展示图片)动态面板下的“哆啦A梦”面板：

(展示图片)动态面板下的“比卡丘”面板：

操作步骤

(1)参照《 Axure教程：实现商品分享功能》中操作步骤的(1)和(2)去实现点击“选择规格”矩形后显示“选择规格”面板功能。

(2)在“选择规格”动态面板下摆放好元件的位置。

(3)参照《Axure教程：数量加减的实现》实现购买数量的加减功能。

(4)参照《Axure教程：规格的实现》、《Axure教程：使用动态面板实现收藏→已收藏》分别实现规格选择时的提示信息的改变，展示图片的改变。

(5)完工，按F5预览原型操作看看。

小记

1.这篇文章是拆分成了前面几篇文章后，再将它们组合起来后完成。之所以有这种想法是因为我在完成文章《Axure教程：实现商品分享功能》时，我将所有的功能集中在了一篇文章里讲解，这样导致的结果就是篇幅过长(也是我写过最长的一篇文章)，让很多人望而却步，就连我自己写完后也没有去看它多几眼。所以这篇文章在写之前我先将它拆分成几个文章来写，这样子更加清晰易懂些。

2.在制作这个原型案例的时候我也不是先将整个都制作出来了再去将它拆开成几个原型来讲解而是跟文章顺序一样先完成加减功能再完成规格选择功能最后再集合起来完成，就跟建楼一样。所以在制作一个大的原型的大体思路是：确定总体框架->细分框架->实现每一个小原型->拼装小原型->产出大原型。

本文由 @Nilz 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议

规格选择_Axure教程：实现商品规格选择功能相关推荐

商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果
<!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8&q ...
商品规格表的制作 mysql_商品规格设计
商品多规格最近面试的时候遇到一个问题,大概意思是说商城一件衣服,颜色有蓝.白.黑,尺码有 S.M.L 码,不同的颜色和尺码搭配的价格和库存是不一样的,这种关系如何设计数据库呢? 示例图之前也没用遇 ...
购物商城，规格选择，无货的规格置灰计算方法
测试java文件链接购物类商城,选择规格的时候,有些规格因为没货,需要置灰,下面是我使用的计算方法,供大家参考. 原理:每一组的可选规格,由其他组的选中规格决定,意思就是,第一组的可选规格,由其他第 ...
有赞vant_vue+有赞vant的商品规格sku记录-小程序
vant-vue关于sku规格是说明,并不详情,从手册复制无法使用.git下载安装vant后的sku示例却很详情. 我剔除了高级用法,以下是基础用法示例: sku.vue文件 <template ...
【javaWeb微服务架构项目——乐优商城day05】——商品规格参数管理(增、删、改,查已完成)，SPU和SKU数据结构，商品查询
乐优商城day05 0.学习目标 1.商品规格数据结构 1.1.SPU和SKU 1.2.数据库设计分析 1.2.1.思考并发现问题 1.2.2.分析规格参数 1.2.3.SKU的特有属性 1.2.4. ...
Niushop 商品规格设置
商品规格一.添加规格:添加商品的规格便于在前台购买.具体操作如下: 1.规格值的展示方式可以为颜色.文字.图片. 2.添加规格名称,规格排序,是否启用:点击启用在前台会显示规格值的选项,点击筛选就会 ...
乐优商城学习笔记五-商品规格管理
0.学习目标了解商品规格数据结构设计思路实现商品规格查询了解SPU和SKU数据结构设计思路实现商品查询了解商品新增的页面实现独立编写商品新增后台功能 1.商品规格数据结构乐优商城是一个全 ...
后台管理系统之商品规格管理
SKU的特有属性是商品规格参数的一部分 1.商品规格数据结构规格组规格参数商品规格参数管理规格组的查询规格参数查询 3.SPU和SKU数据结构 3.1.SPU表 3.2.SKU表 3.3.导 ...
商品规格的数据库设计——商城（六）
商品规格商品规格包括规格组合.规格项,规格项为规格组的成员规格组|-规格项:规格值|-规格项:规格值同一类商品的规格项相同. 不同商品的规格值是不同的方案一使用多个表存储商品规格.在已有的商 ...

规格选择_Axure教程：实现商品规格选择功能

预览图

所需元件

操作步骤

小记

规格选择_Axure教程：实现商品规格选择功能相关推荐

最新文章

热门文章