在這裏，我們將研究設計中最簡單、因而常常被低估的活動之一，即線框圖的設計。了解什麼是線框圖，為什麼需要設計它們以及如何充分利用線框圖。

什麼是線框圖？

線框圖，也稱為頁面示意圖或屏幕藍圖，是展示網站或產品框架的視覺指南：

• 設計：線框圖常用在考慮用戶需求的情況下在頁面上布置內容和功能。
• 開發：添加視覺設計和內容之前，在開發過程早期使用線框來建立頁面的基本結構。

線框圖的主要目標是向團隊和利益相關者展示產品將包含的頁面和組件，以及這些元素之間的相互作用。

為什麼需要設計線框圖？

1. 幫助團隊評估和完善工作範圍

線框圖允許設計師快速創建產品的視覺表現，方便後期修改；

幫助設計師向團隊展示應用程序具有的頁面元素和控件，以及所有元素如何進行交互。

2. 讓團隊所有成員參与產品設計

線框圖的使用允許設計師和開發人員在早期階段共同參与討論設計，在開始進行視覺設計之前就提供反饋和更改建議。

這樣有助於使設計過程快速迭代，避免不必要的浪費。

3. 方便快速演示

從客戶和利益相關者那裡獲得快速反饋是設計過程的重要組成部分。

設計過程中，經常會遇到需求的來回變化。有了線框圖，可以使這個過程更有效，修改原型比修改線框圖需要更多的時間和精力。

4. 進行用戶測試

線框圖可以幫助設計師從潛在用戶那裡獲得有用價值的反饋。同時瀏覽線框比讀取規範要快得多，還有助於減小與預期效果的差異。

線框圖實際應用

為了獲得最好的結果，為下一步的 UI 打下堅實的基礎，需要遵循幾個簡單的規則：

1. 顏色的使用

如果在線框圖中使用豐富的配色，可能會分散觀者的注意力，並使更新變得更困難。

但在某些情況下，使用顏色突出显示特定組件是合理的。例如，可以將紅色用於錯誤狀態，將藍色用於註釋等。

2. 使用簡單的組件

線框圖並不包含全面設計和詳細說明的組件。相反它們應該設計的相對簡單，讓團隊成員更容易識別。

為組件添加細緻的陰影、粗細描邊將花費大量的時間和精力，卻不是很實用。

3. 保持一致性

在所有線框圖中，類似的組件必須看起來相同。如果相同的組件看起來不同，開發人員可能會質疑它們的功能是否相同，甚至會因為設計不同而增加估算時間。

在處理線框圖時，記住一個簡單的規則：保持一致，避免造成混淆。

4. 使用真實內容

我們會常看到UI/UX設計師沒有在線框圖上添加真正的內容，而是重複使用同一些文本。這是很少有設計師意識到的普遍錯誤。

內容真實與否會影響接下來的設計。如果使用不真實的內容，UI設計中文本的數量多少和排布方式都要再調整。

真實內容能給線框圖增加價值，更好地解釋上下文。

5. 使用註釋

設計中可能會遇到某些解決方案無法直觀地加以說明的情況，例如某些控件背後的邏輯，因此開發人員可能會對它們有疑問。

在這種情況下，可以提供註釋來解釋其背後的邏輯。這樣，你的團隊就會理解你的解決方案，你就不需要花時間再討論它們。

6. 線框圖程度

線框圖應該選擇低保真還是高保真，沒有嚴格的規定，取決於項目的具體要求。

硅谷知名作家埃里克·萊斯認為，如果不能帶來價值就不需要做額外的工作，從基礎做起，然後根據需要添加細節。

7. 將線框圖延伸到交互原型中

在使用不同產品時，有一些簡單而通用的交互，也有一些交互相當複雜。

在線框圖不足以說明複雜性的情況下，可以將線框圖擴展到交互原型中，而不必寫冗長的註釋並花大量時間進行解釋。

總結

將線框圖結合到設計過程中，為我們所用：

• 幫助團隊獲得更精確的項目估算；
• 讓所有團隊成員參与設計流程，避免影響開發過程的錯誤；
• 提前向客戶、利益相關者進行演示，以儘快獲得反饋，節省開發不良解決方案的時間。

歡迎關注作者微信公眾號：「Clip設計夾」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊開戶_看似簡單的線框圖設計，這7個要點必須知道！