产品的规格属性怎样显示更好?小程序中产品详情页的布局思考
时间:2024-09-12 来源:朝夕友人 点击:
2021年6月3日,OneAdmin信息管理模块中,增加了一产品规格属性的功能。但在小程序端的视觉效果还比较粗糙,所以今天再优化了一下。
业务需求:
微信小程序端优化——需要将已经输入价格的产品,显示出标价、促销价;需要将有规格属性的产品,显示出规格属性。
关键因素:
1、有价格的显示,没有价格的不呈现;
2、有规格属性的显示,没有规格属性的不呈现;
3、有多少个规格属性,显示多少个规格属性;
4、视觉效果如何才能更加美观;
解决思路:
对数据中的价格字段进行是否存在判断,即可界定该产品是否填有价格。
对数据中的规格属性字段进行是否存在判断,即可界定该产品是否填有规格属性。并且,使用数组遍历的方式,就可以完美地实现规格属性的输出显示。
利用行的删格布局概念,将每行文字左右对齐。
操作步骤:
第一步:
给产品详情页增加一个“价格”区域,并在相应的地方填充好基本内容。
第二步:
对是否有促销价(成交价)进行判断,有则输出。
第三步:
创建一个选项卡,并设定好初始值——“产品详情”和“规格参数”。
第四步:
创建一个tabselect的方法。
并对选项卡的键值index值进行判断。当用户点击选项卡后,会改变选项卡的键值——当键值为0时,显示详情,当键值为1时显示规格属性。
第五步:
对是否存在“规格参数”进行判断,有则显示,无则只显示产品详情。
第六步:
修复后台bug。
新增调整规格参数顺序的控件;
新增一键清空规格参数;
总结回顾:
视觉上多使用常规的、适应性广的布局方式,并结合部分交互,让用户可以更容易了解和操作。
对显示内容的界定十分关键,可以让软件在更自动化的同时更人性化。
本次优化仅是阶段性的工作。未来,有可能对产品详情进行更加深入的优化。
例如:
增加“有价格的产品直接下单购买”的功能;
与万能表单结合,增加在下单购买前,进行个人信息收集的功能;
增加“购物车”的功能;