适用于下一个网站项目的网页设计最佳实践

一些开发人员专注于字面上的最终产品：产生足够令人愉快的网站设计的代码组合。

但是，精通营销的开发人员关心的不仅仅是构建看起来不错的东西。他们充当希望通过其网站实现特定目标的客户的顾问。

网页设计与您的业务目标密切相关

考虑到这一点，雇用一个似乎对你的最终目标不感兴趣/不问问题的人来建立一个网站是一个危险信号。重要的是要指出一个事实，即使是最漂亮的网页设计在让访问者转化为客户方面也可能并不理想。

也就是说，94%的人会根据您网站的设计来判断您的可信度。

因此，相反，您需要专注于使用您的设计来提供理想的用户体验。您必须首先让访问者通过访问您的网站轻松找到他们寻求的信息，同时引导他们进行目标转换活动。

这些网页设计最佳实践侧重于创建漂亮的网站和为您的业务服务的网站之间的交集。

1. 什么定义了网页设计最佳实践？
2. 品牌标准
3. 网页最佳设计/格式化实践
4. 编码标准
5. 无障碍标准

什么定义了网页设计最佳实践？

可以肯定的是，每个人对什么是精心设计的网站都有自己的看法。

但是，让我们通过听从专家的意见来控制每个人的意见。

根据Orbit Media的说法，您可以将网页设计最佳实践分为以下三个基本标准类别：

• 品牌标准：您可能更熟悉将同一概念称为“品牌”、“风格指南”或“情绪板”。这些标准包括与网站外观有关的任何内容，以及涉及特定业务的颜色、排版和元素的使用。
• 编码标准：网站应根据W3C商定的编程标准构建，W3C是共同开发Web标准的国际社区。
• 无障碍标准：获得信息是一项基本人权，已得到联合国《残疾人权利公约》的承认。除此之外，使您的网站易于访问会产生积极影响——不仅对销售，对搜索引擎优化也是如此。W3C分享了设计可访问网站所需遵循的基本标准列表。我们将在本文后面详细介绍更多相关的网页设计最佳实践。

让我们看看如何根据这些标准开发网页设计实践：

品牌标准

缺乏一致品牌的网站可能会给互动带来压力并引起混乱。因此，大约 38% 的访问者表示，如果内容或布局不吸引人，他们将停止与网站互动也就不足为奇了。

请记住，外观并不是一切，这里有一些基本的设计原则可以考虑创建人们想要使用的网站：

平衡

平衡是规定如何有效分配视觉元素的设计原则。一般来说，平衡的设计看起来干净自然，并且具有良好的对称性（尽管这不一定是平衡的条件）。

您可以在页面布局方面在网页设计中加入平衡。

使页面中的文本或其他元素居中是一种简单的方法。一般来说，网页是建立在一个网格系统上的，它创造了一种平衡形式。您可以使用CSS浮动属性来定位元素并在页面中平衡它们。

可以通过3种方式实现平衡：
1.对称设计

对称设计示例

在整个网页中以均匀的方式排列元素。例如，如果左边有一个重元素，那么右边应该有一个重元素。如前所述，居中是实现对称的最简单方法，但有时会让人觉得平淡或乏味。

为避免使页面看起来单调，您可以使用不同的元素创建平衡，例如平衡大图像和文本块。还有一种称为径向平衡的对称平衡，其中物体从中心点辐射。
2.不对称设计

不对称设计示例

做得好更具挑战性，不对称设计涉及页面上元素的不均匀分布。例如，您可能在中心有一个较大的元素，而远处的一个较小的元素则平衡了该元素。

您可以使用其他设计元素（例如颜色或纹理）来平衡不对称设计。
3. 失衡

非平衡设计示例

这些类型的设计暗示了动作和动作，这会使人们感到不舒服。如果您的网站打算让人们思考，那么不平衡的设计适合您。

组合

术语组合是指设计元素的放置和组织。

组合

三分法则通常用于创建平衡的构图，尤其是照片。

间距

元素应均匀分布，以便用户可以区分部分或块。

间距在网页设计中的作用

您还应该引入负空间或图像主题之间和周围的空间。负空间可以减少视觉噪音，增加可读性，并带来平衡。

您可以通过在设计元素周围添加边距和填充来引入负空间。

焦点

关注一个元素

创建一个您想要引起注意的焦点区域。它应该是页面中最重要的部分，理想情况下，每个页面都应该只关注一个主要焦点。

颜色

在品牌推广方面，颜色是一个重要的设计元素。理想情况下，您在了解希望与品牌相关联的网站配色方案的情况下进入网页设计过程。

特别是对于网页设计，它有助于从您的品牌的情绪板开始。

调色板示例

选择一种原色和次要颜色（次要颜色可以补充或对比原色），以及每种颜色的较浅和较深的色调。限制你对颜色的使用，以免各种口音成为眼中钉。

Adobe Color提供了一个出色的免费工具，用于测试各种颜色组合，从而为网站元素创建一个工作调色板。

此外，在决定颜色时，重要的是要考虑色盲人群，其中包括高达4.5%的世界人口。

常规设计对色盲用户的外观示例

色盲分为三种类型（全色盲、双色视觉和色觉缺陷），因此考虑到可能无法区分颜色的人，请确保您的设计仍然可用。
对比
在选择颜色时，重要的是要注意颜色比例和对比度。

颜色对比度是指前景和背景之间的光线差异。使用足够对比的颜色可以轻松区分网站的可见性。通常，使用高对比度的颜色选项（例如白色背景上的黑色文本）使您的网站具有可读性。

对比度差可能会造成问题

对比度是分配给页面元素之间的对比度差异的数值。

World Content Accessibility Guidelines (WCAG) 2.0建议普通文本的对比度为4.5:1。WebAIM 分享了一些适合理想对比度的预定组合，以帮助您可视化此网页设计最佳实践。

为了帮助使用此比率进行导航，请确保在设计网站时，您设想的是所有受众（包括那些有可访问性问题的受众）。与事后计划解决这些问题相比，这样做更容易。

考虑人们将与之交互的网站的所有方面，包括页眉、页脚、菜单——所有这些都需要易于看到才能使用。

可用于检查颜色对比度的一些工具包括：

• Level Access的颜色对比度检查器。
• Contrast Ratio。
• WCAG 2.0 AA & AAA颜色对比度检查工具，它基于WCAG 2.0指南。

排版

网站排版是另一个重要的品牌考虑因素。

虽然有许多不同的来源可以找到在您的网站上使用的潜在字体，但您需要首先考虑将始终显示的选项，而不管最终用户在其计算机上安装了哪些字体。

Google Fonts提供各种免费的网络安全字体，无论用户安装的字体/程序如何，您都可以依靠这些字体正确显示。确保在情绪板上包含字体，以查看它们是否符合您的色彩审美。

如果您在想出组合时遇到问题，Google字体可以推荐流行的配对。您还可以使用FontPair之类的网站来获取建议。

尝试限制您使用的字体粗细，因为加载太多文件会导致页面速度变慢。关于这一点，请考虑在本地托管Google字体以引入额外的性能优势。

糟糕的排版与理想的排版

在根据网页设计最佳实践选择印刷元素时，作为一般经验法则，标题使用无衬线字体，内容使用衬线字体。至少，不要对正文内容使用装饰性字体，因为它会难以阅读。

此外，不要试图在您的网站上使用各种不同的字体。一个好的经验法则是为您的徽标使用一种字体，为您的菜单/标题使用另一种字体，并为正文内容使用另一种字体。在这一点上，请尝试将相互补充的字体配对，例如来自同一字体系列的字体。

元素层次结构

层次结构是指展示相对重要性的设计元素的排列。这是通过操纵视觉对比度、大小和位置等元素来引起注意的。

元素层次结构示例

例如，必须将内容分解为逻辑块，以便用户可以将各个部分区分开来。

您可以通过使用内容标题来做到这一点，这不仅使用户可以轻松跳到他们想要阅读的部分，而且还可以将大量文本分成可读的块，以便屏幕阅读器能够确定上下文每个部分的。

如果您正在寻找这些设计概念的一些有用的视觉插图等等，Tilda Publishing博客涵盖了一些最常见的网页设计错误以及如何修复它们。

网页最佳设计/格式化实践

根据Orbit Media的研究，在排名前50的营销网站中观察到了一些常见的网页设计标准。

网页设计标准

按照“标准”，它们意味着80%的网站使用类似的设计方法：

• 左上角的标志。
• 每个页面顶部的主要水平导航。
• 位于“首屏”的主页上的价值主张很高。请注意，大多数网页设计师会告诉您，浏览器没有标准的像素高度，技术上也没有“折叠”。但是，一般来说，重要的设计元素应该出现在大多数访问者通常可见的页面上，即使没有滚动。

以下是常见网站元素的一些网页设计最佳实践：

图片

使用图像的网页设计最佳实践可以激发许多建议，但在本次网页设计最佳实践的讨论中，让我们专注于最低限度：

• 添加ALT文本。除非使用ALT文本，否则无法使用屏幕阅读器处理图像。添加ALT文本也有助于SEO，但有些人仅使用ALT文本来补充他们的关键字策略。ALT文本更有用的用途是描述图像——尽管您当然可以通过正确的方法同时满足搜索蜘蛛和屏幕阅读器的需求。
• 使用人脸图像往往比其他图形或动画更有效。它使人们更有可能与图像互动，因为人们被他们认为是真正的同理心和情感所吸引。
• 使用响应式图像，这些图像会根据浏览器大小而增长或缩小。这有助于提高网站速度和SEO。
• 永远不要忘记网站图标。网站图标是显示在网站标题旁边和搜索结果中的小图标。它有助于品牌识别并增强网站的用户体验。

网站导航

用户希望能够轻松地在网站上找到他们正在寻找的内容。因此，网站导航简单明了很重要。

网站导航是一个通用术语，指的是网站的内部链接架构。不要忘记导航的主要目的是帮助用户轻松找到您网站上的相关内容。

您网站的内部链接架构构成了站点地图的基础，这有助于搜索引擎更轻松地访问您的内容。已经发现，拥有一个设计良好且内容易于查找的网站会对您从搜索引擎获得的网站流量产生积极影响（以及获得Google附加链接的机会更高）。

菜单导航

网站导航有几个方面，但您的顶部/主菜单应该是主要焦点，因为它将是用户访问您的网站时首先与之交互的内容之一。

有不同的网站菜单设计启发式方法，但最受欢迎的包括：
导航菜单
理想情况下，它位于网站的前面和中心。如果有多个类别，这可能涉及使用下拉菜单。但是，不推荐使用下拉菜单，尤其是在技术 SEO 方面（它们更难抓取）。此外，已经发现大多数人不喜欢下拉菜单。

这是因为人眼的工作速度比手快，所以当人们已经决定要点击什么并且其他东西掉下来时，人们会觉得很烦人——这可能会导致页面访问量减少。
汉堡菜单
主要用于移动优化设计，汉堡菜单通常位于页面的左上角或右上角。它显示为一个带有三行的正方形，单击即可展开。然而，许多设计师鄙视汉堡菜单，这激发了Web开发人员考虑使移动网站导航变得有趣和实用的新方法。

以下是基于网页设计最佳实践设计导航的一些技巧：

• 添加搜索栏以帮助用户轻松查找内容（这是改进WordPress搜索功能的方法）。这对于具有大量内容的网站（例如新闻博客）特别有用。
• 遵循三次点击规则设计您的网站，该规则规定用户应该能够在不超过三次鼠标点击的情况下找到所需的信息。这是因为在可能的情况下，用户实际上更喜欢浏览网站而不是浏览搜索结果。
• 使您的菜单标题具有描述性（牢记关键字），这可以帮助用户更轻松地找到项目，并为 SEO 做出积极贡献。
• 菜单项的位置很重要。将最重要的页面放在菜单的前面，以便于访问。
• 将菜单项保持在最多7个，不仅是为了保持网站设计简洁，而且因为菜单项类别过多可能会影响您在搜索中排名的能力。谷歌可能会将这些看似不相关的类别解释为您的网站尚未决定特定的利基市场。

为了更方便的格式，这里有一个方便的信息图：

菜单导航的网页设计最佳实践

编码标准

在全球创建和使用如此多的网站时，当然需要一套标准化的编码原则。这些网络标准的某些方面包括：

搜索引擎优化

搜索引擎优化可用于有机地增加您网站的访问者数量（不使用广告）。由于在一篇文章的一小部分中充分挖掘SEO太复杂了，请查看我们的SEO清单和我们的WordPress最佳SEO插件提示，以熟悉网页设计最佳实践的这方面。

请注意，以下编码标准提示与SEO密切相关。

移动响应能力

无论使用什么设备或浏览器访问您的网站，响应式设计都关注创造出色的用户体验。

如今，设计响应式网站比以往任何时候都更加重要，因为超过60%的互联网用户通过手机访问互联网，一半的电子商务交易是通过移动平台完成的。除此之外，谷歌的新搜索算法还优先考虑适合移动设备的网站。

响应式设计示例

拥有响应式网站不仅可以帮助用户更轻松地浏览您的网站，还有助于提高参与度和转化率。用户推荐他们拥有积极的移动响应网站体验的品牌，相反，不仅会停止从移动网站体验不佳的品牌购买，而且还会积极阻止其他人这样做。

然而，尽管需要响应式网站，但估计有91%的小企业没有. 他们应该这样做——因为设计一个移动响应式网站肯定是有回报的。62%的公司报告称，在设计了移动响应式网站后销售额有所增加。

阅读有关如何使您的网站更适合移动设备的资源，其中包括要下载的最佳WordPress移动网站生成插件列表，并确保查看此精选的最佳WordPress主题列表，您可以在其中浏览大量内容的响应主题。

Google还提供了一些关于如何设计响应式网站的技巧。

网站安全

另一个重要的编码实践？创建用户可以信任其敏感个人信息的安全程序和网站。与流行的看法相反，黑客不会主动寻找特定的网站进行黑客攻击，这就是为什么即使是小型网站也容易受到攻击的原因。

总体而言，WordPress通常是安全的，但它有助于采取额外的预防措施来保护您的网站免受攻击。

以下是一些最佳网站安全实践：

• 获取SSL证书，这对于处理付款和个人信息的网站尤其重要。SSL证书对通过网络发送的信息进行加密，因此黑客很难对其进行解码。除此之外，它是一个行业标准。当访问者访问的网站没有SSL证书时，Chrome会提醒访问者。除此之外，Chrome现在正在弃用旧版TLS版本并开始显示其他警告。启用HTTPS（安装SSL证书的一部分）也是Google的官方排名因素。
• 确保您的登录凭据安全。一些攻击是由试图强行访问网站的黑客引起的。它有助于拥有一个单独/隐藏的登录页面（使用WP Hide Login插件）并限制登录尝试的次数。使用Login LockDown插件，该插件会记录每次登录失败的IP地址和时间戳，并在短时间内达到同一IP范围内的失败尝试次数时锁定登录功能。此外，创建一个超过6个字符且由大小写字母、数字和特殊字符混合而成的安全密码。经常更改密码。如果您正在寻找额外的安全性，您还可以使用双重身份验证进行登录。
• 保持WordPress核心、插件和主题更新。不要忘记从信誉良好的来源下载插件或主题。一个好的迹象是插件/主题是否有多个安装并且最近已更新。您还应该阅读评论以自己决定插件是否值得信赖。请注意，下载一个WordPress安全插件，例如Wordfence、Sucuri或Defender，因为73.2%的最流行的易受攻击的WordPress安装可以使用免费的自动化工具检测到。这是一个更深入的最佳安全插件列表。
• 使用安全的网络主机。对于那些不知情的人来说，您的虚拟主机似乎与网站安全无关，但41%的攻击是通过托管平台上的安全漏洞发生的。寻找包含以下功能的托管服务提供商：服务器端防火墙和加密、NGINX或Apache Web服务器、防病毒和反恶意软件、现场安全系统以及SSL证书和CDN的可用性。

有关WordPress安全性的更多信息，请查看我们关于如何保持WordPress网站安全的综合资源。

页面速度

大约一半的用户希望网站在2秒或更短的时间内加载，如果需要的时间更长，40%的人会毫不犹豫地从页面跳出，（很可能）永远不会返回。

除了网站访问，页面速度也很重要，因为它也会影响转化率和收入。每增加一秒的页面加载速度，销售额将下降多达27%。提高网站速度可以防止损失7%的可能转换。

以下是一些使您的网页加载速度更快的方法：

• 使用内容交付网络 (CDN)，它获取图像、CSS和JavaScript等静态文件，并将它们交付到离用户物理位置最近的服务器上。
• 考虑如何使用图像。网站平均使用1.8MB的图片，占网站大小的60%。为了解决这个问题，请重新考虑如何布置网页。如果您想保持快速的页面速度，请尝试减少设计中使用的大图像数量并确保对其进行优化。
• 如果您的网站需要使用大量大图像，请使用包含GZIP压缩、缓存或图像优化功能的插件，例如WP Rocket和Imagify。它们可以帮助使您的文件更小（不牺牲质量），以便更快地加载。
• 考虑您保留在WordPress数据库中的插件和文件的数量，因为它们也会影响页面加载速度。清理那些你不使用的。当您使用它时，将您的PHP、WordPress核心和插件更新到最新版本。

查看我们的网站速度优化综合资源。

无障碍标准

互联网旨在为所有人服务，无论他们使用的具体硬件、软件、语言、能力或位置如何。然而，许多人为了美观的设计而牺牲了可访问性。

可访问性是每个网站的关键

可访问性是指让每个人都可以使用您的网站的做法。

除了影响访问的残障人士外，W3表示网站可访问性还有益于：

• 那些使用小屏幕、不同输入模式等设备的人。
• 老人家。
• 患有“暂时性残疾”的人，包括肢体骨折、眼镜丢失或身体状况不佳。
• 具有“情境限制”的用户，例如在明亮的阳光下或在公共交通等无法收听音频的环境中使用设备访问互联网的用户。
• 互联网连接速度较慢的个人。

可访问性应该是每个人都关心的问题，因为我们都在某种程度上受到它的影响。

使您的网站可访问的原因

仍然不确定在这个关于网页设计最佳实践的讨论中是否值得花时间在可访问性上？

考虑以下原因：

• 这是ADA的要求。美国残疾人法案 (ADA) 于1990年通过，旨在保护残疾人的公民权利免受歧视。它涵盖了交通、电信、就业，甚至建筑规范等内容。由于这项法律是在将近 30 年前通过的——当时互联网还没有那么普及——立法者正在寻求修改它。
• 它促进包容性。皮尤研究中心的一项调查显示，残障人士上网的可能性是非残障人士的三倍，这是一种耻辱，因为统计数据显示，大约30%的专业人士有残障，其中62%的残障人士因为害怕负面偏见而“在雷达下飞行”。
• 它将帮助您赢得更多业务。通过更具包容性，您将引入一个残疾人网络，代表7万亿美元的可支配收入
• 搜索引擎优化的好处。搜索引擎奖励符合可访问性的网站，以鼓励更多网站可访问。

如何使您的网站更易于访问

使您的网站更易于访问的一种简单方法是安装WP Accessibility插件，它添加了可访问性功能，包括：

• 一个工具栏，用户可以在其中调整字体大小并以高对比度和灰度查看您的网站。
• 比较颜色对比度以检查它是否符合ADA的标准。
• 从插入内容的图像中删除标题属性。大多数屏幕阅读器无法感知这一点并改为阅读锚文本。
• 启用跳转链接，这是允许用户直接跳转到内容的内部页面链接，这对使用屏幕阅读器的人很有用。

需要采取的一些额外步骤：

• 如果您的网站制作音频、有声读物、视频、播客等媒体，请添加字幕或文字记录，以使聋哑人以及想要消费您的内容但不能在公共场合消费媒体的人受益。
• 为有运动障碍且只能使用键盘（而非鼠标）浏览您的网站的人创建可通过键盘访问的链接和菜单。不鼓励使用下拉菜单，但您可以通过为每个下拉项分配快捷方式来解决此问题（例如：按“1”表示主页，“2”表示关于页面等）。
• 最后，测试您的网站的网站可访问性。Web Accessibility Initiative不认可任何特定工具，而是提供了一个工具列表，您可以使用这些工具来审核您的工作。

小结

好的网站不应该由客观好的设计来定义。同样重要的是网站的可用性、导航的便利性和可访问性。有了这些网页设计最佳实践，您就拥有了创建外观和功能良好的东西所需的一切。

请记住，这些是网页设计的最佳实践。根据您网站的性质，您可能无法完全关注每一项。但在你打破规则之前，至少了解它们存在的原因是有帮助的。

原文地址：https://www.wbolt.com/web-design-best-practices.html