十六款值得一用的iPhone線框圖模板
來自專欄摹客產品設計專欄
5 人贊了文章
在任何網站或移動應用設計的過程中，線框圖作為設計元素和功能的圖示，它有助於幫助定義和更好地傳達信息層次結構，讓參與設計和開發的人員更好的理解設計師的思路和設計的功能點。
即使線框圖設計是一個比較耗時的過程，但在推進設計項目進度之前，通過線框圖了解項目的層次結構是非常有效的。那麼摹客小編今天收集了一些優秀的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線框圖設計案例，結合上面的各種蘋果機型的線框模板，再參照案例，相信你也能設計出讓人驚嘆的案例，成為知名設計師！
更多線框圖模板資源網站：
Dribbble
Sketchappsources
Templatemonster
推薦閱讀：