亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 建站知識(shí)
白色空間在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

2017-05-04

2918

我想,每當(dāng)你想到有關(guān)空白利用的網(wǎng)頁設(shè)計(jì)中時(shí),Apple或者Google這樣的“先驅(qū)”可能是你首先會(huì)考慮到的范例。雖然這些公司在它們的設(shè)計(jì)中使用白色空間這一點(diǎn)做得很好,但還有很多其他方法可以充分利用空間,而且它并不總是白色的。

可以毫不夸張的說,白色空間是你的網(wǎng)站設(shè)計(jì)計(jì)劃的重要組成部分?,F(xiàn)在由縱天做網(wǎng)站公司來看看空間作為一種設(shè)計(jì)工具的重要性,以及通過列舉五個(gè)充分利用空白的網(wǎng)站作為說明案例,以幫助你更全面和直觀的認(rèn)識(shí)空間(你會(huì)發(fā)現(xiàn),有些根本就不是白色的)。


Ⅰ.初識(shí)白色空間

白色空間是指那些在網(wǎng)頁設(shè)計(jì)中不受設(shè)計(jì)元素影響的任何部分。這包括圖形或圖像之間,文本行之間的空間以及邊距等。設(shè)計(jì)元素內(nèi)的開放空間,例如FedEx標(biāo)志內(nèi)“隱藏”的箭頭被稱為負(fù)空間,盡管交換術(shù)語變得相當(dāng)常見。
白色空間很之所以如此重要,是因?yàn)樗诖龠M(jìn)網(wǎng)站設(shè)計(jì)整體可讀性和組織方面發(fā)揮著重要的作用。

· 使用戶更容易瀏覽和閱讀文本內(nèi)容;

· 幫助創(chuàng)建類似元素的自然分組;

· 優(yōu)先考慮設(shè)計(jì)中的元素,例如號(hào)召性用語,搜索或?qū)Ш剑?br/>
· 創(chuàng)造和諧與復(fù)雜的感覺;

· 建立平衡和視覺層次;

· 有助于使大塊文本更容易消化(更有可能被閱讀);

· 以合乎邏輯的方式引導(dǎo)用戶瀏覽和查看整體設(shè)計(jì)。


Ⅱ.空間不必非得是“白”的

在網(wǎng)頁設(shè)計(jì)中,可能對于空白需要被重新定義一下,簡單的說:白色的空間不一定是白色的(聽起來是不是很拗口)。

白色空間可以是任何的純色,或背景模糊,甚至有點(diǎn)動(dòng)效。它們之間的共同因素是空間還是那個(gè)空間。它不包含其他的內(nèi)容或設(shè)計(jì)元素。這樣,如果用戶看過去或遠(yuǎn)離它,則不會(huì)丟失任何信息。

關(guān)鍵在于,所有的空白實(shí)際上都可以是白色的,但是設(shè)計(jì)者選擇以另一種方式創(chuàng)建視覺效果,同時(shí)仍然使用空間的原理。

白色空間可以出現(xiàn)在網(wǎng)站設(shè)計(jì)中的任何部分,并且應(yīng)該作為一種工具來提高從頁面頂部到底部和整個(gè)輔助頁面的可用性和視覺規(guī)劃。一些優(yōu)秀的設(shè)計(jì)模式會(huì)一直使用白色空間來幫助用戶更容易地將視覺效果消化掉。


示例1:U+Design

U+Design在其網(wǎng)站設(shè)計(jì)的文本元素中,通過在黑色畫布上字面上顛倒空間的概念,營造出大量的開放性元素。圖像位居于較輕的空間中,產(chǎn)生陰陽效應(yīng),雖然空間在技術(shù)上都不是采用白色的,但它們都是空白的。
空間的應(yīng)用在滾動(dòng)效果的配合下同樣好用,對于那些擁有足夠的元素和幾何的空間和設(shè)計(jì)元素,我們鼓勵(lì)滾動(dòng)。
如果你正在尋找如何創(chuàng)建可讀性文本的課程,請查看此網(wǎng)頁設(shè)計(jì)。雖然使用了多種文本樣式和顏色,但一切都是可讀的,文本放置的方式和大小提供了良好的層次結(jié)構(gòu)。


示例2:Emark

Emark在其網(wǎng)站設(shè)計(jì)中,使用剪切和幾何圖案來創(chuàng)建空白并增加圖像和文字的視覺感。空間是白色和彩色的混合形狀和線條,有助于提供視覺流動(dòng)和間接的起到引導(dǎo)作用。
該網(wǎng)頁設(shè)計(jì)還使用包含大量白色空間的白色背景色塊。明亮的顏色和空間組合創(chuàng)建了獨(dú)特的文本容器,將其作為可點(diǎn)擊的動(dòng)作調(diào)用可以有效的提高轉(zhuǎn)化率。彩色的空白區(qū)域,用戶可以很快知道這些塊中的每一個(gè)都被設(shè)計(jì)為點(diǎn)擊。
整個(gè)設(shè)計(jì)使用大量填充,并且在文本元素的行間距周圍強(qiáng)調(diào)了空白,以增強(qiáng)可讀性(這是目前的網(wǎng)頁設(shè)計(jì)趨勢之一,我們可能會(huì)看到移動(dòng)文本間距概念開始更多的進(jìn)入基于桌面的網(wǎng)站設(shè)計(jì)中)。


例3:Joke de Winter

Joke de Winter在他的網(wǎng)站背景中使用模糊的黑白照片作為白色空間的基礎(chǔ)。在外觀上,通過一種更現(xiàn)代化的分層設(shè)計(jì),是的整體的設(shè)計(jì)具有獨(dú)特和流暢的感覺。
鼠標(biāo)滾動(dòng)到下面,文本元素周圍使用更多的空白區(qū)域,具有超大的邊距,以強(qiáng)調(diào)特定的文本元素。設(shè)計(jì)中的白色空間在白色和灰色之間交替,就像前面的例子,這些包括我們經(jīng)常在文字之間看到的更多的間距。
在整個(gè)網(wǎng)站設(shè)計(jì)中,所有的邊緣都有不對稱的風(fēng)格,空間充足。在不平衡中創(chuàng)建“平衡”是和諧的視覺體驗(yàn),并能創(chuàng)造用戶瀏覽的興趣點(diǎn)。


例4:Astronauts Wanted

Astronauts Wanted在對其網(wǎng)頁設(shè)計(jì)規(guī)劃時(shí)想要的快節(jié)奏的動(dòng)作可能不是在考慮空白時(shí)首先想到的。但是,注意看視頻上的標(biāo)志、文字和其他元素,它們就使用了空間,并且能夠有效的工作。重要的是,上面的滾動(dòng)信息很容易被閱讀,它的中心兩邊是充足的空間和(用負(fù)空間制作的標(biāo)志有助于注意整體效果)。
在靜止圖像之上,帶有文本塊的滾動(dòng)使用相同的概念。該空間設(shè)計(jì)精美,設(shè)計(jì)中唯一實(shí)際的白色元素是文本本身。


示例5:Le Farfalle

Le Farfalle在主視覺圖中使用了一個(gè)很簡單的切口,跟前面的例子一樣,但是當(dāng)你滾動(dòng)頁面的時(shí)候,通過用大的交替空間更換圖像時(shí),會(huì)出現(xiàn)最令人印象深刻的空間變化。
這種風(fēng)格使用戶可以輕松地從圖像轉(zhuǎn)移到文本上,然后通過所有內(nèi)容向后移動(dòng)頁面。什么可以使一個(gè)沉重的設(shè)計(jì)變得輕巧,易于閱讀呢?無外乎上面的這種形式了。
此外,設(shè)計(jì)使用廣泛的空白和填充,使每個(gè)元素都有自己的空間。這種空間的使用創(chuàng)造出與餐廳氛圍相匹配的復(fù)雜美學(xué)。


總結(jié)

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


本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:縱天,做網(wǎng)站公司, 企業(yè)網(wǎng)頁制作, 專業(yè)網(wǎng)站制作, 網(wǎng)頁設(shè)計(jì)

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護(hù)中,請放心填寫
關(guān)閉
免費(fèi)獲取方案