移动端交互

优秀的App导航设计，能够充分运用“组织、隐藏、转移、删除”交互设计4策略。

3乘3归纳：
最基本的导航方式只有3种：标签式、列表式、矩阵式。
每种导航可以有3种状态：静态、动静结合、动态。

image.png

多种导航进行搭配，这些搭配方式，总结为3种：组合、层级、收放。
组合导航，就是在一个导航区域中集合多种不同的导航类型；
层级导航，就是导航的嵌套，通常App都会有顶级导航、次级导航；
收放导航，是指将 部分导航内容隐藏，用户点做相应的操作（如按钮）后滑出或弹出的导航。

image.png

01 标签系导航
摘要： 通常称为标签栏或者选项卡，位置在屏幕底部或者顶部，底部标签栏是iOS原生导航控件（Tab bar）
优点：主流（淘宝、微信、支付宝）、符合习惯、ios原生控件，开发简单
缺点：数量有限，一般不超过5个（不然需要结合其他方式，运用层级和收放）

image.png

02 列表系导航
摘要： 最常见的主导航模式之一，又可分为分组列表、个性化列表、行内扩展式列表（这个一般用做次级导航）和增强性列表（是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的）
优点：由上至下查看符合习惯，列表菜单很适合用来显示较长或拥有次级文字内容的标题，每行可以融入较多信息。
缺点：条目太多或分布不合理会导致用户查找困难

image.png

03 矩阵系导航
摘要：已矩阵组合成的导航，在不同的文章中可能被称作：跳板（图标卡片式）、磁贴式、陈列馆式……一般用做主导航，常用的布局模式33（常说的九宫格布局）23、22和21网格。但也不一定要拘泥于网格，也可以按照不同的优先级顺序，放大或者缩小网格，以突显出内容的层次感。
优点：便于组合不同的信息类型（运营位、广告位、内容块、设置等）；静态、动态结合可以展示出丰富的信息，同时保持视觉统一
缺点：各板块之间关系独立，视图将完全跳转，如需频繁切换则不建议采用

image.png

image.png

04 抽屉式导航（下拉式）
摘要： 属于Android原生控件的导航方式，后在ios中也常见到。一般在Android中用做主导航，在ios中往往会搭配其他的主导航模式做次级导航使用。在不同的地方可能被称为：扩展菜单、侧边导航、汉堡导航；
即是导航，又是一种跳转方式（不弹出新页面），抽屉打开后可以展现任何一种导航方式（结合列表式的偏多）。
不用时隐藏，要用时打开，可布置较多功能，优点如此，缺点亦如此
优点：隐藏时不占用界面空间、适合做次导航、不频繁使用功能收纳（隐藏）
缺点：不直观、不适用于主导航、如遇频繁操作的功能，用户不断开关抽屉体验不好。

点线面，形态合
在设计导航之前首先要理清产品的业务逻辑，了解公司的战略与资源，才能搭出好的导航框架。