合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。

这篇文章汇总了移动端导航设计最常见的样式、要注意的设计准则以及优秀的案例分析,一起来系统性地掌握这些知识~

什么是移动端导航?

简单来说,导航是用户从 A 点到 B 点的方式,是他们发现设计点并与产品交互的过程。

可能很多用户认为导航的目标是“在尽可能短的时间内让B x I J u p &用户从 A 到 B”,但时间短只属于操作结果,这W Y G 3 ( A s个结果需要依靠合理且简单的设计才能实现。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 一个页面中可以存在多种导航。例如在油管首页,有Q s o 4 L C [ s S顶部导航栏、筛选器导航和底部导航,这些导航相互搭配为产品助力。

移动端导航常见的设计样式

1. 汉堡菜单

围绕汉堡菜单有很多争论,但存在即合理,在合适的场景下汉] y E ;堡菜单也能发挥大的作用。

来看一下汉堡菜单具备的优势:

  • 视觉空间:节省屏幕空间,包含有价值的信息;
  • 心智模型:大多数用户熟悉这种v M ! W , ! } G设计样式并知道如何操作;
  • 使用经验:调节学习曲线,改善使用体验。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 使用用户熟悉的设计可以s . \ Q [ F $ r }事半功倍。例如美团和饿了么两个产品有着完全不同的主题色,但外. ; w 9 f # T卖点餐流程却是一样的,仍然是用户熟悉的操作,并没有因为产品的不同而改变点餐流程。

2. 底部导航

底部导航栏通常包含产品中最主要的导航链接,用户只需要简单的点击就能直观地在不同页面间切换。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 几乎每款产品都缺少不了底部导航栏,它方便用户单手操作,不需要太费力就能快} = ) &速访问产品~ 4 8 C d 5 c A .页面,提高可用性。

3. 顶部导航

关于顶部导航,可以看之前分享的文章,里面详细介绍了顶部导航的设计方法。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 顶部导航通常Q & O S 7 y ` v t包含页面中最重要的信息,与其他辅助导航结合使用。

4. 卡片式导航

卡片式是一种出色的设计样式,支持改变各种形状和R $ +大小S $ & A ? D =,并且能展示文本、链接或照片N _ ` ] t $ 6 d等各种元素。

随着网络上的内容越来越碎片化和个性化,卡片是在页面中聚合单个信息的好方式。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 为了改进体验,卡片可以个性化显示不同的内容。另外卡片很: _ f f ^ V E N D容易适应不同的屏幕尺寸,配合响应性设计。

5. + n P 6 U l

标签往往是在一个大主题下同时支持多个选项,每个选项都转到不同的界面。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 标签通常用于在` B , O同一页= n U A N T z面中的几个视图之间切换,展示内容上的差异性。而顶部导航栏有主页、搜索、收藏夹等多个图U / e (标,代表不同的功能。

6. 基于手势的导航

B \ U ] E \ = (于手势的导航可以让用户在所需方向上快速滑动,来完1 ) 2 M g N h ^成特定的操作。

这种样式的e = S z Q I优点在于,即使最没有经验的用户也很容易掌握,因为手势通常是直观的。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 国外大火的约会产品Tinder以及国内的探探,都使用了基于手势的导航样式,为用户带来滑动的乐趣。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 基于j k O 3 G b C H手势的导航并不是Tinder发明的,但这款产品无疑将这种流行带给了大众。经典的向左或向右滑动模式保持了事物的动态性、简单性和娱乐性。

7. 全屏– = ; } _ y u A n导航

全屏导航是指将大部分屏幕用于导航操作,能够很好地将用户的注意力聚焦到具体的产品细节上。这是一种以连贯的方式提供大量导航的方法,可以立即帮助用户了解产品的功能。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 点击图片可以跳转到全屏% ; F + H大图导航中,能够更清c A !晰地查看商品的外观状态。

8. 3D touch

最初是由苹果公司提供给用户] s – I的,这是一种创建导航快捷方式的方法,可以显示选定的 APP 的一些关R u | N键操作。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 苹果为手机创造了d ) 6 I] I ~ 3 p g d [种全新的快捷方式,同时提供了强大的可用性。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 3D touch另一个用途是内容预览,在处理内容选项时例如收件箱或文章列表时,这是给用户提供| 3 \ ` D } , ^预览的好方法。

移动端导航设计准则

1. 导航需要直观明显

对所有类型的导航来说都是如此。在移动端中由于屏幕空间的缩小和交互成本的增加,导航体验的好坏会对产品产生很大的影响。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 从可用性角度来看,直观的导i p V Z s #航对目标用户来说至关重要。这意味着需要进行b b J c严格的测试和大量的研究,可以使用卡片分类或树状图等方法来验证导航的可用性。

2. 考虑手指的位置

这点对于移动应用来说至关重要,没有用户想反复点击图标却没有反应。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 链接和按钮的尺寸需要足够大,w # 3 M u k !以便大多数用户在第一次点击时就能成功点击z r F e [ k P b。页面( _ a V Q W M 0中按钮的尺寸最小通常保持在10mm。

3. 建立视觉层级避免混乱

小屏幕意味着更容易陷入混乱。即使页T Z | w w n T s \面中有少量的元素,如果元素没有平衡,用户仍然会有混乱的感觉。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 极简主义是UI设计的一种特定风格,通过必备的顶部导航栏、留白以及由大小、版式、颜色划分的视觉层级来规划页面内容。

移动端导航示例分析g $ D 3 i F #

1. Facebook

Facebook 的导航构成比较复杂,融合了多种不同样式的导航。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ Facebook主页包括汉堡菜单、顶部导航N O T n \ o栏和底部导航栏。通过这0 C m M A种方式,这家社交媒2 ; ~ & o A d u b体巨头明确的将主要内容与次要内容分隔开! [ 6 a

2. Spotify

Spotif 作为音乐流媒体业务的巨头,即使对于新用户来说,页面的设计也容易理解和探索。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 以高度视觉g % z化的形式突出每张卡片背后的关键内容,另外底部导航也可以完成繁重的任务指引。

3. App Store

Appc I X [ B H ~ 1 G Sto| w = Gre 是使用标签进行导航的好例证,每个标签代表了同一内容的不同方面。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 在排行榜中,用户可以浏览付费、免费和C } ! e b d 8 =热门的标签页,从而快速建立一致性和对其他页面的感知。

4. Telegram

Telegram 可以供任何人使用,汉堡菜单提供了用户可能需要的所有关键导航选项( ~ c y U $ [ a l

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 每个用户都能立即找出汉堡菜单,非常容易使用和理解,而且几乎不占用界面中的宝贵空间。

5. Yelp

yelp 在创建全屏导航体验时采用了一种稍微不同的方法V e = E e I B

你了解移动端导航设计吗?收下这篇系统性的总结!

△ Yelp将屏幕划分为两个不同的区域,实际上并没有将整个屏幕专门用于导航选项,而是将顶部用于导航选项,并在底部f u , q m %留下更多的负空间。

6. Tr? 5 U K Sello

页面中的卡片是拉长的矩形,整齐有序地填满屏幕空间而不会让用户不知所措。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 卡片系统很好地代表了Trello简化复杂工作流程的能力,为用户带来整洁和方便。D 0 J f C

7. Twitter

同样使用了多种导航混合的设计样式。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ Twitter将导航重, : h w v C + P点放在底部栏上,涵盖了整个平台中四个主要的方面。

最后

没有高速公路,我们很难便利地在城市间穿梭。同理,如果没有导航,一款. J L O | c = ; _ APP 的使用也会遇到很多麻烦。导航就像高速,不断在为用户提供必要的指引!

如觉得有帮助,欢I U u E x s ,迎关注作者微信公众号:「: V $ $ c QClip设计夹」

你了解移动端导航设计吗?收下这篇系统性的总结!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注