形式和功能——頂級線框工具指南

已發表: 2022-03-11

1487 年，達芬奇在米蘭公爵盧多維科·斯福爾扎 (Ludovico Sforza) 的讚助下繪製了一幅名為“戰車”的示意圖。 儘管機器被故意設計為不能正常運行，但一組工程師在 2010 年重新創建了它。達芬奇的示意圖是基本線框的最早示例之一。

最早的線框工具之一是示意圖。
萊昂納多·達·芬奇的“戰車”被繪製成示意圖，工程師能夠在 2010 年重新製作。

線框這個術語已經使用了幾十年，早在它被網頁設計界採用之前。 線框最初用於計算機輔助設計 (CAD) 軟件中，無需詳細說明即可說明對象的設計。 結果是一個看起來像是由電線製成的藍圖，因此，我們最終得到了線框。

但是什麼是設計中的線框，擁有線框的目的是什麼？

數字設計中的線框是一種視覺指南或頁面示意圖，它去除了印刷風格、顏色、圖形和交互元素，並代表了設計過程中的特定點。 其目的是展示描述功能、行為和內容優先級的頁面級佈局理念。

線框設計工具用於生成描述頁面級佈局細節的線框。
線框說明沒有樣式、圖像和交互元素的頁面級佈局細節。 （米克洛斯·菲利普斯）

設計師使用線框將底層概念結構與網站或應用程序屏幕的視覺設計聯繫起來。 共有三種不同類型的線框：

  • 低保真- 沒有很多細節的早期繪圖。 低保真線框通常是手繪草圖，或代表想法的線條和形狀。
  • 中保真- 開始顯示更多組件細節的線框，並專注於內容佈局和整體頁面結構。
  • 高保真- 後期（迭代後）繪圖，描繪了組件的更多細節和更高級別的渲染，具有行為特徵和對內容佈局的關注。

UI線框手繪，無需使用軟件。
線框可以在紙上繪製而不是使用軟件，並且通常在使用線框工具之前以這種方式開始。 （米克洛斯·菲利普斯）

數字設計中線框的演變是另一個 UX 工件和可交付成果：wireflow。 Wireflows 是線框和流程圖的組合，UX 設計師為了另一個目的慢慢地合併了兩個工件：說明和跟踪表示產品（如 Web 應用程序）中任務流的交互。

Wireflows 是一種包含流程圖的 UX 線框。
Wireflows 是一種 UX 可交付成果，它使用線框圖來說明任務流程。 （來源：NNGroup）

設計師在使用線框圖時遇到的一個問題是傳達用戶旅程。 雖然有更複雜的方式來顯示用戶旅程，但有一種趨勢是將它們包含在簡單的線框圖中。 一個有用的工具是線框圖。

線框圖將線框與用戶旅程（或用戶流程）相結合，以展示用戶使用線框瀏覽產品的旅程。

頂級線框圖工具

在決定使用哪種線框圖工具時，設計師有很多選擇。 新工具不斷進入市場，因此很難跟上。 以下是要尋找的優秀線框圖工具的一些特徵：

  • 產生各種保真度（從低到高）的能力
  • 易於使用且經常更新的穩定軟件
  • 具有附加功能的內置模板、符號和標準 UI 組件

本指南中的一些工具更側重於線框圖，而其他工具則試圖在線框圖和原型設計以及模型功能之間取得平衡。 選擇使用一種工具而不是另一種工具（或幾種工具）歸結為設計師的偏好。

香脂

Balsamiq 是一種低保真、易於使用的線框圖工具，因其易用性和標誌性的“手繪”外觀而備受青睞。 它帶有一組預先構建的模板，可以通過拖放編輯器快速輕鬆地使用。 設計師可以添加自己的資產並自定義佈局。

當以全屏演示模式或導出的 PDF 顯示項目時，可以通過鏈接模型來創建簡單的點擊體驗以進行可用性測試，從而實現基本原型設計。

Balsamiq 作為桌面版本（Windows 和 Mac）、雲服務或作為 Google Drive、Confluence 和 JIRA 的插件提供。

Balsamiq 是一款出色的線框設計工具，適用於基本線框和線框網頁設計。
Balsamic 生成看起來像“手繪”的低保真線框。 （米克洛斯·菲利普斯）

Moqups

Moqups 是另一個專注於線框圖的創意協作工具，但也可用於原型設計。 與 Balsamiq 不同，它完全基於 Web，旨在為 Web 和移動應用程序製作線框。

Moqups 和 Balsamiq 之間的主要區別在於線框的保真度。 Balsamiq 產生“手繪”外觀，而 Moqups 為移動應用程序和網頁設計（包括 iOS、Android 和 Bootstrap）提供全彩模板和套件。

Moqups 在其他幾個方面與 Balsamiq 不同。 該軟件允許有限的對象編輯和頁面管理，使設計人員能夠定義“主”對象，這可以在迭代過程中對線框進行更改時節省大量時間。

例如，設計人員創建具有特定大小、形狀和顏色的主按鈕對象。 此按鈕在整個線框中多次使用。 後來在迭代過程中，如果設計者需要改變按鈕的顏色，而不是改變每一個按鈕對象，他們可以改變一次，所有的子按鈕對像都會立即受到影響。

Moqups 是一個線框設計工具，專注於具有附加功能的純線框。
Moqups 是一款出色的線框 UX/UI 工具，專注於線框並添加了其他功能，例如對象編輯和頁面管理。 （阿特拉斯市場）

皮多科

Pidoco 是一款頂級線框圖工具，專注於具有一些基本交互性的低保真交付物。 它也是基於雲的，它利用可重複使用的組件，並通過更強大的點擊線框體驗與 Balsamiq 和 Moqups 區分開來。

Pidoco 對移動應用程序和網頁設計很有幫助，因為它具有內置的移動視圖，因此設計人員可以看到他們的應用程序頁面在各種屏幕尺寸上的外觀。 另一個內置功能是導出和規範功能。 這有助於設計人員從線框轉移到原型/模型，而無需插件或擴展。

Picoco 的外觀和感覺都低保真，但包含一些通常在更複雜的設計工具中發現的功能。 它適用於正在做精益 UX 並且需要以更短的反饋週期快速迭代的設計師。

Pidoco 是一款線框設計工具，具有大型設計系統的特點。
Pidoco 允許設計師在多種屏幕尺寸上查看他們的線框，使其成為移動應用程序設計的完美工具。

格利菲

Gliffy 是一款中保真線框圖工具，具有一些獨特的功能，使其與 Balsamiq 和 Mockups 不同。 一個獨特的功能是能夠創建線流。 Gliffy 具有內置的流程圖和圖表功能，包括模板、思維導圖和業務流程建模。

與其他線框圖工具一樣，Gliffy 提供了一個形狀、圖標庫，並能夠將線框圖本地共享到 Atlassian 的 Confluence、Slack、Basecamp、Trello 和 WordPress。

這是一個相對較新的 UX 線框設計工具，然而，它擁有龐大的專業設計師用戶群，他們正在尋找靜態線框之外的簡單集成和功能。

Gliffy 是一款具有共享和線框功能的中保真線框設計工具。
Gliffy 為流程圖、思維導圖和業務流程建模提供模板，允許設計師創建線流。 （格利菲）

線框.cc

Wireframe.cc 是一個基本的線框圖工具，很像 Balsamiq。 它有一個乾淨的界面，沒有很多分散注意力的工具欄和圖標。 與許多其他工具不同，它允許您使用鼠標“繪製”線框。

Wireframe.cc 提供了一個模板庫，以及乾淨、簡單的對象處理。 Wireframe.cc 在使用精益 UX 時提供的一個有用元素是每個線框頁面的 URL，因此可以快速輕鬆地共享它以獲取反饋。

沒有內置原型設計或交互性，因為它純粹專注於低保真線框圖。

Wireframe.cc 是一個低保真線框 UX 工具，最適合精益 UX。
Wireframe.cc 是一款低保真極簡線框圖工具，最適合精益用戶體驗。

異想天開

Whimsical 被稱為線框圖的“Google Docs”，它模仿了 OmniGraffle 和 Visio 等圖表工具。 它不專注於原型設計/模型，因為它的主要重點是線框圖和流程圖，使其成為製作線流的絕佳候選者。

與 Gliffy 一樣，Whimsical 是一款中保真線框圖工具，包括一個大型可配置元素庫（按鈕、輸入、複選框等）。

同時在同一個線框文檔上進行無限協作對於遠程設計團隊來說是一個很棒的內置功能。

Whimsical 是一款包含團隊協作的中保真線框設計工具。
Whimsical 是一種中保真線框設計工具，包括流程圖和團隊協作。

Adobe XD

Adobe XD 最近因其簡單的界面、與其他 Adob​​e 產品的緊密聯繫、易用性以及減少對插件和擴展的依賴的內置功能而引起了設計師的注意。

在 Adob​​e XD 中構建線框有兩種方法。 它們可以使用線條和形狀來創建對象和元素，也可以使用來自 behance.net 和 XD 資源等來源的預製 UI 工具包來構建。

Adobe XD 的一項節省時間的功能是能夠創建“主”組件（在 Sketch 中稱為符號），這在進行更改時很有用，因為從主實例化的所有組件都將繼承任何更改。

使用 XD 作為線框圖工具的另一個優勢是能夠通過單擊鼠標切換到原型製作模式。 原型製作模式內置於 XD 中並在後台運行，因此設計人員在從線框轉移到原型時不會浪費時間。

Adobe XD 是具有高級功能的頂級線框設計工具。
線框 UI 工具包可用於在 Adob​​e XD 中創建高保真線框。

草圖

Sketch 是 UX/UI 設計師的流行設計工具，它提供了一個用於矢量編輯、原型製作和協作的平台，並且擁有不斷增長的數百個插件庫來擴展其功能。

Sketch 中的線框很像 Adob​​e XD，它使用工具包/模板和繪圖工具。 Sketch 大量使用Symbols ，它們是可重用的組件，可以定義一次並多次使用（按鈕等）。 實例化的符號也會對“主”符號進行任何更改。 這對設計師來說是有利的，因為在整個線框圖過程中通常需要進行許多更改。

Sketch 允許設計師創建高保真線框、原型和模型。 它不是基於雲的應用程序，潛在的缺點之一是它僅適用於 macOS。

Sketch 提供 UX 線框和 UI 線框功能以及原型設計。
Sketch 是一個設計系統，可生成高保真線框、交互式原型和模型。 它是一個僅在 macOS 上運行的軟件應用程序。

用戶界面

UXPin 是一個頂級線框工具，它支持交互狀態、邏輯和編程組件，使設計人員能夠編寫條件交互、變量和表達式。

UXPin 遠遠超出了線框圖，主要專注於使用 UI 組件庫、符號、矢量繪圖工具和共同編輯進行原型設計。

有 Windows、macOS 和雲/瀏覽器版本。 對於高保真線框圖，UXPin 的工作方式與 Sketch 和 Adob​​e XD 非常相似。 它不像 Balsamiq 那樣拖放，但對於希望留在單一生態系統中的設計師來說，它確實將原型設計和模型提升到了一個新的水平。

UXPin 是一個帶有程序化組件的設計系統，是一個高保真線框工具。
UXPin 是一種高保真線框工具，能夠添加編程功能。 (UXPin)

奇蹟

Marvel 是另一種有助於線框圖和原型製作的流行設計工具，它為設計人員提供了一個熟悉的拖放界面，用於創建低保真到高保真線框圖。

Marvel 不需要任何附加組件或擴展，因為所有資產都包含在內。 該平台完全基於雲，可以快速輕鬆地與其他設計團隊成員或客戶共享線框。

設計師選擇 Marvel 進行線框圖製作的原因之一是它與其他平台的集成，例如 Jira、Sketch、Confluence、Dropbox、Slack 等。 對於與開發人員、遠程設計團隊和客戶的協作，此功能可為設計人員節省大量時間。

Marvel 還有一款名為 Pop 的產品，它可以幫助將筆和紙的線框圖草圖轉換為交互式 iPhone 和 Android 原型。 Pop 允許設計師為他們的草圖拍照並將其轉換為交互式線框。

Marvel 是一種線框圖工具，內置集成到許多流行的協作工具中。
Marvel 因其高保真拖放功能以及與許多流行協作工具的集成而成為頂級線框圖工具。 （奇蹟）

Axure RP

Axure RP 已經存在了很長時間，是創建靜態線框（以及高度交互的原型）的絕佳工具。 儘管它適用於 Windows 和 macOS，但它不是基於雲的。

線框圖可以使用其龐大的拖放組件庫來完成，但是，Axure RP 是一個遠遠超出線框圖的複雜工具。 使用 Axure RP 的編程功能，設計人員可以創建具有反映完整工作應用程序功能的高級原型。

鑑於 Axure 的高學習曲線，僅將其用於靜態線框是沒有意義的。 但是，如果目標是生產高度拋光和實用的原型，那麼它將是產品設計師的完美工具。

Axure RP 是一種先進的線框圖工具，能夠創建應用程序。
Axure RP 是一種先進的線框圖工具，具有創建模仿成熟應用程序功能的編程元素的能力。 （阿克蘇）

Toptal 設計師最喜歡的線框工具

我們聯繫了一些 Toptal 設計師，以了解專業設計師使用哪些線框工具以及原因。 這是他們不得不說的。

“我最喜歡的是 Adob​​e XD 和 UXPin。 我開始選擇 XD 作為最愛，因為它很容易製作快速線框圖和測試想法，從那裡我實際上可以在同一平台上開始設計甚至原型。” - 邁克爾·克雷格

“我最喜歡的是 Pop，因為它實在是太快了。 無論如何，我總是在紙上畫線框，所以效果很好，我不需要雙重處理任何東西。 我還發現它對整個‘不要愛上解決方案’這件事有好處，因為它顯然是低保真。” - 尼古拉·拉什頓

“我幾乎一直在使用 Axure 進行設計工作。 它是一個高度被低估的綜合設計工作工具，具有非常高的複雜性”——Andi Omtvedt

“我實際上不再使用線框本身——因為我認為這些工具足夠強大，可以製作低保真原型，因此幾乎將初始線框與更好的視覺效果結合在一起。 我從今年 1 月開始採用 Framer X，我很喜歡它。” - 查理·威廉姆斯

概括

考慮到生產複雜原型的能力，線框圖仍然相關嗎？ 一些專業設計師會爭辯說線框是過去的遺物，而另一些則堅決捍衛它們對設計過程的持續重要性。

今天有大量的線框工具可以促進設計過程。 有些人繼續專注於純粹的線框圖，即使趨勢正在轉向以線框圖開始但也包括原型能力的混合產品，並且在許多情況下會產生功能齊全的模型。

儘管它已經從低保真交付物演變為中保真或高保真交付物，但線框圖肯定不會消失。

• • •

進一步閱讀 Toptal 設計博客：

  • 線框映射：如何避免範圍蔓延
  • 線框之死。 直接到高保真！
  • 設計工具對決 – Adob​​e XD 與 Sketch (2019)
  • 使用這些頂級 UX 工具掌握您的工藝
  • 頂級設計師使用的 10 個 UX 可交付成果