瑞士風格的網頁設計

瑞士風格不僅存在於海報和其他圖形設計中。它可以用於網頁設計。 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),它會讓您的設計更棒!