CN103294435A - 基于移动终端的界面显示方法及系统 - Google Patents

Abstract

本发明提供了一种基于移动终端的界面显示方法及系统，其中的方法包括：根据移动终端中的陀螺仪与地平线的相对位置状态确定移动终端的水平参数；然后根据水平参数和界面元素确定质感元素层在水平参数下的质感元素和质感元素状态，根据界面元素和水平参数下的质感元素状态对移动终端的界面进行渲染并显示渲染后的界面。通过本发明能够根据用户对移动终端的软件或者移动终端本身的操作使移动终端的界面产生不同的光影效果，实现移动终端界面的视觉显示效果“实体拟物化”，从而使用户获得实物般的视觉体验。

Description

基于移动终端的界面显示方法及系统

技术领域

本发明涉及移动通信技术领域，更为具体地，涉及一种基于移动终端的界面显示方法及系统。

背景技术

随着Windows Vista系统的问世，“玻璃”效果被人们广泛认知并开始流行。由于“玻璃”效果具有半透明、有质感、干净清爽和简约的风格，因此目前在很多的软件中都可以看到这种“玻璃”效果。

人们之所以能看到软件的这种“玻璃”效果，主要是在软件中使用了一些有质感的元素作为软件界面，例如采用玻璃、金属和纸张等这些有质感的元素作为软件界面来提高软件的视觉效果。产生这种“玻璃”效果的原因是由于光从不同的角度照射到材质上，材质的表面就会产生不同的光晕效果。也就是说光从不同的角度照射到这些有质感的元素上，使这些有质感的元素产生了不同的光晕效果，因此软件界面也就产生了不同的光影效果，人们在使用软件时也就看到了这种“玻璃”效果。

但是，目前这类“玻璃”效果的显示都只是实现了一部分，并没有完善“实体拟物化”。在现有的众多软件界面中，由于其软件界面材质表面产生的光晕效果都是固定的，因此不管用户如何操作软件或者移动终端，其移动终端界面产生的固定模式的视觉效果都会大大降低用户的视觉体验。

发明内容

鉴于上述问题，本发明的目的是提供一种基于移动终端的界面显示方法及系统，根据用户对移动终端的软件或者移动终端本身的操作使移动终端界面在日常漫反射光源下产生不同的光影效果，以实现移动终端界面的视觉显示效果“实体拟物化”，从而使用户获得实物般的视觉体验。

根据本发明的一个方面，提供一种基于移动终端的界面显示方法，包括：

根据移动终端中的陀螺仪与地平线的相对位置确定所述移动终端的水平参数；

根据所述水平参数和所述移动终端界面元素层的界面元素，确定与所述界面元素相对应的质感元素层在所述水平参数下的质感元素和质感元素状态，所述质感元素为光照射到所述界面元素上反射出的光晕；

根据所述界面元素和所述水平参数下的质感元素状态对所述移动终端的界面进行渲染，其中，所述质感元素的渲染覆盖在所述界面元素的渲染效果上；

显示渲染后的界面。

其中，在根据移动终端中的陀螺仪与地平线的相对位置确定所述移动终端水平参数的过程中：当陀螺仪与地平线的相对位置平行时，移动终端的水平参数为陀螺仪平行时的初始值；当陀螺仪与地平线的相对位置不平行时，移动终端的水平参数为陀螺仪偏移的角度值。

其中，在确定与界面元素相对应的质感元素层在水平参数下的质感元素和质感元素状态的过程中，通过实时矢量计算或者直接的数据调用确定质感元素层在水平参数下的质感元素和质感元素状态。

另一方面，本发明还提供一种基于移动终端的界面显示系统，包括：

水平参数确定单元，用于根据移动终端中的陀螺仪与地平线的相对位置确定移动终端的水平参数；

界面显示索引库，用于存储与移动终端界面显示的界面元素和与界面元素相对应的质感元素层在水平参数下的质感元素和质感元素状态，质感元素为光照射到界面元素上反射出的光晕；

质感元素层确定单元，根据水平参数和移动终端界面元素层的界面元素，在界面显示索引库中确定与界面元素相对应的质感元素层在水平参数下的质感元素和质感元素状态；

渲染单元，用于根据界面元素和水平参数下的质感元素状态对移动终端的界面进行渲染，其中，质感元素的渲染覆盖在界面元素的渲染效果上；

显示单元，用于显示渲染后的界面。

利用上述根据本发明的基于移动终端的界面显示方法及系统，能够根据用户对移动终端的软件或者移动终端本身的操作使移动终端的界面产生不同的光影效果，实现移动终端界面的视觉显示效果“实体拟物化”，从而使用户获得实物般的视觉体验。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1为根据本发明实施例的基于移动终端的界面显示方法流程示意图；

图2为根据本发明实施例的基于移动终端的界面显示系统方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

以下将结合附图对本发明的具体实施例进行详细描述。

针对前述现有技术中的移动终端界面产生的视觉效果都是固定模式、无法提升用户视觉体验的问题，本发明通过陀螺仪来获取移动终端与地平线之间的夹角变化，然后根据这个夹角值来处理移动终端界面的界面元素层的元素状态，使得界面元素在移动终端界面的质感元素层显示出更真实的光晕效果。

需要说明的是，本发明中涉及的移动终端主要指拥有陀螺仪的移动终端。

图1示出了根据本发明实施例的基于移动终端的界面显示方法流程示意图。

如图1所示，本发明提供的基于移动终端的界面显示包括界面元素层的显示和界面元素层之上的质感元素层的显示，其界面显示方法包括：

S110：根据移动终端的陀螺仪与地平线的相对位置确定移动终端的水平参数；

S120：根据移动终端的水平参数和移动终端界面元素层的界面元素，确定与界面元素相对应的质感元素层在移动终端的水平参数下的质感元素和质感元素状态，其中，质感元素为光照射到界面元素上反射出的光晕；

S130：根据界面元素和移动终端的水平参数下的质感元素状态对移动终端的界面进行渲染，其中，质感元素的渲染覆盖在界面元素的渲染效果上；

S140：显示渲染后的界面。

需要说明的是，本发明所实现的移动终端界面由界面元素层和质感元素层组成，界面元素层为下面的一层，显示移动终端的界面元素，其中，界面元素层的界面元素为拟物化的元素，例如元素为玻璃元素、金属元素或者木头元素等；而质感元素层位于界面元素层之上，主要用于显示界面元素在光照下产生的质感元素，其中，质感元素为光照射到界面元素上反射出的光晕，比如光照射到玻璃元素、金属元素或者木头元素上反射出的特有光晕。

在UI渲染引擎对移动终端界面进行渲染前，首先要确定移动终端当前与界面元素层的界面元素相对应的质感元素层的质感元素。由于用户可以随时更换界面元素，为了提升客户的视觉体验，本发明将质感元素定义为普通光照，例如太阳，日光灯等日常漫反射光源下，界面元素所产生的反射状态光晕，因此，也就需要在界面元素索引库中将界面元素和相应的光照射到该界面元素上所反射出的光晕（即质感元素）相对应。

需要说明的是，界面元素索引库用于存储移动终端界面显示的界面元素和与界面元素相对应的质感元素层在移动终端相应水平参数下的质感元素和质感元素状态。当确定了移动终端界面元素层的界面元素和移动终端的水平参数后，UI渲染引擎根据界面元素和界面元素索引库中存储的该界面元素对应的质感元素及质感元素状态对移动终端的界面进行逐层渲染，然后显示渲染后的界面。

其中，移动终端的水平参数是根据移动终端的陀螺仪与地平线的相对位置确定的，这样能够更好的使界面元素层的视觉显示效果“实体拟物化”。

具体地，作为本发明的一个示例，光照射到玻璃元素上所反射出的光晕对应的质感元素为A，而光照射到金属元素上所反射出的光晕对应的质感元素为B。当用户使用玻璃元素作为移动终端界面的界面元素层时，UI渲染引擎根据光照射到玻璃元素上所反射出的光晕从界面元素索引库中调用质感元素A对其进行渲染，最后显示渲染后的界面，从而营造出真实的漫反射光下玻璃界面的质感。

为了进一步提升用户的视觉体验，当用户在使用移动终端时，如果用户采用金属元素作为移动终端界面的界面元素，那么随着移动终端的水平位置变化，移动终端界面的界面元素上层的质感元素层对应的质感元素，例如光晕也会发生相应的变化（即质感元素也会发生相应的变化），这就让用户觉得移动终端界面似乎在一块金属里面，从而进一步提升用户的视觉体验。

用户看到的移动终端界面的界面元素反射出的光晕之所以会随着移动终端的位置变化而变化，是由于质感元素层的质感元素状态随着移动终端水平参数的变化而产生的变化。也就是说，根据移动终端的水平参数的变化，质感元素层显示的质感元素状态在质感元素层产生相应的位移，因此用户在移动终端界面上看到的光晕也就会产生相应的变化。

其中，在根据移动终端中的陀螺仪与地平线的相对位置确定移动终端水平参数的过程中，当陀螺仪与地平线的相对位置平行时，移动终端的水平参数为陀螺仪平行时的初始值；当陀螺仪与地平线的相对位置不平行时，移动终端的水平参数为陀螺仪偏移的角度值。

在本发明的具体实施例中，将陀螺仪与地平线相平行时的状态记为初始值，不平行时的状态记为变动值。由于人在握住移动终端时，移动终端与地平线有一定的夹角，当人在握住移动终端时，陀螺仪并不是初始值，而是移动终端与地平线形成的夹角值，也就是陀螺仪偏移的角度值，陀螺仪偏移的角度值（即其变动值）有可能是正15度、负15度、正45度或者负45度等，UI渲染引擎根据这些变动值在界面元素索引库中调用与这些变动值相对应的质感元素状态对其进行渲染。

由于用户在握住移动终端时，移动终端与地平线都会有一定的夹角产生，而产生的每一个夹角（即移动终端的水平参数）在界面元素索引库中都有与之相对应的质感元素状态，因此当用户握住移动终端浏览时就会发现，随着他摆动手机，移动终端界面上的光晕效果也就会发生相应的变化。

具体地，作为本发明的另一个示例，当用户采用玻璃元素作为移动终端界面的界面元素时，在界面元素索引库中，与玻璃元素反射出的光晕相对应的是质感元素A，当用户在握住移动终端时，如果移动终端与地平线形成的夹角为15度，那么在界面元素索引库中存在与质感元素A在移动终端的水平参数15度时相对应的质感元素状态，假设该质感元素状态为A1。类似地，如果移动终端与地平线形成的夹角为负15度，那么质感元素A在界面元素索引库中存在的相对应的在移动终端的水平参数为负15度时的质感元素状态为A2；如果移动终端与地平线形成的夹角为45度，那么质感元素A在界面元素索引库中存在的相对应的质感元素状态为A3；如果移动终端与地平线形成的夹角为负45度，那么质感元素A在界面元素索引库中存在与该负45度的水平参数，相对应的质感元素状态A4。

如果用户采用玻璃元素作为移动终端界面的界面元素，而此时用户握住的移动终端与地面形成的夹角刚好为45度，那么UI渲染引擎就会调用移动终端水平参数为45度时，在界面元素索引库中与之相对应的质感元素状态A3进行渲染，最后在移动终端界面的界面元素层上显示，使用户觉得移动终端界面似乎是在一块玻璃里面。

另外，优选的方式是，在确定与界面元素相对应的质感元素层在移动终端的水平参数下的质感元素和质感元素状态的过程中，可以通过实时矢量计算或者直接的数据调用的方式确定质感元素层在移动终端的水平参数下的质感元素和质感元素状态。

在本发明的通过实时矢量计算确定质感元素层在移动终端的水平参数下的质感元素和质感元素状态的示例中，对移动终端界面拉伸后的图片进行处理时，由于拉伸后的图片为变化较小的矢量图片，因此在对变化较小的矢量图片进行变形处理时，质感元素状态A1通过拉伸变形后实时计算获得质感元素状态A2，UI渲染引擎再调用质感元素状态A2对其进行渲染，因此将拉伸后的界面呈现在用户眼前时，就是质感元素状态A2经过渲染后，在界面元素上反射出的光晕。

本发明还可以通过直接的数据调用确定质感元素层在移动终端的水平参数下的质感元素和质感元素状态，比如数个渐变的半透质感元素png，其质感元素状态有A1、A2、A3、A4等，它们都是独立的元素，代表不同的渐变状态，能够通过直接的数据调用获得。当界面随着移动终端摆动时，界面元素反射出的光晕也会随之摆动，或拉伸、或清晰、或模糊、或位移、或渐变、或扩散，就如同光从不同的角度照射到主题材质上产生的光晕效果一样，这过程就是通过移动终端产生的不同水平参数，在质感元素层里通过界面元素索引库调用相应的A1、A2、A3、A4等元素，从而使界面产生写实的质感状态。

另外，作为另一种优选的方式，在根据移动终端的界面元素和水平参数下的质感元素状态对移动终端的界面进行渲染之前，还包括：通过陀螺仪和移动终端中的摄像头确定人眼视线与移动终端的水平参数；根据人眼视线与移动终端的水平参数对质感元素状态进行修正。具体为，以移动终端水平位置为初始值，通过摄像识别用户眼睛，并算出眼睛与移动终端大概的水平夹角，以移动终端与实际水平位置产生的水平夹角加成（加成系数，0<加成系数≤1，加成系数与夹角绝对值成正比）处理，从而获得实际的显示效果。例如，移动终端与水平线夹角为15度，质感元素层对应的质感元素为A1，移动终端与人眼（视线延伸）夹角为20度，质感元素层对应的质感元素为B1，那么质感元素层对应的质感元素实际的显示是B1+A1’（其中A1’是在A1基础上，融合加成系数获得）。

与上述方法相对应，本发明提供一种基于移动终端的界面显示系统，图2示出了根据本发明实施例的基于移动终端的界面显示系统方框示意图。

如图2所示，本发明提供的基于移动终端的界面显示系统200包括水平参数确定单元210、界面显示索引库220、质感元素确定单元230、渲染单元240和显示单元250。

其中，水平参数确定单元210用于根据移动终端中的陀螺仪与地平线的相对位置确定移动终端的水平参数；界面显示索引库220用于存储与移动终端界面显示的界面元素和与界面元素相对应的质感元素层在水平参数下的质感元素和质感元素状态，其中，质感元素为光照射到界面元素上反射出的光晕；质感元素确定单元230用于根据水平参数和移动终端界面元素层的界面元素，在界面显示索引库中确定与界面元素相对应的质感元素层在水平参数下的质感元素和质感元素状态；渲染单元240用于根据界面元素和水平参数下的质感元素状态对移动终端的界面进行渲染，其中，质感元素的渲染覆盖在界面元素的渲染效果上；光晕效果显示单元250用于显示渲染后的界面。

其中，水平参数确定单元210进一步包括：初始值确定单元（图中未示出）用于确定移动终端的水平参数的初始值，其中，移动终端的水平参数的初始值为移动终端的陀螺仪与地平线相对位置处于平等状态时的取值；角度值确定单元（图中未示出）用于确定当移动终端的陀螺仪与地平线的相对位置处于不平行状态时陀螺仪偏移的角度值。

其中，质感元素确定单元230进一步包括数据获取单元（图中未示出）用于通过实时矢量计算或者直接的数据调用，以确定质感元素层在移动终端水平参数下的质感元素和质感元素状态。

其中，在渲染单元240对移动终端的界面进行渲染之前，还包括修正单元（图中未示出）用于通过移动终端的陀螺仪和移动终端中的摄像头，以确定人眼视线与移动终端的水平参数，根据人眼视线与移动终端的水平参数对质感元素状态进行修正，具体为，以移动终端水平位置为初始值，通过摄像识别用户眼睛，并算出眼睛与移动终端大概的水平夹角，以移动终端与实际水平位置产生的水平夹角加成（加成系数，0<加成系数≤1，加成系数与夹角绝对值成正比）处理，从而获得实际的显示效果。

例如，移动终端与水平线夹角为15度，质感元素层对应的质感元素为A1，移动终端与人眼（视线延伸）夹角为20度，质感元素层对应的质感元素为B1，那么质感元素层对应的质感元素实际的显示是B1+A1’（其中A1’是在A1基础上，融合加成系数获得）。本发明提供的基于移动终端的界面显示方法及系统通过UI渲染引擎根据陀螺仪提供的变动值也就是移动终端的水平参数对移动终端的界面进行渲染，以使移动终端界面获得实物般的光影效果，从而提升用户的视觉体验。

如上参照附图以示例的方式描述了根据本发明的基于移动终端的界面显示方法及系统。但是，本领域技术人员应当理解，对于上述本发明所提出的基于移动终端的界面显示方法及系统，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (10)

1.一种基于移动终端的界面显示方法，所述界面显示包括界面元素层的显示和所述界面元素层之上的质感元素层的显示，所述界面显示方法包括：

根据移动终端中的陀螺仪与地平线的相对位置确定所述移动终端的水平参数；

根据所述水平参数和所述移动终端界面元素层的界面元素，确定与所述界面元素相对应的质感元素层在所述水平参数下的质感元素和质感元素状态，所述质感元素为光照射到所述界面元素上反射出的光晕；

根据所述界面元素和所述水平参数下的质感元素状态对所述移动终端的界面进行渲染，其中，所述质感元素的渲染覆盖在所述界面元素的渲染效果上；

显示渲染后的界面。

2.如权利要求1所述的基于移动终端的界面显示方法，其中，所述界面元素层的界面元素为玻璃元素或者金属元素或者木头元素。

3.如权利要求1所述的基于移动终端的界面显示方法，其中，在根据移动终端中的陀螺仪与地平线的相对位置确定所述移动终端水平参数的过程中，

当所述陀螺仪与所述地平线的相对位置平行时，所述移动终端的水平参数为陀螺仪平行时的初始值；

当所述陀螺仪与所述地平线的相对位置不平行时，所述移动终端的水平参数为陀螺仪偏移的角度值。

4.如权利要求1所述的基于移动终端的界面显示方法，其中，根据移动终端的水平参数的变化，所述质感元素层显示的质感元素状态在所述质感元素层产生相应的位移而产生光晕变化。

5.如权利要求1所述的基于移动终端的界面显示方法，其中，在确定与所述界面元素相对应的质感元素层在所述水平参数下的质感元素和质感元素状态的过程中，

通过实时矢量计算或者直接数据调用的方式确定所述质感元素层在所述水平参数下的质感元素和质感元素状态。

6.如权利要求1至5任一项所述的基于移动终端的界面显示方法，其中，在根据所述界面元素和所述水平参数下的质感元素状态对所述移动终端的界面进行渲染之前，还包括：

通过所述陀螺仪和移动终端中的摄像头确定人眼视线与所述移动终端的水平参数；

根据所述人眼视线与所述移动终端的水平参数对所述质感元素状态进行修正。

7.一种基于移动终端的界面显示系统，包括：

水平参数确定单元，用于根据移动终端中的陀螺仪与地平线的相对位置确定移动终端的水平参数；

界面显示索引库，用于存储与所述移动终端界面显示的界面元素和与所述界面元素相对应的质感元素层在所述水平参数下的质感元素和质感元素状态，所述质感元素为光照射到所述界面元素上反射出的光晕；

质感元素层确定单元，根据所述水平参数和所述移动终端界面元素层的界面元素，在所述界面显示索引库中确定与所述界面元素相对应的质感元素层在所述水平参数下的质感元素和质感元素状态；

渲染单元，用于根据所述界面元素和所述水平参数下的质感元素状态对所述移动终端的界面进行渲染，其中，所述质感元素的渲染覆盖在所述界面元素的渲染效果上；

显示单元，用于显示渲染后的界面。

8.如权利要求7所述的基于移动终端的界面显示系统，其中，所述水平参数确定单元进一步包括：

初始值确定单元，用于确定所述移动终端的水平参数的初始值，其中，所述初始值为所述移动终端的陀螺仪与所述地平线的相对位置处于平行状态时的取值；

角度值确定单元，用于确定当所述陀螺仪与所述地平线的相对位置处于不平行状态时所述陀螺仪偏移的角度值。

9.如权利要求7所述的基于移动终端的界面显示系统，其中，质感元素层确定单元进一步包括：

数据获取单元，用于通过实时矢量计算或者直接数据调用的方式确定所述质感元素层在所述水平参数下的质感元素和质感元素状态。

10.如权利要求7至9任一项所述的基于移动终端的界面显示系统，其中，在渲染单元根据所述界面元素和所述水平参数下的质感元素状态对所述移动终端的界面进行渲染之前，还包括：

修正单元，用于通过所述陀螺仪和移动终端中的摄像头确定人眼视线与所述移动终端的水平参数，根据所述人眼视线与所述移动终端的水平参数对所述质感元素状态进行修正。

Images