白色空間在網(wǎng)頁設(shè)計中的應(yīng)用

2022-06-30    分類: 網(wǎng)站建設(shè)

我想,每當(dāng)你想到有關(guān)空白利用的網(wǎng)頁設(shè)計中時,Apple或者Google這樣的“先驅(qū)”可能是你首先會考慮到的范例。雖然這些公司在它們的設(shè)計中使用白色空間這一點做得很好,但還有很多其他方法可以充分利用空間,而且它并不總是白色的。
可以毫不夸張的說,白色空間是你的網(wǎng)站設(shè)計計劃的重要組成部分?,F(xiàn)在由創(chuàng)新互聯(lián)做網(wǎng)站公司來看看空間作為一種設(shè)計工具的重要性,以及通過列舉五個充分利用空白的網(wǎng)站作為說明案例,以幫助你更全面和直觀的認識空間(你會發(fā)現(xiàn),有些根本就不是白色的)。
Ⅰ.初識白色空間
白色空間是指那些在網(wǎng)頁設(shè)計中不受設(shè)計元素影響的任何部分。這包括圖形或圖像之間,文本行之間的空間以及邊距等。設(shè)計元素內(nèi)的開放空間,例如FedEx標(biāo)志內(nèi)“隱藏”的箭頭被稱為負空間,盡管交換術(shù)語變得相當(dāng)常見。
白色空間很之所以如此重要,是因為它在促進網(wǎng)站設(shè)計整體可讀性和組織方面發(fā)揮著重要的作用。
· 使用戶更容易瀏覽和閱讀文本內(nèi)容;
· 幫助創(chuàng)建類似元素的自然分組;
· 優(yōu)先考慮設(shè)計中的元素,例如號召性用語,搜索或?qū)Ш剑?br />· 創(chuàng)造和諧與復(fù)雜的感覺;
· 建立平衡和視覺層次;
· 有助于使大塊文本更容易消化(更有可能被閱讀);
· 以合乎邏輯的方式引導(dǎo)用戶瀏覽和查看整體設(shè)計。
Ⅱ.空間不必非得是“白”的
在網(wǎng)頁設(shè)計中,可能對于空白需要被重新定義一下,簡單的說:白色的空間不一定是白色的(聽起來是不是很拗口)。
白色空間可以是任何的純色,或背景模糊,甚至有點動效。它們之間的共同因素是空間還是那個空間。它不包含其他的內(nèi)容或設(shè)計元素。這樣,如果用戶看過去或遠離它,則不會丟失任何信息。
關(guān)鍵在于,所有的空白實際上都可以是白色的,但是設(shè)計者選擇以另一種方式創(chuàng)建視覺效果,同時仍然使用空間的原理。
白色空間可以出現(xiàn)在網(wǎng)站設(shè)計中的任何部分,并且應(yīng)該作為一種工具來提高從頁面頂部到底部和整個輔助頁面的可用性和視覺規(guī)劃。一些優(yōu)秀的設(shè)計模式會一直使用白色空間來幫助用戶更容易地將視覺效果消化掉。
示例1:U+Design
U+Design在其網(wǎng)站設(shè)計的文本元素中,通過在黑色畫布上字面上顛倒空間的概念,營造出大量的開放性元素。圖像位居于較輕的空間中,產(chǎn)生陰陽效應(yīng),雖然空間在技術(shù)上都不是采用白色的,但它們都是空白的。
空間的應(yīng)用在滾動效果的配合下同樣好用,對于那些擁有足夠的元素和幾何的空間和設(shè)計元素,我們鼓勵滾動。
如果你正在尋找如何創(chuàng)建可讀性文本的課程,請查看此網(wǎng)頁設(shè)計。雖然使用了多種文本樣式和顏色,但一切都是可讀的,文本放置的方式和大小提供了良好的層次結(jié)構(gòu)。
示例2:Emark
Emark在其網(wǎng)站設(shè)計中,使用剪切和幾何圖案來創(chuàng)建空白并增加圖像和文字的視覺感??臻g是白色和彩色的混合形狀和線條,有助于提供視覺流動和間接的起到引導(dǎo)作用。
該網(wǎng)頁設(shè)計還使用包含大量白色空間的白色背景色塊。明亮的顏色和空間組合創(chuàng)建了獨特的文本容器,將其作為可點擊的動作調(diào)用可以有效的提高轉(zhuǎn)化率。彩色的空白區(qū)域,用戶可以很快知道這些塊中的每一個都被設(shè)計為點擊。
整個設(shè)計使用大量填充,并且在文本元素的行間距周圍強調(diào)了空白,以增強可讀性(這是目前的網(wǎng)頁設(shè)計趨勢之一,我們可能會看到移動文本間距概念開始更多的進入基于桌面的網(wǎng)站設(shè)計中)。
例3:Joke de Winter
Joke de Winter在他的網(wǎng)站背景中使用模糊的黑白照片作為白色空間的基礎(chǔ)。在外觀上,通過一種更現(xiàn)代化的分層設(shè)計,是的整體的設(shè)計具有獨特和流暢的感覺。
鼠標(biāo)滾動到下面,文本元素周圍使用更多的空白區(qū)域,具有超大的邊距,以強調(diào)特定的文本元素。設(shè)計中的白色空間在白色和灰色之間交替,就像前面的例子,這些包括我們經(jīng)常在文字之間看到的更多的間距。
在整個網(wǎng)站設(shè)計中,所有的邊緣都有不對稱的風(fēng)格,空間充足。在不平衡中創(chuàng)建“平衡”是和諧的視覺體驗,并能創(chuàng)造用戶瀏覽的興趣點。
例4:Astronauts Wanted
Astronauts Wanted在對其網(wǎng)頁設(shè)計規(guī)劃時想要的快節(jié)奏的動作可能不是在考慮空白時首先想到的。但是,注意看視頻上的標(biāo)志、文字和其他元素,它們就使用了空間,并且能夠有效的工作。重要的是,上面的滾動信息很容易被閱讀,它的中心兩邊是充足的空間和(用負空間制作的標(biāo)志有助于注意整體效果)。
在靜止圖像之上,帶有文本塊的滾動使用相同的概念。該空間設(shè)計精美,設(shè)計中唯一實際的白色元素是文本本身。
示例5:Le Farfalle
Le Farfalle在主視覺圖中使用了一個很簡單的切口,跟前面的例子一樣,但是當(dāng)你滾動頁面的時候,通過用大的交替空間更換圖像時,會出現(xiàn)最令人印象深刻的空間變化。
這種風(fēng)格使用戶可以輕松地從圖像轉(zhuǎn)移到文本上,然后通過所有內(nèi)容向后移動頁面。什么可以使一個沉重的設(shè)計變得輕巧,易于閱讀呢?無外乎上面的這種形式了。
此外,設(shè)計使用廣泛的空白和填充,使每個元素都有自己的空間。這種空間的使用創(chuàng)造出與餐廳氛圍相匹配的復(fù)雜美學(xué)。
總結(jié)

白色的空間不一定是白色的,不要讓自己陷入陷阱。你完全可以通過一些例子,使用空間與顏色和圖像和視頻作為一個起始點,開始你的創(chuàng)造力。


本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:創(chuàng)新互聯(lián),做網(wǎng)站公司, 企業(yè)網(wǎng)頁制作, 專業(yè)網(wǎng)站制作, 網(wǎng)頁設(shè)計

標(biāo)題名稱:白色空間在網(wǎng)頁設(shè)計中的應(yīng)用
轉(zhuǎn)載源于:http://www.muchs.cn/news36/173436.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、App開發(fā)、建站公司、軟件開發(fā)面包屑導(dǎo)航、動態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司