手机移动网站端导航的七种设计模式

不一样的商品需求和商业目标决议了不一样的导航结构的规划形式。而交互规划的第一步，即是决议导航的结构规划，结构断定后，才能开始逐步丰厚血肉。

​

首先，咱们要为安排信息分层，在这一过程，一定要做好信息层级的扁平化，不能把一切的安排信息都铺出来，这么做只会让用户心慌意乱找不到想要的重要操作，也不能把层级做的很深，用户没有那么多耐性跟你玩躲猫猫。一定要将做中心、最安定、最底子的功用要素放在第一层页面，其他得内容收在第二层、第三层、乃至更深。

以后，依据层级的深度和广度来断定导航的规划形式。不要觉得这有多难，移动端的屏幕尺度就这么大，操作方法也无非即是点击、滑动、长按这些。因而导航形式通常也就分为以下7种（当然你能够在这七种的基础上互相组合）接下来咱们能够具体分析一下这七种导航形式。

一、标签式导航

也即是咱们平常说的tab式导航，是移动使用中最遍及、最常用的导航形式，适合在有关的几类信息中心频频的调转。这类信息优先级较高、用户运用频频，彼此之间彼此独立，经过标签式导航的引导，用户能够敏捷的完成页面之间的切换且不会迷失方向，简略而高效。需求留意的是标签式导航依据逻辑和重要性操控在5个以内，剩余5个用户难以回忆并且容易迷失。

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的拓展导航这三种。

1、底部tab式导航

假如此刻你调查一下自己手机中常用的APP你就会发现QQ、微信、taobao、微博、美团、京东等全部都是底部tab式导航

这是契合拇指热区操作的一种导航形式，那么啥是拇指热区呢？当你走在路上、单手持握手机并操作;站在公交车上，一手拉扶手，另一只手操作等等这些场景时，你最常用的操作即是右手单手持握并操作手机，因而，关于手机来说，为触摸进行交互规划，首要针对的即是拇指。

但在手机操作中，拇指的可控规模有限，缺少灵活度。尤其是在现在的大屏手机上，拇指的可控规模还不到全部屏幕的三分之一——首要会集在屏幕底部、与拇指相对的别的一边。当用右手持握手机的时分（左撇子毕竟是少量，咱们仍是要为干流用户规划，拇指的热区如下图所示）

网站导航规划 移动端导航规划 移动站点优化 移动站点策划

跟着手机屏幕越来越大，内容显现变多了，但是单手操作变难了。这也即是为啥，工具栏和导航条通常都在手机界面的下边际，而将导航放置在屏幕底部即拇指热区，这么的方法为单手持握时拇指操作带来了更大的舒适性。

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性，还关系到另一个疑问：假如放在上面，用手指操作时，会挡住阅览的视线。假如控件在底部，不论手怎样移动，最少不会挡住首要内容，然后给予明晰的视角。呈递内容的屏幕在上方，操控按键在下方。

这也是为啥我是个果粉的因素，iPhone把一个需求按压的home键放在手机底部比Android手机将三个触摸式物理按键放在底部高明多了，这些挨近屏幕边际的物理按键挤在一同，手指十分不便于操作。（华为乃至直接将3个物理按键放在了屏幕里），尤其是在我玩游戏的时分总会误触发这3个物理按键，形成无意退出，十分不爽。假如再将导航也放置在底部，只能对舒适性说拜拜了（市面上的干流Android手机）

网站导航规划 移动端导航规划 移动站点优化 移动站点策划

2、顶部tab式导航

Android的物理按键现已放在底部了，为了不产生堆叠，很多Android使用运用了顶部tab式导航，这是一种退让下的行动。（下图为微信Android和iOS图）

网站导航规划 移动端导航规划 移动站点优化 移动站点策划

而现在，在退让物理按键和拇指操作舒适中，微信Android版抛弃了顶部导航的方法，和IOS坚持了共同

网站导航规划 移动端导航规划 移动站点优化 移动站点策划

当然顶部导航也不是那么一无是处，QQ音乐和酷我音乐现在用的即是顶部Tab式导航，为了非常好的浏览基本信息（歌手、歌曲名）、以及支撑方便操作（播放/暂停）播放器需求固定在底部,那么顶部tab导航不失为一个好挑选（如下图）

网站导航规划 移动端导航规划 移动站点优化 移动站点策划

还有腾讯新闻和网易新闻这种新闻类APP，由于内容、分类较多，运用顶部和底部双tab导航，而切换频率最高的tab放在顶部，这是为啥呢？由于新闻在每个tab都是沉溺式阅览，最常用的操作是在一个tab中不断地下滑阅览内容，将常用的tab放在顶部，参加手势切换的操作，反倒能带来非常好地阅览体会。（如下图）