海淘科技分享：網(wǎng)頁(yè)版式設(shè)計(jì)與活動(dòng)專題網(wǎng)頁(yè)設(shè)計(jì)
網(wǎng)頁(yè)版式的基本類型主要有：圓形、橢圓形、骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型。
圓形和橢圓形的結(jié)合搭載了輪播廣告和重要信息，使得整個(gè)頁(yè)面既有亮點(diǎn)又不失簡(jiǎn)潔。
同樣是圓角矩形的穿插結(jié)合， 色彩填充的圖形交集既能展示重要信息又勾勒出整個(gè)網(wǎng)站的風(fēng)格形態(tài)。
鋼筋上的鉚釘―破格而出的素材
素材應(yīng)用的好，往往能起到畫龍點(diǎn)睛的作用，而素材起點(diǎn)綴頁(yè)面和表達(dá)主題之外，還能作為構(gòu)圖中的一種主要元素存在，這些素材通常破格而出作為連接頁(yè)面的紐帶，使頁(yè)面結(jié)構(gòu)更加的穩(wěn)固，故稱其為“鉚釘”。
素材看似隨機(jī)的擺放，其實(shí)是有意的將素材擺放于左上和右下兩個(gè)對(duì)角點(diǎn)，視覺(jué)上俗稱的暗線，左下角信息內(nèi)容的圖片和右上角的登錄窗口組成了另外一條對(duì)角暗線， 兩者并組成了X結(jié)構(gòu)，而四個(gè)素材起到到了固定和壓軸的作用，穩(wěn)固而又美觀。
斜線的運(yùn)用加上素材和圓形的穿插結(jié)合，讓整個(gè)頁(yè)面具有動(dòng)感，同時(shí)視線又隨著斜線的走向帶入至素材和標(biāo)題之上 ，具有張力的同時(shí)又讓這些線起到一個(gè)很好到視覺(jué)導(dǎo)向作用。傾斜的元素可以讓整個(gè)頁(yè)面有流線型的動(dòng)感，可以對(duì)頁(yè)面起到修飾的作用，也能為信息的承載起到輔助的作用，兩者有基的集合會(huì)讓人覺(jué)得傾斜的標(biāo)題更容易讓人閱讀，從而吸引更多的瀏覽者進(jìn)行瀏覽和訪問(wèn)，同時(shí)也體現(xiàn)出了網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)的真正含義，任意的擺放當(dāng)然是在美學(xué)的基礎(chǔ)上，加上合理的布局和構(gòu)圖，以及元素的添加，那么整個(gè)網(wǎng)頁(yè)就會(huì)釋放出濃濃的設(shè)計(jì)感在里面
不對(duì)稱平衡
不對(duì)稱平衡帶來(lái)一種自由隨意的感覺(jué)。盡管有時(shí)候看上去不是那么自然，但是它還是經(jīng)常在網(wǎng)頁(yè)設(shè)計(jì)中得到實(shí)用。你可以看到不對(duì)稱平衡常常運(yùn)用在一些大的高清圖片作為頁(yè)面背景，主體遠(yuǎn)離了中心軸線的情況，目的是為了把更醒目的標(biāo)題留在中間。雖然說(shuō)，中國(guó)古老的設(shè)計(jì)講究，對(duì)稱平衡，后面發(fā)展很多設(shè)計(jì)也有不對(duì)稱平衡的。這是一張國(guó)外，網(wǎng)頁(yè)設(shè)計(jì)圖。無(wú)論怎樣的對(duì)稱，核心是讓整體平衡的。
Biamar
2.平面設(shè)計(jì)三要素
創(chuàng)意：是平面設(shè)計(jì)的第一要素，沒(méi)有好的創(chuàng)意，就沒(méi)有好的作品，創(chuàng)意中要考慮受眾、傳播媒體、文化背景三個(gè)條件。
構(gòu)圖：構(gòu)圖就是要解決圖形、色彩和文字三者之間的空間關(guān)系，做到新穎，合理和統(tǒng)一。
色彩：好的平面設(shè)計(jì)作品在畫面色彩的運(yùn)用上注意調(diào)和、對(duì)比、平衡、節(jié)奏與韻律。
3.平面設(shè)計(jì)的元素
概念元素：圖形設(shè)計(jì)元素、標(biāo)志設(shè)計(jì)元素、文字設(shè)計(jì)元素、色彩設(shè)計(jì)元素、點(diǎn)、線、面的設(shè)計(jì)元素、構(gòu)圖元素、視覺(jué)元素、關(guān)系元素、實(shí)用元素
4.平面設(shè)計(jì)常見(jiàn)術(shù)語(yǔ)
和諧、對(duì)比、平衡、比例、重心、節(jié)奏、韻律
海淘科技網(wǎng)頁(yè)設(shè)計(jì)師們說(shuō)，一個(gè)成功的專題頁(yè)面，大部分會(huì)具有以下幾個(gè)出彩的要素：色彩、構(gòu)圖、風(fēng)格創(chuàng)意，細(xì)節(jié)等。一個(gè)頁(yè)面從無(wú)到有，設(shè)計(jì)師需要對(duì)整個(gè)頁(yè)面有全盤的設(shè)計(jì)和把控，良好的畫面分割能夠讓用戶第一眼看到這個(gè)頁(yè)面就能被視覺(jué)吸引，甚至不用瀏覽具體內(nèi)容就能了解這個(gè)頁(yè)面的很多信息。同樣的素材，同樣的配色，不同的構(gòu)圖能夠讓頁(yè)面出來(lái)的效果有天壤之別。如果你還抱著一個(gè)專題就是一個(gè)出色的頭圖，下面的內(nèi)容按部就班的填進(jìn)去，那你就OUT了。現(xiàn)在的專題設(shè)計(jì)越來(lái)越具有整體畫面感，看上去不像網(wǎng)站，更像是精美的雜志或者是精彩的平面設(shè)計(jì)作品。
好的頁(yè)面構(gòu)圖能夠讓你頁(yè)面更出彩，也能讓你做設(shè)計(jì)更事半功倍。下面，我們就來(lái)看看一些好的專題都是怎么構(gòu)圖的。
專題頁(yè)面設(shè)計(jì)是怎樣構(gòu)圖的
1. 幾何切割
在現(xiàn)實(shí)生活與自然界中，我們隨處可見(jiàn)幾何圖形的存在，簡(jiǎn)單的三角形、正方形、長(zhǎng)方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美需求，適當(dāng)?shù)漠嬅媲懈钅軌蚪o頁(yè)面帶來(lái)動(dòng)感與節(jié)奏感。加入幾根線條，幾個(gè)塊面就能令頁(yè)面起到意想不到的效果。
實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過(guò)復(fù)雜和花哨，一般會(huì)是純色大塊搭配漸變，主要突出形狀和區(qū)塊。
A.簡(jiǎn)單切割
用一個(gè)形狀或者素材切分整個(gè)頁(yè)面，畫面瞬時(shí)變得有趣生動(dòng)起來(lái)，內(nèi)容區(qū)域也能得到有效劃分。這類構(gòu)圖方式對(duì)內(nèi)容沒(méi)有過(guò)多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來(lái)處理，也是現(xiàn)在專題頁(yè)面用得最多，最普遍的一種構(gòu)圖方式。
B. 對(duì)稱切割
這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對(duì)立關(guān)系的情況下，比如說(shuō)：對(duì)戰(zhàn)，男女，冷熱等等。頁(yè)面一分為二，內(nèi)容劃分明確也更加具有視覺(jué)沖擊力。
C. 組合切割
集中而規(guī)律的排列，從整體上抓住人們的視覺(jué)。這種構(gòu)圖方式適合那種每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的專題，例如示例中的幾個(gè)功能點(diǎn)和分類，都是屬于同一級(jí)的內(nèi)容，所占的比例也相同，用這種組合的排列能夠保持各內(nèi)容的關(guān)系，也能讓布局更有創(chuàng)意。
D. 多重切割
不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識(shí)別，不規(guī)則的構(gòu)圖方式，避免了畫面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來(lái)的視覺(jué)效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感，科技感，與鋒利感覺(jué)的專題，例如時(shí)裝，家電，以及游戲戰(zhàn)斗類的專題等等。
2. 主體輪廓
活動(dòng)的專題年年做，沒(méi)有新意，想更與眾不同?那就這樣處理吧，根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個(gè)邊界或外形線，形成一個(gè)大的輪廓，將專題內(nèi)容巧妙的填充進(jìn)去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁(yè)面更有設(shè)計(jì)感，生動(dòng)且活潑。需要提醒的是設(shè)計(jì)的時(shí)候?qū)⑿螤畋M量輪廓化，加以強(qiáng)調(diào)突出，主體不需要太具象，舍棄一些繁瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。從個(gè)人經(jīng)驗(yàn)來(lái)說(shuō)，小編一般會(huì)在拿到需求的時(shí)候先進(jìn)行腦暴發(fā)散聯(lián)想，提取出一些有用的信息，再?gòu)闹刑暨x出適合元素去尋找一些圖片，通過(guò)圖片素材來(lái)激發(fā)創(chuàng)意。
這類構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確以及具象，能夠用物品或輪廓直接代表，比如:端午可以用龍舟、粽子;中秋可以用月餅、玉兔;會(huì)員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來(lái)進(jìn)行嘗試。
3. 放射及透視
通過(guò)整體放射狀加透視構(gòu)圖，使畫面呈現(xiàn)立體與空間感，視覺(jué)焦點(diǎn)明確，畫面沖擊力強(qiáng)，富有動(dòng)感。需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會(huì)較多的使用這種構(gòu)圖，突出動(dòng)感。
4. 整體場(chǎng)景
專題內(nèi)容不多，要突出趣味性，又怕用戶無(wú)聊，那就設(shè)計(jì)成一副美妙的插畫吧!讓用戶迅速置身在搭建的場(chǎng)景中，帶動(dòng)情緒，參與互動(dòng)，直觀獲取有用信息。這種處理方式會(huì)使頁(yè)面信息表現(xiàn)的更加準(zhǔn)確順暢，快速有效的把目標(biāo)用戶帶入到頁(yè)面氛圍當(dāng)中。不過(guò)需要注意的是場(chǎng)景搭建對(duì)素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會(huì)搭配動(dòng)畫一起實(shí)現(xiàn)，在帶入感上更進(jìn)一層。在設(shè)計(jì)的時(shí)候，對(duì)專題內(nèi)容頭腦里要有畫面感，先搭建大的畫面關(guān)系，再往里頭添細(xì)節(jié)和內(nèi)容，切記場(chǎng)景不要搶了內(nèi)容的視覺(jué)焦點(diǎn)，在適當(dāng)?shù)臅r(shí)候做些減法。
5. 流程圖
如果你拿到的專題是漸進(jìn)以及流向又或者是展示各節(jié)點(diǎn)的內(nèi)容，用別的形式總感覺(jué)不夠具象，那何不干脆做成一個(gè)個(gè)性化的流程圖?俗話說(shuō)，千言萬(wàn)語(yǔ)不如一張圖，專題運(yùn)用這種構(gòu)圖方式能夠?qū)⒉襟E，關(guān)系，各個(gè)節(jié)點(diǎn)以及整體流向展示清楚，配合圖片展示，一個(gè)枯燥的流程瞬間變得個(gè)性十足，用戶瀏覽簡(jiǎn)單又明了，并且充滿了趣味性。
在網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越注重個(gè)性、趣味性以及視覺(jué)沖擊力的今天，專題頁(yè)面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見(jiàn)的一部分，不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點(diǎn)也不盡相同，上面列舉出來(lái)的方法也可以搭配使用，在拿到需求的時(shí)候，先不著急下手，構(gòu)思的時(shí)候可以大膽嘗試，考慮內(nèi)容和風(fēng)格，先確定構(gòu)圖，再往里面添加內(nèi)容，充分考慮到內(nèi)容的排版，盡量做到讓一個(gè)專題有大創(chuàng)意的同時(shí)又具有小細(xì)節(jié)，實(shí)現(xiàn)整體形式感的完美和諧的統(tǒng)一。
另外最后提醒一下：所謂構(gòu)圖就是將表現(xiàn)主題的各個(gè)構(gòu)成要素按照主次關(guān)系放置在畫面相應(yīng)的區(qū)域，形成視覺(jué)感受，達(dá)到設(shè)計(jì)意圖。所有的構(gòu)圖方式追根究底都是為內(nèi)容服務(wù)，構(gòu)圖必須要服從主題表現(xiàn)的要求，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候要注意在追求創(chuàng)意構(gòu)圖的同時(shí)也別影響到用戶閱讀內(nèi)容。
海淘科技還提供，五金機(jī)械網(wǎng)站建設(shè)案例，五金機(jī)械網(wǎng)站建設(shè)案例等案例。文章下載，點(diǎn)擊：海淘科技分享：網(wǎng)頁(yè)版式設(shè)計(jì)與活動(dòng)專題網(wǎng)頁(yè)設(shè)計(jì)
