移动UI设计—全局导航

北京/UI设计师/9年前/1844浏览
移动UI设计—全局导航

全局导航包括列表式导航、选项卡菜单式等简单的菜单结构,只要打开有全局导航的应用,主导航的各个选项都一目了然。

主导航模式—全局导航

主导航模式—瞬时导航

主导航模式—次级导航模式


全局导航包括列表式导航、选项卡菜单式等简单的菜单结构,只要打开有全局导航的应用,主导航的各个选项都一目了然。

而瞬时导航必须通过点击或手势才会清楚地显示出来。由于智能手机屏幕尺寸有限,我们不得不思考如何打破屏幕地框架,于是这种导航模式渐渐地流行起来


先给大家介绍全局导航的模式:



1、跳板式导航



跳板式设计模式,也称为启动面板。该模式是有一个带有菜单选项的登陆界面,而菜单选项就是进入各应用的起点。

跳板式的主要缺点就是全部选项都扁平化,没有任何的优先级。至今还有很多应用仍在使用传统的跳板式设计。Windows Phone的磁铁模式将跳板模式发挥到了极致。

5f1b579cb9290000018c1b2f3023.jpg




2、卡片式导航


卡片式导航的原型是扑克牌,模仿了扑克牌常见的切牌、洗牌、弃牌、翻拍等手法。卡片式设计模式给出了一种展示内容的优雅方案。

5a9e579cb9450000012e7ea3ed2a.jpg




3、列表菜单式


列表菜单式中的每一个列表项都是进入该应用各项功能的入口,这一点和跳板式类似,并且模块之间的切换需要返回才能回到列表主页。苹果的设计规范称它为层级导航

在层级式应用中,用户通过在每一个页面选择进入一次进行导航,直至到达目标位置。要到达另外一个位置,用户必须原路返回几步(或者从头开始),然后做出不同的选择。“设置”和“邮件”是使用层级式结构应用的典范。

c2be579cb9580000018c1b55e2a6.jpg




4、仪表盘式


   仪表盘和跳板式、列表菜单相似。既可以作为主导航又可以作为次级导航。在使用关键指标或者数据作为应用入口的时候,可以采用仪表盘。

5d95579cb96a0000012e7e2f2334.jpg




5、陈列馆式


陈列馆式设计可用来呈现实时内容,比如新闻、菜谱或者照片,可以采用网格布局或者轮盘布局或者幻灯片布局。

陈列馆模式最适合呈现经常更新的、视觉效果直观的无层级内容。

834a579cb97b0000018c1b63285c.jpg




6、选项卡菜单式


IOS系统中标签栏限制在5个选项卡以内,如果应用中只要类别超过5个,可以把“更多”放在最右边的第五个选项卡上。

59fa579cb9900000018c1bde7ec4.jpg

有些应用中,主要针对单一操作的用户(比如开始跑步或者拍摄照片),把这一行为召唤action(一项优先的动作、行为)放置在标签栏上。

如果设计这种选项卡,就要突出选中的选项卡。

af66579cb9ab0000012e7e5a2eb7.jpg


折叠选项卡式(新生模式)

用户在滚动屏幕或者上下滑动页面的内容时,显示或隐藏工具栏。例如花瓣首页,向下滑动显示标签栏,向上滑动隐藏标签栏。

f6c7579cb9c50000018c1b885bb2.jpg




7、隐喻式(拟物式)


尽管现在视觉设计的审美倾向于扁平化设计,但是一些应用仍然能够通过模拟真实世界的物体和工具提升可用性。这种导航主要用在游戏中。

9e8d579cb9de0000012e7ed7235a.jpg


12
Report
|
13
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
Logo Design
Homepage recommendation
一楼咖啡
Homepage recommendation
大家都在看
Log in