网站设计最佳实践：从 A 到 Z

正在寻找网站设计最佳实践？你来对地方了！

良好网站设计的关键在于从坚实的基础开始。 以下是一些帮助你入门的技巧和窍门。

30 个网站设计最佳实践

• 从基础开始
• 导航
• 颜色
• 文本
• 行动号召
• 设计系统
• 优化

从基础开始

让我们从一个简单的最佳实践概述开始，如果你从一开始就实施这些实践，它们可以显着改善你的网站设计。

• 尽可能从线框图开始。 即使只是铅笔草图，也要优先考虑将你的想法写在纸上（或屏幕上）。 如果你有资源，我们建议花一些实际的 UX 时间来研究页面的结构。 这将节省你稍后进行 UI 工作的大量时间。 相信我们！
• 始终使用真实副本。 Lorem ipsum 在许多方面都很有用，但最好还是用将要放在其中的实际内容来概念化网站设计。 如果你没有任何最终内容，请尝试编写一些示例副本，并使用它来构建你的页面。
• 使用网格布局。 网格布局使用列系统，可帮助你保持设计的结构化和元素的整洁。 与其他组织性较差的设计相比，开发人员也更容易实现。 Bootstrap 的网格系统就是一个很好的例子。
• 从一开始就为不同的分辨率和屏幕尺寸构建。 虽然必须考虑到多种分辨率并不是强制性的，但它会使你的开发人员的生活更轻松，并带来更好的用户体验。 在 Sketch，我们设计为 360w、768w、1024w、1440w 和 1920w 作为最低要求。
• 使用 4 或 8 的倍数。 使用 4 或 8 的倍数进行设计（无论是间距、大小、版式等）正成为行业标准。 这也是一个值得遵循的好经验法则，因为它有助于保持一致性并简化你的设计过程。 而且，你猜对了，你的开发人员也会因此而喜欢你。
• 最大限度地发挥“首屏”的力量。 你的页面的上半部分是访问者首先看到的内容。 确保你的主要 CTA 位于此处 — 并且易于查找。 清楚地说明你的产品或服务是什么，以便人们在登陆你的页面后的几秒钟内就知道你如何帮助他们。

现在你已经掌握了基础知识，让我们继续深入探讨网站设计最佳实践。

导航

良好的导航是网站设计中最重要的方面之一。 想一想 — 如果你的访问者找不到他们要找的东西，或者不了解他们可以在你的网站上做什么，那么这些访问将如何转换？

但别担心。 设计导航之旅并非火箭科学。 以下是一些简单但万无一失的技巧和最佳实践，可将你的网站导航设计提升到新的水平。

• 少即是多。 如果菜单和子菜单太多，人们可能会感到困惑并逃离你的网站。 关注你的优先事项！
• 明智地选择菜单。 不同类型的菜单服务于不同的受众和产品，因此请仔细考虑我们前面谈到的那些目标和需求。 首先，避免仅仅因为某个菜单很酷或很新而选择不同的菜单。
• 依靠顶部菜单栏。 虽然在设计上具有创造力很棒，但请记住访问者的期望。 到目前为止，我们大多数人都习惯了顶部菜单栏，并期望在这里找到重要信息。 以同样的方式，我们期望页脚包含联系表单或公司信息。
• 使重要选项易于查找。 在设计菜单层次结构时，请同时牢记你的优先事项和用户的优先事项。
• 在适当的地方添加子菜单。 子菜单是容纳其他重要页面或来源的好方法，否则这些页面或来源会使你的菜单变得混乱。 它还可以使你页面的内部逻辑更清晰。

颜色

你应该像在纸上使用荧光笔一样在网站设计中使用颜色。 它可以帮助引导访问者，将他们指向最重要的信息。 但是，如果你过度使用它，很容易让人不知所措。 以下是一些在 Web 设计中有效使用颜色的简单技巧。

• 使用颜色来指示功能。 颜色通常用于指示某事物是否可点击，例如按钮或链接。 你甚至可以使用不同的颜色来指示人们之前是否点击过该按钮或链接。 由于你的用户已经期望使用这种设计语言，因此最好坚持使用它。
• 使用品牌颜色作为强调。 在选择颜色时，最好对正文文本和背景使用中性色。 然后，将品牌颜色用于按钮、链接和图像，以帮助提升你品牌的视觉形象，并从一开始就产生一些良好的品牌认知度。
• 检查可读性和可访问性。 你选择的调色板会对用户的眼睛产生重大影响，无论是好是坏。 你可以对照 WCAG 规则检查你的调色板，以确保你的设计使用最佳的颜色对比度来实现可读性。
• 寻找灵感。 视频游戏往往对颜色有很好的运用。 例如，你可以研究它们对指示符的使用，设计师使用指示符来指示元素或对象可用于什么。

文本

向访问者提供他们需要的信息很重要，但如果你希望他们从头到尾阅读，则正文副本需要引人入胜且易于理解。 以下是一些使用文本时的关键网站设计最佳实践。

• 拥抱空白。 使用短段落，并使用标题、图像和其他视觉元素来分隔各个部分。 将文本中的这些中断视为在想法之间呼吸的机会。
• 注意 破烂和寡妇。 这些不是人或磨损的衣服，而是显示效果不佳的文本。 当文本对齐错误并开始形成怪异的形状时，会发生破烂。 寡妇是段落末尾残留的单词。 这些听起来可能像是小细节，但它们确实可以提升你的网站设计。
• 尊重动态二人组：设计和内容。 关于内容应该通知设计还是反之，陪审团总是离开。 无论你选择哪一个，都要确保两者都不会相互竞争。 保持文本简洁但信息丰富，并且设计美观但简单。
• 设置参数。 虽然你可能已经注意到了填充和边距，但请确保水平文本行永远不要超过 70 个字符。 这是一个很容易错过的。
• 不要忘记层次结构。 文本层次结构可以成就或破坏设计。 确保从一开始就弄对。 不知道从哪里开始？ 查看 Apple 的指南和 Google 的 Material Design 作为参考。
• SEO。 考虑采用 SEO 友好的文本和页面结构。 这意味着在标题和正文中添加关键字，并在与你的开发团队共享图像时考虑图像的替代文本。

行动号召

在网页设计中，最重要的元素莫过于行动号召（CTA），它是一个链接或按钮，旨在引导网站访客执行特定操作。这个操作应该清晰、易于找到，并与您为着陆页或网站设定的目标保持一致。

• 考虑所有CTA层级。 根据页面的目标，您可以设置多个CTA，但重要的是将其分类为主要、次要和三级，并在设计中清晰体现。确保您将最多的空间和注意力放在主要目标上。
• 保持简短。 有效的CTA文案 应该简短、友好且能为用户提供信息。常见的例子包括“了解更多”、“立即购买”和“免费订阅”。
• 位置是关键。 我们之前提到了首屏。虽然您的主要CTA应该位于首屏，但您可以在首屏下方（页面下半部分）添加次要和三级CTA。确定CTA的位置也有助于您更好地组织整体文案。

设计系统

如果说人生（以及网站设计）中有什么不变的东西，那就是变化。如果您正在创建一个旨在长期使用的网站，设计系统会是非常有用的资产。通过设计系统，您可以创建一套规则，供所有为您的品牌进行设计的人使用，以确保他们使用正确的颜色、图像、布局等。

• 为未来构建。 您总是需要进行更改，因此请确保您拥有一个设计系统（以及相应的开发版本），以便您可以立即开始工作。
• 创建可重用的样式和资源。 您可以创建文本样式、间距规则、颜色令牌和可重用元素（例如 Sketch 中的Symbols），以使您的设计保持一致，并更容易在以后进行调整或更新。

优化

没有适当的优化，任何网站设计都不算完整。在最佳实践中，最重要的是确保您的网站对 Google 友好，这对于互联网成功至关重要。

• 移动优先。 人们很可能通过移动设备找到您的网站，即使他们稍后只在电脑上与其互动。因此，最好保持您的网站设计完美，这样我们就永远不会破坏第一印象。
• 不要忘记图像。 设计工作不会在网站全部勾勒出来后就结束！与您的开发人员紧密合作，以确保您的图像经过优化，使其看起来清晰，而不会降低网站速度。您可以使用 ImageOptim 等工具进行验证。
• 构建一个原型。 这将帮助您和其他所有人真正感受到该设计。如果您正在与客户合作，它还可以为您赢得一些额外的好评。最后但并非最不重要的是，原型也非常适合用户测试。

玩得开心

什么？是的！玩得开心是最重要的。如果您不喜欢网站设计的过程，那么遵循所有这些最佳实践将会令人生畏。有很多移动部件，但您应该拥抱它，并享受观看您的愿景一点一点地结合在一起的过程。

确保您玩得开心的一个快速方法？花一些时间来设计小的细节。我们在您的网站和 Web 应用程序上有一些小细节——您知道它们是什么吗？👀 （如果您想要提示，请在我们的下载页面上查看。）