移动导航设计
2017-03-14 15:36:38 0 举报AI智能生成
移动导航设计是一种专注于为移动设备提供直观、易用和高效的用户界面的设计方法。它需要考虑的因素包括屏幕尺寸、触摸操作、网络连接速度等。设计师需要确保导航菜单简洁明了，易于理解和操作，同时还要考虑到用户的使用习惯和心理预期。此外，移动导航设计还需要考虑到不同设备的兼容性问题，以确保在所有主流移动设备上都能提供良好的用户体验。总的来说，移动导航设计是一种旨在提高移动应用或网站用户体验的重要设计手段。
作者其他创作
大纲/内容
分层结构（层次结构导航）
从杜威十进制分类法到动物界的门纲目科属，信息通常都会被分类到类别，以及子类别、子子类别...中去，这就是层级结构
列表式导航
每一个列表项都是进入子功能的入口，用户通过在每个页面选择一次进行导航，直至达到目标位置
模块之间的切换必须返回至列表主页当中
列表相当于一个一行一列的表格，列表项中级可以填充文字图片，也可以填充按钮，或展开某一项
例子：iOS设置、QQ邮箱app
列表中可以填充更多的列表项，来扩展有限的屏幕空间上能容纳的入口数量（如微信发现页，新增小程序入口）
作为常见的导航方式之一，列表是导航更多被用来做次级导航，如个人中心、设置、内容/信息列表中（如美团中"我的"）
宫格式导航（跳板式导航）
可看作列表式导航的变形，不同之处在于，宫格式导航是以N行N列的表格来呈现（如九宫格），元素以图片为主
宫格中一个格子代表一个功能/模块入口，从一个模块到另一个模块，用户必须原路返回（或从头开始），再做选择
宫格式导航层级在app中非常流行，因为它能容纳更多的功能入口，同时跨平台不受限制（移动互联网刚兴起的时候，每个平台的交互规则有很大的区别）
当前，很少有产品会用宫格式导航做主导航（美图秀秀、微店是现在为数不多仍旧用宫格式导航做主导航的应用之一），大部分是用宫格式导航的扩展功能做次级导航，与标签式导航及其他类型导航共同构成整个应用的导航系统（如支付宝）
陈列馆式导航
陈列馆式导航可用来呈现实时内容（如新闻、菜谱、照片），可以采用网格布局（如一直播）或轮盘布局（如格瓦拉电影），还可以采用幻灯片模式来进行展示
进入另外一个内容详情之前，也必须先回到主界面重新点击进入，不同之处在于，陈立管事导航有更丰富的表现形式、更加随意的组合效果（瀑布流等）以及丰富的动态效果（轮盘、幻灯片等）
相较于列表导航、宫格式导航，陈列馆式的设计展示了彼此独立、内容之间无层级关系的内容项（如开眼），所以，陈列馆式设计最适合呈现经常更新的、视觉效果直观的、彼此独立的内容）
优缺点
优点
能应变大量的类别、功能和项目
组织方式常见，容易理解，可直接对内容进行交互
直观、占用屏幕空间小
列表展示很适合用户自定义分类
缺点
主功能只有在最顶层才会显示出来，不像标签栏，在每个页面都可以看见
主功能和分类、内容之间的切换有些麻烦，必须要先回到顶层页面，然后再依次点入
扁平化结构
在扁平信息架构的应用中，用户可以从首页目录直接切换到另一个类目视图，因为所有的分类都可以从主屏直接访问
标签式导航
对应iOS中的标签栏，是现在最常见的主导航模式
最大的好处就是扁平化整个应用的导航结构，所有主类别视图都可以在顶层视图进行切换，用户可以直接从一个类别的视图切换到另一个类别的视图，直观清晰、易于用户理解（如网易云音乐）
标签栏标签最好不多于5个，当多于4个时，可将剩下的功能全部置于"我的/个人/设置"中
变形：标签栏中加入功能按钮，一般是一个应用中最核心功能的入口或入口集（点聚式），多为发布类按钮（如Instagram、LOFTER、微博、QQ空间等可以快速发布内容）
固定选项卡
Android系统提供的三种顶级导航方式之一，与iOS系统中的标签栏相似，同样能够扁平化整个信息结构，并且支持左右滑动切换到不同的视图
随着移动端交互设计的发展，两大阵营相互借鉴、完善，交互设计规范越趋于相似，你会看到大量安卓应用也采用标签栏作为主导航，iOS应用中也采用顶部选项卡式导航作为次级导航（安卓版网易云音乐、iOS版QQ音乐都用固定选项卡式导航做主导航）
以下场景中可以使用固定选项卡：需要经常切换视图/内容视图有限(3~4个）/让用户清楚地知道可供选择的视图（如荔枝FM、小咖秀）
固定选项卡一般放置在屏幕顶部（导航栏或导航栏下方），展示同一模块下不同类别的信息或筛选不同模块的信息（如LOFTER、小红书）
滚动选项卡
同属选项卡式，一般要比固定选项卡窄，一个模块中可以显示多个（超过5个）类别的视图，并且还可以进行扩展以及自定义展示（多用在频道/模块中），同样可以左右滑动切换不同类别的视图（如QQ空间、腾讯新闻）
滚动选项卡能通过水平滑动，定位到更多的选项卡视图中，如果应用的内容中有很多视图，或灵活的插入而不能确定有多少视图会被展示，就使用滚动选项卡吧（如虎牙直播、凤凰新闻）
优缺点
优点
能够快速访问到所有主要模块视图
子主题
有利用用户进行视图之间的频繁切换
缺点
标签栏导航在一屏内无法展示出全部标签，只能显示5个
标签栏以及选项卡栏会占用一定的屏幕空间
选项卡过多，会导致切换不同类别视图较繁琐（此时，最好在屏幕右侧提供全部分类的导航）
内容（体验）驱动型
抽屉式导航（侧边栏式导航）
核心功能流程单一，主界面就能满足用户核心场景下的需求，不需要频繁在几个功能模块之间进行切换，将其他模块（通常是分类、设置、个人中心等）做一个收纳，利用抽屉导航隐藏起来（如滴滴出行、探探）
节省屏幕空间，突出主要功能模块，将相对不常用的功能模块整合起来放到侧边抽屉（如QQ、懂球帝）
抽屉式导航三种风格：浮层（如天天快报）、嵌入式（向右推动原有界面，如知乎日报）、新兴式（向右滑动的3D效果，如酷狗音乐）
缺点：功能模块之间的切换比较繁琐，新用户学习成本较高
卡片式导航
类似生活中扑克牌，模仿切牌、换牌、翻牌等动作模式，是一种比较新颖的导航模式（如探探、acfun）
陌陌-点点&秒拍-热榜都采用卡片式设计向用户展示推荐好友以及最热的短视频信息
翻页式导航
最常见的是利用页面控件（iOS中的标准控件），告诉用户打开了多少视图，当前处在哪个，利用手势操作控制页面的设置
墨迹天气的城市视图展现以及Facebook中查看好友请求都是翻页式导航，墨迹天气中提供了指示页面数量以及页面当前位置的页面控件，而Facebook则利用部分可见的内容引导用户滑动切换 不同好友
下拉列表式导航
下拉菜单能让用户在有限的屏幕空间上做更多的动作，通常用来筛选同一信息模块下不同类别的信息，或快速启动某些常用的功能模块，而不需要频繁的页面跳转
Android中对应的控件为spinner控件，但该控件用于同一类别下不同视图之间的切换，而不是跳转至完全不同的视图；iOS中下拉菜单为自定义控件，可以实现不同类别之间的切换（如秒拍、喜马拉雅FM）
不要让菜单覆盖整个屏幕，同时点击背景的任意位置可以隐藏菜单（如same、网易云音乐）
下拉菜单常用做信息/内容列表的筛选，筛选同一信息列表中不同类别的信息（如58同城、苏宁易购）
总结（如何应用到平时的产品设计中）
首先，可以参考竞品是如何做的，为什么这么做，这么做的效果如何
其次，结合自己产品实际的需求、功能、内容、用户使用场景等进行思考，可以在做出几套方案后，进行最优选择
最后，注意在平时使用产品的过程中留意相关的产品设计，适当的进行总结，才能在产品设计中游刃有余
0 条评论
下一页
为你推荐
查看更多
