專題頁(yè)面設(shè)計(jì)

如何快速打造專題頁(yè)設(shè)計(jì)2021/5/91專題介紹00

活動(dòng)專題頁(yè)面，顧名思義是承載各種形式的節(jié)慶促銷、宣傳推廣、營(yíng)銷產(chǎn)品發(fā)布等等活動(dòng)的頁(yè)面，形式與內(nèi)容也多種多樣。

專題活動(dòng)站作為精準(zhǔn)營(yíng)銷的重要形式，為產(chǎn)品的針對(duì)性推廣作出了巨大貢獻(xiàn)，強(qiáng)烈的視覺(jué)表現(xiàn)成為了它最重要的特征。主要服務(wù)于產(chǎn)品活動(dòng)，所以上線時(shí)間相對(duì)較短，受眾廣，形式多樣等特點(diǎn)，多為一個(gè)星期到一個(gè)月左右。

專題的設(shè)計(jì)是通過(guò)它的精準(zhǔn)、迅猛、有力來(lái)服務(wù)于營(yíng)銷活動(dòng)并最終服務(wù)于產(chǎn)品的，所以這就需要設(shè)計(jì)師在處理日常專題時(shí)主題要突出、設(shè)計(jì)速度要快、視覺(jué)要驚艷。2021/5/92

一個(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)的效果有天壤之別。2021/5/93色彩（配色）顏色是最直接表現(xiàn)手法，掌握好節(jié)日的顏色特征，能更直接、準(zhǔn)確表達(dá)出相應(yīng)主題內(nèi)涵。春節(jié)圣誕節(jié)2021/5/94端午節(jié)情人節(jié)中秋節(jié)2021/5/95幾何切割01

在現(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)單切割

2021/5/96

用一個(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)圖方式。2021/5/97對(duì)稱切割02交叉法

中分法

斜切法2021/5/98

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

蜂窩法

瀑布流法2021/5/910

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

多折法

層疊法2021/5/912

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

就是抄襲現(xiàn)實(shí)中的物體。簡(jiǎn)單意義上說(shuō)就是眼前所能見(jiàn)到的一起事物（鼠標(biāo)、筆電腦、水杯等），這些生活中的事物通常具有豐富的形態(tài)和其延展的情感意義，我們可以利用它們來(lái)表達(dá)一些特定的主題，所以當(dāng)我們接到一個(gè)要表現(xiàn)的主題時(shí)可以通過(guò)它的生活原貌來(lái)激發(fā)靈感。

抄現(xiàn)實(shí)2個(gè)關(guān)鍵點(diǎn)：1.現(xiàn)實(shí)事物轉(zhuǎn)換成網(wǎng)頁(yè)載體過(guò)程中的形態(tài)取舍，如何讓觀者既能辨識(shí)出抄襲的物體，又能夠給未來(lái)信息留下足夠的自由排版空間；2.信息內(nèi)容于形狀載體的結(jié)合和排版，如何讓信息內(nèi)容完整的、有條理的排布到形態(tài)載體中。減法＊特征的提煉。＊審查刪除重復(fù)的描述分塊＊對(duì)信息進(jìn)行消化＊在吃透信息后，我們就可以開始正式的分塊，

分塊是一個(gè)逐層深入、由粗到細(xì)的過(guò)程。＊分塊完成后，結(jié)合造型，微調(diào)細(xì)節(jié)。加法＊具體內(nèi)容的填充＊?dú)夥蘸鸵曈X(jué)的補(bǔ)充＊特征的還原和細(xì)節(jié)補(bǔ)充。2021/5/914紅包2021/5/915紅包2021/5/916燈泡2021/5/9172021/5/918燈籠2021/5/919這類構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確以及具象，能夠用物品或輪廓直接代表，比如:中秋可以用月餅、玉兔；會(huì)員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來(lái)進(jìn)行嘗試。2021/5/920放射及透視06

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

地平線放射

頂部放射2021/5/9212021/5/922整體場(chǎng)景類07

專題內(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í)候做些減法。2021/5/923流程圖08

樹干法

“之”字法

水平分布2021/5/924

如果你拿到的專題是漸進(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)單