線框圖在網(wǎng)頁(yè)設(shè)計(jì)中的重要性

　　線框可以被視為網(wǎng)站建設(shè)設(shè)計(jì)的藍(lán)圖。

　　網(wǎng)站線框圖的主要目標(biāo)是參與網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)過(guò)程的每個(gè)人都了解我們網(wǎng)站雛形。

　　我們應(yīng)該清楚，我們要做什么，做成什么樣?

　　如何確定導(dǎo)航欄中應(yīng)包含多少組件?

　　如何確定網(wǎng)頁(yè)是使用4列網(wǎng)格還是3列網(wǎng)格?

　　圖像應(yīng)放在網(wǎng)頁(yè)上的哪個(gè)位置?如何放置視頻?

　　在開(kāi)始設(shè)計(jì)之前，所有這些問(wèn)題都需要回答。

　　為什么需要一個(gè)線框?

　　線框基本上是網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)的基礎(chǔ)。

　　由于有多個(gè)人參與創(chuàng)建網(wǎng)站，因此線框可確保在網(wǎng)站上工作的每個(gè)人都在同一頁(yè)面上。

　　增長(zhǎng)超人會(huì)從客戶協(xié)調(diào)員、項(xiàng)目經(jīng)理、設(shè)計(jì)師、開(kāi)發(fā)人員以及在網(wǎng)頁(yè)設(shè)計(jì)的線框圖和原型設(shè)計(jì)階段參與項(xiàng)目的所有人員進(jìn)行頭腦風(fēng)暴。

　　在開(kāi)發(fā)階段任何微小變化的時(shí)間和成本遠(yuǎn)遠(yuǎn)大于這些頭腦風(fēng)暴會(huì)議所需的時(shí)間和成本。

　　無(wú)論為一家知名客戶還是大公司做網(wǎng)站建設(shè)，每個(gè)網(wǎng)站建設(shè)人員都遵循低保真原型的原則進(jìn)行設(shè)計(jì)。

　　當(dāng)網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者在他們的職業(yè)生涯中轉(zhuǎn)向更大的公司時(shí)，他們經(jīng)常面對(duì)線框圖的概念而且毫無(wú)頭緒。

　　很多時(shí)候，我們的項(xiàng)目經(jīng)理和開(kāi)發(fā)人員坐在一起進(jìn)行頭腦風(fēng)暴并想出一個(gè)好的線框。

　　那么，增長(zhǎng)超人向你介紹網(wǎng)頁(yè)設(shè)計(jì)中的線框圖的作用。

　　如何創(chuàng)建一個(gè)網(wǎng)站線框?

　　網(wǎng)站線框圖僅僅是我們希望如何在網(wǎng)站上展現(xiàn)各種模塊的想法。

　　如果是一個(gè)簡(jiǎn)單的設(shè)計(jì)布局，只是黑色和白色的線框，這就是一個(gè)快速提示識(shí)別線框。

　　在網(wǎng)站線框圖中，我們并不關(guān)心我們的按鈕看起來(lái)如何，我們將選擇什么顏色，我們使用什么圖像等等，這些都與數(shù)據(jù)有關(guān)，我們希望用戶在第一頁(yè)看到什么樣的形式。

　　參與決策的每個(gè)人經(jīng)常會(huì)有不同的意見(jiàn)，綜合所有的意見(jiàn)就可以得到最好的結(jié)果。

　　在線框圖中，我們不使用任何圖像、視頻或顏色，而是模擬區(qū)域。

　　用于表示圖像的標(biāo)準(zhǔn)線框元素。

　　為了指示網(wǎng)站中圖像的位置，我們使用只有十字標(biāo)記的圖像，如上圖所示。

　　什么應(yīng)該是圖像和數(shù)據(jù)的內(nèi)容沒(méi)有在線框中最終確定。

　　線框圖有兩個(gè)階段，低保真線框圖和高保真線框圖。

　　保真度意味著線框表示設(shè)計(jì)的最終版本的準(zhǔn)確程度。

　　低保真度線框圖是線框圖的初始階段，并不代表最終設(shè)計(jì)，而高保真度線框圖則可以更準(zhǔn)確地了解最終設(shè)計(jì)的方式。

　　低保真線框

　　低保真線框圖的目標(biāo)是基于客戶的愿景奠定網(wǎng)站的基本結(jié)構(gòu)。

　　在低保真模型中，我們會(huì)從拿起筆和紙開(kāi)始繪圖。

　　在設(shè)計(jì)階段更改任何內(nèi)容都要容易得多。

　　如果你不喜歡設(shè)計(jì)的任何方面，你可以扔掉紙張并重新開(kāi)始繪圖。

　　這些低保真框架可能聽(tīng)起來(lái)很耗時(shí)，但它可以節(jié)省大量的時(shí)間和金錢。

　　在網(wǎng)站開(kāi)發(fā)階段通常需要很長(zhǎng)時(shí)間才能確認(rèn)細(xì)微的細(xì)節(jié)。

　　當(dāng)所有參與者都同意低保真線框時(shí)，這是在紙上完成的，我們繼續(xù)進(jìn)行下一階段的線框圖。

　　使用筆、紙和銳利的線框圖的初始階段稱為低保真模型。

　　高保真線框

　　在詳細(xì)討論后，參與該項(xiàng)目的每個(gè)人都同意低保真框架后，就是完成高保真線框。

　　高保真線框通過(guò)提供有關(guān)真實(shí)UI元素在最終設(shè)計(jì)中應(yīng)如何顯示的信息，為設(shè)計(jì)人員提供了更多細(xì)節(jié)。

　　對(duì)客戶和開(kāi)發(fā)人員來(lái)說(shuō)，理解起來(lái)要容易得多。

　　高保真線框可以使用LOGO和真實(shí)內(nèi)容，按鈕樣式等，以便設(shè)計(jì)者完全理解所需的結(jié)果。

　　網(wǎng)站線框圖的這一部分是使用線框工具完成的。

　　有定制軟件具有許多高級(jí)功能，僅用于高保真線框圖。

　　也可以使用標(biāo)準(zhǔn)設(shè)計(jì)軟件，如Photoshop。

　　與低保真度線框相比，高保真度線框需要相當(dāng)多的時(shí)間，并且將增加網(wǎng)頁(yè)設(shè)計(jì)服務(wù)的成本。

　　網(wǎng)站線框與原型之間的區(qū)別

　　網(wǎng)站的網(wǎng)站線框和原型完全不同，有不同的用途。

　　網(wǎng)站原型是一個(gè)簡(jiǎn)單的網(wǎng)站工作模型，用于在最終輸出之前測(cè)試網(wǎng)站的效率。

　　原型將包含網(wǎng)站的所有互動(dòng)元素，盡可能地與最終產(chǎn)品相似。

　　原型幫助UI / UX設(shè)計(jì)人員檢查用戶交互并進(jìn)行更改以提高網(wǎng)站的可用性。

　　在為中小企業(yè)設(shè)計(jì)網(wǎng)站時(shí)，是否需要線框?

　　像優(yōu)步，亞馬遜和谷歌這樣的公司非常完美地開(kāi)發(fā)他們的網(wǎng)站和應(yīng)用程序，他們可以在線框圖和原型設(shè)計(jì)上投入更多資金。

　　但是，如果為中小微企業(yè)制作網(wǎng)站，需求可能不是很明確，那么遵循這個(gè)程序?qū)⒆兊帽任覀兿胂蟮囊獜?fù)雜得多。

　　在網(wǎng)站設(shè)計(jì)之前進(jìn)行線框圖和原型設(shè)計(jì)會(huì)增加網(wǎng)頁(yè)設(shè)計(jì)服務(wù)的成本。

　　有時(shí)，小型網(wǎng)頁(yè)設(shè)計(jì)公司的開(kāi)發(fā)人員可能會(huì)跳過(guò)網(wǎng)頁(yè)設(shè)計(jì)的這一方面。

　　然而，這不是一個(gè)好的做法，因?yàn)檫@樣會(huì)造成后期修改問(wèn)題，大大地浪費(fèi)客戶時(shí)間以及是我們自己的時(shí)間，這都是成本，甚至是不能做出客戶滿意的網(wǎng)站。

　　線框圖在網(wǎng)頁(yè)設(shè)計(jì)中的重要性是不容忽視的，這樣可以幫助中小企業(yè)節(jié)省成本和加快項(xiàng)目進(jìn)度。

　　增長(zhǎng)超人，用數(shù)據(jù)驅(qū)動(dòng)營(yíng)銷增長(zhǎng)。