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