手机端的几类导航设计

在使用不同的app时,我们都会看见界面上出现各式各样的导航。有的位于顶部、有的位于底部侧部,有的甚至一直悬浮在界面中。

今天一起来看看手机端的导航设计吧~~之前也写给相关的文章,这一次是为了补充吧。。


一、标签式导航设计

标签式导航又叫Tab式导航,是移动应用中最普遍、最常用的导航模式。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向简单而高效。标签式导航又分为底部标签导航和顶部标签式导航

底部标签式导航

我们每天使用的app中,大多都有底部标签导航,比如常用的qq、微信、微博。将导航放置在屏幕底部是为单手持握时拇指操作带来了更大的舒适性和方便性,也符合拇指热区的范围。将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性,还关系到视线问题。如果放在上面,用手指操作时,会挡住阅读的视线;如果控件在底部,不管手怎么移动,至少不会挡住主要内容,从而给予清晰的视角。呈递内容的屏幕在上方,控制按键在下方。


底部tab式导航

顶部标签式导航

顶部式导航一般是将内容进行分流,分类。顶部tab标签适用于沉浸式类的app,比如新闻资讯类、小说阅读类app,因为内容多,需要进行分类。对于目前的app来说,几乎都是底部标签导航和顶部标签导航相结合的。目前市场上多数顶部导航都能通过滑动进行切换,也相当于二级导航。


顶部tab标签导航

二、抽屉式导航

抽屉式导航将部分信息内容进行隐藏,突出了应用的核心功能。设想你的产品信息层级有非常多的页面和内容,难以在一屏内显示全部内容,那么你一定首先会想到去设计一个底部或顶部的tab导航,但导航太多无疑显得臃肿,而且使用户难以点击,那么这个时候,抽屉式导航是个不错的选择。

抽屉式导航

三、宫格式导航

宫格式导航又叫桌面式导航,块与块之间,相互独立,无法实现互相跳转。每一块功能都十分明确。

宫格式导航

三、悬浮icon导航

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


悬浮时导航



我们在设计导航的时候,一定要从功能入手,去考虑选择哪一种导航合适。另外导航设计需注意以下三个设计原则:

1.高亮。选中的标签应处于高亮的状态。

2.节制。尤其是底部导航设计一定要节制,最多不超过5个标签。

3.表意明确。不要乱设计导航,要让用户明白此导航的作用,减少误操作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,098评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,038评论 3 119
  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    设计思考阅读 48,968评论 7 117
  • 不管是老辈人还是年轻人,在挑选大件物品时都有一种品牌的情结,而在同等知名度的品牌面前,挑选者心里的天平又会不自觉地...
    幸福的花儿_1b59阅读 2,860评论 0 0
  • 今天课上九号同学分享了自己的感受,在生活中我们其实是看不见真实的别人的,因为我们看不见自己!也感受不到自己的感受!...
    竺子阅读 1,586评论 0 0