1# 应用导航结构设计要求 2 3 4应用中的导航用于引导用户在应用的各个页面进行浏览。好的导航让用户知道身处何处，去往何方，以及来自哪里。 5 6 7## 导航的原则 8 9导航需要遵循以下原则： 10 11- **一致：** 导航操作的结果应该与用户的期望保持一致。相同或类似的场景使用用户熟悉的界面布局和控件，在多设备上确保一致的应用架构和导航行为，让用户无论在什么页面，都知道如何导航。例如二级界面使用左上角的返回按钮来返回界面的上一个层级。 12 13- **清晰：** 导航应该提供清晰的路径。用户使用的时候，逻辑关系简单且容易理解，能够知道当前处在界面的什么位置，操作后将会跳转到什么位置，不会迷失方向。例如使用底部页签，让用户在平级页面之间进行切换。 14 15导航要避免以下设计： 16 17- **层级过深：** 导航层级建议在三层以内。对于太深的层次，会带来操作效率的问题。如果确实需要深层级设计，建议使用面包屑设计或增加一键回到首页的功能。 18 19- **导航复杂：** 在侧边导航中，使用底部页签，会让操作变得复杂，建议仅使用侧边导航。 20 21 22## 导航的分类 23 24常用的应用导航有：平级导航、层级导航和混合导航。 25 26**平级导航** 27 28平级导航结构中，页面均处在同一层级。 29 30使用场景：用于展示同等地位或同等层级的界面。 31 32 33 34例如：以Tab方式组成的页面。图中照片、相册、发现为一级界面，从视频相册进入二级内容界面。 35 36 37 38多设备设计：可转化导航类控件到符合设备体验的位置上。默认设备上使用Tab导航，PAD等大屏设备使用侧边Tab导航，智慧屏使用顶部Tab导航。 39 40 41 42**层级导航** 43 44层级导航结构由父页面和子页面组成。父页面可以有一个或多个子页面。每个子页面都有一个父页面。 45 46层级导航适用于多层级的复杂结构。层级结构深的内容，用户访问的路径变长，效率降低，可以通过适当的层级穿透设计（例如：控制中心中的蓝牙开关，解决了进“设置-蓝牙”界面设置操作路径过长的问题）解决此问题。 47 48使用场景：页面存在上下级关系的应用。 49 50 51 52例如：通过从内容进入后经返回键返回之前的页面。 53 54 55 56多设备设计：可以考虑将上下层级的界面在同一界面展示。默认设备和智慧屏上使用上下层级关系。平板等大屏设备上使用分栏的方式展示内容。 57 58 59 60**混合导航** 61 62在实际应用设计中，仅使用平级或层级导航可能无法应对更复杂的业务结构。此时需区分不同页面的导航关系，对同等地位或同等层级的页面使用平级导航结构，对具有复杂关系的页面使用层级导航结构。 63 64使用场景：应用由几个同等级的模块组成，每个模块又有上下层级关系页面。 65 66 67 68多设备设计：可以根据平级导航、层级导航自身的设计规则综合运用，一般平级导航优先级比层级高。 69 70 71
