24 個最佳免費網站線框

已發表: 2019-01-09

線框是網頁或移動頁面的粗略草圖佈局。 它們允許設計人員構建網頁的內容並準確繪製出該結構的工作方式。 每個設計師都遵循一套指南和系統來創建線框。 有些人更喜歡在一張紙上勾勒出他們的想法,而另一些人則經常發現數字工具更有用。 無論哪種方式,當它們直觀且易於使用時,它們都被認為是有效的。 讓我們來看看一些由業內不同設計師設計的精心設計的線框。

目錄隱藏
1. 環球資源
2.EDX
3.風格X風格
4. 代客
5.法德納
6. 價值工程師
7. Brandon Wimberly 的線框
8. 編碼
9. 用戶檔案概念
10. 滴答聲
11. 南德文會計
12.天氣應用
13. Andre Picard 的線框
14. Melody Rose 的線框
15.彩雲
16. 微用戶界面
17.生活方式
18. 移動線框套件
19. 滑動
20. 索斯特里奧
21. 卡薩
22. Morphomics 網站中保真線框
23. Shopify 探索性線框
24. Tim Knight 繪製一個新項目

1. 環球資源

這是一個典型的線框示例。 它包含幾頁。 產品可以以清晰的順序顯示,並被可以展示產品細節的文本容器包圍。 您可以在此處下載文件。

別針

2.EDX

該線框專為面向教育的企業而設計。 它包括課程、計劃、合作夥伴、關於、家庭和在線課程和教程的頁面。 您可以在此處下載文件。

別針

3.風格X風格

這是一個時尚/風格導向的線框。 它包括登錄、個人資料、慈善機構、主頁等基本頁面。頁面設計精良,元素放置有序。 您可以在此處下載文件。

別針

4. 代客

我們設計的這個線框包括懸停交互。 您可以在此處下載文件。

別針

5.法德納

這是一個學校管理線框圖。 它具有時間表、出勤率、PTS、通信等功能。 它還設計為包括登錄頁面、註冊表單、聯繫方式等。您可以在此處下載文件。

別針

6. 價值工程師

該線框非常適合注重品牌推廣的企業。 線框的主要頁麵包括主頁、關於我們、聯繫方式等。您可以在此處下載文件。

別針

7. Brandon Wimberly 的線框

Brandon Wimberly 使用點紙上的模板來構建線框並將其劃線以構建一個非常統一和準確的線框來測試他的想法。

別針

8. 編碼

該線框是為名為 Encode 的教育應用程序創建的。 佈局簡單明了。 它的首頁很長,因此用戶只需輕掃屏幕即可查看信息。

別針

9. 用戶檔案概念

線框由 Tomasz Sochacki 設計。 您可以在此處下載文件。

別針

10. 滴答聲

這是一個功能強大的任務管理應用程序的線框圖。 這帶有一個很棒的動畫教程。 這是為了採用一種與用戶進行交互的方式,並添加一個真實的手機界面來引導他們。

別針

11. 南德文會計

這個線框最適合會計和商業服務。 佈局簡單明了。 它可以直接與mock plus配對來構建菜單。 您可以在此處下載文件。

別針

12.天氣應用

這個線框是在 illustrator 中設計的,而 Photoshop 是由 Matt Sclarandis 設計的。 他為台式機和 iPhone 設計了一系列線框。

別針

13. Andre Picard 的線框

Andre Picard 在白板上創建線框。 這使他能夠快速進行編輯和修訂。 這也使辦公室中的反饋和協作變得容易。

別針

14. Melody Rose 的線框

Melody 創造了連貫的形狀、大小和容器,這些形狀、大小和容器在整個線框中看起來都是一致的。 線框調色板屬於灰色配色方案。

別針

15.彩雲

這是一個美麗天氣應用程序的線框圖,可以準確預測未來的天氣狀況。 它旨在在主頁上有一個插圖,包括登錄、家庭天氣、城市、幫助中心、設置等頁面。

別針

16. 微用戶界面

這是社區線框的示例。 主要功能包括表單錯誤、通知、上傳、操作成功。 該文件可以在這裡下載

別針

17.生活方式

這個應用程序旨在記錄和管理您的生活。 該線框具有一系列令人難以置信的功能。

別針

18. 移動線框套件

該套件可讓您創建模型,並帶有大約 90 多個移動屏幕和數百個其他元素。 它具有流程圖、模板、UX 流程和演示文稿。 每個單獨的層都被命名和排序。 該文件可以在這裡下載。

別針

19. 滑動

這個預建的線框可幫助您記錄事物以提高效率。 它由登錄/註冊頁面以及其他頁面組成。

別針

20. 索斯特里奧

這是一個簡單的線框,圍繞令人愉快的音樂網絡體驗構建。 它包含主頁、搜索和常見問題解答頁面。 您也可以通過單擊音樂按鈕來提交音樂。

別針

21. 卡薩

此線框是為房地產列表網站構建的。 它乾淨、直觀且反應靈敏。 層定義清晰,用戶能夠輕鬆理解流程。 這個文件可以在這裡下載。

別針

22. Morphomics 網站中保真線框

此線框由 Lauren League 設計。 它旨在解決複雜的數據可視化問題。 它是一個結構良好的模板,其中包含內容框、形狀和容器。

別針

23. Shopify 探索性線框

這些高保真線框由 Janna Hagan 創建。 如您所見,她在此階段引入了視覺效果,並且佈局設計精美。

別針

24. Tim Knight繪製一個新項目

設計師發現創建簡單的高速線框很有用。 這在為客戶制定想法以及在設計的早期階段很有幫助。

別針

  • 這個由 Bitesize Chef 由 James Baross 設計的線框圖,通過點擊不同的按鈕,用戶可以看到整體的用戶流程。

別針

  • 格蘭特赫爾頓設計了這個應用程序。 這個線框向用戶展示了他如何從一個屏幕轉換到另一個屏幕。 在浮動頁腳的幫助下,他能夠引導用戶並讓他們看到他們在流程中的位置。 他使用 invision 應用程序來構建這個原型。

別針

  • 該線框由 Julio Castellano 設計——顯示了用於 VR 危險識別的用戶流程。 這用於教育新員工他們需要在有危險的地方工作。

別針