線框之死。 直接到高保真！

用戶體驗設計是一門引人入勝的學科。 要做到這一點，從業者必須精通各種主題和技能。 為了實踐以用戶為中心的設計方法並為日常產品設計挑戰創建易於使用的創新解決方案，UX 從業者的手藝和理解涉及從基本繪圖到敘事/旅程設計再到認知心理學的方方面面。

在 UX/UI 設計過程中使用了各種各樣的工具、生成的工件和發現的發現，它們被捕獲在各種文檔甚至原型中。 我們最知名的、最重要的神器是好的 ol' 線框。

線框——通常是為快速評估而創建的單色設計骨架——非常棒。 它們使我們能夠將來自許多不相關方的輸入翻譯成一個每個人都可以查看的文檔。 許多不同的工作職能評估線框； 業務分析師、項目經理、營銷主管、各種設計師和開發人員、各種其他供應商和服務提供商——甚至是產品測試時的目標受眾。 線框讓每個人都可以看到他們的個人需求將如何得到解決，並讓整個團隊有機會在需要進行任何繁重工作之前解決所有問題。

有利有弊，但在某些情況下，完全跳過線框階段是有意義的。 通過在發現後或準備原型設計時直接在高保真級別處理 UX 和視覺設計，可以節省大量時間。 這將使其他人有機會同時評估產品的功能和外觀，從用戶測試參與者到客戶和同事。

讓我們找出為什麼線框有時會出現問題，何時跳過它們是有意義的，以及如何使無線框流程適應工作流程。

線框的問題

無論是在瀑布環境還是敏捷環境中，典型的設計過程都涉及研究、定義、構思、原型設計、測試和部署階段，以及沿途與利益相關者一起審查的許多接觸點。

讓我們看一下線框設計可能成為瓶頸的設計過程：

原因1：客戶不明白他們在看什麼

設計過程通常從對問題的某種研究開始。 案頭研究、利益相關者訪談和用戶訪談只是可以進行的一些活動，以獲得更深入的了解。 經過研究，設計團隊開始評估一些想法和概念，以找到最佳解決方案。

當一個概念更加充實時，設計團隊通常會在審查會議期間與客戶分享一系列線框圖。

問題是，線框圖非常抽象。

他們描述的東西類似於事物，但不是將要建造的實際事物。 在這個階段，線框將包含佔位符圖像和各種 TK（即將推出）、FPO（僅用於放置）和 TBD（待定），如下例所示。

可能有關於功能、業務需求和錯誤處理的詳細信息將在大量註釋中顯示。 通常，沒有足夠的時間詳細梳理這些內容，因此客戶將不得不自己閱讀它們。

在線框審查期間，我們要求我們的客戶專注於所描述的概念，並評估它是否似乎解決了業務和用戶問題。 然而，我們仍然會收到一些問題，這些問題對我們來說似乎並不相關。 客戶想知道線框是否是“最終副本”，或者他們是否可以看到要在英雄圖像中顯示的照片示例——或者關於將在視覺設計、UI 原型設計或開發中處理的其他問題。

對於客戶甚至內部利益相關者而言，線框可能過於抽象而無法有效評估。 線框告訴人們設計完成後的效果，但他們仍然需要在精神上做很多工作才能將其融合在腦海中。 我們的客戶可能是也可能不是視覺思想家，期望他們查看藍圖並想像一個成功的產品或網站可能太過分了。

有一些客戶特別要求審查帶註釋的視覺設計，因為他們更容易連接點，進行深思熟慮的討論並提供深思熟慮的反饋。

原因 2：它們並不總是適合用戶測試

希望在設計過程中安排了一些用戶測試，因為這是測試從整個概念的可行性到事務中顯示的詳細程度的所有內容的好方法。

測試這類事情的一種典型方法是通過原型設計。

線框可以而且確實可以用於原型製作。 設計團隊僅限於測試流程和功能，並且由於缺乏視覺設計層，影響用戶行為的視覺樣式很容易被忽略。

這是明智的嗎？ UX、視覺和文案設計都相互影響。 很難將它們分開並在測試環境中隔離它們。 與科學研究類似，一個單獨測試的功能的結果無法控製或預測它在野外的表現。

有時，整體測試所有這些東西會更有效。

恰當的例子：多語言產品或服務。 這些語言可能具有不同的語法、字母和字符寬度，這可能會影響整體設計。

此外，由於復制內容會影響用戶體驗，因此翻譯本身可能會影響用戶體驗。

例如，我們有一項任務要求我們測試幾種不同的信息架構，因為需要用當地語言解釋各種概念。 如果不測試 UI 中的實際副本，我們就不會發現對文案和翻譯的影響。

我們發現需要更多的詞來用當地語言描述類似的概念，並且我們必須在全球範圍內改變按鈕的大小和形狀以適應該語言所需的冗長措辭。 如果在測試 UI 中的實際視覺組件時不關注文本問題，我們就不會發現按鈕需要佔據移動屏幕的整個寬度，這會影響我們未來的 UX 設計。

關鍵要點：從一開始就準備高保真 UI 是有意義的，尤其是對於多語言項目。

原因 3：他們讓開發人員和 QA 陷入困境

在視覺設計階段不可避免地發生的是一切都在移動。 堆疊的圖像變成了瓷磚。 居中的文本變為左對齊。 手風琴觸發器圖標是+和- ，但現在它們是幾個 V 形。

這是視覺設計過程的正常部分。 同樣正常的是，視覺設計中所做的任何更改都不會反映在線框中，因為線框已“簽署”。

當所有視覺效果都獲得批准後，就該將所有內容交給開發人員了。 在大多數情況下，他們會收到一組詳細的帶註釋的線框和一組漂亮的視覺設計以及樣式指南。 現在由他們在這兩個文檔之間進行交叉引用並將其變為現實。

這是設計過程真正失敗的領域。 我們為開發人員提供了太多可供參考的文檔，並由他們決定哪些信息優先。 這增加了支持電話和 QA 所需的時間，自然會影響將產品或更新推向市場所需的時間。

為什麼不給開發人員一份包含所有內容的準確文檔呢？ 大多數客戶也會喜歡一份副本，作為作品的完整參考。

解決方案：跳過線框

顯然，有時需要完整的線框階段，有時則不需要。 甚至有時直接進入高保真階段完全勝過線框階段。

如果其中任何一個為真，您可能會考慮跳過線框階段：

有可靠的參考資料。

看看現有的工作。 可能已經有詳細的 UI 參考可用。 如果您要更新現有網站或向現有應用程序添加新功能，請查看當前網站和應用程序以查找可重複使用的模式和样式。

如果您可以訪問現有作品的源文件，那就更好了。 可以說，在開發過程中，某些功能和元素可能在翻譯中丟失了，您可以參考源文件以了解該功能應該如何完成。

除了（或不存在）現有產品或網站之外，請檢查是否有樣式指南或模式庫。 客戶可能已經為一些品牌和視覺設計工作付費，這些資源可以再次用於您的項目。

使用盡可能多的樣式和模式，以便您的高保真輸出盡可能準確。

在此過程中，您已經安排了大量的迭代原型設計和測試。

在數週的原型設計和測試中為自己節省一些精力。 如果您第一次仔細設置文檔並巧妙地使用重複的樣式、圖案和符號，您可以輕鬆地以高保真度進行增量更新，並將它們直接發佈到您的原型製作工作流程中。 不需要線框圖。

作為一個很大的優勢，你可以用一塊石頭殺死兩隻鳥。 您可以在 UX 反饋的同時獲得視覺和 UI 反饋，並一次性完成所有這些更改。

您的測試參與者非常真實。

正如您的客戶和同事有時可能需要具體示例一樣，您的項目的目標受眾也可能需要。

最近的一次演出讓我為低文化的目標受眾設計財務屏幕。 閱讀理解不是唯一的問題——抽象概念通常很難解決。 該目標受眾通常需要使用具體示例來討論金融概念； 否則，他們無法真正關注對話。

為了理解金融概念，這些觀眾中的測試參與者需要感覺他們實際上是在進行交易。 為了了解產品的工作原理，它需要看起來和感覺像一個真實的應用程序。

忘記像這樣的觀眾的線框！ 你最終會花費大量時間來解釋它們是什麼——而你的聽眾不會關注這些任務，也不會關注他們對它們的感受，因為他們無法與在生活中使用如此陌生的東西聯繫起來。

您的客戶的時間和/或預算有限。

很少有時間、資源和預算都對您有利。 您經常會發現自己試圖縮減範圍和價格，或者爭先恐後地尋找可以節省和節省的地方，同時仍然為您的客戶提供優質服務。

如果您的客戶負擔不起（或不太可能購買）完整的用戶體驗檢查，我可以建議您縮短線框圖時間嗎？ 如果您需要，可以在內部創建一些，但要為您的客戶繼續推進項目。 測試真實、有形的設計，讓您的客戶對實際工作做出反應。

如何終止線框階段

這部分相當主觀，因為它將取決於您的個人工作流程和客戶的具體需求。

話雖如此，這是一個流程“模板”，您最初可以嘗試適應您的工作流程，然後隨著您越來越多地以這種方式工作進行調整。

第 1 步：從您通常的研究和發現過程開始。

採訪、實地觀察、案頭研究、競爭分析——無論你通常做什麼（或計劃做什麼），都照常完成這個階段。

第2步：沿途畫一點。

在進行研究時，您可能會獲得一些有用的佈局和模式、引人入勝的流程等方面的想法。 記錄這些你通常做的。 我喜歡在我的筆記本上製作縮略圖，旁邊有書面筆記。 您可能更喜歡在白板上畫草圖或截取有趣的 UI 模式的屏幕截圖。 凡是能幫助你記住好主意的東西，就去做。

第 3 步：準備您的高保真文件

打開您選擇的設計工具並正確設置您的文檔。 選擇一些畫板尺寸並開始創建可重複的形狀、組和符號。

花時間將品牌調色板保存為單獨的色板，創建和組織類型樣式，並製作可以根據需要應用於所有形狀的標準投影和過濾器。

花很多時間讓你的符號恰到好處。 您可能有一個按鈕，根據它的狀態，它可能有四種不同的顏色。 如果可以，請使用符號覆蓋，以便您可以根據需要輕鬆應用不同的顏色和文本標籤。

如果使用了任何自定義圖標，請將它們保存為方形畫板上的單個符號（或任何合適的形狀）。 這樣，您就可以輕鬆地放大和縮小它們，同時仍保持適當的間距和對齊方式。

第四步：開始設計。

當您習慣以這種方式工作並查看您的風格指南在哪裡支持（以及在哪裡不支持）時，您的第一輪可能會有點粗糙。 除了為尚未定義樣式的模式創建解決方案外，還需要進行大量調整以使所有樣式正確。

在整個過程中，請遵循良好的“複製方向”或真實副本（如果有的話）。 不要讓標題寫著“頁面標題在此處”。 讓觀眾了解如果它是真實的，這裡會發生什麼。

同樣，不要創建電話號碼為 555-1212 的姓名都為 John Smith 的列表。 使用隨機列表生成器或插件創建不同的名稱和數字，或創建您需要顯示的任何數據集。 這可能看起來有點矯枉過正，但它可以讓您解決佈局和字符寬度問題，並幫助您的觀眾了解這五個條目都是不同的。

第 5 步：知道何時停止設計。

在這一點上，您不應該注意一些細節，因為它們確實需要太長時間。 也許是選擇準確的圖像進入英雄，或者設計一個自定義圖標來指示下載狀態。 在某些情況下，您可能會選擇使用佔位符圖像或圖標，並在以後測試真實圖像或圖標。

您必須在此處確定合適的內容，因為這將取決於項目的目標以及您的進度。

請注意，這可能取決於您的用戶測試參與者需要什麼才能正確評估工作。 對於我上面提到的低文化目標受眾，沒有什麼是太多的細節。 對於每個參與者，我製作了一個原型的變體，並在整個過程中使用了他們的真實姓名和電話號碼，這樣應用程序就真的感覺像是“他們的”。 他們必須假設的越少，他們就越容易遵循，我的結果就越好。

第 6 步：享受高質量的反饋和測試結果。

將您的設計發佈到您選擇的原型製作工具，並將它們帶到現場進行測試。 您現在可以獲得的不僅僅是功能上的反饋。 您可以發現潛在的視覺問題，例如顏色對比度或易讀性問題，並且可以發現複製方向或翻譯問題。 您還可以梳理出用戶對外觀和感覺或品牌的積極或消極感受。

當你進入視覺設計階段時，這些都是你可能會得到反饋的東西。 為什麼現在不得到所有這些反饋？ 一些關於視覺效果的反饋可能會直接影響用戶體驗，反之亦然，所以如果可以的話，最好同時解決所有這些問題。

包起來

毫無疑問，在許多情況下，項目的成功需要完整的線框階段。 複雜的設計，如響應式 Web 應用程序，需要單獨且專注於線框。 與已經構思和應用完整的可視層相比，在線框階段解決所有業務需求、邊緣案例和錯誤處理將節省時間和金錢。

但是，在正確的情況下，直接使用高保真度可以改善您的流程：

• 改善利益相關者的反饋。 來自目標受眾的客戶、開發人員、其他設計師和測試參與者可以準確地看到他們將獲得什麼，從而使他們能夠提供更高質量的反饋。
• 加快您的原型製作工作流程。 您的設計不僅可以立即進行測試，還可以同時獲得許多方面的反饋：用戶體驗、副本和視覺效果。
• 向客戶和開發人員交付單個文檔。 無需交叉引用和檢查各種文檔以了解按鈕應如何工作。 這也是您的客戶與內部利益相關者討論工作以獲得更多反饋的好方法。
• 節省時間和金錢。 這幾乎總是一件好事！

下次當你有一個項目時，你有一些現有的設計材料可供參考，或者如果工作的保真度低或高，它將對你的觀眾產生很大的影響時，試試這種方法。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗