当前位置: 首页 > news >正文

7种优秀的导航菜单设计总结

导航是应用程序界面中最常见的模块之一,在链接应用程序中起着每个页面的作用。

不同的设计需求和业务目标决定了导航的设计因品而异,移动设备的尺寸远小于计算机。因此,在设计移动终端导航时,应考虑更全面,以确保简单易用。

在本文中,我们整理了来自即时设计资源社区的7个实用导航菜单设计供您参考,当然,您也可以直接一键复制!

1.舵式导航

舵导航菜单以它看起来像船的方向舵而命名。舵导航将核心功能(如发布、上传等)放置在导航的中心,并通常使用强烈的颜色来区分其他标签导航。同时,主功能标签的功能扩展,点击后可以看到更多的界面入口。由于舵导航入口直接清晰,操作路径短,常用于共享和社交应用程序。例如这10个底部导航UI案例,可以参考下。

2.汉堡菜单导航

就像舵导航一样,汉堡导航也因其形象而得名:普通的汉堡导航头由三条水平线组成,就像两层面包和一层肉汉堡一样。汉堡导航的优点是占用了更少的界面空间,使页面更加简洁和清新,并将用户的注意力集中在更重要的信息上。用户非常熟悉这种导航模式,不会增加额外的学习和适应成本。

3.顶部Tab导航

顶部Tab导航一般有2~5个选项,选择与未选择的风格略有不同。常见的有底部加短线、字体颜色变化、字体大小放大等。点击不同的选项后,您可以切换到另一个页面。在设计移动导航菜单时,可以实现页面跳转,使用鼠标交互、手势交互、键盘、延迟等路径动画来制作迷人的产品演示。

4.抽屉式导航

抽屉导航菜单,也被称为侧滑导航或扩展菜单。这种导航方法将菜单“隐藏”在当前页面上,为主要内容腾出空间。抽屉导航通常用于放置用户不常用的功能,或者对产品不太核心,如设置、个人信息等。

5.列表导航

列表式导航菜单也是最常见的导航方式之一,常用于个人中心、设置、内容/信息列表。表中的每个项都链接到另一个子功能。列表项可以填充文本、图片或按钮。这样做的好处是可以在有限的移动屏幕空间内容中包含大量的入口。例如后台侧边导航设计这个案例,可以参考一下。

​6.卡片导航

卡片网格导航菜单可以是多种形状,也可以由一组图片组成。这些卡片分为可折叠和可扩展块,具有高度的可视性,使您可以轻松集成相关元素和可视化主题。这种设计在许多流行的应用程序和网页设计中非常流行。

7.下拉式导航

当手指移动到菜单标签时,下拉导航菜单可以达到下拉框的效果,通常用于筛选同一信息模块下的不同类别的信息,或快速启动一些常用的功能模块,而不需要频繁的页面跳转。这种操作更复杂,现在很少使用,但有时与其他导航结合使用。

http://www.lryc.cn/news/65760.html

相关文章:

  • Problem E. 矩阵游戏 (2023年ccpc河南省赛)
  • 数字孪生模型构建理论及应用
  • Vue面试题:30道含答案和代码示例的练习题
  • 2023-05-09 LeetCode每日一题(有效时间的数目)
  • 第三节课 Linux文件权限
  • 开发STC89C51系列单片机需要的单片机技术
  • 分布式键值存储是什么?(分布式键值存储大值)
  • 多线程(线程同步和互斥+线程安全+条件变量)
  • Flutter学习——开发Flutter需要的技能
  • SPSS如何进行因子分析和主成分分析之案例实训?
  • 图标字体与HTML转义字符:网页设计中的两个关键概念
  • Elasticsearch详解
  • 学习笔记(13)网络基础
  • LeertCode 134 加油站
  • python文件操作的基本流程
  • 1. 两数之和
  • 操作系统:06 进程通信
  • WRF模式
  • 2直接连接的网络与VLAN划分【实验】【计算机网络】
  • 【Linux0.11代码分析】04 之 head.s 启动流程
  • 自动化测试和selenium的使用
  • Ubuntu常用终端操作
  • Spring Security 6.x 系列【34】认证篇之前后端分离场景下的集成方案
  • Qt之QTextToSpeech 让你的应用程序说话
  • 为什么程序员喜欢用Linux?
  • leetcode 598. 范围求和 II
  • javaweb前置知识
  • 基于微信小程序的酒店预定管理系统设计与实现
  • 26. Service——深入学习
  • 【算法】Check If Word Is Valid After Substitutions 检查替换后的词是否有效