CN103645828A - 一种带滑动动画效果的主界面菜单的显示方法 - Google Patents
一种带滑动动画效果的主界面菜单的显示方法 Download PDFInfo
- Publication number
- CN103645828A CN103645828A CN201310655729.8A CN201310655729A CN103645828A CN 103645828 A CN103645828 A CN 103645828A CN 201310655729 A CN201310655729 A CN 201310655729A CN 103645828 A CN103645828 A CN 103645828A
- Authority
- CN
- China
- Prior art keywords
- menu
- main interface
- screen
- interface
- submenu
- 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.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
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所述的方法,其特征在于,所述对菜单或子菜单的操作是指在触摸屏上进行滑动或点击操作。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310655729.8A CN103645828A (zh) | 2013-12-05 | 2013-12-05 | 一种带滑动动画效果的主界面菜单的显示方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310655729.8A CN103645828A (zh) | 2013-12-05 | 2013-12-05 | 一种带滑动动画效果的主界面菜单的显示方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN103645828A true CN103645828A (zh) | 2014-03-19 |
Family
ID=50251055
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201310655729.8A Pending CN103645828A (zh) | 2013-12-05 | 2013-12-05 | 一种带滑动动画效果的主界面菜单的显示方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN103645828A (zh) |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103677536A (zh) * | 2013-12-26 | 2014-03-26 | 深圳市东信时代信息技术有限公司 | 一种侧滑菜单实现的***与方法 |
WO2017016066A1 (zh) * | 2015-07-27 | 2017-02-02 | 宇龙计算机通信科技(深圳)有限公司 | 一种菜单托盘界面显示方法及装置、终端 |
CN106528093A (zh) * | 2016-10-18 | 2017-03-22 | 天脉聚源(北京)传媒科技有限公司 | 一种播放动画的方法及装置 |
CN106775265A (zh) * | 2015-11-24 | 2017-05-31 | 北京国双科技有限公司 | 展示菜单的方法及装置 |
CN107656668A (zh) * | 2016-07-27 | 2018-02-02 | 平安科技(深圳)有限公司 | 侧滑菜单加载方法和装置 |
CN108845750A (zh) * | 2018-06-08 | 2018-11-20 | 北京奇虎科技有限公司 | 一种启动控件的方法及终端设备 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060256091A1 (en) * | 2005-05-16 | 2006-11-16 | Nintendo Co., Ltd. | Information processing apparatus and storage medium storing item selecting program |
CN101452365A (zh) * | 2007-12-06 | 2009-06-10 | Lg电子株式会社 | 装置及其控制方法 |
CN101872282A (zh) * | 2010-05-25 | 2010-10-27 | 中兴通讯股份有限公司 | 用户界面生成方法、装置及移动终端 |
CN101893980A (zh) * | 2009-05-20 | 2010-11-24 | 龙旗科技(上海)有限公司 | 一种带滑动动画效果的多图像查看界面的显示方法 |
CN102124431A (zh) * | 2008-08-18 | 2011-07-13 | 三星电子株式会社 | 菜单导航方法、具有菜单导航功能的装置和用户界面、以及其上记录有用于执行该菜单导航方法的程序的记录介质 |
CN102231094A (zh) * | 2011-06-20 | 2011-11-02 | 深圳市同洲电子股份有限公司 | 界面显示方法及终端 |
-
2013
- 2013-12-05 CN CN201310655729.8A patent/CN103645828A/zh active Pending
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060256091A1 (en) * | 2005-05-16 | 2006-11-16 | Nintendo Co., Ltd. | Information processing apparatus and storage medium storing item selecting program |
CN101452365A (zh) * | 2007-12-06 | 2009-06-10 | Lg电子株式会社 | 装置及其控制方法 |
CN102124431A (zh) * | 2008-08-18 | 2011-07-13 | 三星电子株式会社 | 菜单导航方法、具有菜单导航功能的装置和用户界面、以及其上记录有用于执行该菜单导航方法的程序的记录介质 |
CN101893980A (zh) * | 2009-05-20 | 2010-11-24 | 龙旗科技(上海)有限公司 | 一种带滑动动画效果的多图像查看界面的显示方法 |
CN101872282A (zh) * | 2010-05-25 | 2010-10-27 | 中兴通讯股份有限公司 | 用户界面生成方法、装置及移动终端 |
CN102231094A (zh) * | 2011-06-20 | 2011-11-02 | 深圳市同洲电子股份有限公司 | 界面显示方法及终端 |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103677536A (zh) * | 2013-12-26 | 2014-03-26 | 深圳市东信时代信息技术有限公司 | 一种侧滑菜单实现的***与方法 |
WO2017016066A1 (zh) * | 2015-07-27 | 2017-02-02 | 宇龙计算机通信科技(深圳)有限公司 | 一种菜单托盘界面显示方法及装置、终端 |
CN106406680A (zh) * | 2015-07-27 | 2017-02-15 | 宇龙计算机通信科技(深圳)有限公司 | 一种菜单托盘界面显示方法及装置、终端 |
CN106775265A (zh) * | 2015-11-24 | 2017-05-31 | 北京国双科技有限公司 | 展示菜单的方法及装置 |
CN107656668A (zh) * | 2016-07-27 | 2018-02-02 | 平安科技(深圳)有限公司 | 侧滑菜单加载方法和装置 |
CN106528093A (zh) * | 2016-10-18 | 2017-03-22 | 天脉聚源(北京)传媒科技有限公司 | 一种播放动画的方法及装置 |
CN108845750A (zh) * | 2018-06-08 | 2018-11-20 | 北京奇虎科技有限公司 | 一种启动控件的方法及终端设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103645828A (zh) | 一种带滑动动画效果的主界面菜单的显示方法 | |
CN110597586A (zh) | 基于拖拽的组件化布局大屏方法和装置 | |
CN104471564B (zh) | 在将数据变换成可消费内容时创建变型 | |
CN104350493B (zh) | 将数据变换成可消费的内容 | |
JP2015500532A5 (zh) | ||
US10168861B2 (en) | Menu display device, menu display control method, program and information storage medium | |
CN109508137A (zh) | 用于再现内容的方法和装置 | |
CN104137043A (zh) | 用于在图形用户界面(gui)上进行人机交互的方法 | |
US20220004293A1 (en) | Interactive data visualization user interface with hierarchical filtering based on gesture location on a chart | |
CN107272994A (zh) | 视窗切换界面 | |
TWI550500B (zh) | 桌面顯示系統及方法 | |
US20160274750A1 (en) | Animated Transition between Data Visualization Versions at Different Levels of Detail | |
KR20140078629A (ko) | 인플레이스 방식으로 값을 편집하는 사용자 인터페이스 | |
CN106020685B (zh) | 一种思维导图操作方法及装置 | |
US10347018B2 (en) | Interactive data visualization user interface with hierarchical filtering based on gesture location on a chart | |
CN102868588A (zh) | 停靠栏的实现方法和装置 | |
CN109716294A (zh) | 具有可移动迷你标签的用户界面 | |
Daiber et al. | Whole body interaction with geospatial data | |
JP6465277B2 (ja) | 電子機器、処理方法およびプログラム | |
CN104820551A (zh) | 一种在终端中的触控操作方法和装置 | |
CN106371755A (zh) | 多屏互动方法与*** | |
Kukimoto et al. | HyperInfo: interactive large display for informal visual communication | |
CN109064537A (zh) | 基于3d渲染引擎的图像生成方法以及装置 | |
JP6293903B2 (ja) | 情報を表示するための電子機器および方法 | |
CN102929940A (zh) | 界面展现装置和界面展现方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20140319 |
|
RJ01 | Rejection of invention patent application after publication |