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

您是否在寻找网站设计最佳实践？您来对地方了！

优秀网站设计的关键是从坚实的基础开始。以下是一些帮助您入门的技巧和窍门。

30 个网站设计最佳实践

• 从基础开始
• 导航
• 颜色
• 文字
• 号召性用语
• 设计系统
• 优化

从基础开始

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

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

既然您已经掌握了基础知识，让我们继续讨论更深入的网站设计最佳实践。

导航

良好的导航是网站设计中最重要的方面之一。想想看——如果您的访客无法找到他们想要的内容，或者无法理解他们在您的网站上可以做什么，这些访问如何才能转化为转化？

但不要担心。设计导航旅程并不难。以下是一些简单但绝对有效的技巧和最佳实践，可以将您的网站导航设计提升到一个新的水平。

• 少即是多。 如果有太多菜单和子菜单，人们可能会感到困惑，然后离开您的网站。专注于您的优先事项！
• 明智地选择菜单。 不同类型的菜单服务于不同的受众和产品，因此请仔细考虑我们之前提到的那些目标和需求。首先，不要仅仅因为菜单很酷或很新就选择不同的菜单。
• 依赖顶部菜单栏。 虽然在设计中富有创意很棒，但要记住访客的预期。到目前为止，我们大多数人都习惯了顶部菜单栏，并期望在其中找到重要信息。同样地，我们希望页脚包含联系表单或公司信息。
• 使重要选项易于查找。 在设计菜单层次结构时，请记住您的优先事项和用户的优先事项。
• 在有意义的地方添加子菜单。 子菜单是放置其他重要页面或来源的好方法，否则这些页面或来源会使您的菜单显得杂乱无章。它也使您页面的内部逻辑更加清晰。

颜色

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

• 使用颜色来指示功能。 颜色 通常用于指示某个元素是否可点击，例如按钮或链接。您甚至可以使用不同的颜色来指示人们之前是否点击过该按钮或链接。由于您的用户已经期待这种设计语言，因此最好坚持使用它。
• 使用品牌颜色作为点缀。 当涉及到 选择颜色 时，建议使用中性色作为正文和背景。然后，使用品牌颜色来突出显示按钮、链接和图像，以帮助提升品牌的视觉识别，并从一开始就产生良好的品牌知名度。
• 检查可读性和可访问性。 您选择的调色板会对用户的眼睛产生很大的影响——无论是好是坏。您可以根据 WCAG 规则 检查您的调色板，确保您的设计使用了最佳的颜色对比度以提高可读性。
• 寻找灵感。 视频游戏往往非常擅长使用颜色。例如，您可以学习他们如何使用 指示符，设计师用它来指示元素或对象可以用于什么。

文字

向访客提供他们需要的信息很重要，但如果希望他们一直读到最后，正文必须引人入胜且易于理解。以下是一些使用文字时的关键网站设计最佳实践。

• 拥抱空白。 使用简短的段落，并用标题、图像和其他视觉元素分隔各个部分。将这些文字中的分隔符视为在想法之间呼吸的机会。
• 注意 断行和孤行。 这些不是人或磨损的衣服，而是文字显示不当。断行发生在文字对齐出错并开始形成奇怪的形状时。孤行是留在段落末尾的剩余字词。这些可能听起来只是小细节，但它们确实可以提升您的网站设计。
• 尊重动态二人组：设计和内容。 评审团一直在讨论内容是否应该决定设计，或者反之亦然。无论您选择哪种方式，请确保两者之间不会相互冲突。保持文字简洁明了，但信息丰富，设计吸引人，但简洁。
• 设置参数。 虽然您可能已经注意到了填充和边距，但请确保水平文字行永远不超过 70 个字符。这是一个很容易被忽视的问题。
• 不要忘记层次结构。 文字层次结构可以成败一个设计。确保从一开始就正确设置。不知道从哪里开始？查看 Apple 的 指南 和 Google 的 Material Design 以供参考。
• SEO。 考虑 SEO 友好的文字和页面结构。这意味着在标题和正文中添加关键字，并在与开发团队分享图像时考虑图像的替代文字。

号召性用语

毫无疑问，网页设计中最重要的一环是行动号召（CTA），它是网页上的链接或按钮，用来引导访客采取行动。这个行动应该清晰明了，容易找到，并与你的着陆页或网站目标一致。

• 考虑所有 CTA 等级。 你可以在页面上设置多个 CTA，具体取决于页面的目标，但重要的是将它们分类为主要、次要和三级，并通过设计将这一点体现出来。确保你为主要目标提供最大的空间和关注。
• 保持简洁。 有效的 CTA 文案 应该简洁、友好并对用户有信息量。常见的例子包括 “了解更多”、 “立即购买” 和 “免费订阅”。
• 位置至关重要。 我们之前提到了 “内容之上”。虽然这是你的主要 CTA 应该出现的位置，但你也可以在 “内容之下”（页面的下半部分）添加次要和三级 CTA。确定你希望 CTA 出现在哪些位置也可以帮助你更好地组织整个文案。

设计系统

如果生活中（以及网页设计中）有一件事是永恒不变的，那就是变化。如果你正在创建一个旨在持久存在的网站，设计系统将成为一项宝贵的资产。通过它们，你可以创建一组规则，所有为你的品牌进行设计的人都可以使用这些规则，以确保他们使用正确的颜色、图像、布局等等。

• 为未来构建。 你将始终需要做出改变，因此要确保你拥有一个设计系统（及其开发对应部分），这样你就可以快速上手。
• 创建可复用的样式和资产。 你可以创建 文本样式、间距规则、颜色标记 和可复用的元素（例如在 Sketch 中使用 符号），以使你的设计保持一致，并便于以后进行调整或更新。

优化

没有一个网站设计是完整的，如果没有适当的优化。在最佳实践中，确保你的网站对 Google 友好，对于互联网上的成功至关重要。

• 以移动优先。 即使人们可能只在电脑上与你的网站互动，他们很可能是在手机上找到你的网站的。因此，最好保持你的网站设计完美无缺，这样我们永远不会破坏第一印象。
• 不要忘记图片。 设计工作不会在网站草图全部完成时就结束！与你的开发人员密切合作，确保你的图片经过优化，以保持其清晰度，同时不会减慢网站速度。你可以使用 ImageOptim 等工具进行验证。
• 构建一个 原型。 这将有助于你和其他人对设计有一个真实的感觉。如果你正在与客户合作，这也可能让你获得一些加分。最后但同样重要的是，原型也非常适合进行 用户测试。

享受乐趣

什么？没错！享受乐趣是最重要的部分。如果你不喜欢网页设计的过程，遵循所有这些最佳实践将会很让人望而生畏。有很多活动部件，但你应该拥抱它，并享受看着你的愿景一步步实现的过程。

确保你玩得开心的一个捷径是什么？花一些时间设计细节。我们的网站和网页应用上有一些细节 - 你知道是什么吗？👀 （如果你想要提示，我们的 下载 页面上有一个。）