在做移動App設計時，設計師想要更好的呈現視覺效果給用戶，不僅僅需要一款優秀的App原型設計工具，同樣也需要適用和優質的原型模板和例子。Mockplus為大家提供了更佳的移動端mockup設計工具，mockup設計的例子以及模板資源下載（PSD）。

一，免費的App原型設計工具

1. Mockplus

Mockplus 在最近幾年一直受到強烈的關注，我花了幾天時間使用了這款原型設計工具，果然是很簡單易用，并且交互功能很強大，無論是做wireframe還是mockup都能很好的呈現原型效果。當然，如果你需要交互功能更加完善，那么這款App 原型設計工具絕對是你的不二之選。它的主要功能是：

• 簡單的拖拽實現快速交互

• 大量經典圖標和矢量圖標

• 格式刷功能，組件樣式功能以及“格子”減少重復工作

• UI流程圖呈現更好的視覺效果

• 團隊協作功能進行實時交流和協作

• 與Excel功能相近的“表格”組件

• Sketch文檔導入

• 更多的項目例子和模板提供下載

花費：基礎功能全部免費

2. Fluid UI

Fluid UI是一款用于移動開發的原型設計工具，它能夠幫助設計師快速高效地完成產品原型圖的設計。

• 內置超過1700款的線框圖和手機UI控件，會經常進行更新。

• 無平臺限制，支持Windows、Mac以及Linux系統。

• 包含超過2000個的iOS、Android以及Windows 8插件。

花費：允許創建一個免費項目（10個頁面）

3. Invision

Invision 是一款快速原型設計工具，在App UI 設計方面占據一定的優勢，它主要功能是：

• Responive Design（響應式設計），采用了全自動化自適應布局引擎，為越來越多的設備進行設計適配。

• 利用InVision Studio，當改變設計系統中某些 UI Component 的樣式后，整個設計文件中的相同 UI Component 都可以同步更新。

• 酷炫的動畫效果

• 設計協作，實時溝通

花費：免費創建一個原型項目

4. Sketch

Sketch我想大家都不陌生，Sketch 是最強大的移動應用矢量繪圖設計工具，對于網頁設計和移動設計者來說，功能強大易用，支持自動切圖，并且具有移動設計模板，能夠大大節省設計師的時間和工作量，適合進行網站設計、移動應用設計、圖標設計等。最近更新的以下主要亮點功能：

• 交互原型功能：畫板（Artboards）和熱區（Hotspot）鏈接實現頁面間的跳轉，實現動態交互原型

• 便捷的效果預覽：Sketch軟件內部預覽、Sketch Mirror內實時預覽、Sketch Cloud內實時預覽。

• 強大的插件：Sketch還擁有專門的開發人員社區，不斷創造新的擴展插件，來幫助設計師提高工作效率。

花費：$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演示文稿來展示你的應用程序設計。這三個智能對象屏幕都放置在圖層面板的頂部，在放置你的設計后，可根據你的設計偏好來更改背景顏色，或填充用戶界面整體主題的顏色。

2. iPhone X - Free 4K PSD Mockups

https://www.behance.net/gallery/62410885/iPhone-X-Free-4K-Mockups

從逼真的3D模型中創建三種不同的高度且準確的原生4K iPhone X模型， 可以免費下載。

3. iPhone X & 8 Clay Angled

https://store.ramotion.com/product/iphone-x-8-clay-angled-mockups

這8個 clay mockups可以從最好的角度來展示你的應用程序， 單個購買是$8，八個全部購買只需$24。

4. App Display Screen PSD Mockups

https://www.graphicsfuel.com/category/ui-mobile-Apps/

這些免費的PSD文件是完全分層和可編輯的，你可以使用頂部的智能對象圖層來添加你的應用程序屏幕并保存。 你還可以更改背景顏色和陰影以配合你的想法和設計。

5. 2 Free iOS App Presentation Mockups

https://dribbble.com/shots/4591883-2-Free-iOS-App-Presentation-Mockups

趕緊試試這些免費的iOS App mockup吧，你可以自定義每個屏幕并且可以隱藏任何不需要的屏幕。

6. Android mobile App mockup

https://creativemarket.com/Graphicsworld125/256877-Mobile-App-Mock-Up-2?u=templatenet

由6個不同的mockup屏幕構成的，需要付費$12。有以下幾個主要特點：

• 像素尺寸：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個屏幕重疊陰影設計。你可以根據你的App設計來自定義陰影的不透明度，這兩款三星Galaxy 手機（S9 & S9Plus）的分辨率并無區別，并可使用在5.8和6.2英寸的屏幕上, 有四款顏色可供挑選， 有紫丁香紫，午夜黑，鈦灰，珊瑚藍。

更多例子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 界面設計例子

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