編輯導(dǎo)語：我們常輕忽身邊習(xí)以為常的事物，覺得沒有必要為一些看似簡單又可有可無的東西浪費時間——例如線框圖。雖然沒必要凡事都尋根問底，但當(dāng)面對復(fù)雜問題時，腳踏實地回歸基本面也許才是根本解法。本文深入介紹程序開發(fā)界面設(shè)計中，最簡單也最容易被輕忽的線框圖設(shè)計。

接下來用以下幾個點進行說明：

1. 什么是線框圖？
2. 常見誤區(qū)
3. 為什么要畫線框圖？
4. 怎樣畫線框圖？
5. 組織團隊一起畫線框圖

CB Insights 做過一份調(diào)研報告《創(chuàng)業(yè)公司失敗的20大原因》，里面說17%的創(chuàng)業(yè)公司認為他們失敗的原因在于用戶體驗不夠友好。

畢竟設(shè)計出一個對用戶友好的界面并不是一件容易事，特別是對于多維度、關(guān)系交錯和要素眾多的復(fù)雜產(chǎn)品來說。

要設(shè)計這類產(chǎn)品時，我們應(yīng)該自上而下，從頂層理念到具體細節(jié)的方法，而線框圖是最好的工具。

一、什么是線框圖？

線框圖（Wireframe）：它是展示W(wǎng)eb或者App框架的視覺指南。

繪制線框圖的過程中，我們需要考慮用戶需求和使用流程，并在相應(yīng)的頁面上布置需要的內(nèi)容和功能。

軟件開發(fā)的初期階段，產(chǎn)品在進入視覺設(shè)計和內(nèi)容填充階段之前，我們可以用線框圖來搭建頁面的基本框架和結(jié)構(gòu)。

乍一看很簡單，比較線框圖已是日常工作的基本環(huán)節(jié)，交互設(shè)計師也不少見。但這就是本文開頭提到的問題，我們往往對看似簡單的事情缺乏重視。

線框圖的最大意義，是幫我們定義產(chǎn)品或者服務(wù)的目標(biāo)。

可以說，線框圖設(shè)計的主要目的，就是向團隊、領(lǐng)導(dǎo)、合作伙伴展示App等應(yīng)用程序?qū)碛心男╉撁婧徒M件，以及這些元素將如何相互作用。

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

二、線框圖的常見誤區(qū)

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

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

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

在現(xiàn)實中，一些缺少產(chǎn)品設(shè)計知識的公司可能會直接跳過線框圖階段，雖然這可以削減成本，但也會產(chǎn)生風(fēng)險。

遇到這種情況，設(shè)計師可以嘗試主動解釋為什么要畫線框圖、它對我們的產(chǎn)品有什么好處、怎樣節(jié)省開發(fā)成本？

三、為什么要畫線框圖？

1. 幫助團隊確認工作內(nèi)容

線框圖允許設(shè)計師用可視化的方式快速創(chuàng)建產(chǎn)品原型，并向團隊展示哪里需要修訂，界面有哪些，上面有什么元素和控件，它們是怎么交互的。

同時，瀏覽可視化的線框圖要比閱讀說明書快得多，也能減少預(yù)期和最終成品之間的差異。

2. 讓所有團隊成員都能參與產(chǎn)品設(shè)計

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

3. 為客戶提供原型

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

4. 能執(zhí)行用戶測試

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

但UI/UX設(shè)計師們使用線框圖并不意味著用得對用得好。

因此下面提供一些實踐中的最佳做法以供參考。

四、怎樣畫線框圖？

為了發(fā)揮最大效益，為后續(xù)工作流程提供基礎(chǔ)，使用線框圖應(yīng)該遵循以下幾個簡單原則:

1. 減少顏色的使用

如果你在線框圖中使用了豐富的配色，你應(yīng)該提醒自己線框圖的目標(biāo)是什么（展示產(chǎn)品包含什么元素，以及他們?nèi)绾蜗嗷プ饔茫?，并思考多余的顏色是否有助于實現(xiàn)這個目標(biāo)。

在某些情況下，配色確實會起作用。但一般線框圖里的顏色可能會分散讀者的注意力，使得后續(xù)調(diào)整變得更困難。

此外，并非所有客戶對于用戶體驗工具都有所認識，這時候也可能需要使用彩色的線框圖。

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

2. 使用簡單的組件設(shè)計

當(dāng)你在線框圖上添加組件時，選擇基礎(chǔ)的設(shè)計即可，不需要放置過于詳細的組件。這些組件對團隊來說，應(yīng)該是易識別的、一目了然的?；ㄙM大量時間和精力去設(shè)計詳細的線框圖組件不一定有用。

3. 保持一致性

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

4. 使用真實內(nèi)容

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

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

5. 使用注釋

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

6. 低保真到高保真

沒有嚴格規(guī)定說你應(yīng)該使用低保真線框圖還是高保真線框圖，這取決于項目本身。

所以在特定情況下，當(dāng)你需要為線框圖添加更多的細節(jié)時，不需要糾結(jié)。

但是正如Eric Ries所說，如果這些細節(jié)不能帶來價值，你就不要做多余的“無用功”。先從基礎(chǔ)開始做起，再根據(jù)需要不斷完善和添加細節(jié)。

例如：當(dāng)你需要開發(fā)者關(guān)注到一些個性化的解決方案上來時，可以添加更多的細節(jié)，并在線框圖中說明清楚。

7. 將線框圖擴展到原型

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

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

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

1. 簡易性：門檻低，對于剛?cè)胄蠻I/UX的新人和缺乏使用復(fù)雜軟件經(jīng)驗的人來說，它們再完美不過。

2. 協(xié)作性：強調(diào)協(xié)作性的工具一般都包含豐富的團隊協(xié)作功能。協(xié)作是現(xiàn)代軟件開發(fā)的支柱，因此最好的線框圖工具不僅提供大量的功能，還允許參與設(shè)計過程的所有團隊成員之間能進行高效簡單的協(xié)作以下是繪制線框圖的主流工具：

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

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

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

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

我工作的公司正在開發(fā)復(fù)雜的金融科技數(shù)字產(chǎn)品。除了設(shè)計團隊，還有一個專業(yè)的業(yè)務(wù)分析師團隊。他們準(zhǔn)備了需求并創(chuàng)建了低保真度的線框圖，然后傳遞給我們的設(shè)計團隊。

線框圖設(shè)計中的團隊關(guān)系

1. 選擇工具

我們需要為業(yè)務(wù)需求分析師（BA）和設(shè)計團隊選擇一個一體化的工具。由于大多數(shù)商業(yè)分析師的設(shè)計技能都相當(dāng)?shù)停覀兿Ｍ业揭环N既適用于他們又適用于設(shè)計師的強大工具。

此外，易于協(xié)作是我們團隊的首要任務(wù)?；谶@些標(biāo)準(zhǔn)，我們選擇了Figma。

2. 創(chuàng)建組件庫

為了簡化產(chǎn)品設(shè)計過程，我們創(chuàng)建了BA團隊可以使用的自定義組件庫。這使我們能夠加快線框圖的繪制，因為業(yè)務(wù)分析人員可以快速地使用現(xiàn)成的組件，而不是自己繪制。

3. 訓(xùn)練團隊

為了展示如何使用Figma和組件庫，我們?yōu)锽A團隊辦了一個小型的工作坊。在工作坊中我們還拓展了一些額外的關(guān)于原型設(shè)計的知識。

結(jié)果

在案例中，即使團隊成員分布在烏克蘭、澳大利亞和菲律賓，F(xiàn)igma 也被證明在線框圖和協(xié)作方面是高效的。我們目前使用 Figma 作為溝通渠道的事實證明，通過郵件或信息在線框圖上進行協(xié)作更為方便。

六、總結(jié)

很多設(shè)計師開始時不太重視線框圖，無法通過線框圖來為項目提供有效幫助，進而導(dǎo)致團隊也感受不到線框圖的意義。希望閱讀完此文的你，無論是否是設(shè)計師，都能對線框圖有更多的理解。尤其是在這樣一個設(shè)計工具越來越便捷的時代，希望大家能夠借助線框圖，讓自己產(chǎn)品的用戶體驗以及團隊的工作效率更進一步。

原文作者：Anton Suprunenko

原文地址：ttps://medium.muz.li/how-to-succeed-in-wireframe-design-2ab3cd5c4bc9

譯者：Jonathan，公眾號：體驗進階。

本文由 @Z Yuhan 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議