超全面的导航设计基础知识总结(一)优设网

导航设计也可以称之为框架设计,将产品的核心点(业务层)集中突出,尽可能做到任务路径的扁平化和用户操作便捷性,将用户最常用行为(用户层)分类组织,让这些功能元素被用户以最容易的方式获取和使用,在移动界面设计中,是非常重要的模块,可以大胆的说:一个移动端界面设计就是不同类型的导航设计以不同方式的合理组装。

按照操作方式,我们可以将导航设计大致分为三种不同的类型:全局型、瞬时型、混合型。

只需打开应用,就直截了当的展示导航中的各个选项。换言之,无需操作,就可以看到并通过各个功能入口。通常固定在页面中,占据页面的一定的面积。其中常用包括:桌面式、标签式、列表式(如下图)

跳版式/桌面式

通常占据屏幕的大多数面积。

标签式/选项卡式

iOS和Android端常用的导航模式,算是标准选项卡导航,还有其他新的创新。

列表式

更多的文字和状态的描述和变化。

点击一个入口(icon/标题/箭头)或手势操作,才会展示各个菜单选项,入口相对占页面面积非常小,用户需要的时候调出,算是打破屏幕边界和运用页面视觉层级的高明手法。其中常用包括:抽屉式、菜单式、点聚式。

抽屉式/侧边式

点击左上角的头像,左侧划入功能入口。

下拉菜单式

点击添加,弹出下来功能选项。

点聚式

点击一个入口,围绕其散开,并展示出其中的功能入口。

拥有直接展示功能入口并结合需要操作才展示的其他剩余功能。换言之,全局导航与瞬时导航的结合,其中常用包括:舵式、轮播式等。

舵式

全局导航-底部标签栏式+瞬时导航-点聚式=舵式导航

轮播式

全局导航-桌面式+瞬时导航-抽屉式=轮播式导航

导航设计中各类型设计模式是可以自由的组合,根据业务需求结合用户体验找到一套适合的组合拳。我们通常选择一个导航作为主体框架,其他导航作为辅助。

主导航:从一个主类别切换到另一个主类别的一级菜单,主类别的切换。次导航:指在选中的模块内活动的二级导航。

导航内功能的层级(微博:混合导航-舵式做为一级导航+混合导航-轮播式作为二级导航)

导航与导航之间的层级(饿了么:全局导航-标签式做为一级导航,混合导航-轮播式作为二级导航;咸鱼:混合导航-舵式做为一级导航,全局导航-桌面式作为二级导航)

是否需要手势操作,展示功能入口-全局;需要点击或者手势-瞬时型;展示了部分的功能入口,还需要通过点击或者手势展开剩余功能-混合型。

THE END
1.如何在PPT中设置图片轮播功能:步骤详解接下来,我们将设置图片轮播效果。 选中你想要设置为轮播的图片。 点击“动画”选项卡。 在“动画”选项卡中,找到“动画窗格”按钮并点击它,这将打开一个包含所有选定图片动画的窗格。 在“动画”选项卡中,点击“添加动画”按钮。 在下拉菜单中选择“进入”效果下的“擦除”、“淡入”或其他适合连续播放的动画效果https://www.kdocs.cn/article/D6F7E7403E.html
2.网易交互设计微专业干货提炼3、舵式导航 多个功能中有某个功能特别重要 4、抽屉式导航 隐藏不重要功能,让用户更关注核心功能,大大减少主界面中的导航控件数量 Tips:不要在抽屉式导航放置太重要的功能 5、下拉菜单式导航 可与滚动式导航结合 导航栏类型 (三)移动产品模式设计之列表 https://www.jianshu.com/p/ee503ff78494
3.推荐圣诞氛围感SVG模版产品菜单式切换 如果你准备了丰富的动静态 LOOK 和产品图,那么结合 SVG「无限选择器」制作成简洁而灵动的交互菜单,无疑能极大提升销售转化率。参考卡地亚公众号的《爱,点亮欢聚时刻》,点击下方对应按钮可进行切换查看: 关于无限选择器的创造性应用,建议广大运营人对照我们曾经录制的专题解析进行深度学习,掌握它丰富的多https://blog.csdn.net/e2_cool/article/details/144431140
4.福建师范大学附属小学图书馆设备采购项目附件10、系统驱动方式采用以菜单式、键盘快捷式、图标式多种驱动方式,并提供统一的快捷键。支持键盘、鼠标、光驱扫描和条码扫描仪多种外设操作方式,各子系统之间界面、快捷键操作方式统一; 11、系统数据采用自动和手动备份两种方式。自动备份可根据用户的需要自定义备份的频率和时间。并且系统提供了恢复备份数据的工具; 12、https://zfcg.czt.fujian.gov.cn/upload/document/20201126/4a1857c5700f4e21bdc556d67e9f1369.html
5.flash完全教程30天学会flash动画的制作弹出菜单式链接 49 3.16 图片选择器 50 3.17 链接导航框 51 3.18 小球跟踪链接 52 3.19 单击按钮打开全屏窗口 56 3.20 单选按钮选择链接 56 3.21 隐藏的链接 57 3.22 变换链接颜色 58 3.23 固定链接的位置 59 第4章 时间类特效 61 4.1 时间的水中倒影 62 4.2 简单的日历 63 4.3 带有农历的日历 65 4.4 https://www.iteye.com/resource/chenmingwo1986-1253870
6.网易交互设计师微专业C1揭开交互神秘面纱51CTO博客3、舵式导航 多个功能中有某个功能特别重要 4、抽屉式导航 隐藏不重要功能,让用户更关注核心功能,大大减少主界面中的导航控件数量 Tips:不要在抽屉式导航放置太重要的功能 5、下拉菜单式导航 可与滚动式导航结合 (三)移动产品模式设计之列表 1、垂直列表 https://blog.51cto.com/zhuxiaoxia/6543562
7.超全面的导航设计基础知识总结(一)目前市面上移动界面设计所使用的导航设计,基本分为以下(桌面式、选项卡式、列表式、侧边抽屉式、下拉菜单式、点聚式)6大基础导航模式,为了不断满足业务、用户需求,涌出(舵式、轮播式等)新颖的混合型导航模式。设计师们在基础导航模式上仍在不断做升级优化以及组合创新。 https://www.adinnet.cn/bloginfo/2018_07/blog_3745.html
8.移动端界面设计模式:导航设计的各个类型目前市面上移动界面设计所使用的导航设计,基本分为以下(桌面式、选项卡式、列表式、侧边抽屉式、下拉菜单式、点聚式)6大基础导航模式,为了不断满足业务、用户需求,涌出(舵式、轮播式等)新颖的混合型导航模式。设计师们在基础导航模式上仍在不断做升级优化以及组合创新。 https://www.sohu.com/a/240462313_114819