CN105630383B - 一种在人机交互过程中提升关注度的方法和系统 - Google Patents

一种在人机交互过程中提升关注度的方法和系统 Download PDF

Info

Publication number
CN105630383B
CN105630383B CN201510982106.0A CN201510982106A CN105630383B CN 105630383 B CN105630383 B CN 105630383B CN 201510982106 A CN201510982106 A CN 201510982106A CN 105630383 B CN105630383 B CN 105630383B
Authority
CN
China
Prior art keywords
page
module
mobile device
circle
background color
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
CN201510982106.0A
Other languages
English (en)
Other versions
CN105630383A (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.)
China Southern Power Grid Internet Service Co ltd
Original Assignee
Wuhan Douyu Network 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 Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201510982106.0A priority Critical patent/CN105630383B/zh
Publication of CN105630383A publication Critical patent/CN105630383A/zh
Application granted granted Critical
Publication of CN105630383B publication Critical patent/CN105630383B/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/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
    • 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/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture

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)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种在人机交互过程中提升关注度的方法，包括：检测用户在移动设备页面上的触摸点，并记录该触摸点的坐标，获取当前页面的背景颜色，并将该背景颜色进行变色处理，并将变色处理后的背景颜色用作页面的填充色，设置计数器i＝1，以触摸点作为圆心、基于移动设备的屏幕密度L所确定的半径r绘制第i个圆，判断用户是否停止触摸移动设备的页面，如果是，则判断整个页面是否已经被填满，如果是则以固定的时间间隔降低页面填充色的透明度。本发明能够解决现有人机交互效果中存在的误点击的技术问题，此外，本发明的方法能够通过涟漪动画的方式提升用户体验感。

Description

一种在人机交互过程中提升关注度的方法和系统
技术领域
本发明属于移动设备人机交互及视觉效果领域，更具体地，涉及一种在人机交互过程中提升关注度的方法和系统。
背景技术
如今，安装有安卓操作系统的移动设备已经得到了相当程度的普及。在基于安卓平台的应用程序中，往往都使用虚拟按钮来实现人机交互。然而，当前绝大多数应用程序的人机交互中的点击效果都只有“按下”和“非按下”两种状态，用户在点击这些虚拟按钮时，并不能直观地看到自己所点击的具体位置，由此容易造成误点击的情况。此外，这两种状态的切换效果非常生硬，用户体验感不好。
发明内容
针对现有技术的以上缺陷或改进需求，本发明提供了一种在人机交互过程中提升关注度的方法，其目的在于，通过动画的涟漪效果让用户直观地了解自己所点击的具体位置，解决现有人机交互效果中存在的误点击的技术问题，此外，本发明的方法能够通过涟漪动画的方式提升用户体验感。
为实现上述目的，按照本发明的一个方面，提供了一种在人机交互过程中提升关注度的方法，包括以下步骤：
(1)检测用户在移动设备页面上的触摸点，并记录该触摸点的坐标；
(2)获取当前页面的背景颜色，并将该背景颜色进行变色处理，并将变色处理后的背景颜色用作页面的填充色；
(3)设置计数器i＝1，以触摸点作为圆心、基于移动设备的屏幕密度L所确定的半径r绘制第i个圆；
(4)判断用户是否停止触摸移动设备的页面，如果是，则进入步骤(7)，否则进入步骤(5)；
(5)设置i＝i+1，以预定时间间隔绘制第i个同心圆，并判断第i个同心圆是否已经填充了整个页面，如果是则进入步骤(6)，否则返回步骤(4)；
(6)保持整个页面为填充状态，直到用户停止触摸移动设备的页面为止；
(7)判断整个页面是否已经被填满，如果是则转入步骤(8)，否则以比步骤(5)中将填充整个页面所需时间更少的时间将移动设备的整个页面填满，然后进入步骤(8)；
(8)以固定的时间间隔降低页面填充色的透明度，直至其最终变为全透明为止。
优选地，步骤(1)中坐标系的原点为页面的左上角。
优选地，变色处理包括有对背景颜色的加深处理以及变浅处理，其可根据用户所需的视觉效果被自由改变。
优选地，步骤(5)中绘制同心圆的时间间隔为10毫秒到33毫秒，第一次绘制一个半径为L的圆，时间间隔以后，第二次绘制一个半径为2L的圆，直至最后一个圆填满整个页面为止。
优选地，步骤(8)中的时间间隔为10毫秒到33毫秒。
按照本发明的另一方面，提供了一种在人机交互过程中提升关注度的系统，包括：
第一模块，用于检测用户在移动设备页面上的触摸点，并记录该触摸点的坐标；
第二模块，用于获取当前页面的背景颜色，并将该背景颜色进行变色处理，并将变色处理后的背景颜色用作页面的填充色；
第三模块，用于设置计数器i＝1，以触摸点作为圆心、基于移动设备的屏幕密度L所确定的半径r绘制第i个圆；
第四模块，用于判断用户是否停止触摸移动设备的页面，如果是，则进入第七模块，否则进入第五模块；
第五模块，用于设置i＝i+1，以预定时间间隔绘制第i个同心圆，并判断第i个同心圆是否已经填充了整个页面，如果是则进入第六模块，否则返回第四模块；
第六模块，用于保持整个页面为填充状态，直到用户停止触摸移动设备的页面为止；
第七模块，用于判断整个页面是否已经被填满，如果是则转入第八模块，否则以比第五模块中将填充整个页面所需时间更少的时间将移动设备的整个页面填满，然后进入第八模块；
第八模块，用于以固定的时间间隔降低页面填充色的透明度，直至其最终变为全透明为止。
优选地，第一模块中坐标系的原点为页面的左上角。
优选地，变色处理包括有对背景颜色的加深处理以及变浅处理，其可根据用户所需的视觉效果被自由改变。
优选地，第五模块中绘制同心圆的时间间隔为10毫秒到33毫秒，第一次绘制一个半径为L的圆，时间间隔以后，第二次绘制一个半径为2L的圆，直至最后一个圆填满整个页面为止。
优选地，第八模块中的时间间隔为10毫秒到33毫秒。
总体而言，通过本发明所构思的以上技术方案与现有技术相比，能够取得下列有益效果：
(1)通过采用步骤(3)至(5)绘制不断扩大的圆，用户能够直观地了解到其具体点击的位置，从而解决了现有人机交互效果中存在的由于无法知道点击的位置所导致的误点击的技术问题。
(2)通过采用步骤(3)至(6)中逐渐扩大形成的圆以及最终填满整个页面的方式，给用户一种渐变的动态效果，从而提升了用户的视觉体验感。
(3)本发明的方法兼容性强，开发者可以利用本发明的方法在低版本的安卓系统设备上实现动画涟漪效果。
(4)本发明的方法使用简单，开发者仅需要通过简单的指令即可实现本发明的动画涟漪效果。
附图说明
图1是本发明在人机交互过程中提升关注度的方法的流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。
如图1所示，本发明在人机交互过程中提升关注度的方法包括以下步骤：
(1)检测用户在移动设备页面上的触摸点，并记录该触摸点的坐标；具体而言，坐标系的原点为页面的左上角，触摸点的坐标用(x，y)表示，其单位为像素点；
(2)获取当前页面的背景颜色，并将该背景颜色进行变色处理，并将变色处理后的背景颜色用作页面的填充色；具体而言，变色处理包括有对背景颜色的加深处理以及变浅处理两种，也可以根据所需视觉效果自由地改变填充色的颜色；
(3)设置计数器i＝1，以触摸点作为圆心、基于移动设备的屏幕密度L所确定的半径r(其初始值等于L)绘制第i个圆；屏幕密度指的是根据像素分辨率，在屏幕指定物理宽高范围内能显示的像素数量，在同样的宽高区域，低密度的显示屏能显示的像素较少，而高密度的显示屏则能显示更多的像素。
(4)判断用户是否停止触摸移动设备的页面，如果是，则进入步骤(7)，否则进入步骤(5)；
(5)设置i＝i+1，以预定时间间隔绘制第i个同心圆，并判断第i个同心圆是否已经填充了整个页面，如果是则进入步骤(6)，否则返回步骤(4)；具体而言，屏幕密度L对于每个移动设备而言是固定不变的，绘制同心圆的时间间隔为10毫秒到33毫秒，第一次绘制一个半径为L的圆，时间间隔以后，第二次绘制一个半径为2L的圆，第三次绘制一个半径为3L的圆，…，以此类推，直至最后一个圆填满整个页面为止，将整个页面填充完毕的耗时约为2秒以上；
(6)保持整个页面为填充状态，直到用户停止触摸移动设备的页面为止；
(7)判断整个页面是否已经被填满，如果是则转入步骤(8)，否则以比步骤(5)中将填充整个页面所需时间更少的时间将移动设备的整个页面填满，然后进入步骤(8)；
(8)以固定的时间间隔降低页面填充色的透明度，直至其最终变为全透明为止；具体而言，时间间隔为10毫秒到33毫秒。
综上所述，本发明方法的优点在于：
(1)通过采用步骤(3)至(5)绘制不断扩大的圆，用户能够直观地了解到其具体点击的位置，从而解决了现有人机交互效果中存在的由于无法知道点击的位置所导致的误点击的技术问题。
(2)通过采用步骤(3)至(6)中逐渐扩大形成的圆以及最终填满整个页面的方式，给用户一种渐变的动态效果，从而提升了用户的视觉体验感。
(3)本发明的方法兼容性强，开发者可以利用本发明的方法在低版本的安卓系统设备上实现动画涟漪效果。
(4)本发明的方法使用简单，开发者仅需要通过简单的指令即可实现本发明的动画涟漪效果。
本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种在人机交互过程中提升关注度的方法，其特征在于，包括以下步骤：
(1)检测用户在移动设备页面上的触摸点，并记录该触摸点的坐标；
(2)获取当前页面的背景颜色，并将该背景颜色进行变色处理，并将变色处理后的背景颜色用作页面的填充色；
(3)设置计数器i＝1，以触摸点作为圆心、基于移动设备的屏幕密度L所确定的半径r绘制第i个圆；
(4)判断用户是否停止触摸移动设备的页面，如果是，则进入步骤(7)，否则进入步骤(5)；
(5)设置i＝i+1，以预定时间间隔绘制第i个同心圆，并判断第i个同心圆是否已经填充了整个页面，如果是则进入步骤(6)，否则返回步骤(4)；第一次绘制一个半径为L的圆，时间间隔以后，第二次绘制一个半径为2L的圆，直至最后一个圆填满整个页面为止；
(6)保持整个页面为填充状态，直到用户停止触摸移动设备的页面为止；
(7)判断整个页面是否已经被填满，如果是则转入步骤(8)，否则以比步骤(5)中将填充整个页面所需时间更少的时间将移动设备的整个页面填满，然后进入步骤(8)；
(8)以固定的时间间隔降低页面填充色的透明度，直至其最终变为全透明为止。
2.根据权利要求1所述的方法，其特征在于，步骤(1)中坐标系的原点为页面的左上角。
3.根据权利要求1所述的方法，其特征在于，变色处理包括有对背景颜色的加深处理以及变浅处理，其可根据用户所需的视觉效果被自由改变。
4.根据权利要求1所述的方法，其特征在于，步骤(5)中绘制同心圆的时间间隔为10毫秒到33毫秒。
5.根据权利要求1所述的方法，其特征在于，步骤(8)中的时间间隔为10毫秒到33毫秒。
6.一种在人机交互过程中提升关注度的系统，其特征在于，包括：
第一模块，用于检测用户在移动设备页面上的触摸点，并记录该触摸点的坐标；
第二模块，用于获取当前页面的背景颜色，并将该背景颜色进行变色处理，并将变色处理后的背景颜色用作页面的填充色；
第三模块，用于设置计数器i＝1，以触摸点作为圆心、基于移动设备的屏幕密度L所确定的半径r绘制第i个圆；
第四模块，用于判断用户是否停止触摸移动设备的页面，如果是，则进入第七模块，否则进入第五模块；
第五模块，用于设置i＝i+1，以预定时间间隔绘制第i个同心圆，并判断第i个同心圆是否已经填充了整个页面，如果是则进入第六模块，否则返回第四模块；第一次绘制一个半径为L的圆，时间间隔以后，第二次绘制一个半径为2L的圆，直至最后一个圆填满整个页面为止；
第六模块，用于保持整个页面为填充状态，直到用户停止触摸移动设备的页面为止；
第七模块，用于判断整个页面是否已经被填满，如果是则转入第八模块，否则以比第五模块中将填充整个页面所需时间更少的时间将移动设备的整个页面填满，然后进入第八模块；
第八模块，用于以固定的时间间隔降低页面填充色的透明度，直至其最终变为全透明为止。
7.根据权利要求6所述的系统，其特征在于，第一模块中坐标系的原点为页面的左上角。
8.根据权利要求6所述的系统，其特征在于，变色处理包括有对背景颜色的加深处理以及变浅处理，其可根据用户所需的视觉效果被自由改变。
9.根据权利要求6所述的系统，其特征在于，第五模块中绘制同心圆的时间间隔为10毫秒到33毫秒。
10.根据权利要求6所述的系统，其特征在于，第八模块中的时间间隔为10毫秒到33毫秒。
CN201510982106.0A 2015-12-22 2015-12-22 一种在人机交互过程中提升关注度的方法和系统 Active CN105630383B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510982106.0A CN105630383B (zh) 2015-12-22 2015-12-22 一种在人机交互过程中提升关注度的方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510982106.0A CN105630383B (zh) 2015-12-22 2015-12-22 一种在人机交互过程中提升关注度的方法和系统

Publications (2)

Publication Number Publication Date
CN105630383A CN105630383A (zh) 2016-06-01
CN105630383B true CN105630383B (zh) 2019-01-29

Family

ID=56045383

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510982106.0A Active CN105630383B (zh) 2015-12-22 2015-12-22 一种在人机交互过程中提升关注度的方法和系统

Country Status (1)

Country Link
CN (1) CN105630383B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108549512B (zh) * 2018-03-30 2021-03-16 武汉斗鱼网络科技有限公司 一种显示方法、装置及计算机设备
CN110377192B (zh) * 2019-06-18 2020-12-08 北京字节跳动网络技术有限公司 一种实现互动效果的方法、装置、介质和电子设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102855076A (zh) * 2011-07-01 2013-01-02 上海博泰悦臻电子设备制造有限公司 触摸屏的控制方法及装置、移动终端设备
CN103677419A (zh) * 2013-12-16 2014-03-26 深圳市东信时代信息技术有限公司 触屏电子装置及其屏幕保护方法
CN104777999A (zh) * 2015-03-20 2015-07-15 广东欧珀移动通信有限公司 触摸位置显示方法及触摸位置显示系统
CN105094553A (zh) * 2015-07-24 2015-11-25 广州市久邦数码科技有限公司 一种子菜单栏特效的实现方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102855076A (zh) * 2011-07-01 2013-01-02 上海博泰悦臻电子设备制造有限公司 触摸屏的控制方法及装置、移动终端设备
CN103677419A (zh) * 2013-12-16 2014-03-26 深圳市东信时代信息技术有限公司 触屏电子装置及其屏幕保护方法
CN104777999A (zh) * 2015-03-20 2015-07-15 广东欧珀移动通信有限公司 触摸位置显示方法及触摸位置显示系统
CN105094553A (zh) * 2015-07-24 2015-11-25 广州市久邦数码科技有限公司 一种子菜单栏特效的实现方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
Android动画特效之水波（地震波）报警动画;皮卡丘啾啾;《https://blog.csdn.net/daijin888888/article/details/46357515》;20150604;第1-10页
实现Android 5.0 Material Design的点击任意View的水波效果;MrSimp1e;《https://blog.csdn.net/bboyfeiyu/article/details/42587799》;20150110;第1-6页

Also Published As

Publication number Publication date
CN105630383A (zh) 2016-06-01

Similar Documents

Publication Publication Date Title
CN103513912B (zh) 一种界面切换方法及装置
JP6274682B2 (ja) インタフェースコンテンツを表示するための方法およびユーザ装置
CN104166515B (zh) 一种移动终端触摸屏解锁方法及系统
WO2017113738A1 (zh) 语音控制方法及其设备
CN102902408B (zh) 一种控制电子设备触摸屏工作的方法及一种电子设备
CN106293315A (zh) 浮动窗口显示的方法和装置
US10901587B2 (en) Widget area adjustment method and apparatus
CN107193519A (zh) 显示控制方法及装置、计算机装置和计算机可读存储介质
CN104238887B (zh) 常用应用程序的图标查找方法和装置
CN102929556A (zh) 一种基于触摸屏的交互控制方法及设备
CN105630363B (zh) 虚拟按钮的显示方法及其电子装置与显示虚拟按钮的装置
KR20150042241A (ko) 컴포넌트의 콘텐츠 디스플레이를 구현하기 위한 방법 및 장치
CN109491722B (zh) 基于微信小程序的柱状图图表插件系统及其实现方法
CN107247557A (zh) 一种应用图标显示方法及装置
CN104077056B (zh) 屏幕显示页面的平移方法和系统
CN103593180A (zh) 一种在应用程序中添加文件的方法和装置
CN105630383B (zh) 一种在人机交互过程中提升关注度的方法和系统
WO2017096932A1 (zh) 智能显示的方法及装置
CN102929506A (zh) 一种快速添加桌面元素至桌面的方法
CN103207730A (zh) 一种可定位拖拉式流程图生成方法及流程图生成器
CN103902101A (zh) 智能终端的手势识别方法以及实现该方法的智能终端
CN102023805A (zh) 一种软件界面文本信息的辅助浏览方法
CN104978171B (zh) 可识别标识的输出方法及装置
US20120306871A1 (en) Method and apparatus for redrawing widget
CN107589890A (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
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20231109

Address after: Room 606-609, Compound Office Complex Building, No. 757, Dongfeng East Road, Yuexiu District, Guangzhou, Guangdong Province, 510699

Patentee after: China Southern Power Grid Internet Service Co.,Ltd.

Address before: 430000 Wuhan Donghu Development Zone, Wuhan, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building

Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd.