2018年更全的App設(shè)計資源（工具+模板下載+例子）
在做移動App設(shè)計時，設(shè)計師想要更好的呈現(xiàn)視覺效果給用戶，不僅僅需要一款優(yōu)秀的App原型設(shè)計工具，同樣也需要適用和優(yōu)質(zhì)的原型模板和例子。Mockplus為大家提供了更佳的移動端mockup設(shè)計工具，mockup設(shè)計的例子以及模板資源下載（PSD）。
一，免費(fèi)的App原型設(shè)計工具
1. Mockplus
Mockplus 在最近幾年一直受到強(qiáng)烈的關(guān)注，我花了幾天時間使用了這款原型設(shè)計工具，果然是很簡單易用，并且交互功能很強(qiáng)大，無論是做wireframe還是mockup都能很好的呈現(xiàn)原型效果。當(dāng)然，如果你需要交互功能更加完善，那么這款A(yù)pp 原型設(shè)計工具絕對是你的不二之選。它的主要功能是：
-
簡單的拖拽實(shí)現(xiàn)快速交互
-
大量經(jīng)典圖標(biāo)和矢量圖標(biāo)
-
格式刷功能，組件樣式功能以及“格子”減少重復(fù)工作
-
UI流程圖呈現(xiàn)更好的視覺效果
-
團(tuán)隊協(xié)作功能進(jìn)行實(shí)時交流和協(xié)作
-
與Excel功能相近的“表格”組件
-
Sketch文檔導(dǎo)入
-
更多的項目例子和模板提供下載
花費(fèi)：基礎(chǔ)功能全部免費(fèi)
2. Fluid UI
Fluid UI是一款用于移動開發(fā)的原型設(shè)計工具，它能夠幫助設(shè)計師快速高效地完成產(chǎn)品原型圖的設(shè)計。
-
內(nèi)置超過1700款的線框圖和手機(jī)UI控件，會經(jīng)常進(jìn)行更新。
-
無平臺限制，支持Windows、Mac以及Linux系統(tǒng)。
-
包含超過2000個的iOS、Android以及Windows 8插件。
花費(fèi)：允許創(chuàng)建一個免費(fèi)項目（10個頁面）
3. Invision
Invision 是一款快速原型設(shè)計工具，在App UI 設(shè)計方面占據(jù)一定的優(yōu)勢，它主要功能是：
-
Responive Design（響應(yīng)式設(shè)計），采用了全自動化自適應(yīng)布局引擎，為越來越多的設(shè)備進(jìn)行設(shè)計適配。
-
利用InVision Studio，當(dāng)改變設(shè)計系統(tǒng)中某些 UI Component 的樣式后，整個設(shè)計文件中的相同 UI Component 都可以同步更新。
-
酷炫的動畫效果
-
設(shè)計協(xié)作，實(shí)時溝通
花費(fèi)：免費(fèi)創(chuàng)建一個原型項目
4. Sketch
Sketch我想大家都不陌生，Sketch 是最強(qiáng)大的移動應(yīng)用矢量繪圖設(shè)計工具，對于網(wǎng)頁設(shè)計和移動設(shè)計者來說，功能強(qiáng)大易用，支持自動切圖，并且具有移動設(shè)計模板，能夠大大節(jié)省設(shè)計師的時間和工作量，適合進(jìn)行網(wǎng)站設(shè)計、移動應(yīng)用設(shè)計、圖標(biāo)設(shè)計等。最近更新的以下主要亮點(diǎn)功能：
-
交互原型功能：畫板（Artboards）和熱區(qū)（Hotspot）鏈接實(shí)現(xiàn)頁面間的跳轉(zhuǎn)，實(shí)現(xiàn)動態(tài)交互原型
-
便捷的效果預(yù)覽：Sketch軟件內(nèi)部預(yù)覽、Sketch Mirror內(nèi)實(shí)時預(yù)覽、Sketch Cloud內(nèi)實(shí)時預(yù)覽。
-
強(qiáng)大的插件：Sketch還擁有專門的開發(fā)人員社區(qū)，不斷創(chuàng)造新的擴(kuò)展插件，來幫助設(shè)計師提高工作效率。
花費(fèi)：$99/年
二，App原型模板下載（PSD）
1. Free Isometric iPhone X App Mockup PSD
http://goodmockups.com/free-isometric-iphone-x-App-mockup-psd/
你可以使用以3D生成對齊的iPhone X App mockup演示文稿來展示你的應(yīng)用程序設(shè)計。這三個智能對象屏幕都放置在圖層面板的頂部，在放置你的設(shè)計后，可根據(jù)你的設(shè)計偏好來更改背景顏色，或填充用戶界面整體主題的顏色。
2. iPhone X - Free 4K PSD Mockups
https://www.behance.net/gallery/62410885/iPhone-X-Free-4K-Mockups
從逼真的3D模型中創(chuàng)建三種不同的高度且準(zhǔn)確的原生4K iPhone X模型， 可以免費(fèi)下載。
3. iPhone X & 8 Clay Angled
https://store.ramotion.com/product/iphone-x-8-clay-angled-mockups
這8個 clay mockups可以從最好的角度來展示你的應(yīng)用程序， 單個購買是$8，八個全部購買只需$24。
4. App Display Screen PSD Mockups
https://www.graphicsfuel.com/category/ui-mobile-Apps/
這些免費(fèi)的PSD文件是完全分層和可編輯的，你可以使用頂部的智能對象圖層來添加你的應(yīng)用程序屏幕并保存。 你還可以更改背景顏色和陰影以配合你的想法和設(shè)計。
5. 2 Free iOS App Presentation Mockups
https://dribbble.com/shots/4591883-2-Free-iOS-App-Presentation-Mockups
趕緊試試這些免費(fèi)的iOS App mockup吧，你可以自定義每個屏幕并且可以隱藏任何不需要的屏幕。
6. Android mobile App mockup
https://creativemarket.com/Graphicsworld125/256877-Mobile-App-Mock-Up-2?u=templatenet
由6個不同的mockup屏幕構(gòu)成的，需要付費(fèi)$12。有以下幾個主要特點(diǎn)：
-
像素尺寸：3400x2400
-
高分辨率：300 DPI
-
易于替換屏幕截圖
-
逼真的陰影
-
自動厚層
-
更改背景顏色
-
顏色模式：RGB
-
包含幫助文檔
-
最低Adobe版本：CS5
7. Free Samsung Galaxy S9 & S9+ App Mockup PSD
http://goodmockups.com/free-samsung-galaxy-s9-s9-App-mockup-psd/
這個PSD文件中包含5個屏幕重疊陰影設(shè)計。你可以根據(jù)你的App設(shè)計來自定義陰影的不透明度，這兩款三星Galaxy 手機(jī)（S9 & S9Plus）的分辨率并無區(qū)別，并可使用在5.8和6.2英寸的屏幕上, 有四款顏色可供挑選， 有紫丁香紫，午夜黑，鈦灰，珊瑚藍(lán)。
更多例子App mockup資源下載：
Concept iPhone X Free Download Mockup
https://www.behance.net/gallery/57582271/Free-PSD-Mockup-iPhone-X
Good Mockups
http://goodmockups.com
Sketch App Resources Website
https://www.sketchAppsources.com/all-free-sources.html
Pixeden
https://www.pixeden.com/mobile-Apps
Free PSD Mockups
https://www.graphberry.com/category/mock-ups
三、2018年最佳5個App mockup 界面設(shè)計例子
1. Productivity App Transition
https://dribbble.com/shots/4082589-Productivity-App-Transition
2. iphoneX project
https://dribbble.com/shots/4241730-iphoneX-project
3. App Calendar Plan Mockup
https://dribbble.com/shots/4597903-App-Calendar-Plan-Mockup
4. Movie App
https://dribbble.com/shots/4596226-Movie-App
5. Furniture App Concept
https://dribbble.com/shots/4562156-Furniture-App-Concept-UI-UX-Design
