如今，在微信占領(lǐng)移動(dòng)終端的絕大多數(shù)資源的情況下，互聯(lián)網(wǎng)的競(jìng)爭(zhēng)優(yōu)勢(shì)已不再明顯。但是，作為企業(yè)的媒體門面，一個(gè)好的網(wǎng)站版式設(shè)計(jì)不僅會(huì)提升企業(yè)形象，更有助于擴(kuò)大企業(yè)的知名度和業(yè)務(wù)資源范圍。

在網(wǎng)站版式設(shè)計(jì)中首先要考慮同時(shí)也是十分重要的一點(diǎn)：版式布局。一個(gè)設(shè)計(jì)精致養(yǎng)眼的主頁(yè)可以提升網(wǎng)站的整體效果，這個(gè)不需贅述。但是，想要讓版式變得不再單調(diào)生硬，掌握好版式分割則顯得尤為重要。

什么是版式分割？

版式分割是指的在有限的版面空間里用圖形或圖片把整個(gè)版面分割為2個(gè)或者多個(gè)部分（例如上下或左右）并分別在左或右配置人物或標(biāo)題等，把構(gòu)思與計(jì)劃以視覺形式表達(dá)出來，這樣會(huì)讓你的設(shè)計(jì)更有創(chuàng)造性。

版式分割在設(shè)計(jì)中的作用

將呆板單獨(dú)的一個(gè)版面分割為多個(gè)版面，在視覺上面具有一定的引導(dǎo)性。同時(shí)通過各個(gè)版面的面積大小也可以明確當(dāng)前設(shè)計(jì)的主次關(guān)系，更具有對(duì)比性，并且使得畫面感性而有活力。

以下四種類型的分割都是由一個(gè)形狀通過面積和位置的變化使分割版面的。不同的版式設(shè)計(jì)，最終呈現(xiàn)的效果也是不一樣的。

直線分割方式看似簡(jiǎn)單，但是運(yùn)用得想要出彩卻是非常困難的。它的分割形式都是由直線構(gòu)成的，讓設(shè)計(jì)看起來更加嚴(yán)肅、理性，但有時(shí)也顯得比較呆板生硬，需要用色彩和其他一些小的設(shè)計(jì)元素來調(diào)和它的缺陷。

下面都是斜切的分割，斜切的角度和位置變化，都會(huì)給視覺不同的感受。

傾斜分割讓版面更具有動(dòng)感和速度，在運(yùn)動(dòng)/促銷/游戲設(shè)計(jì)中常使用該分割方式，傾斜的方向不同也會(huì)給人有下滑或上升的感受。

用三角形的位置、面積、數(shù)量的變化，分割成不同版面。

三角形是一個(gè)具有穩(wěn)定性的形狀，同時(shí)也具有一定的視覺引導(dǎo)，通常會(huì)給人以尖銳、時(shí)尚的、暴力刺激等感受。

用圓形來分割版面，圓形使版面看起來視覺柔和，歡樂。

不同于尖銳的三角形，圓形的外形光滑飽滿，會(huì)讓人感覺到可愛、靈動(dòng)和柔和，可以讓畫面更有親和力。圓形風(fēng)格一般在居家、母嬰和旅行這類溫馨的主題中較為常見。

分割在設(shè)計(jì)中的應(yīng)用

通過對(duì)版面進(jìn)行分割并且采用了傾斜性的分割形式，不規(guī)則和起伏感強(qiáng)烈的分割使版面立刻活躍起來，更加有節(jié)奏感，另外通過上下版面不同的兩塊面積的對(duì)比色配色，加大了畫面對(duì)視覺的沖擊。

上面的設(shè)計(jì)通過圓的外形來分割頁(yè)面，文案和畫面信息我們能知道這是關(guān)于戶外旅行的網(wǎng)站頁(yè)面。圓的外形更容易給人親和力，使人更容易接納。它的細(xì)節(jié)更在于圓本身的細(xì)節(jié)把圓形更生動(dòng)和具有層次感，而不單單只是一個(gè)簡(jiǎn)單的形狀。

不規(guī)則的形狀分割版面比單純的幾何形狀分割更有創(chuàng)造力，它營(yíng)造的氛圍動(dòng)態(tài)十足，所以大家常常會(huì)看到優(yōu)秀的設(shè)計(jì)中會(huì)出現(xiàn)一些比較有趣的頁(yè)面中，比如說海報(bào)等，去除材質(zhì)它們也是形狀，只是更加具象的分割版面在畫面中表現(xiàn)得更為突出。

如果沒有版面分割，會(huì)是什么效果？

通過對(duì)圖片版面分割的還原，我們不難發(fā)現(xiàn)沒有版面分割的圖片失去對(duì)比，節(jié)奏感，氛圍這些方面的視覺感受。即使它在標(biāo)題排版上很吸引人，但版面分割可以讓它表達(dá)得更好。

具象的版面分割案例展示

案例中的盤子、黑板和iPad讓版面產(chǎn)生了分割，只是不像幾何那樣更加純粹的分割版面、但是我們也不能忽視它在設(shè)計(jì)中分割版面的作用。即使設(shè)計(jì)師當(dāng)時(shí)沒有這個(gè)考慮，我們也要記住每個(gè)元素在畫面中都有存在的意義和作用，不知是單單表象上的物體。

網(wǎng)站的主頁(yè)設(shè)計(jì)大致可分為動(dòng)態(tài)和靜態(tài)兩種方向。靜態(tài)網(wǎng)站的主頁(yè)設(shè)計(jì)相對(duì)簡(jiǎn)單，只要放上一張醒目好看的圖片，就會(huì)很吸引人。而動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)則是在鼠標(biāo)下滑的過程中產(chǎn)生版面上的動(dòng)態(tài)變化，可以增強(qiáng)視覺的沖擊力。

如何利用版式分割來搭建版面布局？

下面將給出六種不同的布局形式供大家的設(shè)計(jì)參考。

  “T”結(jié)構(gòu)布局形式  

所謂“T”結(jié)構(gòu)，就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，整體效果類似英文字母“T”，所以稱之為“T”形布局。這是網(wǎng)頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明，是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果不注意細(xì)節(jié)色彩，很容易讓人“看之無味”。

  “口”型布局  

這是一個(gè)象形的說法，就是頁(yè)面一般上下各有一個(gè)廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是頁(yè)面擁擠，不夠靈活。

  對(duì)稱對(duì)比布局  

顧名思義，采取左右或者上下對(duì)稱的布局，一半深色一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力強(qiáng)，缺點(diǎn)是很難將兩部分有機(jī)地結(jié)合起來、

  POP布局  

POP引自廣告術(shù)語，就是指頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。常用于時(shí)尚類站點(diǎn)。優(yōu)點(diǎn)顯而易見：漂亮吸引人。缺點(diǎn)就是速度慢。作為版面布局，還是值得借鑒的。

  國(guó)型布局  

▲ “國(guó)型布局”網(wǎng)站底部展示

國(guó)型布局也稱為同型布局，是一些大型網(wǎng)站喜歡使用的布局類型。最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中問是主要部分，與左右一起羅列到底，最下方是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局通常用于主頁(yè)的設(shè)計(jì)，其主要優(yōu)點(diǎn)是頁(yè)面容納內(nèi)容很多，信息量大。

  標(biāo)題正文型布局  

這種布局的最上方是標(biāo)題或廣告等內(nèi)容，下面是正文。通常文章頁(yè)面或注冊(cè)頁(yè)面采用此種布局，其特點(diǎn)是簡(jiǎn)潔明快，干擾信息少，較為正規(guī)。

版式分割對(duì)于版式設(shè)計(jì)來說只是其中的一個(gè)影響因素，色彩也是影響設(shè)計(jì)效果的一個(gè)重要因素。

網(wǎng)站設(shè)計(jì)中的色彩運(yùn)用

▲ 佰草集官網(wǎng)主頁(yè)展示

佰草集作為國(guó)內(nèi)天然無添加的本草護(hù)膚高端品牌，網(wǎng)站主題色選用清新柔和的綠色，既考慮到產(chǎn)品的天然功效與之適應(yīng)，突出其品牌特色。

▲ 雪肌精官網(wǎng)主頁(yè)展示

再如日本高絲旗下的高檔護(hù)膚系列產(chǎn)品雪肌精，其日本官網(wǎng)也是采用與產(chǎn)品包裝相同的深藍(lán)色作為主題色，非常有辨識(shí)度。

網(wǎng)站設(shè)計(jì)主題色的運(yùn)用不僅僅根據(jù)設(shè)計(jì)師的喜好問題，更重要的是能結(jié)合產(chǎn)品特色選用貼切的色彩，整體形象設(shè)計(jì)的專業(yè)有利于打造良好的企業(yè)VI視覺效果。

歐美國(guó)際大牌的網(wǎng)站主頁(yè)多以黑白色為主，黑白色的鮮明對(duì)比，奠定一種成熟內(nèi)斂的基調(diào)，因?yàn)楦叨舜笈频哪繕?biāo)受眾主要是經(jīng)濟(jì)支配能力高的人群，年齡多在25歲以上，因此只有黑白色能夠襯托出品牌的形象。

PS :為什么黑白灰看起來會(huì)顯得高大上？

這個(gè)問題在以前的一篇推送里詳細(xì)地說過，戳傳送門#黑白灰#即可達(dá)到。

主題色不僅在網(wǎng)站設(shè)計(jì)里占據(jù)至關(guān)重要的地位，而且在一些畫冊(cè)、宣傳冊(cè)的設(shè)計(jì)中也是非常關(guān)鍵的。如何讓你的畫冊(cè)設(shè)計(jì)風(fēng)格統(tǒng)一不顯雜亂？運(yùn)用好主題色可以很好地解決這個(gè)問題。

除了單一色和漸變色，多種色彩的搭配使用運(yùn)用在畫冊(cè)海報(bào)等設(shè)計(jì)當(dāng)中也可以很出彩，當(dāng)然這需要考驗(yàn)設(shè)計(jì)師的色彩搭配功力。黑白色固然看起來顯得高大上，但是因?yàn)殡S處可見，所以能夠第一眼出彩的設(shè)計(jì)并不多見。相反地，如果能在網(wǎng)站設(shè)計(jì)中將色彩運(yùn)用好，也是一個(gè)不錯(cuò)的嘗試。

下面有一些設(shè)計(jì)感極佳的網(wǎng)站主頁(yè)設(shè)計(jì)展示，可供大家參考學(xué)習(xí)。

Sanissimo

cinema-series.orange.fr/evenement/universeries

statek-psychologia.pl

cross-cross-coffee-cup.com

ThoughtSpot

Timeline Page

Tietgenskolen