在軟件開發進程中，時間是最寶貴的資源。產品設計者會進行不斷嘗試，在不降低產品質量的前提下縮短產品上市時間。在節省時間方面，設計師們會盡量使用一些工具以最方便快捷的方式來傳達必要信息。
在許多不同的設計中，設計人員和開發人員之間會有一個主要的交流工具。設計師會利用這個東西來把他們頭腦中的想法傳遞給開發人員，最終由開發人員來實施具體的決策，這個東西就被稱為線框圖。
在本文中，你會了解線框圖的確切含義以及製作線框圖最好的方式。
什麼是線框圖
在我們深入研究如何繪製線框圖之前，我們需要明確線框圖是什麼。線框是一種只使用簡單形狀來呈現界面的一種表示形式，如框、圓、線和箭頭。設計人員使用線框來傳達信息的層次結構和內容結構。
線框VS原型
許多設計師將線框與原型混淆。線框和原型並不是同一個東西。雖然兩者在可交付成果之間存在重疊，但原型更側重於交互性，它們通常尋找一些真實用戶來進行測試，而線框經過審核和批准後，原型就產生了。
何時應創建線框圖
通常情況下，線框是在設計進程的早期階段。在構思階段，設計師需要探索各種不同的選擇，然後選擇出最佳的一個。這個階段，線框圖就顯得非常有用。因為它可以幫助設計人員來組織布局，而無需明確的展示產品的視覺設計。
十個線框圖繪製技巧
1.切忌一開始就試用數字化工具
儘管現代原型設計工具可讓你在短短几分鐘內創建出線框圖，但在線框圖中原型設計工具卻很難勝過筆和紙（特別是當你正處於設計過程的構思階段時）。設計師在構思階段的目標是儘可能多地構建想法並迭代尋求最佳解決方案，所以使用筆和紙來創作更容易。通常，在紙上整理想法越多，轉移到你的電腦上的速度就越快。
2.在畫圖之前，不要去評判你的想法
“這沒有任何意義”這在頭腦風暴會議期間是一個非常常見的短語。在考慮解決方案時，人們傾向於“要做就做最好”這種理念。但是出於許多原因，這種方式可能適得其反。最可能的原因是，你很容易就忽略了一個有價值的想法，因為腦海中來呈現確實有一定的難度。這就是你需要筆和紙的原因，第一時間把你腦海中的想法畫在紙上。這樣不管任何時候，你都可以直觀的來表達你的設計方案。
當你探索各種想法時，建議你遵循一種名為Crazy Eights的技術。將一張紙摺疊成八個不同的部分，然後儘快設計八個不同的部分。
3.不要過分關注草圖的質量
在繪製線框圖時，關注的不是細節而是你的速度—儘可能快地完成工作。請記住，線框圖中最重要的是你想傳達的想法。線框圖的目標不是展示你的設計藝術和技巧，而是去探索各種佈局。因此，提供足夠的詳細信息，方便以後可以查看和優化你的草圖。
4. 利用好的工具
繪製線框圖的工具會直接影響你工作的效果和結果。首先，你需要給自己一隻好用的筆，這裡我建議使用三種不同的筆來繪製草圖：
●黑色的記號筆，用於線框圖。
●彩色筆，用於陰影元素。
●熒光筆，用於著色。你可以將其作為強調色以吸引用戶注意。
其次，嘗試使用虛線紙。虛線紙可以幫助你更準確地繪製形狀和佈局。
5.不要使用真實的UI元素，而是使用佔位符
線框中的文本和圖像並不是最終產品。而且，在產品設計的早期階段可能無法使用真實數據。因此，設計師可以使用常用的佔位符而不是真實的文本和圖像。
- 圖像可以用×來表示。
- 標題用大號粗體線來表示。
- 文字可以用水平線來表示。
- 視頻可以用一個框來表示，中間添加一個播放按鈕。
著陸頁線框。該頁面包含一個主要圖像，標題，三個視頻組件。
6.使用顏色突出顯示元素
雖然線框圖不需要具備成品的任何視覺屬性，但仍然可以用顏色來展示你設計的某些部分的含義。例如，使用對比色，可以將用戶的注意力集中在某些特定元素上。
7.註釋線框圖
線框的主要問題是它們是靜態的。使用線框，可能很難傳達意思，尤其是當你的屏幕非常複雜時。因此，參與者/團隊成員可能很難理解用戶與屏幕之間如何來進行互動。設計師不僅只是提供一個線框圖就夠了，而是應該在線框中提供批註或註釋，以便參與者能夠清楚明瞭。
8.記錄你的線框
為了避免每次會議都要攜帶紙張，你可以使用智能手機來創建一個數字化副本。你只需拍攝每張線框圖並將它們存儲雲端即可。
9.與團隊分享你的線框
不要自顧自的工作。請記住，最好的設計決策來自於團體工作。因此，不要害怕去分享你自己的草圖，經常得到別人的反饋可幫助你快速的進行下一個設計決策。
- 收集反饋並向他人學習。將線框與團隊成員分享，看看你的想法是否有價值。歡迎提一些有建設性的評判，讓參與者和團隊成員有機會發表意見。
- 在向他人展示想法時，請使用草圖作為你故事的補充。
10. 使用特定的工具
當你需要切換到數字工具，想進一步完善你的想法時，有一個環節是堅決不可少的，那就是選擇一個強大的原型設計工具。它不僅可以創建線框圖，還可以將其轉換為高保真原型，試試Mockplus吧。這款原型設計工具提供了許多已經封裝好的用戶界面元素，可用於創建線框或用戶界面原型。你可以將你的草圖轉換為高保真原型，之後還可進行用戶測試。
結論
繪製線框圖的方法無所謂對錯，所以不要把我在這裡說過的所有內容都視為理所當然。嘗試不同的草圖方式，最終你會找到自己的繪製風格。記住，你畫的線框圖越多，你的技能提升的越快。希望大家享受這個過程！
PS: 活動+福利：設計大賽等你來！三大福利享不停！
1，免費贈送摹客（Mockplus+設計系統）專業版半個月！
2，免費幸運抽獎，Airpods、Wacom手繪板、小米手環等你拿！
3，曬設計規範，贏iPad Pro！
活動詳情：https://ds.mockplus.cn/?hmsr=trista
閱讀更多 Mockplus摹客 的文章
