淄博網站設計之讓網站更好(hǎo)看的九種(zhǒng)版式設計

　　網站設計中好(hǎo)版式設計會(huì)讓你的網站脫穎而出，吸引客戶的關注，塑造企業品牌形象，增加客戶體驗度。今天圻谷(QIGOO.COM.CN)網絡淄博網站設計公司今天跟大家分享下：讓網站更好(hǎo)看的九種(zhǒng)版式設計。分别從留白／分量／尺寸／動勢／角版／退底／邊界／點綴／立體九個方面(miàn)進(jìn)行詳細的圖文比較設計說(shuō)明。

　　一、留白

　　首先我們需要理解“留白”與“空白”之間的差别，它們倆的差别也很容易理解。我們要把留白和空白比作“容器”，空白就(jiù)是比較大的容器，而留白是空白中比較小的容器，但他倆都(dōu)是空的，能(néng)理解麼(me)。或者客觀的理解爲“留白”是局部的，而空白是整體的，從理論上來說(shuō)空白 > 留白，但由于留白和空白的屬性都(dōu)是無限的，有時(shí)候會(huì)存在留白>空白的情況，這(zhè)時(shí)需要要素去界定邊際從而使它們分清界限。

　　

　　所謂留白指的是在版面(miàn)中沒(méi)有進(jìn)行任何布置的空白區域，其大小需要由版面(miàn)中的要素來界定的。雖然說(shuō)留白被認爲是沒(méi)有任何意義的空白區域，但在平面(miàn)設計中，留白的造型和位置是設計中重要表現手法之一。

　　

　　在版面(miàn)中每個要素如果按照均等的方式進(jìn)行排列，那就(jiù)會(huì)産生留白。這(zhè)種(zhǒng)排列産生的留白能(néng)使版面(miàn)具有秩序和平和感，但卻給人一種(zhǒng)很單調無趣的感覺。

　　

　　如果把留白的大小或形狀調整得不均衡會(huì)使版面(miàn)增添變化，使統一的留白部分和不統一的部分有了明确的對(duì)比。周圍留白較小的部分，要素之間增加了關聯性。周圍留白較大的部分，要素獨立突顯而引人注目。

　　

　　留白的大小左右著(zhe)讀者的視覺感受。面(miàn)積大的留白，給人奢華感和高級感，但相對(duì)會(huì)顯得比較冷清。面(miàn)積小的留白使人感到熱鬧和歡快，而同時(shí)顯得拘謹緊迫。因此，必須根據上述原理有目的性的選擇留白。

　　

　　有關聯的要素貼近擺放，留白要小。相反内容不同或想引人注意的部分則要相對(duì)遠離擺放，留白也要大一些。因此在擺放要素之前，要正确理解留白并將(jiāng)其合理的擺放在不同的設計語境中。

　　

　　留白作品欣賞，合适的留白給人一種(zhǒng)很舒服的感覺。

　　

　　二、分量

　　之前在《建立條理 2 – 版式設計基礎》的統一線寬這(zhè)節中講過(guò)類似知識，那今天剛好(hǎo)把其餘知識補全。

　　版面(miàn)中的要素，文字、圖片或者顔色等，都(dōu)有各自的“分量”。若想給版面(miàn)帶來變化，方法之一就(jiù)是改變這(zhè)個分量，使分量輕和分量重的要素産生對(duì)比效果。輕重差越大，變化也随之變大。

　　

　　文字的筆畫越粗分量越重，筆畫越細分量越輕。因此，不同筆畫粗細度的文字搭配可以産生變化。大多數字體，同一個字形具有由細到粗很多種(zhǒng)類型。這(zhè)樣的一組字形叫(jiào)做“字族”。使用相同字形不同粗細度的組合，在保持統一感的同時(shí)也加入了變化。

　　

　　排版時(shí)若使用分割線，可以通過(guò)調整分割線的粗細度爲版面(miàn)帶來變化。粗線分量重，細線分量輕，靈活運用這(zhè)個原理可爲版面(miàn)做區分設計。

　　

　　如果使用色彩或灰階，越深的顔色分量越重，越淺的顔色分量越輕。圖片也是一樣，越暗的圖片分量越重，越亮的圖片分量越輕。另外，如果圖片中的拍攝對(duì)象被突顯則可認爲它是重心，且該對(duì)象越大分量越重。如果圖片中隻有天空或大海，沒(méi)有特定的拍攝對(duì)象作爲重心，就(jiù)很難找到重心。

　　三、尺寸

　　　　在平面(miàn)中統一各要素的尺寸能(néng)使版面(miàn)變得有條理，但同時(shí)也會(huì)給人一種(zhǒng)很生硬呆闆的感覺。如果要使版面(miàn)增添變化，可以嘗試把版面(miàn)中各要素的大小進(jìn)行對(duì)比的調整，這(zhè)樣看起(qǐ)來大尺寸的要素會(huì)更容易吸引讀者的眼球，之後(hòu)再引導讀者的視線去觀看那些小的要素。但此時(shí)要注意保持大尺寸要素與多個小尺寸要素之間的平衡。

　　

　　文字的尺寸大小也很重要，以内容爲主的小說(shuō)和論文希望讀者能(néng)仔細閱讀，這(zhè)時(shí)統一版面(miàn)中的文字大小就(jiù)不會(huì)有什麼(me)問題。但針對(duì)于海報雜志等需要讀者注意的特定印刷品時(shí)，需要在文字尺寸上作适當的變化。當設計傳統作品時(shí)，可以根據要強調的順序來設定文字的大小。

　　

　　另外不要忽視文章的可讀性與變化，要在合适的場景下做适合的設計。

　　

　　另外，有時(shí)也不一定要將(jiāng)同一組字塊中的文字統一大小。同一組塊中添加尺寸變化能(néng)強調重要部分，增加版面(miàn)的沖擊力。要設計豐富的具有沖擊力的作品，應該立足于文章的意義，將(jiāng)文字添加不同尺寸來做對(duì)比使版面(miàn)生動又活力。

　　

　　對(duì)要素的尺寸進(jìn)行區分，差異越大對(duì)比越明顯，給人的感覺就(jiù)越強烈。如果尺寸對(duì)比微小，别人看不出什麼(me)差别，則幾乎就(jiù)沒(méi)有什麼(me)效果。另外，想爲版面(miàn)添加變化，比起(qǐ)把相似尺寸的要素放在一起(qǐ)，不如把差别大的要素排列在一起(qǐ)效果更明顯。

　　

　　尺寸的大小對(duì)比也成(chéng)爲“跳躍率”，即版面(miàn)的跳躍率。跳躍率小的版面(miàn)平穩而平和，跳躍率越大要素的尺寸對(duì)比就(jiù)越強烈，版面(miàn)越活潑就(jiù)越有朝氣。

　　

　　四、動勢

　　有穩定感的版面(miàn)，可以說(shuō)是“沒(méi)有動感”的設計。而“有動感”的版面(miàn)不但生動有活力，而且還(hái)能(néng)使版面(miàn)具有趣味性和容易引人注目的情感。這(zhè)裡(lǐ)指的”動感”是一種(zhǒng)動能(néng)，是要素所爆發(fā)的能(néng)量趨勢，稱爲動勢。動勢并不是奔馳的汽車、運動的人，飛行的鳥，而指的是動作進(jìn)行中的一種(zhǒng)狀态。另外人的臉和視線也有方向(xiàng)性，可以用來營造動勢。

　　

　　此外，若是把圖片和文字等要素完全對(duì)齊，就(jiù)會(huì)失去動勢。因此如果要營造動勢，必須把版面(miàn)的某部分平衡“打亂”。例如，排版時(shí)可以嘗試不把各要素的位置對(duì)齊，不作水平、垂直方向(xiàng)對(duì)齊，不統一尺寸大小等打破平衡的方法。但是如果調整過(guò)度可能(néng)使版面(miàn)太過(guò)松散，所以設計時(shí)要盡量體現暢快的節奏感。

　　

　　在頁面(miàn)中通常文字和圖片都(dōu)以水平線、垂直線爲基準來進(jìn)行排版的。由于水平線、垂直線規則性強，會(huì)給人一種(zhǒng)穩定的感覺。但想爲版面(miàn)添加動勢，則應适當變換角度，假如非水平、垂直的直線或曲線的要素。

　　

　　還(hái)有，可以用線營造出一定方向(xiàng)的動勢，也可以配合箭頭之類帶有方向(xiàng)性或指向(xiàng)性的要素來表現動勢。由于文章篇幅又被拉長(cháng)了，且這(zhè)個知識點就(jiù)比較好(hǎo)理解，這(zhè)裡(lǐ)就(jiù)不找案例了。

　　五、角版

　　角版指在一般的版面(miàn)裡(lǐ)，圖片被配置在四方形的線框中。使用圖片原本的四方形狀，增加了水平、垂直的方向(xiàng)感。這(zhè)種(zhǒng)配置圖片的方法叫(jiào)做“角版”。若想爲角版添加變化，可以將(jiāng)圖片傾斜擺放，或者變化圖片尺寸。

　　

　　角版其實很好(hǎo)理解，就(jiù)像PS裡(lǐ)畫個矩形，再將(jiāng)圖片在這(zhè)個矩形中創建剪貼蒙版一樣。那剛開(kāi)始畫的這(zhè)個四方形矩形，其實就(jiù)是角版。

　　六、退底

　　退底是一種(zhǒng)設計技法，就(jiù)是將(jiāng)圖片裁剪成(chéng)特定形狀，爲版面(miàn)帶來更歡快的氣氛。

　　根據圖片中物像的輪廓剪切處理的方法叫(jiào)做“退底”。通常的退底方法，是沿物像的輪廓不留背景地剪切圖片。在垂直、水平要素較多的作品中，這(zhè)種(zhǒng)方法使圖片的輪廓不規則，增加了活潑歡快的感覺。

　　

　　圖片的退底方法，不隻是沿著(zhe)物像的輪廓去除背景，也可以特意沿著(zhe)物像的周圍做粗略的剪切。在規則有序的版面(miàn)中加入随意剪切的圖片，能(néng)産生粗犷的躍動感。

　　

　　還(hái)有一種(zhǒng)方法是將(jiāng)圖片做成(chéng)與物像輪廓毫無關系的剪切。使用這(zhè)種(zhǒng)方法，讀者對(duì)圖片的印象將(jiāng)随著(zhe)剪切下的形狀而改變。若剪切成(chéng)圓形或橢圓形，輪廓的曲線可以産生柔美的感覺；若剪切成(chéng)多邊形，形成(chéng)的直線清楚明朗，給人一種(zhǒng)剛硬的感覺。

　　

　　另外，也可以利用類似心形或星形這(zhè)些有意義的圖案，來烘托版面(miàn)的氣氛。在特殊的例子中，也有將(jiāng)圖片裁剪成(chéng)文字形狀的方法。

　　七、邊界

　　配置要素多的情況下，如何設計要素之間的“邊界”是很重要的。

　　在設計複雜的版面(miàn)或配置要素很多的作品時(shí)，很難采用留白或加入動态效果等添加變化的方法。遇到這(zhè)種(zhǒng)情況，可以考慮設法在要素之間的邊界下功夫，突顯重點部分，分隔非同類要素，爲版面(miàn)帶來變化。

　　

　　最簡單的方法，就(jiù)是用分隔線作區分。較細的分隔線感覺纖細，但有時(shí)也讓人感到冷酷。較粗的分割線給人感覺溫和，但作爲分割線過(guò)于醒目，有時(shí)會(huì)讓人感到沉重的氛圍，因此使用時(shí)需要多加注意。

　　

　　分隔線有單純的直線，手繪線、虛線或多層線條等等多種(zhǒng)形态，不同形态給人的印象也不同。如果用虛線作爲分隔線能(néng)爲版面(miàn)帶來變化。有時(shí)可以顯現出時(shí)尚流行的感覺。

　　

　　除了使用分隔線做邊界，比分隔線粗很多的帶“形狀”的線，或帶有顔色的“面(miàn)”的線也可以用來做分隔線。由于分隔線的線寬比較細，即便爲分隔線改變邊框顔色也不會(huì)影響到整體效果。而爲一整塊面(miàn)添加顔色就(jiù)可以顯現出具有明顯效果的變化。

　　

　　八、點綴

　　點綴是指在版面(miàn)中加入視覺元素，來添加細微的變化。

　　前面(miàn)我講過(guò)，是爲了消除版式整齊頁面(miàn)的單調性，而用留白、線條粗細度、加入動感元素等方法爲版面(miàn)添加變化。這(zhè)些都(dōu)是爲了“打亂”版面(miàn)進(jìn)行的工作，但是往往較難把握“打亂”的這(zhè)個尺度。

　　

　　我們可以用一種(zhǒng)方法來使版面(miàn)在基本不改變的基礎上消除一些單調性，用到的這(zhè)個方法就(jiù)是增加點綴。通過(guò)追加一點新的視覺元素，使版面(miàn)得到點綴，進(jìn)而産生節奏感、動感和視線引導上的變化。爲作品添加點綴，可以在理解内容後(hòu)，設計符合内容的象征性圖案，也可以利用類似幾何圖案那樣不帶有特定意義的圖形。

　　

　　因爲用做點綴的元素在分量上沒(méi)有那麼(me)沉重，所以單純的點綴不會(huì)造成(chéng)版面(miàn)大幅變化。因此可以重複使用點綴元素。利用重複的方法，即使再小的元素都(dōu)能(néng)影響整體的氛圍。

　　

　　另外，若重複使用點綴元素，不單要反複使用相同的元素，還(hái)要根據整個版面(miàn)的氣氛做适當的調整。例如維持原來形狀但改變顔色，或者改變尺寸，又或者重複使用同樣的圖形，既能(néng)保持統一感，又能(néng)添加變化。

　　九、立體

　　之前在文章《番外篇 – 空間的概念》中講到了一些二維與三維的概念，會(huì)産生立體的感覺。那今天在應用層講一下立體感的具體形式表現。通常在印刷品中，所有要素都(dōu)在二維平面(miàn)中。當然文字和圖像也配置在平面(miàn)内，不過(guò)稍用點工夫就(jiù)可以讓他們有縱深立體感。這(zhè)種(zhǒng)立體感，也使得版面(miàn)産生了縱深的變化。

　　

　　例如在要素的側面(miàn)加上影子般的陰影效果，這(zhè)個要素就(jiù)有了浮在紙上的感覺。陰影的位置能(néng)表明光源的方向(xiàng)，陰影的模糊程度能(néng)表現要素浮起(qǐ)的高度。要注意的是，若爲圖片加入陰影，必須保證原圖片的影子方向(xiàng)與追加的影子方向(xiàng)一緻。如果兩(liǎng)者方向(xiàng)不同就(jiù)會(huì)産生失調的感覺。

　　

　　還(hái)有讓要素自身表現出立體感的方法。先設定某個特定光照方向(xiàng)，在做出高光、陰影部分，看起(qǐ)來就(jiù)能(néng)具有立體感。先考慮立體化後(hòu)將(jiāng)會(huì)變成(chéng)什麼(me)樣的形狀，再決定光源的光照方向(xiàng)，做出明面(miàn)和暗面(miàn)部分。明暗變化的手法可以使突起(qǐ)的角度看起(qǐ)來光滑或者棱角分明。

　　

　　結束語：今天這(zhè)篇文章是伊達千代《版式設計基礎》這(zhè)本書的内容，屬于此書的第二章的内容，此套書一共四套，已經(jīng)絕版了。但大家可以購買新版的書，内容跟老版書的内容是一樣的，新版書名是《設計入門教室》，也是一共四套。如果大家有興趣的話可以購買此書。