如何進(jìn)行網(wǎng)站、小程序、APP的UI草圖設(shè)計(jì)

時(shí)間：2023-10-10 05:42:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-10 05:42:01 來源：網(wǎng)站運(yùn)營

如何進(jìn)行網(wǎng)站、小程序、APP的UI草圖設(shè)計(jì)：

什么是 UI 草圖？

UI 草圖是設(shè)計(jì)的一個(gè)術(shù)語。它只是指在進(jìn)入線框圖、原型設(shè)計(jì)和編碼之前勾勒出用戶界面的基礎(chǔ)知識(shí)。在您有了一個(gè)很棒的網(wǎng)站創(chuàng)意之后，并且在構(gòu)建高保真設(shè)計(jì)圖之前，您就可以繪制 UI 草圖。

UI 草圖是理解問題的第一步。







UI 草圖沒有限制。您可以設(shè)計(jì)板上繪制草圖，在筆記本中，甚至可以在白紙中制作出手工制作的 UI 草圖。

主要你要勾勒出你最初的 UI 想法，保持它的快速和簡單。不要介意 UI 草圖中的設(shè)計(jì)或功能細(xì)節(jié)。這是關(guān)于尋找正確的布局，視覺層次的正確平衡。

UI 草圖應(yīng)該只是用來幫助您消除不良想法并集思廣益，以將您提議的產(chǎn)品帶到屏幕上。草圖應(yīng)該可以幫助您在盡可能短的時(shí)間內(nèi)將想法轉(zhuǎn)化為界面。

UI 或 UX 草圖？

有些人更喜歡“用戶體驗(yàn)草圖”這個(gè)詞。但對我們來說，用戶體驗(yàn)草圖更重要。用戶體驗(yàn)專業(yè)人士絕對應(yīng)該整天畫草圖，但他們可以畫出從用戶旅程或用戶角色到利益相關(guān)者設(shè)計(jì)演示的任何內(nèi)容。







馬特的線框。

另一方面，UI 草圖純粹是指坐下來并通過所有可能的方式將您的想法變?yōu)榻缑娆F(xiàn)實(shí)的行為。

在 UI 草圖繪制過程結(jié)束時(shí)，您應(yīng)該知道您已經(jīng)找到了將產(chǎn)品展示到屏幕上的合適的方式。

不就是線框圖嗎？

很容易將 UI 草圖與線框混為一談。兩者都旨在快速，并且都旨在直觀地說明界面理念。但它們不是一回事。

UI 草圖是您通過所有可能的方式以界面形式呈現(xiàn)您的想法。這是一個(gè)讓您自由發(fā)揮所有可能結(jié)果并思考如何讓您的用戶從 A 到 B 的機(jī)會(huì)。







圖片由泰勒戴維斯拍攝。

線框是超出基本草圖的一步。在一個(gè)線框圖中，您開始考慮 UI 元素的放置、元素層次結(jié)構(gòu)和大?。ūM管在這個(gè)階段您還沒有“設(shè)計(jì)”）——所有這些都依賴于您的應(yīng)用程序線框圖工具。

上圖您將能夠輕松地看到 UI 草圖和靜態(tài)線框之間的區(qū)別。UI 草圖應(yīng)該具有真正的手工制作的感覺，而線框是由灰度元素組成的。

UI草圖的優(yōu)點(diǎn)

UI 草圖起初可能感覺像是一個(gè)不必要的步驟。從線框開始還不夠嗎？

不夠。我們已經(jīng)確定兩者有不同的目標(biāo)。UI 草圖絕對是確保您已完成所有可能選項(xiàng)并找到有效、用戶友好的方式來表達(dá)您的界面想法的良好方式。







UI草圖繪制速度很快。沒有什么比用筆和紙更快的了。與在屏幕上繪制線框圖相比，您可以更快地完成創(chuàng)意迭代。

素描也能讓你解放出來。每當(dāng)您使用數(shù)字工具進(jìn)行設(shè)計(jì)時(shí)，該工具的參數(shù)都會(huì)影響您所做的事情。如果你知道你不能在這個(gè)工具中做某事，你甚至不會(huì)考慮嘗試它。那可能是你很好的主意，當(dāng)你在涂鴉時(shí)，這不會(huì)發(fā)生。

擁有一個(gè) UI 草圖將使您的網(wǎng)站線框（或小程序，APP線框）階段更有效。你將在一個(gè)強(qiáng)大的、迭代的基礎(chǔ)上工作，你會(huì)知道把精力集中在哪里。你已經(jīng)排除了干擾；多虧了 UI 草圖，您可以將所有的線框圖時(shí)間和精力集中在改進(jìn)真正重要的東西上。

UI草圖的缺點(diǎn)

勾勒出用戶界面有一些潛在的缺點(diǎn)。主要是，如果你在紙上畫草圖，將這些想法轉(zhuǎn)化為你的線框圖工具可能會(huì)很費(fèi)力。







當(dāng)然，細(xì)節(jié)不會(huì)在草圖中找到。按鈕狀態(tài)、任何類型的交互或視覺裝飾之類的東西都不能放在設(shè)計(jì)草圖上。也確實(shí)，如果你試圖遵循更時(shí)尚的視覺風(fēng)格，比如仿真設(shè)計(jì)或擬物化設(shè)計(jì)，你將無法在草圖上體現(xiàn)美學(xué)美感。

如何進(jìn)行UI草圖過程是什么

制作有效的 UI 草圖的第一步是——專注于想法。盡可能多地提出想法和迭代。如果它們不是“好”的想法無關(guān)緊要，如果你的草圖未完成并且粗略也無關(guān)緊要。

只需找出在項(xiàng)目環(huán)境中處理設(shè)計(jì)的合適的方法。素描是關(guān)于交流，而不是美學(xué)。您正在以最原始的形式傳達(dá)您對問題的解決方案。

嘗試一些“發(fā)散草圖”，以確保您真正解決了設(shè)計(jì)問題的所有可能排列。發(fā)散草圖是指您在同一屏幕上繪制不同的方法。







例如，您可能會(huì)嘗試大量不同的方法來設(shè)計(jì)網(wǎng)站，小程序，APP的主導(dǎo)航，每一種方法都在其他方法旁邊繪制。在線有可打印的模板，以方便不同的 UI 草圖繪制。

接下來嘗試應(yīng)用多個(gè)思路則并選擇多個(gè)可能的選項(xiàng)進(jìn)行處理。這可能會(huì)更耗時(shí)，但它是更好地理解您的設(shè)計(jì)的好方法。

在這個(gè)階段，你可以從不同的草圖中結(jié)合最好的元素。你的解決方案應(yīng)該在線框圖階段之前不斷嘗試。

給忙碌的UI設(shè)計(jì)師的一些提示

我們提供了一些非常有用的 UI 草圖技巧，包括：

• 分層構(gòu)建草圖
• 使用便利貼說明添加“交互”
• 復(fù)印草圖并將其用作模板

初學(xué)的設(shè)計(jì)師準(zhǔn)備繪制UI草圖 吧！

草圖沒什么好怕的，請大膽的嘗試。即使您認(rèn)為自己不會(huì)畫畫、時(shí)間緊迫或完全習(xí)慣了線框圖勾勒出用戶界面的想法將改善您的產(chǎn)品設(shè)計(jì)過程。