作品集灵感｜交互、UI设计师们必备的实用导航菜单设计详解！

导航菜单是人机交互的最主要的桥梁和平台，主要作用是不让用户迷失方向。一个网页或App产品要想有很好的可用性，需要做好的最基本的一点就是导航的设计或者说引导用户的设计。

无论你的产品想满足用户什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。好的导航设计不仅能提升整个产品的用户体验，而且还能让用户耳目一新。

一、什么是导航

导航毫无疑问是设计师设计产品可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动，并且实现他们目标的动作组合或者技巧组合。用户带着他们的期望和目标来使用你的网站或者产品，作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效，用户体验能得到极大的提升。

二、导航菜单的作用

提升产品内容和功能结构和层次

导航是产品的骨架，支撑着整体的内容和信息，让内容按照信息架构有机地结合在一起，直观而清晰地展示在用户面前，从而使零碎的内容变得充实而有序。结构化的同时也增强了生态感。

重点展示核心功能

每一款产品投入开发进入市场后，立身之本在于自己的核心功能。因此，核心功能必须放在用户触手可及的位置，次要功能的比重应该得到控制，展示上也不能喧宾夺主。通过导航就能很好的突出核心，适当隐藏次要功能。

简化用户操作

合理的导航系统和顺畅的任务路径，能够让用户快速地达到目标，形成畅快的用户体验。用户旅程的简化对于产品的用户黏度和转化率有着直接的作用，高效的导航能够直戳用户痛点。

三、APP常用导航的类型

列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计，使得菜单更多加美观。

GIF Aimation

Instagrab for iOS

矩阵、网格式菜单

网格式菜单就类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

Abracadabra App

TRAVERSE

Vectra

底部菜单

底部菜单主要是列出应用程序重要的功能。

Animated sliding tab bar

顶部菜单

顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循上至下的阅读习惯，缺点就是不能单手操作。

Horner

Discovery Channel

Air flow calculation app

Shario App

扩展菜单

扩展式菜单设计现在连网站也很常用，当我们觉得菜单比较占用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部分设计在左或右上角这些显眼的位置。

MuSeek

Univit UI

SVOY app design

Időkép

越来越多的设计师意识到导航栏菜单对提高用户体验的重要性。良好的UI设计，通常会帮助用户解决问题，确保可用性和易用性，而这些经过设计师反复打磨和验证过后的相对经典的设计最佳实践，则被视作为设计模式。

希望申请艺术留学的小伙伴们看了后会有灵感收获，让作品集制作中的菜单设计更加出众。