瑞士风格的网页设计

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了大冶免费建站欢迎大家使用！

瑞士风格不仅存在于海报和其他图形设计中。它可以用于网页设计。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.建立排版层级

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

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

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

尺寸

颜色

字重

位置

对比

字距

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

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

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

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

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

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

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

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

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

文章名称：瑞士风格的网页设计应该是什么样的
分享地址：http://scyanting.com/article/edsodo.html