“细节不是细节。他们做出了设计，”查尔斯·艾姆斯曾经说过，这句话从未停止。在设计网页的时候，一定要考虑它应该由什么组成来解决它的任务集，既要有用又要美观。今天的文章致力于创建一个有效的网页的重要细节。让我们简单回顾一下哪些元素对一个典型的网页有影响，以及每个元素如何影响用户的总体体验。包含大量网页设计实例。
标题
页眉是网页的上半部分。作为人们在网站上滚动页面的第一秒钟之前看到的区域，标题是一个具有战略重要性的元素。该标题预计将提供网站的核心导航，以便用户可以浏览它，并在几秒钟内跳转到可以帮助他们的主页。标题也称为站点菜单，是网站布局中的主要导航元素。
标题可能包含一系列有意义的布局元素，例如:
基本元素品牌logo，通常是一个logo，是一个呼叫呼叫的语言按钮，一个链接到网站内容的基本类别，一个社交网络链接，基本的联系信息，一个多语言界面中的语言切换器，一个搜索栏，一个订阅字段或一个按钮，一个与产品交互的链接，如试用版，从AppStore下载等。
这并不意味着所有提到的元素都应该包含在一个网页标题中:在这种情况下，标题部分将会超载信息。吸引用户注意力的对象越多，就越难集中在重要的对象上。根据设计任务，设计师有时会与营销专家一起决定战略选项，然后从列表中选择或添加其他选项。
页眉成为有助于网页可用性的重要元素的原因是它被放置在网页最容易被扫描的区域。无论用户在网站上停留在什么扫描模式，它都从页面顶部开始，从左到右扫描使用相同读写模式的语言。这意味着放置在标题中的内容不会被遗漏，尤其是放置在其左右角的元素。这也是为什么你经常会在其中一个按钮里找到CTA主按钮的原因。更重要的是，习惯的力量和对外理念的一致性，在这里也要考虑用户体验。多年来，访问者已经习惯了在标题中寻找核心导航，所以主要问题是决定在里面放什么，而不是用不用标题。
一些流行的网页标题设计实践包括:
汉堡菜单:隐藏指向不同页面或部分的链接集。汉堡按钮之所以这么叫，是因为它由看起来像典型的面包-肉-面包汉堡的水平线组成。粘性标题:当用户向下滚动页面时，标题不会被隐藏，而是粘在页面顶部。这样核心导航区在任何交互点都是可用的，对于内容丰富的长滚动页面很有帮助。双层导航:标题中的一组双导航站点，用于分隔两个不同的导航路线，这两个导航路线对Web可用性都很重要。
网站标题更广泛使用的模式是让logo可点击，点击后打开或刷新主页。
呼叫语言按钮
呼叫按钮是用户界面的一个元素，旨在鼓励用户采取一些行动。此操作显示特定页面或屏幕的变换。换句话说，它把被动用户变成了主动用户。因此，从技术上讲，它可以是调用语言的文本支持的任何类型的按钮。这种类型的按钮不同于页面或屏幕上的所有其他按钮，因为它具有吸引力:它必须吸引注意力并刺激用户执行所需的操作。
有效的呼叫语言按钮容易被注意到；设计者故意创建它们，以便网站访问者可以看到它们，并在几秒钟内做出反应。这就是为什么它们通常是粗体按钮，包含带有特定呼叫词的缩微副本。它解释了这个页面的主要操作，并鼓励用户这样做。如果CTA按钮没有明确定义，没有引起注意，访问者可能会快速浏览内容，并保持原样。
ShipDaddy网站的“关于”页面是一个很好的例子，说明了一般网页布局中呼叫术语的引人注目的元素。
英雄部分
英雄部分是屏幕的第一部分，通常标志着它的结束。作为全球网站导航的另一个常见区域，页脚为用户可能有兴趣找到的有用链接和数据提供了额外的字段。
页脚可以包括:
品牌徽标，通常是公司或产品的名称和徽标，是指向用户支持部分的链接，如FAQ页面、about页面、隐私政策、条款和条件、支持团队等。归功于网站创建者的联系方式和链接到公司或产品帐户推荐信的信息以及社交网络中的徽章认证标志订阅字段或按钮。
像页眉一样，页脚也不是用户在网上遇到的所有网站都能找到的元素。例如，当应用无限滚动时，传统的页脚不是有效的导航区域。但在无限滚动的情况下，也可以应用固定页脚的思想，支持导航而不损失这个区域。对于大多数用户来说，页脚是搜索联系信息、信用和站点地图的常见位置，因此使用这种模式可能会有所帮助。使用页脚的决定总是基于支持一般可用性和导航的想法。无论如何，如果页脚被应用，它应该与网站布局和一般风格概念的所有其他设计方案和谐地结合在一起。
滑块
Slider是一个交互式元素，它使用幻灯片放映或转盘技术来显示不同的产品、优惠等。展示产品或服务的电子商务和商业网站。
Slider呈现的是有争议的交互元素，往往是热议的对象。在这些好处中，我们可以提到以下几点:
节省用户参与页面间吸引人的视觉挂钩空。然而，虽然优点听起来确实不错，但也有明显的缺点:由于滑块功能，页面速度下降，影响SEO将几个相同的选项显示在一起，这可能会损害可用性，分散注意力，因为人们不会注意优先级，这使得在网站的移动适配中更难集中精力处理滑块可能出现的问题。和横幅一样，滑块也可以视为广告，可以跳过。
因此，当决定将滑块集成到Web布局中时，设计师必须考虑每个特定情况的所有优点和缺点。
搜索
内部搜索是一种使访问者能够浏览网站中的内容并根据搜索查询显示内容的功能。如果调整正确，会显示相关内容，这种方式提供了用户需要的快捷方式。因此，内部搜索节省了用户的时间和精力，放大了数字产品的可用性和吸引力，有助于留住用户，提高转化率。交互式元素负责内部搜索。用户界面中有一个搜索栏，也称为搜索框或搜索栏:它使用户能够输入搜索查询，以便找到所需的内容片段。
如果你的网站超过50页，那么是时候考虑应用内部搜索了。设计良好且易于查找的搜索字段使用户无需浏览大量页面和菜单就能跳到所需的位置。这种方式是现在常见的用户行为模式，它尊重用户的时间和精力，所以对用户友好的界面要求很高。
另一个要提到的要点是，在用户界面中，设计师不应该优先考虑搜索而不是导航。尽管许多用户确实试图通过搜索接近他们的目标，但其他用户可能在搜索交互方面存在问题。例如，他们对语言的了解不足以形成正确的查询，输入内容不方便，或者他们只是讨厌考虑文本查询。他们更喜欢遵循现有的导航和提示，而不是通过搜索与系统通信的认知负荷。
如果你有一个单页的网站，如果你的应用或者网站比较简洁，内容不多，就不需要内部搜索。例如，对于突出核心信息和服务的公司或投资组合网站，经过深思熟虑的导航就足够了。
菜单
它是菜单用户界面中的核心导航元素之一。它是一个图形控件，显示与界面交互的选项。基本上，它可以是一个命令列表——在这种情况下，选项将与标记可能操作的动词一起呈现，如“保存”、“删除”、“购买”、“发送”等。菜单也可以在给定的界面中呈现内容组织的类别，这可能是用名词标记它们的最佳时机。
在菜单界面中，可以有不同的位置，不同的外观，不同的交互方式。任何解决方案。设计师设计菜单的功能、外观和在整体布局中的位置，应该基于深思熟虑的用户研究。他们不仅要分析目标受众的潜在愿望和期望，还要分析他们的技术素养和可能使用数字产品的环境。一个设计良好的菜单可以显著加快目标的实现和满足需求，并为积极的用户体验打下坚实的基础。
菜单可以水平或垂直组织。不同网站上常见的类型有:
经典菜单(Classic menu):最常见、最受认可的菜单类型，它将核心导航组织成网站标题中的水平线，如上所述。
侧边栏菜单(Sidebar menu):非常经典的类型，显示垂直的选项列表，粘贴在网页的左侧或右侧。
下拉菜单:丰富网站更复杂的菜单类型；在这里，当点击或悬停时，附加选项列表将在主选项下打开。另一个类似的选项是下拉菜单。单子一开，不是下来，本质是一样的。
大型Web菜单:这是一个复杂且可扩展的菜单，其中多项选择的大型列表以二维下拉布局呈现；这种方法对于有大量选择的情况是有效的。
汉堡菜单:点击汉堡按钮，菜单会展开。这个选项可以节省空时间，通常适用于手机版网站。
哎呀
面包屑是用来支持用户浏览网站的导航元素:他们知道自己在网站上的位置，更容易习惯网站结构。因此，面包屑提供了更好的寻路工具，然而，它们并不能取代主导航菜单；它们提供二次导航，并在网站有很多页面的情况下提高网站的可用性。
面包屑的一些好处是:
增加可搜索性:面包屑为用户提供了另一个内容接触点，有助于理解网站的结构。需要更少的点击:使用面包屑，网站访问者可以毫不费力地从层次结构的一个级别跳到前面的任何一个步骤，而不需要一直返回来有效地利用屏幕空。精心制作，面包屑采用窄横线，不需要太多的简单文本元素不会有误解空:用户几乎不会误解面包屑:他们的行为模式已经固化了很多年，人们很少会把这个元素误认为其他任何东西的跳出率更低:面包屑对于初次访问者或没有日常处理复杂网站经验的人来说是一个很好的支持，所以他们越自信，跳出页面的机会就越少。
与内部网站搜索一样，当网站有多个页面和由多个层组成的复杂层次结构时，面包屑导航非常有用。面包屑常见于大型电子商务网站和平台、媒体和新闻网站、涵盖广泛话题的博客和杂志等。、和是用户所期望的。然而，如果你不是这样，你的网站有一个简单的层次结构，主导航足以让用户有效地与之互动。
电商网站上的产品页面都是用面包屑路径作为二次导航。
形式
表单是一种交互式元素，允许用户向系统或服务器发送信息。简而言之，它是我们为了向某人提供安排好的信息而必须填写的任何真实纸质表格的数字版本；然而，数字表格可以有更多的选项和功能，使过程更流畅，更清晰，更人性化。由于这是一种传统的、公认的数据收集模式，用户经常在他们的数字生活中处理表单，从注册过程开始，添加个人或财务细节，付款，发送反馈，订阅时事通讯等等。
因为表单代表了用户和数字产品之间的实际交流点，所以它们必须非常简单易用。UI元素越简单，设计师就应该有更多的思考和努力，对吗？仔细考虑数据输入的逻辑，直观的表单导航，尽量减少所需操作的数量。并且不要忘记在表单填写过程中支持用户的视觉提示和提示。
Vertt的登录页面有一个简单而直观的表单，允许访问者留下他们的电话号码并申请驾驶。
卡片
卡片也称为单幅图块，是一种布局元素，有助于在布局中排列和可视化同类数据或内容。可扫描且易于使用的方式。卡片通常以网格的形式组织起来，但是每张卡片看起来就像这个系统中的一个独立的部分。卡片可以组合关于特定项目的不同类型的内容。例如，目录页面上的产品预览卡可以包括图像、标题、将它们添加到购物车或保存到愿望清单的基本功能等。
艺术学院的博客用的是极简卡片，只隔了负号空，但是整理的很清楚，便于区分。
在植物商店网站上，卡片有助于组织相关项目的选项。
未完待续:)
用户体验|用户界面| UI | UX/UI | UI设计|网页设计
内容转载自5PLUS设计师平台
