每个人都知道没有第二次机会给人留下印象。在数字产品领域,这一永恒的真理在激烈的竞争和令人难以置信的多样性中发挥了作用。毫无疑问,网页或移动屏幕的某些区域在这方面特别重要和有效。今天我们将更深入地讨论其中一个:网站的标题。
我们简要概述了UI/UX词汇表问题中的标题,重点是web设计术语。今天,让我们来看看这个主题,并讨论标题的功能和设计建议。此外,我们将展示一系列的网页设计概念,并将不同的方法应用于标题设计。
在页面布局中,标题是页面的上部(顶部)。这是页面的战略部分,人们在介绍网站的秒钟滚动页面之前看到的区域。通过标记邀请的方式,标题应该提供有关数字产品的核心信息,以便用户可以在几秒钟内扫描它。从设计的角度看,标题也是一个广阔的创意设计解决方案领域,应该是有吸引力的、简洁的和有用的。标题通常被称为“站点菜单”,在站点布局中被定位为导航的关键元素。
这个概念展示了在线书店销售漫画的主页。顶部水平区域aka title显示徽标字母,显示站点名称和核心导航:指向项目目录的链接、新鲜和特价商品、博客、动作图、购物车典型的电子商务站点图标和搜索图标。
标题可以包含各种有意义的布局元素,例如:
这并不意味着所有提到的元素都应该包含在页面标题中:在这种情况下,标题部分被信息重载的风险很高。对象越吸引用户的注意力,就越难集中在重要的对象上。根据设计任务,设计师(有时与营销一起)决定重要的战略选择,并从列表中选择或添加其他选项。
让我们看几个例子,看看在一个特定网站的标题中放置了哪些元素设计器。
这是室内设计工作室的网站。页面的上半部分显示在滚动过程中始终保留在视觉感知区域的粘性标题。分为两个区块:左侧为品牌标识,右侧为互动区,包含“产品”、“工作室”、“按下”等多个信息区块的链接,以及标有“商店”的呼叫短语按钮的形状。标题的中心部分使用一个负空间来视觉上分隔这两个块。
这是另一个标题设计稍有不同的网页示例。这次是围绕中心建造的,包括标志和品牌名称。左右两边是平衡的,有两个链接,每个链接允许用户快速扫描并移动到他们感兴趣的信息块。
首先要考虑的是眼睛扫描模型,它显示用户如何在秒与网页交互。这一重要的用户研究领域得到了尼尔森诺曼集团的大力支持,尼尔森诺曼集团为设计师和可用性提供了对用户行为和交互的更好理解。
简言之,当人们访问网站时,尤其是次访问时,他们不会仔细而详细地浏览网页上的所有内容:他们会扫描网页,找到吸引他们注意力的钩子,并说服他们在网站上花些时间。收集眼球运动跟踪数据的不同实验表明,有几种典型的模型,访问者通常会浏览网站。在下面的常见模型中,您将找到z模式、zig zag模式和f模式。让我们看看他们的计划是什么。
Z模式对于信息呈现统一、视觉层次弱的网页来说是非常典型的。从该方案可以看出,它确定了四个活动区——其中两个穿过典型的航向区。
另一种方案是zig-zag版本,这对于具有内容块可视分区的页面来说是典型的。类似地,读者的眼睛从左上角向右移动,然后移动到整个页面的右上角,扫描初始交互区域中的信息。