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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
每日分享:4.组件详解——导航
0.0°
2019-10-14 原创文章 规范/资料 举报 917 6 4 1

什么是导航?


导航顾名思义,导航就如同目录和地图,为用户提供更清晰的用户体验,能够让用户快速、准确的找到所需内容,起到引导作用。


其实页面中点击后可以跳转到另一界面的所有文字、图片、图标或按钮都可以称为导航。所以它其实包括非常广泛,一个界面中往往有多层级的导航。比如淘宝:

Image title




导航分类


大多数平台设计规范中指的导航包括以下导航类型:底部导航、顶部导航、抽屉式导航、左侧导航、下拉式导航、宫格式导航。

Image title



标签导航(tab bar)


而我们常说的手机端界面中的标签导航(tab bar),即底部导航、顶部导航、抽屉式导航,也是所有导航中最常讨论的部分。下面我们来分析三种导航的特点:


1.MD规范(安卓)的设计中导航主要采用顶部菜单栏、侧边菜单栏。iOS的设计中主要采用底部菜单栏。这是因为安卓手机底部自带三个按键,处于底部的导航容易和这三个按键发生误触。但就现在手机大屏趋势,底部导航更适合单手操作。越来越多的app无论安卓还是iOS端都采用了底部导航栏,两个系统的app界面设计也差别越来越小。但设计师还是需要考量设备的不同,选择最佳导航方式。


2.层级:几种导航可以同时存在同一个界面中。但底部导航的层级最高,常用为一级导航,其中每个 tab 承载了应用的一个维度的功能。进入二级界面后,底部导航是否继续存在,取决于二级界面需要沉浸式体验还是让用户发现、探索新内容。例如淘宝希望用户进入商品列表后继续浏览,则不出现底部导航,让用户沉浸在琳琅满目的购物体验中。而apple store 等app则鼓励用户搜索和发掘新应用,因此二级界面下底部导航的存在方便了用户。


3.底部导航:建议底部图标3-5个。当前选中图标需要与未选中图标区分,明显,还可以加入文字描述。适量加入动画效果,让界面活泼生动。


4.顶部导航:可以多个,但需要保证足够的间距。若分类较多,可以左右滑动拖出其他分类选项(滑动式顶部导航)。样式以文字为主+下方矩形条强调。


5.抽屉导航:抽屉导航的菜单往往打开新开页或弹窗,关闭新开页后返回主界面(抽屉关闭状态)。




 

                                        是不是觉得导航其实很简单!


更新:2019-10-14

收藏

6人已收藏

修炼中的DOT

树一心,为设计。

  • 9

    作品

  • 24

    粉丝

  • 39

    关注

  • 关于“用户体验”
  • 每日分享:8.组件详解——反馈类
  • 每日分享:7.组件详解——数据类
  • 每日分享:6.组件详解——按钮
相关标签
导航UI设计规范

    猜你喜欢

      2019-10-14 原创文章 规范/资料 举报 917 6 4 1

      每日分享:4.组件详解——导航

      0.0°

      你确定要举报每日分享:4.组件详解——导航

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年10月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      6
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录