在設(shè)計中合理使用留白

我們都知道在網(wǎng)站或者APP里面,留白是個很好的設(shè)計元素。
利用空間是設(shè)計理論的原則之一,并幫助你創(chuàng)建它的視覺焦點。如果留白用得好?—?在設(shè)計里頁面沒有其他元素,它也不只是白色—?它是視覺焦點的關(guān)鍵。
留白是我們設(shè)計當(dāng)中不能被忽略的一種手法,這里有19個網(wǎng)站都是關(guān)于留白,任何一個都能幫助你更好了解它。
網(wǎng)頁設(shè)計中的留白
Melanie F
當(dāng)你打開頁面的時候,你可以很容易的發(fā)現(xiàn),留白設(shè)計運用的很不錯。首頁頂部的標(biāo)題周圍有很多空白。
色彩繽紛的標(biāo)題背景把標(biāo)題和標(biāo)識都很好隔開,使得人們對這個頁面印象深刻。
Urban Influence
Urban Influence 是一家品牌中介,位于華盛頓州的西雅圖。它的招聘頁面非常有趣,因為它沒有提供工作崗位或額外津貼列表。
反而,有每個模塊和對應(yīng)的位置。這些內(nèi)容的周圍運用大量留白,讓人們更容易瀏覽,看起來也更像一個經(jīng)典的招聘頁面。
Trippeo
Trippeo是一個全新的費用跟蹤APP。當(dāng)你第一次登陸這個頁面,有一個簡單的Trippeo信息就會迎面而來,同時有一個箭頭指示你去閱讀。很少有人去這個網(wǎng)站,但是只要你往下看,你會注意到所有不同的元素都是分開的,尤其是你看到他們的不同部分。
We Are Adaptable
我們是Adaptable,是一家創(chuàng)新機構(gòu),服務(wù)于不同領(lǐng)域,比如用戶體驗或者電子商務(wù)。在他們網(wǎng)站滾動的時候,你可以看到他們在不同的地方給予專業(yè)的留白。團隊工作的重要照片下面都有一些簡短的描述。
Gogoro
Gogoro是一個新的環(huán)保代步車網(wǎng)站。它的頁面很容易吸引人的眼球–?摩托車在前面和中間。很少有這種圍繞一個產(chǎn)品特殊介紹的網(wǎng)站。它使用這種留白方式肯定會讓人們更加關(guān)注到產(chǎn)品。
Over
服裝品牌使用簡約的外觀,它做的非常棒。當(dāng)你進入頁面,首先引起你注意的是一張簡單的模特照片。當(dāng)然那里還有網(wǎng)站LOGO,導(dǎo)航和一些其他有用的鏈接,但是你的注意力一直圍繞著模特,并不會被其他信息轉(zhuǎn)移。
Mathais Sterner
Mathais Sterner的信息都是放在一起,這種方式讓內(nèi)容更加突出,它不喜歡拐彎抹角,它的信息是直接呈現(xiàn)的。頁面有三個主要文本部分和大量的留白來幫助你閱讀信息。
Dog Studio
在這里我們有個數(shù)字機構(gòu),它們有一個簡單的主頁,但是他們的留白運用的很不錯。當(dāng)他們在瀏覽頁面的時候,留白的運用讓訪問者很容易抓住重要信息。不得不說這個網(wǎng)站整體采用這種設(shè)計,簡直美的不要不要的。
Thierry Ambraisse
當(dāng)你進入這個網(wǎng)站,Thierry Ambraisse作為一個攝影師知道如何讓人眼前一亮。他用幻燈片背景展示他的工作。沒有什么信息在網(wǎng)頁的上面分散你的注意力。有一些元素在主頁上,比如導(dǎo)航,小的標(biāo)志在中間,但是他們都很恰當(dāng)?shù)碾[藏起來了。
VO2 Group
另外一個例子就是藝術(shù)的標(biāo)題,它是VO2 Group制作的。它們的主頁元素很少,只有彩色的大標(biāo)題.因為頁面沒有太多東西,所以不會讓人感覺雜亂,這都歸功于留白的巧妙運用。
While We’re Young
這個網(wǎng)站是對Noah Baumbach 新電影進行有趣的介紹。它的大標(biāo)題里面包含演員列表。標(biāo)題確實很大,但不凌亂。
Spring Polar
這里有一個簡短的登錄頁的程序。有些元素在頁面中位置和大小的不同,但都能在頁面中很容易的看到,這就是留白的重要性。
Blossom Type
這是一個有趣的網(wǎng)站,它有一個巨大的LOGO。當(dāng)你打開頁面的時候,它已經(jīng)在工作了,因為它沒有太多額外可以點擊的二級頁面。但是網(wǎng)頁仍然有一些非常小的可以點擊并跳轉(zhuǎn)的的按鈕,所以整個頁面看起來都是大量的留白。
Quentin Morisseau
留白是圖形設(shè)計經(jīng)常使用的手法。不同的項目有可能是相互堆疊,相反,他們是分開的,創(chuàng)建出給人不同的體驗
Stupid Studio
Stupid Studio的輪播是我喜歡這個網(wǎng)站最重要的原因。他們用創(chuàng)造性的方法解決了這個問題。注意文字描述部分信息也沒有那么多。這就是為什么留白讓人很容易消化視覺信息。
Urban Walks
當(dāng)你上下滑動看這個網(wǎng)站的時候,這里有很多元素讓你看。但是他們的方法是讓蘋果手機放在頁面的中間,頁面滾動起來體驗更好。
如果有很少的元素在蘋果手機周圍,頁面的中心信息就看起來更顯眼,反之則不突出主體。
Fiber Sensing
這樣一個驚人的網(wǎng)站,給人的第一印象就是:哇,好棒。我敢保證,如果那里有更多的元素放在那里,一定不會給人如此深刻的印象.
雜亂是一件非??膳碌氖虑?。
Nua Bikes
假如你喜歡自行車,你將會很喜歡這個網(wǎng)站。在主頁里,你將會看到一個很有特色的自行車,伴隨著幻燈片,轉(zhuǎn)移著你的注意力。當(dāng)然,它的右邊有個導(dǎo)航,但是很小,不礙事。畢竟自行車是關(guān)注的焦點。
Alexander Engzell
創(chuàng)意總監(jiān)Alexander Engzell 使用非常有吸引力的硬刷字體元素來吸引你。?假如它周圍有其他元素,它就不會讓你這么印象深刻。反而,只有它這個元素在那里,而其他信息等著你向下翻。它這種留白方式非常聰明,另訪問者印象深刻。
總結(jié):
用留白做出的設(shè)計不容易讓人忘記。用它來創(chuàng)建一個重要的設(shè)計,通過它告訴用戶你的重點 。這19個網(wǎng)站都首先使用留白的方式。你是如何在你的項目里面使用留白?在評論中與我們分享你的想法。
原文鏈接:http://designmodo.com/web-design-whitespace/
作者:?Paula Borowska
原文鏈接:http://designmodo.com/web-design-whitespace/
譯者:設(shè)計師Minz(微信號Designer_Minz),一枚成長中的設(shè)計師,點滴積累,人人都能成為設(shè)計師。
本文由 @設(shè)計師Minz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
很詳細哈,很不錯
贊一個!
?
太好啦~
喜歡就好 ?