產(chǎn)品的好壞取決于其結(jié)構(gòu)。您的線框是基礎(chǔ)。
良好的結(jié)構(gòu)是一個(gè)基本的網(wǎng)頁(yè)設(shè)計(jì)原則。當(dāng)建筑師規(guī)劃新房子時(shí)，他們首先要?jiǎng)?chuàng)建一個(gè)傳達(dá)房屋結(jié)構(gòu)的藍(lán)圖。產(chǎn)品設(shè)計(jì)人員需要一個(gè)類似的藍(lán)圖 — 它稱為線框。
究竟什么是線框圖？
線框是您的想法的準(zhǔn)系統(tǒng)可視化。線框的首要目標(biāo)是描述用戶流的結(jié)構(gòu)和功能。功能是用戶與之交互的任何內(nèi)容，例如按鈕、菜單和下拉菜單。
在不涉及視覺(jué)細(xì)節(jié)或 UI 設(shè)計(jì)的情況下，線框演示了產(chǎn)品的總體布局，并說(shuō)明了每個(gè)頁(yè)面上需要包含哪些元素。有許多可用的線框工具供設(shè)計(jì)人員選擇。
為什么線框圖如此重要？
線框在映射接口的基本部分時(shí)是必需的。它可以幫助所有相關(guān)人員在流程開(kāi)始時(shí)全面了解產(chǎn)品。沒(méi)有這個(gè)基礎(chǔ)，幾乎不可能繼續(xù)進(jìn)行產(chǎn)品的編碼或設(shè)計(jì)。它還提供了一種簡(jiǎn)單且低成本的方法來(lái)比較一些設(shè)計(jì)概念并盡早做出決策。
由于線框非常直觀，因此它們比看似抽象的書面想法更容易理解。向開(kāi)發(fā)人員或您的客戶展示線框?qū)椭麄兦宄乩斫饽囊鈭D，使您能夠接收相關(guān)反饋并將其實(shí)施到您的設(shè)計(jì)中。
線框和模型有什么區(qū)別？
這一切都與細(xì)節(jié)水平有關(guān)。 您從線框開(kāi)始，線框更多地涉及結(jié)構(gòu)和布局，然后發(fā)展到模型，其中包括更接近最終產(chǎn)品的圖像和內(nèi)容。
創(chuàng)建實(shí)際產(chǎn)品之前的最后一步是通過(guò)使其可點(diǎn)擊來(lái)將您的模型變成原型。 如果您想知道原型與模型相比如何，這歸結(jié)為交互性水平。線框是靜態(tài)設(shè)計(jì)工件，而原型是交互式的。原型的復(fù)雜程度各不相同，從精心設(shè)計(jì)的網(wǎng)站模型到使用真正行為和感覺(jué)與實(shí)際產(chǎn)品相同的代碼創(chuàng)建的 UX 原型。 線框通常是原型的第一步。
不同類型的線框
像任何好朋友一樣，線框在整個(gè)過(guò)程中都陪伴在您身邊。隨著您對(duì)產(chǎn)品有了更好的了解，您可以逐漸實(shí)現(xiàn)更高級(jí)的線框形式，當(dāng)您從一個(gè)階段進(jìn)入下一個(gè)階段時(shí)，從各個(gè)角度構(gòu)建它們。以下是對(duì)不同類型線框的簡(jiǎn)要說(shuō)明。另請(qǐng)查看這些線框示例以了解更多詳細(xì)信息。
低保真線框與高保真線框
線框的細(xì)節(jié)級(jí)別（也稱為保真度）可能會(huì)有所不同。主要有三種類型：
低保真線框。 低保真線框是頁(yè)面或屏幕的基本視覺(jué)表示形式，使用簡(jiǎn)單的形狀（如線條和框）創(chuàng)建。由于它們?cè)谝曈X(jué)上簡(jiǎn)單，這種類型的線框以其創(chuàng)建速度而聞名。它們可以在頭腦風(fēng)暴會(huì)議期間創(chuàng)建，并有助于更有效地交流想法。但是，低保真線框往往更抽象，可能需要解釋。
中等保真線框。 這些線框比低保真線框要詳細(xì)一些。您不會(huì)找到網(wǎng)站動(dòng)畫、視差滾動(dòng)、照片、花哨的字體或圖形，但您會(huì)看到更逼真的間距、按鈕等。
高保真線框。 高保真線框的細(xì)節(jié)級(jí)別更高 — 它們可能包括真實(shí)副本并提供更準(zhǔn)確的布局表示（例如，可以使用不同的字體大小來(lái)分隔標(biāo)題和正文內(nèi)容）。由于創(chuàng)建高保真線框需要更長(zhǎng)的時(shí)間，因此它們通常保留用于產(chǎn)品設(shè)計(jì)過(guò)程的后期階段（例如，當(dāng)您有兩個(gè)版本的頁(yè)面布局并希望并排比較它們時(shí)）。
如何有效地生成線框
線框的生產(chǎn)可能會(huì)有所不同。有手繪線框，它們是在紙或白板上的草圖，還有數(shù)字線框，它們是計(jì)算機(jī)繪制的或在線框工具上創(chuàng)建的。
有幾種方法可以開(kāi)始使用線框：
直接在畫布上打開(kāi)并開(kāi)始編輯我們的線框模板之一
如果您是 Figma 粉絲，請(qǐng)使用我們的 Figma 插件訪問(wèn)完全可定制的模板，然后無(wú)縫導(dǎo)入到您的 Studio 網(wǎng)站
使用我們 AI 驅(qū)動(dòng)的可視化站點(diǎn)地圖和線框生成器生成為您的項(xiàng)目定制的線框
最佳實(shí)踐使用線框
01. 保持線框簡(jiǎn)單
速度和簡(jiǎn)單性是線框的兩個(gè)主要屬性。您可以應(yīng)用一些視覺(jué)約定來(lái)輕松地將您的想法傳達(dá)給其他設(shè)計(jì)人員。
輸入字段：輸入字段可以表示為矩形。
按鈕：按鈕可以表示為中心有文本的矩形。
圖像：圖像可以表示為帶有“X”的矩形框。
文本：根據(jù)保真度級(jí)別，可以使用占位符文本（如 Lorem Ipsum）或真實(shí)文本。
02. 將造型保持在最低限度
線框的目標(biāo)是確定界面的預(yù)期內(nèi)容和功能，而不是描述視覺(jué)設(shè)計(jì)。這就是為什么線框通常以黑白或灰度創(chuàng)建的原因。缺少顏色、圖像、排版或任何其他視覺(jué)屬性有助于最大限度地減少干擾并將討論集中在布局和結(jié)構(gòu)上。
這種方法的另一個(gè)好處是設(shè)計(jì)看起來(lái)并未完成。當(dāng)其他人知道視覺(jué)資產(chǎn)的創(chuàng)建時(shí)間不長(zhǎng)并且可以快速修改時(shí)，他們可以更輕松地共享設(shè)計(jì)反饋。
請(qǐng)記住，雖然設(shè)計(jì)應(yīng)該是最小的，但這并不意味著禁止使用顏色。您可以使用對(duì)比色將用戶的注意力引導(dǎo)至線框的特定元素。例如，使用藍(lán)色來(lái)傳達(dá)行動(dòng)號(hào)召按鈕等動(dòng)元素。
03. 為線框添加注釋
由于線框是二維和靜態(tài)的，因此其他人可能很難理解某物應(yīng)該如何運(yùn)作。例如，如果您的界面中有復(fù)雜的交互功能，例如拖放對(duì)象，則其他人可能需要發(fā)揮他們的想象力來(lái)了解其工作原理。在 UI 控件旁邊添加一個(gè)簡(jiǎn)短的注釋，以解釋預(yù)期行為。
04. 確保利益相關(guān)者了解在線框中尋找什么
雖然設(shè)計(jì)人員和開(kāi)發(fā)人員了解什么是線框以及為什么它們看起來(lái)是某種方式，但客戶可能在掌握這個(gè)概念時(shí)遇到問(wèn)題。企業(yè)主可能很容易假設(shè)最終的視覺(jué)設(shè)計(jì)看起來(lái)與他們面前看到的線框相同，并提出諸如“為什么這個(gè)設(shè)計(jì)如此黑白分明”之類的問(wèn)題，或者更糟糕的是，完全拒絕解決方案。確保只與精通產(chǎn)品設(shè)計(jì)領(lǐng)域的利益相關(guān)者共享線框，或清楚地傳達(dá)此步驟的本質(zhì)。在某些情況下，創(chuàng)建高保真模型更安全。
05. 使用高保真線框作為文檔
許多團(tuán)隊(duì)將線框視為被原型替換的臨時(shí)工件。這并不總是正確的。高保真線框可用于記錄復(fù)雜的概念，例如導(dǎo)航系統(tǒng)或特定用戶流（如用戶經(jīng)過(guò)的一系列屏幕）。
06. 在低保真階段為同一屏幕創(chuàng)建幾次迭代
此時(shí)，您仍然應(yīng)該保持開(kāi)放的選擇。隨著您繼續(xù)前進(jìn)，您將對(duì)產(chǎn)品有更好的了解，您的選擇也會(huì)更加明智。確定流程后，您可以了解更詳細(xì)的信息。
07. 知道何時(shí)描述而不是設(shè)計(jì)
根據(jù)間距、大小和布局來(lái)描述層次結(jié)構(gòu)，同時(shí)注意不要在設(shè)計(jì) UI 時(shí)進(jìn)行設(shè)計(jì)。確定要傳遞的最重要的信息，并考慮用戶將在該特定頁(yè)面上尋找什么。他們是否打算訂閱時(shí)事通訊、為照片添加濾鏡或進(jìn)行購(gòu)買？不管它是什么，只需陳述它，而不是設(shè)計(jì)它。
08. 不要跳過(guò)線框階段！
除了讓您有機(jī)會(huì)專注于開(kāi)發(fā)全面的積極用戶體驗(yàn)之外，線框還可以節(jié)省時(shí)間，因?yàn)樗鼈兛梢詭椭诹鞒痰脑缙谧R(shí)別和處理任何可用性問(wèn)題。當(dāng)然，就像生活中的一切一樣，規(guī)則也有例外。您可能會(huì)遇到不需要?jiǎng)?chuàng)建整個(gè)線框的情況，例如在調(diào)整預(yù)先存在的功能或向已經(jīng)具有定義語(yǔ)言的產(chǎn)品添加簡(jiǎn)單屏幕時(shí)。但總的來(lái)說(shuō)，將線框視為為您的客戶創(chuàng)造令人驚嘆的作品的早期步驟。
了解有關(guān) Thinkart 網(wǎng)站設(shè)計(jì)的更多信息，并立即開(kāi)始構(gòu)建您的下一個(gè)網(wǎng)站。