對(duì)于大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，任何一個(gè)網(wǎng)頁(yè)項(xiàng)目的第一階段都是線(xiàn)框圖。它允許設(shè)計(jì)師精確地繪制出網(wǎng)頁(yè)的結(jié)構(gòu)如何工作，以及導(dǎo)航、表單和內(nèi)容部分等重要元素的總體布局方向。

每個(gè)設(shè)計(jì)師都有自己獨(dú)特的方法來(lái)產(chǎn)生這些線(xiàn)框圖。許多人在紙上工作，而另一些人則喜歡直接用像Balsamiq、Figma或Sketch這樣的工具在電腦上創(chuàng)建它們。不管怎樣，結(jié)果往往是令人著迷的，而且往往在視覺(jué)上令人印象深刻，盡管它們被認(rèn)為是粗糙和簡(jiǎn)單的。

線(xiàn)框圖的布蘭登Wimberly

布蘭登使用了一個(gè)打印在網(wǎng)點(diǎn)紙上的網(wǎng)頁(yè)瀏覽器模板。在那里，他使用精心構(gòu)建的線(xiàn)條來(lái)構(gòu)建非常統(tǒng)一和準(zhǔn)確的線(xiàn)框圖，以探索網(wǎng)頁(yè)如何從桌面擴(kuò)展到移動(dòng)設(shè)備。

由Vando Sanchez設(shè)計(jì)的領(lǐng)先邊緣高保真線(xiàn)框架

Vando在電腦上創(chuàng)建了領(lǐng)先的高保真度音響的線(xiàn)框圖，主要使用虛設(shè)的文本，只有主要的標(biāo)題和口號(hào)都是準(zhǔn)確的。簡(jiǎn)單的2D模型被用來(lái)代替實(shí)際的設(shè)備模型，背景和視覺(jué)元素在這個(gè)階段被填充成塊顏色。

Janna Hagan在Shopify探索的線(xiàn)框圖

Janna Hagan為Shopify設(shè)計(jì)的漂亮的線(xiàn)框是更高的忠誠(chéng)度，大部分的布局設(shè)計(jì)最終完成，甚至一些視覺(jué)效果開(kāi)始被介紹。

線(xiàn)框圖的安德烈·皮卡德

安德烈·皮卡德(Andre Picard)在設(shè)計(jì)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目的初始線(xiàn)框圖時(shí)，看著白板。這允許快速和容易的編輯，以及在辦公室周?chē)p松的反饋和協(xié)作。

由Melody Rose的Wireframe x78

該網(wǎng)頁(yè)的78個(gè)線(xiàn)框圖通過(guò)一致的使用形狀來(lái)定義不同的內(nèi)容類(lèi)型和元素，如用戶(hù)頭像。調(diào)色板保持在2到3個(gè)簡(jiǎn)單的灰色調(diào)。

蒂姆·奈特(Tim Knight)草擬了一個(gè)新項(xiàng)目

蒂姆·奈特(Tim Knight)的線(xiàn)框圖傾向于更簡(jiǎn)單、更高速的線(xiàn)框圖——當(dāng)接近一個(gè)項(xiàng)目的最重要階段，或者在會(huì)議或電話(huà)會(huì)議上為客戶(hù)繪制想法時(shí)，這非常有用。

變形學(xué)網(wǎng)頁(yè):Lauren League的中富達(dá)線(xiàn)

勞倫在變形學(xué)網(wǎng)頁(yè)上的中值線(xiàn)框圖在解決數(shù)據(jù)可視化問(wèn)題方面相當(dāng)復(fù)雜。他們使用了一個(gè)結(jié)構(gòu)良好的模板，帶有填充的內(nèi)容塊，并在圖像占位符上交叉矩形。

回到我的身體儀表盤(pán)日記線(xiàn)，由Alyoop

通過(guò)Alyoop的方式，我的身體線(xiàn)的線(xiàn)框圖更接近于簡(jiǎn)單的數(shù)字模型。他們使用一個(gè)簡(jiǎn)單的灰色調(diào)色板和圖標(biāo)占位符為用戶(hù)頭像和內(nèi)容圖像。文本占位符用于諸如徽標(biāo)和餅圖等元素。

這是戴恩·衛(wèi)斯洛科(Dane Wesolko)的營(yíng)銷(xiāo)網(wǎng)頁(yè)

Spreedly的營(yíng)銷(xiāo)網(wǎng)頁(yè)在素描應(yīng)用中使用了一個(gè)高保真數(shù)字線(xiàn)框，它定義了大部分內(nèi)容的布局和顏色，只留下視覺(jué)和圖像的整合。

報(bào)紙網(wǎng)頁(yè)Wireframe by Ziya Fenn

Ziya的報(bào)紙網(wǎng)頁(yè)中忠實(shí)的線(xiàn)框非常精致，是我遇到的最具視覺(jué)吸引力的線(xiàn)框之一。大部分的排版元素和方向已經(jīng)被定義，布局在其結(jié)構(gòu)和鑲嵌塊表單上給人印象深刻。