瑞士风格的网页设计

瑞士风格网页设计

你需要了解的一切

瑞士风格拒绝装饰，追求客观性，这有利于清晰的沟通。我们如何将其应用于网页设计？

简单、客观和可读性，是瑞士风格运动背后的主要思想。

自从瑞士风格风靡全球平面设计以来已有近 70 年的历史。但这些原则与今天有关吗？我们可以在设计网站和界面时使用它们吗？

让我们来看看。

什么是瑞士风格？

瑞士风格或国际风格是指在 20 世纪 20 年代和 30 年代起源于俄罗斯，荷兰和德国的运动。然后在 20 世纪 50 年代由瑞士的设计师带头发展并到达一定高度。

瑞士风格是现代主义风格。它是俄罗斯构成主义、艺术和手工艺、摄影、De Stijl（风格派）和包豪斯的高潮。您可以通过大胆的标题，鲜明的构图和极简主义的方法来识别瑞士风格。

《瑞士平面设计》的作者理查德霍利斯指出，与瑞士工业相关的技术（制药和机械工程）与制作广告和技术文档的平面设计师相匹配。

瑞士风格的先驱们将设计视为工业生产的一部分，并拼命寻求客观的视觉传播。

特别是他们的排版，看起来很工业。19世纪字体 Akzidenz-Grotesk 极大地影响了瑞士风格。

作为一种字体，它是朴素的、通用的和功能性的——现代主义者喜欢用字体表达一切。它还激发了著名字体 Helvetica（瑞士的，拉丁语写法）的诞生。

除了平面设计和排版外，瑞士风格还影响了建筑，绘画和雕塑。

那么，瑞士风格的特点是什么？

瑞士风格的特点和原则

瑞士风格由各种特点综合而成，包括：

• 网格

• 不对称的布局

• 无衬线字体排版

• 精确

• 几何抽象

• 简单

• 客观性

• 喜欢用照片

包豪斯的口头禅：形式遵循功能。

这种方法不只是关心美。相反，恰恰是当设计达到功能后会自然体现出美。设计应该是隐形的，设计师的主观性应该被压制，让内容自己说话。

瑞士风格的网页设计

瑞士风格不仅存在于海报和其他图形设计中。它可以用于网页设计。上面列表中的所有特征都可以轻松应用于网站。

Diogo Terror 在 Smashing Magazine 中写道，瑞士风格与创建用户友好界面目的一致。

他继续说“这种平面设计风格诞生于制度背景下。那个时代的大多数作品都是海报，邮票，机构排版识别系统，街道标志等形式。从这个意义上讲，这些艺术家不仅仅是利用自上而下的沟通，他们还创造了用户友好的界面”。

网格作为设计的基础

瑞士风格的视觉特征涉及将元素放置在数学构造的网格上以创建统一的构图。网格为设计提供了一种“限制”元素的结构。

网格应以清晰的方式呈现文本和视觉信息。字体选择应该是 sans-serif（无衬线体）并且与左边对齐。最终结果应该是不对称的设计（不同于欧洲古典的居中对齐排版）。

Josef Muller-Brockmann 是瑞士风格的先驱之一，也是“ 平面设计网格系统”一书的作者，他说：

“网格系统是一种辅助，而不是保证。它允许多种可能的用途，每个设计师都可以寻找适合他个人风格的解决方案。但是必须学会如何使用网格; 这是一门需要练习的艺术。”

设计师还有哪些其他方式可以将瑞士风格的风格带入网页设计？

在网页设计中引入瑞士风格的 4 种方式

1.使用更少的 UI 元素创建清晰度

瑞士设计的特点是页面上的元素应有其功能（不仅仅作为装饰存在）。每个元素都是有原因的。这种哲学让人想起极简主义。

但为什么你的设计应该是简约甚至是极简的？当您将网站设计减少到真正需要的唯一元素时，您就可以在设计中创建清晰度。

以上是瑞士风格的网站模板。有大标题，有明确的信息。我们的注意力不会跳跃，因为只有几种颜色：白色，蓝色和黑色。而且由于 UI 元素的数量有限，很清楚网站代表什么。相比之下，繁忙的设计会引起混乱，造成紧张。

设计是尝试传递信息，如果在其他竞争元素的噪声下无法听到该有的信息，那么用户将获得不太愉快的体验。

您应该向用户提供他们正在寻找的信息，而不是干扰他们。

产品设计师 Joshua Porter 写道，清晰度是界面设计中的第一位。他继续说，为了有效，人们必须认识到信息是什么，关心为什么要使用这些元素。

从本质上讲，清晰度激发了信心，并促使进一步使用。

2.限制您的字体选择

在瑞士风格网页设计方面，您的字体选择至关重要。瑞士风格也被称为国际主义字体排版风格。因此，某种程度上这种风格仰仗于字体。

字体是瑞士风格的主要设计元素。看看这期间的任何海报，你会看到大而粗的字体占据了大部分空间。

如果您希望您的网页设计体现瑞士风格，那么就该扔掉您的 Times New Romans，Garamonds 和 Caslons。不允许使用衬线字体。

我们来看看上面的网站。目标很明确：成为会员。我们关注它有两个原因。一个是尺寸，字体很大，信息很清晰。没有其他相互干扰的消息。

另一个是因为负空间（留白）有很多。这使得网站可以呼吸，更好地传达信息，并为用户提供一件可以关注的事情。

另一种瑞士风格的特征是文本左对齐，右侧则自然形成粗糙的锯齿状。文本左对齐，不要两端对齐，就像这样：

瑞士风格的典型字体：Montserrat，Open Sans，Lato 和 Helvetica。

3.建立排版层级

瑞士风格选用字体、布局合理。这源自于排版层级结构。

排版层级是一种通过以连贯的方式确定信息优先级来构建网站内容的方法。这意味着：首先是重要的东西，以后是不重要的东西。

要实现视觉层次结构，您需把玩以下：

• 尺寸

• 颜色

• 字重

• 位置

• 对比

• 字距

如果您想要学习视觉层级，请查看报纸的首页。

标题，副标题和正文副本是创建可视层次结构的方法。标题会吸引注意力（最重要的），副标题会提供额外的信息（不太重要），文本信息、正文（最不重要）。标题和副标题都用于吸引读者继续阅读正文。

我们来看看下面的这两段文字。一个有层次结构，一个没有。很清楚地看到排版层级的影响：

图片来源：Canva的Janie Kliever

人们如何在互联网上阅读？

在大多数情况下，人们以 F 模式阅读，特别是如果有很多文本的情况下。对于文本较少的网站，人们倾向于以 Z 模式阅读。这是因为他们正在扫描页面以获取与他们想要的信息。

这些是自然的眼球运动模式。考虑到这一点，您可以开始创建排版层次结构。如果您知道人们从左到右以 Z 模式阅读，那么您可以通过按正确的顺序放置内容来组织您的内容以吸引用户的注意力。

以这种方式组织您的内容结构。通过使用字体的大小，您可以传达给读者这个信息是重要还是不重要。它使得读者更高效地阅读您的内容。

4.相对于插画，更偏爱摄影

插图正在经历网页设计的繁荣。各种公司都使用定制插图为品牌增添魅力和个性。

但对于瑞士风格，这一切都与摄影有关。为什么？在当时设计师的心目中，摄影是一种表现现实的方式。这是一个更客观的媒介（记住，这些家伙喜欢客观性）而不是绘画或插图。

排版和摄影的结合是瑞士风格作为视觉传达手段的核心，如下图所示：

我们可以看到，它们一同起作用，两者互相促进。

瑞士风格的网页设计 - 后记

当我们回顾塑造了当今世界的那些设计运动并尝试重新创造我们自己的设计时，最终的结果可能是模仿。

作为设计师，最好找出这些设计运动（潮流）中的有效元素，把那些经得起时间的考验的原则用到您的设计中去。

在尝试重新创建瑞士风格时，最终结果也许会比较苍白，因为我们已经不在那个时代了。但请记住，谨慎（克制）地选择你的 UI 元素，多关注字体（Typography），它会让你的设计更棒！

p.s. 瑞士风格，无论它内在的设计哲学还是外在体现出的审美情趣，都体流露出一种冷静、克制、理性的气质。这大概是我们这个急躁、喧嚣的时代所缺的吧。（译者注）