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

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

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

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

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

瑞士風(fēng)格的視覺特征涉及將元素放置在數(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)文本和視覺信息。字體選擇應(yīng)該是 sans-serif（無襯線體）并且與左邊對齊。最終結(jié)果應(yīng)該是不對稱的設(shè)計(jì)（不同于歐洲古典的居中對齊排版）。

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

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

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

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

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

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

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

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

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

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

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

2.限制您的字體選擇

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

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

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

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

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

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

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

3.建立排版層級

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

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

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

尺寸

顏色

字重

位置

對比

字距

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

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

4.相對于插畫，更偏愛攝影

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

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

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

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

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

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

新聞標(biāo)題：瑞士風(fēng)格的網(wǎng)頁設(shè)計(jì)應(yīng)該是什么樣的
網(wǎng)頁URL：http://vcdvsql.cn/article10/edsodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、App設(shè)計(jì)、企業(yè)建站、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)