什麼是 UI 草圖？UI 草圖是設計的一個術語。它隻是指在進入線框圖、原型設計和編碼之前勾勒出用戶界面的基礎知識。在您有瞭一個很棒的網站創意之後，並且在構建高保真設計圖之前，您就可以繪制 UI 草圖。UI 草圖是理解問題的第一步。UI 草圖沒有限制。您可以設計板上繪制草圖，在筆記本中，甚至可以在白紙中制作出手工制作的 UI 草圖。主要你要勾勒出你最初的 UI 想法，保持它的快速和簡單。不要介意 UI 草圖中的設計或功能細節。這是關於尋找正確的佈局，視覺層次的正確平衡。UI 草圖應該隻是用來幫助您消除不良想法並集思廣益，以將您提議的產品帶到屏幕上。草圖應該可以幫助您在盡可能短的時間內將想法轉化為界面。UI 或 UX 草圖？有些人更喜歡“用戶體驗草圖”這個詞。但對我們來說，用戶體驗草圖更重要。用戶體驗專業人士絕對應該整天畫草圖，但他們可以畫出從用戶旅程或用戶角色到利益相關者設計演示的任何內容。另一方面，UI 草圖純粹是指坐下來並通過所有可能的方式將您的想法變為界面現實的行為。在 UI 草圖繪制過程結束時，您應該知道您已經找到瞭將產品展示到屏幕上的合適的方式。不就是線框圖嗎？很容易將 UI 草圖與線框混為一談。兩者都旨在快速，並且都旨在直觀地說明界面理念。但它們不是一回事。UI 草圖是您通過所有可能的方式以界面形式呈現您的想法。這是一個讓您自由發揮所有可能結果並思考如何讓您的用戶從 A 到 B 的機會。線框是超出基本草圖的一步。在一個線框圖中，您開始考慮 UI 元素的放置、元素層次結構和大小（盡管在這個階段您還沒有“設計”）——所有這些都依賴於您的應用程序線框圖工具。上圖您將能夠輕松地看到 UI 草圖和靜態線框之間的區別。UI 草圖應該具有真正的手工制作的感覺，而線框是由灰度元素組成的。UI草圖的優點UI 草圖起初可能感覺像是一個不必要的步驟。從線框開始還不夠嗎？不夠。我們已經確定兩者有不同的目標。UI 草圖絕對是確保您已完成所有可能選項並找到有效、用戶友好的方式來表達您的界面想法的良好方式。UI草圖繪制速度很快。沒有什麼比用筆和紙更快的瞭。與在屏幕上繪制線框圖相比，您可以更快地完成創意迭代。素描也能讓你解放出來。每當您使用數字工具進行設計時，該工具的參數都會影響您所做的事情。如果你知道你不能在這個工具中做某事，你甚至不會考慮嘗試它。那可能是你很好的主意，當你在塗鴉時，這不會發生。擁有一個 UI 草圖將使您的網站線框（或小程序，APP線框）階段更有效。你將在一個強大的、迭代的基礎上工作，你會知道把精力集中在哪裡。你已經排除瞭幹擾；多虧瞭 UI 草圖，您可以將所有的線框圖時間和精力集中在改進真正重要的東西上。UI草圖的缺點勾勒出用戶界面有一些潛在的缺點。主要是，如果你在紙上畫草圖，將這些想法轉化為你的線框圖工具可能會很費力。當然，細節不會在草圖中找到。按鈕狀態、任何類型的交互或視覺裝飾之類的東西都不能放在設計草圖上。也確實，如果你試圖遵循更時尚的視覺風格，比如仿真設計或擬物化設計，你將無法在草圖上體現美學美感。如何進行UI草圖過程是什麼制作有效的 UI 草圖的第一步是——專註於想法。盡可能多地提出想法和迭代。如果它們不是“好”的想法無關緊要，如果你的草圖未完成並且粗略也無關緊要。隻需找出在項目環境中處理設計的合適的方法。素描是關於交流，而不是美學。您正在以最原始的形式傳達您對問題的解決方案。嘗試一些“發散草圖”，以確保您真正解決瞭設計問題的所有可能排列。發散草圖是指您在同一屏幕上繪制不同的方法。例如，您可能會嘗試大量不同的方法來設計網站，小程序，APP的主導航，每一種方法都在其他方法旁邊繪制。在線有可打印的模板，以方便不同的 UI 草圖繪制。接下來嘗試應用多個思路則並選擇多個可能的選項進行處理。這可能會更耗時，但它是更好地理解您的設計的好方法。在這個階段，你可以從不同的草圖中結合最好的元素。你的解決方案應該在線框圖階段之前不斷嘗試。給忙碌的UI設計師的一些提示我們提供瞭一些非常有用的 UI 草圖技巧，包括：分層構建草圖使用便利貼說明添加“交互”復印草圖並將其用作模板初學的設計師準備繪制UI草圖 吧！草圖沒什麼好怕的，請大膽的嘗試。即使您認為自己不會畫畫、時間緊迫或完全習慣瞭線框圖勾勒出用戶界面的想法將改善您的產品設計過程。