APP-导航设计

APP导航承载着用户获取所需内容的快速途径。它看似简单,却是产品设计中最需要考量的一部分。APP导航的设计,会直接影响用户对APP的体验感受。所以导航菜单设计需要考虑周全,发挥导航的价值,为构筑“怦然心动”的产品打下基础。

APP导航,按排列方式分为:列表式和网格式(矩阵)两大类,再由此演变成其他类别。

常见的主导航有:标签式、抽屉式、菜单式、桌面式、点聚式等。主导航和二级导航也可以相互转化,即列表式与网格式的相互转化。


一、标签式导航 易用性:★★★★★ 趣味性:

标签式导航是最常见的一种导航形式,它能让用户直观了解到APP的核心功能,与此同时使用上能够在几个标签中快速切换。标签的分类最好可以控制在5个以内,视觉表现上需把当前用户位置突显,页面间的切换快速又不容易迷失,简单高效。标签栏位置也可根据需要融入LOGO或者产品核心功能(如拍照)等,丰富标签栏的样式。 二、抽屉式导航 易用性:★★ 趣味性:


抽屉式导航强调内容,凸显内容,弱化导航界面。抽屉式导航在形式上一般位于当前界面的后方,通过左(右)上角或指滑动手势呼出。带有动画效果,形式上比较吸引眼球。由于导航界面是隐藏在屏幕之外,展开之后整一页面都是导航菜单内容,所以可扩展和个性化的空间很大。但是有利也有弊,由于是整个导航的隐藏,先是用户不易发现,再是给用户在切换功能带来了操作成本。到达导航菜单界面之后也需有明确的提示告知用户当前位置,防止用户“迷路”,这也是许多抽屉式右(左)侧留有前界面的原因。

三、桌面式导航 易用性:★★ 趣味性:★★


桌面式导航,类似PC或手机桌面的各个应用的入口。每个入口相对的内容比较独立,一般进入某个入口之后只处理相关该入口的内容。若要到其他入口就需要再返回总汇界面,也就是最初始的位置。这种导航方式在工具类或者杂志类比较适合,每个工具或者杂志的类型都各不相同。但这种导航不适合需要频繁切换任务的情况,目前桌面导航作为主导航的应用比较少,多用于做二级导航。

四、菜单式导航 易用性:★★ 趣味性: ★★★

菜单式导航,与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单。导航菜单以浮窗形式为于界面上层,可通过点击导航菜单以外的区域使其收起。菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置。但由于是位于屏幕上方,相对隐蔽而且不能结合手势操作,所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。

五、点聚式导航 易用性:★★ 趣味性:★


点聚式导航,它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。由于点聚式占用空间小,所以它常出现在一些主要的流程界面中。一般会融入一些动态的互动效果,让导航更具趣味性。在渐渐的演变中,点聚式会搭载其他导航样式出现(如标签式)。

在设计过程中,按照实际需求,结合内容选择最为合适的导航形式,切忌跟风或者先从形式入手从而忽略导航菜单自身的特点。

文章来源:站酷

文章作者:SSSStorm

(0)

相关推荐

  • App导航设计全面梳理——附免费原型模版!

    生活中大家或多或少都会有迷路的,但你是不是从来没思考过迷路的定义是什么? 迷路的定义其实有两个核心: 1.想要到达一个目的地. 2.不知道自己在哪里,应该往哪走. 和生活中的迷路一样,用户在使用APP ...

  • APP导航交互设计解析

    小编:APP的导航样式多种多样,但主要的是你得找到一种适合你的APP模式的导航交互.今天分享了25学堂总结的8个APP导航的交互方式,并有分析如何漂亮的应用它们. 首先,我们来看一下一个叫做原始导航的 ...

  • 干货分享!关于APP导航菜单设计你应该了解的一切

    导航菜单是人机交互的最主要的桥梁和平台,主要作用是不让用户迷失方向.现在市面上产品的菜单栏种类繁多,到底什么样的才是优秀的导航菜单设计呢?好的菜单设计不仅能提升整个产品的用户体验,而且还能让用户耳目一 ...

  • 设计师进阶笔记!APP导航的设计套路

    背景 产品同学要做一款新APP,对导航犯了愁.而在两大设计规范中,均为我们指出了如何设计APP导航,前人的文章中也有不少总结,在此作一次梳理,供自己内化也给各位读者分享. 精华浓缩版 导航设计四步走: ...

  • APP导航该如何取舍?

    小编:手机App 的导航该如何呈现,使用频率才会高?本文中原作者在真实的 App 中对导航进行改版,观察数据并进行分析.大家可在此基础上决定自己的APP导航该如何取舍. 在移动界面设计中,使用各种菜单 ...

  • 【新手指南】App原型设计:如何快速实现这6种交互效果?

    做App原型设计,那么页面切换.进度条.页面滚动.图片轮播,下拉菜单,搜索框这些交互效果必不可少.如何简单快速地实现这些效果呢?以下小编根据为大家提供了一些简单的设计方法,以供参考. 1.页面跳转 作 ...

  • 30个APP导航菜单(设计欣赏)

    30个不同形式的菜单欣赏,让你一次看个够~!这些是做APP的时候,常用的菜单形式,基本上排版的形式全都到齐了.大图请前往app.xueui.cn的菜单导航里去取. 推荐阅读: APP登录注册页面欣赏 ...

  • 如何设置百度地图App导航时总是显示终点连接红线

    今天,小编给大家介绍设置百度地图App导航时总是显示终点连接红线的方法,希望对大家有所帮助.具体如下:1. 第一步,请大家在自己的手机中找到[百度地图]图标,点击进入主界面,然后选择屏幕左上方的[个人 ...

  • 手机百度地图app"导航比例尺智能缩放"如何设置

    当我们使用百度地图的时候,可以对导航比例进行一定程度的调整.今天小编就告诉大家手机百度地图app"导航比例尺智能缩放"如何设置..具体如下:1. 首先我们打开手机中的百度地图app ...

  • 如何设置腾讯地图APP导航时屏幕常亮

    今天给大家介绍一下如何设置腾讯地图APP导航时屏幕常亮的具体操作步骤.1. 首先打开手机,然后在桌面找到腾讯地图APP,打开.2. 然后进入主界面,选择左上角的个人头像进入.3. 然后在新的页面选择右 ...