一种选中界面元素的图案切换方法及装置与流程

本发明涉及ui界面技术领域，尤其涉及一种选中界面元素的图案切换方法及装置。

背景技术：

在目前很多app界面展示中，tab页模块切换后icon的选中状态都只是颜色的变化很少涉及到图形的变化，使得模块切换不够明显且没有新意。

一般的展现形式是当tab页模块切换后icon的选中状态简单的颜色变化，辅助文字继续保留且和icon同时变化颜色。一般展现形式没有用图形变化再加以区别模块切换后icon的表现形式。使得app界面在反光强烈的环境中或者是手机颜色显示不是很清晰的情况下比较难识别出是否切换了模块。具体请参见图1a及图1b，图1a为现有技术的“首页”未被选中的状态示意图；图1b为现有技术的“首页”被选中的状态示意图，界面元素在选中与被选中的状态下变化较小，难以识别出是否切换了模块。

技术实现要素：

本发明的目的在于提供一种选中界面元素的图案切换方法及装置，解决现有技术的界面元素在选中与被选中的状态下变化较小，难以识别出是否切换了模块的问题。

本发明的技术方案实现如下：

一方面，本发明提供一种选中界面元素的图案切换方法，所述界面中设置有多个界面元素，每个所述界面元素均包括图标及文字，所述图案切换方法包括：

当多个界面元素中的一至多个被选中时，改变被选中的界面元素的图标的大小及颜色；

改变被选中的界面元素的文字的透明度。

在本发明所述的图案切换方法中，所述改变被选中的界面元素的图标的大小及颜色，包括：

未被选中的界面元素的图标的大小及颜色与原来保持一致；

获取被选中的界面元素的中心点，依据所述中心点控制所述界面元素的图标变大至预设尺寸；

改变所述界面元素的图标的颜色。

在本发明所述的图案切换方法中，所述获取被选中的界面元素的中心点，依据所述中心点控制所述界面元素变大至预设尺寸，还包括：

在所述中心点处生成一图形元素。

在本发明所述的图案切换方法中，所述改变被选中的界面元素的文字的透明度，包括：

未被选中的界面元素的文字的颜色及字号大小与原来保持一致并降低透明度；

降低被选中的界面元素的文字的透明度。

在本发明所述的图案切换方法中，所述降低被选中的界面元素的文字的透明度中，将被选中的界面元素的文字的透明度由100％降至0％。

另一方面，提供一种选中界面元素的图案切换装置，其中存储有多条指令，所述指令适于由处理器加载并执行，包括：

当多个界面元素中的一至多个被选中时，改变被选中的界面元素的图标的大小及颜色；

改变被选中的界面元素的文字的透明度。

在本发明所述的图案切换装置中，所述改变被选中的界面元素的图标的大小及颜色，包括：

未被选中的界面元素的图标的大小及颜色与原来保持一致；

获取被选中的界面元素的中心点，依据所述中心点控制所述界面元素的图标变大至预设尺寸；

改变所述界面元素的图标的颜色。

在本发明所述的图案切换装置中，所述获取被选中的界面元素的中心点，依据所述中心点控制所述界面元素变大至预设尺寸，还包括：

在所述中心点处生成一图形元素。

在本发明所述的图案切换装置中，所述改变被选中的界面元素的文字的透明度，包括：

未被选中的界面元素的文字的颜色及字号大小与原来保持一致并降低透明度；

降低被选中的界面元素的文字的透明度。

在本发明所述的图案切换装置中，所述降低被选中的界面元素的文字的透明度中，将被选中的界面元素的文字的透明度由100％降至0％。

因此，本发明的有益效果是，使得界面元素被选中时产生视觉冲突，提升网页模块之前切换的趣味性，是app界面更具创意，提升了用户体验。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1a为现有技术的“首页”未被选中的状态示意图；

图1b为现有技术的“首页”被选中的状态示意图；

图2为本发明一实施例提供的一种选中界面元素的图案切换方法的流程图；

图3a为本发明一实施例提供的“位置”被选中的状态示意图；

图3b为本发明一实施例提供的“首页”被选中的状态示意图。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，以下将对照附图详细说明本发明的具体实施方式。应当理解，以下说明仅为本发明实施例的具体阐述，不应以此限制本发明的保护范围。

参见图2，图2为本发明一实施例提供的一种选中界面元素的图案切换方法的流程图，该方法主要通过计算机程序实现，其包括步骤s1-s2：

s1、当多个界面元素中的一至多个被选中时，改变被选中的界面元素的图标的大小及颜色；步骤s1包括子步骤s11-s13：

s11、未被选中的界面元素的图标的大小及颜色与原来保持一致；

s12、获取被选中的界面元素的中心点，依据所述中心点控制所述界面元素的图标变大至预设尺寸；该步骤还包括，在所述中心点处生成一图形元素。如图3a及图3b，图3a为本发明一实施例提供的“位置”被选中的状态示意图，图3b为本发明一实施例提供的“首页”被选中的状态示意图，从左到右的界面元素依次为“首页”、“位置”、“服务”及“我的”，圆形元素即为图标内的心形图案。

s13、改变所述界面元素的图标的颜色，同时改变所述图形元素的颜色。

一般的，在app界面展示中，tab页模块切换后原的icon(即图标)变大，同时对应的辅助文字消失。且变大后的icon中心会出现同一个图形元素。且未选中状态下所有模块icon颜色和大小都要保持一致，选中状态下该icon和其它icon颜色有比较明显的视觉区别。界面元素的图标以中心点为中心由小变大的同时中间出现同一种图形元素(这一图形元素必须和整个app的风格保持一致)。

s2、改变被选中的界面元素的文字的透明度。步骤s2包括子步骤s21-s22：

s21、未被选中的界面元素的文字的颜色及字号大小与原来保持一致并降低透明度；即未选中状态下所有辅助文字的颜色和字号大小保持一致，优选的，未被选中的界面元素的文字在视觉上比被选中的文字降低一个调明度。

s22、降低被选中的界面元素的文字的透明度，优选的，将被选中的界面元素的文字的透明度由100％降至0％。被选中的文字在原位大小保持不变。

本发明还提供一种选中界面元素的图案切换装置，其中存储有多条指令，所述指令适于由处理器加载并执行，从而实现上述方法。

本文提供了实施例的各种操作。在一个实施例中，所述的一个或操作可以构成一个或计算机可读介质上存储的计算机可读指令，其在被电子设备执行时将使得计算设备执行所述操作。描述一些或所有操作的顺序不应当被解释为暗示这些操作必需是顺序相关的。本领域技术人员将理解具有本说明书的益处的可替代的排序。而且，应当理解，不是所有操作必需在本文所提供的每个实施例中存在。

而且，本文所使用的词语“优选的”意指用作实例、示例或例证。奉文描述为“优选的”任意方面或设计不必被解释为比其他方面或设计更有利。相反，词语“优选的”的使用旨在以具体方式提出概念。如本申请中所使用的术语“或”旨在意指包含的“或”而非排除的“或”。即，除非另外指定或从上下文中清楚，“x使用a或b”意指自然包括排列的任意一个。即，如果x使用a；x使用b；或x使用a和b二者，则“x使用a或b”在前述任一示例中得到满足。

而且，尽管已经相对于一个或实现方式示出并描述了本公开，但是本领域技术人员基于对本说明书和附图的阅读和理解将会想到等价变型和修改。本公开包括所有这样的修改和变型，并且仅由所附权利要求的范围限制。特别地关于由上述组件(例如元件、资源等)执行的各种功能，用于描述这样的组件的术语旨在对应于执行所述组件的指定功能(例如其在功能上是等价的)的任意组件(除非另外指示)，即使在结构上与执行本文所示的本公开的示范性实现方式中的功能的公开结构不等同。此外，尽管本公开的特定特征已经相对于若干实现方式中的仅一个被公开，但是这种特征可以与如可以对给定或特定应用而言是期望和有利的其他实现方式的一个或其他特征组合。而且，就术语“包括”、“具有”、“含有”或其变形被用在具体实施方式或权利要求中而言，这样的术语旨在以与术语”包含”相似的方式包括。

本发明实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。上述提到的存储介质可以是只读存储器，磁盘或光盘等。上述的各装置或系统，可以执行相应方法实施例中的方法。

综上所述，虽然本发明已以优选实施例揭露如上，但上述优选实施例并非用以限制本发明，本领域的普通技术人员，在不脱离本发明的精神和范围内，均可作各种更动与润饰，因此本发明的保护范围以权利要求界定的范围为准。