作为网页设计师，你的作品就是你专业水平的最好体现方式。所以，无论是参加面试还是个人作品展示，你的网页模型是否能让人眼前一亮，是否能在交互设计或视觉设计方面突出任何一点的优势，是你取得面试机会和赢得客户的关键。

在网页设计的初始阶段，原型/线框/模型设计必然是一个关键步骤。如何通过网页模型呈现设计思路，如何设计出优秀的网页模型，如何取得设计灵感？

这里，Mockplus为大家整理了一些设计精细并且优质的免费网站设计模型，或许可以为你下一次的网页模型设计提供一些思路。

免费网页模型

在参考阶段，免费的网页模型往往是初学者的首选。毫不犹豫，我们为大家奉上一批免费的网页模型案例，拿走不谢！

1. Amcharts - 工具类网页模型

参考点：登陆界面设计

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

该网站模型的原型是Amcharts公司开发的JavaScript Charts，是兼容性好的JavaScript、HTML5 图表开发工具，能满足大部分的开发需求。

此模板中有Products，Download，Support，Buy，Demos等 5 个页面，网站设计采用了悬浮导航栏和footer的效果，可用于订单购买，登陆，图标展示等网页界面设计参考。

2. Dribbble - 设计类网页设计模型

参考点：多资源多链接页面布局

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

Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群的社区网站。作为设计平台类的佼佼者，此网页设计模板很好的展示了如何处理多资源多链接，图文结合，图文链接的网页排版模式，是一个非常值得学习和参考的优秀模板。可以参考的页面有：主页、设计师页面、找工作页面等。

3. BBC - 新闻类网页设计模型

参考点：信息排版布局

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

BBC是英国最大的新闻广播机构，属于新闻类的网站，所以网站没有过多花哨的内容，网站布局以信息排版为主。可以参考的页面有：主页、新闻页面、天气页面、视频页面等。

4. Shopify - 电子商务类网页设计模板

参考点：电子商务信息布局

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

作为一个典型的在线电子商务平台，Shopify不仅仅只是提供专业的电子商务网站建设服务，同时也开展基于社交网络的电子商务，即卖家通过Shopify在Facebook、Pinterest、Twitter等几个主流社交网络平台上就可以开店。

此网页模型主要展示了登录页面、主页、销售方法页面、价格页面、博客页面等。是制作电子商务类网站必看的模板之一。