简单是关键——探索最小的网页设计

极简主义网页设计与其说是一种特定的设计美学，不如说是一组设计原则或指南。 在实践中，遵循这些原则会产生一个简单的网站设计，它只使用最重要的元素来实现访问者的预期结果。

除了普遍存在的“少即是多”的概念外，这些原则还包括使用有限的调色板和负空间等技术。

最少的网页设计少即是多

“少即是多”可能是最常听到的极简主义格言之一，无论是谈论网页设计还是任何其他形式的极简主义。 但在极简主义网页设计的背景下，它的真正含义是什么？

有时，通过首先查看什么不是极简主义，更容易弄清楚什么是极简主义设计。 这是一个极端的例子：

虽然 Ling's Cars 的网站显然非常成功，但它经常列出现有设计最差的网站。 发生了很多事情。 任何人都可以看到它并立即知道它不是极简主义的。

然而，有很多精心设计的网站也不是极简主义的。 以这个为例：

这个网站设计精美，但在动画、纹理背景、拼贴元素和排版之间，绝对不是极简主义。 不一定是任何特定元素单独使其不符合极简主义网页设计定义 - 它更多的是所有这些元素的组合。

极简主义设计专注于创造引人注目的设计，而更少的事情发生。 实现这一目标的一个关键是不断删除元素，直到设计中断。 在这种情况下，“中断”应被解释为不再满足用户的需求。

最小的网页设计让内容脱颖而出

支持极简主义网页设计的最引人注目的论点之一是它让内容真正脱颖而出并闪耀。 这就是为什么一个简单的网站设计是这么多艺术家、摄影师甚至一些作家的首选。 他们希望他们的创意内容成为关注的焦点，而不是其他人创造的设计元素。

以 Ian Jones 的网站为例。 他从事平面和数字设计以及摄影。 他的网站将重点放在内容上，同时还融入了一些有趣的设计元素（如网格背景）和微妙的动画。 最终的结果是一个极简的 UI 设计，让他的作品大放异彩。

编剧兼电影导演 Artemy Ortus 的网站是极简主义设计的另一个令人惊叹的例子，它专注于他的作品。 幻灯片元素在不造成任何设计混乱的情况下创造了大量的视觉趣味。

Cooper Perkins 的网站是极简主义设计的又一个绝妙例子，它使用动画来创造兴趣而不会造成混乱。

每个 UI 和 UX 决策都必须是有意的

从表面上看，极简主义设计似乎比看起来更复杂的设计风格更容易掌握。 事实上，通常情况正好相反。

极简主义设计将每一个设计元素放在首位和中心。 网页设计师所做的每一个选择都会展示给每一位访问者。 虽然视觉上更复杂的设计可能会导致几乎看不见的小错误或失误（对于许多初学者来说，这是一个受欢迎的好处），但简单的网站设计并不能提供相同的覆盖范围。

Narrator WordPress 主题是一个很好的网站示例，它对将所有内容联系在一起的小元素进行了很多思考。 在不为不同元素添加视觉混乱的情况下，线条、箭头符号和简单的灰色背景为网站提供了有时缺乏极简设计的润色。

乍一看，Inlay 的网站看起来非常简约。 滚动显示动画和更复杂的屏幕，但整体极简主义的氛围始终存在。

应用程序也可以从极简设计中受益。 这个 Word Counter 应用程序的简单设计使您可以轻松查看它提供的所有功能，而无需更正式的入职培训。 很容易看出，所做的每一个设计决策都是有意的，并强调可用性。

利用负空间

一个好的极简主义网页设计最重要的元素之一可能是使用负空间。 极简主义设计与不存在的东西一样重要。

负空间，也称为“空白”，是围绕设计和/或内容元素定义的空白或开放空间。 诚然，有时这个空间并不总是真正空的，可能会被背景纹理、图案或颜色填充。 但它仍然是没有像网站的其他元素一样被“使用”的空间。

Platoon Branding Studio 在其标题中的字体周围使用了充足的负空间，使其脱颖而出并立即吸引眼球。

Nohau 的标题很相似，它们的字体周围有很多空白区域。

负空间也可用于在设计中创建可能不会立即显而易见的有趣形状或图像。

这个来自布朗克斯动物园的标志和长颈鹿腿之间的空间一起玩。 它们是摩天大楼的轮廓。

用摄影、排版和对比创造戏剧

仅仅因为设计简单或极简并不意味着它也不能具有戏剧性。 在极简设计中创造戏剧效果的一些最常见方法包括使用摄影、排版和对比（无论是在颜色方面还是在设计元素之间）。

大照片，包括照片背景，是为设计增添大量视觉趣味的好方法，如果做得好，绝对可以融入极简主义的设计美学。 为了获得最大的影响，最好避免使用非常忙碌的照片。 极简设计中的照片本身至少应该有点极简主义（包括简单的调色板和负空间的使用）。

Wildsmith Skin 网站在他们的登陆屏幕上使用了一张大照片，以及其他引人注目的字体。 它立即引起了人们的注意，而分割照片是一种不太常见的选择。

Iglucraft 是另一个使用大照片的站点的绝佳示例，不仅在主登陆屏幕中，而且在整个站点中。 过渡动画被考虑并添加到整体用户体验中。

除了大型摄影，大型插图和视频也可用于极简主义网页设计。

In Focus 网站在其背景中使用动画、插图和视频。 虽然该网站不是立即直观的，但探索和使用它很有趣。

排版是极简设计师正在做一些非常酷的事情的另一个领域。

以艺术和文化非营利组织 KANEKO 的主要排版为例。 标题中字体上的图案和颜色覆盖与许多照片或插图一样具有视觉刺激性，但方式完全不同。

葡萄牙制作公司在大型视频背景上混合使用了实线和线条排版，利用了两种增加大量戏剧效果的技术。

Kobu 的网站不仅在每个屏幕上使用的颜色之间具有良好的对比度，而且在整个使用的各种屏幕之间也具有良好的对比度。 它将每个项目作为其独特的特征进行区分。

排版层次结构

由于在简约的网页设计中每个决定都必须经过深思熟虑，因此花时间创建清晰的排版层次感非常重要。 当类型必须区分不同类型的内容而没有其他设计元素的帮助时，排版层次尤其重要。

例如，当一个人访问一个极简主义的网站时，他们应该能够一眼就识别出标题、标题、正文和导航，而不必阅读内容。 实现这一目标的最佳方法是通过这些元素之间的清晰对比。

InVision 的内部设计博客使用清晰的排版层次来区分标题、标题和正文。

虽然布局和技术（例如为不同的印刷元素使用不同的颜色）对于实现该目标大有帮助，但通过大小、重量和样式来描述各种元素至少同样重要。

Stills WordPress 主题使用清晰的排版层次结构来区分标题和正文。

即使是最小的设计通常也应该包括至少三个层次的印刷层次结构：标题（也可以用于标题）、副标题和正文或文本副本。 通常，有多个子标题级别，但这绝不是必需的。 有些网站使用两个级别（有些甚至选择只使用一个级别，尽管在大多数情况下不推荐）。

保持导航简单

许多极简主义网站崩溃的一个领域是创建用户友好的导航。 这在具有大量页面的更复杂的网站上尤其常见。

顶部导航栏仍然是极简设计的中流砥柱。 简单的文本链接，有时带有子菜单，是最常见的。 可以调整排版、颜色、形状和其他设计元素以适应网站的整体外观和感觉。 但还有其他选择。

在极简主义网页设计中发现的另外两种非常常见的导航设计模式是汉堡包和烤肉串菜单。 汉堡菜单由三个或四个水平线组成（变化有时使用垂直线，但想法是相同的），而烤肉菜单由三个点组成。

尽管充满了可用性问题，臭名昭著的汉堡菜单——它已成为隐藏导航的通用快捷方式——仍然存在，因为它减少了视觉混乱。

Nilton Clothing 使用三个偏移线来创建他们的汉堡包菜单，该选择已成为三个匹配线的流行替代品。

在 RFTB 的汉堡菜单后面放置彩色背景使其脱颖而出。

最常见的是，汉堡菜单将用于主导航，而烤肉菜单可能用于设置菜单或其他子菜单类型。 虽然两者都成为更常见的导航元素，但一些设计师仍然添加文本以指示汉堡包是菜单。 如果网站不针对精通技术的用户，这将特别有用。

极简主义调色板

关于什么是极简主义调色板有许多思想流派。 许多极简主义网站只使用两种颜色。 其他人使用三个、四个或更多。 单独的调色板不会成就或破坏简约的网页设计。

Pittori di Cinema 网站的主页使用三色调色板（光标为红色，背景为黄色，黑色字体）。

Zeus Jones 的网站包含多种颜色，每个部分使用不同的补色。 色块清楚地描绘了各个部分，同时保持极简主义。

Dot Lung 的网站使用了充满活力的紫色、红色和白色调色板。 它创造了一种活力和现代感，同时保持了简约的整体配色方案。

Flow 的网站使用两种颜色的调色板，但背景颜色不断变化。 这是对极简主义调色板的独特诠释。

有很多可能的方法可以为简单的网站设计创建调色板。 但就像极简设计的所有元素一样，每个选择都需要有意识，并改善整体用户体验。

结论

极简设计带来的最大挑战是设计师没有什么可以隐藏的。 设计的每个元素都必须证明其价值。 每个元素都必须经过深思熟虑的选择，并完美地实施，才能使设计本身出类拔萃。

将极简设计视为比其他设计风格更容易的网页设计师通常对创建产品所需的努力、时间和技能感到惊讶，该产品可以在用户行为和体验方面实现其目标，同时保持真正的极简美学。

• • •

进一步阅读 Toptal 设计博客：

• 粗野主义网页设计、极简主义网页设计和 Web UX 的未来
• 拟物化、扁平化设计和字体设计的兴起
• 停止制造垃圾：设计持久界面的指南
• 发挥你的灵感——情绪板指南
• 偷窃的艺术：如何成为大师级设计师