起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計師必看！十大線框圖繪制技巧
線框是一種只使用簡單形狀來呈現界面的一種表示形式，如框、圓、線和箭頭。設計人員使用線框，來傳達信息的層次結構和內容結構。在本文，作者詳細解析了線框圖的確切含義以及制作線框圖的方式。
在軟件開發進程中，時間是最寶貴的資源。產品設計者會進行不斷嘗試，在不降低產品質量的前提下縮短產品上市時間。在節省時間方面，設計師們會盡量使用一些工具以最方便快捷的方式來傳達必要信息。
在許多不同的設計中，設計人員和開發人員之間會有一個主要的交流工具。設計師會利用這個東西來把他們頭腦中的想法傳遞給開發人員，最終由開發人員來實施具體的決策，這個東西就被稱為線框圖。
在本文中，你會了解線框圖的確切含義以及制作線框圖最好的方式。
什么是線框圖
在我們深入研究如何繪制線框圖之前，我們需要明確線框圖是什么。線框是一種只使用簡單形狀來呈現界面的一種表示形式，如框、圓、線和箭頭。設計人員使用線框，來傳達信息的層次結構和內容結構。
線框VS原型
許多設計師將線框與原型混淆，線框和原型并不是同一個東西。雖然兩者在可交付成果之間存在重疊，但原型更側重于交互性，它們通常尋找一些真實用戶來進行測試，而線框經過審核和批準后，原型就產生了。
何時應創建線框圖
通常情況下，線框是在設計進程的早期階段。在構思階段，設計師需要探索各種不同的選擇，然后選擇出最佳的一個。這個階段，線框圖就顯得非常有用。因為它可以幫助設計人員來組織布局，而無需明確的展示產品的視覺設計。
十個線框圖繪制技巧
1. 切忌一開始就試用數字化工具
盡管現代原型設計工具可讓你在短短幾分鐘內創建出線框圖，但在線框圖中原型設計工具卻很難勝過筆和紙（特別是當你正處于設計過程的構思階段時）。設計師在構思階段的目標是盡可能多地構建想法并迭代尋求最佳解決方案，所以使用筆和紙來創作更容易。通常，在紙上整理想法越多，轉移到你的電腦上的速度就越快。
2. 在畫圖之前，不要去評判你的想法
“這沒有任何意義”這在頭腦風暴會議期間是一個非常常見的短語，在考慮解決方案時，人們傾向于“要做就做最好”這種理念。但是出于許多原因，這種方式可能適得其反。
最可能的原因是，你很容易就忽略了一個有價值的想法，因為腦海中來呈現確實有一定的難度。這就是你需要筆和紙的原因，第一時間把你腦海中的想法畫在紙上。這樣不管任何時候，你都可以直觀的來表達你的設計方案。
當你探索各種想法時，建議你遵循一種名為Crazy Eights的技術。將一張紙折疊成八個不同的部分，然后盡快設計八個不同的部分。
3. 不要過分關注草圖的質量
在繪制線框圖時，關注的不是細節而是你的速度—盡可能快地完成工作。請記住，線框圖中最重要的是你想傳達的想法。線框圖的目標不是展示你的設計藝術和技巧，而是去探索各種布局。因此，提供足夠的詳細信息，方便以后可以查看和優化你的草圖。
4. 利用好的工具
繪制線框圖的工具會直接影響你工作的效果和結果。首先，你需要給自己一只好用的筆，這里我建議使用三種不同的筆來繪制草圖：
- 黑色的記號筆，用于線框圖。
- 彩色筆，用于陰影元素。
- 熒光筆，用于著色。你可以將其作為強調色以吸引用戶注意。
其次，嘗試使用虛線紙。虛線紙可以幫助你更準確地繪制形狀和布局。
5. 不要使用真實的UI元素，而是使用占位符
線框中的文本和圖像并不是最終產品，而且，在產品設計的早期階段可能無法使用真實數據。因此，設計師可以使用常用的占位符而不是真實的文本和圖像。
- 圖像可以用×來表示。
- 標題用大號粗體線來表示。
- 文字可以用水平線來表示。
- 視頻可以用一個框來表示，中間添加一個播放按鈕。
著陸頁線框，該頁面包含一個主要圖像、標題、三個視頻組件。
6. 使用顏色突出顯示元素
雖然線框圖不需要具備成品的任何視覺屬性，但仍然可以用顏色來展示你設計的某些部分的含義。例如：使用對比色，可以將用戶的注意力集中在某些特定元素上。
7. 注釋線框圖
線框的主要問題是它們是靜態的，使用線框，可能很難傳達意思，尤其是當你的屏幕非常復雜時。因此，參與者/團隊成員可能很難理解用戶與屏幕之間如何來進行互動。設計師不僅只是提供一個線框圖就夠了，而是應該在線框中提供批注或注釋，以便參與者能夠清楚明了。
8. 記錄你的線框
為了避免每次會議都要攜帶紙張，你可以使用智能手機來創建一個數字化副本，你只需拍攝每張線框圖并將它們存儲云端即可。
9. 與團隊分享你的線框
不要自顧自的工作，請記?。鹤詈玫脑O計決策來自于團體工作。因此，不要害怕去分享你自己的草圖，經常得到別人的反饋可幫助你快速的進行下一個設計決策。
- 收集反饋并向他人學習，將線框與團隊成員分享，看看你的想法是否有價值。歡迎提一些有建設性的評判，讓參與者和團隊成員有機會發表意見。
- 在向他人展示想法時，請使用草圖作為你故事的補充。
10. 使用特定的工具
當你需要切換到數字工具，想進一步完善你的想法時，有一個環節是堅決不可少的，那就是選擇一個強大的原型設計工具。
結論
繪制線框圖的方法無所謂對錯，所以不要把我在這里說過的所有內容都視為真理。嘗試不同的草圖方式，最終你會找到自己的繪制風格。記住，你畫的線框圖越多，你的技能提升的越快。希望大家享受這個過程！
原文作者：Nick Babich
原文地址：https://www.mockplus.com/blog/post/sketching-your-wireframes
本文由 @jongde 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
第一波確實是用筆和紙最好
剛在草紙上畫完一個線框圖，過來逛逛就看到這篇文章。
嘻嘻嘻
雖然現在產品經理手繪設計稿的不多了，但是有時候手繪設計稿，的確是前期設計不可缺少的。