移动端导航设计

news2024/11/14 2:56:36

根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。
任何APP的组织信息都需要以某种导航框架固定起来,一个新的产品合适的导航框架,决定了产品之后的延伸和扩展。
移动端的屏幕尺寸就这么大,操作方式也无非就是点击、滑动、长按这些。接下来我们可以具体分析一下这几种导航模式。
一、标签导航(选项卡式)
标签导航分很多种,有底部标签导航,顶部标签导航,
底部标签导航是最基本的导航,几乎绝大部分 app 中都在用,tabbar 位于页面最底部,一般3-5个 tabbar,有文字+icon,也有纯 icon 形式,但大部分是文字+icon 的形式。
在这里插入图片描述

二、抽屉式导航
抽屉式导航将部分信息内容进行隐藏,突出了应用的核心功能。如果产品信息层级有非常多的页面和内容,难以在一屏内显示全部内容,抽屉式导航是个不错的选择。
在这里插入图片描述
在这里插入图片描述

三、列表式导航
列表式导航结构简单清晰、易于理解、冷静高效,能够帮助用户快速定位到对应内容。列表导航也是十分常见,几乎在每一个 app 里面都会存在,大部分时候是作为二级导航存在,但是也会存在于一级导航的时候
在这里插入图片描述
四、宫格式导航
宫格导航,也是十分常见的导航形式,除了一些工具类 app 外,大部分是作为二级页面展示出来,并且以 icon+文字的形式居多。
在这里插入图片描述
五、下拉菜单式导航
下拉菜单式导航一般位于App界面的顶部,用户通过点击相应位置呼出导航菜单呼出的菜单位于界面的上面,点击菜单导航以外区域可以收起菜单。下拉菜单式导航与所在界面的连贯性较好,展开和收起对当前界面没有什么影响。
在这里插入图片描述
更多导航设计模板,请下载(设计软件:Axure8.0)
免费下载模板地址:https://download.csdn.net/download/weixin_43516258/87708307?spm=1001.2014.3001.5503

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/440133.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java定位系统源码,通过独特的射频处理,配合先进的位置算法,可以有效计算出复杂环境下的人员与物品的活动信息

智慧工厂人员定位系统源码,区域电子围栏管控源码 文末获取联系! 在工厂日常生产活动中,企业很难精准地掌握访客和承包商等各类人员的实际位置,且无法实时监控巡检人员的巡检路线,当厂区发生灾情或其他异常状况时&#…

Layer组件多个iframe弹出层打开与关闭及参数传递

Layer官网地址:http://layer.layui.com/ 1、多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: content参数可传入要打开的页面,type参数传2,即可打开iframe类型的弹层…

STM32入门指南:了解STM32

1. 初识 STM32 STM32,从字面上来理解,ST 是意法半导体,M 是 Microelectronics 的缩写,32 表示 32 位,合起来理解,STM32 就是指 ST 公司开发的 32 位微控制器。在如今的 32 位控制器当中,STM32 …

GitHub新建仓库 上传文档

Author:龙箬 Computer Application Technology Change the World with Data and Artificial Intelligence ! CSDNweixin_43975035 振,而飞破虚空 点击New repository 自定义仓库名称,并勾选 “Add a README file” 选项 复制Code链接 打开终端Git git cl…

夏驰和徐策带你从零开始学数据结构——哈希表

哈希表的概念: 哈希表是一种常用的数据结构,它可以在 O(1) 的时间复杂度内执行插入、查找和删除操作。哈希表的核心思想是使用哈希函数将键值对映射到数组中的一个位置上,从而实现快速的访问和修改。 哈希表由两个主要部分组成:…

Android开发—入门Kotlin编程语言

一、Kotlin简介 为什么Kotlin能代替Java此为Android官方第一支持的开发语言? 1)Kotlin的语法更加简洁,对于同样的功能,使用Ktolin开发的代码量可能会比使用Java开发减少50%甚至更多; 2)Kotlin语法更加高…

【Linux】文件IO---应用开发角度

目录简述 目录 前言: 一、Linux的文件 二、Linux文件系统目录结构 三、文件访问的方式 (1)通用方式:open/read/write/lseek/close 示例: (2)非通用函数:ioctl/mmap 示例&am…

使用ChatGPT+MindShow一键生成PPT,以后再也不用担心制作PPT啦

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

深度学习及使用全连接神经网络实现手写数字识别案例开发

1.什么是深度学习和机器学习有什么区别?是什么原因使得部分问题机器学习无法解决需要深入研究深度学习? 人工智能、机器学习、深度学习的区别是什么?_哔哩哔哩_bilibili 深度学习是一种机器学习方法,它通过构建多层神经网络来实…

tmall.product.template.get( 产品接口 )

¥免费必须用户授权 产品模板获取接口,对于非关键属性的类目,发布达尔文(监管)产品时,必须先根据类目获取产品模板。 产品模板定义产品发布需要的类目属性,包括: 关键属性:关键属性可以在类目上不存在。不…

spring的应用 xml配置实现定时任务

定时任务的实现: 通过xml实现: 创建qiuckstart的maven文件 把依赖配置改改 jdk1.8 以及12 再删掉一些不必要的配置 引入spring依赖坐标 和java同一个目录下创建resources 作为 资源根 结构如图: spring.xml配置: 从官网复制…

《JavaEE》网络中的基本概念

👑作者主页:Java冰激凌 📖专栏链接:JavaEE 局域网/广域网 在我们的生活中 经常会使用到网络 对于网络 我们现在已经变得与生活息息相关 甚至可以说为密不可分 而在我们的网络中 我们的网络是分为局域网与广域网 我们的局域网和广域…

【8086汇编】环境搭建 - 学习笔记:WIN10下安装配置 MASMPlus + DOSBox

【8086汇编】环境搭建 - 学习笔记:WIN10下安装配置 MASMPlus DOSBox 一、MASMPlus 1.2下载安装 二、DOSBox 0.74-3下载安装配置自动挂载C盘添加环境变量 三、masm v5.0四、ml.exe v6.11参考资料 一、MASMPlus 1.2 下载 脚本之家:MASMPlus(汇编开发环境…

【深度学习】第六阶段

1、超参数调试 在深度学习中,有各种各样的超参数,其中包括:学习率 α \alpha α、动量超参数 β \beta β、Adam中的超参数 β 1 \beta_1 β1​、 β 2 \beta_2 β2​和 ε \varepsilon ε、神经网络层数、每层的结点数量、 小样本数据集大小…

mlq color transfer: Color Transfer Using Probabilistic Moving Least Squares

文章目录 Color Transfer Using Probabilistic Moving Least Squares1. 颜色转换2. 如何计算匹配点的概率3. 核心思想和具体操作:4. 特征点覆盖不到的颜色4.1这里介绍一下引文7:4.2. 分析 5. Probabilistic Moving Least Squares with Spatial Constrain…

智能学习 | MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络)

智能学习 | MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络) 目录 智能学习 | MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络)预测效果基本介绍程序设计参考资料预测效果 基本介绍 MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络…

如何通过Bug跟踪管理,有效减少软件缺陷Bug?

1、Bug生命周期 Bug的生命周期是指从Bug被发现到被关闭的过程。一般的缺陷状态是:新建--指派--已解决--待验--关闭。如果待验的Bug没有解决,我们需要重新激活--指派--已解决,循环这个过程,中间还包括拒绝、延期等。 Bug跟踪管理 减…

设计模式:创建者模式 - 代理模式

文章目录 1.概述2.结构3.静态代理4.JDK动态代理5.CGLIB动态代理6.三种代理的对比7.优缺点8.使用场景 1.概述 由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时,访问对象不适合或者不能直接引用目标对象,代理对象作为访问对象和目标对象…

VUE3 学习笔记(八)引入 EasyUI for Vue

目录 一、什么是 EasyUI? 二、安装EasyUI for Vue3 1. 使用NPM安装 2. 导入EasyUI 三、安装完成出现问题解决 一、什么是 EasyUI? easyui是一个基于jQuery、Angular、Vue和React的用户界面组件的集合。easyui为构建现代的、交互式的、javascript应用程序提供了基本功能…

【历史上的今天】4 月 20 日:中国接入国际互联网;戴尔登顶 PC 市场;计算机先驱诞生日

整理 | 王启隆 透过「历史上的今天」,从过去看未来,从现在亦可以改变未来。 今天是 2023 年 4 月 20 日,在 2005 年的今天,CNET 网络公司宣布以 1100 万美元现金收购 PCHome 公司。根据当时的协议,PCHome 创始人将保留…