【網頁設計】頁面區塊模組分佈邏輯 紮根網頁基本功

最新文章 今日成長

 

網頁設計自學者常利用Wordpress練習架網,以及利用免費模板去調整頁面版型,

和流程導流的設計。然而,對於剛接觸到網頁架構的初學者來說,

光是套用模板,還有進入後台看到密密麻麻的英文,和一大堆看不懂的區塊分類,

就夠頭痛的了,更不知道該從哪裡著手。

這時,想要快速讓自己進入狀況、調整好版型,

要知道網站是由不同頁面組成的,因此你得先瞭解頁面區塊分佈的邏輯架構:


 

網頁組成部分

網站是由不同網頁通過超連結連接而成的,而不同網頁也是由不同模組組成的。

我們設計的是一個像蜘蛛網一樣的網路,而不是一張海報。

所以我們在設計網站時要格外考慮從用戶角度出發看到的網站,

而不能孤立地把它想像成一個平面作品。

 

 

首頁

訪問一個網站時第一個我們觸及的就是網站首頁。

首頁別名叫作Index或者Default,是索引和目錄的意思。

在網站發展的前期階段,網站並不是富媒體,而是類似於一本書一樣:

首頁類似書籍的目錄,需要查看哪個子網頁就點擊連結即可進入。

到了現在,網站首頁仍然是引導用戶進入不同區域的一個“目錄”,

這個目錄除了導航功能外也要露出一部分內容給用戶來吸引點擊,

露出的部分一定要有一個“更多”按鈕來指引用戶找到二級頁面。

首頁原型圖- 截圖自網路 

 

二級頁面

在邏輯上,首頁是一級頁面,從首頁點擊進入的頁面均為二級頁面。

二級頁面之後還有三級頁面等級別。從點擊的概率上來說,越靠前訪問量越高。

一般網站有三級頁面,就是為了避免用戶迷失。

為此還會在頁面中加入麵包屑導航。

麵包屑導航就是在頁面第一層出現的 首頁 > 體育 > NBA頻道 這樣的超連結結構,

方便用戶理解自己在那裡,並且點擊可以回到其他頁面。

二級頁面原型圖- 截圖自網路 

 

底層頁

在網站結構中最後提供用戶實質資訊的頁面就是底層頁。

比如,在門戶網站首頁或二級頁面中我們點擊感興趣的標題後,

在底層頁中才會看到全部的資訊。

等用戶閲讀到底層後可以順勢在左側或右側的欄位

尋找用戶可能感興趣的相關內容;

在底側可以看到網友的評論;底側也會有分享按鈕、贊功能等;

如果側欄用戶轉化率比較差,最底部還可以再次出現推薦相關資訊的功能。

總之,在用戶閲讀完自己喜歡的資訊後,

一定要繼續吸引用戶順勢閲讀其他的資訊或者回到首頁。

底層頁原型圖- 截圖自網路 

 

 

廣告

至於門戶類網站如何盈利?廣告是變現方法之一。

網站的廣告一般由負責運營需求的設計師負責,但是也可能由網頁設計師、

產品側設計師來完成。在網站中常見到的廣告圖形式就是banner。

banner一般尺寸巨大,在網站之中非常顯眼。

因此也不一定是外部廣告,也有內部活動、推薦資訊等。

那麼banner圖的尺寸有固定嗎?答案是沒有。

Banner的寬度有兩種,一種是滿屏(1920PX)、

一種是基於安全距離的滿尺寸(1200px或1000px)。

高度就要注意了:一般以1920x1080px為基準的用戶屏幕,

加上瀏覽器本身與插件和底部工具條等距離,留給網站的一屏高度大概為900px,

所以banner不可以做得很高,否則第一層資訊會顯示得不夠。

你可能會說,那就讓用戶往下拉啊。但是在網站的訪問用戶之中,

第二屏觸及到的用戶比第一屏會少很多。也就是

很多用戶可能點擊網站後就會跳走或者關閉,

所以第一屏的資訊就顯得非常重要了。

那麼除了首頁巨大的banner廣告位,網站還有哪些廣告形式呢?

 

對聯廣告。

在門戶網站中我們經常會看到網站左右安全區域之外

會有連個隨屏幕滾動的像“對聯”一樣的廣告,通常banner也會是一個廣告內容,

並且居中會彈出由HTML5技術或Flash技術製作出來的彈窗廣告。

這種廣告一般組合售賣,也就是說一進網站你就會被全面轟炸,

無法不注意到這個廣告的存在。這種廣告點擊進入還有配合的專題頁等,

可見需要設計師配合的地方非常多。

對聯廣告形式- 截圖自網路 

 

 

Footer

在網站具體的頁面設計中,底部會有一個區域我們稱之為footer。

一般footer的顏色都會比上邊內容區域要暗,因為footer的資訊在邏輯的級別上

是次要的。footer區域的主要功能是版權聲明、聯繫方式、友情連結、社群導流

等資訊。在設計時一定要降級處理,不要讓footer變得特別明顯。


 

<延伸閱讀>

企業官網怎麼架?(上) 7要點10行銷元素

・粉專智慧互動,除了增加曝光還能做什麼?

 

 

主圖 Photo by Domenico Loia on Unsplash/ 資源來源 西见
本文內容為今日精選文章及部分創作,未經允許不得複製、轉載。

 

今日訊息