現(xiàn)在已經(jīng)定制好了網(wǎng)站，并且已經(jīng)知道不同頁面之間是如何連接的，下面我們可以來定義每個頁面中的內(nèi)容了。我們首先與客戶一起討論，為站點地圖中的每個頁面制作一些最初的草圖。這些草圖隨著每次修訂都會包含更多內(nèi)容并完善更多細節(jié)和數(shù)據(jù)。

注意：繪制線框圖關(guān)注文字、圖像和其他信息在頁面中如何顯示。我們要嘗試使用黑白和灰色的調(diào)色板，使用簡單的線條輪廓和形狀來表達頁面內(nèi)容的位置。這可以幫助我們專注于內(nèi)容應(yīng)該放在哪里，而不是圖像看上去是什么樣子或文字內(nèi)容應(yīng)該是什么。這些內(nèi)容雖然也非常重要，但不是當前階段要關(guān)注的。

首頁

我們在會議中通過頭腦風(fēng)暴來檢驗并設(shè)計網(wǎng)站首頁線框圖中的內(nèi)容和樣式?？蛻魧Ξa(chǎn)品描述和廣告詞有一些想法，但還沒有寫出來。對于一些新產(chǎn)品和相關(guān)的營銷廣告詞來說，這種情況是相當常見的。我們要向客戶解釋清楚，暫時沒有詳細的商品描述和營銷廣告詞并不影響我們開始工作。事實上，我們要做的工作是，定義這些文本要放在哪里顯示，它們的內(nèi)容需要多長。

因為我們目前還沒有掌握所有細節(jié)，所以我們把之前研究的用來支持用戶完成任務(wù)的功能和內(nèi)容使用大致的輪廓勾勒出來即可。在經(jīng)過幾輪繪制之后，我們與客戶達成一致，決定使用一種簡約的布局。這一步我們可以多繪制一些不同布局的草圖，以便客戶能更加輕松地與我們合作。不過，如果我們在頭腦風(fēng)暴環(huán)節(jié)中在一個布局上達成共識，我們可以大大加快這一步的進程。最終，我們選定的首頁草圖是這樣的，見圖4。

這里的草圖故意畫得比較粗糙，因為我們要保持快速且順暢的溝通，避免因為過早關(guān)注太多細節(jié)而陷入無意義的爭論。此時昆明網(wǎng)站建設(shè)小編認為只是使用這個簡單的草圖來檢驗各部分功能以及內(nèi)容所擺放的位置是否合理。下一步，我們就可以使用Axure來制作經(jīng)過檢驗的、更加精確且正規(guī)化的線框圖了。

流行的線框圖工具

在繪制簡單的線框圖階段有很多工具可供選擇，下面是一些比較知名的。

-Axure

-Microsoft Visio

-Omnigraffle（僅適用于Mac系統(tǒng)）

-Balsamiq

（圖4）

注意：本書所有線框圖和案例均使用Axure RP8版本進行講解。

最初的首頁線框圖

正如你看到的下面這張首頁線框圖，見圖5，與之前的草圖相比，我們可以添加更多細節(jié)。這時，我們可以考慮商品廣告圖像和標題應(yīng)該放在什么位置。

（圖5）

即便在當前階段已經(jīng)添加了這些細節(jié)，但仍然還有很多問題需要解決。我們下一階段的任務(wù)是與客戶會面討論這些問題，并使用頭腦風(fēng)暴嘗試找到最佳的解決方案，然后我們就要使用收集到的足夠的信息來繪制另外一個更加詳細的線框圖。

當我們再次與客戶見面并介紹了當前所面臨的情況，他介紹了一個助手給我們。這名助手負責提供網(wǎng)站中所需要的文本內(nèi)容（商品名稱和廣告促銷文案），事實上這正是我們目前所需要的。我們與客戶和新來的助手緊密合作，確保讓他知道，在網(wǎng)頁不同的位置分別需要多少什么類型的文本（比如，是商品促銷文案或是商品介紹，分別需要多少文字）。整個過程有些乏味，但進展很順利。在順暢溝通的前提下，我們收集到了足夠的信息，下一步就開始精煉另一個版本的首頁線框圖了。

精煉后的首頁線框圖

經(jīng)過之前與客戶和助手的溝通，我們繪制了另一個精煉后的線框圖，見圖6。可以看到，它與之前的線框圖相比有了較大改變，它可以體現(xiàn)出更多直觀且有意義的細節(jié)。

我們豐富了主導(dǎo)航和搜索功能，還有輪播幻燈用來放置營銷信息、社交網(wǎng)絡(luò)信息、視頻庫訪問模塊、郵件訂閱和網(wǎng)站底部的公司信息與合作鏈接?？蛻魧κ醉摰牟季衷O(shè)計表示認同，并急切地等待我們進入視覺設(shè)計階段。

不過，目前首頁還需要很多更加詳細的文字信息，通過上圖可以看到，很多地方我們還是使用文本占位符。不過這并不會影響到項目進展，隨著設(shè)計過程的推進，我們隨時可以將文本占位符替換成真實的內(nèi)容。因為助手提供的文本內(nèi)容數(shù)量長度并不是十分符合要求，所以我們可能需要調(diào)整設(shè)計來適應(yīng)不同的內(nèi)容。在進入視覺設(shè)計階段之前，把這些文本內(nèi)容的位置和長度確定下來是明智的選擇

（圖6）

昆明網(wǎng)站制作提醒注意：線框圖中的文本占位符Loremipsum，中文又稱“亂數(shù)假文”，是指一篇常用于排版設(shè)計領(lǐng)域的拉丁文文章，它沒有任何意義，主要目的是測試文章或文字在不同字型、版式下的視覺效果。AxureRP8中的Paragraph部件默認顯示的就是Loremipsum。使用PC機進行設(shè)計的讀者可以訪問www.lipsum.com快速生成并使用，擁有Mac機的讀者可以下載一個名為“LittleIpsum”的應(yīng)用，非常便捷。