CN111459387A - 一种框选拖拽式图片分类的交互方法 - Google Patents

一种框选拖拽式图片分类的交互方法 Download PDF

Info

Publication number
CN111459387A
CN111459387A CN202010276168.0A CN202010276168A CN111459387A CN 111459387 A CN111459387 A CN 111459387A CN 202010276168 A CN202010276168 A CN 202010276168A CN 111459387 A CN111459387 A CN 111459387A
Authority
CN
China
Prior art keywords
classification
picture
mouse
frame
category
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
CN202010276168.0A
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 Zunyi Business Information Consulting Co ltd
Original Assignee
Shanghai Zunyi Business Information Consulting Co 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 Zunyi Business Information Consulting Co ltd filed Critical Shanghai Zunyi Business Information Consulting Co ltd
Priority to CN202010276168.0A priority Critical patent/CN111459387A/zh
Publication of CN111459387A publication Critical patent/CN111459387A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明涉及一种框选拖拽式图片分类的交互方法，由运行在计算机上的计算机程序实现，用于企业级电商图片分类，上述计算机程序包括图片分类界面程序模块；上述图片分类界面包括图片区和分类栏，上述分类栏包括若干类别条目；上述交互方法包括以下步骤：S1、用鼠标框选住图片区需要分类的图片；S2、鼠标长按需要分类的图片从图片区拖拽至分类栏；S3、鼠标停留的类别条目高亮显示；S4、图片缩小至类别条目可见区域；S5、松开鼠标完成图片分类。有益效果是更加精准、高效地完成图片分类工作。

Description

一种框选拖拽式图片分类的交互方法
【技术领域】
本发明涉及互联网技术领域，具体涉及一种框选拖拽式图片分类的交互方法。
【背景技术】
随着互联网技术的高速发展，网络图片的数量正经历着爆炸式地增长。海量的图片为用户方便地获取信息提供了基础，同时也为获得可用的、用户期望的图片带来了巨大挑战。图片分类技术是一种高效地将图片进行归类的技术，该方法通过用户提交给分类信息的动作，将文档库中未被分类的图片快速、准确地进行分类。一种有效的图片分类策略是将分类过程看作一个学习过程，利用用户提交的动作作为学习所需的样本，使用机器学习技术学习得到一个预测模型，从而实现对图片的分类。
现有技术下，用户需要通过选中一批图片，点击移动按钮，选择路径进行分类管理。
【发明内容】
本发明的目的是，提供一种帮助企业级电商商品专员更加精准、高效地完成图片分类工作的交互方法。
为实现上述目的，本发明采取的技术方案是一种框选拖拽式图片分类的交互方法，由运行在计算机上的计算机程序实现，用于企业级电商图片分类，上述计算机程序包括图片分类界面程序模块；上述图片分类界面包括图片区和分类栏，上述分类栏包括若干类别条目；上述交互方法包括以下步骤：
S1、用鼠标框选住图片区需要分类的图片；
S2、鼠标长按需要分类的图片从图片区拖拽至分类栏；
S3、鼠标停留的类别条目高亮显示；
S4、图片缩小至类别条目可见区域；
S5、松开鼠标完成图片分类。
优选地，上述图片分类界面左侧为分类栏、右侧为图片区，上述步骤S1框选住的图片形成蓝色边框。
优选地，上述步骤S3移动鼠标，则新的鼠标停留位置的类别条目高亮显示，且只有一个类别条目高亮显示。
优选地，上述步骤S4图片拖拽至分类栏缩小形成缩略图，上述缩略图列在类别条目旁边可见区域。
优选地，上述步骤S5完成图片分类后所述类别条目标明该类别条目包括的图片数量。
优选地，上述图片分类界面程序模块使用Vue实现。
本发明有如下有益效果：针对目前的图片分类技术，提出一种能够有效地处理多图片的分类方法，该方法通过鼠标框选图片进行选中，进而拖拽至相应的文档中，从而提高图片分类的效率。
【附图说明】
图1是一种框选拖拽式图片分类的交互方法步骤图。
图2是一种框选拖拽式图片分类的交互方法实施例2图片分类界面示意图。
图3是一种框选拖拽式图片分类的交互方法实施例3图片分类界面示意图。
【具体实施方式】
下面结合实施例并参照附图对本发明作进一步描述。
实施例1
本实施例实现一种框选拖拽式图片分类的交互方法。
图1是一种框选拖拽式图片分类的交互方法步骤图。如附图1所示，本实施例一种框选拖拽式图片分类的交互方法，由运行在计算机上的计算机程序实现，用于企业级电商图片分类，上述计算机程序包括图片分类界面程序模块；上述图片分类界面包括图片区和分类栏，上述分类栏包括若干类别条目；上述交互方法包括以下步骤：
S1、用鼠标框选住图片区需要分类的图片；
S2、鼠标长按需要分类的图片从图片区拖拽至分类栏；
S3、鼠标停留的类别条目高亮显示；
S4、图片缩小至类别条目可见区域；
S5、松开鼠标完成图片分类。
优选地，上述图片分类界面左侧为分类栏、右侧为图片区，上述步骤S1框选住的图片形成蓝色边框。
优选地，上述步骤S3移动鼠标，则新的鼠标停留位置的类别条目高亮显示，且只有一个类别条目高亮显示。
优选地，上述步骤S4图片拖拽至分类栏缩小形成缩略图，上述缩略图列在类别条目旁边可见区域。
优选地，上述步骤S5完成图片分类后所述类别条目标明该类别条目包括的图片数量。
优选地，上述图片分类界面程序模块使用Vue实现。
本实施例一种框选拖拽式图片分类的交互方法具体应用于企业级电商图片分类的软件研发设计过程如下：
【步骤1】分析需求，制定初步技术解决方案；
【步骤2】前端框架选型，目前定为Vue；
Vue是一套构建用户界面的渐进式框架。Vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快，Vue可以让你在每个单文件组件中完全访问CSS，方便的规定CSS作用域，也可引入CSS模块。
【步骤3】考虑技术难点(递归的实现、菜单完整路径记录)，寻找参考；
【步骤4】正式开发；
【步骤5】核心功能测试；
【步骤6】响应式的兼容；
【步骤7】全面测试/内测。
实施例2
本实施例实现一种框选拖拽式图片分类的交互方法。
本实施例商品专员不用手动选择路径进行分类管理，可通过当前文档下的图片直接进行拖拽分类。本实施例和实施例1除了以下图片分类界面不同外其他方法步骤功能相同。图2是一种框选拖拽式图片分类的交互方法实施例2图片分类界面示意图。如附图2所示，图片分类界面包括图片区和分类栏，分类栏包括若干类别条目；实施图片分类时：用鼠标框选住图片区需要分类的图片；鼠标长按需要分类的图片从图片区拖拽至分类栏；鼠标停留的类别条目高亮显示；图片缩小至类别条目可见区域；松开鼠标完成图片分类。图片分类界面左侧为分类栏、右侧为图片区，框选住的图片形成蓝色边框。移动鼠标，则新的鼠标停留位置的类别条目高亮显示，且只有一个类别条目高亮显示。图片拖拽至分类栏缩小形成缩略图，缩略图列在类别条目旁边可见区域。完成图片分类后所述类别条目标明该类别条目包括的图片数量。本实施例的图片分类界面进一步包括批量审核键和图片上传键，上述的方法步骤在批量审核键的界面实现，按下界面审核键后出现图片区和分类栏，上述分类栏包括若干类别条目，进而实施实施例1的步骤操作；按下图片上传键后，用户可以在本地计算机或者网络上选择图片，并上传到图片分类界面，方便进一步的操作。
实施例3
本实施例实现一种框选拖拽式图片分类的交互方法。
本实施例商品专员不用手动选择路径进行分类管理，可通过当前文档下的图片直接进行拖拽分类。本实施例和实施例2除了以下图片分类界面不同外其他方法步骤功能相同。图3是一种框选拖拽式图片分类的交互方法实施例2图片分类界面示意图。如附图3所示，图片分类界面包括图片区和分类栏，分类栏包括若干类别条目；实施图片分类时：用鼠标框选住图片区需要分类的图片；鼠标长按需要分类的图片从图片区拖拽至分类栏；鼠标停留的类别条目高亮显示；图片缩小至类别条目可见区域；松开鼠标完成图片分类。图片分类界面左侧为分类栏、右侧为图片区，框选住的图片形成蓝色边框。移动鼠标，则新的鼠标停留位置的类别条目高亮显示，且只有一个类别条目高亮显示。图片拖拽至分类栏缩小形成缩略图，缩略图列在类别条目旁边可见区域。完成图片分类后所述类别条目标明该类别条目包括的图片数量。本实施例的图片分类界面进一步包括类别设置键和调整排序键，上述的方法步骤在批量审核键的界面实现，按下界面审核键后出现图片区和分类栏，上述分类栏包括若干类别条目，进而实施实施例1的步骤操作；按下图片上传键后，用户可以在本地计算机或者网络上选择图片，并上传到图片分类界面，方便进一步的操作；按下类别设置键后可以新增、删除类别条目，可以改变类别条目的名称；按下调整排序键后，可以对图片区的图片进行调整排序，也可以对类别条目进行调整排序。
本领域普通技术人员可以理解，实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Acess Memory，RAM)等。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员，在不脱离本发明原理的前提下，还可以做出若干改进和补充，这些改进和补充也应视为本发明的保护范围。

Claims (6)

1.一种框选拖拽式图片分类的交互方法，由运行在计算机上的计算机程序实现，用于企业级电商图片分类，所述计算机程序包括图片分类界面程序模块；所述图片分类界面包括图片区和分类栏，所述分类栏包括若干类别条目；其特征在于所述交互方法包括以下步骤：
S1、用鼠标框选住图片区需要分类的图片；
S2、鼠标长按需要分类的图片从图片区拖拽至分类栏；
S3、鼠标停留的类别条目高亮显示；
S4、图片缩小至类别条目可见区域；
S5、松开鼠标完成图片分类。
2.根据权利要求1所述的一种框选拖拽式图片分类的交互方法，其特征在于：所述图片分类界面左侧为分类栏、右侧为图片区，所述步骤S1框选住的图片形成蓝色边框。
3.根据权利要求1所述的一种框选拖拽式图片分类的交互方法，其特征在于：所述步骤S3移动鼠标，则新的鼠标停留位置的类别条目高亮显示，且只有一个类别条目高亮显示。
4.根据权利要求2所述的一种框选拖拽式图片分类的交互方法，其特征在于：所述步骤S4图片拖拽至分类栏缩小形成缩略图，所述缩略图列在类别条目旁边可见区域。
5.根据权利要求3所述的一种框选拖拽式图片分类的交互方法，其特征在于：所述步骤S5完成图片分类后所述类别条目标明该类别条目包括的图片数量。
6.根据权利要求1所述的一种框选拖拽式图片分类的交互方法，其特征在于：所述图片分类界面程序模块使用Vue实现。
CN202010276168.0A 2020-04-09 2020-04-09 一种框选拖拽式图片分类的交互方法 Pending CN111459387A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010276168.0A CN111459387A (zh) 2020-04-09 2020-04-09 一种框选拖拽式图片分类的交互方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010276168.0A CN111459387A (zh) 2020-04-09 2020-04-09 一种框选拖拽式图片分类的交互方法

Publications (1)

Publication Number Publication Date
CN111459387A true CN111459387A (zh) 2020-07-28

Family

ID=71683678

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010276168.0A Pending CN111459387A (zh) 2020-04-09 2020-04-09 一种框选拖拽式图片分类的交互方法

Country Status (1)

Country Link
CN (1) CN111459387A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113419649A (zh) * 2021-05-31 2021-09-21 广州三星通信技术研究有限公司 用于操作电子装置的方法及其装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1517853A (zh) * 2003-01-06 2004-08-04 奥林巴斯株式会社 图像处理装置、图像处理程序、记录介质以及图像处理方法
CN104123080A (zh) * 2014-07-15 2014-10-29 东莞市微云系统科技有限公司 一种自动化拖拽文件的方法
CN105528159A (zh) * 2016-01-28 2016-04-27 深圳市创想天空科技股份有限公司 一种图片的操作方法和操作装置
EP3040912A1 (en) * 2014-12-30 2016-07-06 Xiaomi Inc. Method and device for classifying pictures
CN106407234A (zh) * 2015-08-03 2017-02-15 阿里巴巴集团控股有限公司 一种对页面中对象信息分类的方法和设备
CN107229395A (zh) * 2017-06-14 2017-10-03 深圳传音通讯有限公司 应用图标的整理方法和终端
WO2018062901A1 (ko) * 2016-09-29 2018-04-05 (주) 비미오 터치스크린 단말기에서 저장 사진의 앨범 지정 및 태깅 방법, 컴퓨터 판독 가능 기록매체 및 단말기

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1517853A (zh) * 2003-01-06 2004-08-04 奥林巴斯株式会社 图像处理装置、图像处理程序、记录介质以及图像处理方法
CN104123080A (zh) * 2014-07-15 2014-10-29 东莞市微云系统科技有限公司 一种自动化拖拽文件的方法
EP3040912A1 (en) * 2014-12-30 2016-07-06 Xiaomi Inc. Method and device for classifying pictures
CN106407234A (zh) * 2015-08-03 2017-02-15 阿里巴巴集团控股有限公司 一种对页面中对象信息分类的方法和设备
CN105528159A (zh) * 2016-01-28 2016-04-27 深圳市创想天空科技股份有限公司 一种图片的操作方法和操作装置
WO2018062901A1 (ko) * 2016-09-29 2018-04-05 (주) 비미오 터치스크린 단말기에서 저장 사진의 앨범 지정 및 태깅 방법, 컴퓨터 판독 가능 기록매체 및 단말기
CN107229395A (zh) * 2017-06-14 2017-10-03 深圳传音通讯有限公司 应用图标的整理方法和终端

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113419649A (zh) * 2021-05-31 2021-09-21 广州三星通信技术研究有限公司 用于操作电子装置的方法及其装置

Similar Documents

Publication Publication Date Title
US10838697B2 (en) Storing logical units of program code generated using a dynamic programming notebook user interface
US10140314B2 (en) Previews for contextual searches
CA2644111C (en) Method and system for displaying search results
US7633510B2 (en) Rollback in a browser
US8255819B2 (en) Web notebook tools
US7664830B2 (en) Method and system for utilizing embedded MPEG-7 content descriptions
US9171132B1 (en) Electronic note management system and user-interface
US10169374B2 (en) Image searches using image frame context
JP2010532059A (ja) 中央を固定されたリスト
CN101183380B (zh) 内容过滤方法及其装置
US9372843B2 (en) Document association device, document association method, and non-transitory computer readable medium
CN108509405A (zh) 一种演示文稿的生成方法、装置以及设备
KR20110017694A (ko) 온라인 문서 편집 시스템 및 그 방법
JP2002049907A (ja) デジタルアルバム作成装置およびデジタルアルバム作成方法
CN112040339A (zh) 一种视频数据的制作方法、装置、计算机设备和存储介质
US20100057770A1 (en) System and method of file management, and recording medium storing file management program
JP2012079313A (ja) イメージ検索方法及び検索システム
CN111459387A (zh) 一种框选拖拽式图片分类的交互方法
US20120150899A1 (en) System and method for selectively generating tabular data from semi-structured content
WO2007131233A2 (en) Browser image manipulation
CN109814857B (zh) 一种可定制图元联动的方法及装置
Wei et al. Assisted human-in-the-loop adaptation of Web pages for mobile devices
KR101499052B1 (ko) 디지털 기반의 지식 정보 카드를 이용한 카드북의 생성방법.
CN116226418B (zh) 一种网页版演示幻灯片ppt的实现方法
WO2012025040A1 (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

Application publication date: 20200728

RJ01 Rejection of invention patent application after publication