你必须要知道的：网站标题导航设计方法
时间：2023-06-05 11:30:02 | 来源：网站运营
时间：2023-06-05 11:30:02 来源：网站运营
你必须要知道的：网站标题导航设计方法：
关于网站标题的定义，结构和组成的一组见解作为网站的战略部分：各种示例和方法。
每个人都知道：没有第二次机会给人留下第一印象。在数字产品领域，这种永恒的真理在高度竞争和令人难以置信的多样性方面起作用。毫无疑问，网页或移动屏幕的某些区域在这方面特别重要和有效。今天我们将更深入地讨论其中一个：网站的标题。
在专门讨论网页设计术语的UI / UX词汇表问题中，我们已经提供了什么是标题的简要概述。今天让我们看一下这个主题，并讨论标题的功能和设计建议。此外，我们将展示一系列网页设计概念，将不同的方法应用于标题设计。
什么是标题？
在网页布局中，标题是网页的上部（顶部）部分。它绝对是页面的战略部分，是人们在介绍网站的第一秒内滚动页面之前看到的区域。以某种方式作为邀请的标志，标题应该提供有关数字产品的核心信息，以便用户可以在几秒钟内扫描它。从设计的角度来看，标题也是创造性设计解决方案的广阔领域，应该是吸引人的，简洁和有用的。标题通常被称为“网站菜单”，并被定位为网站布局中的导航的关键元素。
所呈现的概念显示了在线书店销售漫画的主页。顶部水平区域aka标题呈现徽标字母，显示网站名称和核心导航：链接到项目目录，新鲜和特别优惠，博客，动作人物，购物车典型电子商务网站的图标和搜索的图标。
标题包括什么？
标题可以包含各种有意义的布局元素，例如：
- 品牌标识的基本要素：标识，品牌字母，口号或公司声明，公司吉祥物，公司或其领导者的照片，公司颜色等。
- 指向与产品交互的链接，例如试用版，从AppStore等下载。
这并不意味着所有提到的元素都应该包含在一个网页标题中：在这种情况下，标题部分会因信息而过载的风险很高。吸引用户注意的物体越多，专注于重要物体就越困难。在设计任务的基础上，设计师（有时与营销专家一起）决定具有战略意义的重要选项，并从列表中选择或添加其他选项。
让我们看看几个例子，看看哪些提到的元素设计者放在特定网站的标题中。
这是室内设计工作室的网站。页面的上半部分显示了在滚动过程中始终保持在视觉感知区域的粘性标题。它分为两个区块：左侧部分具有品牌标识，右侧部分呈现交互式区域，其中包含“Product”，“Studio”和“Press”等多个信息块的链接以及标记为“Shop”的号召性用语按钮出形状。标题的中心部分使用负空间来视觉分离这两个块。
这是另一个网页示例，其标题设计略有不同。这次是围绕中心建立的，其中包含徽标和品牌名称。左侧和右侧在其周围平衡，有两个链接，每个链接允许用户快速扫描并移动到他们感兴趣的信息块。
为什么标题很重要？
标题是许多网站的重要元素有几个问题。
首先要考虑的是眼睛扫描模型，它显示用户在第一秒内如何与网页进行交互。用户研究的这一重要领域得到了尼尔森诺曼集团的大力支持，为设计师和可用性专家提供了对用户行为和互动的更好理解。
简而言之，当人们访问该网站时，特别是第一次，他们不会仔细和详细地浏览页面上的所有内容：他们会扫描它以找到一个引起他们注意的钩子，并说服他们花一些时间在网站上。收集用户眼动追踪数据的不同实验表明，有几种典型的模型，访客通常会扫描网站。在以下常见模型中，您将找到Z-Pattern，Zig-Zag模式和F-Pattern。我们来看看它们的方案是什么。
Z-Pattern对于具有统一信息呈现和弱视觉层次的网页而言是非常典型的。从该方案可以看出，它标出了四个活动区域 - 其中两个穿过典型的标题区域。
另一种方案具有Zig-zag版本，对于具有可视划分内容块的页面而言是典型的。同样，读者的眼睛从左上角开始从左到右移动，并在整个页面上移动到右上角，扫描这个初始交互区域中的信息。
另一个模型是Nielsen Norman Group在探索中呈现的F模式，并显示用户经常展示以下互动流程：
- 用户首先读取水平移动，通常跨越内容区域的上部。这个初始元素构成了F的顶部栏。
- 接下来，用户向下移动一点，然后在第二个水平移动中读取，该移动通常覆盖比先前移动更短的区域。这个额外的元素形成了F的下栏。
- 最后，用户以垂直移动扫描内容的左侧。有时这是一个相当缓慢和系统的扫描，在眼动追踪热图上显示为实心条纹。其他时候用户移动得更快，创建了一个spottier热图。最后一个元素构成了F的词干。
所有提到的模型都表明，无论特定用户遵循哪一个，扫描过程都将从网页的顶部水平区域开始。使用它来显示核心信息和品牌是一种支持双方的策略：读者快速扫描关键数据，而网站有机会保留它们，如果它正确呈现。这就是为什么标题设计是UI / UX设计师以及内容和推广专家必不可少的问题的基本原因。
在其中一篇致力于标题设计实践的文章中，其作者Bogdan Sandu提到了一个重要的观点，应该牢记：“人们只需几秒钟即可判断一个网站的质量，而互联网上缺少第二印象。总而言之，一个网站必须引人注目，它只不过是一个大失败“。
另一件需要考虑的事情是，标题可以帮助您快速向用户呈现基本数据，并通过清晰的导航提供积极的用户体验。但是，这并不意味着每个网站都需要标题。有许多创造性的解决方案提供在布局的其他区域中应用典型标题功能的设计。每个网站设计案例都需要对产品或服务的目标受众进行分析和研究。
设计实践
可读性和视觉层次
标题和背景颜色的字体选择应该进行严格的研究和测试，因为标题中的可读性方面起着至关重要的作用。用户必须能够尽可能快地扫描和感知这些基本信息，而无需任何额外的努力。否则，您将面临提供非用户友好界面的风险。
上面提到的新闻网站的设计概念包括标题，包括作为组成的中心元素的网站标题，到基本类别的出版物的两个活动链接，链接到实时模式和标有放大镜图标的搜索字段。
这是另一个网站，其布局是在破碎的网格上构建的，因此标题对应于此方法。标题的左侧部分视觉上较长，由四个元素组成：徽标和三个数据块的链接，而右侧部分较短，仅包含两个布局元素：搜索和号召性用语按钮市场形状和颜色为高对比度。
还有一件事要记住，在向下滚动页面的过程中，标题有不同的转换方式。有些网站使用固定标题，在与网站的任何互动点上始终保持可见和活跃状态; 其他人在滚动过程中隐藏标题。还有一些网站没有完全隐藏标题，但在滚动过程中缩小了标题，这意味着它们隐藏了辅助信息，只留下了布局的核心元素在所有交互过程中都是活跃的和可用的。
汉堡菜单
另一种在标题功能方面非常流行的设计解决方案是隐藏汉堡包按钮后面的数据类别的基本链接。它被称为由水平线组成的形状看起来像典型的面包 - 肉 - 面包汉堡包。
此按钮通常放在标题中，现在它是交互的典型元素。大多数定期访问和使用网站的用户都知道此按钮隐藏了核心类别的数据，因此这个技巧不需要额外的解释和提示。汉堡菜单释放空间，使界面更简约，充满空气，并为其他重要的布局元素保存空间。这种设计技术还为响应和自适应设计隐藏导航元素并使界面在不同设备上看起来谐波提供了额外的好处。
所呈现的网页设计概念显示了汉堡菜单的版本。由于网站的菜单包含许多位置，设计师使用这种技术将汉堡按钮放在初始交互区域 - 左上角。它允许创建支持网站的一般简约风格的标题。标题的水平区域分为两个区域：左侧区域显示品牌标识，网站简短介绍为红色，并与页面标题和号召性用语元素的视觉效果保持视觉一致性; 右侧区域包含社交网络和搜索图标的图标。标题的中央部分留空，这为其设计增加了一些空气和平衡，并作为分隔两个不同功能块的负空间。
此设计概念为网站提供了页面的原始结构，在页面左侧留下了宽阔的边缘，左上角的品牌名称和徽标是第一个扫描点。另一部分呈现交互式区域，并有自己的标题组成：左边的汉堡按钮和向右过渡的四个核心链接。正如这个交互示例所示，汉堡包菜单允许设计者组织许多主题信息块并提供有效的视觉层次结构。
虽然汉堡包菜单仍属于现代网络和应用程序设计中备受争议的问题，但它们仍被广泛用作标题元素。反对汉堡包菜单的论据是基于这样一个事实，即这个设计元素可能会让那些不经常使用网站的人感到困惑，并且可能会被那些具有高度抽象性的标志误导。因此，应在用户研究和定义目标受众的能力和需求后做出应用汉堡按钮的决定。
固定（粘滞）标题
粘性标题提供了另一种能够有效应用增强可用性的趋势。实际上，它可以在任何交互点为用户提供可用的导航区域，这对于具有长滚动的内容繁重的页面而言是有帮助的。
所呈现的网站设计概念具有固定的标题，当页面滚动时不会隐藏。然而，它遵循极简主义原则，其中品牌名称字母作为构图的中心，放大镜图标标记搜索功能和汉堡按钮隐藏链接到导航区域。
这是另一个设计概念，采用创意方法设计标题。主页的初始视图包括非常简约的标题：它仅显示社交图标和搜索。然而，向下滚动用户会得到带有相当传统导航项的粘性标题：左上角部分看到的第一个元素是隐藏扩展菜单的汉堡按钮，然后是品牌标志，然后是指向专题信息块的链接。在与页面交互的所有过程中，组合完成搜索放置在页面的右上部分并支持一致性的感觉。
双重菜单
标题中的双重菜单可以呈现两层导航。我们在面包店网站最近的一个案例研究中展示了这样一个技巧的例子。
如您所见，该网站还使用了一个由两级导航组成的粘性标题。上方菜单显示隐藏扩展菜单的社交网络，徽标，搜索，购物车和汉堡按钮的链接。第二行导航提供了与核心交互区域的即时连接：产品目录，销售点的位置，新闻和特别优惠，有关服务和联系部分的信息。视觉和印刷层次结构使所有元素清晰，易于扫描，为积极的用户体验提供坚实的基础。
底线很简单：标题是任何网站的战略重要互动区域。每个特定案例都需要自己的方法，这些方法将为特定目标受众提供信息和可用。用户研究可以为设计解决方案提供良好的基础，这些解决方案可以遵循相当传统的标题组织形式或者需要全新的视角。
相关文章
2019年设计趋势指南(全集）移动UI设计：15种基本类型界面移动应用程序设计：移动应用程序类型的大指南网页设计：Web内容的5种基本图像类型
在线咨询
