移动ui设计方法_UI设计：添加移动导航图标的简单方法

如今，越来越多的人通过移动设备浏览Internet，因此需要调整网站上的某些内容以适应较小的屏幕尺寸。 这也包括Web导航 。

如果可以的话，下面的图标是代表“移动菜单/导航”的最受欢迎的图标。

在本文中，我们将介绍添加图标的几种方法以及最简单的方法。

使用位图图像

每个人都知道如何通过位图图像进行操作。 我们可以简单地在Photoshop中创建此图标，将其保存为图像（可能为PNG或JPG格式），然后通过CSS中的background-image进行分配。

但是，位图图像缺乏可伸缩性。 特别是，当我们必须放大图像时，它可能会变得模糊或像素化。 如今，随着市场上高分辨率设备的推出，图像可伸缩性是您不可忽视的重要因素。

引导方式

这就是前端开发框架Bootstrap以较小的屏幕尺寸显示“导航图标”的方式。 它使用三个<span>元素：

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

尽管可以通过样式来实现所需的图标，但是仅显示此小图标具有额外的标记被认为是多余的（尤其是如果我们遵循“最佳实践” ）。

因此，让我们找到一种需要较少标记的更好方法。

使用字体图标

另一种方法是使用字体图标。 几种字体在其集合中提供此图标，例如Font Awesome和EnTypo 。 要显示图标，我们只需添加相应的字符，如本博文中所示 。

用字体显示图标的一些优点是，该图标易于通过CSS进行更改，并且与分辨率无关。 另一方面，它也有一些缺点：根据保存的字符数，文件可能会很大，并且我们至少需要四种不同的文件格式来满足浏览器的兼容性，这需要大量工作才能显示一个图标。

“天堂的Trigram”

令人惊讶的是，有一个名为Trigram for HeavenHTML字符。 这（可能）是我找到的最佳方法。 只需将这个HTML字符（ ☰ ）放进去，您就应该在网页上得到这个图标。

然后，我们可以使用CSS对其进行更改，例如更改颜色或调整其大小而不会损失清晰度，并且还可以链接到外部源。 此外，您可以深入该库以查找更多HTML特殊字符。

翻译自: https://www.hongkiat.com/blog/mobile-navigation-icon/