好的設計模板素材總是多多益善，有了模板的助力，設計師就能快速獲得靈感，輕松設計出滿意的產(chǎn)品。今天小摹為大家分享一波優(yōu)秀的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資源包內(nèi)包含超過80個頁面，設計師可根據(jù)自己的需求進行選擇。

?

素材地址：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. 微信小程序-喜茶

?

?

近兩年，微信小程序支持即開即用，無需下載，成為了非常熱門的生態(tài)平臺。以喜茶為例的傳統(tǒng)餐飲行業(yè)也紛紛推出了小程序，來解決排隊點餐的問題。這款喜茶的小程序模板也是使用摹客在線設計完成的，有16個可復用的頁面素材，包括首頁、點單、收貨地址、訂單查看等。

?

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

?

?

5. 購物類APP-Shopping

?

?

這款設計簡潔的購物APP素材共包含5個可編輯的頁面，可自由編輯圖層顏色，修改組件及圖標，圖標和設計的細節(jié)都非常完美。

?

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

?

?

6. 音樂類APP-L'euphorie

?

?

這是一款酷炫的音樂APP模板，泛黃的色調，古典的配圖，獨特的古典設計在時下花里胡哨的各種音樂產(chǎn)品中顯得獨樹一幟。

?

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

?

?

7. 優(yōu)惠券和折扣信息APP

?

?

優(yōu)惠券和折扣信息是我們常見的促銷方式。隨著互聯(lián)網(wǎng)的發(fā)展，優(yōu)惠券和折扣在電商領域也變得非常普遍。這款專門發(fā)布促銷信息的APP，擯棄了電商行業(yè)常見的大紅大紫配色，風格活潑有趣，令人眼前一亮。

?

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

?

?

8. 生活類APP-隨收鯨

?

?

這是本屆摹客設計大賽冠軍作品。選題圍繞新環(huán)保法的發(fā)布和城市垃圾分類的全面推廣展開。這款APP設計?面交互邏輯清晰，整體配色舒適，插畫設計極具特色。包含64個頁面和完整的產(chǎn)品文檔。

?

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

?

?

9. 網(wǎng)上銀行APP

?

?

這是一個為美國銀行設計的網(wǎng)銀APP，包含賬戶信息、歷史賬單、卡包、交易等常用的業(yè)務頁面。配色保留了美國銀行的標準配色，以及將銀行LOGO作為了主屏幕的圖標，是一款功能完善，設計合理的實用APP模板素材。

?

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

?

?

10. 房地產(chǎn)類APP

?

?

這是一款房地產(chǎn)售賣APP，可為全球高收入消費者提供高端公寓、別墅等售賣信息。這套APP主色調選擇了高端大氣的紫色，突出了圖片和價格等重要信息，圖片、圖標都進行了圓角化處理，給用戶營造了很好的視覺體驗。

?

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

?

?

10個web設計模板

?

11. 在線支付網(wǎng)站

?

?

在線支付目前已成為了一種深入骨髓的生活方式，可以讓一切支付行為都變得簡單。而對應的界面設計也絕對是用戶體驗的重要一環(huán)。這款在線支付網(wǎng)站的界面設計在同類型網(wǎng)站中也顯得相當出色，值得借鑒參考。

?

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

?

?

12. 插畫資源管理網(wǎng)站

?

?

這是一款為創(chuàng)作者提供插畫資源管理的網(wǎng)站，因此精美的插畫是頁面中不可或缺的元素。頁面其它元素的配色都與插圖的色調相呼應，既不會喧賓奪主，又保證了視覺上的統(tǒng)一性。

?

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

?

?

13. 新聞資訊網(wǎng)站-CoLab

?

?

這是一個風格獨特的新聞資訊類網(wǎng)站設計模板。設計排版參考了傳統(tǒng)的報紙風格，帶領用戶一秒回到上個世紀。

?

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

?

?

14. 協(xié)同辦公平臺-釘釘

?

?

這款協(xié)同辦公平臺原型，使用摹客在線設計完成，包含登錄注冊、工作首頁、項目管理、郵件管理、日程等11個可復用的頁面。主頁面采用了左右結構框架，業(yè)務邏輯條理清晰，功能全面。是一款值得參考的客戶端模板。

?

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

?

?

15.電商后臺業(yè)務管理系統(tǒng)

?

?

這款電商后臺業(yè)務管理系統(tǒng)通過摹客在線設計完成，包含登錄注冊、數(shù)據(jù)統(tǒng)計、信息管理、郵件等11個重要頁面，每個頁面都具備必要的交互設計，較好地呈現(xiàn)了電管理系統(tǒng)的基礎功能。

?

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

?

?

16. 房地產(chǎn)網(wǎng)站

?

?

這款為房地產(chǎn)商打造的網(wǎng)站，包含圖文、表單、下拉菜單等常見的網(wǎng)頁元素。網(wǎng)站布局合理，色彩搭配豐富，圖文并用，生動形象，便于瀏覽者快速訪問相關版塊。

?

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

?

?

17. 慈善網(wǎng)站-Graisena

?

?

這是慈善網(wǎng)站Graisena的重設計，無論是暖色調的配色和配圖，還是圓角圖標按鈕，都十分貼合網(wǎng)站的調性。

?

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

?

?

18. AI Web儀表板模板

?

眾所周知，AI人工智能是互聯(lián)網(wǎng)領域的未來趨勢之一，因此關于AI智能的互聯(lián)網(wǎng)產(chǎn)品設計也越來越流行。這款AI web儀表盤的設計，將人工智能和互聯(lián)網(wǎng)產(chǎn)品設計很好地結合了寄來，既保證了功能的呈現(xiàn)，也保證了舒適的視覺搭配。

?

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

?

?

19. 通訊企業(yè)網(wǎng)站-Nextiva

?

這是通訊企業(yè)網(wǎng)站Nextiva的重設計。這一設計主要突出了Nextiva為用戶提供的多樣化交流體驗信息，采用了卡片式布局，整體風格簡潔大方。

?

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

?

?

20. 任務管理器-QERJA

?

?

合理規(guī)劃時間是高效工作的必備技能。這款網(wǎng)站設計使用了漸變色作為背景，在滿足任務管理的功能需求之上，也可以第一時間讓用戶產(chǎn)生興趣，提高產(chǎn)品的體驗和競爭力。

?

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

?

?

以上是小摹為大家整理的20款優(yōu)秀的產(chǎn)品設計模板素材，無論是設計風格，還是設計理念和思路，都非常值得學習和參考。希望在2020年即將結束之際，能為各位設計師小伙伴帶來更多創(chuàng)作靈感。

?