火星网校
了解移动端导航设计？这里有最新资讯！
发布时间：2024-05-22 14:57:18 浏览量：101次
合理的移动导航设计能够尽可能地减少摩擦，引导用户去他们要去的地方。
这篇文章汇总了移动端导航设计最常见的样式、要注意的设计准则以及优秀的案例分析，一起来系统性地掌握这些知识～
一、什么是移动端导航？
简单来说，导航是用户从A点到B点的方式，是他们发现设计点并与产品交互的过程。
可能很多用户认为导航的目标是“在尽可能短的时间内让用户从A到B”，但时间短只属于操作结果，这个结果需要依靠合理且简单的设计才能实现。
二、移动端导航常见的设计样式
1. 汉堡菜单
围绕汉堡菜单有很多争论，但存在即合理，在合适的场景下汉堡菜单也能发挥大的作用。
来看一下汉堡菜单具备的优势：
- 视觉空间：节省屏幕空间，包含有价值的信息；
- 心智模型：大多数用户熟悉这种设计样式并知道如何操作；
- 使用经验：调节学习曲线，改善使用体验。
使用用户熟悉的设计可以事半功倍。例如美团和饿了么两个产品有着完全不同的主题色，但外卖点餐流程却是一样的，仍然是用户熟悉的操作，并没有因为产品的不同而改变点餐流程。
2. 底部导航
底部导航栏通常包含产品中最主要的导航链接，用户只需要简单的点击就能直观地在不同页面间切换。
3. 顶部导航
关于顶部导航，可以看之前分享的文章——《研究了100多个App后，发现了顶部栏UI设计的模式和规则！》里面详细介绍了顶部导航的设计方法。
4. 卡片式导航
卡片式是一种出色的设计样式，支持改变各种形状和大小，并且能展示文本、链接或照片等各种元素。
随着网络上的内容越来越碎片化和个性化，卡片是在页面中聚合单个信息的好方式。
5. 标签
标签往往是在一个大主题下同时支持多个选项，每个选项都转到不同的界面。
标签通常用于在同一页面中的几个视图之间切换，展示内容上的差异性。而顶部导航栏有主页、搜索、收藏夹等多个图标，代表不同的功能。
6. 基于手势的导航
基于手势的导航可以让用户在所需方向上快速滑动，来完成特定的操作。
这种样式的优点在于，即使最没有经验的用户也很容易掌握，因为手势通常是直观的，只需要轻微使用就可以正确。
7. 全屏导航
全屏导航是指将大部分屏幕用于导航操作，能够很好地将用户的注意力聚焦到具体的产品细节上。这是一种以连贯的方式提供大量导航的方法，可以立即帮助用户了解产品的功能。
8. 3D touch
最初是由苹果公司提供给用户的，这是一种创建导航快捷方式的方法，可以显示选定的APP的一些关键操作。
三、移动端导航设计准则
1. 导航需要直观明显
对所有类型的导航来说都是如此。在移动端中由于屏幕空间的缩小和交互成本的增加，导航体验的好坏会对产品产生很大的影响。
2. 考虑手指的位置
这点对于移动应用来说至关重要，没有用户想反复点击图标却没有反应。
3. 建立视觉层级避免混乱
小屏幕意味着更容易陷入混乱。即使页面中有少量的元素，如果元素没有平衡，用户仍然会有混乱的感觉。
四、移动端导航示例分析
1. Facebook
Facebook的导航构成比较复杂，融合了多种不同样式的导航。
2. Spotify
Spotif作为音乐流媒体业务的巨头，即使对于新用户来说，页面的设计也容易理解和探索。
3. App Store
App Store是使用标签进行导航的好例证，每个标签代表了同一内容的不同方面。
4. Telegram
Telegram可以供任何人使用，汉堡菜单提供了用户可能需要的所有关键导航选项。
5. Yelp
yelp在创建全屏导航体验时采用了一种稍微不同的方法。
6. Trello
页面中的卡片是拉长的矩形，整齐有序地填满屏幕空间而不会让用户不知所措。
7. Twitter
同样使用了多种导航混合的设计样式。
最后
没有高速公路，我们很难便利地在城市间穿梭。同理，如果没有导航，一款APP的使用也会遇到很多麻烦。导航就像高速，不断在为用户提供必要的指引！
火星时代教育致力于数字艺术教育，提供游戏设计培训、游戏程序培训、动画培训、原画培训、AI绘画培训等多项课程。想深入了解数字艺术？点击咨询来火星时代教育，打造数字艺术之梦！
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
