恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
常见的导航类型总结
0.0°
2018-08-25 原创文章 经验/观点 举报 10245 29 39 0

整理了一下关于空状态的几种常见类型以及设计方法,也算是对自己现阶段所遇到的问题的思考与总结吧!文中图片均来自网络。

应用正确的导航模式,能够合理展示产品功能,减少用户学习成本,并快速引导用户如何使用,确保用户能够在你的应用中找到并使用其中有价值的功能,今天介绍一下移动端导航模中的几种类型,一个好的导航设计可以提高软件的易用性用户可以轻松的完成操作。


要介绍的导航类型

一 、跳板式(宫格式)

二 、卡片式

三、列表菜单式

四 、仪表盘式

五 、 陈列式

六、 选项卡菜单式


一、 跳板式

跳板式设计模式,也称快速启动板,各模块之间相对独立,模块之间的信息间也没有任何交集,无法相互跳转,一般作为主导航使用,这种模式一屏最多可以放置9个选项(常说的九宫格),通常还有2*3、2*2、2*1等布局形式,相比标签栏3~5个选项卡的限制,这种设计模式增加了选项容量并且可以进行更多选项的延展,所以承载的信息量更大,然而跳板式的设计模式是没有任何优先级的。


优点:

1、功能入口展示更加清晰,方便用户查找,提高产品易用性

2、可展示的选项卡更多,承载的信息量大,应用不规则布局可以突出某项功能


缺点:

1、各个模块内容之间切换较为繁琐,操作不灵活

2、入口的内容无法得到直接的展示

3、模块信息的次级内容展示收到限制


二 、卡片式

卡片式设计可以提高用户获取信息的速度,减少用户的思考时间,它来源于现实生活中的扑克牌,包含切牌、洗牌、弃牌、翻牌等交互形式,卡片式的设计也有利于自适应布局,它是以内容为核心,框架服务于内容的一种设计形式,在同一页面卡片可以以不同的形式承载不同的信息内容,相比于列表式导航更加丰富,但是卡片式设计对页面的空间消耗很大(这里指移动端),对于卡片中需要展示内容特别多的情况下会造成一屏展示的信息量极少,在这种情况下就不易使用卡片式设计了。

优点:

1、每个卡片都是独立内容,增强视觉聚焦、增强点击感

2、信息集中直观,减少用户思考时间,从而快速找到自己所需的信息


缺点:

1、不易展示过多信息

2、占用屏幕空间较多

3、不方便信息的搜索查找


三、列表菜单式

列表菜单式中每个列表项都是一个新的功能入口并且各个模块之间的切换都需要返回列表主页,一般作为次级导航使用,在少数应用中作为主导航使用,它可以高效、清晰的展示信息,可容纳信息较多,并且具有很强的延展性,可以不断的增加信息,导航效率较高,在使用这种布局的时候要注意列表最舒适体验的最小高度为80px高度不定,可以用来显示较长或者拥有次级文字的内容标题。


优点:

1、容纳信息较多所以能够详细解析说明功能的作用

2、符合用户浏览习惯(从上至下)

3、明确用户当前所在位置,便于查找


缺点:

1、不易展示过多功能条目,易产生浏览疲劳

2、进入功能后必须原路返回在进行其他操作,增加了操作成本

3、只能通过先后顺序区分功能之间的优先级和功能重要性


四、仪表盘式

仪表盘的设计模式能够让用户方便快捷的Get到他最需要的信息,而不需要点击进入下一个页面,通常在信息统计,数据对比等方面应用较为广泛,提高数据易读性。


优点:

1、使数据可视化,数据展示更加直观清晰,增加趣味性

2、表现形式多样,差异化区分明显


缺点:

1、页面空间耗费严重,不易把控

2、数据展示内容不易过多,易造成认知负担


五、陈列式

陈列式的设计模式主要通过直接显示内容项来实现导航,更多是展示彼此独立,没有层级关系的内容,例如:照片、视频等等。一般适用于经常更新,视觉效果直观的应用产品。


优点:

1、直接展示模块内容,信息传达明确

2、方便用户浏览,适用于经常更新的内容


缺点:

1、模块过多时容易造成页面混乱

2、设计形式略显单一


六、选项卡菜单式

选项卡菜单式更直观的展示出产品所包含的主要类别有哪些(这里指底部导航),用户可以直接从一个主类别切换到下一个主类别,但需要注意的是:确保选中的选项卡与非选中的选项卡之间要做出明确的区分,几乎大部分APP都会采用选项卡导航模式作为主导航,但是根据操作系统的不同,选项卡位置和设计也大不相同。


优点:

1、各个功能入口区分明显

2、明确显示用户当前所在位置,不易迷失

3、各个功能之间切换便捷


缺点:

1、展示数量受到限制(最多展示5个)

2、占用一定的高度空间


六 . 一、 固定选型卡

固定选项卡的位置和数量是固定的,同时显示多个顶级内容视图,方便浏览和切换,让用户知道有多个可供选择的视图,始终允许用户通过左/右滑动进行页面之间的切换,如果需要经常切换视图,内容视图有限或者需要让用户清楚地知道可供选择的视图,这几种情况下可以使用固定选项卡。


优点:

1、扁平化信息结构

2、各个视图之间切换便捷操作简单


缺点:

1、展示位置固定、展示数量受到限制

2、占用一定的高度空间,展示形式单一


六. 二、 折叠选项卡

用户在滚动屏幕或向下/向上滑动页面内容时把头部或底部导航隐藏或是收缩起来的形式,增大内容展示区域创建沉浸式体验,提高用户体验。


优点:

1、节省屏幕空间展示更多内容信息


缺点:

1、不易操作功能按钮需要滑动呼出


六. 三、 滚动选型卡

滚动选项卡不受数量限制,并且可以自定义选项卡的模块内容,可以左右滑动显示不同类别的视图,很好的解决了功能层级同等重要但限于数量问题无法展示的问题


优点:

1、可自定义展示模块内容

2、左右滑动让操作更加灵活

3、没有数量限制相比固定选项卡展示的同级内容更多


缺点:

1、选项卡数量过多时,各个功能入口之间的切换较为不便


总结

一款产品应该采用哪种导航更合适还得从产品的定位以及易用性的角度出发综合考虑,毕竟设计是来解决问题,而不是单纯从视觉层面觉得好看。以上是对全局导航的归纳梳理,可能有些地方写的不详细或者有遗漏,希望大家多多包涵,欢迎大家留言交流、别忘了点赞!哦!














更新:2018-08-25

收藏

29人已收藏

王雨_Vision

微信公众号:RVDesign

  • 55

    作品

  • 3535

    粉丝

  • 130

    关注

  • 营销动效怎么落地|用PAG动效,支持输出3D图层!
  • 动效探索祭
  • OPENERS ROLE ANIMATION
  • iLAB WebSite Design
相关标签
设计经验分享ui

    猜你喜欢

      2018-08-25 原创文章 经验/观点 举报 10245 29 39 0

      常见的导航类型总结

      0.0°

      你确定要举报常见的导航类型总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年08月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      39
      29
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录