简化网站导航的提示

一旦错误的道路开始,项目会发生什么事情,即使我们对我们前进的方向感觉不太正常,我们通常也不愿意回头。这个问题会产生更多的时间或金钱。被投入到追随错误的道路。

克服这种犹豫是至关重要的。 如果糟糕的导航结构会引入可用性问题(例如本文示例站点中的情况),我们需要修复错误的结构,而不是继续开发站点。

如果我们不这样做,以后修复损坏会更加困难。 在设计或重新设计导航时,我们需要先记住用户的需求。

很少需要复杂的导航结构。 我们只是认为它们是我们第一次创建它们的时候。 你需要经常做的是问自己是否有更简单的方法来实现相同的目标。

如果有一种更简单的方法,你需要使用它,因为无论它看起来多么令人印象深刻,其他任何东西都会比你从长远来看更有利于你。 在本文中,我们将使用实时网站示例来简化复杂的导航结构,以提高可用性。

步骤1:检查现有设计

我们开始的问题是现有的导航设计具有过多的复杂性。 对于我们为此项目重新开发的示例站点,这种复杂性 似乎 必要的,但只是因为更好的方法并不是立竿见影的。

首先,它将有助于理解为什么原始导航首先是复杂的。 主题站点是一个教程站点,教程的主题是一个相当复杂的系统。

由于该网站使用主题系统的实时模拟器供学生学习,这意味着我们不能(或不应该)在页面之间导航。 我们需要通过内联插入来显示内容,以避免不断重新加载系统并且必须保存系统状态。

因此,导航链接并不总是重定向到物理页面,并且大多数将重定向到虚拟页面。 在这种情况下,导航可以被视为分为课程,章节和主题。

顶部导航栏已经足够简单,虽然它可以使用更新的外观。 当用户第一次到达网站时,他们将看到左栏中的菜单。

用户需要先从此菜单中选择一个课程,然后才能看到各个课程章节和主题,如图2所示。

使这种结构过于复杂的原因在于不需要以这种方式分割导航(用户无法在没有额外导航步骤的情况下选择顶级导航项),并且数字分页不适合选择主题。

但是,很容易理解为什么导航最初以这种方式设计的逻辑。 首先创建模拟设备,并且具有由SVG代码确定的特定大小。

在对CSS3 Zoom功能进行通用完全浏览器支持之前,使用代码更改其大小意味着更改所有JavaScript代码(通过10,000行),这本来就是浪费。

因此,原始导航设计是为了节省水平空间,以便课程和模拟设备可以同时适应屏幕。

现在我们已经了解了现有导航结构中的缺陷,这使得在下一步中更轻松地规划新的导航设计。

步骤2:规划新设计

由于现在对最流行的桌面浏览器中的CSS3 Zoom提供了更加一致(但仍然不是很好)的支持,因此模拟设备可以缩放到更小的尺寸,而无需大量重新编码。

如果这样做得当,左边会有更多的空间,让我们在中间有一个额外的列。

真正明显的变化是课程体已完全远离导航区域,这正是它应该的样子。

此更改将使导航系统具有更大的灵活性,并将为课程主体提供更多空间。

步骤3:实施计划

请记住,每节课可以有多个章节,每个章节可以有多个主题。 我们该如何处理? 最简单的方法是制作一组可折叠的菜单项。 扩展课程揭示了它的章节,扩展章节揭示了它的主题。

在图4中,您可以看到左侧菜单中显示的未展开课程列表。

另请注意,在课程正文中必须添加导航按钮。 这是为了消除用户始终使用导航菜单跳转到章节中的下一个或上一个主题的需要。

这是用户从左侧菜单中选择课程时将看到的内容:

这些有点神秘的链接对你来说可能并不重要,但对于培养成为飞行员的人来说,他们是不言自明的。 将列表扩展到第三级将显示各个主题页面,如图6所示。

随着链接列表的增长,垂直滚动条将添加到页面中。 我们可以通过为菜单设置固定高度来使滚动条附加到菜单本身。

技术的东西

上例中使用的外部脚本,CSS框架和字体包括:

  • 引导v3.3.7
  • 字体真棒v4.7.0
  • 谷歌字体:pompiere,音乐会一,varela圆

这绝不是 只要 获得这样的工作的方法,但他们已经在这个项目中使用,作为一种快速实现Web安全解决方案的方法,而无需太多的编码或额外的标记。

如果您使用Bootstrap作为CSS框架,则菜单原型的构造函数非常简单。

在第一个缩进级别,您为导航区域创建一个div(此处ID为“leftSide”),并在其中创建一个类div,以设置包含空间应具有的属性。 在这种情况下,我们只使用已在Bootstrap中预定义的标准“井”类(图7)。

在这个集合中,在第三个缩进级别,我们添加了一对用于隐藏和显示菜单的段落(图8)。 每个显示属性都很重要,因为它允许链接作为切换开关。

如您所见,单击链接将触发JavaScript函数以隐藏或显示列。 在这种情况下,“隐藏”只意味着移除内容并将列缩小到更小的尺寸,如图9所示。

hide函数的作用是将左列缩小为宽度40px(刚好足以显示将其扩展回正常所需的图标),并将中间列宽扩展为视口的50%。 显示一切都恢复原来的样子。

现在我们需要创建一个容器来保存菜单项。

然后添加导航项,在本例中为“instructions”面板。

项目的折叠由Bootstrap自己的CSS和JavaScript处理,因此我们需要做的就是添加函数以在单击项目时更改中间列的内容(l1s1和l1s2)。

这些由外部脚本处理,但为了完整起见,在图12中显示。

返回我们的HTML文件中的菜单。 将换行符添加为简单分隔符,然后将其余项添加为一系列嵌套列表。 初始构造函数如图13所示。

从这一点开始,添加剩余的菜单项非常简单。 为简洁起见,仅显示添加第一个项目集,但以完全相同的方式添加其余项目集。

如图所示,需要在列表标记对之间添加所有项目。

下一个菜单项将通过在行75处插入新行添加,然后对项目T1-L2执行完全相同的过程,依此类推。

一旦添加了从T1-L1到T1-L6的所有项目(章节),我们将添加新的换行符,然后按照相同的步骤开始新的列表(作为类别T2),直到菜单完成。

导航菜单检修的最后一步是添加一个脚本,以确保我们的菜单项最初显示为未展开。

如果您的网站没有获得您想要的结果,一个可能的原因可能是您的导航系统比应有的更复杂。

降低菜单复杂性是提高网站可用性的重要一步。 通过让用户更容易找到复杂系统的方式,您将获得更多回访访问者和更多推荐人的回报。

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。