10種專題頁版式及元素分析
專題頁在網頁設計中是必不可少的，尤其是電商，同時也是最考驗設計能力的。所以今天主要是給大家總結下專題頁的版式及元素，也包括企業官網首頁的分析，希望對大家以後做專題頁有幫助吧。
PS：文章中的舉例圖片比較多哦，大部分都來自花瓣設計師作品，大家可以多看看學習學習哈！
通欄是現在網頁中最常見的版式了，它的優點就是比較簡潔大氣、有條理和空間感，官網首頁及一些高階的產品用的比較多。
圖1 是一個關於綠鑽的專題頁面，採用的就是通欄式，並且沒有采用任何的修飾元素，整個頁面整潔有序，算是比較典型的中規中矩。
圖2護膚品的版式採用的也是通欄，但是它在分界處加入了一些波浪形狀的元素，就使得整個頁面比較有趣味，不至於特別單調，同時也與頭部的banner融為一體，特別貼合護膚品補水的這個主題。
圖3是一個企業官網，以黑色為背景，設計的比較簡潔大氣，給人高階有品質的感覺。
塊狀的排版在電商類產品中算是最常見的了，它的優點就是層級分明，讓人很清楚的知道它的重點，不會混亂，非常適合展示多款產品。
圖1是一個服飾的專題頁，它採用的是塊狀，但它沒有過多花哨的裝飾，只是把塊面變得比較圓潤不規則一些，外加一點點的小草元素，這樣就使得整個頁面即整潔也不失了趣味。其實一般採用塊狀的專題頁都會把塊做下變形或加些修飾元素，不會真的四四方方的放在那裡。
圖2是以世界盃為背景在賣耳機，它這樣做也是為了蹭熱點，從而更好的促進銷量。它的綠色草坪背景及banner非常有世界盃的代入感，再加上它採用塊狀的版式，以線性的方式展示，使得背景與產品相得益彰。
圖3是一個食品的專題頁，它的塊狀像是一片面包的形狀，又以不同顏色展示，還是比較吸引吃貨的。
圖4的小黃人工廠把塊狀與立體結合起來，非常吸引眼球，加的立體元素也很貼切。
長條狀也是電商中常見的，它與塊狀的區別在於一個是外形分割展示，一個是外形整體展示，整體展示不代表就沒有條理，只是外形一體，內部同樣有版式有結構。它的優點就是比較整體大氣。
圖1圖2圖3都是服飾的專題頁，也都是長條狀的版式。
圖1整體以藍色為基調，給人以清涼的感覺，正好又是賣夏季的服飾，配色和版式非常合時宜。
圖2圖3都以黃色為主題色，裝飾的元素也都是花和雲朵，感覺非常青春陽光。
時間軸在節日主題或慶祝活動的專題頁中用的比較多，這種版式特別適合那些走敘事或走煽情路線的產品，因為它可以很循序漸進的表達主題。
圖1是一個關於求婚的專題頁，它把捧花的繩子作為一個時間軸去延伸，很清楚的表達了他們的感情走向，同時這個捧花的繩子也成為此專題頁中唯一的亮點。
引導式不僅僅指箭頭，還可以是指帶有指向意義的形狀或元素。它的優點是比較靈活多變，可以在紛雜的頁面中給人指引方向。
圖1是關於美食的專題頁，採用的就是引導式，它的每一個箭頭都像是一個指引，讓你跟著它走，同時它的手繪元素也讓人覺得頁面非常熱鬧生動，還有突出的價格也實惠，有讓人想買的衝動，就是看食物的描述稍微有點費勁。
圖2圖3圖4都是採用的迷宮線式的引導，相對於圖1的箭頭而言，它更加直觀明顯，這種引導比較適合做多個人物或產品的介紹，不會單調的同時，也可以很清晰的閱讀。
S曲線顧名思義就是以S為走向展開內容。它與引導式本質其實差不多，只不過是引導的形狀不一樣，它的優點自然也是比較靈活生動。
圖1是關於旅行的專題頁，整個走向以飛機的S航線為引導展開景點，背景也採用的是藍天白雲，非常契合旅行的主體。
傾斜式相信大家也知道，它最主要的特點就是動感、活力有節奏。一般想突出活力動感的產品會採用這種版式，比如運動、汽車類的產品。
圖1圖2圖3 採用的都是傾斜式排版。
圖1傾斜的紅色背景元素，非常突出，就是整體感覺產品略顯弱了些。
圖2的產品官網整體排版整潔別緻，同時用色也給人一種天然的信任感，比較符合官網的穩重大氣。
圖3汽車產品非常吸引眼球，傾斜的背景像公路一樣，感覺汽車一直在往前開，動感十足，個人感覺很棒。
全版式是指頁面沒有任何塊狀分割及花哨的裝飾元素，整體以純色為底色。它最大的特點就是以極簡的方式來突顯產品的品質感。一般高階雅緻有品質感的產品使用的頗多。
圖1是一個花茶的產品，它選擇大量的留白，沒有過多的裝飾，整體感覺非常清新雅緻。
左右分欄式是指把頁面分為左右兩色來進行排版，這種版式不是特別多見，它主要的優點就是對稱和清晰。
圖1是以一個地毯的流向來左右分欄，採用同色系配色，整體也還比較融合。同時它也不止採用了左右分欄式，還採用了塊狀版式。
自由式也稱不規則式，它沒有過多的條條框框，靈活度高，整體大氣，設計感比較強，一些想突出個性設計感的產品官網會採用這種版式。
圖1是一個元素資源的網頁，整體設計感強，配色大膽簡潔，留白也恰到好處，而它也不僅僅是自由式，也可以說它是全版式。
總結：不知道大家有沒有發現，其實很多的版式及元素都是根據它的頭部banner來確定最終的版式風格及元素的。所以在做專題頁的時候，開始的風格定位及banner都非常重要。並且專題頁的版式也不僅僅侷限為一種，許多專題頁也會採用多種版式結合。所以這些大家都不要侷限，多多發揮自己的創意，也一定能做好。
ofollow,noindex">微信公眾號： 小梓的設計筆記