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