一個(gè)網(wǎng)站由很多元素組成，其中頁(yè)面排版布局則顯得格外重要。這就好比是在蓋房子，地基打得是否牢固直接影響整棟房子的美觀。好的布局網(wǎng)頁(yè)布局給人一種安定、平穩(wěn)的感覺，以此更好的留住訪問(wèn)，所以在網(wǎng)站定制開發(fā)前期，需要對(duì)網(wǎng)頁(yè)有一定的規(guī)劃，在構(gòu)思和設(shè)計(jì)的過(guò)程中，你還必須要掌握以下幾項(xiàng)原則：

　　1.平衡性

　　所謂平衡性就是指文字、圖像等要素的空間占用上分布均勻，而且色彩要協(xié)調(diào)，要給人一種平穩(wěn)的，看著舒服，滿足客戶的感官感受很重要。

　　2.對(duì)稱性

　　打破傳統(tǒng)過(guò)度的對(duì)稱，那種呆板、死氣沉沉的感覺;適當(dāng)制造一點(diǎn)變化，會(huì)有不一樣的效果，對(duì)稱也是一種美。

　　3.對(duì)比性

　　所謂對(duì)比，是讓不同的色彩、色調(diào)、形態(tài)等技巧來(lái)作表現(xiàn)，來(lái)形成鮮明的視覺效果，它們往往能夠創(chuàng)造出富有變化的效果。

　　4.疏密度

　　疏密度指不要整個(gè)網(wǎng)頁(yè)一種樣式，要適當(dāng)進(jìn)行留白，運(yùn)用空格，改變行間距、字間距等制造一些變化的效果。要做到疏密有度，即平常所說(shuō)的"密不透風(fēng)，疏可跑馬"。

　　5.比例

　　比例適當(dāng)，這在布局當(dāng)中非常重要，雖然不一定都要做到黃金分割，但比例一定要協(xié)調(diào)。

　　以上是網(wǎng)站定制開發(fā)常會(huì)遵循的網(wǎng)頁(yè)排版布局原則，雖然枯燥，但是我們?nèi)绻茴I(lǐng)會(huì)并活用到頁(yè)面布局里，效果就大不一樣了。不管是你的網(wǎng)站定制開發(fā)，還是專人制作，相信經(jīng)過(guò)不斷的嘗試和推敲，你的網(wǎng)頁(yè)一定會(huì)亮麗起來(lái)的。

 

 

　　為了從眾多競(jìng)爭(zhēng)對(duì)手中脫穎而出，不少站長(zhǎng)又在探究別具一格的網(wǎng)站排版設(shè)計(jì)。這不，空間共享式網(wǎng)頁(yè)排版開始火了，它是指讓網(wǎng)站上的元素橫跨不同的區(qū)塊、實(shí)現(xiàn)空間共享的一種排版設(shè)計(jì)。這個(gè)概念聽上去可能很復(fù)雜，但卻很容易辨識(shí)，比如文字區(qū)域的文本橫跨延伸到圖片或色塊區(qū)域中，共享其他組件的空間。這種共享式網(wǎng)頁(yè)排版簡(jiǎn)單高效，能讓整個(gè)網(wǎng)站充滿層次，它還可以用來(lái)承載很多創(chuàng)意十足的設(shè)計(jì)，用來(lái)創(chuàng)造令人眼前一亮的網(wǎng)站作品。那么在網(wǎng)站中究竟應(yīng)該怎樣使用這種網(wǎng)頁(yè)排版呢?下面小飛就帶大家一起看看什么是空間共享式網(wǎng)頁(yè)排版，以及空間共享式網(wǎng)頁(yè)設(shè)計(jì)的幾種使用方法。

　　什么是空間共享式網(wǎng)頁(yè)排版?

　　不少人將空間共享式網(wǎng)頁(yè)排版看做是分屏設(shè)計(jì)的一種延伸。不過(guò)相比界線分明的分屏式設(shè)計(jì)，空間共享式網(wǎng)頁(yè)排版的核心在于某個(gè)元素同其他元素共享空間，元素可以橫跨多個(gè)圖層或區(qū)塊，有時(shí)甚至?xí)霈F(xiàn)元素相互疊加的情況。這種排版布局方式有兩個(gè)好處，一方面，網(wǎng)頁(yè)元素是相互區(qū)分(帶有分屏式設(shè)計(jì)的特點(diǎn))，重點(diǎn)信息層次分明，有助于用戶更好的理解網(wǎng)站重要內(nèi)容。另一方面，網(wǎng)頁(yè)的元素又是互相融合的，兩個(gè)矩形的卡片式是相互連接的，這使得元素可以更好的被承載，尤其是文本元素(突破了分屏式設(shè)計(jì)的限制)?？臻g共享式網(wǎng)頁(yè)排版除了可以應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中，它還能在海報(bào)或明信片設(shè)計(jì)發(fā)揮自己的光和熱。

　　在空間共享式網(wǎng)頁(yè)排版中，橫跨多個(gè)區(qū)塊的元素可以顯而易見，也可以很微妙。下圖是HometownTrolley網(wǎng)站的首頁(yè)，它就使用了空間共享式網(wǎng)頁(yè)排版。右側(cè)的文本處的線條延長(zhǎng)至左側(cè)的圖片中，將用戶視覺引導(dǎo)到圖片上，而左側(cè)汽車的后視鏡又嵌入到了右側(cè)的文本區(qū)塊中，兩側(cè)元素實(shí)現(xiàn)了空間的共享，這種共享又是微妙、細(xì)致的，讓頁(yè)面顯得尤其協(xié)調(diào)。

　　

 

　　下面是空間共享式排版的一些應(yīng)用方式：

　　混搭圖片和文字

　　在空間共享式排版中，圖片和文字混搭算得上是最經(jīng)典的設(shè)計(jì)方式了。很多設(shè)計(jì)師喜歡在共享式排版中使用垂直定向的圖片(這種圖片一般在網(wǎng)站中不常用，因?yàn)榇蠖鄶?shù)設(shè)備屏幕以橫向?yàn)橹?。在這種排版樣式中，文字的應(yīng)用也相當(dāng)自由，它既可以橫跨橫跨圖片或留白存在，也可以在各個(gè)區(qū)域中單獨(dú)使用。圖片和文字的混搭往往可以給用戶留下印象深刻的視覺效果。

　　TheSquareApartments網(wǎng)站就是一個(gè)栗子。它在首頁(yè)使用了空間共享式排版方式，上方的標(biāo)題橫跨了圖片和文本區(qū)塊，而下方的細(xì)節(jié)文字說(shuō)明又是單獨(dú)存在的，文字和圖片的屬性都被淋漓盡致的展現(xiàn)出來(lái)。圖片和文字混搭的方式還有一個(gè)好處，由于文本需要跨越不同的區(qū)域，配色不用保持完全的統(tǒng)一，根據(jù)文字周圍的背景色進(jìn)行調(diào)整，這樣的設(shè)計(jì)簡(jiǎn)單而容易上手。這也是空間共享式排版設(shè)計(jì)中最簡(jiǎn)單易學(xué)的一種樣式。

　　

 

　　選用大膽的字體

　　在空間共享式布局下使用有趣而獨(dú)樹一幟的文字也是比較不錯(cuò)的選擇?？缭讲煌瑓^(qū)塊大膽?yīng)毺氐淖煮w不僅可以帶來(lái)獨(dú)特的視覺體驗(yàn)，還能夠創(chuàng)造頁(yè)面重心，同時(shí)也不會(huì)降低自己的焦點(diǎn)位置。

　　如果你在空間共享式排版中使用大膽、獨(dú)特的字體，記得選擇有趣顯眼的字體，應(yīng)用文本也不能太短。另外，圖片和背景色也要協(xié)調(diào)一致，字體與這兩者要在色彩上形成對(duì)比，這樣字體在整個(gè)頁(yè)面上可讀性才會(huì)比較高。可讀性是這種設(shè)計(jì)手法中最重要的點(diǎn)，通常情況下，文本部分建議選擇黑色或者白色的字體，雖然許多用戶覺得看起來(lái)很簡(jiǎn)單，但是要平衡圖片、背景和文本三個(gè)部分的配色體系，實(shí)際上還是挺麻煩的。

　　

 

　　色塊和文本組合

　　前面我們說(shuō)過(guò)圖片和文字混搭是空間共享式排版中最經(jīng)典的方式之一。不過(guò)如果你的網(wǎng)站主頁(yè)中沒有圖片，你同樣也可以使用空間共享式設(shè)計(jì)，這時(shí)我們就要請(qǐng)色塊和幾何圖形出山了，色塊或幾何圖形與文字搭配也能呈現(xiàn)非同凡響的視覺效果。

　　StartupLab的網(wǎng)站就將色塊和文本以極其時(shí)尚的方式搭配起來(lái)，創(chuàng)造了好幾個(gè)分層，讓頁(yè)面變得飽滿而充實(shí)。清晰的陰影字體不僅可以突出自身作為主體的地位，還可以與二級(jí)字體形成很好的對(duì)比，合理的色彩搭配也讓整個(gè)網(wǎng)站在視覺上很舒服，能夠給用戶提供不一樣的瀏覽體驗(yàn)。

　　

 

　　結(jié)合動(dòng)畫效果

　　使用空間共享式的排版，并不意味著你不能使用其他設(shè)計(jì)手法，比如動(dòng)效就可以與之很好的結(jié)合起來(lái)。在用戶界面或?qū)Ш綏l目中使用動(dòng)畫效果能夠便于用戶理解你的設(shè)計(jì)，也能鼓勵(lì)用戶與頁(yè)面進(jìn)行交互。而在頁(yè)面元素較多的時(shí)候，微妙的動(dòng)效還可以更好的創(chuàng)建視覺焦點(diǎn)。

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

　　

 

　　簡(jiǎn)約設(shè)計(jì)

　　在大多數(shù)的情況下，簡(jiǎn)約的設(shè)計(jì)都是非常有效的。雖然你可能覺得這是老生常談，但簡(jiǎn)約設(shè)計(jì)常確實(shí)完美規(guī)避了復(fù)雜設(shè)計(jì)所面臨的各種問(wèn)題，高效直接的排版設(shè)計(jì)更易發(fā)揮作用。如果你覺得前面幾種空間共享式設(shè)計(jì)方式都太復(fù)雜了，不妨選擇一個(gè)簡(jiǎn)潔的排版方式，這種方式很是直觀，可以很好地吸引用戶的注意力。

　　Melviie這個(gè)網(wǎng)站采取的就是最簡(jiǎn)單的極簡(jiǎn)布局框架，使用黑色的文本和白色的背景，讓中間的圖片成為視覺焦點(diǎn)。如果你不知道從何入手，不妨就學(xué)習(xí)這種方式設(shè)計(jì)空間共享式排版布局吧!

　　

 

　　在空間共享式網(wǎng)頁(yè)中，排版設(shè)計(jì)、圖片、文字等元素的處理看上去可能更加現(xiàn)代化，但相比傳統(tǒng)設(shè)計(jì)手法，它也沒有復(fù)雜多少?？臻g共享式的設(shè)計(jì)手法讓頁(yè)面中常被用戶忽略的元素和其他元素有了更多的交集，讓頁(yè)面內(nèi)的元素"互動(dòng)"了起來(lái)。

　　快來(lái)起飛頁(yè)自助建站平臺(tái)（）做一個(gè)響應(yīng)式網(wǎng)站吧!

　　【作者】宋宋宋

　　【來(lái)源】創(chuàng)客貼

　　【編輯】善小倩

　　排版不僅僅是在背景上放上具有設(shè)計(jì)感的字體，更是大多數(shù)設(shè)計(jì)的重要組成部分。

　　1.間距適當(dāng)

　　這是一個(gè)常見的解決方法：空間不足，但你需要大量的文本;你會(huì)怎么做?你把文字段落間距整體調(diào)小，你以為這個(gè)方法不錯(cuò)。問(wèn)題是，當(dāng)你的文字太接近時(shí)，會(huì)明顯降低可讀性(特別是在使用較小的字體時(shí))，使得設(shè)計(jì)看起來(lái)很擁擠。

　　

 

　　2.不按比例縮放

　　另一個(gè)常見的錯(cuò)誤(類似于前一個(gè))是拉伸文字或者段落來(lái)適應(yīng)一定的空間。

　　但是有辦法可以避免這個(gè)問(wèn)題：

　　一是確保當(dāng)你擴(kuò)大或縮小文本框時(shí)，按比例進(jìn)行。不同的設(shè)計(jì)程序有各種捷徑。例如，在創(chuàng)客貼中，當(dāng)您拖動(dòng)文本框或任何其他對(duì)象的角落時(shí)，它會(huì)自動(dòng)等比放大縮小。在Photoshop和Illustrator等Adobe程序中，按住Shift鍵的同時(shí)拖動(dòng)文本框的一角。

　　二是調(diào)整字體大小更有效地填充空間。

　　

 

　　3.文本的可讀性

　　如果你想讓你的設(shè)計(jì)吸引注意力，就必須能夠清楚地閱讀它。但是有時(shí)候，在設(shè)計(jì)過(guò)程中很容易陷入困境，以至于你做出的選擇能夠達(dá)到一定的設(shè)計(jì)感，但不是很實(shí)用。

　　例如，黑色背景上的細(xì)小白色文字可能看起來(lái)光滑，但可能難以閱讀。

　　

 

　　可讀性問(wèn)題可以有多種形式：

　　字體可能太小

　　字體和背景顏色可能會(huì)沖突

　　透明效果可能會(huì)使文本難以看到

　　。。。

　　4.使用太多字體

　　一些設(shè)計(jì)需要裝飾字體，但大多數(shù)不會(huì)。大多數(shù)的設(shè)計(jì)都是數(shù)量有限的字體-最好不要超過(guò)三種。字體太多會(huì)導(dǎo)致你的設(shè)計(jì)感覺很業(yè)余，而不是專業(yè)和深思熟慮之后設(shè)計(jì)出來(lái)的。標(biāo)整體、統(tǒng)一的字體讓您的設(shè)計(jì)看起來(lái)干凈整潔，而不是雜亂混亂。

　　

 

　　5.過(guò)分強(qiáng)調(diào)

　　跟上一個(gè)注意點(diǎn)差不多，有些時(shí)候，你想強(qiáng)調(diào)文本的某一部分-使其突出顯示的重要性。還有很多方法可以做到這一點(diǎn)：斜體，粗體，下劃線，刪除線，字體大小等。

　　只是不要在一段文字中使用它們

　　使用太多讓讀者太難以明白傳達(dá)你的信息，給讀者的感覺是混亂的，無(wú)意義的設(shè)計(jì)。

　　6.最后，不要忘記檢查檢查檢查

　　這是一個(gè)比設(shè)計(jì)還要重要的步驟。對(duì)文本進(jìn)行最后全文通讀一遍，檢查錯(cuò)別字及多余符號(hào)文字。所以，即使是無(wú)意的錯(cuò)誤也會(huì)使你的設(shè)計(jì)排版看起來(lái)不專業(yè)，并會(huì)導(dǎo)致您的客戶對(duì)公司和設(shè)計(jì)師造成不好的影響。