設計課程1 構圖

1、第一課 構圖 一個成功的專題頁面，大部分會具有以下幾個出彩的要素：色彩、構圖、風格創(chuàng)意，細節(jié)等。一個頁面從無到有，設計師需要對整個頁面有全盤的設計和把控，良好的畫面分割能夠讓用戶第一眼看到這個頁面就能被視覺吸引，甚至不用瀏覽具體內(nèi)容就能了解這個頁面的很多信息。 同樣的素材，同樣的配色，不同的構圖能夠讓頁面出來的效果有天壤之別。如果你還抱著一個專題就是一個出色的頭圖，下面的內(nèi)容按部就班的填進去，那你就OUT了?，F(xiàn)在的專題設計越來越具有整體畫面感，看上去不像網(wǎng)站，更像是精美的雜志或者是精彩的平面設計作品。 好的頁面構圖能夠讓你頁面更出彩，也能讓你做設計更事半功倍。下面，我們就來看看一些好的專題都是

2、怎么構圖的。一、幾何切割 在現(xiàn)實生活與自然界中，我們隨處可見幾何圖形的存在，簡單的三角形、正方形、長方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美需求，適當?shù)漠嬅媲懈钅軌蚪o頁面帶來動感與節(jié)奏感。加入幾根線條，幾個塊面就能令頁面起到意想不到的效果。 實現(xiàn)的時候需要注意的是素材不適合太過復雜和花哨，一般會是純色大塊搭配漸變，主要突出形狀和區(qū)塊。a. 簡單切割 用一個形狀或者素材切分整個頁面，畫面瞬時變得有趣生動起來，內(nèi)容區(qū)域也能得到有效劃分。 這類構圖方式對內(nèi)容沒有過多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來處理，也是現(xiàn)在專題頁面用得最多，最普遍的一種構圖方式。b. 對稱切割 這種

3、構圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對立關系的情況下，比如說：對戰(zhàn)，男女，冷熱等等。頁面一分為二，內(nèi)容劃分明確也更加具有視覺沖擊力。c. 組合切割 集中而規(guī)律的排列，從整體上抓住人們的視覺。這種構圖方式適合那種每個區(qū)塊中的內(nèi)容屬于平級關系的專題，例如示例中的幾個功能點和分類，都是屬于同一級的內(nèi)容，所占的比例也相同，用這種組合的排列能夠保持各內(nèi)容的關系，也能讓布局更有創(chuàng)意。d. 多重切割 不規(guī)則的構圖，穩(wěn)定而銳利，干凈的排版，易于識別，不規(guī)則的構圖方式，避免了畫面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來的視覺效果也不一樣。這種構圖方式使用最多的一般是為了體現(xiàn)時尚感，科技

4、感，與鋒利感覺的專題，例如時裝，家電，以及游戲戰(zhàn)斗類的專題等等。課堂練習 來設計一幅“南京大學足球決賽”宣傳海報。要求用幾何切割的構圖法來設計二、主體輪廓 活動的專題年年做，沒有新意，想更與眾不同？那就這樣處理吧，根據(jù)專題的主要內(nèi)容，從整體上構建一個邊界或外形線，形成一個大的輪廓，將專題內(nèi)容巧妙的填充進去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁面更有設計感，生動且活潑。 需要提醒的是設計的時候將形狀盡量輪廓化，加以強調(diào)突出，主體不需要太具象，舍棄一些繁瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。從個人經(jīng)驗來說，小編一般會在拿到需求的時候先進行腦暴發(fā)散聯(lián)想，提取出一

5、些有用的信息，再從中挑選出適合元素去尋找一些圖片，通過圖片素材來激發(fā)創(chuàng)意。課堂練習 來設計一幅“書，使生活更美”或“親近自然”宣傳海報。要求用主體輪廓的構圖法來設計三、放射及透視 通過整體放射狀加透視構圖，使畫面呈現(xiàn)立體與空間感，視覺焦點明確，畫面沖擊力強，富有動感。需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字數(shù)量較少的情況下選擇此種構圖。一般游戲激戰(zhàn)類的專題會較多的使用這種構圖，突出動感。課堂練習 來設計一幅“信息時代”或“青春年華”宣傳海報。要求用放射及透視的構圖法來設計四、整體場景 專題內(nèi)容不多，要突出趣味性，又怕用戶無聊，那就設計成一副美妙的插畫吧！讓用戶迅速置

6、身在搭建的場景中，帶動情緒，參與互動，直觀獲取有用信息。 這種處理方式會使頁面信息表現(xiàn)的更加準確順暢，快速有效的把目標用戶帶入到頁面氛圍當中。不過需要注意的是場景搭建對素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會搭配動畫一起實現(xiàn)，在帶入感上更進一層。 在設計的時候，對專題內(nèi)容頭腦里要有畫面感，先搭建大的畫面關系，再往里頭添細節(jié)和內(nèi)容，切記場景不要搶了內(nèi)容的視覺焦點，在適當?shù)臅r候做些減法。五、流程圖 如果你拿到的專題是漸進以及流向又或者是展示各節(jié)點的內(nèi)容，用別的形式總感覺不夠具象，那何不干脆做成一個個性化的流程圖？俗話說，千言萬語不如一張圖，專題運用這種構圖

7、方式能夠將步驟，關系，各個節(jié)點以及整體流向展示清楚，配合圖片展示，一個枯燥的流程瞬間變得個性十足，用戶瀏覽簡單又明了，并且充滿了趣味性。 在網(wǎng)頁設計越來越注重個性、趣味性以及視覺沖擊力的今天，專題頁面的構圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見的一部分，不同的主題，不同的內(nèi)容，構圖排版的出發(fā)點也不盡相同，上面列舉出來的方法也可以搭配使用。 在拿到需求的時候，先不著急下手，構思的時候可以大膽嘗試，考慮內(nèi)容和風格，先確定構圖，再往里面添加內(nèi)容，充分考慮到內(nèi)容的排版，盡量做到讓一個專題有大創(chuàng)意的同時又具有小細節(jié)，實現(xiàn)整體形式感的完美和諧的統(tǒng)一。 另外最后提醒一下：所謂構圖就是將表現(xiàn)主題的各個構成要素按照主次關系放置在畫面相應的區(qū)域，形成