無論是個人網站還是企業網站，選擇合適的網站類型，才能在消費者心中留下深刻印象，增加訪客對網站黏着度。因此，在設計網頁時必須考慮兩大要素：UI設計和UX設計，兩者相輔相成，缺一不可。那麼，常見的網站類型有哪些?

常見的網站類型有哪些?

● 品牌形象網站

品牌形象網站主要是利用強烈的網頁主視覺，將品牌介紹、價值等着重呈現，從而強化品牌形象。

品牌形象網站設計範例

Gary Sheng個人形象網站

盤點網站設計範例

Gary Sheng利用個人照片作為他的個人形象網站封面，並清晰地呈現他過去的經歷與專長，讓訪客直觀聯想到這就是他的個人網站。

TBWA品牌形象網站

盤點網站設計範例

TBWA網站利用鮮明色彩和顯眼的動態視覺效果作為界面的主視覺，同時利用大標題闡述品牌核心價值，相當直觀地向訪客傳遞品牌形象信息。

● RWD

RWD(Responsive Web Design)，中文稱作「響應式網頁設計」。此技術可使網站在不同裝置，包括電腦、手機及平板等，自動調整成合適的排版，給用戶提高良好的瀏覽體驗。

響應式網頁設計範例

Dropbox網頁

盤點網站設計範例

Dropbox利用流暢的網格和靈活的視覺效果，設計出非常出色的響應式網頁設計。從PC版到Wap版，不僅字體顏色會隨背景顏色變化而變化，圖像也會改變方向。另外，Dropbox還針對不同設備提供量身定製的體驗，例如PC版中會出現小箭頭引導訪客向下滾動以查看更多內容，Wap版卻沒有該功能出現;註冊區塊在PC版中是可見的，在Wap版中卻隱藏在CTA用語的按鈕後。

Dribbble網頁

盤點網站設計範例

Dribbble利用靈活的網格，在瀏覽Wap版時，PC版的五列排版會變為兩列。同時，為了防止訪客瀏覽網站時出現布局混亂，Dribbble還刪除多個項目以及搜索欄，並將菜單隱藏在漢堡圖片後。

● 電商網頁

相對其他網站類型，電商網站會更注重UI設計和UX設計的結合，如果兩者缺一，可能會降低消費者的購買動機，提高跳出率，不但影響網站轉換，更會影響消費者對品牌的形象。

電商網頁設計範例

Poketo網頁

盤點網站設計範例

網站將背景圖融入了產品，並利用鮮艷的色彩，充分展現品牌獨特的設計風格，給消費者的腦海中留下深刻的影像。當游標指向商品時，界面會出現「Quick Shop」的按鈕，按下隨即彈出視窗，為消費者提供便捷的購物體驗，減少跳轉頁面的等待時間。

膳魔師網頁

盤點網站設計範例

網站導航欄的商品分類相當細緻，整體布局非常整潔有條理，內容主次之分，也沒有過多的干擾元素，訪客在瀏覽期間能很快找到想要的信息。當游標指向商品時，即可看到商品的相關規格，讓訪客能快速選購所需商品。

● 專業服務型網站

服務型網站在主視覺不一定要強調品牌形象，但品牌專業性、服務內容、服務流程等都要清晰直觀地呈現，整體排版布局不僅要突出各區塊之間的關係，還要具備專業度與說服力之作用。

專業服務型網頁設計範例

Medallia網頁

盤點網站設計範例

網站上方的選單列表，清楚列出產品內容、品牌優勢、公司介紹等服務型網站必備內容，並用示意圖清楚呈現品牌專業與服務項目，從而增加品牌的說服力。網站首頁最下方則是列出客戶案例分析與反饋，點擊進入後會看到一系類的數據清楚呈現客戶購買服務後增加的營收等，加深消費者對品牌的信任度。

Go Education

盤點網站設計範例

網站首頁包含服務型網站必備的內容，比如產品優勢、服務流程、服務反饋及熱門文章等，給予消費者豐富且極具說服力的內容，增加消費者對服務的信任;利用CTA設計，妥善安排填單按鈕，增加消費者填單成為顧客的意願。

● 作品集網站

許多設計師在設計個人作品集網站，都會盡量將個人風格融入到網站里，從而給訪客留下深刻的印象;至於社區類/品牌類作品集網站，則會往簡約風格考慮，着重給用戶提供流暢的用戶體驗。

作品集網頁設計範例

Pinterest社區作品集

盤點網站設計範例

Pinterest堪稱圖片版的Twitter，以瀑布流形式展現作品，訪客無需翻頁，只要往下滾動就能不斷發現新的圖片。訪客也可將感興趣的圖片保存在Pinterest，其他網站也可以關注或轉發作品。

Jeremiah 個人作品集

盤點網站設計範例

Jeremiah 是一名產品設計師，同時也有不少網頁設計作品，專長是3D動畫、插畫等。因此在他的個人作品集中可以看出很多動畫和插畫類型的作品。網站風格方面也非常簡約，估計與他的經歷有莫大的關係。

從以上的網頁設計優秀案例我們不難看出，無論什麼類型的網站都離不開視覺設計與用戶體驗設計這兩大要素，而這也是企業網站必須關注的重點。如果您對網頁設計有任何疑惑，或正尋找一家專業的網頁製作公司，歡迎諮詢我們!