CN103645828A - 一种带滑动动画效果的主界面菜单的显示方法 - Google Patents

Abstract

本发明涉及信息技术领域，旨在提供一种带滑动动画效果的主界面菜单的显示方法；该发明适用于使用触摸屏的移动终端、显示设备上的应用软件UI设计；本发明的有益效果是：对主界面菜单采用多排多列图片的方式展现，使菜单能够自由、灵活组合，主界面能显示更多的内容；使用图片展现菜单内容，用户能直观地了解功能模块，软件生产商对软件后期维护不需重新编译代码；主界面和子界面都可接受点击或拖动等交互，用户更方便；子界面的展现和退出都是以动画方式表示，取得良好的视觉效果。

Description

一种带滑动动画效果的主界面菜单的显示方法

技术领域

本发明涉及信息技术领域，具体涉及一种带滑动动画效果的主界面菜单的显示方法；本发明适用于使用触摸屏的移动终端、显示设备上的应用软件UI设计。

背景技术

随着应用软件的增加，用户对软件不再满足功能需要的实现，而是需要一个易操作、高效率的应用软件。在使用触摸屏的移动终端、显示设备上，很多应用都使用了侧滑导航栏来展现自己的主菜单。侧滑导航栏也叫隐藏式导航栏，是目前应用程序开发人员最喜欢使用的一种设计模式，是一种将主菜单和子界面分别放在屏幕左右两侧的UI设计风格（参阅图1）。在其使用过程中，会存在以下一些问题：

1、现有应用的主界面菜单是以竖单列表形式展现的。其风格已经固定，如内容过多的话，需用户拖动屏幕才能看到，菜单内容大部分都是文字说明，不能很清楚地表达模块功能。很难达到用户体验中“隐喻”的要求。

2、如业务模块发生改变，软件生产商需重新编译打包。不易维护。

发明内容

本发明要解决的问题是，克服现有技术中的不足，提供一种带滑动动画效果的主界面菜单的显示方法。

为解决技术问题，本发明的解决方案是：

提供一种带滑动动画效果的主界面菜单的显示方法，包括以下步骤：

（1）指定菜单图片与菜单内容的TAG之间、菜单内容的TAG与业务模块之间的映射关系；

（2）根据用户身份和权限确定菜单内容，按映射关系将菜单图片进行缩放处理，然后显示于触摸屏主界面上对应的子菜单的位置；

（3）当用户点击主界面上的某个子菜单时，与该子菜单内容对应的菜单图片以动画效果从屏幕的一侧推出并最终挡住主界面，将该子菜单的界面展现在手机屏幕上供用户进行操作；

（4）当用户点击子菜单界面上指定的按钮或滑动子菜单界面时，其菜单图片移出屏幕侧边并最终露出主界面，使得用户能够对其它菜单进行操作。

本发明中，所述步骤（2）具体包括：

a、根据用户身份和权限确定菜单内容，将要显示的菜单图片读取到内存相应的位置中；

b、获取当前手机终端屏幕宽度和菜单图片的大小，计算出屏幕上单行能显示的菜单数量，同时生成图像排版层次信息；

c、根据图像排版层次信息以及各菜单图片的坐标大小信息，应用图像缩放算法将菜单图片按给出的大小适配显示至屏幕上。

本发明中，所述对菜单或子菜单的操作是指在触摸屏上进行滑动或点击操作。

与现有技术相比，本发明的有益效果是：

1、本发明对主界面菜单采用多排多列图片的方式展现，使菜单能够自由、灵活组合，主界面能显示更多的内容；

2、使用图片展现菜单内容，用户能直观地了解功能模块，软件生产商对软件后期维护不需重新编译代码。

3、主界面和子界面都可接受点击或拖动等交互，用户更方便；

4、子界面的展现和退出都是以动画方式表示，取得良好的视觉效果。

附图说明

图1为传统的菜单样式；

图2为本发明的流程图；

图3为本发明的实施方式中菜单图片和TAG映射图；

图4为本发明的实施方式中TAG和业务模块映射图；

图5为本发明的实施方式中菜单样式。

具体实施方式

下面结合附图，对本发明的实施方式进行介绍。

带滑动动画效果的主界面菜单的显示方法，其特征在于，包括以下步骤：

（1）指定菜单图片与菜单内容的TAG之间、菜单内容的TAG与业务模块之间的映射关系；

（2）根据用户身份和权限确定菜单内容，按映射关系将菜单图片进行缩放处理，然后显示于触摸屏主界面上对应的子菜单的位置；

（3）当用户点击主界面上的某个子菜单时，与该子菜单内容对应的菜单图片以动画效果从屏幕的一侧推出并最终挡住主界面，将该子菜单的界面展现在手机屏幕上供用户进行操作；

（4）当用户点击子菜单界面上指定的按钮（例如在左上角设置按钮）或滑动子菜单界面时，其菜单图片移出屏幕侧边并最终露出主界面，使得用户能够对其它菜单进行操作。

所述对菜单或子菜单面的操作是指在触摸屏上进行滑动或点击操作。菜单图片的移动方向，可以是从左至右、从右至左、从上至下、从下至上的任意一种。

本发明中，界面的显示过程是：首先根据用户身份和权限确定菜单内容，将要显示的菜单图片读取到内存相应的位置中；然后获取当前手机终端屏幕宽度screenWidth和菜单图片的大小，计算出屏幕上单行能显示的菜单数量，同时生成图像排版层次信息；最后根据图像排版层次信息以及各菜单图片的坐标大小信息，应用图像缩放算法将菜单图片按给出的大小适配显示至屏幕上。

当主界面接收到来自触摸屏的点击事件时，首先根据每个图像在主界面的标记TAG，来判断子界面要显示的模块（如图4所示）。然后，将子界面显示到屏幕上，设置子界面的left为screenWidth，使用animation动画效果将子界面从left为screenWidth滑动到left为0，这样子界面就会从屏幕右侧滑到左侧从而挡住主界面，形成良好的视觉效果。

当子界面接收到来自触摸屏的点击事件或滑动事件时，使用animation动画效果将子界面从left为0滑动到left为screenWidth-leftMargin，子界面形成滑动动画，从屏幕左侧滑到右侧，主界面就会展现在当前屏幕，用户可继续操作其它的模块。

本发明中术语解释：

TAG：每个用户菜单的标示符，和用户权限是一一对应的。

screenWidth：当前终端屏幕宽度。

leftMargin：子界面退出收缩后在主界面露出显示的宽度。

本发明中，菜单采用图片展现，更加生动地表现了模块功能，软件后期维护直接替换图片就行，无需重新对软件源码编译。采用竖排多列的形式，可以让软件根据业务需要自由组合菜单，也可展现更多的内容。用户可一目了然知道软件模块的分布，提高用户体验。可对子界面可以点击或滑动操作，便于用户操作。从子界面返回到主菜单，子界面没有从内存中注销，有利于帮用户记住操作。

Claims (3)

1.一种带滑动动画效果的主界面菜单的显示方法，其特征在于，包括以下步骤：

（1）指定菜单图片与菜单内容的TAG之间、菜单内容的TAG与业务模块之间的映射关系；

（2）根据用户身份和权限确定菜单内容，按映射关系将菜单图片进行缩放处理，然后显示于触摸屏主界面上对应的子菜单的位置；

（3）当用户点击主界面上的某个子菜单时，与该子菜单内容对应的菜单图片以动画效果从屏幕的一侧推出并最终挡住主界面，将该子菜单的界面展现在手机屏幕上供用户进行操作；

（4）当用户点击子菜单界面上指定的按钮或滑动子菜单界面时，其菜单图片移出屏幕侧边并最终露出主界面，使得用户能够对其它菜单进行操作。

2.根据权利要求1所述的方法，其特征在于，所述步骤（2）具体包括：

a、根据用户身份和权限确定菜单内容，将要显示的菜单图片读取到内存相应的位置中；

b、获取当前手机终端屏幕宽度和菜单图片的大小，计算出屏幕上单行能显示的菜单数量，同时生成图像排版层次信息；

c、根据图像排版层次信息以及各菜单图片的坐标大小信息，应用图像缩放算法将菜单图片按给出的大小适配显示至屏幕上。

3.根据权利要求1所述的方法，其特征在于，所述对菜单或子菜单的操作是指在触摸屏上进行滑动或点击操作。

Images