越來(lái)越多的網(wǎng)頁(yè)內(nèi)容開(kāi)始采取別具一格的排版設(shè)計(jì)，其中最典型的一種，就是讓文字布局橫跨不同的元素所處的區(qū)域，讓排版和其他的模塊共享空間。這種設(shè)計(jì)理念并不復(fù)雜，而這種趨勢(shì)也在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域越來(lái)越熱。

　　這種設(shè)計(jì)手法非常容易識(shí)別，文字排版部分通常會(huì)從頁(yè)面的一個(gè)區(qū)域，延伸到另外一個(gè)模塊所在的區(qū)域，比如某個(gè)圖片上的文字內(nèi)容延伸到另外一個(gè)圖片或者彩色區(qū)塊當(dāng)中，共享了其他組件的空間。這種設(shè)計(jì)所牽涉到的頁(yè)面圖層的實(shí)現(xiàn)方式會(huì)很有意思，因?yàn)樗梢猿休d很多富有創(chuàng)造力的設(shè)計(jì)。所以，接下來(lái)昆山網(wǎng)絡(luò)公司和大家一起來(lái)看看一些典型的設(shè)計(jì)手法：

　　空間共享式文字排版

　　這種空間共享式排版是一種相當(dāng)容易識(shí)別的設(shè)計(jì)手法。實(shí)際上，在一些海報(bào)和明信片設(shè)計(jì)中，也可以采用這樣的設(shè)計(jì)。它的最典型的特征是，文字或者相似的元素橫跨多個(gè)圖層、模塊或者區(qū)塊。

　　從廣泛意義上來(lái)講，這個(gè)設(shè)計(jì)手法的核心概念是某個(gè)元素和其他的元素共享空間，橫跨不同區(qū)域，元素相互疊加。這種設(shè)計(jì)常常被視作為分屏設(shè)計(jì)的一種延伸。

　　許多跨區(qū)域的排版設(shè)計(jì)都非常明顯，但是也有比較微妙的，比如上面的網(wǎng)頁(yè) Hometown Trolley 。右側(cè)文本部分伸出一條線，將用戶(hù)視覺(jué)引導(dǎo)到左側(cè)的圖像當(dāng)中，如果你仔細(xì)觀察，還會(huì)發(fā)現(xiàn)左邊汽車(chē)的后視鏡從背景中突出并延伸到右側(cè)的文本區(qū)塊當(dāng)中來(lái)。

　　如果設(shè)計(jì)得合理的話，這種設(shè)計(jì)手法能夠借助元素區(qū)域的疊加，有效的幫助用戶(hù)更好地了解內(nèi)容和信息。共享的區(qū)域成為了不同區(qū)塊和不同信息的連接。這種設(shè)計(jì)的另外一個(gè)好處在于，文本內(nèi)容可以更好的被承載，共享的模式就像是兩個(gè)相互連接的巨型卡片模塊。

　　漂亮的排版和精美的圖片總能相輔相成。許多設(shè)計(jì)師都喜歡在使用共享空間式排版的時(shí)候，采用垂直定向的圖片（不過(guò)由于各種屏幕的高寬比不同，這種技術(shù)使用的比例并不高。）。

　　空間共享式的排版設(shè)計(jì)能夠?qū)⒏鞣N元素的屬性淋漓盡致地呈現(xiàn)出來(lái)，還能確保整體設(shè)計(jì)在視覺(jué)上的愉悅感。文本字母可以橫跨圖片和留白，也可以在各個(gè)區(qū)域單獨(dú)地使用，合起來(lái)看和分開(kāi)看都含有意義，就像視覺(jué)化的“雙關(guān)”。

　　而上面的 Square Apartments 就是這樣的設(shè)計(jì)，標(biāo)題無(wú)論是合起來(lái)看，還是分開(kāi)看，都具有意義。

　　這樣的設(shè)計(jì)有一個(gè)好處，由于文本需要跨越不同的區(qū)域，配色不用保持完全的統(tǒng)一，根據(jù)文字周?chē)谋尘吧M(jìn)行調(diào)整，這樣的設(shè)計(jì)簡(jiǎn)單而容易上手。難的地方在于文本內(nèi)容的分拆和合并的狀態(tài)下，表達(dá)的含義是否都合適。

　　大膽的字體選取

　　有趣而又獨(dú)樹(shù)一幟的字體，在跨越不同模塊的空間共享式布局下，能帶來(lái)獨(dú)特的視覺(jué)體驗(yàn)。這樣的字體通常本身就可以很好地發(fā)揮強(qiáng)調(diào)的作用，即使橫跨多個(gè)不同的區(qū)域，也不會(huì)降低其作為焦點(diǎn)的地位。

　　如果你想沿著這個(gè)思路來(lái)設(shè)計(jì)，最好的做法是讓標(biāo)題盡量長(zhǎng)一點(diǎn)，選取足夠亮眼的字體，和字體色彩有足夠?qū)Ρ榷鹊膱D片和文本背景色，確保文本的良好可讀性。

　　可讀性是這種設(shè)計(jì)手法中最重要的點(diǎn)，通常情況下，文本部分會(huì)選擇黑色或者白色的字體，雖然許多用戶(hù)看起來(lái)可能會(huì)覺(jué)得簡(jiǎn)單，但是要平衡圖片、背景和文本三個(gè)部分的配色體系，實(shí)際上還是挺麻煩的。

　　色塊和文本的搭配

　　圖片和文本的搭配是許多設(shè)計(jì)師的首選搭配方案，但是如果沒(méi)有圖片也同樣可以實(shí)現(xiàn)空間共享式的排版設(shè)計(jì)，使用色塊、幾何圖形和文本，是一樣的道理。

　　上方 Startup Lab 的網(wǎng)站就將色塊和文本以極其時(shí)尚的方式搭配起來(lái)，文字橫跨白色的背景和不同的色塊，合理的色彩對(duì)比讓整個(gè)視覺(jué)顯得微妙又舒服。

　　添加動(dòng)效作為提示

　　使用空間共享式的排版，并不以為著你不能使用其他的設(shè)計(jì)手法，比如動(dòng)效就可以與之很好的結(jié)合起來(lái)。使用動(dòng)效、視差等特效能夠便于用戶(hù)理解你的設(shè)計(jì)，鼓勵(lì)用戶(hù)與頁(yè)面交互。

　　在頁(yè)面元素較多的時(shí)候，微妙的動(dòng)效能夠更好的創(chuàng)建視覺(jué)焦點(diǎn)。

　　在上面的頁(yè)面當(dāng)中，那個(gè)小的圓形LOGO會(huì)緩慢地轉(zhuǎn)動(dòng)，在這個(gè)不對(duì)稱(chēng)布局的頁(yè)面當(dāng)中，它是當(dāng)之無(wú)愧的視覺(jué)焦點(diǎn)。它很好地填補(bǔ)了圖片和文本之間的空白，讓整體設(shè)計(jì)更加完整和平衡，加上動(dòng)畫(huà)效果，你會(huì)對(duì)這個(gè)品牌有印象深刻。

　　保持簡(jiǎn)約

　　在絕大多數(shù)的情況下，簡(jiǎn)約的設(shè)計(jì)還是非常有效的。雖然這是老生常談，但是它完美的規(guī)避了復(fù)雜設(shè)計(jì)所面臨的各種問(wèn)題，高效直接的排版設(shè)計(jì)也更容易發(fā)揮作用。這個(gè)時(shí)候，一個(gè)簡(jiǎn)單的空間共享式的排版就能夠讓用戶(hù)立刻注意到，并且發(fā)揮效果。

　　如果你不知道從何入手，可以嘗試使用最簡(jiǎn)單的極簡(jiǎn)布局框架，使用黑色的文本和白色的背景，就像上面Melville 這個(gè)也能，讓彩色的圖片成為視覺(jué)焦點(diǎn)。