建材秒知道
登录
建材号 > 设计 > 正文

导航设计

有魅力的跳跳糖
潇洒的小兔子
2023-03-02 03:46:50

导航设计

最佳答案
生动的小土豆
美好的百合
2025-07-06 04:01:59

此文章讲解了什么是导航设计到导航设计的各种类型如何运用到自己的项目当中去.

希望该文章能够给你带来帮助

1、明确用户角色和任务流程

2、搭建清晰合理的信息架构

3、灵活运用导航模式

4、利用推荐算法来简化、关注拇指操作热区来创新

1、明确了用户群体和核心任务之后,就可以解构功能流程、通过信息架构来搭建app的骨骼

2、合理的信息架构

从用户认知出发 :卡片分类法、让用户自己的认知来组织功能点,具体分为封闭式分类和开放式分类

封闭式分类由产品自身特点设立部分分类

开放式分类完全由用户自行分类

划分优先级:明确哪些是最重要的、次要及不重要的.

可以从三个维度来评估需求强弱、使用频率、任务数量、辅助一决策工具、获取最优解.

1、可达性:

移动应用的导航功能可以说是所有页面最重要的组成部分,因此一定要保证其可达性,并把最关键的要素尽量突出,同时不要影响到内容本身。

2、目的性 :

确保导航中的每个按钮要素简单明了,有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什么。但是不要弄得太过花哨,这样会迷糊用户,起到发作用。

3、易于理解:

如果想设计比较高端的导航功能(例如链接图片、允许滑动或其他手势导航,或者访问隐藏菜单),务必在设计过程中前后保持一致,以便用户熟悉你所使用的模式,同时还加入一些额外的信息(例如小箭头、文字或改变颜色或高亮等)来吸引用户的注意力,并以微妙的方式对用户进行引导。不要给用户呈现“看得见摸不着的导航功能”。

4、通用性:

导航功能应当以一定的形式显示与移动应用的各个界面。各个导航模式不一定要完全相同,但其基本结构应当在应用内保持一致,可以根据背景进行小幅度调整。

1、多个高频需求

2、单个高频若干个低频

3、单个高频无低频需求

1、平面导航 : 最常见的标签时导航、可上方、下方但一般都是在下方

2、分层导航 : 是展现功能架构的父子级,每个页面都有一个子级、直到抵达终点. 要去往另一个终回到父级,从头选择另一个子级.

3、内容驱动导航 : 多见游戏化娱乐型产品,这类具备丰富的多样性

4、抽屉式导航 : 隐藏、收起非核心的操作与功能

跳板式/桌面式:

宫格式导航也叫跳板式导航与快速启动版,是一种类似于手机桌面各个应用入口的导航方式。每个入口的信息都是比较独立的,用户进入一个入口后,只处理于此入口相关的内容,如果要处理其他入口内容,必须要先回到入口总界面。将主要入口全部聚合在页面,让用户做出选择。采用这种导航的应用已经越来越少,往往是用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。可以做一级导航以及二级导航也可称为数据入口。

优点:功能扩展性性强可以增加多个入口。

缺点:单项承载信息能力弱,层级深不合适频繁的任务切换。信息互斥,无法给互相通达。只能给用户带来更多的操作步骤。无法让用户在第一时间看到内容,选择压力较大。

宫格式导航适合入口独立互斥,且不需要交叉使用的信息归类。

标签式 :

标签式导航,也就是Tab式导航,是IOS平台上公认的最经典的导航模式,市场上80%的应用都在使用,标签式导航关注的是平行空间的展示。

标签栏中可以变形,但不能做导航来使用,而是一个行为召唤按钮,行为召唤按钮是强调某项重要功能的快捷实用,该功能需要是应用最核心且最常用的功能,优先级很高。

优点:适用于多个内容体系,且重要程度相似平级关系,能频繁在不同页面切换,且切换成本              低,只需要一次点击即可。

缺点:占用一定高度空间,且标签数量有限最多5个标签。

选项卡式:

导航在android平台上与ios平台上有不同的规范,规范就不多说了。主要说ios上选项卡的表现,选项卡导航的本质是实现容器内不同视图或内容的切换。目前市场上主要3种形式的选项卡:可分为分段式、固定式、滑动选项卡。

分段选项卡是由两个或两个以上宽度相同的分段组成,正常情况下不会超过4个。在视觉上会有一个很明显的描边按钮。分段选项卡经常作为二级导航,对主导航内容再次分类,即可在顶部导航的下方,也可在顶部导航栏上。

分段导航的缺点是标签之间相互关联,只能点击切换,操作效率较低。

固定选项卡于滑动选项卡,两者都可以直接点击或左右滑动切换选项,且一级和二级导航都能使用。他俩的区别就是滑动选项卡可以有更多选项,直接通过手指滑动导航找分类,适用于相关类别多的应用。

列表式导航:

结构清晰、易于理解、冷静高效、能够帮助用户快速的定位去到对应的界面。这种导航也是一种十分常见的导航模式,纯粹的列表时导航很少见,一般都是搭配着其它的导航来一起使用,大部分都是依附于标签导航之上的,在二次层级上,它们还会将列表分模块进行展示。列表中可以放置图片、标题或者详情文字来展示信息,列表本身是一个传达信息效率很高的载体,因此使用列表的时候要注意每个列表所占的屏幕空间,以及每屏能够显示多少条列表等。

有几种常见的形式列表

分组模式:有多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题。             

标题式列表:一般只显示一行文字有的显示一行文字加一张图片。                                         

内容式列表:主要以内容为主,所以在列表中就会体现出部分内容信息,点击进去就是详情。

抽屉式:

目的:是带给用户更为沉浸的体验。

特点:阅读为王,点击切换少,专注于主题信息本身。

表现形态:抽屉式导航很符合产品的二八法则,产品中只有20%的功能常用,所以要凸显剩下的80%不常用,因此要隐  藏,隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去。

优点:它不像标签导航一样强调平级关系切换,而是突出重要核心的功能。侧边导航收纳的标              签可以是5个以上,节省屏幕空间。

缺点:无法快速完成导航切换,操作成本高,可见性低。

何种情况下适合使用抽屉式导航:如果应用的功能和内容都在一个页面里边。只是一些低频操  作内容需要显示在其他页面里边,为了让主页面看上去干净美观,可以选择把这些辅助            功能放在抽屉栏里。

注: 需要用户有一定参与的信息层级,最好不要放置在抽屉栏中。

如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中。

在大屏时代使用抽屉栏,手势操作显得尤为重要,从屏幕边缘唤出抽屉栏是个很好的选择。

抽屉式导航在android平台上比ios更常使用,由于ios上,抽屉导航没有专门的设计规范,所以使用上比较随意,表现形式也不受拘泥。

主要风格分为三种:1.浮层,导航抽屉处于主页上层。2.叠加式,导航抽屉处于底部。3.嵌入层,导航和主页处于同一层。详细见下图

下拉菜单式:

下拉菜单式导航并不常用。下拉菜单和抽屉导航类似,是以突出内容为主的导航模式,一班位于产品顶部。一般情况下,下拉菜单很容易被滑动选项卡取代,且滑动选项卡可以结合手势操作,使用的效率更高,要做下拉菜单式导航要有很明显的优先级区分。

优点:节省屏幕空间

缺点:不适合结合手势,操作负荷大,不能频繁却换功能。

下拉菜单式常用的有两种一种是由顶部滑出,一种是由底部滑出

点聚式

是将导航页面分层,无论你达到APP的那个页面,悬浮ICON都是永远悬浮在上面,你依靠悬浮层随时可以去想要去的地方。

注:悬浮icon会遮挡某些页面的操作,在设计的时候应该要考虑进去,无论在那个页面永远为悬浮icon留有位置。它更适应大屏的导航模式,注意不要让它遮挡住某些页面的操作。

最新回答
勤劳的眼神
从容的绿草
2025-07-06 04:01:59

移动端导航UI 设计5种常见方式

用户使用一款新的移动端APP 软件时,借助导航是其最快了解这款APP 的途径。因此,导航的设计是设计师们在整个移动端UI

界面设计中最关键的点,也是用户判断一个APP

是否“好用”的关键。试想,如果一款软件的导航功能非常复杂,无法给用户的日常生活带来便捷,那么,这款软件迟早是会被市场淘汰的。

本期我们整理了5种现有移动端导航的设计方式,每种方式都有其自身的优势和劣势,设计师们可以针对具体APP

的功能,及用户群体的实际需求,选择其中的一种或者两种搭配使用。

1. APP 标签式导航——最常见、最保险

标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。它的缺点是会占用一定高度的空间。

2. APP 抽屉式导航——适合信息层级多的界面设计

抽屉式导航常常与标签导航结合使用。如果一款产品的信息层级非常多,一屏无法将所有内容全部展示,这是便可选择抽屉式导航,将部分菜单隐藏,突出核心功能,节省页面展示空间。同时需要注意,这款导航的设计一定要提供菜单画出的过渡动画。

3. APP宫格式导航——不适于APP 的主导航

宫格式导航是将主要的菜单入口全部集中在同一个页面,每个宫格相互独立,相互的信息间也没有任何交集,无法跳转互通。也因为此,宫格式导航不建议使用在APP

的主导航设计中,可以用在二级页作为内容列表的一种图形化形式呈现。

4. APP悬浮式导航——适于大屏的导航模式

APP 中的悬浮式导航,是将导航页面分层,无论APP

的哪个页面,悬浮导航键永远悬浮在页面之上,你依靠悬浮导航随时可以使用想用的软件。但需要注意的是,不可让悬浮式导航遮挡住原本界面的应用。

5. APP列表式导航——必不可少的应用

列表式导航通常用于APP 设计的二级页,这种导航结构清晰,易于理解,能够帮助用户快速定位去到对应的页面。

聪慧的大碗
高挑的小甜瓜
2025-07-06 04:01:59

生活中大家或多或少都会有迷路的经验,但你是不是从来没思考过迷路的定义是什么?

迷路的定义其实有两个核心:

1.想要到达一个目的地;

2.不知道自己在哪里,应该往哪走。

和生活中的迷路一样,我们在使用APP过程中也可能会「迷路」。因为我们使用APP时同样需要到达一个页面,如果没有合适引导,我们很难知道他需要怎么跳转才能到达自己想要的页面。在APP中,导航设计起到的正是这种关键作用:让我们了解自己此时在哪个页面,自己想要到达某个页面应该怎么跳转。

下面我们通过实例从是什么、为什么、怎么做这三个方面来介绍一下目前APP设计中最常用的几种导航。

一、底部标签导航

1.简介

底部标签导航是APP中最常见的导航。

为什么它会是最常见的?就像超市把利润最高(最想卖给顾客)的商品摆在顾客触手可及的地方一样,APP最核心的功能通常也应该放在用户触手可及的地方。在我们握持手机时,屏幕底部区域恰好是大拇指最方便触及的区域。因此大多数APP产品才会选择底部标签导航的形式来呈现产品核心功能。

2.设计特征

1)通常作为APP的一级导航(主导航)。

原因同简介里的解释。

2)标签数通常为3-5个。

为什么不更多?因为大拇指触摸屏幕时的接触面积较大,一旦标签数超过5个,每个标签的所占面积不足,将会使正确的标签点击选择变得困难,甚至导致误点击。

3)标签通常是图标+文字形式的。

标签通常可以有文字、图标、文字加图标这3种设计形式,为什么非要用图标+文字?首先,文字的意义指向性强于图标。举个例子,一个X,可以表示关闭,也可以表示错误,甚至可以表示未知数,但「关闭」这两个字表示的就是关闭。其次,人类作为视觉化动物,对图形比对文字敏感。综合起来,图标+文字的形式是意义指向最准确的形式,也是让我们以最快理解标签含义(功能)的形式。

4)标签顺序通常按功能优先级从左至右排列,第1个标签显示产品主页面。

为什么?因为凡有排列,在视觉上必有顺序。有顺序,必有优先级。因此第1个标签通常显示产品主页面,或者说放置最核心的功能。

5)如果标签数多于5个,但依然要使用底部标签导航,可以把最右侧标签设计为「更多」,然后点击「更多」会显示更多功能。

这就像产品调研的问卷设计中我们设置选项一样,有时候我们需要让选项互斥,但选项数量又很多,这个时候我们可以把重要性低的几个选项合并成一个选项叫「其它」。

6)标签对应功能模块间通常有高频次切换需求,且功能层级相当。

7)通常用户所在页的标签需要突出显示(正常是通过颜色差异和标签图形变化来突出)。

为什么?因为要让用户在APP中不「迷路」,一个至关重要的点就是让他知道自己现在在哪。

8)底部标签在特定情况下可以做成沉浸式的。

为了增加页面的展示空间,让用户能更专注(沉浸)于页面内容,比如说内容阅读类产品,底部导航可以设计成上滑时隐藏、下滑时显示的形式。但这种设计可能会导致使底部标签导航失去其原本在标签切换中的便捷性,使用时需要慎重考虑。

9)考虑到大屏手机的单手操作,底部导航标签有时会采用左滑右滑切换标签的交互。

3.优缺点

1)优点

可以直观展现APP的核心功能页面及入口;

我们可以在不同的功能模块间进行快速切换。

2)缺点

作为页面固定显示的内容,会挤压页面其它内容的显示区域,进而降低页面的信息承载量。

4.原型设计实现案例

底部导航

点此查看原型实例

 二、舵式导航

1.简介

舵式导航本质是底部标签导航的变式。那么舵式导航为什么要叫舵式导航呢?首先是形似,其次是因为舵式导航中最重要的导航就像舵在船的航行中一样重要。即一个底部标签导航中,有一个功能标签相比其它功能标签来说更重要、突出,更需要强调。

2.设计特征

1)有一个核心功能比其它功能更重要,更需要强调。常见于UGC产品,比如微博、闲鱼、抖音以及原型案例中的小红书。

2)算上需要强调的标签,标签数量通常为3个或者5个。

为什么?和船的控制室的对称式设计一样,当有标签需要突出的话,两边的标签在视觉上则要设计成对称的。

3)舵这个概念在标签上的呈现,也就是突出的形式。既可以真的有舵的形,也可以只给标签做简单的差异化设计。

前者的例子:闲鱼。

后者的例子:微博、抖音、小红书。

3.优缺点

1)优点

可以直观展现APP的核心功能页面及入口;

我们可以在不同的功能模块间进行快速切换;

可以凸显核心、频繁使用的功能,引导用户使用该功能(比如产出内容)。

2)缺点

作为页面固定显示的内容,会挤压页面其它内容的显示区域,进而降低页面的信息承载量;

凸显最重要的功能的同时,一定程度上会弱化其它核心功能的使用。

4.原型设计实现案例

底部导航

点此查看原型实例

 三、顶部标签导航

1.简介

顶部标签导航通常作为次级导航,配合底部标签导航或舵式导航一起使用。

2.设计特征

1)相对底部标签导航而言,标签数量更灵活。

作为二级导航时,通常可以是2-3个标签。当二级导航的分类数较多时,也可以超过5个标签。

2)标签通常是文字形式的。

为什么不像底部标签一样设置成图标+文字的形式?因为图标+文字相比纯文字而言会占据更多的页面面积。如果采用这种形式,再加上底部导航,将极大挤压页面其它内容的显示区域。

3)当标签分类数量过多时,通常可以设计成左滑滚动标签的形式。

但需要注意的是,滚动标签意味着在不滚动状态下,页面默认状态下显示的标签数是有限的,这时我们让默认状态下可见的最后一个标签露出一半,以提示我们它可以左滑滚动,一定程度上减少用户的发现成本。

在电商产品中,通常还会有一种类似于顶部滚动标签导航的侧边分类滚动导航。

3.优缺点

1)优点

我们可以在不同的次级功能模块间进行快速切换。

2)缺点

作为页面固定显示的内容,在和底部导航配合使用时,会挤压页面其它内容的显示区域,进而降低页面的信息承载量。

4.原型设计实现案例

1)顶部导航

点此查看原型实例

2)顶部分类滚动导航

点此查看原型实例

3)侧边分类滚动导航

点此查看原型实例

四、抽屉导航

1.简介

抽屉导航也叫汉堡菜单,是将一个导航页(菜单)隐藏在当前页面,点击汉堡按钮,导航页会像抽屉一样从页面左侧或右侧拉出。我们可以通过现实意义的抽屉来理解这种导航:

1)抽屉作为收纳物品的容器,通常可以存放多个物品(抽屉导航可以放置多个次级功能入口)

2)抽屉通常是关起来的,需要时才打开,因此抽屉内的物品通常不可见(抽屉导航只有点击后才能看到次级功能入口)

2.设计特征

1)通常用于放置非常用、非核心、低频但必要的功能。如对设置、个人信息等。

为什么要放置低频、非核心功能?因为抽屉导航具有隐藏的特性,而根据前面的介绍,越是核心、高频的功能,就越应该放在用户容易看到、触及的地方地方。

2)使用抽屉导航,通常意味着产品的主要功能集中在主页面当中。比如摩拜。

3.优缺点

1)优点

占用页面空间较少,使得主页面能承载更多的信息,页面更简洁,我们可以更专注于使用产品的核心功能。

具有较强的次级功能扩展性,可以在抽屉导航页放置较多的功能入口。

2)缺点

隐藏式设计,可发现性较差,增加了用户的发现成本。

4.原型设计实现案例

抽屉导航

点此查看原型实例

五、宫格导航

1.简介

说到宫格,很多人第一时间想到的会是九宫格。实际上宫格导航不只是九宫格,也可以是其它数量的宫格。宫格导航会以分格、平铺的形式来展示功能,通常作为次级导航使用。

2.设计特征

1)宫格对应的功能数量较多。通常用户提供服务较多或者类目较多的APP,如支付宝和微信。

为什么?因为要组成宫格,宫格数通常是6、9、12或者8、16甚至更多。

2)通常功能之间层级相同,使用频率相近、彼此独立且切换频率低。

为什么?因为分格平铺的形式可以让用户一目了然地看到所有功能,彼此之间没有显著的优先级差异。另外因为宫格导航只显示功能入口,不显示实际的功能页面,因此要切换功能时需要退回宫格导航页面才能切换其它功能,不适合作为彼此有关联、切换频繁的功能的导航。

3)功能间如果具备一定的关联性,可以分类处理。

为什么要分类处理?因为当宫格数量过多时,依据功能的关联性做分类,可以便于用户更快地找到自己想要的功能,减少用户的寻找成本。

3.优缺点

1)优点

可扩展性强,可以根据需要向下扩展功能入口;

可以让我们一目了然地知道产品所提供的功能,快速找到自己想要的功能。

2)缺点

不展示功能对应页面的内,无法直接执行功能操作;

功能间切换不方便,要切换功能时需要退回宫格导航页面才能切换其它功能;

容易形成较深功能层级和功能路径,增加用户的操作成本。

4.原型设计实现案例

因设计较简单,未附案例

六、列表导航

1.简介

以列表的形式呈现功能,适用于大量的功能的展现,通常作为次级导航,如网易云音乐的账号页。

2.设计特征

1)通常功能之间层级相同。

2)通常在列的右侧显示箭头表示有二级内容。

3)当列表功能较多时,可以通过调整间距的方式对功能进行分类。如无合适分类名称,也可以选择不加分类名称。

3.优缺点

1)优点

可扩展性强,可以根据需要向下扩展功能入口。

2)缺点

下方的功能可能会被忽略。虽说列表导航的功能间层级相同,但如果列表功能过多,我们需要向下滚动页面才能看到下方的功能,因此这一部分功能容易被忽略。

4.原型设计实现案例

因设计较简单,未附案例

七、总结

1.我们使用产品是为了满足某种需求(达到某种目的),因此导航最主要的功能在于让我们清楚地知道自己所在页面(所处位置),并帮助我们更快地到达目的页(目的地)。

2.导航设计的形式服从设计的于目的。每种形式的导航虽然都有常用的使用场景,但这不意味着设计导航时需要严格遵循这些使用场景。在实际的设计当中,还需要根据产品侧及用户侧的需求具体分析。

3.一款产品通常不会只使用一种导航,而是会根据信息架构以及功能的需求,混合使用多种导航。

以上原型案例现在我们都可以在墨刀模版区找到并且免费使用哦!随时都可以按自己的需求来编辑模版或者直接复用!

如何查看模版项目,我们可以登陆墨刀:modao.cc,进入工作区,点击“新建项目” 就能在下方看到。

选择一个模版,点击“使用模版”。

进入项目编辑区,可以随意改动各种元素。

此外,如果点击“预览模版”,也可以一键查看该原型模版的教程哦!

“红色”批注区域即为文字教程。

更多模版信息可参考旧文:再也不用四处找原型模版了 墨刀模版库全面升级!

直率的外套
个性的钢笔
2025-07-06 04:01:59
一般说来,在购物类的app中,用户想要到达商品详情页的路径有以下3种:1、通过搜索直达商品列表;2、通过分类导航;3、通过运营设定的特定模块到达(比如促销活动和专区)。这三种路径基本上就涵盖了用户购物的的3种心态:第1种路径可以有效满足明确知道自己要买哪个具体商品的需求;第2种路径可以有效满足用户明确自己要买哪类商品但不知道具体要买那个哪个商品的需求;第3种路径可以满足用户逛逛的心态。接下来的篇幅我们主要讲关于分类导航的相关知识点。

分类是把商品按照固有属性、适用人群、使用场景等座位区分标准,把符合统一标准的商品归类,提高查找商品效率的一种手段。

按照分类查找商品是人类最常用到的一种思维方式和习惯,这种习惯主要来源于人们在线下购物的方式。线下商场的商品都是实体的,需要占用三维的物理空间,无法像在网上一样可以通过搜索把商品相关信息展现在用户的眼前,商品是不会动的,用户需要改变自己的地理位置去走到商品所在位置,才能拿到商品,为了能够让用户快速找到自己的商品,商场就会按照一定的标准给商品分类,符合同类标准的商品会放在同一片区域,百货商场里面1楼是化妆品、2楼是女装、3楼男装、4楼箱包、5楼文体用品……在电商刚兴起的时候,PC端的网站就是很大程度上借鉴了线下楼层的这种概念。

由于线下购物习惯的存在,分类导航始终是用户查找商品的一个重要入口,如何更高效的利用分类导航带来更多的成交,这是在电商app设计中不可忽略的一个课题。 经过一些用户调研发现,用户在明确自己要买的商品大类但不知道具体商品型号的时候,90%的用户会通过类目去查找商品。

设想一个使用场景,用户想买一些零食吃,但不知道具体买哪一种。 我们来看下天猫怎么做的?如果通过类目导航查找,在零食的类目下会有多种零食的种类帮助用户做出选择,经过三级类目的引导,用户可以轻易选择买哪个品类的零食;假如用户通过搜索路径,在“零食”的搜索结果页,天猫也在顶部增加了一个分类展示,企图通过分类引导的方式帮助用户快速完成任务。我们再看一样京东,京东在分类的上部分放了一个活动banner,这样的话用户又多了一种选择:反正也不知道具体买什么零食,刚好去优惠活动去看看。

在分类页面的设计样式上,基本上都采用了标签+盒子的形式,只不过标签的样式采用了横式和竖式。一级类目数量不是很多的情况下,可以优先考虑横式标签样式,这样能够把更多的空间留给二级类目;在一级类目数量比较多的情况下,建议采用竖式标签的样式,这样方便用户快捷的进行一级类目的查找。看下面的例子,左边的例子采用横式的,右边的例子采用竖式的,在类目数量非常大的情况下,显然右边的样式会更高效一点。

在一些商品数量还不是很庞大的购物app上,大部分的会在首页的顶部栏额外增加一个标签式的分类导航,提升分类导航的层级,更好的引导用户利用分类导航去找到自己想要的商品,由于每个二级分类的商品数量不是很多,可以把多个二级类目的商品全部排列在一级类目的标签页下面(仅通过滑动就可以切换到下一个类目,如下图中右图),降低了用户的二级类目切换成本,提升用户逛的沉浸感,增加商品成交量。

随着消费水平的提高,品牌因素对用户选购商品会占有越来越大的比重,按照品牌来分类也越来越多的出现在购物类的app中,如图中左边的例子,可以直接品牌列表来查找自己的要找的品牌;右边的例子在一级类目下面集成了品牌推荐,这也是对用户思路的一种引导方式。

在分类导航的逻辑中,按照商品属性分类式最基本的分类方式,但并不是唯一的方式,我们可以尝试以商品属性分类为基础+其他纬度分类结合的方式,以求能够覆盖更多的用户使用场景,响应更多的用户需求;分类导航页还渐渐的成为运营活动的展示窗口,针对类目的运营活动在这里放置一个入口再合适不过了。例如下图左边的案例,增加了以商品使用场景(送礼)为纬度的分类,和以商品属性为纬度的分类并列成为一级类目;下图右边的案例就针对该类目放置了专题活动(值得买好物)的入口。

经过上面的案例可以看出来:

1、类目导航最高效的适用场景是:用户有购物欲望,但无法确定所要购买具体商品型号;

2、按照商品属性分类仅仅是类目导航的一个基本的维度,我们还可以尝试从使用场景、使用人群、品牌、个性推荐等维度进行更多的分类尝试,以便覆盖更多的用户场景;

3、在类目导航页增加类目运营活动是提高转化率的一个有效手段,值得尝试。

4、要考虑好上下文的关系,点击二级类目进入到商品列表以后,较为合理的筛选与排序操作就是必不可少的动作了。

作为设计师的我们,在思考设计实现方案的时候一定记得从业务逻辑出发,多跟运营以及产品沟通,挖掘到更多的需求,这样才能更有效的用设计工具解决问题。

动听的黑裤
无聊的长颈鹿
2025-07-06 04:01:59
移动端导航设计一般有七种设计模式,根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。

一、标签式导航

即tab式导航,是移动应用中最普遍、最常用的导航模式,适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。细分为:底部tab式导航、顶部tab式导航、底部tab的扩展导航三种。

以下情况可以选择顶部tab式导航:某项功能必须固定在底部,其他tab只能固定在顶部,但为了方便操作,顶部tab导航最好支持手势操作,即滑动即可切换,如新闻,小说等。

实际上,底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式,它不怎么出彩,但是绝对不会犯错。在大屏幕时代,底部Tab模式的导航更能适应,也更好设计。

底部tab式导航的扩展形式适用于:入口分类数目不多,可以控制在5个以内,且用户需要在入口间频繁切换来执行多个任务,需要注意:结构太过复杂而且不稳定的应用不适合标签式导航。

二、抽屉式导航

抽屉式导航将部分信息内容进行隐藏,突出了应用的核心功能。抽屉栏式导航有两大缺陷:

1、在大屏幕手机上,单手持握时处于操作盲区,难以点击。

2、抽屉式导航可能会降低你产品一半的用户参与度

适用对象:应用主要功能和内容都在一个页面里面。一些用户设置等低频操作内容需要显示在其他页面里。

为了让主页面看上去干净美观,可以把这些辅助功能放在抽屉栏里。如果你的应用有不同的视图,且他们是平级的,需要用户同等地对待,抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。在大屏时代使用抽屉栏,手势操作显得尤为重要,从屏幕边缘唤出抽屉栏是个不错的选择。需要注意的是:需要用户有一定参与的信息层级,最好不好放置在抽屉栏。

三、列表式导航

列表式导航就是最必不可少的一种信息承载模式,这种导航结构简单清晰、易于理解、冷静高效,能够帮助用户快速定位到对应内容。在APP中的应用也分为两种:

1、作为主导航使用

2、作为辅助导航来展示二级甚至更深层级的内容

列表式导航大多作为辅助导航来展示二级甚至更深层次的内容,若要作为主导航,必须满足层级浅且内容平级的条件。需要注意的是:列表式导航的数量保持在一屏以内,超过一屏最好再分一级,将最终要的内容归纳在前4个列表更容易被人们记住,要注意为列表内容分类。

四、平铺式导航

当信息足够扁平,可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验,最大程度的保证了页面的简洁性和内容的完整性,且一般都会结合滑动切换的手势,操作起来也非常方便。

平铺式导航比较适用于足够扁平化的内容和随意浏览的阅读模式,需要注意的是:无法跳转至费相邻页面,如果入口间需要反复跳转,则不适合这种模式。

五、宫格式导航

每一个APP都是一个宫格,这些宫格聚集在中心页面,用户只能在中心页面进入其中一个宫格,如果想要进入另一个宫格,必须要先回到中心页面,再进入另一个宫格。每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。

宫格式导航适合入口相互独立互斥,且不需要交叉使用的信息归类。一旦入口需要有所交集,必然导致更多的操作负累,这个时候只能根据产品特性做出权衡,如果不适合,建议果断拒绝这种方式。

六、悬浮式导航

悬浮式导航,是将导航页面分层,无论你到达APP的哪个页面,悬浮icon永远悬浮在上面,你依靠悬浮层随时可以去想要去的地方,同时,为了让悬浮icon不遮挡某个页面的操作,通常悬浮的icon都可以在屏幕边缘自由移动。

悬浮式icon是一个非常便捷的操作入口,也适应大屏幕时代。但需要注意的是:悬浮式icon会遮挡某些页面的操作,在设计的时候应该考虑进去。

七、其他新式导航

导航其实只有6种,但不能被现有的导航模式所束缚,未来会有新的导航模式,新的操作手势…,设计的心应该是自由的,若你羽翼未丰,就在规则的天空中飞行,可能不会出彩,但不至于犯错;若你已成雄鹰,便可自由飞翔,突破规则,甚至建立自己的规则。

总结一下:

标签式导航:最常用、最不易出错,请第一时间考虑它。

抽屉式导航:如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中。

列表式导航:作为辅助导航来展示二级甚至更深层级的内容,每个APP必不可少,但请注意数量与分类。

平铺式导航:如果你的内容是随意浏览,无需来回跳转的,可以考虑它。

宫格式导航:不建议在APP中作为主导航使用,如果非使用不可,请增加跳转的关联性。

悬浮式导航:更适应大屏的导航模式,不妨试一试,但注意不要让它遮挡住某些页面的操作。

最后,根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。

动人的未来
酷炫的煎蛋
2025-07-06 04:01:59

导航是用来浏览网页的工具。它可以是按钮或者是文字。在每个页面上显示一组导航,顾客就可以很快又很容易地找到他想浏览的网页。导航是网页设计中的重要部分,也是整个Web站点设计中的一个独立部分。

现在有些卖家都有一个误区,以为导航就是分类。其实不然,导航是一个功能型按钮,在店铺页面中的作用是引导买家快速查看需要的产品。而分类是属于包含与被包含的关系,但是我们可以理解为分类是导航的一种。设计出自己的导航后,我们会根据目标用户群的搜索点击对导航进行优化,这绝不仅仅是只把分类重新整理一下就可以了,而应从产品导航入口入手,进行优化。

通常按位置可以将导航划分为以下三个区域:

(1)顶部导航:产品分类、搜索栏、自定义页面(如品牌故事、会员专区、购物须知等)。

(2)左侧栏导航:产品分类、在线客服、收藏店铺按钮、热销产品列表、商品推荐、其他超链接(如手机店铺、加入帮派等)。

(3)自由导航:随意地自由地编排导航,让导航更具个性,给人耳目一新的感觉。一般很多设计师会把自由导航设计成产品类目图片(文字)+可以指向某一分类或自定义页面,进行详情页跳转等。

尽管导航的位置和形式都不同,但目的都是给顾客提供更直接的购买路径。导航承载的信息内容有:基本营销信息(如新品、热卖、折扣等);搭配套餐;主题营销;官方活动(如淘金币、聚划算、淘画报等);产品分类(如功能、材质、季节、价格、人群归属等);交互模块(如帮派、微博、手机店铺、店铺收藏等);辅助信息(如品牌故事、帮助中心、信用评价、会员中心、客户承诺等);客服支持(如客服旺旺、服务说明等);搜索控件(如搜索框、关键词推荐等)。

导航在店铺中承载着举足轻重的作用,顾客进入店铺能停留多久基本全靠它。当顾客进入店铺时如果找不到方向的话,是不会继续浏览网店的。其实网店导航并不复杂,就是通过让产品的层次结构可视化,告诉我们店铺里有什么。在设计导航时应该遵循“快为先”的原则,不要为了页面的美观,特意将导航复杂化,设计为“精美图片+文本+超链接”形式。从用户体验的角度来讲,大多数买家已经习惯了简单明了的导航,如果导航设计让买家花时间去思考下一步该点什么,那么这个导航就是失败的。所以导航的设计不要过于浮夸,应从用户体验出发,以最快速的方式让顾客找到自己想要的东西。

积极的保温杯
无聊的香烟
2025-07-06 04:01:59
分享几个常见的导航设计:

1、滑出导航

滑出式导航是现在很流行的一种,当用户打开页面时,第一眼看到的是主要的内容而非菜单,给用户更好的第一印象。响应式全屏滑出导航也可以给人愉悦的体验。

2、全屏导航

全屏导航设计对内容有强调作用,用户可以更加便捷地切换到不同的页面,让内容成为更加触手可及的东西。如果设计的够合理,用户会在无意识间充分运用起它的导航功能。

3、单页滚动导航

对于不含有大量内容的网站而言,单页式的导航的效果非常不错。这样的网站只需要简单的向下滚动操作,内容就会持续不断地到你的眼前。

4、垂直导航

垂直导航最流行的有两种排版方式,一种是隐藏式的导航菜单,需要的时候点击显示。另外一种是固定的侧边栏来展示菜单。它为网站设计提供了一种新的视觉体验。

导航如何使用,还是要结合你的项目的具体特征来决定的。

追寻的芒果
独特的老鼠
2025-07-06 04:01:59
1.标签导航 (标签导航位于页面底部 ,标签的分类最好在5个以内,比如微博、微信、淘宝)

优点:清楚当前所在的入口位置;直接展现最重要入口的内容信息。

缺点:功能入口过多时,该模式显得笨重不实用。

2.驼式导航 (中间加了一个“+”导航,像轮船上用来指挥的船驼,比如微博、qq空间)

优点:需要突出重要且频繁操作的入口。

缺点:同标签导航。

3.抽屉导航 (将菜单隐藏在当前页面内,点击入口即可像抽屉一样拉出菜单)

优点:节省页面展示空间;让用户注意力聚焦到当前页面;扩展性好。

缺点:不适合频繁切换的应用。

4.宫格导航 (宫格导航将主要入口全部聚合在页面,让用户做出选择,比如美图秀秀)

优点:直接展现各项内容;方便浏览经常更新的内容。

缺点:无法入口间的跳转;不能直接展现入口内容;不能显示太多入口次级内容。

5.组合导航 (比如淘宝里的快捷入口,像天猫之类的)

当用户需要聚焦内容,同时又需要一些快捷入口能够接到某些页面时,就可以采用组合导航。

优点:布局灵活,能适应架构的快速调整。

缺点:不规则容易有杂乱感。

6.列表导航 (比如微信的发现界面)

优点:层次展现清晰;可展现内容较长的标题;可展示标题的次级内容。

缺点:同级过多时,容易产生疲劳;排版灵活性不高;只能通过排列顺序、颜色来区分各入口重要程度。

7.tab导航 (用于二级页,本质和标签导航相同,当应用层级较多时,可采用tab导航,比如淘宝)

优点:对多内容多层级产品适用。

缺点:结构复杂,内容繁多。

8.轮播导航 (比如天气软件)

优点:单页面简洁内容,整体性强;线性的浏览方式有顺畅感、方向感。

缺点:不适合展示过多页面;非主页面不利于展示和查看。

9.点聚导航 (主操作选项或导航合并成一个按钮,浮动在页面上,比如path,最新版本导航置在中间)

优点:灵活;展示方式有趣;页面更开阔。

缺点:隐藏了更多入口和操作。

10.瀑布导航 (瀑布式布局适用于图片为主的内容,下拉自动加载,比如花瓣)

优点:浏览时产生流畅体验;排版布局多变;沉浸式体验。

缺点:不适合层级架构复杂的产品;容易产生疲劳感。

体贴的猎豹
细心的手机
2025-07-06 04:01:59
        页面导航的分布如下所示

         将入口放在页面的底部,形成标签导航。目前这种导航的设计方式在app设计中非常常见,其优点十分明显,即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系,同时扩展性差。因此目前标签导航建议底部的标签不超过5个,如果超过5个建议使用其他方式。

        该类导航与标签导航相似,不同的是中间的导航标签会蕴含更多的操作选项,即该标签中包含了更多的二级导航。以小红书为例,其底部导航就是典型的舵式导航,点击“+”标签会直接唤醒相机并可以导入图片/视频等内容

        对于舵式导航里的扩展二级标签,这些二级标签可以形成一种单独的导航- 点聚导航 ,从Bilibili的底部导航可以看出,点击中间的导航会弹出4个二级标签:开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次,扩展性差,不利于后期的功能拓展。

       将标签放到界面的上方,就会形成tab标签导航,这种导航适用于类目较多的APP作为二级导航梳理页面逻辑,布局清晰。作为一个二级导航,顶部标签导航应用于多种情境下,可以固定数量,展示有限的几个标签。也可以扩大一定的数量,变成向左滑动展现更多标签,十分灵活,但是因为在手机中左右滑动不如上下滑动方便,因此,个人认为还是不要展开太多标签。以微博和下厨房为例,这两个APP都采用了Tab页导航。

        抽屉导航是将菜单隐藏在当前页面后,点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,优点是可以节省页面空间,比较适合于不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例,其采用了非常标准的抽屉式导航,目前更多APP会采用抽屉导航的变式,即点击导航入口以后,以向右滑动的方式,整个抽屉页将滑动出现并且占据整个屏幕,例如小红书app的抽屉导航。

        一般位于产品顶部,通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层,可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置。但由于是位于屏幕上方,相对隐蔽而且不能结合手势操作,所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多。

       主要功能入口全部聚合在页面,让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作,用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务,从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP,例如支付宝、淘宝等。

       宫格导航的应用很广泛,也产生了很多变种,以百度贴吧为例,其在应用宫格导航的时候,将功能进行了分类并且用标题加以区分,使用户更容易从众多功能中找到需要使用的功能。

       还有一种变式,是可滑动的宫格,这种设计适合于宫格内容较多,但是不想占用太多屏幕空间,于是用户可以左右滑动来查看功能内容。以小米app为例,由于功能较多,但是不希望占用较多屏幕面积,因此导航只放了两行功能,但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。

通过列表指示类目,在右侧显示箭头表示有二级内容,列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。

同样可以对列表进行分类产生变式,这样逻辑会更清晰,不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。

每一个页面就代表一个导航入口,这就是轮播导航,适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性,操作也是最方便的,只需要手指左右滑动。缺点也很明显:承载入口的数量有限,超过10个可能就多了。这种导航常见于查看图片,也经常与其他导航模式结合,作为banner广告呈现。

缥缈的鲜花
勤劳的日记本
2025-07-06 04:01:59
一、简洁明了清晰的导航条

导航命名要清晰、易懂。一般来说导航主要是公司简介,服务项目,产品资料。新闻资讯,经典案例以及联系方式为通用标准化的参考方式。有些企业喜欢给网站栏目起些别出心裁的名字,有创意是好的但是名称一定要跟里面的内容产生关联。方便用户清晰明了的可以直接查询他所想要的信息内容。

二、栏目结构层级分明

网站的栏目设置并不是说越多越好。栏目越多内容及图片肯定相对也会更多,这样网站的打开及浏览速度相对都会比较慢。一般来说,用户打开一个网站最多只会等到三秒的时间左右,如果三秒时间还不能打开浏览一个新页面,那么用户就会失去耐心失去浏览的兴趣,进而关掉网站离开访问。

网站的内容众多,要让客户最方便地找到所需要的内容,必须做到层级分明、条理清晰。网站栏目最好不要超过三层,不要让客户层层剥茧似的来寻找答案。

三、Banner的交焦点图的设计

如果首屏的几张图片,没能做到吸引眼球,那么用户很难会再想往下拉下去,将页面直接关闭,如果用户的停留时间没有超过两秒以上,那么会形成一个叫跳失率,那么我们做企业网站的Banner图设计也是一样的,首屏的设计是很关键的,通常来说可以介绍公司简介,或者是公司主打的服务,项目产品等等。一般推荐3-5张。