CN104793876B - 应用界面按钮显示方法及装置 - Google Patents

应用界面按钮显示方法及装置 Download PDF

Info

Publication number
CN104793876B
CN104793876B CN201410028424.9A CN201410028424A CN104793876B CN 104793876 B CN104793876 B CN 104793876B CN 201410028424 A CN201410028424 A CN 201410028424A CN 104793876 B CN104793876 B CN 104793876B
Authority
CN
China
Prior art keywords
button
arc
collection container
application interface
buttons
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
CN201410028424.9A
Other languages
English (en)
Other versions
CN104793876A (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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201410028424.9A priority Critical patent/CN104793876B/zh
Priority to PCT/CN2015/071174 priority patent/WO2015110001A1/en
Publication of CN104793876A publication Critical patent/CN104793876A/zh
Application granted granted Critical
Publication of CN104793876B publication Critical patent/CN104793876B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction 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
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction 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/0482Interaction with lists of selectable items, e.g. menus

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

本发明涉及一种应用界面按钮显示方法及装置,其方法包括:在应用界面上接收外部触发的按钮显示指令;根据按钮显示指令,获取预设的可伸缩的按钮集合容器;将按钮集合容器以弧形区域在应用界面上展开,并将按钮集合容器中的各按钮显示在所述弧形区域。本发明通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。

Description

应用界面按钮显示方法及装置
技术领域
本发明涉及界面显示技术领域,尤其涉及一种应用界面按钮显示方法及装置。
背景技术
移动端应用中按钮是最常用也是最常见的人机交互控件,程序通过截获按钮的点击事件后可以进行UI刷新、页面切换、数据拉取等各种操作,但是对于手机端来说,由于屏幕的尺寸有限,同一页面上又要尽量展现更多的内容,如果按钮较多就会影响主要内容的展示,而且按钮占用的空间越多,页面布局就越复杂。
目前的应用中为了避免按钮占用过多的屏幕空间,通常将多个按钮集成在一起,以弹出形式展现,当不用时将按钮的集合收缩在屏幕的一个很小的区域。但是,对于一些游戏类的应用来说,由于界面元素很多,留给按钮伸缩的空间很少,如果按钮太多,全部显示出来后需要较长的屏幕空间,就会遮挡其它的界面元素。
发明内容
本发明实施例提供一种应用界面按钮显示方法及装置,旨在减少按钮占用的屏幕空间。
本发明实施例提出一种应用界面按钮显示方法,包括:
在应用界面上接收外部触发的按钮显示指令;
根据所述按钮显示指令,获取预设的可伸缩的按钮集合容器;
将所述按钮集合容器以弧形区域在所述应用界面上展开,并将所述按钮集合容器中的各按钮显示在所述弧形区域。
本发明实施例还提出一种应用界面按钮显示装置,包括:
接收模块,用于在应用界面上接收外部触发的按钮显示指令;
获取模块,用于根据所述按钮显示指令,获取预设的可伸缩的按钮集合容器;
展开显示模块,用于将所述按钮集合容器以弧形区域在所述应用界面上展开,并将所述按钮集合容器中的各按钮显示在所述弧形区域。
本发明实施例提出的一种应用界面按钮显示方法及装置,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。
附图说明
图1是本发明应用界面按钮显示方法第一实施例的流程示意图;
图2a是本发明实施例中扇形按钮集合容器在屏幕上画布的裁剪区域之外的示意图;
图2b是本发明实施例中扇形按钮集合容器展开状态示意图;
图2c是本发明实施例中扇形按钮集合容器折叠状态示意图;
图2d是本发明实施例中在应用界面上设置触发按键的示意图;
图2e是本发明实施例中在应用界面上点击触发按键展开按钮集合容器的示意图;
图2f是本发明实施例中对按钮反方向旋转设定角度后的效果示意图;
图2g是本发明实施例中对按钮旋转角度进行修正的示意图;
图3是本发明应用界面按钮显示方法第二实施例的流程示意图;
图4是本发明应用界面按钮显示方法第三实施例的流程示意图;
图5是本发明实施例中按钮集合容器折叠后的屏幕显示示意图;
图6是本发明应用界面按钮显示装置第一实施例的功能模块示意图;
图7是本发明应用界面按钮显示装置第二实施例的功能模块示意图;
图8是本发明应用界面按钮显示装置第三实施例的功能模块示意图。
为了使本发明的技术方案更加清楚、明了,下面将结合附图作进一步详述。
具体实施方式
应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
如图1所示,本发明第一实施例提出一种应用界面按钮显示方法,包括:
步骤S101,在应用界面上接收外部触发的按钮显示指令;
步骤S102,根据所述按钮显示指令,获取预设的可伸缩的按钮集合容器;
本实施例应用界面可以为各种终端应用界面,尤其指移动终端等屏幕较小的终端上的应用界面。
由于终端屏幕尺寸有限,作为人机交互的控件,应用界面中显示的各种按钮,其数量如果较多,则会影响应用中主要内容的展示。
鉴于此,本发明实施例将各按钮集合放置在一个可伸缩的容器(即本实施例所指按钮集合容器)内,需要使用按钮时,展开该按钮集合容器,按钮可见、可点击,不需要使用按钮时,收缩该按钮集合容器,按钮不可见、不可点击。即按钮集合容器具有展开和折叠两种状态,按钮集合容器展开状态的形状可以参照图2a及图2b所示,按钮集合容器折叠状态的形状可以参照图2c所示。
此外,为了减少对屏幕空间的占用,本实施例设置该可伸缩的按钮集合容器在展开后的形状为弧形,比如扇形,如图2a及图2b所示。由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,对屏幕空间占用少,不易造成对应用界面上其他元素的遮挡。
具体地,当用户需要显示按钮时,可以在应用界面上触发按钮显示指令。由此,可以在应用界面上设置一专用的触发按键,如图2d中三角按键所示,当用户点击该按键后,终端会根据用户的按键指令,获取可伸缩的按钮集合容器,并可以将按钮集合容器展开如图2e所示。
步骤S103,将所述按钮集合容器以弧形区域在所述应用界面上展开,并将所述按钮集合容器中的各按钮显示在所述弧形区域。
在将按钮集合容器在应用界面上展开以显示按钮集合容器中的按钮时,具体可以采用以下方式:
将所述按钮集合容器从所述应用界面的边界处以设定的角度旋转进所述应用界面的显示区域,并在所述显示区域中以弧形区域展开。
其中,应用界面的显示区域为该应用界面显示屏幕上画布的可见的裁剪区域。以扇形按钮集合容器为例,按钮集合容器在旋转进应用界面的裁剪区域之前,处于应用界面显示屏幕上画布的裁剪区域之外,不可见,如图2a所示,M、N是初始化时放置在扇形按钮集合容器上的两个按钮控件,虚线框内区域表示在屏幕上画布的裁剪区域之外,因此扇形按钮集合容器不可见,两个按钮控件M、N不可见;在将扇形按钮集合容器旋转设定角度后,按钮集合容器在旋转进应用界面的裁剪区域,如图2b所示,扇形按钮集合容器处于裁减区域之内,可见。
上述过程中,扇形按钮集合容器在展开状态下,分布在扇形区域的按钮可以显示出来,并可以点击,扇形按钮集合容器从折叠状态到展开状态有一个过渡动画,本实施例是以旋转动画进行举例,在其他实施例中,还可以以其他动画方式来实现扇形按钮集合容器从折叠状态到展开状态的过程,在此不再详述。
此外,还可以根据需要设定:在展开动画过程中禁止按钮点击事件,当扇形按钮集合容器彻底展开后,允许进行按钮点击操作。
在显示按钮集合容器中的各按钮时,需要根据按钮在按钮集合容器中的初始放置情况而采用相应的显示过程。
其中,放置在按钮集合容器中的各按钮的位置,可以在按钮集合容器初始化时进行初始化,或者在按钮集合容器展开之前初始化。
作为一种放置方式,所述按钮集合容器中的各按钮可以在初始化时,预先排布在所述按钮集合容器中。
作为另一种放置方式,所述按钮集合容器中的各按钮还可以在初始化时,预先重叠放置在所述按钮集合容器中。
此外,按钮在初始化时,在按钮集合容器中还可以采取正立或倒立的方式放置。
对于正立放置的情形,由于初始化按钮只能以扇形按钮集合容器的初始化状态为基准,所以按钮的初始化放置位置如图2a所示,按钮集合容器旋转后展开,按钮也随着按钮集合容器一起做旋转动作,这样会导致按钮在按钮集合容器展开后与人眼的的观察角度不对应,如图2b所示,因此按钮需要做反方向的旋转,设按钮集合容器旋转的角度为α,则按钮M、N的旋转角度为-α,旋转后的按钮集合容器可以参照图2f所示,其中,按钮M、N的反方向旋转可以是以按钮矩形区域的中心自转,也可以是相对按钮集合容器上某个设定的支点旋转,比如按钮M、N之间连线的中点等,确保旋转后的按钮能够显示在设定的弧形区域。
因此,对于按钮预先排布在按钮集合容器中的情形,各按钮的显示过程如下:
将按钮集合容器中排布的各按钮按照与按钮集合容器相反的旋转方向旋转设定的角度,之后,将旋转后的各按钮显示在弧形区域。
对于按钮预先重叠放置在按钮集合容器中的情形,各按钮的显示过程如下:
将按钮集合容器中的各按钮依次展开,然后将展开后的各按钮按照与所述按钮集合容器相反的旋转方向旋转所述设定的角度;将旋转后的各按钮显示在弧形区域。
进一步地,为了使按钮的分布与按钮集合容器的弧形呈现相同的走势,而不是成水平状态放置,在将旋转后的各按钮显示在弧形区域时,还需要对各按钮进行旋转角度修正,使各按钮在弧形区域的分布与该弧形区域的弧形走势一致;之后,再将角度修正后的各按钮显示在所述弧形区域。
其中,旋转角度的修正原理如下:
如图2g所示,定义L2为从扇形圆心通过按钮M矩形区域的中心引出的直线与圆弧交点处的切线,L1是与该切线L2平行的直线,且该直线L1通过按钮M矩形区域的中心,β角是L1与通过按钮M矩形区域中心的水平直线的夹角,对按钮M进行逆时针旋转β度,可使M的中心水平轴线与圆弧的切线L2平行,按钮N则需要顺时针旋转β度,其中,β与按钮在扇形区域的分布有关。
由此,通过对按钮进行旋转角度修正,可实现按钮的分布与扇形的弧呈现相同的走势,而不是成水平状态放置,以提高按钮的显示效果。
此外,需要说明的是,作为一种实施方式,还可以将上述按钮集合容器在所述应用界面上以透明状展开,即不显示按钮集合容器的底色,而仅仅显示按钮集合容器中的各按钮。
此外,作为一种实施方式,还可以将所述按钮集合容器以弧形区域在所述应用界面的一角展开,如图2e所示,以减少对屏幕空间的占用。
本实施例通过上述方案,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。
如图3所示,本发明第二实施例提出一种应用界面按钮显示方法,在上述第一实施例的基础上,在上述步骤S103之后,还可以包括:
步骤S104,接收外部触发对所述弧形区域上按钮集合容器内的按钮的点击指令;
步骤S105,根据所述按钮点击指令进行相应按钮的业务操作。
本实施例与上述第一实施例的区别在于,本实施例还包括用户点击弧形区域内的按钮的方案。
可以根据需要设定:在展开动画过程中禁止按钮点击事件,当扇形按钮集合容器彻底展开后,允许进行按钮点击操作。用户可以根据需要,点击相应的按钮进行相应的业务操作。
本实施例通过上述方案,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。当按钮集合容器展开后,用户可以根据需要在弧形区域点击操作相应的按钮进行业务操作,从而满足了用户的需求,而且为用户提供了方便。
如图4所示,本发明第三实施例提出一种应用界面按钮显示方法,在上述第二实施例的基础上,在上述步骤S105之后,还包括:
步骤S106,接收外部触发的按钮收起指令;
步骤S107,根据所述按钮收起指令,将所述按钮集合容器从所述弧形区域的一端向另一端折叠收起至所述应用界面的显示区域之外。
本实施例与上述第一实施例的区别在于,本实施例还包括折叠按钮集合容器的方案。
具体地,当用户不需要使用应用界面上的按钮时,可以将按钮集合容器折叠收起,以减少对屏幕空间的占用。
其中,按钮集合容器在收起时,可以采用与展开时相反的方向旋转进入屏幕画布的不可见区域,即裁剪区域之外。按钮集合容器在折叠状态下收缩起来,扇形区域的边界图片重合,由于扇形区域图片和按钮旋转后转出裁减区域,屏幕上只剩下边界的图片,超过上部边界的部分则不会显示出来,如图5所示,超过上部边界的部分则需要裁剪而不会被显示。
本实施例通过上述方案,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来,并可以进行点击操作;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。
需要说明的是,上述各实施例是以弧形按钮集合容器进行举例说明,在其他实施例中,还可以采用横向和纵向伸缩的按钮集合容器来实现按钮的展现和收起,其中,横向和纵向展开后的跨度往往比较大,对于屏幕元素比较多的游戏应用来说,这种情况相比弧形按钮集合容器来说,较易遮挡其它的界面元素,而采用弧形伸缩容器,将有效的减少横向和纵向的展开跨度,以扇形伸缩容器为例,按钮均匀分布在扇形区域内,需要的时候将扇形装置展开,按钮显示出来,不需要的时候将扇形伸缩容器收缩起来,按钮不可见,从而大大减少了占用屏幕空间。
如图6所示,本发明第一实施例提出一种应用界面按钮显示装置,包括:接收模块201、获取模块202以及展开显示模块203,其中:
接收模块201,用于在应用界面上接收外部触发的按钮显示指令;
获取模块202,用于根据所述按钮显示指令,获取预设的可伸缩的按钮集合容器;
展开显示模块203,用于将所述按钮集合容器以弧形区域在所述应用界面上展开,并将所述按钮集合容器中的各按钮显示在所述弧形区域。
本实施例应用界面可以为各种终端应用界面,尤其指移动终端等屏幕较小的终端上的应用界面。
由于终端屏幕尺寸有限,作为人机交互的控件,应用界面中显示的各种按钮,其数量如果较多,则会影响应用中主要内容的展示。
鉴于此,本发明实施例将各按钮集合放置在一个可伸缩的容器(即本实施例所指按钮集合容器)内,需要使用按钮时,展开该按钮集合容器,按钮可见、可点击,不需要使用按钮时,收缩该按钮集合容器,按钮不可见、不可点击。即按钮集合容器具有展开和折叠两种状态,按钮集合容器展开状态的形状可以参照图2a及图2b所示,按钮集合容器折叠状态的形状可以参照图2c所示。
此外,为了减少对屏幕空间的占用,本实施例设置该可伸缩的按钮集合容器在展开后的形状为弧形,比如扇形,如图2a及图2b所示。由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,对屏幕空间占用少,不易造成对应用界面上其他元素的遮挡。
具体地,当用户需要显示按钮时,可以在应用界面上触发按钮显示指令。由此,可以在应用界面上设置一专用的触发按键,如图2d中三角按键所示,当用户点击该按键后,终端通过接收模块201在应用界面上接收外部触发的按钮显示指令,获取模块202会根据用户的按键指令,获取可伸缩的按钮集合容器,并通过展开显示模块203可以将按钮集合容器展开如图2e所示。
在将按钮集合容器在应用界面上展开以显示按钮集合容器中的按钮时,具体可以采用以下方式:
将所述按钮集合容器从所述应用界面的边界处以设定的角度旋转进所述应用界面的显示区域,并在所述显示区域中以弧形区域展开。
其中,应用界面的显示区域为该应用界面显示屏幕上画布的可见的裁剪区域。以扇形按钮集合容器为例,按钮集合容器在旋转进应用界面的裁剪区域之前,处于应用界面显示屏幕上画布的裁剪区域之外,不可见,如图2a所示,M、N是初始化时放置在扇形按钮集合容器上的两个按钮控件,虚线框内区域表示在屏幕上画布的裁剪区域之外,因此扇形按钮集合容器不可见,两个按钮控件M、N不可见;在将扇形按钮集合容器旋转设定角度后,按钮集合容器在旋转进应用界面的裁剪区域,如图2b所示,扇形按钮集合容器处于裁减区域之内,可见。
上述过程中,扇形按钮集合容器在展开状态下,分布在扇形区域的按钮可以显示出来,并可以点击,扇形按钮集合容器从折叠状态到展开状态有一个过渡动画,本实施例是以旋转动画进行举例,在其他实施例中,还可以以其他动画方式来实现扇形按钮集合容器从折叠状态到展开状态的过程,在此不再详述。
此外,还可以根据需要设定:在展开动画过程中禁止按钮点击事件,当扇形按钮集合容器彻底展开后,允许进行按钮点击操作。
在显示按钮集合容器中的各按钮时,需要根据按钮在按钮集合容器中的初始放置情况而采用相应的显示过程。
其中,放置在按钮集合容器中的各按钮的位置,可以在按钮集合容器初始化时进行初始化,或者在按钮集合容器展开之前初始化。
作为一种放置方式,所述按钮集合容器中的各按钮可以在初始化时,预先排布在所述按钮集合容器中。
作为另一种放置方式,所述按钮集合容器中的各按钮还可以在初始化时,预先重叠放置在所述按钮集合容器中。
此外,按钮在初始化时,在按钮集合容器中还可以采取正立或倒立的方式放置。
对于正立放置的情形,由于初始化按钮只能以扇形按钮集合容器的初始化状态为基准,所以按钮的初始化放置位置如图2a所示,按钮集合容器旋转后展开,按钮也随着按钮集合容器一起做旋转动作,这样会导致按钮在按钮集合容器展开后与人眼的的观察角度不对应,如图2b所示,因此按钮需要做反方向的旋转,设按钮集合容器旋转的角度为α,则按钮M、N的旋转角度为-α,旋转后的按钮集合容器可以参照图2f所示。其中,按钮M、N的反方向旋转可以是以按钮矩形区域的中心自转,也可以是相对按钮集合容器上某个设定的支点旋转,比如按钮M、N之间连线的中点等,确保旋转后的按钮能够显示在设定的弧形区域。
因此,对于按钮预先排布在按钮集合容器中的情形,各按钮的显示过程如下:
将按钮集合容器中排布的各按钮按照与按钮集合容器相反的旋转方向旋转设定的角度,之后,将旋转后的各按钮显示在弧形区域。
对于按钮预先重叠放置在按钮集合容器中的情形,各按钮的显示过程如下:
将按钮集合容器中的各按钮依次展开,然后将展开后的各按钮按照与所述按钮集合容器相反的旋转方向旋转所述设定的角度;将旋转后的各按钮显示在弧形区域。
进一步地,为了使按钮的分布与按钮集合容器的弧形呈现相同的走势,而不是成水平状态放置,在将旋转后的各按钮显示在弧形区域时,还需要对各按钮进行旋转角度修正,使各按钮在弧形区域的分布与该弧形区域的弧形走势一致;之后,再将角度修正后的各按钮显示在所述弧形区域。
其中,旋转角度的修正原理如下:
如图2g所示,定义L2为从扇形圆心通过按钮M矩形区域的中心引出的直线与圆弧交点处的切线,L1是与该切线L2平行的直线,且该直线L1通过按钮M矩形区域的中心,β角是L1与通过按钮M矩形区域中心的水平直线的夹角,对按钮M进行逆时针旋转β度,可使M的中心水平轴线与圆弧的切线L2平行,按钮N则需要顺时针旋转β度,其中,β与按钮在扇形区域的分布有关。
由此,通过对按钮进行旋转角度修正,可实现按钮的分布与扇形的弧呈现相同的走势,而不是成水平状态放置,以提高按钮的显示效果。
此外,需要说明的是,作为一种实施方式,还可以将上述按钮集合容器在所述应用界面上以透明状展开,即不显示按钮集合容器的底色,而仅仅显示按钮集合容器中的各按钮。
此外,作为一种实施方式,还可以将所述按钮集合容器以弧形区域在所述应用界面的一角展开,如图2e所示,以减少对屏幕空间的占用。
本实施例通过上述方案,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。
如图7所示,本发明第二实施例还提出一种应用界面按钮显示装置,在上述图6所示的第一实施例的基础上,还可以包括:业务操作模块204;
在本实施例中,所述接收模块201还用于接收外部触发对所述弧形区域上按钮集合容器内的按钮的点击指令;
所述业务操作模块204用于根据所述按钮点击指令进行相应按钮的业务操作。
本实施例与上述第一实施例的区别在于,本实施例还包括用户点击弧形区域内的按钮的方案。
可以根据需要设定:在展开动画过程中禁止按钮点击事件,当扇形按钮集合容器彻底展开后,允许进行按钮点击操作。用户可以根据需要,点击相应的按钮进行相应的业务操作。
本实施例通过上述方案,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。当按钮集合容器展开后,用户可以根据需要在弧形区域点击操作相应的按钮进行业务操作,从而满足了用户的需求,而且为用户提供了方便。
如图8所示,本发明第三实施例还提出一种应用界面按钮显示装置,在上述图7所示的第二实施例的基础上,还可以包括:折叠收起模块205;
在本实施例中,所述接收模块201还用于接收外部触发的按钮收起指令;
所述折叠收起模块205用于根据所述按钮收起指令,将所述按钮集合容器从所述弧形区域的一端向另一端折叠收起至所述应用界面的显示区域之外。
本实施例与上述第一实施例的区别在于,本实施例还包括折叠按钮集合容器的方案。
具体地,当用户不需要使用应用界面上的按钮时,可以将按钮集合容器折叠收起,以减少对屏幕空间的占用。
其中,按钮集合容器在收起时,可以采用与展开时相反的方向旋转进入屏幕画布的不可见区域,即裁剪区域之外。按钮集合容器在折叠状态下收缩起来,扇形区域的边界图片重合,由于扇形区域图片和按钮旋转后转出裁减区域,屏幕上只剩下边界的图片,超过上部边界的部分则不会显示出来,如图5所示,超过上部边界的部分则需要裁剪而不会被显示。
本实施例通过上述方案,通过将按钮集合容器以弧形区域在应用界面上展开,并使各按钮分布在一弧形区域显示,当需要使用按钮的时候展开按钮集合容器,按钮呈现出来,并可以进行点击操作;当不需要使用按钮时,则可以将按钮集合容器折叠收起,使按钮不可见,由于弧形区域相对条形区域来说,可有效减少横向和纵向的展开跨度,不易造成应用界面上其他元素被遮挡的现象,而且减少了对屏幕空间的占用。
需要说明的是,上述各实施例是以弧形按钮集合容器进行举例说明,在其他实施例中,还可以采用横向和纵向伸缩的按钮集合容器来实现按钮的展现和收起,其中,横向和纵向展开后的跨度往往比较大,对于屏幕元素比较多的游戏应用来说,这种情况相比弧形按钮集合容器来说,较易遮挡其它的界面元素,而采用弧形伸缩容器,将有效的减少横向和纵向的展开跨度,以扇形伸缩容器为例,按钮均匀分布在扇形区域内,需要的时候将扇形装置展开,按钮显示出来,不需要的时候将扇形伸缩容器收缩起来,按钮不可见,从而大大减少了占用屏幕空间。
还需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
以上所述仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或流程变换,或直接或间接运用在其它相关的技术领域,均同理包括在本发明的专利保护范围内。

Claims (16)

1.一种应用界面按钮显示方法,其特征在于,包括:
在应用界面上接收外部触发的按钮显示指令;
根据所述按钮显示指令,获取预设的可伸缩的按钮集合容器;所述按钮集合容器包括展开状态和折叠状态;其中,所述折叠状态下的所述按钮集合容器,在所述应用界面显示屏幕上画布的可见的裁剪区域显示所述按钮集合容器的弧形区域的边界图片;
从折叠状态到展开状态,将位于应用界面屏幕上画布的不可见的裁剪区域之外的所述按钮集合容器的弧形区域的图片和按钮,从所述应用界面的边界处以设定的角度旋转进所述应用界面的可见的裁剪区域,并在所述裁剪区域中以弧形区域展开,将所述按钮集合容器中的各按钮显示在所述弧形区域;其中,在展开动画过程中禁止按钮点击事件,当按钮集合容器彻底展开后,允许进行按钮点击操作;
从展开状态到折叠状态,将所述弧形区域的图片和按钮旋转进入所述屏幕画布的不可见的裁剪区域之外,并将所述按钮集合容器的弧形区域的边界图片重合,在所述应用界面显示屏幕上画布的可见的裁剪区域显示所述边界图片。
2.根据权利要求1所述的方法,其特征在于,所述按钮集合容器中的各按钮预先排布在所述按钮集合容器中,所述将按钮集合容器中的各按钮显示在所述弧形区域的步骤包括:
将所述按钮集合容器中排布的各按钮按照与所述按钮集合容器相反的旋转方向旋转所述设定的角度;
将旋转后的各按钮显示在所述弧形区域。
3.根据权利要求1所述的方法,其特征在于,所述按钮集合容器中的各按钮预先重叠放置在所述按钮集合容器中,所述将按钮集合容器中的各按钮显示在所述弧形区域的步骤包括:
将所述按钮集合容器中的各按钮依次展开;
将展开后的各按钮按照与所述按钮集合容器相反的旋转方向旋转所述设定的角度;将旋转后的各按钮显示在所述弧形区域。
4.根据权利要求2或3所述的方法,其特征在于,所述将旋转后的各按钮显示在所述弧形区域的步骤中还包括:
对各按钮进行旋转角度修正,使各按钮在所述弧形区域的分布与该弧形区域的弧形走势一致;
将角度修正后的各按钮显示在所述弧形区域。
5.根据权利要求1所述的方法,其特征在于,还包括:
接收外部触发对所述弧形区域上按钮集合容器内的按钮的点击指令;
根据所述按钮点击指令进行相应按钮的业务操作。
6.根据权利要求1所述的方法,其特征在于,还包括:
将所述按钮集合容器在所述应用界面上以透明状展开。
7.根据权利要求1所述的方法,其特征在于,还包括:
将所述按钮集合容器以弧形区域在所述应用界面的一角展开。
8.根据权利要求1所述的方法,其特征在于,所述弧形区域为扇形。
9.一种应用界面按钮显示装置,其特征在于,包括:
接收模块,用于在应用界面上接收外部触发的按钮显示指令;
获取模块,用于根据所述按钮显示指令,获取预设的可伸缩的按钮集合容器;所述按钮集合容器包括展开状态和折叠状态;其中,所述折叠状态下的所述按钮集合容器,在所述应用界面显示屏幕上画布的可见的裁剪区域显示弧形区域的边界图片;
展开显示模块,用于从折叠状态到展开状态,将位于应用界面屏幕上画布的不可见的裁剪区域之外的所述按钮集合容器的弧形区域的图片和按钮,从所述应用界面的边界处以设定的角度旋转进所述应用界面的可见的裁剪区域,并在所述裁剪区域中以弧形区域展开,将所述按钮集合容器中的各按钮显示在所述弧形区域;其中,在展开动画过程中禁止按钮点击事件,当按钮集合容器彻底展开后,允许进行按钮点击操作;
折叠收起模块,用于从展开状态到折叠状态,将所述弧形区域的图片和按钮旋转进入所述屏幕画布的不可见的裁剪区域之外,并将所述按钮集合容器的弧形区域的边界图片重合,在所述应用界面显示屏幕上画布的可见的裁剪区域显示所述边界图片。
10.根据权利要求9所述的装置,其特征在于,所述按钮集合容器中的各按钮预先排布在所述按钮集合容器中;
所述展开显示模块,还用于将所述按钮集合容器中排布的各按钮按照与所述按钮集合容器相反的旋转方向旋转所述设定的角度;将旋转后的各按钮显示在所述弧形区域。
11.根据权利要求9所述的装置,其特征在于,所述按钮集合容器中的各按钮预先重叠放置在所述按钮集合容器中;
所述展开显示模块,还用于将所述按钮集合容器中的各按钮依次展开;将展开后的各按钮按照与所述按钮集合容器相反的旋转方向旋转所述设定的角度;将旋转后的各按钮显示在所述弧形区域。
12.根据权利要求10或11所述的装置,其特征在于,
所述展开显示模块,还用于对各按钮进行旋转角度修正,使各按钮在所述弧形区域的分布与该弧形区域的弧形走势一致;将角度修正后的各按钮显示在所述弧形区域。
13.根据权利要求9所述的装置,其特征在于,还包括:业务操作模块;
所述接收模块,还用于接收外部触发对所述弧形区域上按钮集合容器内的按钮的点击指令;
所述业务操作模块,用于根据所述按钮点击指令进行相应按钮的业务操作。
14.根据权利要求9所述的装置,其特征在于,
所述展开显示模块,还用于将所述按钮集合容器在所述应用界面上以透明状展开。
15.根据权利要求9所述的装置,其特征在于,
所述展开显示模块,还用于将所述按钮集合容器以弧形区域在所述应用界面的一角展开。
16.一种存储介质,其特征在于,所述存储介质存储有可执行指令,所述可执行指令被处理器执行时,实现权利要求1至8任一项所述的应用界面按钮显示方法。
CN201410028424.9A 2014-01-21 2014-01-21 应用界面按钮显示方法及装置 Active CN104793876B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201410028424.9A CN104793876B (zh) 2014-01-21 2014-01-21 应用界面按钮显示方法及装置
PCT/CN2015/071174 WO2015110001A1 (en) 2014-01-21 2015-01-21 Method and apparatus for displaying application interface button

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410028424.9A CN104793876B (zh) 2014-01-21 2014-01-21 应用界面按钮显示方法及装置

Publications (2)

Publication Number Publication Date
CN104793876A CN104793876A (zh) 2015-07-22
CN104793876B true CN104793876B (zh) 2020-05-12

Family

ID=53558704

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410028424.9A Active CN104793876B (zh) 2014-01-21 2014-01-21 应用界面按钮显示方法及装置

Country Status (2)

Country Link
CN (1) CN104793876B (zh)
WO (1) WO2015110001A1 (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105611374B (zh) * 2015-12-23 2019-09-17 北京奇虎科技有限公司 视频播放控制方法和装置
CN107977126A (zh) * 2016-10-25 2018-05-01 阿里巴巴集团控股有限公司 一种功能选项的展现方法、装置、设备和展现界面
CN107734164A (zh) * 2017-10-10 2018-02-23 广东欧珀移动通信有限公司 参数设置窗口处理方法和装置
CN109343773B (zh) * 2018-10-11 2021-07-09 广州要玩娱乐网络技术股份有限公司 便携式触控设备的操控方法、装置、存储介质和终端

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102402375A (zh) * 2010-09-15 2012-04-04 联想(北京)有限公司 显示终端和显示方法
CN102591577A (zh) * 2011-12-28 2012-07-18 华为技术有限公司 一种弧形菜单索引显示方法及相关装置
CN102799347A (zh) * 2012-06-05 2012-11-28 北京小米科技有限责任公司 应用于触屏设备的用户界面交互方法、装置及触屏设备
CN103226446A (zh) * 2013-05-16 2013-07-31 北京奇虎科技有限公司 用于移动设备的用户界面的事件响应方法及移动设备
CN103257805A (zh) * 2012-02-16 2013-08-21 腾讯科技(深圳)有限公司 快捷面板提供方法及装置

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103365547A (zh) * 2012-03-28 2013-10-23 喜讯无限(北京)科技有限责任公司 军刀式菜单
CN103092508A (zh) * 2012-12-07 2013-05-08 北京傲游天下科技有限公司 一种触控界面的实现方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102402375A (zh) * 2010-09-15 2012-04-04 联想(北京)有限公司 显示终端和显示方法
CN102591577A (zh) * 2011-12-28 2012-07-18 华为技术有限公司 一种弧形菜单索引显示方法及相关装置
CN103257805A (zh) * 2012-02-16 2013-08-21 腾讯科技(深圳)有限公司 快捷面板提供方法及装置
CN102799347A (zh) * 2012-06-05 2012-11-28 北京小米科技有限责任公司 应用于触屏设备的用户界面交互方法、装置及触屏设备
CN103226446A (zh) * 2013-05-16 2013-07-31 北京奇虎科技有限公司 用于移动设备的用户界面的事件响应方法及移动设备

Also Published As

Publication number Publication date
CN104793876A (zh) 2015-07-22
WO2015110001A1 (en) 2015-07-30

Similar Documents

Publication Publication Date Title
CN107728901B (zh) 界面显示方法、装置及终端
CN104793876B (zh) 应用界面按钮显示方法及装置
CN107844228B (zh) 消息显示方法、装置及终端
EP3761161B1 (en) Input method interface display method and device, and terminal and storage medium
KR102107134B1 (ko) 플렉서블 디스플레이에서 목록을 배열하는 방법 및 그 전자 장치
US20110047491A1 (en) User interfacinig method using touch screen in mobile communication terminal
CN108196807B (zh) 可折叠显示屏的显示调整方法及显示装置
CN107092421B (zh) 显示应用的控件的方法及装置
US20150187095A1 (en) Method and device for implementing page mask
CN106610821B (zh) 一种在终端上显示图片的方法和终端
CN111265865A (zh) 游戏界面显示方法、装置、终端设备及存储介质
US9529696B2 (en) Screen bounds for view debugging
TWI599944B (zh) Touch Screen Display Page Processing Method, Device and Electronic Device
WO2012017339A1 (en) Advanced scrolling
EP2332041A2 (en) System and method for window resizing
EP3108348A1 (en) Graphical user interface with unfolding panel
CN111435277B (zh) 显示内容的方法、装置、终端及存储介质
CN114924824B (zh) 可视对象的模糊方法、渲染方法及计算设备
WO2015172553A1 (zh) 移动终端和可穿戴设备
CN115202773A (zh) 应用界面的显示方法、装置、终端及存储介质
US20120198381A1 (en) Graphical user interface presenting a unified view of a main document image and thumbnail images
JPWO2008139551A1 (ja) 情報提示装置及び情報提示方法
EP3296859A1 (en) Image output control method, image output control program, and display device
CN111448534B (zh) 终端设备及其图形用户界面以及图形用户界面的控制方法
CN112181257B (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