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

我想，每當(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)在由創(chuàng)新互聯(liá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ì)中，可能對(duì)于空白需要被重新定義一下，簡單的說：白色的空間不一定是白色的（聽起來是不是很拗口）。
白色空間可以是任何的純色，或背景模糊，甚至有點(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)效果的配合下同樣好用，對(duì)于那些擁有足夠的元素和幾何的空間和設(shè)計(jì)元素，我們鼓勵(lì)滾動(dòng)。
如果你正在尋找如何創(chuàng)建可讀性文本的課程，請(qǐng)查看此網(wǎng)頁設(shè)計(jì)。雖然使用了多種文本樣式和顏色，但一切都是可讀的，文本放置的方式和大小提供了良好的層次結(jié)構(gòu)。
示例2：Emark
Emark在其網(wǎng)站設(shè)計(jì)中，使用剪切和幾何圖案來創(chuàng)建空白并增加圖像和文字的視覺感?？臻g是白色和彩色的混合形狀和線條，有助于提供視覺流動(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ì)趨勢(shì)之一，我們可能會(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ì)中，所有的邊緣都有不對(duì)稱的風(fēng)格，空間充足。在不平衡中創(chuàng)建“平衡”是和諧的視覺體驗(yàn)，并能創(chuàng)造用戶瀏覽的興趣點(diǎn)。
例4：Astronauts Wanted
Astronauts Wanted在對(duì)其網(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)造力。

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

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

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

廣告

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