即使是繪圖能力有限的人，如果他們學(xué)習(xí)了一些用于表示各種設(shè)計(jì)元素的常用約定，也可以學(xué)習(xí)繪制線框圖。
線框可視化用戶路徑或流程，以及頁面布局、信息層次結(jié)構(gòu)，甚至交互。根據(jù)它們的目的，它們的保真度會有所不同——從快速草圖到最終設(shè)計(jì)的詳細(xì)表示。
分步草圖指南
有一些常見的組件在線框中一次又一次地使用。如果您知道如何繪制這些基本部分的草圖，您就可以專注于使您的想法正確，而不是如何繪制。這是一個(gè)分步指南，可讓您快速繪制草圖。
第 1 步：確定您的瀏覽器窗口或設(shè)備縱橫比。
這個(gè)比例不必很精確，特別是如果您是手繪草圖。對于更高保真度的線框，以下是一些起始尺寸：
對于 web 線框，一些常見的斷點(diǎn)大小是 1024x768 像素和 1920x1080 像素。 ?
對于移動設(shè)備，尺寸范圍將基于特定設(shè)備（例如平板電腦、各種尺寸的手機(jī)）。首先找出您應(yīng)該針對哪種設(shè)備進(jìn)行優(yōu)化。
第二步：繪制導(dǎo)航和搜索。
導(dǎo)航和搜索為線框添加上下文。如果您正在遵循現(xiàn)有的設(shè)計(jì)或模板，請繪制已經(jīng)存在的框架 - 例如，如果您知道所有頁面都有導(dǎo)航欄，則在頁面頂部放置一個(gè)導(dǎo)航欄。
如果您是從頭開始，請考慮哪種類型的導(dǎo)航可能有效。（請記住，您不需要第一次就做對。）通過在頁面上的相應(yīng)位置繪制一個(gè)矩形來指示導(dǎo)航欄（無論是水平還是垂直）。如果您使用的是隱藏導(dǎo)航，請根據(jù)您的關(guān)注點(diǎn)將其展開或不顯示。如果您想顯示您在特定導(dǎo)航鏈接上，請?jiān)谠撴溄又車酉聞澗€或加框。
搜索功能可以通過搜索圖標(biāo)和關(guān)聯(lián)的搜索框來表示，如下例所示。如果需要，您可以在搜索框下方的矩形中顯示搜索建議。
第 3 步：識別并繪制設(shè)計(jì)中最大的元素。
接下來，專注于繪制您想法的主要部分——例如，標(biāo)題、大橫幅和圖像，甚至是正文的大部分內(nèi)容。以下是一些常見的線框圖約定：
標(biāo)題使用較粗的線條表示。
正文使用細(xì)線勾畫。
圖像表示為一個(gè)矩形，其中一個(gè) x 穿過它。
第 4 步：填寫其余詳細(xì)信息。?
通常，這些細(xì)節(jié)是與選擇相關(guān)的小組件，如按鈕、下拉菜單、復(fù)選框或比例按鈕，但也可以包括文本字段或正文副本的任何剩余單行。如果您要對作為流程一部分的多個(gè)屏幕進(jìn)行線框化，您可能還會有進(jìn)度條和對話框。不要忘記添加號召性用語或顯示選擇，因?yàn)檫@些細(xì)節(jié)有助于其他人了解您的設(shè)計(jì)理念。
下拉菜單由一個(gè)矩形和一個(gè)插入符號組成。
復(fù)選框和單選按鈕分別有一個(gè)正方形或圓形，還有一條線來表示文本。要顯示選擇，復(fù)選框應(yīng)該有一個(gè)檢查和單選按鈕將被填寫。
按鈕可以用多種不同的方式表示。通常，最好使用帶有線條或箭頭的基本矩形來表示它將用戶帶到其他地方。但是，對于號召性用語，還應(yīng)包括一個(gè)文本標(biāo)簽，以便向查看您的線框的其他人提供關(guān)鍵細(xì)節(jié)。
橫幅有一行或兩行文本，帶有可選的相關(guān)按鈕或取消圖標(biāo)。
對話框包含一個(gè)標(biāo)題、1-2 行文本、1-2 個(gè)按鈕和一個(gè)取消圖標(biāo)。
進(jìn)度指示器是部分填充的圓角矩形，以說明剩余的等待時(shí)間。
圖標(biāo)可以以與圖像相同的方式表示（帶有 X）或粗線藝術(shù)（就像我們在這里展示的搜索圖標(biāo)）。盡管我們建議在最終 UI 中為圖標(biāo)使用文本標(biāo)簽，但可以跳過線框中圖標(biāo)占位符的標(biāo)簽。
示例：繪制產(chǎn)品詳細(xì)信息頁面
我們在下面說明了這些步驟如何為產(chǎn)品詳細(xì)信息頁面生成一個(gè)簡單的線框。
第 1 步：由于我們的設(shè)計(jì)是為桌面網(wǎng)頁設(shè)計(jì)的，因此我們從一個(gè)大小與普通瀏覽器窗口對應(yīng)的空白畫布開始。?
第 2 步：我們添加一個(gè)頂部導(dǎo)航欄并搜索到我們的線框。
第 3 步：繪制設(shè)計(jì)中最大的元素。由于線框代表產(chǎn)品頁面，因此在此階段我們專注于顯示與產(chǎn)品相關(guān)的信息，例如名稱、描述和圖像。
第 4 步：添加其他詳細(xì)信息，例如選擇選項(xiàng)的下拉框和將產(chǎn)品添加到購物車的按鈕。
結(jié)論
任何人，無論他們的繪畫能力如何，都可以繪制線框圖來探索設(shè)計(jì)問題的可能解決方案。循序漸進(jìn)，使用通用組件來創(chuàng)建快速、凌亂但有用的線框圖。
