CN111144971A - 左侧展开式筛选的弹框形式的商品选择器交互设计 - Google Patents

左侧展开式筛选的弹框形式的商品选择器交互设计 Download PDF

Info

Publication number
CN111144971A
CN111144971A CN201911190957.6A CN201911190957A CN111144971A CN 111144971 A CN111144971 A CN 111144971A CN 201911190957 A CN201911190957 A CN 201911190957A CN 111144971 A CN111144971 A CN 111144971A
Authority
CN
China
Prior art keywords
commodity
screening
selector
list
button
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201911190957.6A
Other languages
English (en)
Inventor
刘佳林
仇文彬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Baozun eCommerce Ltd
Original Assignee
Shanghai Baozun eCommerce Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Baozun eCommerce Ltd filed Critical Shanghai Baozun eCommerce Ltd
Priority to CN201911190957.6A priority Critical patent/CN111144971A/zh
Publication of CN111144971A publication Critical patent/CN111144971A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G06Q30/0601—Electronic shopping [e-shopping]
    • G06Q30/0641—Shopping interfaces

Landscapes

  • Business, Economics & Management (AREA)
  • Accounting & Taxation (AREA)
  • Finance (AREA)
  • Development Economics (AREA)
  • Economics (AREA)
  • Marketing (AREA)
  • Strategic Management (AREA)
  • Physics & Mathematics (AREA)
  • General Business, Economics & Management (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)

Abstract

本发明涉及一种左侧展开式筛选的弹框形式的商品选择器交互设计，包含商品列表、筛选表单、状态变量控制模块；商品列表包括商品图、商品编码、商品名称、类型、吊牌价、销售价、销量、状态、上架时间、创建时间；筛选表单包括商品编码、商品名称、商品副标题、商品分类、商品标签、销售价、上架时间；状态变量控制模块包括收起和展开两个隐含模块。其优点表现在：将筛选项放置在商品列表的左侧，且可展开收起，既便于用户筛选信息，也便于用户浏览商品信息。

Description

左侧展开式筛选的弹框形式的商品选择器交互设计
技术领域
本发明涉及互联网技术领域，具体地说，是一种左侧展开式筛选的弹框形式的商品选择器交互设计。
背景技术
在日常的电商运营工作中，商品选择器作为一个必要组件，展示每家商户在自家商品池内的所有商品，同时将这些商品各维度的信息给到用户作为识别和筛选的依据，并提供这些维度的筛选条件给到用户，帮助他们快速找到需要添加的商品。
通常情况下，商品选择器会和一个用来存放已选商品的列表配合使用，从商品选择器中选中的商品会被添加进这个列表中(如果用户想删除某个错选或不需要的商品，通常能在这个已选列表中直接删除)。
商品选择器的界面交互形式一般分为两个流派：
弹框形式：一个流派是将选择器包含在弹框内，通过“添加(选择)”按钮打开这个弹框，当选择完毕不需要选择器时，可通过“关闭”按钮关闭这个弹框。每当用户打开一次弹框，浏览器就会向服务器请求一次最新的商品列表；
穿梭框形式：另一个流派是将选择器和已选列表合二为一，组合成一对穿梭框。待选列表内的商品随表单页一同加载到界面中，不会重复请求最新的商品列表；
本发明使用弹框形式的商品选择器，相比穿梭框形式的商品选择器，可在待选的商品列表中显示更多维度的信息。由于在企业级电商后台，通常需要维护几千甚至上万个商品，并且每个商品都会拥有多个维度的描述信息。使用后台的运营工作人员可能会在商品列表页、促销活动页、商品推荐栏等各处地方去设置这些页面中该显示哪些商品。因此选用更适合企业级电商后台的弹框形式的商品选择器。
商品选择器必备的元素有：商品列表和筛选表单。考虑到不少用户使用笔记本办公，且笔记本的屏幕尺寸相比台式机的显示器要小很多，因此屏幕的纵向和横向空间都比较珍贵。由于企业级电商后台会在商品列表中，尽可能多的展示商品各个维度的信息，同时也会给到同等数量的筛选项。考虑到筛选项的数量较多，因此将筛选项放置在商品列表的左侧，且可展开收起，既便于用户筛选信息，也便于用户浏览商品信息。
中国专利文献：CN110389808A，公开日：2019.10.29，公开了一种应用于快速浏览对象的全展开式日期选择器，所述的日期选择器包括月份模式和年份模式；默认为当前浏览对象相对应的所在日期，该默认模式为月份模式；鼠标点击或悬停任意月份，则展开该月所有日期；鼠标离开月份，则日期选择器还原至月份模式；点击年份日期选择器切换至年份模式；鼠标点击快速定位锚点，日期选择器切换着月份模式还原默认状态，定位至当前查看对象所在日期。
中国专利文献：CN103034731B，公开日：2016.12.28，公开了一种生成Web前端交互页面的方法，包括：采用前端AJAX技术选择页面框架，并存入Cookie模块；构建标准化界面组件，将其排列界面设计器上方，并选择相应组件布置到界面设计器下方的界面设计区；对选中的组件进行参数配置，得到需要的交互组件；采用CSS技术为页面框架和交互组件设计若干皮肤文件；从Cookie模块中获取页面框架，并采用JavaScript技术获取交互组件源代码和当前皮肤文件；将页面框架、交互组件源代码和当前皮肤文件上传送至服务器端，生成Web前端交互页面。
但是关于本发明的一种左侧展开式筛选的弹框形式的商品选择器交互设计目前还未见报道。
发明内容
本发明的目的是，提供一种左侧展开式筛选的弹框形式的商品选择器交互设计。
为实现上述目的，本发明采取的技术方案是：
一种左侧展开式筛选的弹框形式的商品选择器交互设计，所述的左侧展开式筛选的弹框形式的商品选择器交互设计包含商品列表(1)、筛选表单(2)、状态变量控制模块(3)；所述的商品列表(1)包括商品图(10)、商品编码(11)、商品名称(12)、类型(13)、吊牌价(14)、销售价(15)、销量(16)、状态(17)、上架时间(18)、创建时间(19)；所述的筛选表单(2)包括商品编码(21)、商品名称(22)、商品副标题(23)、商品分类(24)、商品标签(25)、销售价(26)、上架时间(27)；所述的状态变量控制模块(3)包括收起(31)和展开(32)两个隐含模块。
作为一种优选地技术方案，所述的左侧展开式筛选的弹框形式的商品选择器交互设计使用弹框形式的商品选择器。
作为一种优选地技术方案，所述的状态变量控制模块(3)用于控制筛选表单(2)显示和隐藏。
作为一种优选地技术方案，所述的商品列表(1)还包括取消按钮(4)和确定按钮(5)。
作为一种优选地技术方案，所述的筛选表单(2)还包括重置按钮(6)和筛选按钮(7)。
本发明优点在于：
1、本发明使用弹框形式的商品选择器，相比穿梭框形式的商品选择器，可在待选的商品列表中显示更多维度的信息。由于在企业级电商后台，通常需要维护几千甚至上万个商品，并且每个商品都会拥有多个维度的描述信息。使用后台的运营工作人员可能会在商品列表页、促销活动页、商品推荐栏等各处地方去设置这些页面中该显示哪些商品。因此选用更适合企业级电商后台的弹框形式的商品选择器。
2、商品列表和筛选表单。考虑到不少用户使用笔记本办公，且笔记本的屏幕尺寸相比台式机的显示器要小很多，因此屏幕的纵向和横向空间都比较珍贵。由于企业级电商后台会在商品列表中，尽可能多的展示商品各个维度的信息，同时也会给到同等数量的筛选项。考虑到筛选项的数量较多，因此将筛选项放置在商品列表的左侧，且可展开收起，既便于用户筛选信息，也便于用户浏览商品信息。
附图说明
附图1是一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图一。
附图2是一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图二。
附图3是一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图三。
附图4是一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图四。
附图5是一种左侧展开式筛选的弹框形式的商品选择器交互设计的使用流程图。
具体实施方式
下面结合实施例并参照附图对本发明作进一步描述。
附图中涉及的附图标记和组成部分如下所示：
1、商品列表
10、商品图
11、商品编码
12、商品名称
13、类型
14、吊牌价
15、销售价
16、销量
17、状态
18、上架时间
19、创建时间
2、筛选表单
21商品编码
22、商品名称
23、商品副标题
24、商品分类
25、商品标签
26、销售价
27、上架时间
3、状态变量控制模块
31、收起
32、展开
4、取消按钮
5、确定按钮
6、重置按钮
7、筛选按钮
实施例1
请参照附图1，附图1是本实施例的一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图一。所述的左侧展开式筛选的弹框形式的商品选择器交互设计包含商品列表(1)、筛选表单(2)、状态变量控制模块(3)；
请参照附图3，附图3是本实施例的一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图三。所述的商品列表(1)包括商品图(10)、商品编码(11)、商品名称(12)、类型(13)、吊牌价(14)、销售价(15)、销量(16)、状态(17)、上架时间(18)、创建时间(19)；
请参照附图1，附图1是本实施例的一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图一。所述的筛选表单(2)包括商品编码(21)、商品名称(22)、商品副标题(23)、商品分类(24)、商品标签(25)、销售价(26)、上架时间(27)；
请参照附图2、附图4，附图2是本实施例的一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图二，附图4是本实施例的一种左侧展开式筛选的弹框形式的商品选择器交互设计的平面示意图四。所述的状态变量控制模块(3)包括收起(31)和展开(32)两个隐含模块。
需要说明的是：
所述的左侧展开式筛选的弹框形式的商品选择器交互设计使用弹框形式的商品选择器；所述的状态变量控制模块(3)用于控制筛选表单(2)显示和隐藏；所述的商品列表(1)还包括取消按钮(4)和确定按钮(5)；所述的筛选表单(2)还包括重置按钮(6)和筛选按钮(7)。
实施例2
本发明的一种左侧展开式筛选的弹框形式的商品选择器交互设计过程：
【步骤1】分析需求，制定初步技术解决方案。
【步骤2】前端框架选型，目前定为VUE。
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快，Vue可以让你在每个单文件组件中完全访问CSS，方便的规定css作用域，也可引入css模块。
【步骤3】考虑技术难点，寻找参考。
【步骤4】正式开发。
【步骤5】核心功能测试。
【步骤6】全面测试/内测。
实施例3
请参照附图5，附图5是本实施例的一种左侧展开式筛选的弹框形式的商品选择器交互设计的使用流程图。
所述左侧展开式筛选的弹框形式的商品选择器交互设计的使用过程：
①首先，打开选择器，左侧筛选表单(2)默认展开。
需要说明的是：
左侧筛选栏包含一个控制筛选器显示和隐藏的状态变量。点击“展开”按钮时切换这个变量为展开状态，并控制左侧筛选栏展开，此时“展开”按钮变为“收起”按钮；点击“收起”按钮时切换这个变量为收起状态，并控制左侧筛选栏收起，此时“收起”按钮变为“展开”按钮。
②用户打开商品选择器的弹框，可根据商品列表项，在左侧筛选区输入对应字段，快捷筛选。
③筛选后的信息加载完毕后，“收起”按钮时，显示文字提示，告知用户点击该按钮能收起左侧筛选栏用，在商品列表内识别目标商品。
④左侧筛选栏收起后，背景色变为浅灰，按钮图标改为展开。
⑤左侧筛选栏收起后，“展开”按钮时，显示文字提示，告知用户点击该按钮能展开左侧筛选栏。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员，在不脱离本发明原理的前提下，还可以做出若干改进和补充，这些改进和补充也应视为本发明的保护范围。

Claims (5)

1.一种左侧展开式筛选的弹框形式的商品选择器交互设计，其特征在于，所述的左侧展开式筛选的弹框形式的商品选择器交互设计包含商品列表(1)、筛选表单(2)、状态变量控制模块(3)；所述的商品列表(1)包括商品图(10)、商品编码(11)、商品名称(12)、类型(13)、吊牌价(14)、销售价(15)、销量(16)、状态(17)、上架时间(18)、创建时间(19)；所述的筛选表单(2)包括商品编码(21)、商品名称(22)、商品副标题(23)、商品分类(24)、商品标签(25)、销售价(26)、上架时间(27)；所述的状态变量控制模块(3)包括收起(31)和展开(32)两个隐含模块。
2.根据权利要求1所述的左侧展开式筛选的弹框形式的商品选择器交互设计，其特征在于，所述的左侧展开式筛选的弹框形式的商品选择器交互设计使用弹框形式的商品选择器。
3.根据权利要求1所述的左侧展开式筛选的弹框形式的商品选择器交互设计，其特征在于，所述的状态变量控制模块(3)用于控制筛选表单(2)显示和隐藏。
4.根据权利要求1所述的左侧展开式筛选的弹框形式的商品选择器交互设计，其特征在于，所述的商品列表(1)还包括取消按钮(4)和确定按钮(5)。
5.根据权利要求1所述的左侧展开式筛选的弹框形式的商品选择器交互设计，其特征在于，所述的筛选表单(2)还包括重置按钮(6)和筛选按钮(7)。
CN201911190957.6A 2019-11-28 2019-11-28 左侧展开式筛选的弹框形式的商品选择器交互设计 Pending CN111144971A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911190957.6A CN111144971A (zh) 2019-11-28 2019-11-28 左侧展开式筛选的弹框形式的商品选择器交互设计

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911190957.6A CN111144971A (zh) 2019-11-28 2019-11-28 左侧展开式筛选的弹框形式的商品选择器交互设计

Publications (1)

Publication Number Publication Date
CN111144971A true CN111144971A (zh) 2020-05-12

Family

ID=70517298

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911190957.6A Pending CN111144971A (zh) 2019-11-28 2019-11-28 左侧展开式筛选的弹框形式的商品选择器交互设计

Country Status (1)

Country Link
CN (1) CN111144971A (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102591972A (zh) * 2011-12-31 2012-07-18 北京百度网讯科技有限公司 提供商品搜索结果的方法及设备
JP2012243126A (ja) * 2011-05-20 2012-12-10 Yasuhiko Mizoguchi 商品情報検索システム、商品情報検索方法及び商品情報検索プログラム
JP2016139196A (ja) * 2015-01-26 2016-08-04 東色ピグメント株式会社 商品の組み合わせを検索する装置、方法及びコンピュータプログラム
CN106991191A (zh) * 2017-04-11 2017-07-28 泰康保险集团股份有限公司 商品筛选方法及装置、存储介质、电子设备
CN107103519A (zh) * 2017-05-02 2017-08-29 深圳市水觅网络发展有限公司 一种可购买商品多种消费模式的网络购物系统
CN109961345A (zh) * 2017-12-22 2019-07-02 财团法人工业技术研究院 交互式商品推荐方法以及非瞬时计算机可读介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2012243126A (ja) * 2011-05-20 2012-12-10 Yasuhiko Mizoguchi 商品情報検索システム、商品情報検索方法及び商品情報検索プログラム
CN102591972A (zh) * 2011-12-31 2012-07-18 北京百度网讯科技有限公司 提供商品搜索结果的方法及设备
JP2016139196A (ja) * 2015-01-26 2016-08-04 東色ピグメント株式会社 商品の組み合わせを検索する装置、方法及びコンピュータプログラム
CN106991191A (zh) * 2017-04-11 2017-07-28 泰康保险集团股份有限公司 商品筛选方法及装置、存储介质、电子设备
CN107103519A (zh) * 2017-05-02 2017-08-29 深圳市水觅网络发展有限公司 一种可购买商品多种消费模式的网络购物系统
CN109961345A (zh) * 2017-12-22 2019-07-02 财团法人工业技术研究院 交互式商品推荐方法以及非瞬时计算机可读介质

Similar Documents

Publication Publication Date Title
CN1790243B (zh) 用于显示可选择软件功能控件的命令用户界面系统
KR100889906B1 (ko) 전자화 서비스 매뉴얼 생성 방법, 부가 데이터 생성 방법, 전자화 서비스 매뉴얼 생성 장치, 부가 데이터 생성 장치, 전자화 서비스 매뉴얼 생성용 프로그램 및 부가 데이터 생성용 프로그램이 기록된 기록 매체
KR101733943B1 (ko) 계층적-체계화된 컨트롤 갤러리 제공 기법
Dontcheva et al. Summarizing personal web browsing sessions
US11360746B2 (en) Method for constructing an interactive digital catalog, and computer-readable storage medium and interactive digital catalog using the same
US9069826B2 (en) Information provision system, information provision system control method, information provision device, program, and information recording medium
US20110179004A1 (en) Method and system for an internet browser add-on providng simultaneous multiple interactive websites
US20130262968A1 (en) Apparatus and method for efficiently reviewing patent documents
TWI539361B (zh) Method and system for browsing books on a terminal computer
US10176506B2 (en) Product search system and product search program
US20030227481A1 (en) Creating user interfaces using generic tasks
CN105653571A (zh) 书签存储及书签操作指令的响应方法、浏览器
CN112241263A (zh) 可视化的页面处理方法和设备
Hearst et al. Sewing the seams of sensemaking: A practical interface for tagging and organizing saved search results
CN104199648B (zh) 一种通用移动信息系统适配方法与装置
CN110969501A (zh) 网络购物车页面的显示方法、系统、设备和存储介质
US8341176B1 (en) Structure-based expansion of user element selection
CN108733367A (zh) 页面生成方法及页面生成装置
CN111144971A (zh) 左侧展开式筛选的弹框形式的商品选择器交互设计
WO2016091211A1 (en) Method for constructing interactive digital catalog, and computer-readable storage medium and interactive digital catalog using the same
CN103246662A (zh) 网络页面中区域数据内容的处理方法和装置
EP0679999B1 (en) A method and apparatus for storage and retrieval of data
CN109542441A (zh) 一种商品页面定制方法、装置及设备
US11687325B2 (en) Method for constructing an interactive digital catalog, and computer-readable storage medium and interactive digital catalog using the same
CN103106078A (zh) 一种软件设计的新型界面布局

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200512