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