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

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

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

免費網(wǎng)頁(yè)模型

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

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

參考點(diǎn)：登陸界面設計

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

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

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

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

參考點(diǎn)：多資源多鏈接頁(yè)面布局

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

Dribbble是一個(gè)面向創(chuàng )作家、藝術(shù)工作者、設計師等創(chuàng )意類(lèi)作品的人群的社區網(wǎng)站。作為設計平臺類(lèi)的佼佼者，此網(wǎng)頁(yè)設計模板很好的展示了如何處理多資源多鏈接，圖文結合，圖文鏈接的網(wǎng)頁(yè)排版模式，是一個(gè)非常值得學(xué)習和參考的優(yōu)秀模板。可以參考的頁(yè)面有：主頁(yè)、設計師頁(yè)面、找工作頁(yè)面等。

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

參考點(diǎn)：信息排版布局

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

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

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

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

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

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

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

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

參考點(diǎn)：列表視圖布局

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

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

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

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

參考點(diǎn)：圖片瀑布流設計

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

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

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

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

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