注：線框圖是設計進程中的第一步，也可以說它是最重要的步驟之一，因為這是你的想法開始成形的時候。盡管線框圖看起來很簡單，但你不一定能設計好，你的線框圖可能會對最終的成品產生重大影響。我在本文介紹了正確的（和錯誤的）設計線框圖方式，這些提到的技巧將幫助你構建更好的網頁和移動線框圖。
線框是布局的基本框架。線框中不會使用真實的用戶界面元素；相反，會使用占位符 – 用戶界面元素通常被表示為輸入框，線框在設計和開發過程的早期階段用于驗證信息架構和一般的用戶流程。
線框圖是產品設計過程中的關鍵步驟，因為它可以幫助設計師決定應用程序或網站的外觀及功能。線框圖確保參與項目的每個人對其產品設計的結構和功能都有一個同步的認識，線框還可以作為產品文檔 – 為構建應用程序或網站的設計人員提供指導。
但是，設計師如何充分利用線框，他們應該避免什么？讓我們來看看。
首先，你需要做的：
1.創建線框之前進行研究
如果你想創建一個好的線框圖，你必須研究用戶的需求——他們到底想要什么。你需要考慮兩個重點目標：商業目標和用戶目標。這兩個目標對你產品的成功來說至關重要，這些研究將幫助你設定明確的期望，即通過線框圖如何實現你的目標。
2.保持簡單
線框圖與其他設計工具的主要優點是創建速度快和結構簡單。速度尤為重要，線框圖不應拖慢你的速度。
在提出適當的解決方案之前，你可能會嘗試很多種不同的選項。這就是為什么盡量保持你的線框圖簡單性至關重要—— 這樣可以避免你分心并把重心放于傳達你的想法上。
3. 展示各種想法
在建立線框框架時，注意盡可能多地爆發想法。一般而言，創建的設計越多，就會越有機會找到最佳的解決方式。在一個點子上產生多種想法和變數，可以讓你看到每個想法的優點和缺點。
4. 確保線框圖易于理解
線框作為交流的工具，其幫助其他人了解你的想法。如果你打算和團隊和公司分享你的線框圖，那么請確保任何人都可以輕松的看懂你的線框圖。如果僅有一個人可理解你的線框，就說明已經出現了問題。
嘗試遵循以下內容來提高理解力：
向一個與你的項目無關的人展示你的線框，并詢問他們一些問題。這可讓你明白你應該做些什么來提高理解力；
給你的線框添加注釋，使其更易于閱讀和理解；
查看某些元素或交互的描述也會容易很多，而不是通過查看靜態圖像來判斷應該如何做；
用語言補充一些重要細節，而不是讓線框自己呈現。
5.協作
切勿單獨作畫。當你與其他人一起集思廣益時，往往會反應出一些好的結果，設計初期向團隊成員展示你的線框可以幫助你證實和改進你的想法。
反饋可幫助你改進工作—— 聽取團隊成員對你設計的意見，進行迭代，根據反饋來改進設計。
你不應該做的：
1.不要略過應用程序的某些部分
有些人會說：我們的電子商務網站中的結賬頁面與許多其他網站類似，所以可以跳過應用程序的某個部分的線框圖。很明顯我們知道如何設計，所以忽略它，專注于設計其他部分。
避免這種想法，你必需確保應用程序的每個部分都要有線框，因為這可以防止你遺漏掉可能影響用戶體驗交互的一些重要部分。不要忽略你應用程序中的任何內容。
2.不要一開始就使用數字工具
當你開始創建線框圖時，你可能會認為直接使用你最喜歡的設計工具來創作挺好的。盡管像Mockplus這樣的現代原型開發工具，可以在幾分鐘內創建出功能完整的原型，但在大多數情況下，最好從筆和紙開始。
首先畫出你的想法，然后才切換到數字工具。
3.不要使用顏色
你有沒有想過為什么線框經常利用灰度來創建？這是有目的的——灰度級可防止被顏色分心。線框的主要目的是布置內容并描述應用程序的功能，添加多種顏色可能會導致分心。
因此，最好避免在線框中使用顏色（除非要突出顯示某些特定的元素）。
不要使用顏色。如果你想要這樣做，可以特意一些。在這個例子中，tonianni使用紅色突出重要元素并添加注釋。
4.不要試圖去美化它
不要過分關注線框的外觀，它們不需要設計的很像成品。請記住，線框是一種工具，可幫助你了解頁面信息層次結構而不是視覺或交互設計。
當你過于關注后者時，可能會有太多精美的元素，但絕對不是面對解決方案的。因此，當談到線框圖時，你首先得讓它們有價值。線框應該輕松傳達你的想法并協助溝通，而視覺和交互設計應留在產品設計過程的后期階段。
5.不要產生依賴
不要太依賴于你的線框圖。隨時準備丟掉它們，是的，可能很難丟棄一些你費盡心思做出來的東西（特別是當你覺得它還好，但卻不符合你設計的產品概念時）。
但重要的是要記住，你需要嘗試很多不同的選項才能設計出來的線框圖（可能是10/50/ 100 個），只有這之后，你才會選擇一個（兩個）來作為你原型的基礎。
線框圖是用戶體驗設計師的基本技能。 隨著時間的推移，任何其他技能都可以得到改善。提高線框圖技巧的關鍵在于練習，你做得越多，就會越順利。
因此，下一個項目請留出一定的時間來創建線框圖。早期花費一些時間在線框圖上，后期的話可以為你節省大量時間。
原文作者：Nick Babich
原文地址：https://www.mockplus.com/blog/post/dos-donts-of-wireframing
QQ客服