CN110020322A - 界面的图片显示方法及系统 - Google Patents

界面的图片显示方法及系统 Download PDF

Info

Publication number
CN110020322A
CN110020322A CN201810819031.8A CN201810819031A CN110020322A CN 110020322 A CN110020322 A CN 110020322A CN 201810819031 A CN201810819031 A CN 201810819031A CN 110020322 A CN110020322 A CN 110020322A
Authority
CN
China
Prior art keywords
picture
display area
picture display
interface
amplify
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
CN201810819031.8A
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.)
Ctrip Computer Technology Shanghai Co Ltd
Original Assignee
Ctrip Computer Technology Shanghai 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 Ctrip Computer Technology Shanghai Co Ltd filed Critical Ctrip Computer Technology Shanghai Co Ltd
Priority to CN201810819031.8A priority Critical patent/CN110020322A/zh
Publication of CN110020322A publication Critical patent/CN110020322A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明公开了一种界面的图片显示方法及系统。所述图片显示方法包括：在接收到触控操作指令时，放大所述图片显示区域；在所述图片显示区域中接收到切换指令时，切换所述图片显示区域显示的图片。本发明提供了用户快速进入图片浏览的交互方式，让用户更快捷的进入图片完整浏览模式或放大模式，减少了页面跳转，提升了用户浏览页面效率。

Description

界面的图片显示方法及系统
技术领域
本发明涉及电子产品技术领域，特别涉及一种界面的图片显示方法及系统。
背景技术
目前，在电子商务网站上，对象的介绍界面一般会设置两个区域，一个区域用于显示图片，一个区域用于显示对象的详细说明。现有技术中，用户无法在放大状态下连续浏览图片显示区域的图片，也即若当前浏览的图片处于放大状态，要想以同样的放大比例查看后面的图片，需先将当前图片恢复原来尺寸，再通过滑动显示下一张图片，然后将其放大，这无疑降低了图片浏览效率。
发明内容
本发明要解决的技术问题是为了克服现有技术中用户无法在放大状态下连续浏览界面中图片显示区域的图片的缺陷，提供一种界面的图片显示方法及系统。
本发明是通过下述技术方案来解决上述技术问题：
一种界面的图片显示方法，所述界面包括图片显示区域，所述图片显示方法包括：
在接收到触控操作指令时，放大所述图片显示区域；
在所述图片显示区域中接收到切换指令时，切换所述图片显示区域显示的图片。
较佳地，放大所述图片显示区域的同时，放大所述图片显示区域当前显示的第一图片。
较佳地，放大所述图片显示区域当前显示的第一图片的步骤，具体包括：
获取所述图片显示区域的放大比例；
按照所述放大比例放大所述第一图片。
较佳地，接收触控操作指令的步骤之前，所述图片显示方法还包括：
将裁切过的第二图片显示于所述图片显示区域。
较佳地，放大所述图片显示区域的同时，所述图片显示区域显示裁切前的第二图片。
一种界面的图片显示系统，所述界面包括图片显示区域，所述图片显示系统包括：
区域放大模块，用于在接收到触控操作指令时，放大所述图片显示区域；
切换模块，用于在所述图片显示区域中接收到切换指令时，切换所述图片显示区域显示的图片。
较佳地，所述区域放大模块还用于在放大所述图片显示区域的同时，放大所述图片显示区域当前显示的第一图片。
较佳地，所述区域放大模块具体包括：
比例获取单元，用于获取所述图片显示区域的放大比例；
放大单元，用于按照所述放大比例放大所述第一图片。
较佳地，所述图片显示系统还包括：
裁切模块，用于将裁切过的第二图片显示于放大前的图片显示区域。
较佳地，所述区域放大模块还用于在放大所述图片显示区域的同时，获取裁切前的第二图片并显示于所述图片显示区域中。
本发明的积极进步效果在于：本发明提供了用户快速进入图片浏览的交互方式，让用户更快捷的进入图片完整浏览模式或放大模式，减少了页面跳转，提升了用户浏览页面效率。
附图说明
图1为使用本发明实施例1的界面的图片显示方法之前的图片显示区域的示意图。
图2为使用本发明实施例1的界面的图片显示方法之后的图片显示区域的示意图。
图3为本发明实施例1的界面的图片显示方法的流程图。
图4为本发明实施例2的界面的图片显示方法的流程图。
图5为本发明实施例3的界面的图片显示系统的模块示意图。
图6为本发明实施例4的界面的图片显示系统的模块示意图。
具体实施方式
下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。
实施例1
本实施例提供一种界面的图片显示方法，如图1所示，界面包括图片显示区域10，该图片显示区域10的尺寸较小，相应显示尺寸较小的图片，用户可以通过在显示区域执行触控操作，实现显示于显示区域的图片的切换，还可通过触控操作，放大该图片显示区域，放大后的图片显示区域如图2所示。
具体的，如图3所示，本实施例的图片显示方法包括以下步骤：
步骤101、图片显示区域显示第一图片。
其中，第一图片也即尺寸较小的图片。
步骤102、在接收到触控操作指令时，放大图片显示区域，同时放大图片显示区域当前显示的第一图片。
其中，触控操作可以但不限于是下拉操作，根据用户手指在触摸屏上下滑的距离放大图片显示区域。
本实施例中，放大图片显示区域当前显示的第一图片的步骤，具体包括：
步骤102-1、获取图片显示区域的放大比例。
若放大图片显示区域采用下拉操作，放大比例根据下拉的滑动轨迹确定。
步骤102-2、按照放大比例放大第一图片。
放大后的第一图片在不改变原图片纵横比例的前提下，第一图片铺满整个显示区域。
步骤103、在图片显示区域中接收到切换指令时，切换图片显示区域显示的图片。
其中，切换指令可通过触控操作(例如左右滑动触摸屏)或者通过触发按键生成。切换后的图片同样是经过放大的图片，也即用户在放大后的图片显示区域中，通过横滑图片，即可查看后面的放大模式下的图片。
本实施例的图片显示方法通过触控操作可放大图片显示区域，相应的放大显示的图片。用户在放大后的图片显示区域能滑动图片来查看更多图片，并支持在放大模式下连续查看图片，从而减少了页面跳转，提升了浏览放大图片的效率。
实施例2
实施例2与实施例1基本相同，不同之处在于，图片显示区域放大前，图片显示区域无法完全按照图片比例来完整展示图片，也即放大前的图片显示区域显示的是裁切过的第二图片，如图4所示，本实施例的图片显示方法包括以下步骤：
步骤201、图片显示区域显示第二图片。
其中，第二图片是裁切过的图片。
步骤202、在接收到触控操作指令时，放大图片显示区域，同时图片显示区域显示裁切前的第二图片。
步骤202也即将第二图片完整地展示在放大后的图片显示区域中，同时还可将第二图片放大一定的比例后显示。
步骤203、在图片显示区域中接收到切换指令时，切换图片显示区域显示的图片。
步骤203中，切换后显示的图片同样是完整的图片。
本实施例提供了用户快速进入图片浏览的交互方式，让用户更快捷的进入图片完整浏览模式，减少了页面跳转，提升了用户浏览页面效率。
实施例3
本实施例提供一种界面的图片显示系统，界面包括图片显示区域，如图5所示，图片显示系统包括：区域放大模块1和切换模块2。
区域放大模块1用于在接收到触控操作指令时，放大图片显示区域。其中，触控操作可以但不限于是下拉操作，根据用户手指在触摸屏上下滑的距离放大图片显示区域。
本实施例中，区域放大模块1还用于在放大图片显示区域的同时，放大图片显示区域当前显示的第一图片。具体的，区域放大模块1包括：比例获取单元11和放大单元12。
比例获取单元11用于获取图片显示区域的放大比例。若放大图片显示区域采用下拉操作，放大比例根据下拉的滑动轨迹确定。放大单元12用于按照放大比例放大第一图片。放大后的第一图片在不改变原图片纵横比例的前提下，铺满整个显示区域。
切换模块2用于在图片显示区域中接收到切换指令时，切换图片显示区域显示的图片。
其中，切换指令可通过触控操作(例如左右滑动触摸屏)或者通过触发按键生成。切换后的图片同样是经过放大的图片，也即用户在放大后的图片显示区域中，通过横滑图片，即可查看后面的放大模式下的图片。
本实施例中，通过触控操作可放大图片显示区域，相应的放大显示的图片。用户在放大后的图片显示区域能滑动图片来查看更多图片，并支持在放大模式下连续查看图片，从而减少了页面跳转，提升了浏览放大图片的效率。
实施例4
实施例4与实施例3基本相同，如图6所示，不同之处在于，本实施例的图片显示系统还包括：裁切模块3。裁切模块3用于将裁切过的第二图片显示于放大前的图片显示区域。也即放大前的图片显示区域显示的是裁切过的第二图片。
本实施例中，区域放大模块1还用于在放大图片显示区域的同时，获取裁切前的第二图片并显示于图片显示区域中。也即将第二图片完整地展示在放大后的图片显示区域中，同时还可将第二图片放大一定的比例后显示。
通过切换模块2，用户在放大后的图片显示区域中，通过横滑图片，即可查看后面的完整展示的图片。
本实施例提供了用户快速进入图片浏览的交互方式，让用户更快捷的进入图片完整浏览模式，减少了页面跳转，提升了用户浏览页面效率。
虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (10)

1.一种界面的图片显示方法，所述界面包括图片显示区域，其特征在于，所述图片显示方法包括：
在接收到触控操作指令时，放大所述图片显示区域；
在所述图片显示区域中接收到切换指令时，切换所述图片显示区域显示的图片。
2.如权利要求1所述的界面的图片显示方法，其特征在于，放大所述图片显示区域的同时，放大所述图片显示区域当前显示的第一图片。
3.如权利要求2所述的界面的图片显示方法，其特征在于，放大所述图片显示区域当前显示的第一图片的步骤，具体包括：
获取所述图片显示区域的放大比例；
按照所述放大比例放大所述第一图片。
4.如权利要求1所述的界面的图片显示方法，其特征在于，接收触控操作指令的步骤之前，所述图片显示方法还包括：
将裁切过的第二图片显示于所述图片显示区域。
5.如权利要求4所述的界面的图片显示方法，其特征在于，放大所述图片显示区域的同时，所述图片显示区域显示裁切前的第二图片。
6.一种界面的图片显示系统，所述界面包括图片显示区域，其特征在于，所述图片显示系统包括：
区域放大模块，用于在接收到触控操作指令时，放大所述图片显示区域；
切换模块，用于在所述图片显示区域中接收到切换指令时，切换所述图片显示区域显示的图片。
7.如权利要求6所述的界面的图片显示系统，其特征在于，所述区域放大模块还用于在放大所述图片显示区域的同时，放大所述图片显示区域当前显示的第一图片。
8.如权利要求7所述的界面的图片显示系统，其特征在于，所述区域放大模块具体包括：
比例获取单元，用于获取所述图片显示区域的放大比例；
放大单元，用于按照所述放大比例放大所述第一图片。
9.如权利要求6所述的界面的图片显示系统，其特征在于，所述图片显示系统还包括：
裁切模块，用于将裁切过的第二图片显示于放大前的图片显示区域。
10.如权利要求9所述的界面的图片显示系统，其特征在于，所述区域放大模块还用于在放大所述图片显示区域的同时，获取裁切前的第二图片并显示于所述图片显示区域中。
CN201810819031.8A 2018-07-24 2018-07-24 界面的图片显示方法及系统 Pending CN110020322A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810819031.8A CN110020322A (zh) 2018-07-24 2018-07-24 界面的图片显示方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810819031.8A CN110020322A (zh) 2018-07-24 2018-07-24 界面的图片显示方法及系统

Publications (1)

Publication Number Publication Date
CN110020322A true CN110020322A (zh) 2019-07-16

Family

ID=67188338

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810819031.8A Pending CN110020322A (zh) 2018-07-24 2018-07-24 界面的图片显示方法及系统

Country Status (1)

Country Link
CN (1) CN110020322A (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101751207A (zh) * 2008-12-12 2010-06-23 康佳集团股份有限公司 一种触摸屏移动终端图片显示控制方法、装置及移动终端
CN102118498A (zh) * 2010-12-31 2011-07-06 深圳市同洲软件有限公司 移动终端控制显示终端显示图片的方法、装置和系统
CN102930001A (zh) * 2012-10-26 2013-02-13 北京法兰奇科技有限责任公司 互联网web页面的物品图像立体高清放大展示方法
CN103019587A (zh) * 2012-11-19 2013-04-03 广东欧珀移动通信有限公司 一种移动终端图片浏览的方法及装置
CN103279293A (zh) * 2013-04-27 2013-09-04 天脉聚源(北京)传媒科技有限公司 一种切换图片的方法、装置和终端
CN106055247A (zh) * 2016-05-25 2016-10-26 努比亚技术有限公司 一种图片显示装置、方法和移动终端
CN106468984A (zh) * 2015-08-11 2017-03-01 阿里巴巴集团控股有限公司 一种物品关联图片快速预览的方法以及装置
CN107423058A (zh) * 2017-07-07 2017-12-01 天脉聚源(北京)传媒科技有限公司 一种界面显示方法及装置

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101751207A (zh) * 2008-12-12 2010-06-23 康佳集团股份有限公司 一种触摸屏移动终端图片显示控制方法、装置及移动终端
CN102118498A (zh) * 2010-12-31 2011-07-06 深圳市同洲软件有限公司 移动终端控制显示终端显示图片的方法、装置和系统
CN102930001A (zh) * 2012-10-26 2013-02-13 北京法兰奇科技有限责任公司 互联网web页面的物品图像立体高清放大展示方法
CN103019587A (zh) * 2012-11-19 2013-04-03 广东欧珀移动通信有限公司 一种移动终端图片浏览的方法及装置
CN103279293A (zh) * 2013-04-27 2013-09-04 天脉聚源(北京)传媒科技有限公司 一种切换图片的方法、装置和终端
CN106468984A (zh) * 2015-08-11 2017-03-01 阿里巴巴集团控股有限公司 一种物品关联图片快速预览的方法以及装置
CN106055247A (zh) * 2016-05-25 2016-10-26 努比亚技术有限公司 一种图片显示装置、方法和移动终端
CN107423058A (zh) * 2017-07-07 2017-12-01 天脉聚源(北京)传媒科技有限公司 一种界面显示方法及装置

Similar Documents

Publication Publication Date Title
US20230266860A1 (en) Application association processing method and apparatus
CN106156066B (zh) 一种页面切换方法、装置及客户端
US9304668B2 (en) Method and apparatus for customizing a display screen of a user interface
CN105426080B (zh) 一种图片切换方法及终端
US10228835B2 (en) Method for displaying information, and terminal equipment
CN104049854B (zh) 显示处理方法和电子设备
US20130061159A1 (en) Overlaid User Interface for Browser Tab Switching
WO2014075582A1 (en) Method and apparatus for storing webpage access records
US20140115534A1 (en) Interaction method and apparatus for electronic devices
CN102520845A (zh) 一种移动终端调出缩略图界面的方法及装置
CN108255387A (zh) 触屏移动端图像快速对比交互方法
WO2022156606A1 (zh) 信息处理方法、装置及电子设备
CN104834637A (zh) 网页图片展示方法及装置
CN114116098B (zh) 应用图标管理方法、装置、电子设备及存储介质
US20150234576A1 (en) Method and apparatus for displaying information and electronic device adapted to the method
EP3043251A1 (en) Method of displaying content and electronic device implementing same
CN112291412B (zh) 应用程序控制方法、装置及电子设备
CN112181252B (zh) 截屏方法、装置及电子设备
CN113407144A (zh) 显示控制方法、装置
CN110020322A (zh) 界面的图片显示方法及系统
CN104216624A (zh) 一种显示方法和电子设备
CN113342222B (zh) 应用归类方法、装置及电子设备
CN102681974B (zh) 显示方法、显示装置和电子设备
CN113296661B (zh) 图像处理方法、装置、电子设备及可读存储介质
CN112667931B (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: 20190716

RJ01 Rejection of invention patent application after publication