UI组件——顶部导航介绍

第一印象在任何产品设计中都至关重要，而顶部导航通常是新用户看到的第一件事。顶部导航包含用户的重要信息和功能，包括网站的品牌信息和通常的主要导航链接。

不要低估顶部导航设计的重要性。顶部导航需要在页面上突出并立即被识别，同时还要与设计的其余部分合作。

LOGO位置

LOGO位置最常见的是在标题中左对齐。这实现了 3 个目标：

• 它强化了你的品牌。

• 它提醒用户他们在哪里以及他们正在查看什么。

• 它允许通过单击快速导航到主页。

在某些情况下，LOGO 可能居中对齐，特别是在简单的营销或投资组合网站上，或者当LOGO更复杂时。

在页面之间保持LOGO位置一致。

LOGO尺寸

您可能需要调整LOGO大小以适合顶部导航。它应该足够大以便可见（或在标识或文字标记的情况下清晰可见），但要保持足够小以防止页面看起来混乱。在 LOGO 周围添加额外的填充也可以在这方面有所帮助。

导航颜色

由于顶部导航对用户体验非常重要，因此导航颜色需要突出，同时还要保持清晰。使用品牌的原色可能很诱人，但在大多数情况下，这会损害可读性，甚至可能导致可访问性问题。与其使用颜色来突出顶部导航，不如考虑使用不同的字体粗细。

要强调导航项，请使用字体粗细，而不是颜色。

操作项颜色

顶部导航中的操作项（例如通知图标）需要突出。也就是说，保持一致应该是您的首要任务。

行动项目的颜色应该保持一致——不要使用一堆不同的颜色来区分它们。相反，请确保相同类型的操作具有一致的外观并且清晰可见。

顶部导航间距

由于顶部导航是产品的核心导航，因此它们需要非常易于扫描。用户不必费力去辨别导航中包含的内容。这就是顶部导航间距如此重要的原因。保持标签简洁，并确保LOGO、按钮和任何其他操作周围有足够的空间。

顶部导航高度

顶部高度对其可用性很重要。它需要在不遮挡页面其余部分的情况下适应其内容的大小，同时也不要留下太多空白区域。

一般来说，顶部导航的高度应该在 60px 和 80px 之间，这取决于你想给导航中元素多少喘息的空间。

顶部导航宽度

至少，您的顶部导航宽度应该跨越页面网格的宽度。您的顶部导航也可以跨越页面的整个宽度，只要确保在边缘周围使用足够的填充物，以防止元素真正接触到页面的边缘。

本文内容为转载