适用于每个项目的 10 条网站建设设计戒律

您有网站建设设计的规则手册吗？有一些规则几乎适用于每个网站建设设计项目，我们将其称为“网站建设设计戒律”。

无论网站大小，这些规则都是良好设计的基础。如果您遵循这些基本准则，并使它们成为您开始的每个项目的思考的一部分，您将避免设计师可能陷入的许多陷阱！

1.你应该保持一致

一致的设计是易于使用和理解的设计。用户参与和操作以及视觉效果在整个单一设计中的外观和使用应该相似。

这意味着按钮具有相同的颜色并使用相同的悬停状态来帮助用户了解如何交互，标题具有相同的大小并在整个设计中使用相同的字体，并且诸如颜色之类的元素遵循可识别并与品牌。

其他视觉元素也应遵循一致的风格以及图标或摄影、视频或插图等元素的风格和使用计划。该设计应该具有用于复制块的声音，与整体美感相匹配。

所有这些一致性元素都有助于提高整体可用性，使设计尽可能易于用户交互。

2. 你应该使用空格

无需将每个元素都塞入滚动上方的空间中。使用空白来建立节奏和流程，创建视觉层次并帮助用户在设计中移动。

如果内容好的话，他们就会滚动。

空白实际上可以通过将视线拉向屏幕来帮助鼓励用户采取行动。

随着屏幕尺寸变小，空白变得更加重要。元素周围的额外空间有助于创建分隔并使它们更易于阅读。（想一想，当您轻松点击按钮时，一点额外的空间会有多大的好处。）

不确定在设计中的何处包含空白？从这里开始：

• 围绕按钮或其他交互元素

• 作为类型行之间的行距，使阅读更容易

• 元素之间的区别很容易区分，例如在嵌入文本块的照片上换行

• 在表单字段中，因此可以轻松在移动屏幕上点击

• 围绕您希望用户关注的任何元素

3.你应该使用网格

网格是用户体验的基础。当您使用网格进行设计时，最终的网站会更加精确、一致，并且元素会按照具有视觉意义的顺序放置。

网格既可以是水平的，也可以是垂直的，尽管最著名的网页设计网格可能是用于对齐元素的 12 列垂直网格。

网格是只有您在设计过程中才能看到的东西，如果您无法找到元素的位置或创建有组织的轮廓，那么网格可以成为您的救星。

4.你不应该忘记用户模式

用户以某种方式做事，并期望从您的设计中得到特定的东西。为了获得尽可能多的成功，设计应该使用普遍接受的用户模式（设计问题的重复解决方案），以便人们准确地了解设计的功能。

常见的用户模式包括：

• 表单中的信息顺序，以姓名或电子邮件开头，以“提交”结尾

• 导航菜单的放置

• 电子商务购物车图标的位置和可点击性质

• 通知如何运作

• 用于搜索和聊天等的图标

UI 设计模式有一长串适用于所有类型设计情况的用户模式。

5. 你应该在 UI 操作中使用相似性

网站设计中的每个元素都应该像同一类型的所有其他元素一样工作。这些元素还应该具有视觉标识，以便用户一目了然地知道它们是什么以及它们在做什么。

有如此多的用户界面操作可以内置到设计中，因此必须遵守格式塔相似性原则。对视觉元素和操作进行分组，使它们在视觉上可识别，将有助于为用户创造更好的整体体验。

6.你应该很好地使用排版

您不必成为印刷大师，但这绝对有帮助。

优秀设计的大部分内容都植根于可读性和易读性。这些概念取决于您如何选择和使用字体。

如有疑问，请选择简单的字体对，例如衬线字体和无衬线字体。从设计中退一步，看看字体是否易于从远处辨认。然后查看小画布（例如手机屏幕）上的文字，以确保一目了然。

尽量在高对比度环境下使用字体，例如深色背景上的浅色字体或浅色背景上的深色字体，以便每个单词都易于阅读。

7. 你不能忘记视网膜屏幕

即使是最小的屏幕也能以近乎完美的像素渲染元素和图像。

您需要考虑如何处理图像、图标和其他元素，以便无论屏幕大小如何，所有内容都能呈现精美。如果可能，使用矢量格式可能是理想的解决方案，这也是SVG 不断流行的原因之一。

如果您没有适合常见屏幕尺寸的分辨率的图像，请不要使用它。没有任何图片比糟糕或像素化的图像更好。

8.你应该诚实

您的设计应该忠于您的小型企业、信息或品牌，并且您所做的事情应该透明。不要窃取设计或图像，不要使用虚假关键字来增加流量，并忠实于您的内容的主题和内容。

由于网络如此混乱，用户希望与真实的设计进行交互。欺骗用户做某事或注册产品或服务，或者只是在某个主题或信息上误导他们应该违反您的个人道德准则。不要承担对设计有此期望的项目。

9. 不要忽视可访问性

网络应该可供尽可能多的人使用。虽然确保设计的可访问性听起来可能很困难，但它并不像您想象的那么复杂。

谷歌有一个关于网站可访问性的很好的指南，它的定义如下：

从广义上讲，当我们说某个网站可访问时，我们的意思是该网站的内容可供任何人使用，并且其功能几乎可以由任何人操作。作为开发人员，很容易假设所有用户都可以看到和使用键盘、鼠标或触摸屏，并且可以像您一样与页面内容进行交互。这可能会带来一种对某些人来说效果很好的体验，但对另一些人来说却会带来一些问题，从简单的烦恼到令人窒息的问题。

那么，可访问性是指可能超出“典型”用户范围的用户的体验，他们可能以与您预期不同的方式访问或交互事物。具体来说，它涉及正在经历某种类型的损伤或残疾的用户 - 请记住，这种体验可能是非身体的或暂时的。

良好设计的许多原则，例如尺寸、对比度和空间，都有助于整体的可访问性。

WebAIM 有一个清单以及其他工具，可以帮助您确定您的设计是否易于访问。该清单涵盖了与可访问性相关的四个方面：设计是否可感知、可操作、可理解和稳健？

10.你应该有反应

结论

一套可靠的规则可以帮助您更快地进入设计项目并更一致地工作。请注意，这些命令都没有告诉您项目应该是什么样子；而是告诉您项目应该是什么样子。它们植根于如何概述和创建每个网站的理论。