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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
移动UI设计模式-主导航篇
0.0°
2016-07-06 原创文章 经验/观点 举报 3350 11 11 0

主导航在移动手机APP中具有非常重要的意义

设计精良的导航可以帮助用户凭直觉顺利的使用产品,完成任务,主导航在整个app中具有特殊的意义(基本都是在首页)。

浩哥本人小的时候学过书法,当时老师说,学书法要“先有法”“到无法”意思是说,先要在那会死放下自己的那一套,学习别人全新的东西,最后将别人的东西学到手与自己融会贯通达到随心所欲收放自如的效果,所以我建议新手学东西首先要有学习一些前人总结的固定模式,熟练掌握后再融会贯通。这样的学习才是最有效率的。

今天给大家重点介绍6种导航样式

1:跳板式

2:列表式

3:选项卡菜单式

4:陈列馆式

5:隐喻式

6:超级菜单式


下面我们来逐一介绍下这6种导航样式

跳板式

没有操作系统的特殊要求,在各种情况下都有良好表现,也称快速启动版可以是规则的网格布局,也可是不规则的。


       


列表式

每条列表菜单都是进入应用个功能的入口比较适合展示较长,活着拥有次级文字内容的标题。


        


选项卡式

选项卡方式的导航在不同的操作系统上表现会有不同,对选项卡空间的定位和设计有不同规则。

例如iOS把选项卡放在页面底部,方便拇指点击操作。

设计特点:

为已选择的选项设置特殊的状态。

使用易于识别的图标。


      


陈列馆式

在平面上显示实际内容的缩略图,多数采用网格布局(多用在摄影摄像类产品中)适合用户需要经常浏览,频繁更新的内容。




隐喻式

用页面模拟隐喻对象。(主要用在游戏中,淡一些日记,书籍产品中也有使用)

         


超级菜单式

移动设备上的超级菜单与网站所用的超级菜单类似,特征是在较大的覆盖面板上分组显示定义好的子菜单选项。在选择此种导航之前,线确定信息架构,如果要导航的对象很少,那么不建议采用超级菜单。选项卡是个不错的选择。




二级导航

二级导航是指也叫次级导航,位于某个页面或者模块内部的导航,大部分时间里之前介绍的6种导航类型是可以在主导航和刺激导航种灵活使用的。



主导航是选型卡式,次级导航是列表式




主导航是选型卡式,次级导航是跳板式


还有一些特殊的导航样式,天生就是老二的命!

比如```

页面轮播式

通过滑动来浏览相应的内容,但是具有一定的局限性。页面超过8个的时候就不建议使用这种样式。

       


扩展列表式

可以很好的展示某个内容项,更多的细节和选项。


这些移动设计模式,主导航的几个形式,虽然不能让你一下成为业界大牛,但是它绝对可以让你以最有效率的方式了解行业规则,制作出符合业界规范的首页主导航,将这些基本的原理熟记于心,将来融会贯通灵活的使用才有可能。

Image title

Image title




更新:2016-07-06

收藏

11人已收藏

小浩哥

UI设计交流群1群已满,请加490301703.

  • 128

    作品

  • 2812

    粉丝

  • 15

    关注

  • 小浩哥全栈UI设计闲暇训练营学员作品(IP设计阶段部分)1
  • 京东设计师公益课-“零基础学会C4D"
  • 2020,小浩哥训练营学员作品
  • 大咖导师“零基础教你玩转电商c4d”

    猜你喜欢

      2016-07-06 原创文章 经验/观点 举报 3350 11 11 0

      移动UI设计模式-主导航篇

      0.0°

      你确定要举报移动UI设计模式-主导航篇

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年07月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      11
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录