摹客
產(chǎn)品
下載
線框圖在產(chǎn)品設(shè)計(jì)中的地位是無法取代的，設(shè)計(jì)師在設(shè)計(jì)中添加色彩、排版和其他設(shè)計(jì)元素之前，線框圖可以說是一種呈現(xiàn)設(shè)計(jì)思路，測試用戶體驗(yàn)的最佳方式。
而Sketch對于設(shè)計(jì)師而言也是再熟悉不過的工具之一了，它不僅自身具有強(qiáng)大的功能，更有大量的插件與各類工具對接，設(shè)計(jì)師對于Sketch的喜愛與日俱增，網(wǎng)上也有越來越多的Sketch設(shè)計(jì)資源。
Sketch和線框圖的碰撞勢必是設(shè)計(jì)師的福音，為幫助設(shè)計(jì)師尤其是初學(xué)者們盡早開啟設(shè)計(jì)之路，進(jìn)行快速設(shè)計(jì)，本文中，我將和大家分享2018年19個(gè)最好的 Sketch線框圖套件，有Android/iOS 系統(tǒng)的，有web端的，總之，總有一款Sketch線框圖套件適合你！
設(shè)計(jì)師：Panagiotis
人氣：63063次瀏覽，20780次下載
Carbon是一個(gè)高品質(zhì)的material線框圖設(shè)計(jì)套件。它包含有15個(gè)畫板，具有清晰的結(jié)構(gòu)和具體的命名。該套件還包含許多可重復(fù)使用的元素，非常適合Android電子商務(wù)應(yīng)用程序的線框圖設(shè)計(jì)。
設(shè)計(jì)師：Nicolaj Reck
人氣：38619次瀏覽，18281下載
Simple wireframe kit套件是一個(gè)免費(fèi)的Sketch線框圖設(shè)計(jì)資源，這里包含了幾乎每個(gè)設(shè)計(jì)師都想要的設(shè)計(jì)元素，并且所有元素都是可以自定義屬性的，你可以輕松調(diào)整所有元素的大小，但不會出現(xiàn)混亂的比例和排版。
https://www.sketchappsources.com/free-source/2749-simple-wireframe-kit-sketch-freebie-resource.html
設(shè)計(jì)師：Megan Balaguer
人氣：102次點(diǎn)贊，4,146次瀏覽
移動應(yīng)用程序和網(wǎng)站設(shè)計(jì)一樣，也需要在前期使用線框圖來模擬用戶體驗(yàn)。Savvy Sketch iOS套件就是一款非常適合iPhone應(yīng)用程序設(shè)計(jì)人員的工具包。此UI工具包常更新，會根據(jù)新功能進(jìn)行添加，最新版本專注于iOS 10。此外，該工具包完全免費(fèi)。
https://dribbble.com/shots/2764752-The-Savvy-Sketch-iOS-Wireframe-Kit
設(shè)計(jì)師：George Frigo
人氣：61890次瀏覽，22344次下載
Moon Wireframe Kit包含了50個(gè)視圖供你選擇和使用，適用于iOS系統(tǒng)，涵蓋了基本線框圖，還包含可以讓你驚嘆的一些應(yīng)用項(xiàng)目的資源。視圖有以下類別：啟動畫面，登錄，菜單，設(shè)置，圖庫，訂閱，列表項(xiàng)，聯(lián)系人，個(gè)人資料，通知，評論，統(tǒng)計(jì)信息和購物車等等。
https://www.sketchappsources.com/free-source/1823-moon-wireframe-kit-sketch-freebie-resource.html
設(shè)計(jì)師：Ben Balderas
人氣：4369次瀏覽，1606次下載
Nolte是基于Brad Frost的原子設(shè)計(jì)創(chuàng)建的，因此這個(gè)UX套件在很大程度上會簡化你的線框圖制作流程。你可以使用預(yù)先制作的分子快速創(chuàng)建模板，或使用內(nèi)置原子構(gòu)建你自己的分子。
https://dribbble.com/shots/1592750-Wireframe-Kit-v2-for-Sketch
設(shè)計(jì)師：Ivor Hook
人氣：83197次瀏覽，35995下載
Snap是一個(gè)美觀和實(shí)用性兼具的資源，是Sketch專用的iOS線框圖工具包。使用該工具包，你可以快速產(chǎn)出iOS應(yīng)用程序的線框圖設(shè)計(jì)。此外，該工具包的元素還支持更多的自定義設(shè)計(jì)，你可以按需進(jìn)行運(yùn)用。
設(shè)計(jì)師：Anh Nguyen
人氣：312372次瀏覽，48074下載
Teracy是為幫助設(shè)計(jì)師快速完成線框圖設(shè)計(jì)而創(chuàng)建的。該套件包括用于Web的基本UI元素，移動設(shè)備的UI元素以及一些其他設(shè)備的UI元素。你還可以使用此線框圖UI工具包的Sketch資源自由設(shè)計(jì)。
設(shè)計(jì)師：Micah Sivitz
人氣：8,671次瀏覽，點(diǎn)贊59次
線框圖設(shè)計(jì)應(yīng)該是一個(gè)非常簡單的過程，且黑白效果最佳，這就是為什么這款Basic Wireframe Kit會成為Sketch用戶的絕佳選擇，因?yàn)樗啙?，干凈。所有元素都?jīng)過精心設(shè)計(jì)，可以很好地融入任何類型和風(fēng)格的設(shè)計(jì)。它也是Sketch的簡單UI工具包之一，因此對于任何不適用Adobe軟件的人來說，它是必備資源。但它缺乏一些像社交媒體這樣的基本圖標(biāo)。
https://dribbble.com/shots/2497127-Wireframe-Kit-for-Sketch
設(shè)計(jì)師：Jolene Chichigeh
人氣：19860次瀏覽，11140次下載
這是一個(gè)線框圖工具包，基于原子/組件設(shè)計(jì)原則來創(chuàng)建快速線框圖。如果你對原子設(shè)計(jì)感興趣，那么該工具包會是設(shè)計(jì)復(fù)雜系統(tǒng)的一種非常有用的解決方法。與其他在線線框圖套件不同，Atomic在遵循特定設(shè)計(jì)原則的同時(shí)還提供了一些視覺變化。
設(shè)計(jì)師：Elwin van den Hazel
人氣：5179次瀏覽，1819下載
該線框圖套件是一種模塊化的資源，可以為你的應(yīng)用程序和Web項(xiàng)目創(chuàng)建簡單的線框圖。如果想要更多的了解該資源的使用，可以訪問Elwin的GitHub頁面了解。
https://github.com/elwinvdhazel/The-Wireframe-Kit
設(shè)計(jì)師：Mariusz Ostrowski
Popular：38424次瀏覽，12754次下載
該資源是一組可運(yùn)用于線框圖的簡潔Sketch符號資源集合。你可以使用符號上的顏色設(shè)置來更改色彩，以符合自己的設(shè)計(jì)需求，你也可以翻轉(zhuǎn)和旋轉(zhuǎn)，定義符號的方向。該資源適用于iOS和Android系統(tǒng)。
https://www.sketchappsources.com/free-source/1392-sketch-wireframing-symbols-freebie-resource.html
設(shè)計(jì)師：Mauritius D Silva
人氣：4351次瀏覽，1703次下載
如果你接到這樣一個(gè)任務(wù)，需要為擁有500多輛汽車的汽車租賃店創(chuàng)建快速線框圖+模型，并且通過為其客戶提供在線預(yù)訂平臺來增加銷售，那么， 這是一個(gè)非常好的資源。 Fleetster是一家總部位于德國慕尼黑的車隊(duì)管理，汽車共享和租賃云軟件公司。
設(shè)計(jì)師：Mikolaj Dobrucki
Popular：17779次瀏覽，9985次下載
該資源是一個(gè)高度可定制的UI線框圖軟件包，旨在幫助你快速規(guī)劃和構(gòu)建復(fù)雜的界面。該套件包含300多種預(yù)定組件，文本樣式和圖層樣式。在此文件中，還包括Web，iOS和Android元素的混合。盡管如此，所有元素都組織有序，你可以構(gòu)建任何你想要的東西。為了滿足更多需求，該資源為所有平臺創(chuàng)建了許多組件。
https://www.sketchappsources.com/free-source/3244-wireframing-ux-kit-sketch-freebie-resource.html
設(shè)計(jì)師：Devbridge
人氣：23664次瀏覽，5709次下載
此資源適用于更大，更復(fù)雜的設(shè)計(jì)項(xiàng)目，適用于通常需要進(jìn)行注釋的高保真平臺設(shè)計(jì)。該資源種類豐富，它可以幫助你很大程度上節(jié)省時(shí)間，并使整個(gè)設(shè)計(jì)保持一致性。
設(shè)計(jì)師：Orcun Ilbeyli
人氣：35589次瀏覽，15773次下載
該套件是一個(gè)響應(yīng)式的用戶體驗(yàn)線框圖設(shè)計(jì)套件，旨在使整個(gè)線框圖設(shè)計(jì)過程更加高效。隨著時(shí)間的推移，UX套件已被證明是線框圖和原型制作過程中極具價(jià)值的工具。無論你是以產(chǎn)品為中心的團(tuán)隊(duì)，自由職業(yè)者還是代理商，我都希望與你分享這個(gè)寶貴的工具。
設(shè)計(jì)師：Mariz Melo
Popular：47742次瀏覽，15762次下載
該資源為你的產(chǎn)品設(shè)計(jì)提供了可重復(fù)使用的Sketch線框圖UI工具包，并且也是兼具美學(xué)和實(shí)用性的絕佳組合。此Sketch UI工具包可以免費(fèi)用于所有項(xiàng)目，每個(gè)元素的獨(dú)特設(shè)計(jì)必定會為你的線框圖增色不少。所有元素都是矢量的，因此你可以在不損害質(zhì)量的前提下隨意調(diào)整它們的大小。
人氣：222次銷量
Platforma是一個(gè)包含200多個(gè)線框圖布局的資源集合，共有15個(gè)設(shè)計(jì)界流行的內(nèi)容類別，并為Sketch應(yīng)用程序精心配置。它是目前許多流行的線框圖工具（如Mockplus，Invision，UXPin等）創(chuàng)建交互式原型的完美資源。唯一的缺點(diǎn)是要收費(fèi)，68美元。
https://themeforest.net/item/platforma-ultimate-wireframe-kit-of-200-layouts-for-sketch/15894124
人氣：42,155次瀏覽，663點(diǎn)贊
如果你需要一種簡單的方法來呈現(xiàn)應(yīng)用程序中的基本功能和操作流程，然后再進(jìn)入到線框圖設(shè)計(jì)階段，那么，這個(gè)資源你可以試試，不會失望。除了Sketch格式，該資源還有Illustrator和Sketch格式。
該資源特色：250模板，500+元素，都是基于矢量，完全可擴(kuò)展，Adobe CS6 +和Sketch 3+兼容。
https://dribbble.com/shots/1613546-Information-Architecture-Kit-Sketch
設(shè)計(jì)師：deadmau5
Popular：25245次瀏覽，5139次下載
這是一個(gè)Sketch 3線框圖套件，資源豐富，并且可以免費(fèi)使用。該套件的靈感正是設(shè)計(jì)師來自對于Sketch 3的原始線框圖的認(rèn)識和啟發(fā)。
https://www.sketchappsources.com/free-source/605-wireframe-sketch-freebie-resource.html
以上就是本次精選出的19個(gè)Sketch線框圖套件資源，如果你在設(shè)計(jì)中使用它們，將會事半功倍。那么，如何進(jìn)行利用呢？怎樣才能把這些套件融入自己的設(shè)計(jì)里？
正如文章所講，一個(gè)最佳的方法是利用線框圖工具，在更專業(yè)的設(shè)計(jì)工具里進(jìn)行自主設(shè)計(jì)和二次創(chuàng)作。比如上文出現(xiàn)的Mockplus，支持Sketch插件導(dǎo)入，你可以把以上所有的Sketch線框圖套件資源導(dǎo)入Mockplus，進(jìn)行線框圖設(shè)計(jì)，或者創(chuàng)建交互式原型。
Mockplus還有專門的教程，講解如何將 Sketch 文檔導(dǎo)出為 Mockplus 文檔，然后在 Mockplus 中完成交互設(shè)計(jì)，感興趣的朋友，查看這里：http://doc.mockplus.cn/?p=2875
摹客協(xié)作
摹客RP
摹客DT
摹客超級版