20款精致APP和Web设计模板素材（附演示链接）

好的设计模板素材总是多多益善，有了模板的助力，设计师就能快速得到灵感，轻松设计出满意的产品。

本日小摹为大家分享一波精良的APP&Web设计模板，希望它们能在这个冬天，给忙于完成各种设计的UI设计师们带来帮助。
闲话少叙，我们一起来看看吧~

10个APP设计模板

1. 音乐类APP-Music Streaming

这是一款风格简约的音乐播放器模板，白色背景搭配渐变色元素，既担保了整体风格清新大略，又突出了界面中的重点信息。
这款素材包含8个页面，可以为设计师供应很好的视觉搭配参考。

素材地址：https://dribbble.com/shots/5668067-Music-Streaming-App-Freebie-Day-341-365-Project365

2. 社交类APP-Meetio

Meetio是一款社交类移动运用程序，丰富的滑动交互和卡片式设计，独特而富有个性。
UI kit资源包内包含超过80个页面，设计师可根据自己的需求进行选择。

素材地址：https://www.behance.net/gallery/72907227/Meetio-UI-Kit?ref=uistore.design

3. 酒店预订类APP-ROOK

这是一款利用摹客在线设计完成的酒店预定类APP原型模板，共有15个可以复用的页面。
这套模板包含了欢迎页、注册登录页、酒店房间列表页、房间详情页等，交互丰富，值得参考。

素材地址：https://www.mockplus.cn/example/rp/100000

4. 微信小程序-喜茶

近两年，微信小程序支持即开即用，无需下载，成为了非常热门的生态平台。
以喜茶为例的传统餐饮行业也纷纭推出了小程序，来办理排队点餐的问题。
这款喜茶的小程序模板也是利用摹客在线设计完成的，有16个可复用的页面素材，包括首页、点单、收货地址、订单查看等。

素材地址：https://www.mockplus.cn/example/rp/100009

5. 购物类APP-Shopping

这款设计简洁的购物APP素材共包含5个可编辑的页面，可自由编辑图层颜色，修正组件及图标，图标和设计的细节都非常完美。

素材地址：https://dribbble.com/shots/6531942-Shopping-App-Free-UI-Kit?ref=uistore.design

6. 音乐类APP-L'euphorie

这是一款酷炫的音乐APP模板，泛黄的色调，古典的配图，独特的古典设计在时下花里胡哨的各种音乐产品中显得独树一帜。

素材地址：https://dribbble.com/shots/5596849-L-euphorie-Music-UI-Kit-freebie?ref=uistore.design

7. 优惠券和折扣信息APP

优惠券和折扣信息是我们常见的匆匆销办法。
随着互联网的发展，优惠券和折扣在电商领域也变得非常普遍。
这款专门发布匆匆销信息的APP，摈弃了电商行业常见的大红大紫配色，风格活泼有趣，令人面前一亮。

素材地址：https://dribbble.com/shots/5491647-Coupons-Discounts-App-Freebie-Day-306-365-Project365

8. 生活类APP-随收鲸

这是本届摹客设计大赛冠军作品。
选题环绕新环保法的发布和城市垃圾分类的全面推广展开。
这款APP设计⻚面交互逻辑清晰，整体配色舒适，插画设计极具特色。
包含64个页面和完全的产品文档。

素材地址：https://www.mockplus.cn/ux2020/work/aalrv

9. 网上银行APP

这是一个为美国银行设计的网银APP，包含账户信息、历史账单、卡包、交易等常用的业务页面。
配色保留了美国银行的标准配色，以及将银行LOGO作为了主屏幕的图标，是一款功能完善，设计合理的实用APP模板素材。

素材地址：https://dribbble.com/shots/14708230-Bank-of-America-Online-Banking-Mobile-App-Concept

10. 房地产类APP

这是一款房地产售卖APP，可为环球高收入消费者供应高端公寓、别墅等售卖信息。
这套APP主色调选择了高端大气的紫色，突出了图片和价格等主要信息，图片、图标都进行了圆角化处理，给用户营造了很好的视觉体验。

素材地址：https://dribbble.com/shots/14736084-Real-Estate-Mobile-App-UI

10个web设计模板

11. 在线支付网站

在线支付目前已成为了一种深入骨髓的生活办法，可以让统统支付行为都变得大略。
而对应的界面设计也绝对是用户体验的主要一环。
这款在线支付网站的界面设计在同类型网站中也显得相称出色，值得借鉴参考。

素材地址：https://dribbble.com/shots/14737248-online-payments-landing-page

12. 插画资源管理网站

这是一款为创作者供应插画资源管理的网站，因此精美的插画是页面中不可或缺的元素。
页面其它元素的配色都与插图的色调相呼应，既不会喧宾夺主，又担保了视觉上的统一性。

素材地址：https://dribbble.com/shots/14735165-ReDraw-Illustration-Asset-Website-Design

13. 新闻资讯网站-CoLab

这是一个风格独特的新闻资讯类网站设计模板。
设计排版参考了传统的报纸风格，带领用户一秒回到上个世纪。

素材地址：https://dribbble.com/shots/14738567-CoLab-News-CSS-Grid

14. 协同办公正台-钉钉

这款协同办公正台原型，利用摹客在线设计完成，包含登录注册、事情首页、项目管理、邮件管理、日程等11个可复用的页面。
主页面采取了旁边构造框架，业务逻辑条理清晰，功能全面。
是一款值得参考的客户端模板。

素材地址：https://www.mockplus.cn/example/rp/100008

15.电商后台业务管理系统

这款电商后台业务管理系统通过摹客在线设计完成，包含登录注册、数据统计、信息管理、邮件等11个主要页面，每个页面都具备必要的交互设计，较好地呈现了电管理系统的根本功能。

素材地址：https://www.mockplus.cn/example/rp/100010

16. 房地产网站

这款为房地产商打造的网站，包含图文、表单、下拉菜单等常见的网页元素。
网站布局合理，色彩搭配丰富，图文并用，生动形象，便于浏览者快速访问干系版块。

素材地址：https://dribbble.com/shots/14736850-Real-Estate-Landing-Page

17. 慈善网站-Graisena

这是慈善网站Graisena的重设计，无论是暖色调的配色和配图，还是圆角图标按钮，都十分贴合网站的调性。

素材地址：https://dribbble.com/shots/13441155-Graisena-Landing-Page-Redesign

18. AI Web仪表板模板

众所周知，AI人工智能是互联网领域的未来趋势之一，因此关于AI智能的互联网产品设计也越来越盛行。
这款AI web仪表盘的设计，将人工智能和互联网产品设计很好地结合了寄来，既担保了功能的呈现，也担保了舒适的视觉搭配。

素材地址：https://dribbble.com/shots/14510797-AI-web-dashboard

19. 通讯企业网站-Nextiva

这是通讯企业网站Nextiva的重设计。
这一设计紧张突出了Nextiva为用户供应的多样化互换体验信息，采取了卡片式布局，整体风格简洁大方。

素材地址：https://dribbble.com/shots/14734387-Home-Page-Preview

20. 任务管理器-QERJA

合理方案韶光是高效事情的必备技能。
这款网站设计利用了渐变色作为背景，在知足任务管理的功能需求之上，也可以第一韶光让用户产生兴趣，提高产品的体验和竞争力。

素材地址：https://dribbble.com/shots/14735446-QERJA-Task-Manager

以上是小摹为大家整理的20款精良的产品设计模板素材，无论是设计风格，还是设计理念和思路，都非常值得学习和参考。
希望在2020年即将结束之际，能为各位设计师小伙伴带来更多创作灵感。

文末福利

末了给大家赠予摹客专业版激活码【cyrenett】

领取即可全方位体验这款强大的高保真设计利器，同时支持在线交付Sketch/PS/XD/Axure/Figma设计稿，还可以享受712小时在线客服支持

点击兑换激活码 或 复制链接领取 https://www.mockplus.cn/get-idoc?hmsr=cyrenett