首页 SEO技术 正文
移动端网站优化——移动导航的七种设计模式

 2020-04-30    583  

根据产品层次的深度和广度,选择合适的导航模式是产品设计中的一个关键环节。让我们互相鼓励。

在前面写:我读过很多总结导航的文章,但是它们基本上是一样的,但是不够详细,也没有从我们常用的产品中分析出来。因此,我用自己的想法再次分析了它们。有些段落来自引文,比如我读过的一些文章《拇指热区》,但大部分分析来自我的原创作品。这篇文章应该说是站在巨人的肩膀上,并给出一些拙见。

任何应用程序的组织信息都需要通过某种导航框架来固定,就像建筑工人建造的高楼一样。基础非常重要。之后,你想建多少层楼,每层有多少个房间都建在地基上。新产品也是如此。合适的导航框架决定了产品的扩展和扩展。

不同的产品需求和业务目标决定了不同导航框架的设计模式。交互设计的第一步是确定导航的框架设计。框架确定后,血肉可以逐渐丰富。

首先,我们需要对组织信息进行分层。在这一步中,我们必须做好信息层次的扁平化工作。我们不能散布所有的组织信息。这样做只会让用户心烦意乱,让他们找不到他们想要的重要操作,我们也不能把层次搞得很深。用户没有那么多耐心和你玩捉迷藏。务必将核心、最稳定和最基本的功能元素放在第一页,将其他内容放在第二层、第三层甚至更深层。

然后,根据层次的深度和广度确定导航的设计模式。不要认为这有多难,移动终端的屏幕很大,操作模式不过是点击、滑动和按压。因此,导航模式通常分为以下7种类型(当然,您可以在这7种类型的基础上相互组合)。接下来,我们可以具体分析这7种导航模式。

移动端网站优化

一、标签导航

这就是我们通常所说的标签导航,它是移动应用程序中最常见和最常用的导航模式,适合在相关类型的信息之间频繁切换。这类信息具有很高的优先级,用户经常使用,并且相互独立。通过标签导航的引导,用户可以在页面间快速切换而不迷失方向,简单高效。应该注意的是,根据逻辑和重要性,标签导航被控制在5个以内,并且超过5个用户很难记住并且容易丢失。

选项卡导航进一步细分为三种类型:底部选项卡导航、顶部选项卡导航和底部选项卡扩展导航。

1.底部的标签导航

如果你看看现在手机上常用的应用,你会发现QQ、微信、淘宝、微博、美团、京东等。底部是所有选项卡导航。

这是一种符合拇指热区操作的导航模式,那么什么是拇指热区呢?当你在路上行走时,手里拿着手机并操作它;当站在公共汽车上,一只手拉扶手,另一只手操作时,你最常见的操作是用右手握住并操作手机。因此,对于手机来说,触摸的交互设计主要是针对拇指的。

然而,在手机操作中,拇指的可控范围有限,缺乏灵活性。特别是在今天的大屏幕手机中,拇指的可控范围不到整个屏幕的三分之一——主要集中在屏幕的底部,在拇指的另一侧。用右手拿着手机时(毕竟左撇子是少数,我们仍然需要为主流用户设计,下面的图显示了拇指的作用区域)

随着手机屏幕越来越大,内容显示越来越多,但单手操作变得更加困难。这就是为什么工具栏和导航栏通常位于移动电话界面的下边缘,而导航位于屏幕的底部,即拇指热区,当用一只手握住时,这给拇指操作带来了更大的舒适性。

将导航放置在屏幕底部不仅关系到拇指操作的舒适性,还关系到另一个问题:如果放置在屏幕底部,手指操作会阻挡阅读的视线。如果控件在底部,无论手如何移动,至少它不会阻挡主要内容,从而给出一个清晰的视角。呈现内容的屏幕在顶部,控制键在底部。

这也是为什么我是水果粉。与安卓手机在底部放置三个触摸式物理按键相比,iPhone在手机底部放置一个需要按下的家庭按键要好得多。这些靠近屏幕边缘的物理按键被挤压在一起,手指非常不方便操作。(华为甚至直接把3个物理键放在屏幕上),尤其是玩游戏的时候,我总是误触发这3个物理键,造成无意的退出,非常不舒服。如果导航也被放在底部,舒适只能说再见(市场上的主流安卓手机)

2.顶部选项卡导航

安卓的物理密钥被放在底部。为了不创建堆栈,许多安卓应用程序使用顶部标签导航,这是一种妥协。(下图显示了微信安卓和iOS)

现在,在牺牲物理按键和拇指操作的舒适性的同时,微信安卓版已经放弃了顶级的导航方式,并与IOS保持一致。

当然,顶级导航也不是那么没用。现在,QQ音乐和酷音乐都使用顶部标签导航。为了更好地浏览基本信息(歌手、歌曲名称)和支持快速操作(播放/暂停),播放器需要固定在底部,那么顶部标签导航是一个不错的选择(如下图所示)

还有腾讯新闻和网易新闻等新闻应用,由于内容和类别更多,它们在顶部和底部使用双标签导航,而切换频率最高的标签位于顶部。这是为什么?因为新闻是在每个标签中沉浸式阅读,最常见的操作是在一个标签中连续向下滑动阅读内容,将常用的标签放在顶部并添加手势切换操作,实际上可以带来更好的阅读体验。

摘要:在两种情况下可以选择顶部选项卡导航。

L A功能必须固定在底部,所以其他标签只能固定在顶部,但为了操作方便,顶部标签导航最好支持手势操作,即滑动可以切换;

这款应用是一种身临其境的体验,比如新闻、小说等。为了给用户更好的阅读体验,标签可以放在顶部。

  •  标签:  

发表评论:

原文链接:https://www.seozatan.com/post/160.html

=========================================

https://www.seozatan.com/ 为 “虾米SEO杂谈” 唯一官方服务平台,请勿相信其他任何渠道。

最新留言