网站标题设计的最佳实践

关于网站标题的定义、结构和构成作为网站战略部分的见解集:各种示例和方法。
由玛丽娜·亚兰斯卡提出。

2019年11月23日
大家都知道:第一印象比第二次更重要。在数字产品领域,这个永恒的真理在激烈的竞争和多样性方面起作用。毫无疑问,网页或移动屏幕的某些区域在这方面尤为重要和有效。今天,我们将讨论其中一个更深层次的焦点:网站的标头。
在专门介绍 Web 设计术语的 UI/UX 术语表中,我们已经提供了什么是标头的简短概述。今天,让我们仔细看看这个主题,并讨论一个标头的功能及其设计的建议。此外,我们将展示一组将不同方法应用于标头设计的 Web 设计概念。

什么是标头?

在网页布局中,标题是网页的上部(顶部)。这绝对是页面的战略部分,在网站介绍的第一秒,人们在滚动页面之前看到的区域。作为邀请的标志,标头应提供有关数字产品的核心信息,以便用户可以在拆分的几秒钟内扫描它。在设计视角上,标题也是创意设计解决方案的广阔领域,其设计解决方案应具有吸引人、简洁和有用性。标题通常称为 [站点菜单],并定位为网站布局中导航的关键元素。
提出的概念显示了在线书店销售漫画的主页。顶部水平区域 aka 标题显示徽标字母,显示网站的名称和核心导航周围:链接到项目目录, 新鲜和特别优惠, 博客, 行动数字, 购物车典型的电子商务网站的图标和搜索的图标。

标头可以包括哪些内容?

标头可以包含各种有意义的布局元素,例如:
·品牌标识的基本要素:标志、品牌名称、口号或公司声明、企业吉祥物、展示公司或其领   导者的照片、企业颜色等。
·复制块设置所展示产品或服务的主题
·指向网站内容基本类别的链接
·链接到最重要的社交网络
·基本联系信息(电话号码、电子邮件等)
·多语言界面时的语言切换器
·搜索字段
·订阅字段
·链接到与产品交互,如试用版、从 AppStore 下载等。
这并不意味着所有提及的元素都应包含在一个网页标题中:在这种情况下,标头部分将因 信息超载而存在高风险。吸引用户注意力的对象越多,就越难专注于重要的对象。根据设计任务,设计师有时与营销专家一起,决定具有战略重要性的选项,并从列表中挑选它们或添加其他选项。
让我们来看看几个例子,看看哪些提到的元素设计器放在了特定网站的标头中。
这是一个室内设计工作室的网站。页面的上半部分显示粘性标头,在滚动过程中始终停留在视觉感知区域。它分为两个块:左侧以品牌徽标为特色,右侧显示互动区域,并链接到多个信息块,如”产品”、”工作室”和”商店”标有形状。标头的中心部分使用负空间来直观地分离这两个块。
下面是网页的另一个示例,该网页对标头设计的方法略有不同。这一次,作品围绕中心,以标志和品牌名称为特色。左侧和右侧围绕两个链接进行平衡,每个链接允许用户快速扫描并移动到他们感兴趣的信息块。

为什么标题很重要?

有几个问题为什么标头是许多网站的重要元素。

首先要考虑的是眼睛扫描模型,它显示用户如何在第一秒内与网页交互。尼尔森·诺曼集团大力支持这一重要的用户研究领域,为设计师和可用性专家提供更好地了解用户行为和交互的能力。
简而言之,当人们访问该网站时,尤其是第一次访问网站时,他们并没有仔细而详细地浏览页面上的所有内容:他们扫描它,以找到一个典型例子,吸引他们的注意,并说服他们在网站上花一些时间。收集用户眼动追踪数据的不同实验表明,访问者通常浏览网站时有几个典型的模型。在以下常见模型中,您将找到 Z 模式、锯齿形模式和 F 型模式。让我们来检查一下他们有什么方案。
Z模式对于信息统一表示和视觉层次结构较弱的网页来说非常典型。从方案中可以看出,它标记出四个活动区域,其中两个区域穿过典型的标头区域。
另一种方案具有 Zig-zag 版本,适用于具有视觉划分内容块的页面的典型版本。同样,读者的眼睛从左上角开始,从所有页面移动到右上角,扫描此初始交互区域中的信息
尼尔森·诺曼集团在探索中展示的F型模式,表明用户经常展示以下互动流程:
·用户首先在水平运动中阅读,通常跨越内容区域的上部。此初始元素形成 F 的顶部栏。
·接下来,用户向下移动页面,然后在第二个水平移动中读取,该水平移动通常覆盖比前一   个移动短的区域。此附加元素构成 F 的下注。
·最后,用户以垂直移动扫描内容的左侧。有时,这是一个相当缓慢和系统的扫描,在眼球   跟踪热图上显示为一个实心条纹。其他时间,用户移动速度更快,创建聚光灯。最后一个   元素形成 F 的词干。
所有上述模型都显示,无论哪个用户关注,扫描过程都将从网页的顶部水平区域开始。使用它来显示核心信息和品牌是一个支持双方的战略:读者快速扫描关键数据,而网站有机会保留它们,如果它显示正确。这就是标题设计是 UI/UX 设计人员以及内容和促销专家的重要问题的根本原因。
在一篇专门介绍标题设计实践的文章中,作者博格丹·桑杜提到了一个应该牢记的重要观点:”人们在几秒钟内判断网站的质量,而第二印象在互联网上是不存在的。总之,一个网站必须引人注目,否则就是一个大的失败。
另一个需要考虑的事项是,标头可以成为快速向用户呈现基本数据并通过清晰导航提供积极用户体验的一大帮助。但是,这并不意味着每个网站都需要一个标头。有许多创造性的解决方案提供在布局的其他区域应用典型标题功能的设计。网站设计的每个案例都需要对产品或服务的目标受众进行分析和研究。

设计实践

可读性和可视层次结构
标题和背景颜色的字体选择应该受到严格的研究和测试,因为在标题的可读性方面起着至关重要的作用。用户必须能够尽可能快地扫描和感知这些基本信息,而无需做任何额外的努力。否则,您可能会提供非用户友好的界面。
上面介绍的新闻网站的设计概念包括标题,包括网站的标题作为合成的中心元素,两个活动链接的基本类别的出版物,链接到实时模式和搜索字段标记为放大镜图标。
下面是另一个网站,其布局构建在断开的网格上,因此标头对应此方法。标头的左侧在视觉上较长,由四个元素组成:徽标和指向三个数据块的链接,而右侧部分较短,仅包含两个布局元素:搜索和调用操作按钮,其形状和颜色为高对比度。
还有一点需要记住的是,在向下滚动页面的过程中,标头有不同的转换方式。有些网站使用固定标头,在与网站交互的任何时刻,它始终保持可见和活跃;其他人在滚动过程中隐藏标头。还有一些网站没有完全隐藏标头,但在滚动过程中缩小其大小,这意味着它们隐藏次要信息,并且在所有交互过程中仅保留布局的核心元素处于活动状态和可用。

汉堡菜单

另一个在标题功能方面相当流行的设计解决方案,是隐藏汉堡按钮后面数据类别的基本链接。它的外形被称为横纹,看起来就像典型的面包-肉-面包汉堡。

此按钮通常放置在标头中,现在它是交互的典型元素。大多数定期访问和使用网站的用户都知道,此按钮隐藏了核心数据类别,因此此技巧不需要其他说明和提示。汉堡菜单释放空间,使界面更加简约和充满空气,以及保存其他重要布局元素的地方。这种设计技术还为响应式和自适应设计提供了额外的好处,这些设计隐藏导航元件,并使接口在不同设备上看起来和谐。
提出的网页设计概念显示了汉堡菜单的版本。由于网站的菜单包含许多位置,设计人员使用这种技术将汉堡按钮放置在初始交互区域 – 左上角。它允许创建支持网站的一般简约风格的标头。标头的水平区域分为两个区域:左侧区域显示品牌和以红色颜色的网站的简短介绍,并保持视觉一致性与页面标题和行动号召元素的视觉性能;右侧区域具有社交网络图标和搜索图标。标题的中心部分留空,这给设计增加了一些空气和平衡,并作为分隔两个不同功能块的负空间工作。
这种设计理念为网站呈现了页面的原始结构,在页面左侧留下宽光边距,左上角的牌子和徽标是扫描的第一点。另一部分介绍交互式区域,并有自己的标题组合:汉堡按钮向左和四个核心链接的过渡到右侧。正如这个交互示例所示,汉堡菜单允许设计人员组织许多主题信息块并提供有效的视觉层次结构。
虽然汉堡包菜单仍然属于现代网络和应用设计中备受争议的问题,但它们仍然被广泛用作头元素。反对汉堡菜单的论点是基于这样一个事实,即这个设计元素可能会混淆那些不经常使用网站的人,并且可能会被具有高度抽象的符号误导。.因此,应用汉堡按钮的决定应在用户研究后,对目标受众的能力和需求进行定义。

固定(粘性)标头

粘性标头呈现另一个能够提高可用性的趋势得到有效应用。实际上,它使用户能够在任意交互点为用户提供可用的导航区域,这在内容繁重的页面与长滚动方面非常有用。
网站提出的设计概念有一个固定的页眉,在滚动页面时不会隐藏。然而,它遵循极简主义原则,以品牌名称为构图的中心,放大镜图标标记搜索功能和汉堡按钮隐藏链接到导航区域。
下面是一个设计概念,以创造性的方法对标题设计。主页的初始视图包括极简约的标头:它只显示社交图标和搜索。但是,向下滚动的用户会使用一组相当传统的导航项来获得粘性标头:左上角看到的第一个元素是隐藏扩展菜单的汉堡按钮,然后是品牌符号,然后是指向主题信息块的链接,在与页面交互的所有过程中,将搜索置于页面的右上角,并支持一致性的感觉。

双菜单

标题中的双菜单可以显示两个导航层。我们在一家面包店网站最近的案例研究中展示了这种伎俩的例子。
正如您所看到的,该网站还使用由两个级别的导航组成的粘性标头。上部菜单显示指向社交网络、徽标、搜索、购物车和汉堡按钮的链接,这些按钮隐藏了扩展菜单。第二行导航提供与核心交互区域的即时连接:产品目录、销售点的位置、新闻和特别优惠、有关服务和联系人部分的信息。可视化和排版层次结构使所有元素清晰且易于扫描,为积极的用户体验提供了坚实的基础。
脚本很简单:标题是任何网站具有战略意义的互动区域。每个具体案例都需要自己的方法,该方法内容丰富,可供特定目标受众使用。用户研究可以为设计解决方案提供良好的基础,这些设计解决方案可以遵循相当传统的头部导航形式,或者需要全新的视角。

发表评论

电子邮件地址不会被公开。 必填项已用*标注