>10.22 移动端导航框架

10.22 移动端导航框架

1 标签式导航

标签式导航分为

• 1 底部tab式
• 2 舵式 提高用户点击的次数
• 3 顶部tab式

颜色突出：可以快色识别vi色

简约、全白：将用户的视觉焦点集中在内容
顶部+底部：功能繁琐的界面
底部tab：沉浸式阅读提高，内容更多

标签式导航总结

最常用、最不易出错的导航模式，适用于入口分类数目不多，根据逻辑和重要性最好控制在5个以内
用户可以在入口间频繁切换来执行多个任务

2 抽屉式导航

抽屉式导航总结

如果信息层级繁多，为了让主页面看上去干净美观，可以把低频繁操作的功能放在抽屉栏。
在大屏时代使用抽屉栏，手势操作尤为重要。给页面足够空间，提高页面沉浸式体验，扩展性好，
可以提供更多功能入口，需要用户有一定参与的信息层级，最好不要放置在抽屉栏

3 列表式导航

列表式导航总结

列表是导航大多辅助导航来展示内容，需要满足层级浅且内容平级的条件。
列表式导航要注意为列表内容分类，层级划分要清楚。

4 平铺式导航

平铺式导航总结

平铺式导航比较适用于足够扁平化的内容和随意浏览的阅读模式，但是无法跳转至非相邻页面，若入口间需要反复跳转，可进行相应调整或者考虑别的导航模式。

5 悬浮式导航（按钮）

悬浮式导航总结

悬浮式导航是一个非常便捷的操作入口，也适应大屏时代，设计的时候要注意不要让他遮挡住页面的重要内容或者操作。

移动端的页面布局

1 网格布局

适合展示较多入口，且各模块相对独立，各入口展示清晰，方便快速查找

2 列表布局

• 层次展示清晰明了
• 视线从上到下，浏览体验快捷

3 图表信息布局

数据可视化，采用图表布局，让app更具商务气质，用图案表格的方式直接呈现信息

4 卡片式布局

优点：能够很好的进行信息分类，信息呈递专一、方便整体布局设计
缺点：对页面的空间消耗很大，导致一屏呈现信息量很少，用户操作负荷高。