移动导航设计中的10种导航

为了让用户能够顺利的使用产品,则必须为用户提供一个有效的导航系统,让用户时刻清楚自己在应用中所处的位置、可以去哪儿。这也是 信息结构 中的核心点。

为了让用户能够顺利的使用产品,则必须为用户提供一个有效的导航系统,让用户时刻清楚自己在应用中所处的位置、可以去哪儿。这也是 信息结构 中的核心点


导航系统大致可以分为四类:全局导航、局部导航、情景导航、辅助导航,在后续的文章,我们会一一详解。本篇文章主要讲解市面上常见的10种导航,以便可以快速了解和掌握。


01翻页式导航


又叫翻图式导航,比较常见的是 手机中切换应用、手机自带的天气软件中,利用手势操作控制页面的位置。

( 注:手机切换应用 & 天气 )


02固定选项卡式导航


可以分为顶部、底部两类,最多不超过5个,让用户清楚地知道可供选择的视图,一般作为主导航存在。

( 注:穷游 & 支付宝 )


03滚动选项卡式导航


滚动选项卡与固定选项卡同属选项卡式,但两者不同之处在于滚动选项卡可以进行扩展以及自定义展示,并且还可以左右滑动切换不同类别的视图(前提是不与中间手势产生冲突,例如地图类产品)。

( 注:美团 & 滴滴出行 )


04舵式导航


舵式导航是固定选项卡式导航的变体。因为外观看起来像船舵,所以取名舵式导航。和标签导航不同的是它将核心功能放在导航正中央,点突出了核心功能,并用对比强烈的色彩来和其它导航进行区分,常用于发布按钮。

( 注:58同城 & 抖音短视频 )


05列表式导航


列表导航是最常用的导航方式之一,以一行一列的表格呈现,多用在个人中心、设置、内容/信息列表中,其中的每一个列表项都是进入子功能的入口。
  • 内容上:多数是图标 + 文字

( 注:支付宝 & 微信 )


06卡片式导航


卡片式导航在市面上应用不算太多,比如探探、陌陌,像卡片一样堆叠展示推荐用户,左滑表示无感,右滑表示喜欢或点赞。

( 注:支付宝 & 微信 )

07跳板式导航


这类导航又叫宫格式导航,以N行N列的表格来呈现,每一个都代表一个功能/模块入口,既可作主导航,亦可做次级导航。
  • 样式上:导航可大可小,看功能/模块多少与扩展性,例如支付宝内容上:多数是图标+文字(图标在上,文字在下),少数只有文字(例如小程序-白熊求职)

( 注:美图秀秀 & 白熊求职 )


08陈列式导航


陈列式导航在展示类产品中常见,例如快手、抖音等等,好处就是有更丰富的表现形式、更加随意的组合效果(瀑布流等)以及丰富的动态效果(轮盘、幻灯片形式)。

( 注:闲鱼 & 穷游 )


09抽屉式导航


抽屉式导航也叫侧边栏式导航,将相对不常用的功能模块整合起来(通常是个人中心、设置等)做一个收纳,节省屏幕空间,突出主要功能模块。
抽屉式导航另一种变化就是悬浮按钮式,要注意的是悬浮按钮与数据之间的交互友好,不能遮挡页面上的操作。例如微信的新功能 - 浮窗。

( 注:网易云音乐 & 微信 )

 

10下拉式导航


下拉式导航通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些不频繁使用的功能/模块,而不需要频繁的页面跳转。一般位于产品顶部,通过点击呼出导航菜单。由于导航菜单位于屏幕顶部,能在一定程度上节省屏幕空间。

( 注:微信 & 支付宝 )


总结

随着应用功能越来越多,页面的分类也越来越细致,单一的导航模式已经无法满足信息的层级分类,这时就需要使用复合式导航能将多种导航组合到一起,使大量信息通过多层级分类有序的展示在一个页面,是目前最常见的导航模式。需要注意的是 过多的导航会使用户失去焦点,在导航的层级搭配上也需要注意。

在平时使用产品的过程中观察各种层级的导航变化,思考它们的设计方式,结合自己产品实际的需求、功能、内容、用户使用场景等进一步思考,做出多套方案后进行最优选择。

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表