1. 首页
  2. shopify运营
  3. shopify详情页,shopify店铺参考

shopify详情页,shopify店铺参考

本站部分内容来自网络,内容仅供参考,专业问题请咨询DTCStart顾问,我们可为您提供免费的在线咨询服务。

shopify详情页,shopify店铺参考

网上有很多关于shopify详情页,shopify店铺参考的知识,也有很多人为大家解答关于shopify详情的问题,今天为大家整理了关于这方面的知识,让我们一起来看下吧!

本文目录一览:

1、shopify详情

shopify详情

在重建电子商务系统的过程中,作者发现存在一些问题,导致各背景系统的用户体验不统一,与行业内优秀的电子商务系统存在较大差距。所以我决定使用Ant Design Vue框架再次优化了现有系统。本文讲述了详细页面的设计规范。让我们看看。

2016年,我进入一家中型跨境电子商务公司,开始负责整个电子商务系统的系统重建产品,将原来的开源电子商务系统架构重建成粒度小、松散耦合的分布式微服务系统架构,因为原来的系统架构远远不能满足公司的性能、效率和经验增长速度。

整体系统结构包括类别系统、商品系统、库存系统、促销系统、订单系统、售后系统、会员系统、财务系统、CMS系统、CPS系统等。

2019年,全部重建完成。整个过程就像换一辆高速汽车的轮胎。

重构过程中存在一些遗留问题:

更注重业务、架构、流程、功能、逻辑,更注重视觉、互动、体验。前端开发资源在重构中投入较少,所有后台系统都直接通过后端开发渲染页面。后台系统太多,不同产品经理的工作习惯、互动能力和审美水平不同,后台系统的用户体验也不统一。虽然所有后台系统都使用Bootstrap的前端框架,但Bootstrap组件被广泛使用,导致不同的产品经理在实践中存在差异。虽然我对所有模块的重构产品方案进行了评审,但我更注重流程、功能和逻辑,没有对视觉和交互制定统一的规范。

以上四点导致各后台系统用户体验不统一,与行业内优秀的电商系统(如shopify)、有赞)差距较大。

基于此,在调查了大量前端框架后,我们决定使用Ant Design Vue框架再次优化了现有系统,因此有了这个设计规范。

前文“

背景产品设计规范-Ant Design实践到落地

“布局”已经说明了“布局”、“适配”、“间距”、“常用组件”、“文案”等基本规范,详情请查看前文并下载源文件。

前文

背景产品设计规范-Ant Design实践落地-表单篇

已说明“表单分区”、“表单设计原则”、“Ant Design Vue表单常用组件使用说明”、“表单实践案例”。

本文专门介绍了详细页面的设计规范。

一、详细页面分区

详细页面分区是一套基于布局、适配、间距规范的详细页面分区规则,经过对原有背景详细页面的大量分析。

如下图所示:

1.详情页面分区讲解

(1)表格布局:画布1440px,导航区200px,细节区两侧间距24px,细节区1192px。

(2)详细信息页面分为四种类型:一般栏、两栏、三栏和四栏。为保持结构化格式,防止各种详细信息页面样式交错造成的设计原则与视觉不一致,本协议

“一个信息分组只能选择一种样式,尽量避免一个信息分组中出现两种详细页面样式”。

尽量避免两栏风格、三栏风格、四栏风格同时出现在单个细节页面上

,也就是说,在单个详细信息页面中,可以结合通栏风格+两栏风格、通栏风格+三栏风格、通栏风格+四栏风格,但避免通栏风格+三栏风格+四栏风格。例如,当三栏风格和四栏风格同时出现在同一风格中时,会出现多个信息组对齐线不一致的问题。风格似乎混乱,不利于提高浏览效率。

(4)对后台字段长度进行大量分析后,推荐详细页面样式的使用频率如下:

2.通栏规范&通栏样例

3.两栏规范&两栏样例

4.三栏规范&三栏样例

5.四栏规范&四栏样例

第二,详细页面设计原则1。需要详细页面吗?

事实上,在许多情况下,没有必要规划和开发详细信息页面,编辑表单也可以满足业务需求。那么,哪些场景不需要详细信息页面呢?

总结原则如下:

如果页面只需要编辑功能,不需要查看编辑操作日志,可以直接用编辑页面代替,不需要详细页面,节省开发成本。

如果页面需要承载更多的功能,则需要设计详细信息页面,并将其归纳为按钮组。如果页面需要显示操作日志,则还需要设计详细信息页面来显示操作日志。

2.按钮组

将详细信息页面的按钮操作固定在页面右上角。按钮组分为常规操作和主操作,如下图所示:

如果需要特别突出的功能,可以使用主操作按钮;如果没有突出的功能,按钮组不能使用主操作按钮。传统操作的排名需要按照操作的优先级进行排序。

3.Tab分区

当页面很长,浏览时间很长时,可以使用Tab分区功能。切换Tab可以快速切换到页面设置的锚点,提高浏览效率。

4.信息分组

表中还提到了信息分组的原则。详细信息页面信息分组的分类需要与表单一致。表单中不能出现A字段属于“信息分组1”,详细信息页面属于“信息分组2”。

5.字段顺序

尽量保持查询栏、列表页、详情页的字段顺序一致,避免字段过多时找不到相应的字段信息。

6.数据脱敏

7.折叠

表格的设计原则中提到,当相同的信息组内容非常多时,可以根据使用频率折叠低频内容,以提高高频内容的操作效率。详细信息页面也是如此,您也可以根据需要使用此功能。

8.复制

“复制”功能可以添加到高频复制字段的右侧,方便用户操作。如订单号、快递单号等。

9.操作日志

操作日志按列表固定显示“操作类型”、“操作内容”、“操作人”、“操作时间”需要在PRD中详细说明不同操作对应的“操作类型”和“操作内容”。如下图所示:

三、实践案例1.商品细节

2.优惠券细节

3.订单详情

4.欢迎语详情

四、结语

以上是详细信息页面的产品设计规范。在这种情况下,只列出了最复杂的高级详细信息页面。简单的详细信息页面没有做更多的解释。您可以利用自己的理解,结合公司的实际情况,制定自己团队的设计规范。

Ant Design的使用规范,从第一篇的通用规范,到第二篇的表单规范,再到这篇文章的详细页面规范,基本介绍了核心内容。

最重要的是:遵循规范,但不能局限于规范,根据自己的业务场景灵活理解规范,提高用户体验,提高使用效率。

下一系列主题是“电背景产品设计指南”,我将从基本分类、运营分类、商品、库存、营销、推广、装饰、用户、订单、售后、物流、财务、数据、权限等模块逐一讲述产品设计理念、功能点和详细的产品设计方案、核心功能逻辑。

作者:城雨尘,微信官方账号:城雨尘(ID:bymono)

本文由 @城雨尘 每个人都是产品经理。未经许可,禁止转载

基于CC0协议,题图来自Unsplash

DTC Start(www.dtcstart.com)为外贸企业从0到1做跨境电商独立站的建站、运营和推广,并提供亚马逊AWS和阿里云全球云服务。独立站的引流方式多种多样,我们擅长TikTok推广引流,谷歌SEO优化及线上广告投放等,让独立站最大化获得精准流量,并通过专业的独立站运营提高转化率,从而获得更多询盘和订单。

以上就是关于shopify详情页,shopify店铺参考的知识,后面我们会继续为大家整理关于shopify详情的知识,希望能够帮助到大家!

本文链接地址:https://dtcstart.com/84404/