2018年不可錯過的19款Sketch線框圖套件

線框圖在產品設計中的地位是無法取代的,設計師在設計中添加色彩、排版和其他設計元素之前,線框圖可以說是一種呈現設計思路,測試用戶體驗的最佳方式。

而Sketch對於設計師而言也是再熟悉不過的工具之一了,它不僅自身具有強大的功能,更有大量的插件與各類工具對接,設計師對於Sketch的喜愛與日俱增,網上也有越來越多的Sketch設計資源。

Sketch和線框圖的碰撞勢必是設計師的福音,為幫助設計師尤其是初學者們儘早開啟設計之路,進行快速設計,本文中,我將和大家分享2018年19個最好的 Sketch線框圖套件,有Android/iOS 系統的,有web端的,總之,總有一款Sketch線框圖套件適合你!

Sketch插件下載:https://ds.mockplus.cn/?hmsr=trista (導航欄)

1.Carbon - Material設計的Sketch線框圖套件

設計師:Panagiotis

人氣:63063次瀏覽,20780次下載

2018年不可錯過的19款Sketch線框圖套件

Carbon是一個高品質的material線框圖設計套件。它包含有15個畫板,具有清晰的結構和具體的命名。該套件還包含許多可重複使用的元素,非常適合Android電子商務應用程序的線框圖設計。

https://www.sketchappsources.com/free-source/2337-carbon-material-wireframe-kit-sketch-freebie-resource.html

2.Simple wireframe kit - 免費的Sketch線框圖套件

設計師:Nicolaj Reck

人氣:38619次瀏覽,18281下載

2018年不可錯過的19款Sketch線框圖套件

Simple wireframe kit套件是一個免費的Sketch線框圖設計資源,這裡包含了幾乎每個設計師都想要的設計元素,並且所有元素都是可以自定義屬性的,你可以輕鬆調整所有元素的大小,但不會出現混亂的比例和排版。

https://www.sketchappsources.com/free-source/2749-simple-wireframe-kit-sketch-freebie-resource.html

3.Savvy - iOS線框圖套件

設計師:Megan Balaguer

人氣:102次點贊,4,146次瀏覽

2018年不可錯過的19款Sketch線框圖套件

移動應用程序和網站設計一樣,也需要在前期使用線框圖來模擬用戶體驗。Savvy Sketch iOS套件就是一款非常適合iPhone應用程序設計人員的工具包。此UI工具包常更新,會根據新功能進行添加,最新版本專注於iOS 10。此外,該工具包完全免費。

https://dribbble.com/shots/2764752-The-Savvy-Sketch-iOS-Wireframe-Kit

4.Moon - 用於電子商務應用程序設計的Sketch線框圖套件

設計師:George Frigo

人氣:61890次瀏覽,22344次下載

2018年不可錯過的19款Sketch線框圖套件

Moon Wireframe Kit包含了50個視圖供你選擇和使用,適用於iOS系統,涵蓋了基本線框圖,還包含可以讓你驚歎的一些應用項目的資源。視圖有以下類別:啟動畫面,登錄,菜單,設置,圖庫,訂閱,列表項,聯繫人,個人資料,通知,評論,統計信息和購物車等等。

https://www.sketchappsources.com/free-source/1823-moon-wireframe-kit-sketch-freebie-resource.html

5.Nolte - v2 Sketch線框圖套件資源

設計師:Ben Balderas

人氣:4369次瀏覽,1606次下載

2018年不可錯過的19款Sketch線框圖套件

Nolte是基於Brad Frost的原子設計創建的,因此這個UX套件在很大程度上會簡化你的線框圖製作流程。你可以使用預先製作的分子快速創建模板,或使用內置原子構建你自己的分子。

https://dribbble.com/shots/1592750-Wireframe-Kit-v2-for-Sketch

6.Snap - iOS系統的線框圖UI工具包

設計師:Ivor Hook

人氣:83197次瀏覽,35995下載

2018年不可錯過的19款Sketch線框圖套件

Snap是一個美觀和實用性兼具的資源,是Sketch專用的iOS線框圖工具包。使用該工具包,你可以快速產出iOS應用程序的線框圖設計。此外,該工具包的元素還支持更多的自定義設計,你可以按需進行運用。

https://www.sketchappsources.com/free-source/1444-snap-ui-kit-ios-wireframe-sketch-freebie-resource.html

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

7.Teracy - Sketch線框圖套件ios/android

設計師:Anh Nguyen

人氣:312372次瀏覽,48074下載

2018年不可錯過的19款Sketch線框圖套件

Teracy是為幫助設計師快速完成線框圖設計而創建的。該套件包括用於Web的基本UI元素,移動設備的UI元素以及一些其他設備的UI元素。你還可以使用此線框圖UI工具包的Sketch資源自由設計。

https://www.sketchappsources.com/free-source/attachment-953-teracy-wireframe-ui-kit-sketch-freebie-resource-img4.html

8.Basic線框圖套件

設計師:Micah Sivitz

2018年不可錯過的19款Sketch線框圖套件

線框圖設計應該是一個非常簡單的過程,且黑白效果最佳,這就是為什麼這款Basic Wireframe Kit會成為Sketch用戶的絕佳選擇,因為它簡潔,乾淨。所有元素都經過精心設計,可以很好地融入任何類型和風格的設計。它也是Sketch的簡單UI工具包之一,因此對於任何不適用Adobe軟件的人來說,它是必備資源。但它缺乏一些像社交媒體這樣的基本圖標。

https://dribbble.com/shots/2497127-Wireframe-Kit-for-Sketch

9.Atomic - 用於原子設計的Sketch線框圖套件

設計師:Jolene Chichigeh

人氣:19860次瀏覽,11140次下載

2018年不可錯過的19款Sketch線框圖套件

這是一個線框圖工具包,基於原子/組件設計原則來創建快速線框圖。如果你對原子設計感興趣,那麼該工具包會是設計複雜系統的一種非常有用的解決方法。與其他在線線框圖套件不同,Atomic在遵循特定設計原則的同時還提供了一些視覺變化。

https://www.sketchappsources.com/free-source/3105-wireframe-kit-atomic-design-sketch-freebie-resource.html

10.Lightweight - Sketch線框圖工具包資源

設計師:Elwin van den Hazel

人氣:5179次瀏覽,1819下載

2018年不可錯過的19款Sketch線框圖套件

該線框圖套件是一種模塊化的資源,可以為你的應用程序和Web項目創建簡單的線框圖。如果想要更多的瞭解該資源的使用,可以訪問Elwin的GitHub頁面瞭解。

https://github.com/elwinvdhazel/The-Wireframe-Kit

11.Wireframing Sketch Symbols資源

設計師:Mariusz Ostrowski

Popular:38424次瀏覽,12754次下載

2018年不可錯過的19款Sketch線框圖套件

該資源是一組可運用於線框圖的簡潔Sketch符號資源集合。你可以使用符號上的顏色設置來更改色彩,以符合自己的設計需求,你也可以翻轉和旋轉,定義符號的方向。該資源適用於iOS和Android系統。

https://www.sketchappsources.com/free-source/1392-sketch-wireframing-symbols-freebie-resource.html

12.Fleetster - 線框圖工具包Sketch資源網

設計師:Mauritius D Silva

人氣:4351次瀏覽,1703次下載

2018年不可錯過的19款Sketch線框圖套件

如果你接到這樣一個任務,需要為擁有500多輛汽車的汽車租賃店創建快速線框圖+模型,並且通過為其客戶提供在線預訂平臺來增加銷售,那麼, 這是一個非常好的資源。 Fleetster是一家總部位於德國慕尼黑的車隊管理,汽車共享和租賃雲軟件公司。

13.Wireframing UX Kit Sketch資源

設計師:Mikolaj Dobrucki

Popular:17779次瀏覽,9985次下載

2018年不可錯過的19款Sketch線框圖套件

該資源是一個高度可定製的UI線框圖軟件包,旨在幫助你快速規劃和構建複雜的界面。該套件包含300多種預定組件,文本樣式和圖層樣式。在此文件中,還包括Web,iOS和Android元素的混合。儘管如此,所有元素都組織有序,你可以構建任何你想要的東西。為了滿足更多需求,該資源為所有平臺創建了許多組件。

https://www.sketchappsources.com/free-source/3244-wireframing-ux-kit-sketch-freebie-resource.html

14.Sketch線框圖套件web

設計師:Devbridge

人氣:23664次瀏覽,5709次下載

2018年不可錯過的19款Sketch線框圖套件

此資源適用於更大,更復雜的設計項目,適用於通常需要進行註釋的高保真平臺設計。該資源種類豐富,它可以幫助你很大程度上節省時間,並使整個設計保持一致性。

https://www.sketchappsources.com/free-source/2129-db-wireframe-templates-sketch-freebie-resource.html

15.Nolte - Sketch線框圖UX套件

設計師:Orcun Ilbeyli

人氣:35589次瀏覽,15773次下載

2018年不可錯過的19款Sketch線框圖套件

該套件是一個響應式的用戶體驗線框圖設計套件,旨在使整個線框圖設計過程更加高效。隨著時間的推移,UX套件已被證明是線框圖和原型製作過程中極具價值的工具。無論你是以產品為中心的團隊,自由職業者還是代理商,我都希望與你分享這個寶貴的工具。

16.Frames - Sketch UI工具包

設計師:Mariz Melo

Popular:47742次瀏覽,15762次下載

2018年不可錯過的19款Sketch線框圖套件

該資源為你的產品設計提供了可重複使用的Sketch線框圖UI工具包,並且也是兼具美學和實用性的絕佳組合。此Sketch UI工具包可以免費用於所有項目,每個元素的獨特設計必定會為你的線框圖增色不少。所有元素都是矢量的,因此你可以在不損害質量的前提下隨意調整它們的大小。

17.Platforma - 用於Sketch的終極線框圖套件

人氣:222次銷量

2018年不可錯過的19款Sketch線框圖套件

Platforma是一個包含200多個線框圖佈局的資源集合,共有15個設計界流行的內容類別,併為Sketch應用程序精心配置。它是目前許多流行的線框圖工具(如Mockplus,Invision,UXPin等)創建交互式原型的完美資源。唯一的缺點是要收費,68美元。

https://themeforest.net/item/platforma-ultimate-wireframe-kit-of-200-layouts-for-sketch/15894124

18. Information Architecture Kit - 用於Sketch的線框圖UI工具包

人氣:42,155次瀏覽,663點贊

2018年不可錯過的19款Sketch線框圖套件

如果你需要一種簡單的方法來呈現應用程序中的基本功能和操作流程,然後再進入到線框圖設計階段,那麼,這個資源你可以試試,不會失望。除了Sketch格式,該資源還有Illustrator和Sketch格式。

該資源特色:250模板,500+元素,都是基於矢量,完全可擴展,Adobe CS6 +和Sketch 3+兼容。

https://dribbble.com/shots/1613546-Information-Architecture-Kit-Sketch

19. Wireframe for Sketch 3 Resource

設計師:deadmau5

Popular:25245次瀏覽,5139次下載

2018年不可錯過的19款Sketch線框圖套件

這是一個Sketch 3線框圖套件,資源豐富,並且可以免費使用。該套件的靈感正是設計師來自對於Sketch 3的原始線框圖的認識和啟發。

https://www.sketchappsources.com/free-source/605-wireframe-sketch-freebie-resource.html

以上就是本次精選出的19個Sketch線框圖套件資源,如果你在設計中使用它們,將會事半功倍。那麼,如何進行利用呢?怎樣才能把這些套件融入自己的設計裡?

正如文章所講,一個最佳的方法是利用線框圖工具,在更專業的設計工具裡進行自主設計和二次創作。比如上文出現的Mockplus,支持Sketch插件導入,你可以把以上所有的Sketch線框圖套件資源導入Mockplus,進行線框圖設計,或者創建交互式原型。

2018年不可錯過的19款Sketch線框圖套件

Mockplus還有專門的教程,講解如何將 Sketch 文檔導出為 Mockplus 文檔,然後在 Mockplus 中完成交互設計,感興趣的朋友,查看這裡:http://doc.mockplus.cn/?p=2875


分享到:


相關文章: