随着移动APP的发展至今,至少开发出了几百个优秀的APP。大部分的APP采用的APP导航方式就是最经典的tabbar方式,也就是我们这节课的主题要讲的——APP底部导航设计。
如下图的APP底部导航设计:有五个标签。
一直以来,APP导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让用户轻松到达目的地而又不会干扰和困惑用户。
回顾一下PC端的导航设计原则:
一般导航设计使用的都是7±2原则,即“由于人类大脑处理信息的能力有限,它会将复杂信息划分成块和小的单元。当然这么小的一个屏幕我们不会设计9个,而当导航支持滑动时,也不建议超过9个~
直奔主题,为什么大家都会选择APP底部导航设计模式来作为我们的APP主要的操作入口。
第一部分:为什么选择底部导航这样的设计方式
原因有二:
1、这样APP导航设计方式是由苹果将其传播开来。不仅很多苹果的官方应用采用了这种设计,苹果同样大力推荐应用开发者优先采用这种方式。
从某种角度来说,tabbar 基本就是导航的标准设计。而移动手机占有率最高的也是苹果公司的产品。
2、把导航放在底部是更加容易操作方便。用户学习成本较低。目前很大一部分都是喜欢单手操作的。
所以底部也是这类用户最容易接触的地方。
如下图所示:
有兴趣的小伙伴可以阅读:如何做好大屏手机的APP交互设计【APP设计课程】和移动触屏体验设计教程:手指触屏尺寸规范解析
以上2点可以得出结论。就是将最重要和最常用的行动放在底部是很必要的。因为他们可以很舒适的用单手和单指进行操作。
同时也是符合移动APP设计原则的。
第二部分:APP底部导航设计的优缺点分析:
优点:
1、让用户清楚整个app共有几部分重要内容,使内容直观清晰的显示出来,方便用户切换。
2、用户完成切换的成本很低,只需要一次点击操作,而放在屏幕底部对主体内容的视觉冲击可以说是最小的,这样用户就不会在浏览主体内容时受到过多的干扰。
缺点:
1、会占据一定的屏幕高度。减少了手机屏幕的大小。
2、那就是受制于屏幕宽度的限制,通常只能放置 4 到 5 个功能项的,过多的话将会显著提高用户的切换成本。
第三部分:APP设计师必须遵守的APP底部导航设计的三个关键点
记住APP底部导航设计: 仅显示最重要的四到五个标签为最佳
☆ 超过五个,靠的太近,难以点击。
☆ 每多加一个目的地,app就会更复杂。
☆ 不要尝试在底部导航上加滚动。
今天就跟大家聊到这里,设计先锋网每天跟大家分享一点APP设计知识点。让大家理解和学会每一个APP界面设计的含义。同时也是成为APP设计大神的必备基础课程。