為了從眾多競爭對手中脫穎而出，不少站長又在探究別具一格的網(wǎng)站排版設(shè)計。這不，空間共享式網(wǎng)頁排版開始火了，它是指讓網(wǎng)站上的元素橫跨不同的區(qū)塊、實現(xiàn)空間共享的一種排版設(shè)計。這個概念聽上去可能很復(fù)雜，但卻很容易辨識，比如文字區(qū)域的文本橫跨延伸到圖片或色塊區(qū)域中，共享其他組件的空間。這種共享式網(wǎng)頁排版簡單高效，能讓整個網(wǎng)站充滿層次，它還可以用來承載很多創(chuàng)意十足的設(shè)計，用來創(chuàng)造令人眼前一亮的網(wǎng)站作品。那么在網(wǎng)站中究竟應(yīng)該怎樣使用這種網(wǎng)頁排版呢?下面小飛就帶大家一起看看什么是空間共享式網(wǎng)頁排版，以及空間共享式網(wǎng)頁設(shè)計的幾種使用方法。
什么是空間共享式網(wǎng)頁排版?
不少人將空間共享式網(wǎng)頁排版看做是分屏設(shè)計的一種延伸。不過相比界線分明的分屏式設(shè)計，空間共享式網(wǎng)頁排版的核心在于某個元素同其他元素共享空間，元素可以橫跨多個圖層或區(qū)塊，有時甚至會出現(xiàn)元素相互疊加的情況。這種排版布局方式有兩個好處，一方面，網(wǎng)頁元素是相互區(qū)分(帶有分屏式設(shè)計的特點)，重點信息層次分明，有助于用戶更好的理解網(wǎng)站重要內(nèi)容。另一方面，網(wǎng)頁的元素又是互相融合的，兩個矩形的卡片式是相互連接的，這使得元素可以更好的被承載，尤其是文本元素(突破了分屏式設(shè)計的限制)?？臻g共享式網(wǎng)頁排版除了可以應(yīng)用在網(wǎng)頁設(shè)計中，它還能在海報或明信片設(shè)計發(fā)揮自己的光和熱。
在空間共享式網(wǎng)頁排版中，橫跨多個區(qū)塊的元素可以顯而易見，也可以很微妙。下圖是Hometown Trolley網(wǎng)站的首頁，它就使用了空間共享式網(wǎng)頁排版。右側(cè)的文本處的線條延長至左側(cè)的圖片中，將用戶視覺引導(dǎo)到圖片上，而左側(cè)汽車的后視鏡又嵌入到了右側(cè)的文本區(qū)塊中，兩側(cè)元素實現(xiàn)了空間的共享，這種共享又是微妙、細致的，讓頁面顯得尤其協(xié)調(diào)。
下面是空間共享式排版的一些應(yīng)用方式：
混搭圖片和文字
在空間共享式排版中，圖片和文字混搭算得上是最經(jīng)典的設(shè)計方式了。很多設(shè)計師喜歡在共享式排版中使用垂直定向的圖片(這種圖片一般在網(wǎng)站中不常用，因為大多數(shù)設(shè)備屏幕以橫向為主)。在這種排版樣式中，文字的應(yīng)用也相當自由，它既可以橫跨橫跨圖片或留白存在，也可以在各個區(qū)域中單獨使用。圖片和文字的混搭往往可以給用戶留下印象深刻的視覺效果。
The Square Apartments網(wǎng)站就是一個栗子。它在首頁使用了空間共享式排版方式，上方的標題橫跨了圖片和文本區(qū)塊，而下方的細節(jié)文字說明又是單獨存在的，文字和圖片的屬性都被淋漓盡致的展現(xiàn)出來。圖片和文字混搭的方式還有一個好處，由于文本需要跨越不同的區(qū)域，配色不用保持完全的統(tǒng)一，根據(jù)文字周圍的背景色進行調(diào)整，這樣的設(shè)計簡單而容易上手。這也是空間共享式排版設(shè)計中最簡單易學(xué)的一種樣式。
選用大膽的字體
在空間共享式布局下使用有趣而獨樹一幟的文字也是比較不錯的選擇?？缭讲煌瑓^(qū)塊大膽?yīng)毺氐淖煮w不僅可以帶來獨特的視覺體驗，還能夠創(chuàng)造頁面重心，同時也不會降低自己的焦點位置。
如果你在空間共享式排版中使用大膽、獨特的字體，記得選擇有趣顯眼的字體，應(yīng)用文本也不能太短。另外，圖片和背景色也要協(xié)調(diào)一致，字體與這兩者要在色彩上形成對比，這樣字體在整個頁面上可讀性才會比較高?？勺x性是這種設(shè)計手法中最重要的點，通常情況下，文本部分建議選擇黑色或者白色的字體，雖然許多用戶覺得看起來很簡單，但是要平衡圖片、背景和文本三個部分的配色體系，實際上還是挺麻煩的。
色塊和文本組合
前面我們說過圖片和文字混搭是空間共享式排版中最經(jīng)典的方式之一。不過如果你的網(wǎng)站主頁中沒有圖片，你同樣也可以使用空間共享式設(shè)計，這時我們就要請色塊和幾何圖形出山了，色塊或幾何圖形與文字搭配也能呈現(xiàn)非同凡響的視覺效果。
Startup Lab的網(wǎng)站就將色塊和文本以極其時尚的方式搭配起來，創(chuàng)造了好幾個分層，讓頁面變得飽滿而充實。清晰的陰影字體不僅可以突出自身作為主體的地位，還可以與二級字體形成很好的對比，合理的色彩搭配也讓整個網(wǎng)站在視覺上很舒服，能夠給用戶提供不一樣的瀏覽體驗。
結(jié)合動畫效果
使用空間共享式的排版，并不意味著你不能使用其他設(shè)計手法，比如動效就可以與之很好的結(jié)合起來。在用戶界面或?qū)Ш綏l目中使用動畫效果能夠便于用戶理解你的設(shè)計，也能鼓勵用戶與頁面進行交互。而在頁面元素較多的時候，微妙的動效還可以更好的創(chuàng)建視覺焦點。
在Message in a Bottle這個網(wǎng)站上，首頁中間的圓形Logo會緩慢地轉(zhuǎn)動，在這個不對稱的頁面當中，它是當之無愧的視覺焦點。它很好地填補了圖片和文本之間的空白，讓整體設(shè)計更加完整和平衡。動畫效果讓你對這個品牌的印象會更加深刻。
簡約設(shè)計
在大多數(shù)的情況下，簡約的設(shè)計都是非常有效的。雖然你可能覺得這是老生常談，但簡約設(shè)計常確實完美規(guī)避了復(fù)雜設(shè)計所面臨的各種問題，高效直接的排版設(shè)計更易發(fā)揮作用。如果你覺得前面幾種空間共享式設(shè)計方式都太復(fù)雜了，不妨選擇一個簡潔的排版方式，這種方式很是直觀，可以很好地吸引用戶的注意力。
Melviie這個網(wǎng)站采取的就是最簡單的極簡布局框架，使用黑色的文本和白色的背景，讓中間的圖片成為視覺焦點。如果你不知道從何入手，不妨就學(xué)習這種方式設(shè)計空間共享式排版布局吧!
在空間共享式網(wǎng)頁中，排版設(shè)計、圖片、文字等元素的處理看上去可能更加現(xiàn)代化，但相比傳統(tǒng)設(shè)計手法，它也沒有復(fù)雜多少?？臻g共享式的設(shè)計手法讓頁面中常被用戶忽略的元素和其他元素有了更多的交集，讓頁面內(nèi)的元素"互動"了起來。
快來起飛頁自助建站平臺（http://www.qifeiye.com/?t_wd=a5）做一個響應(yīng)式網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
