作為網(wǎng)頁設(shè)計師，你的作品就是你專業(yè)水平的體現(xiàn)方式。所以，無論是參加面試還是個人作品展示，你的網(wǎng)頁模型是否能讓人眼前一亮，是否能在交互設(shè)計或視覺設(shè)計方面突出任何一點的優(yōu)勢，是你取得面試機會和贏得客戶的關(guān)鍵。

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

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

免費網(wǎng)頁模型

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

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

參考點：登陸界面設(shè)計

下載地址：http://doc.mockplus.cn/wp-content/uploads/2018/04/Amcharts.zip

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

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

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

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

下載地址：http://doc.mockplus.cn/wp-content/uploads/2018/04/Dribbble.zip

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

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

參考點：信息排版布局

下載地址：http://doc.mockplus.cn/wp-content/uploads/2018/04/BBC.zip

BBC是英國較大的新聞廣播機構(gòu)，屬于新聞類的網(wǎng)站，所以網(wǎng)站沒有過多花哨的內(nèi)容，網(wǎng)站布局以信息排版為主。可以參考的頁面有：主頁、新聞頁面、天氣頁面、視頻頁面等。

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

參考點：電子商務(wù)信息布局

下載地址：http://doc.mockplus.cn/wp-content/uploads/2016/12/Shopify.zip

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

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

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

參考點：列表視圖布局

下載地址：http://doc.mockplus.cn/wp-content/uploads/2017/01/edX1.zip

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

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

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

參考點：圖片瀑布流設(shè)計

下載地址：http://doc.mockplus.cn/wp-content/uploads/2018/04/Pexels.zip

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

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

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

http://m.ezekroy.com/wangzhansheji/3205.html 網(wǎng)頁設(shè)計有難題？12款網(wǎng)頁設(shè)計模板給你靈感！