当前位置:首页 > 新闻中心 > 建站方案
手机网站设计:你可以在导航上多花点心思责任编辑 :李飞    文章来源 :星翼创想(www.iswweb.com)    发布时间 :2015-11-17    阅读次数:848

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


平铺式导航

当你的信息足够扁平,可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验,最大程度的保证了页面的简洁性和内容的完整性,且一般都会结合滑动切换的手势,操作起来也非常方便。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的Material Design中,同样提出了悬浮icon的设计概念。

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

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

总结:

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

但需要注意的是

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

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


文章转载请保留网址:http://www.iswweb.com/news/solutions/1552.html