作為網頁設計師，你的作品就是你專業水平的最好體現方式。所以，無論是參加面試還是個人作品展示，你的網頁模型是否能讓人眼前一亮，是否能在互動設計或視覺設計方面突出任何一點的優勢，是你取得面試機會和贏得客戶的關鍵。
在網頁設計的初始階段，原型/線框/模型設計必然是一個關鍵步驟。如何通過網頁模型呈現設計思路，如何設計出優秀的網頁模型，如何取得設計靈感？
這裡，Mockplus為大家整理了一些設計精細並且優質的免費網站設計模型，或許可以為你下一次的網頁模型設計提供一些思路。
免費網頁模型
在參考階段，免費的網頁模型往往是初學者的首選。毫不猶豫，我們為大家奉上一批免費的網頁模型案例，拿走不謝！
1. Amcharts - 工具類網頁模型
參考點：登陸介面設計
下載地址：doc.mockplus.cn/wp-content/…
該網站模型的原型是Amcharts公司開發的JavaScript Charts，是相容性好的JavaScript、HTML5圖表開發工具，能滿足大部分的開發需求。
此模板中有Products，Download，Support，Buy，Demos等5個頁面，網站設計採用了懸浮導航欄和footer的效果，可用於訂單購買，登陸，圖示展示等網頁介面設計參考。
2. Dribbble - 設計類網頁設計模型
參考點：多資源多連結頁面佈局
下載地址：doc.mockplus.cn/wp-content/…
Dribbble是一個面向創作家、藝術工作者、設計師等創意類作品的人群的社群網站。作為設計平臺類的佼佼者，此網頁設計模板很好的展示瞭如何處理多資源多連結，圖文結合，圖文連結的網頁排版模式，是一個非常值得學習和參考的優秀模板。可以參考的頁面有：主頁、設計師頁面、找工作頁面等。
3. BBC - 新聞類網頁設計模型
參考點：資訊排版佈局
下載地址：doc.mockplus.cn/wp-content/…
BBC是英國最大的新聞廣播機構，屬於新聞類的網站，所以網站沒有過多花哨的內容，網站佈局以資訊排版為主。可以參考的頁面有：主頁、新聞頁面、天氣頁面、視訊頁面等。
4. Shopify - 電子商務類網頁設計模板
參考點：電子商務資訊佈局
下載地址：doc.mockplus.cn/wp-content/…
作為一個典型的線上電子商務平臺，Shopify不僅僅只是提供專業的電子商務網站建設服務，同時也開展基於社交網路的電子商務，即賣家通過Shopify在Facebook、Pinterest、Twitter等幾個主流社交網路平臺上就可以開店。
此網頁模型主要展示了登入頁面、主頁、銷售方法頁面、價格頁面、部落格頁面等。是製作電子商務類網站必看的模板之一。
5. edX - 教育類網頁設計模板
參考點：列表檢視佈局
下載地址：doc.mockplus.cn/wp-content/…
edX是一家線上課程提供商，為世界各地的學生提供了各種學科的線上大學課程，其中也包括一些免費的課程。整個網頁模板設計元素以圖片元件和文字元件為主，邏輯清晰，簡明直觀。
主要頁面有：主頁、課程列表頁面、課程詳情頁面、程式頁面、關於頁面。此模板適用於教育機構網站或線上課程類網站。課程介紹頁面的設計思路尤其值得學習。
6. Pexels - 圖片素材類網頁設計模板
參考點：圖片瀑布流設計
下載地址：doc.mockplus.cn/wp-content/…
Pexels是一個高清圖片下載服務站點，為使用者提供海量共享圖片素材的網站，每週都會定量更新。網站首頁採用懸浮設計，將選單欄和底部欄都是懸浮在固定位置，內容區域滾動。首頁圖片排列採用瀑布流的方式，多圖片滾動。包含的頁面有：瀏覽頁，下載頁，註冊頁，登陸頁。
PSD透視網站模型
擁有透視效果的網站設計模型可以讓你從不同角度展示你的設計佈局，讓你的設計看起來更像真實的產品，而不是靜態的模型。
7. Perspective Website Mockup
參考點：等距角度切換
下載地址：dribbble.com/shots/15070…
該透視網站模型是個簡單的模型，可以在一個透視展示中展示你的作品。這個PSD模型允許你在一個等距的角度切換設計。無論您是否需要一個頁面或更多的頁面，您都可以更改模板中的檢視數量。
8. Perspective Website PSD Mockup
參考點：智慧物體改變側面外觀、背景
下載地址：
此案例以絕佳的獨特視角演示了網頁設計模板，多樣化的圖層設計和讓人眼前一亮的視覺體驗使整個設計充滿了高階感。通過智慧物件改變背景，即可自動透視。
9. The Screens Perspective PSD Mockups
參考點：支援陰影、尺寸調整
下載地址：dribbble.com/shots/40340…
The Screens是一個Behance和Dribbble上的設計師們用來展示他們的專案的免費PSD模型模板。高解析度的視覺效果使其極具現代風格。作為一個智慧PSD網站透檢視，您可以輕鬆地將自己的設計新增到智慧圖層中，輕鬆實現陰影、尺寸的調整、螢幕編輯，以及自定義背景。
10. Misocial – Free Website PSD Mockup Template
參考點：智慧元素+谷歌字型
下載地址：dribbble.com/shots/34001…
MISocial是一個免費的音樂網站類PSD模板，在Behance上深受好評，獲得大量分享。 它可以幫助很多人更輕鬆，更快地建立新網站。
“我們精心製作了7個網頁，其中包含對開發新網站至關重要的元素。這些影象都是免費的，幷包含在智慧物件中。我們使用的字型是免費的Google字型。”
11. Free Isometric Website Mockup
參考點：等距透視
下載地址：dribbble.com/shots/28191…
這個網站模型旨在以優雅、獨特而有吸引力的方式展示您的Web截圖。 這個模型由等距的Smart objects組成，這樣您就可以將您的獨特設計結合到2個模型中。這個模型有一個透檢視，並且檔案是通過智慧物件分層的，也就是說你可以通過自己定製頁面的元素來使用模板。
12. Perspective Presentation Web Mockup
參考點：主題定製
下載地址：
這個模型可以提供關於你的網站設計中的一個視角的特寫。該模板的解析度達到了3000×2000px，可以完全分層的智慧物件和多變的背景，便於你定製不同的主題。它還包括一個預先設計好的模板，以幫助你快速入門。
網站模型設計工具
這部分的內容主要是回答如何設計出優秀的網頁模型。關於這個問題，主要是取決於網頁模型設計工具的選取。作為前期工作，網頁模型設計可低保真，也可高保真，可快速設計，也可慢工出細活。以下，為大家整理幾個好用的網頁模型設計工具。
1. Mockplus - 簡單快速的網頁模型設計工具
作為一款桌面端的網頁設計工具，Mockplus在原型/線框設計方面也同樣具有出色的表現。較其他線上網頁模型設計工具而言，Mockplus不僅僅是擅長於靜態模型的製作，在互動設計方面也尤其獨特的無法比擬的優勢。
其最新發布的格子和資料自動填充功能針對多圖文的網頁佈局案例來說十分便捷，例如Dribbble。設計師設計者可以快速填充：姓名、日期、文字（句子或段落）及郵箱等文字型別，常用的頭像（寫實/卡通）、辦公、美食及其他多種多樣主題的高清圖片。為設計師省去了大量的查詢素材的時間。
2. Moqups - 線上網頁模型設計工具
Moqups是一個非常好的、免費的HTML5應用，通過它可以建立樸素的線框圖、實體模型和UI概念圖。該程式使用起來非常簡單，內建的模板可以直接使用（模板包括單選按鈕、連結、影象佔位符、文字框以及滑塊等）。缺點在於它只能製作靜態的網頁展示，不能在實際演示中進行動態的操作。
3. Mockingbird - 線上網頁模型設計工具
Mockingbird是另一個流行的基於網路的線框應用程式，其中包含了一些功能強大的功能，用於連結和分享您的網頁模型。Mockingbird允許您使用拖放編輯器快速建立介面。