在息縣網(wǎng)站網(wǎng)頁設計的初始階段，原型/線框/模型設計必然是一個關鍵步驟。如何通過網(wǎng)頁模型呈現(xiàn)設計思路，如何設計出優(yōu)秀的網(wǎng)頁模型，如何取得設計靈感？

這里，息縣網(wǎng)站為大家整理了一些設計精細并且優(yōu)質的免費網(wǎng)站設計模型，或許可以為你下一次的網(wǎng)頁模型設計提供一些思路。

免費網(wǎng)頁模型

在參考階段，免費的網(wǎng)頁模型往往是初學者的首選。毫不猶豫，我們?yōu)榇蠹曳钌弦慌赓M的網(wǎng)頁模型案例，拿走不謝！

1. Amcharts - 工具類網(wǎng)頁模型

參考點：登陸界面設計

該網(wǎng)站模型的原型是Amcharts公司開發(fā)的JavaScript Charts，是兼容性好的JavaScript、HTML5圖表開發(fā)工具，能滿足大部分的開發(fā)需求。

此模板中有Products，Download，Support，Buy，Demos等5個頁面，網(wǎng)站設計采用了懸浮導航欄和footer的效果，可用于訂單購買，登陸，圖標展示等網(wǎng)頁界面設計參考。

2. Dribbble - 設計類網(wǎng)頁設計模型

參考點：多資源多鏈接頁面布局

Dribbble是一個面向創(chuàng)作家、藝術工作者、設計師等創(chuàng)意類作品的人群的社區(qū)網(wǎng)站。作為設計平臺類的佼佼者，此網(wǎng)頁設計模板很好的展示了如何處理多資源多鏈接，圖文結合，圖文鏈接的網(wǎng)頁排版模式，是一個非常值得學習和參考的優(yōu)秀模板?？梢詤⒖嫉捻撁嬗校褐黜摗⒃O計師頁面、找工作頁面等。

3. BBC - 新聞類網(wǎng)頁設計模型

參考點：信息排版布局

BBC是英國最大的新聞廣播機構，屬于新聞類的網(wǎng)站，所以網(wǎng)站沒有過多花哨的內容，網(wǎng)站布局以信息排版為主?？梢詤⒖嫉捻撁嬗校褐黜摗⑿侣勴撁?、天氣頁面、視頻頁面等。

4. Shopify - 電子商務類網(wǎng)頁設計模板

參考點：電子商務信息布局

作為一個典型的在線電子商務平臺，Shopify不僅僅只是提供專業(yè)的電子商務網(wǎng)站建設服務，同時也開展基于社交網(wǎng)絡的電子商務，即賣家通過Shopify在Facebook、Pinterest、Twitter等幾個主流社交網(wǎng)絡平臺上就可以開店。

此網(wǎng)頁模型主要展示了登錄頁面、主頁、銷售方法頁面、價格頁面、博客頁面等。是制作電子商務類網(wǎng)站必看的模板之一。

5. edX - 教育類網(wǎng)頁設計模板

參考點：列表視圖布局

edX是一家在線課程提供商，為世界各地的學生提供了各種學科的在線大學課程，其中也包括一些免費的課程。整個網(wǎng)頁模板設計元素以圖片組件和文字組件為主，邏輯清晰，簡明直觀。

主要頁面有：主頁、課程列表頁面、課程詳情頁面、程序頁面、關于頁面。此模板適用于教育機構網(wǎng)站或在線課程類網(wǎng)站。課程介紹頁面的設計思路尤其值得學習。

6. Pexels - 圖片素材類網(wǎng)頁設計模板

參考點：圖片瀑布流設計

Pexels是一個高清圖片下載服務站點，為用戶提供海量共享圖片素材的網(wǎng)站，每周都會定量更新。網(wǎng)站首頁采用懸浮設計，將菜單欄和底部欄都是懸浮在固定位置，內容區(qū)域滾動。首頁圖片排列采用瀑布流的方式，多圖片滾動。包含的頁面有：瀏覽頁，下載頁，注冊頁，登陸頁。

PSD透視網(wǎng)站模型

擁有透視效果的網(wǎng)站設計模型可以讓你從不同角度展示你的設計布局，讓你的設計看起來更像真實的產(chǎn)品，而不是靜態(tài)的模型。

7. Perspective Website Mockup

參考點：等距角度切換

該透視網(wǎng)站模型是個簡單的模型，可以在一個透視展示中展示你的作品。這個PSD模型允許你在一個等距的角度切換設計。無論您是否需要一個頁面或更多的頁面，您都可以更改模板中的視圖數(shù)量。

8. Perspective Website PSD Mockup

參考點：智能物體改變側面外觀、背景

此案例以絕佳的獨特視角演示了網(wǎng)頁設計模板，多樣化的圖層設計和讓人眼前一亮的視覺體驗使整個設計充滿了高級感。通過智能對象改變背景，即可自動透視。

9. The Screens Perspective PSD Mockups

參考點：支持陰影、尺寸調整

The Screens是一個Behance和Dribbble上的設計師們用來展示他們的項目的免費PSD模型模板。高分辨率的視覺效果使其極具現(xiàn)代風格。作為一個智能PSD網(wǎng)站透視圖，您可以輕松地將自己的設計添加到智能圖層中，輕松實現(xiàn)陰影、尺寸的調整、屏幕編輯，以及自定義背景。

10. Misocial – Free Website PSD Mockup Template

參考點：智能元素+谷歌字體

MISocial是一個免費的音樂網(wǎng)站類PSD模板，在Behance上深受好評，獲得大量分享。 它可以幫助很多人更輕松，更快地創(chuàng)建新網(wǎng)站。

“我們精心制作了7個網(wǎng)頁，其中包含對開發(fā)新網(wǎng)站至關重要的元素。這些圖像都是免費的，并包含在智能對象中。我們使用的字體是免費的Google字體。”

11. Free Isometric Website Mockup

參考點：等距透視

這個網(wǎng)站模型旨在以優(yōu)雅、獨特而有吸引力的方式展示您的Web截圖。 這個模型由等距的Smart objects組成，這樣您就可以將您的獨特設計結合到2個模型中。這個模型有一個透視圖，并且文件是通過智能對象分層的，也就是說你可以通過自己定制頁面的元素來使用模板。

12. Perspective Presentation Web Mockup

參考點：主題定制

這個模型可以提供關于你的網(wǎng)站設計中的一個視角的特寫。該模板的分辨率達到了3000×2000px，可以完全分層的智能對象和多變的背景，便于你定制不同的主題。它還包括一個預先設計好的模板，以幫助你快速入門。

網(wǎng)站模型設計工具

這部分的內容主要是回答如何設計出優(yōu)秀的網(wǎng)頁模型。關于這個問題，主要是取決于網(wǎng)頁模型設計工具的選取。作為前期工作，網(wǎng)頁模型設計可低保真，也可高保真，可快速設計，也可慢工出細活。以下，為大家整理幾個好用的網(wǎng)頁模型設計工具。

1. Mockplus - 簡單快速的網(wǎng)頁模型設計工具

作為一款桌面端的網(wǎng)頁設計工具，Mockplus在原型/線框設計方面也同樣具有出色的表現(xiàn)。較其他在線網(wǎng)頁模型設計工具而言，Mockplus不僅僅是擅長于靜態(tài)模型的制作，在交互設計方面也尤其獨特的無法比擬的優(yōu)勢。

其最新發(fā)布的格子和數(shù)據(jù)自動填充功能針對多圖文的網(wǎng)頁布局案例來說十分便捷，例如Dribbble。設計師設計者可以快速填充：姓名、日期、文本（句子或段落）及郵箱等文本類型，常用的頭像（寫實/卡通）、辦公、美食及其他多種多樣主題的高清圖片。為設計師省去了大量的查找素材的時間。

2. Moqups - 在線網(wǎng)頁模型設計工具

息縣網(wǎng)站認為Moqups是一個非常好的、免費的HTML5應用，通過它可以創(chuàng)建樸素的線框圖、實體模型和UI概念圖。該程序使用起來非常簡單，內置的模板可以直接使用（模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等）。缺點在于它只能制作靜態(tài)的網(wǎng)頁展示，不能在實際演示中進行動態(tài)的操作。

3. Mockingbird - 在線網(wǎng)頁模型設計工具

Mockingbird是另一個流行的基于網(wǎng)絡的線框應用程序，其中包含了一些功能強大的功能，用于鏈接和分享您的網(wǎng)頁模型。Mockingbird允許您使用拖放編輯器快速創(chuàng)建界面。