移动UI设计---有哪些常见的导航形式

1,131 阅读3分钟

此处的导航区别于前面所说的导航栏,它是对页面中各元素的整合设计。优秀的导航设计能更好地引导和帮助用户使用APP 的各项功能。

卡片式导航

通过卡片对信息进行归纳,可以增加页面的层次感,让信息有更明显和更规矩的区分,给用户很好的视觉感受。 但卡片周围都要保留一定间距,这会占用屏幕空间,导致一屏内无法呈现较多信息。因此,这类导航不适合用于阅读或新闻等以文字为主的APP 中。 使用该类导航的APP 有米家、英语流利说和爱彼迎等,如图所示为爱彼迎APP 页面。

image.png

舵式导航:

舵式导航能较大限度地引导用户,其标签栏中通常有 3 或 5 个导航项,中间的导航项是重要且需要频繁点击的功能图标。 使用该类导航的APP 有美拍、小红书、开源中国和映客直播等,如图所示为使用舵式导航的美拍APP 页面。

image.png

列表式导航: 层次清晰,易于理解,可展示内容较长的标题,配合下拉列表还可展示次级内容。 但列表式导航的灵活性较差,只能通过顺序或颜色来区分入口级别,同级标题过多时,会使用户产生视觉疲劳。 使用该类导航的APP 有微信、网易新闻、每日瑜伽和简书等,如图所示为使用列表式导航的微信APP 页面。

image.png

抽屉式导航:

也称侧滑式导航,用户可通过左右滑动页面,或点击页面左上角的展开按钮,控制当前页面的显隐。 为使页面间过渡平滑,此类导航需要设计切换动画,实现难度相对较大。 使用该类导航的APP 有手机QQ、滴滴出行、网易邮箱和酷狗音乐等,如图所示。

image.png

瀑布式导航:

目前比较流行的导航形式。其特点是随着页面向下滚动,内容会不断加载,直至穷尽。适合展示以图片或视频为主的信息,如图所示为使用瀑布式导航的微博APP。 根据APP 的版式需求,内容视图中的模块也可用双排平齐或错位排列,如图所示为双排平齐的优美图APP 页面。 使用该类导航的APP 还有花瓣和抖音等。

image.png

宫格式导航:

将功能入口等距分布在页面中,便于用户查找所需功能。一般横向不超过5 个图标,超过时可将设置为左右滑动形式。 缺点在于:一旦进入某个页面后,需要返回主页才可进入其他功能入口,形成较长的路径链,不适合多任务操作。因此,常用作次级导航。 使用该类导航的APP 有优酷、支付宝主页和微信中的“钱包”页等。

image.png