![突破平面Photoshop UI界面设计与制作剖析](https://wfqqreader-1252317822.image.myqcloud.com/cover/726/52842726/b_52842726.jpg)
上QQ阅读APP看书,第一时间看更新
2.2.1 导航的设计规范
APP界面中的导航用来组织信息分层,向用户展示APP的功能要素。信息分层应该简洁明了,易操作,无须用户频繁翻页查找。
在规划导航时,先将最重要、最核心的功能放置在第一层页面,次要功能放置在第二层页面,以此类推,其他内容放置在第三层页面。
导航的类型可以分为标签式导航、列表式导航、宫格式导航以及其他类型的导航。
1.标签式导航
标签式导航是最常见的导航之一。大部分APP使用这种类型的导航,其具有功能清晰、切换快捷等优点。图2-73所示为不同类型的APP运用底部标签式导航的效果。
底部标签导航容纳的图标通常为3~5个,超出5个,会增加用户操作的难度,引起认知上的混乱。假如APP的功能很多,也不需要逐一在导航中展现。可以将其中一部分功能安排在第二层页面,或者设置一个名为“更多”的按钮,点击该按钮,可以显示隐藏的功能。
2.列表式导航
列表式导航符合用户的阅读习惯,信息左对齐,并添加右箭头引导用户进入下一层级。列表式导航帮助用户管理个人信息,常用作第二层页面,广泛用于APP和网页。
图2-74所示为APP个人信息页面中列表式导航的运用效果。
3.宫格式导航
宫格式导航占据页面的较大空间,信息入口独立,相互之间不产生交叉。操作顺序为,点击进入A页面→退出返回主页面→点击进入B页面。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P37_3837.jpg?sign=1738867202-1O5Auex0RJ290RsSgqPMwz45BkiZwgWH-0-7b7f92fdb20fdb6a280a32e5c77776c3)
图2‑73
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P37_3842.jpg?sign=1738867202-iOXnwfA20Ek8B9ZJkMQHuBDlGx2SVAYP-0-6c9b9d2c838ab79bccb8754ec1ec33b6)
图2‑74
宫格式导航的优点是信息展示清晰,方便用户操作。不足之处是,如果需要频繁切换页面,则需要用户多次返回主页面,无法在多个入口之间灵活跳转。
图2-75所示为在APP中运用宫格式导航的效果。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P37_3849.jpg?sign=1738867202-WvbwbepO75lvqYlwQz1yKxj6lwjrQdwm-0-d08399225e5c5db77a4450ddca782628)
图2‑75