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

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 (5)

1.一种基于IOS系统的视差翻页人机交互方法，其具体包括以下的步骤：步骤一、进入程序后，将手机界面中当前页面上的其中一个图片或者标题逐渐变大并高亮显示，其他图片或者标题大小不变并低亮显示；步骤二、用户滑动屏幕时，根据手指滑动的速度及方向进行翻页，当手指向上滑动时，向上翻页，当手指向下滑动时，向下翻页，翻页的速度与手指滑动的速度相对应；步骤三、在滑动的过程中，新显示出来的页面上的其中一个图片或者标题逐渐变大并变高亮显示在新的当前页面上，其他图片大小不变地低亮显示在新的页面上，根据手指滑动的距离和系统设定的根据用户滑动多少距离翻一页判断出哪一个图片或者标题被逐渐变大并变高亮显示。

2.如权利要求1所述的基于IOS系统的视差翻页人机交互方法，其特征在于所述图片或者标题在翻页过程中的大小变化以及亮度变化通过动画效果进行显示。

3.如权利要求2所述的基于IOS系统的视差翻页人机交互方法，其特征在于所述动画效果采用UI控件UICollectionView来实现。

4.如权利要求3所述的基于IOS系统的视差翻页人机交互方法，其特征在于方法还包括当用户松手时，手机界面还处于翻页的过程中，此时对翻页的结果进行位置校正。

5.如权利要求4所述的基于IOS系统的视差翻页人机交互方法，其特征在于所述位置校正具体为根据翻页的方向和用户松手时页面当前位置判断离哪一个图片或者标题更近，离哪一个图片或者标题更近，就根据运动方向校正到这个图片或者标题。