​ 数字界面看似只是一个扁平的二维空间，实际却和真实世界一样，我们在产品中滑动、点击、切换、选择，就像在三维的物理世界游走，只不过构成空间的建筑不是固定的，而是在我们的手中游走变幻，为我们创造出通向目的的路径，所以结构就是我们行走的路，而形式指引我们方向。

​

一、导航结构

结构代表了用户路径

  • 线性结构（渐进模型）

    最简单的结构类型，用于有秩序、有明显先后关系的功能设计，但路径不宜过长，有时需要标识线索

    现在很多产品的登陆流程做成多页面的，一个任务一个页面，层级虽然增加，但是操作功能聚焦，反而给人更快速的使用体验

    举例：多页面的登陆注册、序列地图、引导页

  • 树状结构（中心辐条结构）

    最直接的模式，逐级选择深入，可返回上级切换，父子结构层级清晰、易于理解，是最常用的结构，但我们需要关注信息的分类归属

    举例：手机系统界面

  • 金字塔模型

    可以在次级页面快速切换内容，常用于沉浸内容的设计，虽然前后切换查看内容的效率没有完全连接或树状结构高，但在随意发现浏览的情境下一次展示少量内容用户关注度会更高

    举例：图片歌曲的浏览

  • 充分连接

    直接展示所有选项，用户可以从一个页面跳转到其他任何页面，易切换，可缩短路径，选择效率高，但选项多时搜索会更困难

    在大屏的PC和平板上更适用

    举例：全局导航栏、下拉菜单、胖菜单

  • 多级导航（充分连接的延展）

    基于充分连接进一步扩展，在次级页面下充分连接内容，适合隐藏式设计，但开始无法直接选择二级页面中的相关内容，效率较低，可以考虑是否能够改变形式转化成充分连接，比如下拉菜单

    举例：二级tab

  • 自然结构

    娱乐产品中常用该结构，多界面的复用和统一功能在不同渠道的分发都体现了自然结构的重要性，虽然没有明晰的路径，但是可以拓展内容链接的广度

    举例：标签

二、导航形式

导航形式是包裹在结构外的设计模式，透过这些固有样式用户可以快速理解产品的使用方法，从而自然地形成功能的使用路径，结构是一种无形指引，只有理解了结构才能更好地架构功能、设计界面。

  • 扁平导航

    特征：无明显优先直接展示所有导航选项，选项比重差异小，可以较平均地分配用户注意力

    举例：标签导航、宫格导航、面包屑、序列地图

  • 层级导航

    特征：含列表，有先后关系，适合在竖向空间中延申展示更多

    举例：列表导航、抽屉式导航、下拉菜单、胖菜单、站点地图

  • 内容导航

    特征：以内容为导航项，丰富的内容传达出更多的信息，虽然所占空间较多，但可以增强用户的查看动机

    举例：卡片导航、陈列导航、仪表盘设计

三、设计要求

知道我在哪、如何快速找到我想要的、如何退出

  • 符合用户目标，根据信息的优先排序设计合适的导航结构
  • 符合用户的心理模型，布局在合适的位置，提供环境线索