瑞士風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了大冶免費(fèi)建站歡迎大家使用！

瑞士風(fēng)格不僅存在于海報(bào)和其他圖形設(shè)計(jì)中。它可以用于網(wǎng)頁(yè)設(shè)計(jì)。Diogo Terror 在 Smashing Magazine 中寫(xiě)道，瑞士風(fēng)格與創(chuàng)建用戶友好界面目的一致。

他繼續(xù)說(shuō)“這種平面設(shè)計(jì)風(fēng)格誕生于制度背景下。那個(gè)時(shí)代的大多數(shù)作品都是海報(bào)，郵票，機(jī)構(gòu)排版識(shí)別系統(tǒng)，街道標(biāo)志等形式。從這個(gè)意義上講，這些藝術(shù)家不僅僅是利用自上而下的溝通，他們還創(chuàng)造了用戶友好的界面”。

網(wǎng)格作為設(shè)計(jì)的基礎(chǔ)

瑞士風(fēng)格的視覺(jué)特征涉及將元素放置在數(shù)學(xué)構(gòu)造的網(wǎng)格上以創(chuàng)建統(tǒng)一的構(gòu)圖。網(wǎng)格為設(shè)計(jì)提供了一種“限制”元素的結(jié)構(gòu)。

網(wǎng)格應(yīng)以清晰的方式呈現(xiàn)文本和視覺(jué)信息。字體選擇應(yīng)該是 sans-serif（無(wú)襯線體）并且與左邊對(duì)齊。最終結(jié)果應(yīng)該是不對(duì)稱的設(shè)計(jì)（不同于歐洲古典的居中對(duì)齊排版）。

Josef Muller-Brockmann 是瑞士風(fēng)格的先驅(qū)之一，也是“ 平面設(shè)計(jì)網(wǎng)格系統(tǒng)”一書(shū)的作者，他說(shuō)：“網(wǎng)格系統(tǒng)是一種輔助，而不是保證。它允許多種可能的用途，每個(gè)設(shè)計(jì)師都可以尋找適合他個(gè)人風(fēng)格的解決方案。但是必須學(xué)會(huì)如何使用網(wǎng)格; 這是一門(mén)需要練習(xí)的藝術(shù)?！?

設(shè)計(jì)師還有哪些其他方式可以將瑞士風(fēng)格的風(fēng)格帶入網(wǎng)頁(yè)設(shè)計(jì)？

在網(wǎng)頁(yè)設(shè)計(jì)中引入瑞士風(fēng)格的 4 種方式

1.使用更少的 UI 元素創(chuàng)建清晰度

瑞士設(shè)計(jì)的特點(diǎn)是頁(yè)面上的元素應(yīng)有其功能（不僅僅作為裝飾存在）。每個(gè)元素都是有原因的。這種哲學(xué)讓人想起極簡(jiǎn)主義。

但為什么你的設(shè)計(jì)應(yīng)該是簡(jiǎn)約甚至是極簡(jiǎn)的？當(dāng)您將網(wǎng)站設(shè)計(jì)減少到真正需要的唯一元素時(shí)，您就可以在設(shè)計(jì)中創(chuàng)建清晰度。

以上是瑞士風(fēng)格的網(wǎng)站模板。有大標(biāo)題，有明確的信息。我們的注意力不會(huì)跳躍，因?yàn)橹挥袔追N顏色：白色，藍(lán)色和黑色。而且由于 UI 元素的數(shù)量有限，很清楚網(wǎng)站代表什么。相比之下，繁忙的設(shè)計(jì)會(huì)引起混亂，造成緊張。

設(shè)計(jì)是嘗試傳遞信息，如果在其他競(jìng)爭(zhēng)元素的噪聲下無(wú)法聽(tīng)到該有的信息，那么用戶將獲得不太愉快的體驗(yàn)。

您應(yīng)該向用戶提供他們正在尋找的信息，而不是干擾他們。

產(chǎn)品設(shè)計(jì)師 Joshua Porter 寫(xiě)道，清晰度是界面設(shè)計(jì)中的第一位。他繼續(xù)說(shuō)，為了有效，人們必須認(rèn)識(shí)到信息是什么，關(guān)心為什么要使用這些元素。

從本質(zhì)上講，清晰度激發(fā)了信心，并促使進(jìn)一步使用。

2.限制您的字體選擇

在瑞士風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)方面，您的字體選擇至關(guān)重要。瑞士風(fēng)格也被稱為國(guó)際主義字體排版風(fēng)格。因此，某種程度上這種風(fēng)格仰仗于字體。

字體是瑞士風(fēng)格的主要設(shè)計(jì)元素?？纯催@期間的任何海報(bào)，你會(huì)看到大而粗的字體占據(jù)了大部分空間。

如果您希望您的網(wǎng)頁(yè)設(shè)計(jì)體現(xiàn)瑞士風(fēng)格，那么就該扔掉您的 Times New Romans，Garamonds 和 Caslons。不允許使用襯線字體。

我們來(lái)看看上面的網(wǎng)站。目標(biāo)很明確：成為會(huì)員。我們關(guān)注它有兩個(gè)原因。一個(gè)是尺寸，字體很大，信息很清晰。沒(méi)有其他相互干擾的消息。

另一個(gè)是因?yàn)樨?fù)空間（留白）有很多。這使得網(wǎng)站可以呼吸，更好地傳達(dá)信息，并為用戶提供一件可以關(guān)注的事情。

另一種瑞士風(fēng)格的特征是文本左對(duì)齊，右側(cè)則自然形成粗糙的鋸齒狀。文本左對(duì)齊，不要兩端對(duì)齊，就像這樣：

瑞士風(fēng)格的典型字體：Montserrat，Open Sans，Lato 和 Helvetica。

3.建立排版層級(jí)

瑞士風(fēng)格選用字體、布局合理。這源自于排版層級(jí)結(jié)構(gòu)。

排版層級(jí)是一種通過(guò)以連貫的方式確定信息優(yōu)先級(jí)來(lái)構(gòu)建網(wǎng)站內(nèi)容的方法。這意味著：首先是重要的東西，以后是不重要的東西。

要實(shí)現(xiàn)視覺(jué)層次結(jié)構(gòu)，您需把玩以下：

尺寸

顏色

字重

位置

對(duì)比

字距

如果您想要學(xué)習(xí)視覺(jué)層級(jí)，請(qǐng)查看報(bào)紙的首頁(yè)。

標(biāo)題，副標(biāo)題和正文副本是創(chuàng)建可視層次結(jié)構(gòu)的方法。標(biāo)題會(huì)吸引注意力（重要的），副標(biāo)題會(huì)提供額外的信息（不太重要），文本信息、正文（最不重要）。標(biāo)題和副標(biāo)題都用于吸引讀者繼續(xù)閱讀正文。

4.相對(duì)于插畫(huà)，更偏愛(ài)攝影

插圖正在經(jīng)歷網(wǎng)頁(yè)設(shè)計(jì)的繁榮。各種公司都使用定制插圖為品牌增添魅力和個(gè)性。

但對(duì)于瑞士風(fēng)格，這一切都與攝影有關(guān)。為什么？在當(dāng)時(shí)設(shè)計(jì)師的心目中，攝影是一種表現(xiàn)現(xiàn)實(shí)的方式。這是一個(gè)更客觀的媒介（記住，這些家伙喜歡客觀性）而不是繪畫(huà)或插圖。

瑞士風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì) - 后記

當(dāng)我們回顧塑造了當(dāng)今世界的那些設(shè)計(jì)運(yùn)動(dòng)并嘗試重新創(chuàng)造我們自己的設(shè)計(jì)時(shí)，最終的結(jié)果可能是模仿。

作為設(shè)計(jì)師，最好找出這些設(shè)計(jì)運(yùn)動(dòng)（潮流）中的有效元素，把那些經(jīng)得起時(shí)間的考驗(yàn)的原則用到您的設(shè)計(jì)中去。

在嘗試重新創(chuàng)建瑞士風(fēng)格時(shí)，最終結(jié)果也許會(huì)比較蒼白，因?yàn)槲覀円呀?jīng)不在那個(gè)時(shí)代了。但請(qǐng)記住，謹(jǐn)慎（克制）地選擇你的 UI 元素，多關(guān)注字體（Typography），它會(huì)讓你的設(shè)計(jì)更棒！