读书笔记:常见的导航设计

2018-08-0413:59:23 发表评论 637 人看过

常见的导航设计有标签式导航,抽屉式导航、列表式导航、宫格式导航、平铺式导航、悬浮式导航等。

读书笔记:常见的导航设计

 

一、标签式导航

标签式导航也就是我们平时说的标签式导航,它是移动应用中最普遍、最常用的导航模式。这种类型的导航设计,用户使用较为频繁。通过标签式导航的引导功能,用户可以迅速实现页面之间的切换,其设计让用户看起来很简洁,既简单又高效。不过需注意的是,标签式导航在设计的时候要控制在5个以内,超过5个,用户在使用时就会难以记忆而且容易迷失。

标签式导航还可细分为底部标签式导航、顶部标签式导航、底部标签的扩展导航三种。下面我们就分别来讲解一下。

 

1、底部标签式导航

如果你拿出自己的手机,对下载的各类App软件进行观察,就会发现自己手机中常用的软件,像QQ、微信、淘宝、微博、美团、京东等全部都是底部标签式导航。

底部标签式导航式最符合拇指热区操作的一种导航模式,那么到底什么式拇指热区呢?说白了,就是最符合人机工程学,符合人们生活中便于操作的状态。当你走在路上,单手握持手机并操作;当你站在公交上,一手拽住扶手,只能用另外一只手操作手机等,你最常用的操作就是右手单手握持并操作手机。因此,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。

但在手机操作中,拇指的可控范围有限,却反灵活度。尤其是在如今的大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另一边。

随着手机屏幕越来越大,内容显示多了,但是单手操作变难了。因此,工具栏和导航条一般都在手机界面的下边缘,这样的方式为单手握持时拇指操作带来了更大的舒适性。

将导航功能放置在屏幕底部也不仅仅关系到拇指操作的舒适性,还关系到另一个问题:如果放在上面,用手指操作时,会挡住阅读的视线。如果控件在底部,不管手怎么移动,至少不会挡住主要内容,从而给与清晰的视角。呈现内容的屏幕在上方,控制按键在下方。

 

2、顶部标签式导航

Androdi手机的物理按键已经放在底部了,为了不产生堆叠,很多Android应用运用了顶部标签式导航,这是一种妥协下的行为。

而如今,在妥协物理按键和拇指操作舒适性中,微信Android版抛弃了顶部导航的方式,和ios保持了一致。

当然顶部导航也不是一无是处,像QQ音乐和酷我音乐现在用的就是顶部标式导航,为了更好地浏览基本信息(歌手、歌曲名),以及支持快捷操作(播放/暂停)播放器需要固定在底部,那么顶部标签式导航不失为一个好选择。

腾讯新闻和网易新闻等新闻类App,由于内容、分类较多,运用顶部和底部双标签导航而切换频率最高的标签放在顶部,这是为什么呢?因为新闻在每个标签都是沉浸式阅读,最常用的操作是在一个标签中不断地下滑阅读内容,将常用的标签放在顶部,加入手势切换的操作,反倒能给用户带来更好的阅读体验。

 

3、底部标签的扩展导航

在有些情况下,简单的底部标签式导航可能难以满足更多的操作功能,这时就需要一些扩展来满足需求。如微博和QQ空间、闲鱼都做了这种拓展,也因此给设计增加了一些个性化的亮点。

在这些App界面设计中,为了让用户更简单地使用体验,突出了按钮的设计,让平淡的标签栏多了几分趣味。

 

二、抽屉式导航

一般和底部标签式导航一起使用的另一种导航设计就是抽屉式导航。抽屉式导航的特点是将部分内容进行了隐藏,这样能突出其App软件的核心功能。

如果要设计的产品信息层级有着非常多的页面和内容,难以在一屏内显示全部的内容,一个设计师会设计一个底部或顶部的标签导航。但导航太多不仅显得十分臃肿,而且使用户难以点击,这时,抽屉式导航就是个不错的选择。

不过,抽屉式导肮也有两大使用缺陷,具体如下:

 

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

像QQ这样的App软件几乎人人都会安装,它的导航界面采用的就是抽屉式导航。但是我们看到随着iPhone 6和iPhone 6 Plus的推出,到6s的持续推进,大屏幕手机时代就这么不可阻挡地来了,二屏幕顶部左上角的抽屉栏位置,一个需要被经常操作的入口,现在处在了盲区。

 

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

抽屉式导航设计为其界面带来干净的设计的同时,也让用户忽视了隐藏的另一半信息,如果你第一眼看不到这些入口,那么你也就会时常忘记它们在哪儿,这也导致了隐藏在抽屉栏内的信息内容用户点击率下降,参与度降低。

 

那么,到底什么时候适合用侧导航呢?

1、如果应用主要的功能和内容都在一个页面里面,只是一些用户想设置那些低频操作内容显示在其他页面里,为了让主页面看上去干净美观,可以把这些辅助功能放在抽屉栏里。

2、如果你的应用有不同的视图,且它们是平级的需要用户同等地对待,抽屉栏会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

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

 

三、列表式导航

列表式导航与跳板式导航的共同之处是每一个菜单项都是进入应用各项功能的入口点。如果说标签式导航是APP中最普遍的导航方式,那么列表式导航就是最必不可少的一种信息承载模式,这种导航设计结构简单清晰、易于理解、准确高效、最重要的是能够帮助用户快速定位到对应内容。

 

关于列表式导航

列表式导航设计在APP中的应用分为以下两种。

1、作为主导航使用

如果某APP主要表达的信息层级较为单一,且并不会在入口间频繁且反复跳转,那么将列表式导航作为主导航是一种不错的选择。例如杂志Elle,作为一个杂志APP,它以文字、图片表达为主,层级浅且内容平易,用列表式导航作为主导航来构架内容,简单而直接。

 

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

我们可以在所有APP中看到它的应用,作为信息梳理条目,列表数量尽量保持在一屏以内,超过一屏最好再分一级,而且按照人一次只能记住4项事物的心理法则,最重要的内容归纳在前4个泪飙项更容易被人们记住。如果不同种类的内容放在同一页面,那么要注意为这些内容分类,比如微信的设置页面,用留白的方式来区分内容的不同。

 

四、平铺式导航

如果你设计的界面的信息比较扁平化,那么可以试试平铺式导航,因为这种导航设计能让你的界面给人一种高端、大气、上档次的感觉。同时,这种导航设计能够将界面保持最大限度的简洁。平铺式导航在用户操作的时候也非常方便。例如PChouse——一个家居杂志的APP,杂志休闲随意的特质,非常适合平铺式导航,最大限度保持了图片的完整性。

平铺式导航的缺点是用户只能切换到相邻页面,很难跳转到非相邻的页面,很容易迷失位置,因此这种导航都会添加几个小点来指示当前位置。如墨迹天气中切换城市的操作就运用了平铺式导航。

平铺式导航的优点是可以在一个页面完整展示当前城市的情况,还可快速切换到其他城市。如果你设置的城市比较多,就很难快速定位到某个城市,所幸的是,手势操作切换方便,且正常情况下,用户最多设置2~3个页面,因而不会造成太大的负担。

淘宝中的店铺推荐也使用了平铺式导航,推荐店铺虽然有40个之多,但用数字表达出了明确位置的同时,也加入了手势切换,增强了易用性和趣味性。

 

五、宫格式导航

这种导航模式非常常见,但是不常用。

常见是因为,无论你用的是Android还是ios,每天一打开手机,宫格式导航就会进入你的双眼。

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

但是为什么不常用呢,大家可以翻一下手机里的APP,看俺哪个APP的主导航使用了宫格式导航。你可能只找到了一个最常用的,尤其是爱自拍的用户们,那就是美图秀秀。

经常使用美图秀秀或者是美颜相机的用户,尤其是女生,在用过之后会有一个共同的烦恼,那就是麻烦。为什么说麻烦呢?例如我拍了一张图片,然后用美图秀秀进行修图,修好后要先保存好,然后回到首页,找到美化图片,在对其进行特效等添加。最后,还要进行保存。

这样的操作让用户感觉繁琐,而且会在手机上多存一张没用的照片,还要到照片里进行手动删除。这就是宫格式导航的缺陷,信息互斥,无法相互通达,只能给用户带来更多的操作步骤。

 

六、悬浮式导航

悬浮式导航也就是悬浮icon(图标)导航,是将导航页面分层,无论用户到达APP的哪个页面,悬浮图标永远悬浮在上面,用户依靠悬浮层随时可以去想要去的地方。同时,为了让悬浮图标不再遮挡某个页面的操作,通常悬浮的图标都可以在屏幕边缘自由移动,并且在用户浏览页面、打字聊天等过程中,悬浮图标的颜色会变得更加接近透明。

这种导航模式又叫做Assistive Touch(按键助手),最典型的运用就是ios系统,悬浮式导航在ios 5出现之后搭载新的辅助功能。在最初的时候,很多使用苹果手机的用户都说这个悬浮方块非常碍事,还有人说这是因为Home键质量不佳,为了延长按键的寿命而设计的。但是不得不说,用习惯了以后,还真的觉得它在某些方面的确起着自己的作用。

其实每个用户在使用同一款手机后对其看法不尽相同,但是客观地讲,当你只能单手握持手机,这时想回到主屏幕,手指却难以到达屏幕底部时,可以在手机任何边线停留的悬浮方块就能为你提供快捷操作。

而且用户可以在AssistiveTouch里自定义顶层菜单,像其中的主屏幕功能,并不是因为不用按Home键就可以直接返回主屏幕,而是因为双击主屏幕键就可以实现多任务窗口,这样就可以避免双击Home键,直接实现多任务操作。

Android系统同样提出了悬浮图标的设计概念。

尽管现在我们还很难看到悬浮图标作为导航的设计,但随着大屏的发展,相信悬浮式图标导航设计一定会得到越来越广泛的使用。

最后需要说明的是,对于任何设计对象,都要根据其产品层级的深度和广度,去选择适合的导航模式,这样才能设计出最适合同时也是最出色的设计。

 

 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: