CN109445767A - 一种应用于多终端的新型响应式导航设计实现方法 - Google Patents

一种应用于多终端的新型响应式导航设计实现方法 Download PDF

Info

Publication number
CN109445767A
CN109445767A CN201811347022.XA CN201811347022A CN109445767A CN 109445767 A CN109445767 A CN 109445767A CN 201811347022 A CN201811347022 A CN 201811347022A CN 109445767 A CN109445767 A CN 109445767A
Authority
CN
China
Prior art keywords
menu
navigation
response type
multiple terminals
record
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
Application number
CN201811347022.XA
Other languages
English (en)
Inventor
王丽媛
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bao Zun Agel Ecommerce Ltd
Original Assignee
Shanghai Bao Zun Agel Ecommerce Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shanghai Bao Zun Agel Ecommerce Ltd filed Critical Shanghai Bao Zun Agel Ecommerce Ltd
Priority to CN201811347022.XA priority Critical patent/CN109445767A/zh
Publication of CN109445767A publication Critical patent/CN109445767A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种应用于多终端的新型响应式导航设计实现方法。所述方法包括以下步骤：1)选择VUE前端框架；2)使用递归实现多级子菜单；3)记录当前打开叶子菜单路径，并高亮显示其所有父级菜单：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录；4)子组件$emit的消息通过递归传递$emit到目标接受者。应用本发明方法设计的响应式导航可实现以下效果：帮助用户在使用导航菜单的时候能够快速定位，便捷的在多终端使用一个样式的导航菜单；真正的响应式，一套代码实现多端适配，维护成本低；适用于中后台的管理型、工具型网站。

Description

一种应用于多终端的新型响应式导航设计实现方法
技术领域
本发明涉及互联网技术领域，特别涉及企业级后台产品，具体地说，涉及一种应用于多终端的新型响应式导航实现方法。
背景技术
1991年，CERN(欧洲粒子物理研究所)的科学家提姆﹒伯纳斯李(Tim Berners-Lee)开发出了万维网(World Wide Web)。他还开发出了极其简单的浏览器(浏览软件)。此后互联网开始向社会大众普及。此人被人们誉为“互联网之父”。至2016年4月，全球域名统计数量已达3亿以上。所有的网站都会有导航，导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。目前PC常见的导航菜单有两大形式：顶栏、侧栏垂直菜单(可内嵌子菜单、支持折叠)；移动端有七种常见导航形式：标签式导航(底部和顶部)、抽屉式导航、菜单式导航、平铺式导航、点聚式导航、列表式导航、网格式导航。导航菜单作为网站设计中的一个基础组成部分，直接决定着用户的浏览体验顺畅与否，对整个网站具有举足轻重的影响。选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，如果导航菜单不够灵敏、可用性差，这会有损网站的专业形象，妨碍用户与网站进行互动。
对于2B的企业级后台产品来说，用户每天都需要通过导航频繁切换到对应的页面完成工作任务，使用场景不仅局限于工作环境，也可能在出差的途中，需要用手机临时登录进行紧急的操作。
现有菜单导航，一般会采取写两套代码去适配不同的终端，或者是一套响应式的导航菜单。中文期刊《电脑知识与技术》2015年14期刊出的论文“校园响应式网页设计应用研究”，阐述了响应式网页设计的主要技术特点，并对基于响应式网页设计理念的前端框架进行比较分析。具体公开了响应式设计技术的主要特征包括：1)移动优先(Mobile First)：移动优先是响应式网页设计中性能设计的重要组成部分。在响应式网页设计中，网页最主要的部分是设计为移动优先，使得敏感的设计是以桌面网站的方式或类似的隐藏技术来替换，从而提升用户体验感觉。2)层叠样式转换和媒体查询(CSS Transitions and MediaQueries)：使用层叠样式转换和媒体查询依据浏览器的宽度，实现自适应页面布局，从而查阅网站内容时，可以快速无缝的在不同页面风格之间进行跳转。3)响应式数据表(Responsive Data Tables)：传统数据表从PC端转换到移动端，往往由于缩小整个数据表，导致字体变化而不可阅读。响应式数据表就是要重新格式化表，使其具有更好的可读性。4)响应式导航菜单(Responsive Navigation Menus)：在终端屏幕缩小时，原有固定横向菜单的链接方式转换为一种下拉式菜单，替换原有的菜单项。5)流式布局(Fluid Layouts)：以往有四种不同的布局类型：固定宽度的布局，液态布局，弹性布局和混合布局，其各有优缺点。流式布局通过设置布局的百分比以及CSS的浮动属性等技巧使得响应式网页设计更加灵活。6)响应式图像(Responsive Images)：响应式图像采用一种上下文感知图像尺寸方式，为不同分辨率下图像尺寸不同布局的情况，提供背景图像尺寸响应优化方法。由此可见，响应式的导航菜单样式会发生变化。势必导致用户会产生学习成本，及适应时间。
综上，有必要帮助用户在使用导航菜单的时候能够快速定位，便捷的在多终端使用一个样式的导航菜单。
发明内容
本发明的目的，是针对管理后台网站，在使用不同终端登录的时候，保证菜单导航使用的便捷、效率、美观及交互一致，提高工作效率，降低学习成本，提供了一种应用于多终端的新型响应式导航设计实现方法。
为实现上述目的，本发明采取的技术方案是：
一种应用于多终端的新型响应式导航设计实现方法，所述方法包括以下步骤：
1)选择VUE前端框架；
2)使用递归实现多级子菜单；
3)完成菜单的完整路径记录；
4)子组件$emit的消息通过递归传递$emit到目标接受者。
作为一个优选例，步骤3)具体为：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录。
作为另一优选例，所述方法还包括以下步骤：记录元素开始和结束的位置，实现位置转变过程的动画效果。
作为另一优选例，所述方法还包括以下步骤：测试所述应用于多终端的新型响应式导航的核心功能。
作为另一优选例，所述方法还包括以下步骤：响应式的兼容。
作为另一优选例，所述方法还包括以下步骤：全面测试或内测。
作为另一优选例，所述应用于多终端的新型响应式导航其PC端导航栏固定在左侧，在想扩展页面内容操作区域的时候可将导航收起，无需展开也能切换页面。
作为另一优选例，所述应用于多终端的新型响应式导航其移动端的导航栏默认为收起状态，呼出后交互样式与PC端完全一致。
本发明优点在于：
本发明提供了一种应用于多终端的新型响应式导航设计实现方法，应用本发明方法设计的响应式导航可以实现以下技术效果：
(1)PC端导航栏固定在左侧，提高导航可见性，在想扩展页面内容操作区域的时候，可以将导航收起，并且无需展开也能方便的切换页面；
(2)移动端的导航栏默认为收起状态，呼出后交互样式与PC端完全一致；
(3)真正的响应式，一套代码实现多端适配，代码维护成本低；
(4)适用于中后台的管理型、工具型网站。
因此，本发明可帮助用户在使用导航菜单的时候能够快速定位，便捷的在多终端使用一个样式的导航菜单。
附图说明
附图1是【PCWEB】1440px分辨率一级菜单。
附图2是【PCWEB】1440px分辨率二级菜单和多级菜单样式。
附图3是【PCWEB】1440px分辨率菜单收起样式。
附图4是【TABLET】1024px分辨率菜单收起样式。
附图5是【TABLET】1024px分辨率菜单展开样式。
附图6是【MOBILE】768px分辨率菜单收起的样式。
附图7是【MOBILE】768px分辨率菜单展开的样式。
附图8是【MOBILE】360px分辨率菜单收起样式。
附图9是【MOBILE】360px分辨率菜单展开样式。
具体实施方式
下面结合附图对本发明提供的具体实施方式作详细说明。
实施例1
本发明的应用于多终端的新型响应式导航设计实现方法，该方法基于VUE前端框架，具体如下：
1、vue的provide和inject
避免父组件传递props至孙组件需要通过子组件一级一级中转。
2、递归的应用
2.1多级子菜单必然需要使用到递归，根据设计要求，mini态菜单使用递归实现。
2.2记录当前打开叶子菜单路径，并高亮显示其所有父级菜单：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录(实现全路径高亮的关键)。
2.3组件dispatch的使用：子组件$emit的消息通过递归传递$emit到目标接受者。
3、动画的应用
记录元素开始和结束的位置，实现位置转变过程的动画效果。
此应用于多终端的新型通用响应式导航，其响应式规则为：
1)使用rem单位，以适配不同手机分辨率；
2)响应式网站断点breakpoint(逻辑像素)为：
PC WEB：1920px/1440px/1280px
TABLET：1024px/768px
MOBILE：375px。
需要说明的是，本发明的方法使用VUE前端框架，VUE具有一系列的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快，VUE可以实现在每个单文件组件中完全访问CSS，方便的规定CSS作用域，也可引入CSS模块。
应用本发明方法设计的响应式导航菜单交互效果为：父级与子级为横向递进；所以，此菜单能友好的支持超过3级的菜单。
请参见附图：图1是【PCWEB】1440px分辨率一级菜单；图2是【PCWEB】1440px分辨率二级菜单和多级菜单样式；图3是【PCWEB】1440px分辨率菜单收起样式；图4是【TABLET】1024px分辨率菜单收起样式；图5是【TABLET】1024px分辨率菜单展开样式；图6是【MOBILE】768px分辨率菜单收起的样式；图7是【MOBILE】768px分辨率菜单展开的样式；图8是【MOBILE】360px分辨率菜单收起样式；图9是【MOBILE】360px分辨率菜单展开样式。可见应用本发明方法设计的响应式导航可以实现以下技术效果：
(1)PC端导航栏固定在左侧，提高导航可见性，在想扩展页面内容操作区域的时候，可以将导航收起，并且无需展开也能方便的切换页面；
(2)移动端的导航栏默认为收起状态，呼出后交互样式与PC端完全一致；
(3)真正的响应式，一套代码实现多端适配，代码维护成本低；
(4)适用于中后台的管理型、工具型网站。
实施例2
本发明的应用于多终端的新型响应式导航设计实现方法，该方法基于VUE前端框架，具体如下：
1、vue的provide和inject
避免父组件传递props至孙组件需要通过子组件一级一级中转。
2、递归的应用
2.1多级子菜单必然需要使用到递归，根据设计要求，mini态菜单使用递归实现。
2.2记录当前打开叶子菜单路径，并高亮显示其所有父级菜单：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录(实现全路径高亮的关键)。
2.3组件dispatch的使用：子组件$emit的消息通过递归传递$emit到目标接受者。
3、动画的应用
记录元素开始和结束的位置，实现位置转变过程的动画效果。
此应用于多终端的新型通用响应式导航，其响应式规则为：
1)使用rem单位，以适配不同手机分辨率；
2)响应式网站断点breakpoint(逻辑像素)为：
PC WEB：1920px/1440px/1280px
TABLET：1024px/768px
MOBILE：375px。
4、核心功能测试。
5、响应式的兼容。
6、全面测试/内测。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员，在不脱离本发明方法的前提下，还可以做出若干改进和补充，这些改进和补充也应视为本发明的保护范围。

Claims (8)

1.一种应用于多终端的新型响应式导航设计实现方法，其特征在于，所述方法包括以下步骤：
1)选择VUE前端框架；
2)使用递归实现多级子菜单；
3)完成菜单的完整路径记录；
4)子组件$emit的消息通过递归传递$emit到目标接受者。
2.根据权利要求1所述的方法，其特征在于，步骤3)具体为：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录。
3.根据权利要求1所述的方法，其特征在于，还包括以下步骤：记录元素开始和结束的位置，实现位置转变过程的动画效果。
4.根据权利要求1所述的方法，其特征在于，还包括以下步骤：测试所述应用于多终端的新型响应式导航的核心功能。
5.根据权利要求1所述的方法，其特征在于，还包括以下步骤：响应式的兼容。
6.根据权利要求1所述的方法，其特征在于，还包括以下步骤：全面测试或内测。
7.根据权利要求1所述的方法，其特征在于，所述应用于多终端的新型响应式导航其PC端导航栏固定在左侧，在想扩展页面内容操作区域的时候可将导航收起，无需展开也能切换页面。
8.根据权利要求1所述的方法，其特征在于，所述应用于多终端的新型响应式导航其移动端的导航栏默认为收起状态，呼出后交互样式与PC端完全一致。
CN201811347022.XA 2018-11-13 2018-11-13 一种应用于多终端的新型响应式导航设计实现方法 Pending CN109445767A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811347022.XA CN109445767A (zh) 2018-11-13 2018-11-13 一种应用于多终端的新型响应式导航设计实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811347022.XA CN109445767A (zh) 2018-11-13 2018-11-13 一种应用于多终端的新型响应式导航设计实现方法

Publications (1)

Publication Number Publication Date
CN109445767A true CN109445767A (zh) 2019-03-08

Family

ID=65552232

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811347022.XA Pending CN109445767A (zh) 2018-11-13 2018-11-13 一种应用于多终端的新型响应式导航设计实现方法

Country Status (1)

Country Link
CN (1) CN109445767A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110515683A (zh) * 2019-07-15 2019-11-29 平安普惠企业管理有限公司 一种前端Vue页面可视化配置的方法、装置及存储介质
CN111240644A (zh) * 2019-12-31 2020-06-05 浪潮金融信息技术有限公司 一种基于vueJS开发web管理平台架构的方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101082864A (zh) * 2007-04-20 2007-12-05 南昌有色冶金设计研究院 基于递归算法实现菜单内容直接映射至树型控件中的方法
CN104615544A (zh) * 2015-03-10 2015-05-13 于秀山 面向问题的gui软件关联功能分析方法及装置
EP3106990A1 (en) * 2015-06-19 2016-12-21 Ecole Nationale de l'Aviation Civile A method, software and processing unit for verifying properties of interactive components
CN107577455A (zh) * 2017-08-03 2018-01-12 千寻位置网络有限公司 定制化组件配置的活动管理展示平台及展示方法
CN108037967A (zh) * 2017-11-27 2018-05-15 深圳市丰巢科技有限公司 一种基于多父子结构的菜单加载方法以及电子设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101082864A (zh) * 2007-04-20 2007-12-05 南昌有色冶金设计研究院 基于递归算法实现菜单内容直接映射至树型控件中的方法
CN104615544A (zh) * 2015-03-10 2015-05-13 于秀山 面向问题的gui软件关联功能分析方法及装置
EP3106990A1 (en) * 2015-06-19 2016-12-21 Ecole Nationale de l'Aviation Civile A method, software and processing unit for verifying properties of interactive components
CN107577455A (zh) * 2017-08-03 2018-01-12 千寻位置网络有限公司 定制化组件配置的活动管理展示平台及展示方法
CN108037967A (zh) * 2017-11-27 2018-05-15 深圳市丰巢科技有限公司 一种基于多父子结构的菜单加载方法以及电子设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
我是帅帅的玉米: "【vue组件通信②】使用$emit和$on进行组件之间的传值", 《HTTPS://SEGMENTFAULT.COM/A/1190000011426018》 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110515683A (zh) * 2019-07-15 2019-11-29 平安普惠企业管理有限公司 一种前端Vue页面可视化配置的方法、装置及存储介质
CN110515683B (zh) * 2019-07-15 2022-12-13 平安普惠企业管理有限公司 一种前端Vue页面可视化配置的方法、装置及存储介质
CN111240644A (zh) * 2019-12-31 2020-06-05 浪潮金融信息技术有限公司 一种基于vueJS开发web管理平台架构的方法
CN111240644B (zh) * 2019-12-31 2022-08-09 浪潮金融信息技术有限公司 一种基于vueJS开发web管理平台架构的方法

Similar Documents

Publication Publication Date Title
US7721192B2 (en) User interface for a resource search tool
CN109271608B (zh) 数字作品的补充信息的视觉表示
US8639680B1 (en) Hidden text detection for search result scoring
US20090007178A1 (en) Video-Based Networking System with a Video-Link Navigator
CN102929925A (zh) 一种基于浏览内容的搜索方法及装置
KR20160013901A (ko) 웹 브라우저 히스토리
CN103593107B (zh) 界面显示方法及装置
CN101395608A (zh) 在搜索结果的站点内搜索
CN101146128A (zh) 允许小屏幕移动终端访问和浏览www网站的方法
Ahmadi et al. User-centric adaptation of Web information for small screens
CN104166498A (zh) 显示用户说明书的方法及移动终端
CN103678496A (zh) 提供调整检索页筛选显示的方法和系统
Billah et al. SteeringWheel: a locality-preserving magnification interface for low vision web browsing
US20160078011A1 (en) Browser application and a method of operating the browser application
Travis et al. Designing low‐cost mobile websites for libraries
CN102841900B (zh) 页面处理方法和装置
CN102629251A (zh) 一种网页信息显示方法和装置
CN109445767A (zh) 一种应用于多终端的新型响应式导航设计实现方法
KR20120035041A (ko) 하이퍼링크의 주소를 북마크에 등록하는 방법 및 그 장치
US20100100852A1 (en) Nestable system and method for accessing, organizing, and interacting with visual representations of data
CN101539933B (zh) 智能型内容直达技术
CN102799343A (zh) 一种显示索引图标内容的方法和装置
CN105630893A (zh) 一种组图标题的显示方法和装置
WO2015166315A1 (en) Browser application and a method of operating the browser application
Shin et al. Tablorer–an interactive tree visualization system for tablet pcs

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20190308