專題頁在網(wǎng)頁設(shè)計中是必不可少的，尤其是電商，同時也是最考驗設(shè)計能力的。所以今天主要是給大家總結(jié)下專題頁的版式及元素，也包括企業(yè)官網(wǎng)首頁的分析，希望對大家以后做專題頁有幫助吧。

PS：文章中的舉例圖片比較多哦，大部分都來自花瓣設(shè)計師作品，大家可以多看看學(xué)習(xí)學(xué)習(xí)哈！

通欄是現(xiàn)在網(wǎng)頁中最常見的版式了，它的優(yōu)點就是比較簡潔大氣、有條理和空間感，官網(wǎng)首頁及一些高端的產(chǎn)品用的比較多。

圖1是一個關(guān)于綠鉆的專題頁面，采用的就是通欄式，并且沒有采用任何的修飾元素，整個頁面整潔有序，算是比較典型的中規(guī)中矩。

圖2護(hù)膚品的版式采用的也是通欄，但是它在分界處加入了一些波浪形狀的元素，就使得整個頁面比較有趣味，不至于特別單調(diào)，同時也與頭部的banner融為一體，特別貼合護(hù)膚品補水的這個主題。

圖3是一個企業(yè)官網(wǎng)，以黑色為背景，設(shè)計的比較簡潔大氣，給人高端有品質(zhì)的感覺。

塊狀的排版在電商類產(chǎn)品中算是最常見的了，它的優(yōu)點就是層級分明，讓人很清楚的知道它的重點，不會混亂，非常適合展示多款產(chǎn)品。

圖1是一個服飾的專題頁，它采用的是塊狀，但它沒有過多花哨的裝飾，只是把塊面變得比較圓潤不規(guī)則一些，外加一點點的小草元素，這樣就使得整個頁面即整潔也不失了趣味。其實一般采用塊狀的專題頁都會把塊做下變形或加些修飾元素，不會真的四四方方的放在那里。

圖2是以世界杯為背景在賣耳機，它這樣做也是為了蹭熱點，從而更好的促進(jìn)銷量。它的綠色草坪背景及banner非常有世界杯的代入感，再加上它采用塊狀的版式，以線性的方式展示，使得背景與產(chǎn)品相得益彰。

圖3是一個食品的專題頁，它的塊狀像是一片面包的形狀，又以不同顏色展示，還是比較吸引吃貨的。

圖4的小黃人工廠把塊狀與立體結(jié)合起來，非常吸引眼球，加的立體元素也很貼切。

長條狀也是電商中常見的，它與塊狀的區(qū)別在于一個是外形分割展示，一個是外形整體展示，整體展示不代表就沒有條理，只是外形一體，內(nèi)部同樣有版式有結(jié)構(gòu)。它的優(yōu)點就是比較整體大氣。

圖1圖2圖3都是服飾的專題頁，也都是長條狀的版式。

圖1整體以藍(lán)色為基調(diào)，給人以清涼的感覺，正好又是賣夏季的服飾，配色和版式非常合時宜。

圖2圖3都以黃色為主題色，裝飾的元素也都是花和云朵，感覺非常青春陽光。

時間軸在節(jié)日主題或慶?；顒拥膶ｎ}頁中用的比較多，這種版式特別適合那些走敘事或走煽情路線的產(chǎn)品，因為它可以很循序漸進(jìn)的表達(dá)主題。

圖1是一個關(guān)于求婚的專題頁，它把捧花的繩子作為一個時間軸去延伸，很清楚的表達(dá)了他們的感情走向，同時這個捧花的繩子也成為此專題頁中唯一的亮點。

引導(dǎo)式不僅僅指箭頭，還可以是指帶有指向意義的形狀或元素。它的優(yōu)點是比較靈活多變，可以在紛雜的頁面中給人指引方向。

圖1是關(guān)于美食的專題頁，采用的就是引導(dǎo)式，它的每一個箭頭都像是一個指引，讓你跟著它走，同時它的手繪元素也讓人覺得頁面非常熱鬧生動，還有突出的價格也實惠，有讓人想買的沖動，就是看食物的描述稍微有點費勁。

圖2圖3圖4都是采用的迷宮線式的引導(dǎo)，相對于圖1的箭頭而言，它更加直觀明顯，這種引導(dǎo)比較適合做多個人物或產(chǎn)品的介紹，不會單調(diào)的同時，也可以很清晰的閱讀。

S曲線顧名思義就是以S為走向展開內(nèi)容。它與引導(dǎo)式本質(zhì)其實差不多，只不過是引導(dǎo)的形狀不一樣，它的優(yōu)點自然也是比較靈活生動。

圖1是關(guān)于旅行的專題頁，整個走向以飛機的S航線為引導(dǎo)展開景點，背景也采用的是藍(lán)天白云，非常契合旅行的主體。

傾斜式相信大家也知道，它最主要的特點就是動感、活力有節(jié)奏。一般想突出活力動感的產(chǎn)品會采用這種版式，比如運動、汽車類的產(chǎn)品。

圖1圖2圖3采用的都是傾斜式排版。

圖1傾斜的紅色背景元素，非常突出，就是整體感覺產(chǎn)品略顯弱了些。

圖2的產(chǎn)品官網(wǎng)整體排版整潔別致，同時用色也給人一種天然的信任感，比較符合官網(wǎng)的穩(wěn)重大氣。

圖3汽車產(chǎn)品非常吸引眼球，傾斜的背景像公路一樣，感覺汽車一直在往前開，動感十足，個人感覺很棒。

全版式是指頁面沒有任何塊狀分割及花哨的裝飾元素，整體以純色為底色。它最大的特點就是以極簡的方式來突顯產(chǎn)品的品質(zhì)感。一般高端雅致有品質(zhì)感的產(chǎn)品使用的頗多。

圖1是一個花茶的產(chǎn)品，它選擇大量的留白，沒有過多的裝飾，整體感覺非常清新雅致。

左右分欄式是指把頁面分為左右兩色來進(jìn)行排版，這種版式不是特別多見，它主要的優(yōu)點就是對稱和清晰。

圖1是以一個地毯的流向來左右分欄，采用同色系配色，整體也還比較融合。同時它也不止采用了左右分欄式，還采用了塊狀版式。

自由式也稱不規(guī)則式，它沒有過多的條條框框，靈活度高，整體大氣，設(shè)計感比較強，一些想突出個性設(shè)計感的產(chǎn)品官網(wǎng)會采用這種版式。

圖1是一個元素資源的網(wǎng)頁，整體設(shè)計感強，配色大膽簡潔，留白也恰到好處，而它也不僅僅是自由式，也可以說它是全版式。

總結(jié)：不知道大家有沒有發(fā)現(xiàn)，其實很多的版式及元素都是根據(jù)它的頭部banner來確定最終的版式風(fēng)格及元素的。所以在做專題頁的時候，開始的風(fēng)格定位及banner都非常重要。并且專題頁的版式也不僅僅局限為一種，許多專題頁也會采用多種版式結(jié)合。所以這些大家都不要局限，多多發(fā)揮自己的創(chuàng)意，也一定能做好。