日常大伙多少都会有迷失方向的经验,但你是否从来没考虑过迷失方向的概念是什么?
迷失方向的概念其实有两个核心App开发的导航设计让用户知道他此时在什么页面,他想要到达某个页面如何跳转。
下面大家通过实例从是什么、为何、如何做这三个方面来介绍一下现在APP设计中最常见的几种导航。
底部标签导航是APP中最容易见到的导航。
为何它会是最容易见到的?就像超市把收益高(最想卖给客户)的产品摆在客户近在咫尺的地方一样,APP最重要的功能一般也应该放在用户近在咫尺的地方。在用户握持手机时,屏幕底部地区恰好是大拇指最便捷触及的地区。因此大部分APP商品才会选择底部标签导航的形式来呈现商品核心功能。
1)一般作为APP的一级导航(主导航)。
APP最重要的功能一般也应该放在用户近在咫尺的地方。在用户握持手机时,屏幕底部地区恰好是大拇指最便捷触及的地区。因此大部分APP商品才会选择底部标签导航的形式来呈现商品核心功能。
2)标签数一般为3-5个。
为何不更多?由于大拇指触摸屏幕时的接触面积较大,一旦标签数超越5个,每一个标签的所占面积不足,将会使正确的标签点击选择变得困难,甚至致使误点击。
3)标签一般是图标+文字形式的。
标签一般可以有文字、图标、文字加图标这3种设计形式,为何非要用图标+文字?
第一,文字的意义指向性强于图标。举例,一个X,可以表示关闭,也可以表示错误,甚至可以表示未知数,但「关闭」这两个字表示的就是关闭。
第二,人类作为视觉化动物,对图形比对文字敏锐。
综合起来,图标+文字的形式是意义指向最准确的形式,也是让用户最快理解标签含义(功能)的形式。
4)标签顺序一般按功能优先级从左至右排列,第1个标签显示商品主页面。
为何?由于凡有排列,在视觉上必有顺序。有顺序,必有优先级。因此第1个标签一般显示商品主页面,或者说放置最重要的功能。
5)假如标签数多于5个,但依旧要用底部标签导航,可以把最右边标签设计为「更多」,然后点击「更多」会显示更多功能。
这就像商品调查的问卷设计中大家设置选项一样,有时大家需要让选项互斥,但选项数目又不少,这时大家可以把重要程度低的几个选项合并成一个选项叫「其它」。
6)标签对应功能模块间一般有高频次切换需要,且功能层级相当。
7)一般用户所在页的标签需要突出显示(正常是通过颜色差异和标签图形变化来突出)。
为何?由于要让用户在APP中不「迷失方向」,一个至关要紧的点就是让他了解自己目前在哪。
8)底部标签在特定状况下可以做成沉浸式的。
为了增加页面的展示空间,让用户能更专注(沉浸)于页面内容,譬如说内容阅读类商品,底部导航可以设计成上滑时隐藏、下滑时显示的形式。但这种设计或许会致使使底部标签导航失去其原本在标签切换中的便捷性,用时需要慎重考虑。
9)考虑到大屏手机的单手操作,底部导航标签有时会使用左滑右滑切换标签的交互。
1)优点
可以直观展示APP的核心功能页面及入口。
用户可以在不一样的功能模块间进行迅速切换。
2)缺点
作为页面固定显示的内容,会挤压页面其它内容的显示地区,进而减少页面的信息承载量。
舵式导航本质是底部标签导航的变式。那样舵式导航为何要叫舵式导航呢?第一是形似,第二是由于舵式导航中非常重要的导航就像舵在船的航行中一样要紧。即一个底部标签导航中,有一个功能标签相比其它功能标签来讲更要紧、突出,更需要强调。
1)有一个核心功能比其它功能更要紧,更需要强调。容易见到于UGC商品,譬如微博、闲鱼、抖音短视频与原型案例中的小红书。
2)算上需要强调的标签,标签数目一般为3个或者5个。
为何?和船的控制室的对称式设计一样,当有标签需要突出的话,两边的标签在视觉上则要设计成对称的。
3)舵这个定义在标签上的呈现,也就是突出的形式。既能够真的有舵的形,也可以只给标签做简单的差异化设计。
前者的例子App开发的导航设计微博、抖音短视频、小红书。
1)优点
可以直观展示APP的核心功能页面及入口。
用户可以在不一样的功能模块间进行迅速切换。
可以凸显核心、频繁用的功能,引导用户用该功能(譬如产出内容)。
2)缺点
作为页面固定显示的内容,会挤压页面其它内容的显示地区,进而减少页面的信息承载量。
凸显非常重要的功能的同时,一定量上会弱化其它核心功能的用法。
顶部标签导航一般作为次级导航,配合底部标签导航或舵式导航一块用。
1)相对底部标签导航而言,标签数目更灵活。
作为二级导航时,一般可以是2-3个标签。当二级导航的分类数较多时,也可以超越5个标签。
2)标签一般是文字形式的。
为何不像底部标签一样设置成图标+文字的形式?由于图标+文字相比纯文字而言会占据更多的页面面积。假如使用这种形式,再加上底部导航,将很大挤压页面其它内容的显示地区。
3)当标签分类数目过多时,一般可以设计成左滑滚动标签的形式。
但应该注意的是,滚动标签意味着在不滚动状况下,页面默认状况下显示的标签数是有限的,这个时候大家让默认状况下可见的最后一个标签露出一半,以提示用户它可以左滑滚动,一定量上降低用户的发现本钱。
在电子商务商品中,一般还会有一类型似于顶部滚动标签导航的侧边分类滚动导航。
1)优点
用户可以在不一样的次级功能模块间进行迅速切换。
2)缺点
作为页面固定显示的内容,在和底部导航配合用时,会挤压页面其它内容的显示地区,进而减少页面的信息承载量。
1.介绍
抽屉导航也叫汉堡菜单,是将一个导航页(菜单)隐藏在目前页面,点击汉堡按钮,导航页会像抽屉一样从页面左边或右边拉出。大家可以通过现实意义的抽屉来理解这种导航App开发的导航设计App开发的导航设计文章转载: