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">微信公眾號: 小梓的設計筆記