怎樣畫線框圖才是有意義的？

2021-04-21

10140

我們常輕忽身邊習以為常的事物，覺得沒有必要為一些看似簡單又可有可無的東西浪費時間——例如線框圖。雖然沒必要凡事都尋根問底，但當面對復雜問題時，腳踏實地回歸基本面也許才是根本解法。

本文章深入介紹程序開發界面設計中，最簡單也最容易被輕忽的線框圖設計：

什么是線框圖？
常見誤區
為什么要畫線框圖？
怎樣畫線框圖？
組織團隊一起畫線框圖

by Samuel Medvedowsky @ Dribbble

CB Insights 做過一份調研報告《創業公司失敗的20大原因》，里面說17%的創業公司認為他們失敗的原因在于用戶體驗不夠友好。畢竟設計出一個對用戶友好的界面并不是一件容易事，特別是對于多維度、關系交錯和要素眾多的復雜產品來說。要設計這類產品時，我們應該自上而下，從頂層理念到具體細節的方法，而線框圖是最好的工具。

上圖來源網絡

什么是線框圖？

線框圖（Wireframe）——它是展示Web或者App框架的視覺指南。

繪制線框圖的過程中，我們需要考慮用戶需求和使用流程，并在相應的頁面上布置需要的內容和功能。軟件開發的初期階段，產品在進入視覺設計和內容填充階段之前，我們可以用線框圖來搭建頁面的基本框架和結構。

乍一看很簡單，比較線框圖已是日常工作的基本環節，交互設計師也不少見。但這就是本文開頭提到的問題，我們往往對看似簡單的事情缺乏重視。線框圖的最大意義，是幫我們定義產品或者服務的目標。

可以說，線框圖設計的主要目的，就是向團隊、領導、合作伙伴展示App等應用程序將擁有哪些頁面和組件，以及這些元素將如何相互作用。

從這個層面來說，我們可以知道線框圖對于開發過程和最終產品呈現的影響有多大。

關于線框圖的常見誤區

為了完成任務而畫線框圖
直接跳過線框圖階段
做完了視覺再開始準備線框圖
不理解為什么要用線框圖

線框圖應該先于視覺設計階段，而不是反過來。否則就像在敲完代碼以后，再決定選擇你App的技術棧一樣。

好的線框圖是設計質量的保證。我們越了解其使用目的，收益也就越大。因此我們才需要更深入探討使用線框圖的原因及其價值所在。

在現實中，一些缺少產品設計知識的公司可能會直接跳過線框圖階段，雖然這可以削減成本，但也會產生風險。遇到這種情況，設計師可以嘗試主動解釋為什么要畫線框圖，它對我們的產品有什么好處、怎樣節省開發成本…

為什么要畫線框圖？

1. 幫助團隊確認工作內容

線框圖允許設計師用可視化的方式快速創建產品原型，并向團隊展示哪里需要修訂，界面有哪些，上面有什么元素和控件，它們是怎么交互的。同時，瀏覽可視化的線框圖要比閱讀說明書快得多，也能減少預期和最終成品之間的差異。

軟件設計開發周期的各個階段里，線框圖都可以作為一種或多種形式被使用。

2. 讓所有團隊成員都能參與產品設計

我們肯定遇到過這樣的情況，做出了一流的設計卻苦于開發實現的限制。使用線框圖能讓我們拉上開發人員在早期階段一起討論設計，使他們能夠在你進行視覺設計之前提供反饋和建議，這樣能夠加快設計流程從而避免浪費時間和金錢。

3. 為客戶提供原型

從客戶和上級領導那里得到快速反饋是設計中一個重要的部分。我們都經歷過來自他們的改稿要求，這是正常的。有了線框圖，我們可以讓這個過程更有效率，而不是在開發原型上消耗更多的時間精力，同時它也能讓設計師不會在改稿上浪費額外的時間。

4. 能執行用戶測試

《精益創業》（Lean Startup）的作者Eric Ries曾說過，越早進行用戶測試越好——沒有人希望在推出一個應用程序以后才發現用戶不知道如何使用它。線框圖能幫助設計師從潛在用戶那獲得有價值的反饋，而不用花時間去開發復雜的可交互原型。

但UI/UX設計師們使用線框圖并不意味著用得對用得好。因此下面提供一些實踐中的最佳做法以供參考。

怎樣畫線框圖？

為了發揮最大效益，為后續工作流程提供基礎，使用線框圖應該遵循以下幾個簡單原則：

1. 減少顏色的使用

如果你在線框圖中使用了豐富的配色，你應該提醒自己線框圖的目標是什么（展示產品包含什么元素，以及他們如何相互作用），并思考多余的顏色是否有助于實現這個目標。

避免顏色干擾

在某些情況下，配色確實會起作用。但一般線框圖里的顏色可能會分散讀者的注意力，使得后續調整變得更困難。此外，并非所有客戶對于用戶體驗工具都有所認識，這時候也可能需要使用彩色的線框圖。

線框圖中正確的用色的范例

除了黑白兩色，你也可以使用其他的顏色。有時候使用顏色突出顯示特定的組件是合理的，例如可以用紅色表示錯誤狀態，用藍色表示注釋等。

2. 使用簡單的組件設計

當你在線框圖上添加組件時，選擇基礎的設計即可，不需要放置過于詳細的組件。這些組件對團隊來說，應該是易識別的、一目了然的。花費大量時間和精力去設計詳細的線框圖組件不一定有用。

用簡單的組件清晰表達其功能

3. 保持一致性

相似的組件在所有線框圖上看起來應該是相同且一致的。如果相同的組件看起來不一樣，開發人員會質疑其是否一致，影響他們的判斷，甚至要為不同的設計增加額外的開發成本。在制作線框圖的時候，請記住：保持一致，減少混亂。

保持樣式的統一性

4. 使用真實內容

我們有時候會看到UI/UX設計師不在線框圖上添加真實內容，而是使用“loremipsum”一類的無意義文字。很少有設計師意識到這是不對的。你可能會說，內容在設計階段反正不可用。確實，我們建議你使用內容草稿就可以了。

使用真實的內容而不是假文字

在真實情境中，內容會影響你的設計，使用草稿則能幫你做出更好的設計。如果你用的是無意義文字，界面就可能會喪失與真實環境的一致性和整體性，后續可能需要對用戶界面進行大量調整，甚至是創造一個無法落地的設計并推倒重做。總之，真實的內容可以為線框圖提升價值，串聯上下文，提供更有說服力的解釋。

5. 使用注釋

有時候可能會出現一些設計方案無法用視覺來說明的情況，因此上級、客戶或開發人員可能會對它們產生疑問。例如，某些控件背后的邏輯是什么。在這種情況下，你可以提供一定的注釋來解釋其背后的邏輯。一來團隊能理解，二來你不需要再解釋。

用注釋解釋邏輯

6. 低保真到高保真

沒有嚴格規定說你應該使用低保真線框圖還是高保真線框圖，這取決于項目本身。所以在特定情況下，當你需要為線框圖添加更多的細節時，不需要糾結。但是正如Eric Ries所說，如果這些細節不能帶來價值，你就不要做多余的“無用功”。先從基礎開始做起，再根據需要不斷完善和添加細節。例如，當你需要開發者關注到一些個性化的解決方案上來時，可以添加更多的細節，并在線框圖中說明清楚。

保真和高保真線框圖都有自己存在的必要

7. 將線框圖擴展到原型

作為設計師，我們需要和不同的產品打交道，有些產品交互簡單而普通，有些則相當復雜。有時候線框圖不足以說明其復雜性和典型性，你就可以將線框圖升級擴展為可交互原型，而不是寫冗長的筆記并花費大量時間來解釋它。

開發可交互原型變得越來越容易

現在市面上我們有一系列簡單而強大的工具，比如Figma、Invision、AdobeXD、 UXPin、 Axure、Moqups等。只需要進行適度的評估就能選擇最合適的工具來設計線框圖，開發簡單的原型。

用來做線框圖的工具主要有以下兩個目的與特性：

1. 簡易性：門檻低，對于剛入行UI/UX的新人和缺乏使用復雜軟件經驗的人來說，它們再完美不過。
2. 協作性：強調協作性的工具一般都包含豐富的團隊協作功能。協作是現代軟件開發的支柱，因此最好的線框圖工具不僅提供大量的功能，還允許參與設計過程的所有團隊成員之間能進行高效簡單的協作

以下是繪制線框圖的主流工具：

Figma：一款基于云協作的工具，功能強大，支持 Windows 和 macOS 的Web端和桌面端。Figma 為構建線框圖、原型、UI繪制等提供了許多強大的功能。
Sketch：在UI/UX設計師中使用廣泛，還可安裝插件來實現多種功能。與競品不同，Sketch只能在macOS上使用，還需要用戶依靠第三方來解決協作的問題。

有很多工具都能用來設計線框圖，我們建議你不應該只是根據產品的功能和特性來進行選擇。相反，我們建議你多嘗試和探索，并決定哪個工具才是最適合你的。

為了展示現代設計工具的強大力量，這里我將分享個人的經歷來展示我和我的團隊如何使用上述工具來完成一個完整有效的線框圖設計流程。

和團隊一起畫線框圖（案例）

我工作的公司正在開發復雜的金融科技數字產品。除了設計團隊，還有一個專業的業務分析師團隊。他們準備了需求并創建了低保真度的線框圖，然后傳遞給我們的設計團隊