瑞士風格的網頁設計

瑞士風格不僅存在于海報和其他圖形設計中。它可以用于網頁設計。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），它會讓你的設計更棒！