我們都知道在網(wǎng)站或者APP里面，留白是個(gè)很好的設(shè)計(jì)元素。

利用空間是設(shè)計(jì)理論的原則之一，并幫助你創(chuàng)建它的視覺焦點(diǎn)。如果留白用得好?—?在設(shè)計(jì)里頁(yè)面沒有其他元素，它也不只是白色—?它是視覺焦點(diǎn)的關(guān)鍵。

留白是我們?cè)O(shè)計(jì)當(dāng)中不能被忽略的一種手法，這里有19個(gè)網(wǎng)站都是關(guān)于留白，任何一個(gè)都能幫助你更好了解它。

網(wǎng)頁(yè)設(shè)計(jì)中的留白

Melanie F

當(dāng)你打開頁(yè)面的時(shí)候，你可以很容易的發(fā)現(xiàn)，留白設(shè)計(jì)運(yùn)用的很不錯(cuò)。首頁(yè)頂部的標(biāo)題周圍有很多空白。

色彩繽紛的標(biāo)題背景把標(biāo)題和標(biāo)識(shí)都很好隔開，使得人們對(duì)這個(gè)頁(yè)面印象深刻。

Urban Influence

Urban Influence 是一家品牌中介，位于華盛頓州的西雅圖。它的招聘頁(yè)面非常有趣，因?yàn)樗鼪]有提供工作崗位或額外津貼列表。

反而，有每個(gè)模塊和對(duì)應(yīng)的位置。這些內(nèi)容的周圍運(yùn)用大量留白，讓人們更容易瀏覽，看起來(lái)也更像一個(gè)經(jīng)典的招聘頁(yè)面。

Trippeo

Trippeo是一個(gè)全新的費(fèi)用跟蹤APP。當(dāng)你第一次登陸這個(gè)頁(yè)面，有一個(gè)簡(jiǎn)單的Trippeo信息就會(huì)迎面而來(lái)，同時(shí)有一個(gè)箭頭指示你去閱讀。很少有人去這個(gè)網(wǎng)站，但是只要你往下看，你會(huì)注意到所有不同的元素都是分開的，尤其是你看到他們的不同部分。

We Are Adaptable

我們是Adaptable，是一家創(chuàng)新機(jī)構(gòu)，服務(wù)于不同領(lǐng)域，比如用戶體驗(yàn)或者電子商務(wù)。在他們網(wǎng)站滾動(dòng)的時(shí)候，你可以看到他們?cè)诓煌牡胤浇o予專業(yè)的留白。團(tuán)隊(duì)工作的重要照片下面都有一些簡(jiǎn)短的描述。

Gogoro

Gogoro是一個(gè)新的環(huán)保代步車網(wǎng)站。它的頁(yè)面很容易吸引人的眼球–?摩托車在前面和中間。很少有這種圍繞一個(gè)產(chǎn)品特殊介紹的網(wǎng)站。它使用這種留白方式肯定會(huì)讓人們更加關(guān)注到產(chǎn)品。

Over

服裝品牌使用簡(jiǎn)約的外觀,它做的非常棒。當(dāng)你進(jìn)入頁(yè)面，首先引起你注意的是一張簡(jiǎn)單的模特照片。當(dāng)然那里還有網(wǎng)站LOGO，導(dǎo)航和一些其他有用的鏈接，但是你的注意力一直圍繞著模特，并不會(huì)被其他信息轉(zhuǎn)移。

Mathais Sterner

Mathais Sterner的信息都是放在一起，這種方式讓內(nèi)容更加突出，它不喜歡拐彎抹角，它的信息是直接呈現(xiàn)的。頁(yè)面有三個(gè)主要文本部分和大量的留白來(lái)幫助你閱讀信息。

Dog Studio

在這里我們有個(gè)數(shù)字機(jī)構(gòu)，它們有一個(gè)簡(jiǎn)單的主頁(yè)，但是他們的留白運(yùn)用的很不錯(cuò)。當(dāng)他們?cè)跒g覽頁(yè)面的時(shí)候，留白的運(yùn)用讓訪問(wèn)者很容易抓住重要信息。不得不說(shuō)這個(gè)網(wǎng)站整體采用這種設(shè)計(jì)，簡(jiǎn)直美的不要不要的。

Thierry Ambraisse

當(dāng)你進(jìn)入這個(gè)網(wǎng)站，Thierry Ambraisse作為一個(gè)攝影師知道如何讓人眼前一亮。他用幻燈片背景展示他的工作。沒有什么信息在網(wǎng)頁(yè)的上面分散你的注意力。有一些元素在主頁(yè)上，比如導(dǎo)航，小的標(biāo)志在中間，但是他們都很恰當(dāng)?shù)碾[藏起來(lái)了。

VO2 Group

另外一個(gè)例子就是藝術(shù)的標(biāo)題，它是VO2 Group制作的。它們的主頁(yè)元素很少，只有彩色的大標(biāo)題.因?yàn)轫?yè)面沒有太多東西，所以不會(huì)讓人感覺雜亂，這都?xì)w功于留白的巧妙運(yùn)用。

While We’re Young

這個(gè)網(wǎng)站是對(duì)Noah Baumbach 新電影進(jìn)行有趣的介紹。它的大標(biāo)題里面包含演員列表。標(biāo)題確實(shí)很大,但不凌亂。

Spring Polar

這里有一個(gè)簡(jiǎn)短的登錄頁(yè)的程序。有些元素在頁(yè)面中位置和大小的不同，但都能在頁(yè)面中很容易的看到，這就是留白的重要性。

Blossom Type

這是一個(gè)有趣的網(wǎng)站，它有一個(gè)巨大的LOGO。當(dāng)你打開頁(yè)面的時(shí)候，它已經(jīng)在工作了，因?yàn)樗鼪]有太多額外可以點(diǎn)擊的二級(jí)頁(yè)面。但是網(wǎng)頁(yè)仍然有一些非常小的可以點(diǎn)擊并跳轉(zhuǎn)的的按鈕，所以整個(gè)頁(yè)面看起來(lái)都是大量的留白。

Quentin Morisseau

留白是圖形設(shè)計(jì)經(jīng)常使用的手法。不同的項(xiàng)目有可能是相互堆疊，相反，他們是分開的，創(chuàng)建出給人不同的體驗(yàn)

Stupid Studio

Stupid Studio的輪播是我喜歡這個(gè)網(wǎng)站最重要的原因。他們用創(chuàng)造性的方法解決了這個(gè)問(wèn)題。注意文字描述部分信息也沒有那么多。這就是為什么留白讓人很容易消化視覺信息。

Urban Walks

當(dāng)你上下滑動(dòng)看這個(gè)網(wǎng)站的時(shí)候，這里有很多元素讓你看。但是他們的方法是讓蘋果手機(jī)放在頁(yè)面的中間，頁(yè)面滾動(dòng)起來(lái)體驗(yàn)更好。

如果有很少的元素在蘋果手機(jī)周圍，頁(yè)面的中心信息就看起來(lái)更顯眼，反之則不突出主體。

Fiber Sensing

這樣一個(gè)驚人的網(wǎng)站，給人的第一印象就是：哇，好棒。我敢保證，如果那里有更多的元素放在那里，一定不會(huì)給人如此深刻的印象.

雜亂是一件非?？膳碌氖虑椤?/p>

Nua Bikes

假如你喜歡自行車，你將會(huì)很喜歡這個(gè)網(wǎng)站。在主頁(yè)里，你將會(huì)看到一個(gè)很有特色的自行車，伴隨著幻燈片，轉(zhuǎn)移著你的注意力。當(dāng)然，它的右邊有個(gè)導(dǎo)航，但是很小，不礙事。畢竟自行車是關(guān)注的焦點(diǎn)。

Alexander Engzell

創(chuàng)意總監(jiān)Alexander Engzell 使用非常有吸引力的硬刷字體元素來(lái)吸引你。?假如它周圍有其他元素，它就不會(huì)讓你這么印象深刻。反而，只有它這個(gè)元素在那里，而其他信息等著你向下翻。它這種留白方式非常聰明，另訪問(wèn)者印象深刻。

總結(jié)：

用留白做出的設(shè)計(jì)不容易讓人忘記。用它來(lái)創(chuàng)建一個(gè)重要的設(shè)計(jì)，通過(guò)它告訴用戶你的重點(diǎn) 。這19個(gè)網(wǎng)站都首先使用留白的方式。你是如何在你的項(xiàng)目里面使用留白?在評(píng)論中與我們分享你的想法。

原文鏈接：http://designmodo.com/web-design-whitespace/

作者：?Paula Borowska

原文鏈接：http://designmodo.com/web-design-whitespace/

譯者：設(shè)計(jì)師Minz（微信號(hào)Designer_Minz），一枚成長(zhǎng)中的設(shè)計(jì)師，點(diǎn)滴積累，人人都能成為設(shè)計(jì)師。

本文由 @設(shè)計(jì)師Minz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。