網頁設計自學者常利用Wordpress練習架網，以及利用免費模板去調整頁面版型，
和流程導流的設計。然而，對於剛接觸到網頁架構的初學者來說，
光是套用模板，還有進入後台看到密密麻麻的英文，和一大堆看不懂的區塊分類，
就夠頭痛的了，更不知道該從哪裡著手。
這時，想要快速讓自己進入狀況、調整好版型，
要知道網站是由不同頁面組成的，因此你得先瞭解頁面區塊分佈的邏輯架構：
網頁組成部分
網站是由不同網頁通過超連結連接而成的，而不同網頁也是由不同模組組成的。
我們設計的是一個像蜘蛛網一樣的網路，而不是一張海報。
所以我們在設計網站時要格外考慮從用戶角度出發看到的網站，
而不能孤立地把它想像成一個平面作品。
首頁
訪問一個網站時第一個我們觸及的就是網站首頁。
首頁別名叫作Index或者Default，是索引和目錄的意思。
在網站發展的前期階段，網站並不是富媒體，而是類似於一本書一樣：
首頁類似書籍的目錄，需要查看哪個子網頁就點擊連結即可進入。
到了現在，網站首頁仍然是引導用戶進入不同區域的一個“目錄”，
這個目錄除了導航功能外也要露出一部分內容給用戶來吸引點擊，
露出的部分一定要有一個“更多”按鈕來指引用戶找到二級頁面。
首頁原型圖- 截圖自網路
二級頁面
在邏輯上，首頁是一級頁面，從首頁點擊進入的頁面均為二級頁面。
二級頁面之後還有三級頁面等級別。從點擊的概率上來說，越靠前訪問量越高。
一般網站有三級頁面，就是為了避免用戶迷失。
為此還會在頁面中加入麵包屑導航。
麵包屑導航就是在頁面第一層出現的 首頁 > 體育 > NBA頻道 這樣的超連結結構，
方便用戶理解自己在那裡，並且點擊可以回到其他頁面。
二級頁面原型圖- 截圖自網路
底層頁
在網站結構中最後提供用戶實質資訊的頁面就是底層頁。
比如，在門戶網站首頁或二級頁面中我們點擊感興趣的標題後，
在底層頁中才會看到全部的資訊。
等用戶閲讀到底層後可以順勢在左側或右側的欄位
尋找用戶可能感興趣的相關內容；
在底側可以看到網友的評論；底側也會有分享按鈕、贊功能等；
如果側欄用戶轉化率比較差，最底部還可以再次出現推薦相關資訊的功能。
總之，在用戶閲讀完自己喜歡的資訊後，
一定要繼續吸引用戶順勢閲讀其他的資訊或者回到首頁。
底層頁原型圖- 截圖自網路
廣告
至於門戶類網站如何盈利？廣告是變現方法之一。
網站的廣告一般由負責運營需求的設計師負責，但是也可能由網頁設計師、
產品側設計師來完成。在網站中常見到的廣告圖形式就是banner。
banner一般尺寸巨大，在網站之中非常顯眼。
因此也不一定是外部廣告，也有內部活動、推薦資訊等。
那麼banner圖的尺寸有固定嗎？答案是沒有。
Banner的寬度有兩種，一種是滿屏（1920PX）、
一種是基於安全距離的滿尺寸（1200px或1000px）。
高度就要注意了：一般以1920x1080px為基準的用戶屏幕，
加上瀏覽器本身與插件和底部工具條等距離，留給網站的一屏高度大概為900px，
所以banner不可以做得很高，否則第一層資訊會顯示得不夠。
你可能會說，那就讓用戶往下拉啊。但是在網站的訪問用戶之中，
第二屏觸及到的用戶比第一屏會少很多。也就是
很多用戶可能點擊網站後就會跳走或者關閉，
所以第一屏的資訊就顯得非常重要了。
那麼除了首頁巨大的banner廣告位，網站還有哪些廣告形式呢？
對聯廣告。
在門戶網站中我們經常會看到網站左右安全區域之外
會有連個隨屏幕滾動的像“對聯”一樣的廣告，通常banner也會是一個廣告內容，
並且居中會彈出由HTML5技術或Flash技術製作出來的彈窗廣告。
這種廣告一般組合售賣，也就是說一進網站你就會被全面轟炸，
無法不注意到這個廣告的存在。這種廣告點擊進入還有配合的專題頁等，
可見需要設計師配合的地方非常多。
對聯廣告形式- 截圖自網路
Footer
在網站具體的頁面設計中，底部會有一個區域我們稱之為footer。
一般footer的顏色都會比上邊內容區域要暗，因為footer的資訊在邏輯的級別上
是次要的。footer區域的主要功能是版權聲明、聯繫方式、友情連結、社群導流
等資訊。在設計時一定要降級處理，不要讓footer變得特別明顯。
＜延伸閱讀＞
主圖 Photo by Domenico Loia on Unsplash/ 資源來源 西见
本文內容為今日精選文章及部分創作，未經允許不得複製、轉載。
留言列表
