您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

專(zhuān)題頁(yè)設(shè)計(jì)中的構(gòu)圖

 

一、幾何切割

  在現(xiàn)實(shí)生活與自然界中,我們隨處可見(jiàn)幾何圖形的存在,簡(jiǎn)單的三角形、正方形、長(zhǎng)方形和圓形甚至幾根線條就可以組成很多有趣的圖形,也很符合現(xiàn)代審美需求,適當(dāng)?shù)漠?huà)面切割能夠給頁(yè)面帶來(lái)動(dòng)感與節(jié)奏感。加入幾根線條,幾個(gè)塊面就能令頁(yè)面起到意想不到的效果。

  實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過(guò)復(fù)雜和花哨,一般會(huì)是純色大塊搭配漸變,主要突出形狀和區(qū)塊。

  a. 簡(jiǎn)單切割

制作專(zhuān)題頁(yè)!先學(xué)專(zhuān)題頁(yè)設(shè)計(jì)中的構(gòu)圖 三聯(lián)
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  用一個(gè)形狀或者素材切分整個(gè)頁(yè)面,畫(huà)面瞬時(shí)變得有趣生動(dòng)起來(lái),內(nèi)容區(qū)域也能得到有效劃分。

  這類(lèi)構(gòu)圖方式對(duì)內(nèi)容沒(méi)有過(guò)多要求,可隨意安排。具體排版可根據(jù)內(nèi)容來(lái)處理,也是現(xiàn)在專(zhuān)題頁(yè)面用得最多,最普遍的一種構(gòu)圖方式。

  b. 對(duì)稱(chēng)切割

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分,并且這兩部分是對(duì)立關(guān)系的情況下,比如說(shuō):對(duì)戰(zhàn),男女,冷熱等等。頁(yè)面一分為二,內(nèi)容劃分明確也更加具有視覺(jué)沖擊力。

  c. 組合切割

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  集中而規(guī)律的排列,從整體上抓住人們的視覺(jué)。這種構(gòu)圖方式適合那種每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的專(zhuān)題,例如示例中的幾個(gè)功能點(diǎn)和分類(lèi),都是屬于同一級(jí)的內(nèi)容,所占的比例也相同,用這種組合的排列能夠保持各內(nèi)容的關(guān)系,也能讓布局更有創(chuàng)意。

  d. 多重切割

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  不規(guī)則的構(gòu)圖,穩(wěn)定而銳利,干凈的排版,易于識(shí)別,不規(guī)則的構(gòu)圖方式,避免了畫(huà)面生硬,不易產(chǎn)生審美疲勞。不同的形狀和排列,呈現(xiàn)出來(lái)的視覺(jué)效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感,科技感,與鋒利感覺(jué)的專(zhuān)題,例如時(shí)裝,家電,以及游戲戰(zhàn)斗類(lèi)的專(zhuān)題等等。

  二、主體輪廓

  活動(dòng)的專(zhuān)題年年做,沒(méi)有新意,想更與眾不同?那就這樣處理吧,根據(jù)專(zhuān)題的主要內(nèi)容,從整體上構(gòu)建一個(gè)邊界或外形線,形成一個(gè)大的輪廓,將專(zhuān)題內(nèi)容巧妙的填充進(jìn)去。這種處理方式能夠讓用戶(hù)一眼就能了解到一些信息,符合專(zhuān)題主題,并且能夠讓頁(yè)面更有設(shè)計(jì)感,生動(dòng)且活潑。需要提醒的是設(shè)計(jì)的時(shí)候?qū)⑿螤畋M量輪廓化,加以強(qiáng)調(diào)突出,主體不需要太具象,舍棄一些繁瑣的、次要的元素,以免影響用戶(hù)閱讀內(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)意。

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  這類(lèi)構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確以及具象,能夠用物品或輪廓直接代表,比如:端午可以用龍舟、粽子;中秋可以用月餅、玉兔;會(huì)員可以用皇冠,鉆石等等等等,可根據(jù)具體的內(nèi)容來(lái)進(jìn)行嘗試。

  三、放射及透視

  通過(guò)整體放射狀加透視構(gòu)圖,使畫(huà)面呈現(xiàn)立體與空間感,視覺(jué)焦點(diǎn)明確,畫(huà)面沖擊力強(qiáng),富有動(dòng)感。需要注意的是放射狀的排版不太適合文字閱讀,要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類(lèi)的專(zhuān)題會(huì)較多的使用這種構(gòu)圖,突出動(dòng)感。

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  四、整體場(chǎng)景

  專(zhuān)題內(nèi)容不多,要突出趣味性,又怕用戶(hù)無(wú)聊,那就設(shè)計(jì)成一副美妙的插畫(huà)吧!讓用戶(hù)迅速置身在搭建的場(chǎng)景中,帶動(dòng)情緒,參與互動(dòng),直觀獲取有用信息。這種處理方式會(huì)使頁(yè)面信息表現(xiàn)的更加準(zhǔn)確順暢,快速有效的把目標(biāo)用戶(hù)帶入到頁(yè)面氛圍當(dāng)中。不過(guò)需要注意的是場(chǎng)景搭建對(duì)素材的要求比較高,明暗,陰影,透視以及層次感,體積都需要用心處理。這類(lèi)專(zhuān)題大多都會(huì)搭配動(dòng)畫(huà)一起實(shí)現(xiàn),在帶入感上更進(jìn)一層。在設(shè)計(jì)的時(shí)候,對(duì)專(zhuān)題內(nèi)容頭腦里要有畫(huà)面感,先搭建大的畫(huà)面關(guān)系,再往里頭添細(xì)節(jié)和內(nèi)容,切記場(chǎng)景不要搶了內(nèi)容的視覺(jué)焦點(diǎn),在適當(dāng)?shù)臅r(shí)候做些減法。

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  五、流程圖

  如果你拿到的專(zhuān)題是漸進(jìn)以及流向又或者是展示各節(jié)點(diǎn)的內(nèi)容,用別的形式總感覺(jué)不夠具象,那何不干脆做成一個(gè)個(gè)性化的流程圖?俗話說(shuō),千言萬(wàn)語(yǔ)不如一張圖,專(zhuān)題運(yùn)用這種構(gòu)圖方式能夠?qū)⒉襟E,關(guān)系,各個(gè)節(jié)點(diǎn)以及整體流向展示清楚,配合圖片展示,一個(gè)枯燥的流程瞬間變得個(gè)性十足,用戶(hù)瀏覽簡(jiǎn)單又明了,并且充滿(mǎn)了趣味性。

想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美
想做好專(zhuān)題頁(yè)!先學(xué)專(zhuān)題中的構(gòu)圖之美

  在網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越注重個(gè)性、趣味性以及視覺(jué)沖擊力的今天,專(zhuān)題頁(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è)專(zhuān)題有大創(chuàng)意的同時(shí)又具有小細(xì)節(jié),實(shí)現(xiàn)整體形式感的完美和諧的統(tǒng)一。

  另外最后提醒一下:所謂構(gòu)圖就是將表現(xiàn)主題的各個(gè)構(gòu)成要素按照主次關(guān)系放置在畫(huà)面相應(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í)也別影響到用戶(hù)閱讀內(nèi)容。

 

原文地址:http://mux.baidu.com/?p=5149

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1724.html
設(shè)計(jì)中空白狀態(tài)也可以發(fā)揮作用
Banner設(shè)計(jì)教程:讓文字講好banner的故事
圖趣網(wǎng)微信
建議反饋
×