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

5 評論 4747 瀏覽 146 收藏 11 分鐘

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

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

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

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

Melanie F

1

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

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

Urban Influence

2

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

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

Trippeo

3

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

We Are Adaptable

4

我們是Adaptable,是一家創(chuàng)新機構(gòu),服務(wù)于不同領(lǐng)域,比如用戶體驗或者電子商務(wù)。在他們網(wǎng)站滾動的時候,你可以看到他們在不同的地方給予專業(yè)的留白。團隊工作的重要照片下面都有一些簡短的描述。

Gogoro

5

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

Over

6

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

Mathais Sterner

7

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

Dog Studio

8

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

Thierry Ambraisse

9

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

VO2 Group

10

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

While We’re Young

11

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

Spring Polar

12

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

Blossom Type

13

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

Quentin Morisseau

14

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

Stupid Studio

15

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

Urban Walks

16

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

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

Fiber Sensing

17

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

雜亂是一件非??膳碌氖虑?。

Nua Bikes

18

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

Alexander Engzell

19

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

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

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

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

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

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

      來自四川 回復(fù)