什么是線框設(shè)計(jì)及其設(shè)計(jì)方法？

時間：2024-04-18 12:30:02 | 來源：建站知識

時間：2024-04-18 12:30:02 來源：建站知識

每個結(jié)構(gòu)，每個建筑物，每個設(shè)計(jì)都從線框開始。這是決定整個項(xiàng)目成功與否的設(shè)計(jì)工作流程的重要組成部分。

無論您使用的是數(shù)字用戶界面設(shè)計(jì)還是橫幅設(shè)計(jì)，線框都應(yīng)是設(shè)計(jì)過程的一部分。在本指南中，我們將幫助您了解什么是線框以及它們?yōu)楹沃匾?br>
我們?yōu)榫W(wǎng)站設(shè)計(jì)的初學(xué)者和高級設(shè)計(jì)師制作了本指南，以傳達(dá)線框圖的重要性。您將學(xué)到所有內(nèi)容，從如何設(shè)計(jì)線框到最好的線框工具，避免常見錯誤的技巧等。

讓我們開始吧。

什么是線框？ 假設(shè)您正在蓋房子。您是否沒有任何準(zhǔn)備就直接建造建筑物？沒有！首先，請轉(zhuǎn)到繪圖板并設(shè)計(jì)房屋平面圖。通過創(chuàng)建定義建筑物構(gòu)造的布局。

線框也可以這樣說。它可以幫助您保持接地，并根據(jù)正確布局的計(jì)劃來設(shè)計(jì)布局和設(shè)計(jì)。

有許多不同類型的線框。在用戶界面設(shè)計(jì)中，線框用于網(wǎng)站，Web應(yīng)用程序，移動應(yīng)用程序等的布局。線框甚至用于印刷設(shè)計(jì)中，例如海報和信息圖表，以幫助改善用戶體驗(yàn)。

為什么線框很重要 當(dāng)涉及到用戶界面設(shè)計(jì)時，大多數(shù)設(shè)計(jì)師常常忽略了線框圖的重要性。他們直接進(jìn)入構(gòu)建過程，因?yàn)樗麄円呀?jīng)熟悉設(shè)計(jì)的常規(guī)結(jié)構(gòu)。

當(dāng)您看到足夠的網(wǎng)站設(shè)計(jì)和應(yīng)用程序來了解標(biāo)題，菜單和按鈕的位置時，您可以直接進(jìn)行設(shè)計(jì)而無需線框。這就是災(zāi)難性的網(wǎng)站和應(yīng)用程序的誕生，這些網(wǎng)站和應(yīng)用程序通過破壞用戶體驗(yàn)而導(dǎo)致極低的用戶交互。

線框通過允許您事先了解設(shè)計(jì)的輪廓或框架來幫助防止這種情況。

除了精心設(shè)計(jì)用戶友好和有效的設(shè)計(jì)外，線框設(shè)計(jì)還有其他好處。

• 從清晰的布局開始：線框可以幫助您在進(jìn)入原型階段時就牢記清晰的布局。這可以幫助您保持專注并創(chuàng)建更有效和結(jié)構(gòu)化的設(shè)計(jì)。
• 獲得早期反饋：使用線框，您可以從客戶那里獲得早期反饋。這樣可以避免以后再進(jìn)行許多設(shè)計(jì)修改。
• 更好的結(jié)構(gòu)：您可以使用線框來規(guī)劃設(shè)計(jì)的基本結(jié)構(gòu)，以有效地與最終用戶溝通。
• 更好的協(xié)作：當(dāng)與團(tuán)隊(duì)協(xié)作時，線框也可以為您提供幫助。特別是從開發(fā)人員那里獲得反饋時。

線框的主要元素 線框中應(yīng)包含什么？它通常取決于您正在處理的設(shè)計(jì)類型。沒有設(shè)計(jì)線框的規(guī)則或標(biāo)準(zhǔn)。但是，可以遵循一些概念來制作更好的線框。

遵循KISS概念 保持愚蠢簡單，這是一個流行的概念，您可以在許多不同類型的項(xiàng)目中使用，尤其是在設(shè)計(jì)項(xiàng)目中。

線框的主要目的是設(shè)計(jì)用戶界面的結(jié)構(gòu)。無需創(chuàng)建深入的設(shè)計(jì)。只需使用最少的元素就可以使其簡單，干凈。

基本結(jié)構(gòu) 大多數(shù)線框具有可用于構(gòu)建的基本結(jié)構(gòu)。例如，網(wǎng)站線框應(yīng)包含標(biāo)題部分，徽標(biāo)，菜單等。

考慮到此基本結(jié)構(gòu)，開始線框很重要。它為線框中其余內(nèi)容創(chuàng)建了主輪廓。

身體內(nèi)容 線框的主體是內(nèi)容的特色。對于網(wǎng)站線框，您可以在其中包含功能，產(chǎn)品組合，定價表和其他重要部分。

但是，在制作線框時，您不必?fù)?dān)心細(xì)節(jié)。您無需添加文本描述，為每個按鈕或圖標(biāo)命名，甚至不必?fù)?dān)心標(biāo)題。主要目標(biāo)是為所有內(nèi)容創(chuàng)建占位符并將其映射出來。

低保真與高保真 還有一種線框稱為高保真線框。與內(nèi)容最少的低保真線框不同，這些線框具有更詳細(xì)的結(jié)構(gòu)。您將在指南的示例部分中看到不同之處。

無論哪種方式，您都可以選擇要設(shè)計(jì)的線框類型。通常取決于您正在從事的項(xiàng)目規(guī)模以及時間表中的時間。

設(shè)計(jì)線框時應(yīng)避免的事情 在設(shè)計(jì)線框時，還應(yīng)始終避免一些常見錯誤。

不包含圖片 不要將線框與模型或原型混淆。線框都是關(guān)于規(guī)劃和概述結(jié)構(gòu)的。無需在線框中包含圖像或圖形。

實(shí)際上，在線框中添加圖形只會干擾首要的制作線框的主要目標(biāo)-清晰地了解設(shè)計(jì)輪廓。

避免使用顏色 一些設(shè)計(jì)師更喜歡在線框中使用不同的顏色來突出設(shè)計(jì)的重要部分。但這是不必要的。線框設(shè)計(jì)堅(jiān)持使用灰色和黑色。

盡量減少細(xì)節(jié) 過多地關(guān)注于完善線框中較小的細(xì)節(jié)只是浪費(fèi)時間。即使在設(shè)計(jì)高保真線框時，也應(yīng)嘗試限制細(xì)節(jié)，以使整體設(shè)計(jì)的外觀保持最小。

使用模板或工具 設(shè)計(jì)師在創(chuàng)建線框時犯下的最大錯誤之一就是試圖用筆和紙來繪制它，或者使用Photoshop之類的軟件從頭開始繪制它。

您可以輕松地使用許多出色的工具和模板來設(shè)計(jì)線框。它們包括用于規(guī)劃整個結(jié)構(gòu)的預(yù)制組件。您可以輕松地使用它們來設(shè)計(jì)線框。

線框圖的最佳工具 有很多很棒的工具可用于制作線框。以下是最佳工具的快速概述。

UXPin

UXPin是一種非常靈活的工具，可用于設(shè)計(jì)線框。它還使您可以輕松地從線框升級到模型和功能原型。起價為每月19美元。

Figma

Figma是一個免費(fèi)的基于云的編輯器，可用于設(shè)計(jì)從線框到模型等的所有內(nèi)容。但是，將此工具與線框模板套件一起使用時，效果最佳。

MockFlow

MockFlow非常適合自由職業(yè)者。它具有一個非常易于使用的界面，您可以在其中輕松設(shè)計(jì)線框和模型。該工具還提供免費(fèi)計(jì)劃。

如何開始 創(chuàng)建線框是該過程中最容易的部分。

如果您下載了線框圖模板套件，則就像在您選擇的圖形編輯應(yīng)用程序中打開模板文件一樣簡單。像Photoshop或Sketch。然后，您可以開始自定義布局。



例如，在Figma中進(jìn)行線框圖非常簡單。它提供了您需要入門的預(yù)制布局和組件?；蛘?，您可以加載模板套件。您要做的就是將這些項(xiàng)目拖放到畫布上，然后開始重新排列它們以設(shè)計(jì)線框。就這么簡單！

乍一看似乎不知所措。但是，只要稍加練習(xí)，您就可以輕松制作線框。只要記住遵循本指南中概述的提示和建議即可。

后續(xù)步驟 線框圖只是設(shè)計(jì)過程中眾多步驟之一?，F(xiàn)在，您可以使用線框從客戶獲取反饋。返回到繪圖板以改善線框。得到客戶的認(rèn)可。并在該過程的下一個階段進(jìn)行工作-設(shè)計(jì)模型或原型。最后，進(jìn)行設(shè)計(jì)。

不用說，將線框圖集成到您的工作流程中可以以一種令人難以置信的方式改善您的設(shè)計(jì)和工作。從長遠(yuǎn)來看，將額外的時間花在線框圖制作階段將為您帶來豐厚的回報。