互聯(lián)網(wǎng)是一種獨(dú)特的交流工具——它和電話、電視、書籍甚至市場(chǎng)宣傳冊(cè)都不一樣。人們與網(wǎng)站的交互方式有很多種：他們點(diǎn)擊按鈕和鏈接、訪問下拉菜單、填寫表格，還能與動(dòng)畫、音頻或視頻進(jìn)行互動(dòng)。處于這個(gè)原因，設(shè)計(jì)和其他媒體類似的網(wǎng)頁(yè)——例如，外形和交互上像一本書——就會(huì)浪費(fèi)很多網(wǎng)頁(yè)應(yīng)有的優(yōu)勢(shì)。
作為一名網(wǎng)頁(yè)設(shè)計(jì)師或項(xiàng)目經(jīng)理，你面臨的挑戰(zhàn)是仔細(xì)思考并衡量網(wǎng)站的每一個(gè)頁(yè)面中的交互設(shè)計(jì)，如何能讓網(wǎng)頁(yè)的優(yōu)勢(shì)最大化，如何讓頁(yè)面呈現(xiàn)內(nèi)容的方式合理并同意，如何讓客戶快速?gòu)囊粋€(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面。
站點(diǎn)地圖向你提供了從3500英尺高空俯瞰網(wǎng)站全貌的視角，但是它不包含頁(yè)面級(jí)別的細(xì)節(jié)。每個(gè)頁(yè)面上都在發(fā)生些什么事？有都少內(nèi)容？人們?nèi)绾螐囊粋€(gè)頁(yè)面跳轉(zhuǎn)到網(wǎng)站的其它部分？
要回答以上這些問題，我們需要為每一個(gè)獨(dú)特的頁(yè)面制作一張線框圖。線框圖如下圖是用簡(jiǎn)單的形狀和文字元素描述頁(yè)面結(jié)構(gòu)、內(nèi)容和導(dǎo)航的圖表視圖。
規(guī)劃出每個(gè)頁(yè)面會(huì)發(fā)生的事情、內(nèi)容如何呈現(xiàn)、如何導(dǎo)航，這是一項(xiàng)非常繁重的工作，尤其對(duì)于大型企業(yè)網(wǎng)站而言更是如此。所以我們會(huì)對(duì)先期工作做一些優(yōu)化，例如預(yù)先繪制線框圖，并創(chuàng)建一個(gè)模板，以此來(lái)幫助團(tuán)隊(duì)快速規(guī)劃出每個(gè)頁(yè)面的內(nèi)容板塊，以保證他們之間的合作沒有誤差，每個(gè)頁(yè)面都能夠保持一致。
模板頁(yè)面中包含的關(guān)鍵信息能夠提醒團(tuán)隊(duì)頁(yè)面級(jí)的目標(biāo)。了解了這個(gè)基本目標(biāo)以后，你就可以規(guī)劃若干個(gè)內(nèi)容板塊，同時(shí)還可以定義內(nèi)容之間的相對(duì)位置、尺寸大小及組件在頁(yè)面中排布的優(yōu)先級(jí)。
結(jié)束了預(yù)制線框圖之后，就可以王每個(gè)頁(yè)面中填充細(xì)節(jié)內(nèi)容了（預(yù)制線框圖是針對(duì)奶協(xié)規(guī)模比較大、邏輯關(guān)系比較復(fù)雜的網(wǎng)站而言的推薦步驟。比較簡(jiǎn)單的網(wǎng)站直接從站點(diǎn)地圖過渡至線框圖即可。）
線框圖可以理解為從內(nèi)容和媒體的角度出發(fā)來(lái)看待每個(gè)頁(yè)面都會(huì)發(fā)生什么事件的細(xì)目清單，同時(shí)它也能夠規(guī)劃出交互設(shè)計(jì)（Interaction Design，用戶如何使用頁(yè)面中的工具和導(dǎo)航內(nèi)容）。以下給出了線框圖需要包含的內(nèi)容示例。
(1) 頁(yè)面中會(huì)呈現(xiàn)出什么內(nèi)容，多少內(nèi)容。
(2) 哪個(gè)CMS實(shí)體會(huì)出現(xiàn)在頁(yè)面中（如果你在使用那個(gè)內(nèi)容管理系統(tǒng)的話）。
(3) 頁(yè)面中包含何種圖片和媒體（如flash或者視頻文件）。
(4) 你對(duì)頁(yè)面的技術(shù)和交互規(guī)劃——鏈接、空間等，包括下拉菜單、多行文本區(qū)塊、復(fù)選框和按鈕。
繪制線框圖是一個(gè)很重要的步驟，你需要全面把握所有的交互項(xiàng)，不能有疏漏——不管這個(gè)線框圖是為移動(dòng)APP、Flash演示、交易展覽還是網(wǎng)頁(yè)而設(shè)計(jì)。線框圖是你在紙上和所有人——包括客戶和最終開發(fā)這個(gè)網(wǎng)站的團(tuán)隊(duì)——組件所有內(nèi)容和交互設(shè)計(jì)的機(jī)會(huì)，它就如同建筑物的藍(lán)圖一樣。
你不需要為網(wǎng)站的每一個(gè)頁(yè)面創(chuàng)建線框圖，只需要為每一種特殊的布局創(chuàng)建一張線框圖就夠了。例如，你的頁(yè)面索引中可能包含有100個(gè)產(chǎn)品詳情的頁(yè)面，你可以只創(chuàng)建一張線框圖，在其中規(guī)定好產(chǎn)品詳情頁(yè)的構(gòu)成。然后，如果某幾個(gè)產(chǎn)品頁(yè)面在布局或者內(nèi)容上與其它產(chǎn)品不一樣，最好能夠?yàn)樗麄儐为?dú)創(chuàng)建特殊的產(chǎn)品詳情線框圖。
務(wù)必讓你的線框圖看起來(lái)極盡簡(jiǎn)單和無(wú)聊。線框圖應(yīng)該是灰度圖，只有簡(jiǎn)單的線條、邊框、灰色的矩形以及沒有內(nèi)容的示例文字。此舉旨在讓客戶清晰地意識(shí)到他們現(xiàn)在看見的只是一個(gè)框架，不帶有任何視覺設(shè)計(jì)的工作。
