CN101986254A - 渐变推进式三维用户界面实现方法及移动终端 - Google Patents

Abstract

本发明提供一种渐变推进式三维用户界面实现方法及移动终端，所述方法包括如下步骤：将用户界面的图标设置在离屏幕一定距离的显示位置，从XY、XZ、YZ面视角都能见到每一个图标；选中一个图标后，选中图标逐步向屏幕方向移动，而且逐渐变大，同时在该图标的周围和后方填充半透明效果，且随时间推移半透明效果的透明度逐步降低直至完全不透明；选中图标移动一段距离后，在半透明效果的后方绘制新一组用户界面；当选中图标移出屏幕显示范围后，半透明效果的透明度逐渐提高直至为完全透明，新用户界面也向屏幕方向移动直至停留在显示位置；进行下一次的操作。本发明既能够使用户界面通过半透明渐变自然切换，又能够达到不断前进的效果。

Description

渐变推进式三维用户界面实现方法及移动终端

技术领域

本发明涉及一种图形用户界面，特别涉及一种移动终端的三维用户界面。

背景技术

现有的移动终端交互技术，主要是继承了桌面应用的相关交互组件。通过简单的减小面积和简单化操作的方式，移植到移动终端上。

随着移动终端性能的提升和3G网络的商用化，移动终端已经有能力支撑三维用户界面的应用。三维界面可以使用户与系统的交互变得更加流畅和直观，再加上终端本身具有移动的特性，可以承载多种增值服务种类，将成为无线增值领域的一个重要方向。

然而当前手持设备中的用户图形界面图形形式单一，仍然多为2维平面中选择图标进行操作。这种操作平面感强，没有纵深感，用户体验不好。而且现有技术中的三维用户界面也多为简单的将图标作为贴图材质，直接覆盖在三维图形的不同面，用户体验太过简单，纵深感和趣味性不够。

发明内容

本发明要解决的技术问题，在于提供一种半透明渐变式三维用户界面实现方法及移动终端，它即能够使用户界面通过半透明渐变自然切换，又能够达到不断前进的效果、增加纵深感、提高用户操作体验。

本发明是这样实现的：

本发明半透明渐变式三维用户界面实现方法具体包括如下步骤：

步骤10、将用户界面的图标设置在离屏幕一定距离的显示位置，而且从XY、XZ、YZ面视角都能在屏幕上见到每一个图标；

步骤20、选中一个图标后，所述选中图标逐步向屏幕方向移动，而且该图标逐渐变大，同时在该图标的周围和后方绘制填充半透明效果，即半透明效果的透明度逐步降低，直至不可见；

步骤30、所述选中图标移动一段距离后，在半透明效果的后方开始绘制新用户界面；

步骤40、当选中图标移出屏幕显示范围后，半透明效果的透明度逐渐增大，直至透明度为可见，同时新用户界面也不断向屏幕方向移动，直至停留在显示位置；

步骤50、此时可以进行下一次的操作。

本发明实现渐变推进式三维用户界面的移动终端包括：

图标位置设置单元，用于将用户界面的图标设置在离屏幕一定距离的显示位置，而且从三维用户界面XYZ坐标系的XY、XZ、YZ面视角都能在屏幕上见到每一个图标；

半透明效果填充单元，用于选中一个图标后，使选中图标逐步向屏幕方向移动，而且该图标逐渐变大，同时在该图标的周围和后方绘制填充半透明效果，且随时间推移，半透明效果的透明度逐步降低，直至完全不透明；

新用户界面绘制单元，用于在所述选中图标移动一段距离后，在半透明效果的后方开始绘制新一组用户界面；

透明度提高单元，用于当选中图标移出屏幕显示范围后，使半透明效果的透明度逐渐提高，直至透明度为完全透明，同时新用户界面也不断向屏幕方向移动，直至停留在显示位置。

本发明具有如下优点：

1.本发明提出的3维半透明渐变式用户界面，以3维立体的界面为基础，将用户界面立体化三维化，大幅增加用户使用的趣味性，克服了当前手持设备中的用户图形界面图形形式单一，多为2维平面中选择图标进行的操作；

2.在用户界面切换时，始终保持图标向屏幕的渐进移动，以达到用户不断向前推进的用户体验，使得用户使用用户界面时增加好奇心和更强烈代入感；而且在用户界面切换时采用了半透明渐变，使得用户界面可以自然切换；

3.用户在触摸操作时选中图标后，图标会产生自动旋转正对屏幕的动作，加强了用户界面的动感和趣味性。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1为本发明所需的电路结构示意图。

图2为本发明方法的流程示意图。

图3A为本发明用户界面的图标XZ面的排布示意图。

图3B为本发明用户界面的图标XY面的排布示意图。

图3C为本发明用户界面的图标YZ面的排布示意图。

图4A为本发明用户界面旋转时XZ面的示意图。

图4B为本发明用户界面旋转结束后XZ面的示意图。

图4C为本发明用户界面旋转结束后XY面的示意图。

图5A为本发明用户界面切换开始时XZ面的示意图。

图5B为本发明用户界面切换开始时XY面的示意图。

图6A为本发明用户界面切换时产生新用户界面后XZ面的示意图。

图6B为本发明用户界面切换时旧图标移出屏幕后XZ面的示意图。

图6C为本发明用户界面切换时旧图标移出屏幕后XY面的示意图。

图7A为本发明用户界面切换时新用户界面向屏幕移动时XZ面的示意图。

图7B为本发明用户界面切换时新用户界面向屏幕移动时XY面的示意图。

具体实施方式

参阅图1至图7B对本发明一实施例进行详细的说明。

如图1所示，为本发明所需的电路结构示意图。实现本发明的功能需要：总线，所述总线为一个互联的单元，将挂载在总线上的各个单元连接在一起，任一个总线上的单元可以通过总线访问到挂载在总线的其他单元；CPU(中央处理器)，负责通过总线对触摸屏控制器和显示控制单元和GPU进行控制；GPU(图形处理单元)，负责根据CPU的控制，通过总线从外部存储器获取所需的材质图像，然后绘制出待显示的图像数据后存储到外部存储器；外部存储器，负责存储用户界面所需的全部材质和图像数据和经过GPU处理后待显示的图像数据；触摸屏控制器，负责将用户在触摸屏上的触碰操作转化为屏幕坐标信息并将信息送往CPU；显示控制单元，负责通过总线从外部存储器读取待显示图像数据，并把数据显示屏幕显示；显示屏幕，负责将显示控制单元提供的显示数据变为图像显示到屏幕上。

操作流程为：

1.当硬件开始上电工作后，CPU将各个单元初始化，使得各个单元开始正常工作；

2.当软件系统启动后，用户可以通过触摸屏进行操作，用户对触摸屏的控制信息从触摸屏控制器传送到CPU；

3.CPU根据从触摸屏控制器得到的用户触碰屏幕点的坐标，然后查询个图标所对应的坐标范围，得到用户希望选择的图标；

4.当确定用户所选的图标后，CPU开始对GPU进行配置，命令GPU绘制出所需要效果的图形效果；

5.当GPU得到CPU的命令后，开始从外部存储器读取绘制所需的材质图像，然后再绘制完后将待显示的图像存储到外部存储器；

6.当GPU绘制图像完毕后，CPU开始配置显示控制单元，命令显示控制单元显示GPU绘制的图像；

7.显示控制单元得到CPU命令后，从外部存储器读取待显示图像，处理为显示屏幕所需的数据格式后，送往显示屏幕显示；

8.当用户界面更新完毕后，CPU重新开始接受触摸屏控制器的数据，开始新一轮的用户操作。

如图2所示，本发明的用户界面具体包括如下步骤：

步骤10、将用户界面的图标设置在离屏幕一定距离的显示位置，而且从XY、XZ、YZ面视角都能在屏幕上见到每一个图标；步骤20、选中一个图标后，所述选中图标逐步向屏幕方向移动，而且该图标逐渐变大，同时在该图标的周围和后方绘制填充半透明效果，且随时间推移，半透明效果的透明度逐步降低，直至完全不透明；步骤30、所述选中图标移动一段距离后，在半透明效果的后方开始绘制新一组用户界面；步骤40、当选中图标移出屏幕显示范围后，半透明效果的透明度逐渐提高，直至透明度为完全透明，同时新用户界面也不断向屏幕方向移动，直至停留在显示位置；步骤50、此时可以进行下一次的操作。

半透明效果可以为云雾半透明效果，还可以使用水纹，玻璃等不同材质的材料实现水纹半透明效果、或玻璃半透明效果，本实施例的半透明效果采用的是云雾效果。

结合图3A、图3B、图3C，用户界面的图标：图标1、图标2、图标3、图标4、图标5、图标6设置在离屏幕一定距离的显示位置，用户可以从XY、XZ、YZ面视角都能在屏幕上见到每一个图标，图标距离屏幕有一定的距离，可以供图标前进特效提供足够的距离。用户可以通过触碰图标来实现选择该图标。更进一步的，可以使得所述每一个图标正面的法线朝向都不一样。

结合图4A、图4B、图4C，选中其中一个图标后，如图标2，将该图标2调整到法线垂直于显示屏而且距离最靠近显示屏的位置，旋转结束后，选中的图标2的法线已经垂直于屏幕，成为屏幕中心的图标，而且这个调整的过程以步进方式实现，这样可以得到整体用户界面旋转的效果。

结合图5A、图5B，选中的图标2的法线已经垂直于屏幕后，在该图标2的四周和后方绘制填充半透明效果，本实施例采用了云雾效果。而且随着时间推移，云雾效果的透明度逐步降低，直到完全不透明，使得其他的图标逐步从用户界面隐去，以便实现新用户界面的自然切换；同时选中的图标2沿着法线方向逐步向屏幕方向移动，并逐渐变大，屏幕上的效果是图标2逐渐靠近用户，根据相对运动的原理，用户本人的体验为向屏幕中前进，加上周围的云雾效果，达到探索未知领域的用户心理体验。

结合图6A、图6B、图6C，选中图标2移动到屏幕位置，即将移出屏幕时，开始在云雾后方离屏幕较远处绘制新的一组用户界面，图标11、图标12、图标13、图标14、图标15、图标16。当图标2完全移出屏幕后，将云雾效果的透明度再逐渐提高，将新的用户界面图标11、图标12、图标13、图标14、图标15、图标16隐约显示于屏幕之中。

结合图7A、图7B，随着云雾透明度的逐渐提高，直到云雾效果完全消失，同时新用户界面图标11、图标12、图标13、图标14、图标15、图标16整体向屏幕方向逐渐移动，直到移动到正常的显示位置，这样可以达到用户保持向前推进的连贯性，和探索未知领域的好奇性。当云雾效果完全消失后，并且新图标都移动到正常的显示位置后，用户可以进行新一轮的操作。

本发明实现渐变推进式三维用户界面的移动终端实施例包括：

图标位置设置单元，用于将用户界面的图标设置在离屏幕一定距离的显示位置，而且从三维用户界面XYZ坐标系的XY、XZ、YZ面视角都能在屏幕上见到每一个图标；

半透明效果填充单元，用于选中一个图标后，使选中图标逐步向屏幕方向移动，而且该图标逐渐变大，同时在该图标的周围和后方绘制填充半透明效果，且随时间推移，半透明效果的透明度逐步降低，直至完全不透明；

新用户界面绘制单元，用于在所述选中图标移动一段距离后，在半透明效果的后方开始绘制新一组用户界面；

透明度提高单元，用于当选中图标移出屏幕显示范围后，使半透明效果的透明度逐渐提高，直至透明度为完全透明，同时新用户界面也不断向屏幕方向移动，直至停留在显示位置。

以上所述，仅为本发明较佳实施例而已，故不能依此限定本发明实施的范围，即依本发明专利范围及说明书内容所作的等效变化与修饰，皆应仍属本发明涵盖的范围内。

Claims (8)

1.一种渐变推进式三维用户界面的实现方法，其特征在于：具体包括如下步骤：

步骤10、将用户界面的图标设置在离屏幕一定距离的显示位置，而且从三维用户界面XYZ坐标系的XY、XZ、YZ面视角都能在屏幕上见到每一个图标；

步骤20、选中一个图标后，所述选中图标逐步向屏幕方向移动，而且该图标逐渐变大，同时在该图标的周围和后方绘制填充半透明效果，且随时间推移，半透明效果的透明度逐步降低，直至完全不透明；

步骤30、所述选中图标移动一段距离后，在半透明效果的后方开始绘制新一组用户界面；

步骤40、当选中图标移出屏幕显示范围后，半透明效果的透明度逐渐提高，直至透明度为完全透明，同时新用户界面也不断向屏幕方向移动，直至停留在显示位置；

步骤50、此时可以进行下一次的操作。

2.根据权利要求1所述的实现方法，其特征在于：所述步骤10中，每一个图标正面的法线朝向都不一样。

3.根据权利要求2所述的实现方法，其特征在于：所述步骤20中，选中图标后，将该图标调整到法线垂直于显示屏而且距离最靠近显示屏的位置，而且这个调整的过程以步进方式实现。

4.根据权利要求1所述的实现方法，其特征在于：所述步骤20中，通过触碰图标来实现选择该图标。

5.根据权利要求1所述的实现方法，其特征在于：所述选中图标沿着法线方向逐步向屏幕方向移动。

6.根据权利要求1所述的实现方法，其特征在于：步骤30中所述选中图标移动一段距离，此时选中图标还未移出屏幕显示范围。

7.根据权利要求1所述的实现方法，其特征在于：所述半透明效果为云雾半透明效果、或水纹半透明效果、或玻璃半透明效果。

8.一种实现渐变推进式三维用户界面的移动终端，其特征在于，包括：

图标位置设置单元，用于将用户界面的图标设置在离屏幕一定距离的显示位置，而且从三维用户界面XYZ坐标系的XY、XZ、YZ面视角都能在屏幕上见到每一个图标；

半透明效果填充单元，用于选中一个图标后，使选中图标逐步向屏幕方向移动，而且该图标逐渐变大，同时在该图标的周围和后方绘制填充半透明效果，且随时间推移，半透明效果的透明度逐步降低，直至完全不透明；

新用户界面绘制单元，用于在所述选中图标移动一段距离后，在半透明效果的后方开始绘制新一组用户界面；

透明度提高单元，用于当选中图标移出屏幕显示范围后，使半透明效果的透明度逐渐提高，直至透明度为完全透明，同时新用户界面也不断向屏幕方向移动，直至停留在显示位置。

Images