16款值得一用的iPhone線框圖模板 (PSD & Sketch）

在任何網站或移動應用設計的過程當中，線框圖做爲設計元素和功能的圖示，它有助於幫助定義和更好地傳達信息層次結構，讓參與設計和開發的人員更好的理解設計師的思路和設計的功能點。

即便線框圖設計是一個比較耗時的過程，但在推動設計項目進度以前，經過線框圖瞭解項目的層次結構是很是有效的。那麼摹客小編今天收集了一些優秀的iPhone線框PSD/PDF模板。但願對你有所幫助，也但願經過學習這些iPhone線框模板能夠將您的設計推向一個新的水平。

iPhone 6 線框模板

1. iPhone 6 Plus and iPhone 6 Wireframe

設計師：Andrea Ripamonti

格式：AI

價格：免費

儘管iPhone 6已不是目前主流的iPhone機型，但仍舊在手機市場中佔有很大一部分份額。因此設計師在設計應用程序時，仍須要考慮到適配iPhone6的設計模型。那麼第一步就是須要一個iPhone6或iPhone 6 plus的線框圖模板。

這個模板是純線框設計，既可下載到原型設計工具中使用，也能夠打印作手繪線框圖模板，很是方便。

下載地址

2. iPhone outline Mockup

設計師：Dominik Rezek

格式：AI, PSD

價格：免費

若是你須要製做黑色背景的iPhone6 線框圖，也能夠下載這款模板。黑色背景搭配淡藍色線條，優雅大方。這個模板提供AI和PSD兩種格式，能夠選擇更加適合你的格式下載哦。

下載地址

3. iPhone 6 Wireframes

設計師：Oleg Sukhorukov

格式：PDF、PSD

價格：免費

這款iPhone6線框模板提供了兩種格式文件供下載。模板中標註了頂部導航欄、底部導航欄以及鍵盤高度的位置。不管是打印或複製粘貼到原型工具中使用都很是方便。能夠說設計師很是貼心了。圖片下方設計師分別標註了iPhone6和iPhone6 plus適用的尺寸。

下載地址

4. iPhone6 Sketch Templates

設計師：Mike Warner

格式：PDF

價格：免費

這套iPhone 6的線框圖提供了4種不一樣的網格背景，適配iPhone 6和iPhone 6 plus兩種機型尺寸，分別有橫向和縱向的模板，知足各類屏幕需求。

下載地址

iPhone 7 線框圖模板

1. Free Printable iPhone 7 Templates

設計師：Matthew Stephens

格式：PDF

價格：免費

這是一款專門爲iPhone 7 準備的線框圖模板，設計師一樣標註了頂部導航欄、底部導航欄以及鍵盤高度的位置，能夠直接打印出來作手繪原型或線框圖設計。點狀背景便於設計中各類元素如按鈕、線條等的勾勒，保證設計圖的規範性。

下載地址

2. iPhone 7 wireframe

設計師：Oleg Sukhorukov

格式：PDF、PSD

價格：免費

摹客設計系統上線了！三大福利送不停！

領取福利

一樣是一款iPhone 7的打印版線框圖。在封面圖中能夠看到打印版線框圖的正確用法。根據設計師製做的導航欄以及鍵盤的高度標記，使用者沒必要再花心思和時間測量項目高度以及各組件高度在線框圖中應占的比例。

下載地址

3. iPhone 6/7 Printable Mockups

設計師: Bobby Kane

格式：Sketch、PDF

價格：免費

這款iPhone線框圖設計模板同時適用於iPhone 6和iPhone 7。由於從項目尺寸來說，iPhone 6和7沒有什麼區別。不一樣於上面全部的模板，這款線框圖只有屏幕線框，沒有手機外形線框，更方便線框手繪創做。

下載地址

4. iPhone 7 wireframe template

設計師：Mockplus

格式：-

價格：免費

這款iPhone線框模板是原型設計工具Mockplus中自帶的線框模板，添加了頂部狀態欄和底部home按鈕。預覽時更加形象化。網頁原型項目中時常會用到手機線框，內置的模板爲設計師們省去很多上網查找的時間。加快了設計進度。

下載地址

iPhone X 線框圖模板

1. Free iPhone X wireframe template

設計師：Fedza Miralem

格式：Sketch

價格：免費

目前iPhone X 做爲最新蘋果機型，因爲其特殊的劉海屏設計，市面上各種軟件都必須爲這個特殊的劉海讓步，從新設計應用的界面佈局。基於此，iPhone X的線框圖模板能夠說是時下煊赫一時的設計素材。這款線框圖素材加入了頭部導航和底部導航。中間留白部分交給設計師自由發揮。

下載地址

2. New Freebie: Printable iPhone X Templates

設計師：Matthew Stephens

格式：PDF

價格：免費

示例圖很是形象的展現了這是一款用於打印手繪的iPhone X 尺寸的線框圖模板。按慣例，圖稿中標註了劉海屏以及頭部信號欄，還有常規的各種導航相應的位置。文件中有橫屏和豎屏的模板，可根據項目自由選擇。

下載地址

3. iPhone X Wireframe with iOS 11 Guides

設計師：Riomar McCartney

格式：PDF、Sketch

價格：免費

這款設計適用於快速的iPhone X線框和原型設計。設計師在項目簡介中加入了一些簡單的iOS 11 UI指南，用於在紙上繪製一些想法。

在Sketch文件中，包含四種模板：

• 帶引導的純線框
• 帶引導和設備輪廓
• 帶導向和設備遮罩
• 帶引導和設備輪廓

一樣也能夠用B4和A4紙張尺寸打印，用於素描。

下載地址

4. iPhone X Wireframe & Mockup

設計師：Valentin Ciobanu

格式：PSD

價格：免費

這款設計模板中包含了一個可供A4打印格式的線框圖和一個PSD格式的線框文檔。模板中繪製的大格子定位很是方便。

下載地址

5. iPhone X Wireframe Kit Sketch Resources

設計師：Zeeshan Javaid

格式：Sketch

價格：免費

這款iPhone X 線框模板在Sketchappsources達到了7K+的下載量。足以見得目前iPhone X的受歡迎程度以及iPhone X應用的巨大市場潛力。

下載地址

iPhone線框圖實例鑑賞

1. iPhone Wireframe Template Sketch Resource

設計師：Edwin Delgado

格式：Sketch

價格：免費

這裏的例子是一個名爲Dynabike的應用程序。設計師的初衷是設計一些能夠供你們使用的例子。因此製做了這個能夠用於iPhone 6/7演示的線框圖案例。它帶有一些基本的線條，按鈕和框架。它有兩個頁面，一個用於Assets，另外一個用於做爲示例。

下載地址

2.iPhone Wireframes Sketch Resource

設計師：Cristian Pelaez

格式：Sketch

價格：免費

這是一個無機殼手機線框圖，包含了許多元素，如：標題，按鈕，輸入，警報，鍵盤等...導入Sketch中就能夠直接用起來啦！經過對真實案例的學習，你也能夠建立快速的iPhone線框。成長最快的學習方式就是臨摹。相信你學完以後必定會有所收穫！

下載地址

3.UIXO iOS 11 Wireframe Kit for iPhone X

設計師：Designmodo

格式：Sketch PSD

價格：$36

這是一款iPhone X的線框案例，包含100+頁面和20種常見頁面的設計，完整的展現了一個真實的手機應用程序所須要具備的頁面。對於初學者來講，這個項目能夠說很是友好，省時省力。但最好是能從中學習到設計的技巧和思路。這對於一個設計師來講，纔是最寶貴的財富。

下載地址

那麼，如何正確地利用以上列舉的iPhone線框模板呢？

在上網查線框圖的時候，每每也會看到另外一個名詞：原型圖。那關於線框圖設計、原型設計，兩者有什麼區別呢？

相關閱讀：你真的搞懂什麼是線框圖，什麼是原型圖了嗎？

你應該知道的線框圖設計的規則和禁忌

線框模板已經準備好了，那麼怎樣纔算是正確的使用方法呢？別急，往下看。

大多數的線框圖模板都支持Sketch，PSD, 以及PDF格式，便於導入相應的設計軟件中使用，例如Sketch，Mockplus等都能很好的支持模板導入。另外，在Mockplus官網中，他們提供了大量的App線框圖設計案例，結合上面的各類蘋果機型的線框模板，再參照案例，相信你也能設計出讓人驚歎的案例，成爲知名設計師！