CN104536650B - 一种基于ios系统的视差翻页人机交互方法 - Google Patents

一种基于ios系统的视差翻页人机交互方法 Download PDF

Info

Publication number
CN104536650B
CN104536650B CN201510019982.3A CN201510019982A CN104536650B CN 104536650 B CN104536650 B CN 104536650B CN 201510019982 A CN201510019982 A CN 201510019982A CN 104536650 B CN104536650 B CN 104536650B
Authority
CN
China
Prior art keywords
picture
page
user
title
page turning
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.)
Active
Application number
CN201510019982.3A
Other languages
English (en)
Other versions
CN104536650A (zh
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.)
Chengdu Pinguo Technology Co Ltd
Original Assignee
Chengdu Pinguo Technology 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 Chengdu Pinguo Technology Co Ltd filed Critical Chengdu Pinguo Technology Co Ltd
Priority to CN201510019982.3A priority Critical patent/CN104536650B/zh
Publication of CN104536650A publication Critical patent/CN104536650A/zh
Application granted granted Critical
Publication of CN104536650B publication Critical patent/CN104536650B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/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
    • G06F3/04817—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 using icons
    • 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/0485—Scrolling or panning
    • 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
    • G06F3/04883—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 for inputting data by handwriting, e.g. gesture or text

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)

Abstract

本发明涉及手机交互技术领域，本发明公开了一种基于IOS系统的视差翻页人机交互方法，其具体包括以下的步骤：步骤一、进入程序后，将手机界面中当前页面上的其中一个图片或者标题逐渐变大并高亮显示，其他图片或者标题大小不变并低亮显示；步骤二、用户滑动屏幕时，根据手指滑动的速度及方向进行翻页；步骤三、在滑动的过程中，新显示出来的页面上的其中一个图片或者标题逐渐变大并变高亮显示在新的当前页面上，其他图片大小不变地低亮显示在新的页面上，根据手指滑动的距离和系统设定的根据用户滑动多少距离翻一页判断出哪一个图片或者标题被逐渐变大并变高亮显示。通过上述方法聚焦用户的视线，提高了用户的操作体验。

Description

一种基于IOS系统的视差翻页人机交互方法
技术领域
本发明涉及人机交互技术领域，尤其涉及一种基于IOS系统的视差翻页人机交互方法。
背景技术
随着iPhone等基于手指触控的人机交互的触摸屏手机的流行，在触摸屏手机的很多程序窗口中，通过向上或者向下滑动手指，其屏幕就能对应向上或者向下滑动，屏幕上的图片则跟随屏幕的滑动而变化。
在采用现有的翻页方法时，在手机的界面中，每一个页面中的每一个图片的大小、亮度等在翻页前、翻页中以及翻页后都是固定不变的。如图1所示的手机界面，不管是向上滑动还是向下滑动，图片一、图片二、图片三、图片四都以现有的亮度和大小显示在手机界面上，这样的翻页方法使得用户不能快速找到感兴趣的图片或者标题，从而快速进入用户想要进入的下一级界面，降低了用户的操作体验。
发明内容
针对现有技术中的人机交互方法，用户体验不高的技术问题，本发明公开了一种基于IOS系统的视差翻页人机交互方法。
本发明的发明目的通过下述技术方案来实现：
一种基于IOS系统的视差翻页人机交互方法，其具体包括以下的步骤：步骤一、进入程序后，将手机界面中当前页面上的其中一个图片或者标题逐渐变大并高亮显示，其他图片或者标题大小不变并低亮显示；步骤二、用户滑动屏幕时，根据手指滑动的速度及方向进行翻页，当手指向上滑动时，向上翻页，当手指向下滑动时，向下翻页，翻页的速度与手指滑动的速度相对应；步骤三、在滑动的过程中，新显示出来的页面上的其中一个图片或者标题逐渐变大并变高亮显示在新的当前页面上，其他图片大小不变地低亮显示在新的页面上，根据手指滑动的距离和系统设定的根据用户滑动多少距离翻一页判断出哪一个图片或者标题被逐渐变大并变高亮显示。
更进一步地，上述图片或者标题在翻页过程中的大小变化以及亮度变化通过动画效果进行显示。
更进一步地，上述动画效果采用UI控件UICollectionView来实现。
更进一步地，上述方法还包括当用户松手时，手机界面还处于翻页的过程中，此时对翻页的结果进行位置校正。
更进一步地，上述位置校正具体为根据翻页的方向和用户松手时页面当前位置判断离哪一个图片或者标题更近，离哪一个图片或者标题更近，就根据运动方向校正到这个图片或者标题。
通过采用以上技术方案，本发明的有益效果是：本发明通过将其中的一个图片或者标题（入口）逐渐变大并高亮在手机界面中显示给用户，方便用户快速寻找到感兴趣的入口，本发明提供了一种当前页面中需要用户视线聚集的图片逐渐变大并变亮的过程，提高了用户的操作体验，为应用程序来带更多的用户粘度和用户友善度，从而建立起应用程序自身的核心竞争力。在视觉上，通过将图片变大及变亮的方式突出了当前页中某一个图片或者标题的显著度，能让用户更多的聚焦在当前高亮显示的图片或者标题入口上，在使用方式上具有乐趣，避免枯燥的千篇一律的使用方式给用户带来的审美疲劳和使用乏味。
附图说明
图1为现有技术中的翻页方法的手机界面示意图。
图2为本发明的视差翻页人机交互方法的手机界面示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合具体实施例，对本发明进行进一步详细的说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本发明公开了一种基于IOS系统的视差翻页人机交互方法，其具体包括以下的步骤：步骤一、进入程序后，将手机界面中当前页面上的其中一个图片或者标题（在默认状态下，一般会默认变大第一张图片，当然也可以根据需要进行其他任意的设定，变大并高亮显示的图片或者标题主要是告诉用户，当前在浏览的是哪一张图片或者标题，用变大效果也是为了让用户的视线聚焦在这张图片或者标题上）逐渐变大并高亮显示，其他图片或者标题大小不变并低亮显示；步骤二、用户滑动屏幕时，根据手指滑动的速度及方向进行翻页，当手指向上滑动时，向上翻页，当手指向下滑动时，向下翻页，翻页的速度与手指滑动的速度相对应；步骤三、在滑动的过程中，新显示出来的页面上的其中一个图片或者标题逐渐变大并变高亮显示在新的当前页面上，其他图片大小不变地低亮显示在新的页面上，根据手指滑动的距离和系统设定的根据用户滑动多少距离翻一页判断出哪一个图片或者标题被逐渐变大并变高亮显示。根据用户用手指滑动的距离以及系统设定的参数（用户滑动多少距离翻一页的参数DRAG_INTERVA）作为单位距离，来判断出应该将哪个图片或者标题进行高亮以及变大显示，比如说DRAG_INTERVAL等于100像素，就意味着用户用手每滑动100像素，就会从当前的图片切换到下一张图片，如果滑动距离不够100，则会做位置校正。本发明通过将其中的一个图片或者标题（入口）逐渐变大并高亮在手机界面中显示给用户，方便用户快速寻找到感兴趣的入口，本发明提供了一种当前页面中需要用户视线聚集的图片逐渐变大并变亮的过程，提高了用户的操作体验，为应用程序来带更多的用户粘度和用户友善度，从而建立起应用程序自身的核心竞争力。在视觉上，通过将图片变大及变亮的方式突出了当前页中某一个图片或者标题的显著度，能让用户更多的聚焦在当前高亮显示的入口上，在使用方式上具有乐趣，避免枯燥的千篇一律的使用方式给用户带来的审美疲劳和使用乏味。图2为本发明的视差翻页人机交互方法的手机界面示意图。其中图片一为当前页面中变大并高亮显示的图片，方便用户查看。
在IOS6.0以前，要实现将图片逐渐变大的动画，需要使用老式的UI控件UITableView。UITableView在使用简单的同时，也有一定的局限性，其扩展性不强导致较难实现一些高度自定义的动画效果。本发明的方法主要针对的是IOS6.0及以上的系统。基于IOS6.0新的UI控件UICollectionView，此控件能高度自定义动画。更进一步地，上述图片或者标题的滑动以及逐渐变化的过程采用动画实现，其动画效果采用UI控件UICollectionView来实现图片或者标题得逐渐变化，实现在当前页面上，其中的一个图片或者标题逐渐变大并变高亮显示在新的当前页面上，其他图片大小不变地低亮显示在新的页面上。这样的实现方法是基于IOS6.0系统的，其基于IOS6.0系统的UI控件UICollectionView，实现更加方便。
更进一步地，上述方法还包括对翻页结果进行位置校正。因为当用户松手时，手机界面还有可能处于翻页的过程中。这时候就需要根据用户滑动多少距离翻一页（DRAG_INTERVAL）、当前已经滑动过去的页数（current_floor）、用户松开手时，如果不进行校正，页面停止时候的默认位置（CGPointdestination）、用户松手时页面当前位置（CGFloatscreen_y）、滑动加速度（velocity）这5个参数的比较，判断是应该回到上一页面或者翻到下一页。
Velocity一般包括velocity.x和velocity.y,分别表示横坐标加速度和纵坐标加速度。而本发明中涉及到的是上下翻页，所以只会用到velocity.y，velocity.y如果是为正整数，则表示运动方向为向下，反之则为向上运动，然后结合用户松手时页面当前位置CGFloatscreen_y这个参数，来判断用户松手时，距离哪个图片最近，当知道离哪个图片最近后，就能够根据运动方向校正到这个图片。
获取以下的6个参数：
1.页面头部导航高度：HEADER_HEIGHT；
2.用户滑动多少距离翻一页面：DRAG_INTERVAL；例如：floatDRAG_INTERVAL＝170.0f；
3.当前屏幕滚动到的位置：screen_y；
floatscreen_y=self.collectionView.contentOffset.y;
4.当前已经滑动过去的页数：current_floor；
floatcurrent_floor=floorf((screen_y-HEADER_HEIGHT)/DRAG_INTERVAL)+1;
5.当前取余：current_mod；
floatcurrent_mod=fmodf((screen_y-HEADER_HEIGHT),DRAG_INTERVAL);
6.当前取余百分比：percent;
floatpercent=current_mod/DRAG_INTERVAL;
根据以上的6个参数，就能够算出当前每个页的矩阵frame（坐标X，坐标Y，宽度，高度），并得到当前屏幕中应该显示的图片或者标题（数组），并根据每个页的当前位置，处理页中的图片或标题或描述从而视线视差翻页。
比如，设定一个drag_interval参数，例如drag_interval可以等于100，用户每滑动一个drag_interval，就会切换一张图片，换句话来说，就是当前屏幕的第二张图片就会由小变大，这个时候系统会计算出变化处于何种阶段，比如说，图片的初始状态为高度100，变大后成为200，那么在滑动的过程中，如果用户刚刚滑动一个drag_interval，那么图片高度增量就是100，如果不够一个drag_interval，例如只有50，那说明图片的高度也只变化了50/100＝二分之一，根据这个百分比，就能对图片和文字标题进行动画处理，例如先会设置一个图片的默认位置和图片的最终位置，根据上面的百分比去乘以最终位置和默认位置之差，就能得到当前位置。根据当前位置来判断用户松手时，距离哪个图片最近，当知道离哪个图片最近后，那么就能够根据运动方向校正到这个图片。
上述说明示出并描述了本发明的一个优选实施例，但如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (3)

1.一种基于IOS系统的视差翻页人机交互方法，其具体包括以下的步骤：步骤一、进入程序后，将手机界面中当前页面上的其中一个图片或者标题逐渐变大并高亮显示，其他图片或者标题大小不变并低亮显示；步骤二、用户滑动屏幕时，根据手指滑动的速度及方向进行翻页，当手指向上滑动时，向上翻页，当手指向下滑动时，向下翻页，翻页的速度与手指滑动的速度相对应；步骤三、在滑动的过程中，新显示出来的页面上的其中一个图片或者标题逐渐变大并变高亮显示在新的当前页面上，其他图片大小不变地低亮显示在新的页面上，根据手指滑动的距离和系统设定的根据用户滑动多少距离翻一页判断出哪一个图片或者标题被逐渐变大并变高亮显示，当用户松手时，手机界面还处于翻页的过程中，此时对翻页的结果进行位置校正，所述位置校正具体为根据翻页的方向和用户松手时页面当前位置判断离哪一个图片或者标题更近，离哪一个图片或者标题更近，就根据运动方向校正到这个图片或者标题，
设置一个图片的默认位置和图片的最终位置，根据用户实际滑动的距离与系统设定的用户滑动多少距离翻一页的的百分比去乘以最终位置和默认位置之差，得到当前位置，根据当前位置来判断用户松手时距离哪个图片最近。
2.如权利要求1所述的基于IOS系统的视差翻页人机交互方法，其特征在于所述图片或者标题在翻页过程中的大小变化以及亮度变化通过动画效果进行显示。
3.如权利要求2所述的基于IOS系统的视差翻页人机交互方法，其特征在于所述动画效果采用UI控件UICollectionView来实现。
CN201510019982.3A 2015-01-15 2015-01-15 一种基于ios系统的视差翻页人机交互方法 Active CN104536650B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510019982.3A CN104536650B (zh) 2015-01-15 2015-01-15 一种基于ios系统的视差翻页人机交互方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510019982.3A CN104536650B (zh) 2015-01-15 2015-01-15 一种基于ios系统的视差翻页人机交互方法

Publications (2)

Publication Number Publication Date
CN104536650A CN104536650A (zh) 2015-04-22
CN104536650B true CN104536650B (zh) 2018-05-15

Family

ID=52852189

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510019982.3A Active CN104536650B (zh) 2015-01-15 2015-01-15 一种基于ios系统的视差翻页人机交互方法

Country Status (1)

Country Link
CN (1) CN104536650B (zh)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105528173A (zh) * 2015-12-08 2016-04-27 深圳市金立通信设备有限公司 一种多媒体操作方法及终端
US10372289B2 (en) 2015-12-31 2019-08-06 Beijing Pico Technology Co., Ltd. Wraparound interface layout method, content switching method under three-dimensional immersive environment, and list switching method
CN107515711A (zh) * 2016-06-17 2017-12-26 中兴通讯股份有限公司 展示图片的方法及装置
WO2019222887A1 (zh) * 2018-05-21 2019-11-28 华为技术有限公司 一种显示控制方法及终端
CN111290692B (zh) * 2020-01-20 2021-04-09 北京无限光场科技有限公司 图片显示方法、装置、电子设备及计算机可读介质
CN114115675A (zh) * 2020-08-31 2022-03-01 华为终端有限公司 一种页面滑动的处理方法及相关装置
CN114519154A (zh) * 2022-02-21 2022-05-20 北京字节跳动网络技术有限公司 页面内容的显示方法和装置

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103488398A (zh) * 2013-09-16 2014-01-01 深圳市同洲电子股份有限公司 一种页面显示方法、装置和智能终端

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP5862610B2 (ja) * 2013-06-17 2016-02-16 コニカミノルタ株式会社 画像表示装置及び表示制御プログラム並びに表示制御方法

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103488398A (zh) * 2013-09-16 2014-01-01 深圳市同洲电子股份有限公司 一种页面显示方法、装置和智能终端

Also Published As

Publication number Publication date
CN104536650A (zh) 2015-04-22

Similar Documents

Publication Publication Date Title
CN104536650B (zh) 一种基于ios系统的视差翻页人机交互方法
AU2014244765B2 (en) Display method and apparatus for diversely displaying an object according to scroll speed
CN103197770B (zh) 一种电视遥控器模拟鼠标操作的方法及装置
KR20170139141A (ko) 스타일러스로 사용자 인터페이스를 조작하기 위한 디바이스 및 방법
US20130080951A1 (en) Device and method for moving icons across different desktop screens and related computer readable storage media comprising computer executable instructions
CN104423879A (zh) 信息处理装置、存储介质和控制方法
CN111782128A (zh) 用于在用户界面中导航的列界面
CN105892831A (zh) 一种移动终端的列表数据的滑动显示方法和装置
CN103902165A (zh) 实现菜单背景的方法和装置
CN103324414A (zh) 一种调整图标位置的方法及移动终端
CN110727496B (zh) 图形用户界面的布局方法、装置、电子设备及存储介质
CN103324436B (zh) 一种任务处理方法及装置
CN103686281B (zh) 模拟鼠标控制智能电视的方法、遥控器和移动终端
TW201331825A (zh) 用以在螢幕間提供視覺過渡之裝置及方法
CN103631475A (zh) 切换窗口的方法和装置
CN105867727A (zh) 多应用界面的显示方法和装置
CN106569702A (zh) 一种列表导航方法和装置
CN106572381A (zh) 一种图片缩略图的处理方法和智能电视
CN106055197A (zh) 一种应用图标展示方法及终端
CN109804340A (zh) 用于页面显示的方法、装置、图形用户界面及移动终端
CN109164966A (zh) 一种屏幕截图的方法及装置
CN109189301A (zh) 一种屏幕截图的方法及装置
CN105446597B (zh) 应用程序的功能介绍信息的展示方法、展示装置和终端
CN104049867B (zh) 一种信息处理方法及电子设备
CN105739936B (zh) 一种用户终端控制方法及用户终端

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CP02 Change in the address of a patent holder

Address after: 610015 floor 13, building 1, No.1268, middle section of Tianfu Avenue, Chengdu high tech Zone, China (Sichuan) pilot Free Trade Zone, Chengdu

Patentee after: Chengdu PinGuo Digital Entertainment Ltd.

Address before: 610041 C12-16 building, Tianfu Software Park, hi tech Zone, Sichuan, Chengdu

Patentee before: Chengdu PinGuo Digital Entertainment Ltd.

CP02 Change in the address of a patent holder
CB03 Change of inventor or designer information

Inventor after: Zhang Zhi

Inventor after: Xu Hao

Inventor after: Xu Ying

Inventor after: Yang Jia

Inventor before: Zhang Zhi

CB03 Change of inventor or designer information