手机网站设计：你可以在导航上多花点心思

根据产品层级的深度和广度，选择适合的导航模式，是产品设计中的关键一环。导航其实只有寄种，但大家一定不能被现有的导航模式所束缚，未来会有新的导航模式，新的操作手势…，设计的心应该是自由的，若你羽翼未丰，就在规则的天空中飞行，可能不会出彩但不至于犯错；若你已成雄鹰，便可自由飞翔，突破规则，甚至建立自己的规则。

平铺式导航

当你的信息足够扁平，可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验，大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。PChouse是一个家居杂志的APP，杂志休闲随意的特质，非常适合平铺式导航，大限度的保持了图片的完整性。（如下图）

但缺点是用户只能切换的相邻页面，很难跳转到非相邻的页面，很容易迷失位置，因此平铺式导航都会添加几个小点来指示当前位置。如墨迹天气中切换城市的操作就运用了平铺式导航，优点是可以在一个页面完整展示当前城市的情况，快速切换到其他城市。但如果你设置的城市比较多，就很难快速定位到某个城市，但所幸手势操作切换方便，且正常情况下，用户最多只会设置2-3个页面，不会造成太大的负担。

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

总结：

轮播式导航比较适用于足够扁平化的内容和随意浏览的阅读模式

需要注意的是：无法跳转至费相邻页面，如果入口间需要反复跳转，则不适合这种模式

宫格式导航

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

常见是因为，无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了（就是下图啦）

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

但是为什么不常用呢，大家可以翻一下手机里的APP，看看哪个APP的主导航用了宫格式导航？你可能只能找到一个最常用的，尤其是爱自拍的亲们-美图秀秀（如下图）

经常使用美图秀秀的人都会有一个共同的烦恼，例如我拍了一张图片，我需要美图一下，我的心理模型是这样的：进入美图秀秀-打开一张图片-先祛斑祛痘、放大眼睛、瘦个脸-最后加上特效（自然/甜美可人/粉嫩系）-保存图片。

但是美图秀秀给我的实际模型却是这样的:进入美图秀秀-打开一张图片-进入人像美容-祛斑祛痘、放大眼睛、瘦个脸-保存图片-再进入美化图片-加个特效-再次保存。这样做的结果是流程复杂，而且我多存了一张没用的照片，还要到照片里进行删除。

这就是宫格式导航的缺陷，信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。

总价一下：

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

一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。

悬浮icon导航

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

iOS系统就运用了这种导航模式-Assistive Touch, Assistive Touch是在iOS5出现之后搭载的新的辅助功能，知乎上很多人吐槽这个悬浮方块非常碍事，还有很多人说这是因为home键质量不佳而且官方并没有明确提出有效的解决方案，所以AssistiveTouch是曲线救国，此处应有笑声…我最早的一部4S用了2年，摔碎屏2次，home键都依然坚挺，撇开home键不谈，单说悬浮icon在大屏幕时代发挥的作用，当你单手持握手机，拇指在手机中部浏览，你想回到主屏幕，但是手指却难以到达屏幕底部，悬浮方块在这个时候就能为你提供快捷操作。

而且你可以在AssistiveTouch里自定义顶层菜单，我比较喜欢里面的屏幕快照功能，不用按住电源键和home键就能截屏的感觉棒棒哒！

Assistive Touch从iOS5一直活到iOS9，真不是一个鸡肋的功能，关键看你怎么用。

在Android的MaterialDesign中，同样提出了悬浮icon的设计概念。

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

总结：

悬浮式icon是一个非常便捷的操作入口，也适应大屏幕时代。

但需要注意的是

l悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。

l在某些信息层级繁多且复杂的APP，让用户自主决定是否需要调出悬浮式icon，或者让用户自定义菜单会更加符合用户的心理预期。

文章题目：手机网站设计：你可以在导航上多花点心思
文章URL：https://www.cdcxhl.com/news/72627.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作、手机网站建设、网站设计等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联