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

5 評(píng)論 4613 瀏覽 146 收藏 11 分鐘

我們都知道在網(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

1

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

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

Urban Influence

2

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

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

Trippeo

3

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

We Are Adaptable

4

我們是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

5

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

Over

6

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

Mathais Sterner

7

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

Dog Studio

8

在這里我們有個(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

9

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

VO2 Group

10

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

While We’re Young

11

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

Spring Polar

12

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

Blossom Type

13

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

Quentin Morisseau

14

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

Stupid Studio

15

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

Urban Walks

16

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

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

Fiber Sensing

17

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

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

Nua Bikes

18

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

Alexander Engzell

19

創(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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很詳細(xì)哈,很不錯(cuò)

    來自福建 回復(fù)
  2. 贊一個(gè)!

    來自上海 回復(fù)
    1. ?

      來自四川 回復(fù)
  3. 太好啦~

    來自廣東 回復(fù)
    1. 喜歡就好 ?

      來自四川 回復(fù)