現(xiàn)在已經(jīng)定制好了網(wǎng)站,并且已經(jīng)知道不同頁面之間是如何連接的,下面我們可以來定義每個(gè)頁面中的內(nèi)容了。我們首先與客戶一起討論,為站點(diǎn)地圖中的每個(gè)頁面制作一些最初的草圖。這些草圖隨著每次修訂都會(huì)包含更多內(nèi)容并完善更多細(xì)節(jié)和數(shù)據(jù)。
注意:繪制線框圖關(guān)注文字、圖像和其他信息在頁面中如何顯示。我們要嘗試使用黑白和灰色的調(diào)色板,使用簡(jiǎn)單的線條輪廓和形狀來表達(dá)頁面內(nèi)容的位置。這可以幫助我們專注于內(nèi)容應(yīng)該放在哪里,而不是圖像看上去是什么樣子或文字內(nèi)容應(yīng)該是什么。這些內(nèi)容雖然也非常重要,但不是當(dāng)前階段要關(guān)注的。
首頁
我們?cè)跁?huì)議中通過頭腦風(fēng)暴來檢驗(yàn)并設(shè)計(jì)網(wǎng)站首頁線框圖中的內(nèi)容和樣式。客戶對(duì)產(chǎn)品描述和廣告詞有一些想法,但還沒有寫出來。對(duì)于一些新產(chǎn)品和相關(guān)的營(yíng)銷廣告詞來說,這種情況是相當(dāng)常見的。我們要向客戶解釋清楚,暫時(shí)沒有詳細(xì)的商品描述和營(yíng)銷廣告詞并不影響我們開始工作。事實(shí)上,我們要做的工作是,定義這些文本要放在哪里顯示,它們的內(nèi)容需要多長(zhǎng)。
因?yàn)槲覀兡壳斑€沒有掌握所有細(xì)節(jié),所以我們把之前研究的用來支持用戶完成任務(wù)的功能和內(nèi)容使用大致的輪廓勾勒出來即可。在經(jīng)過幾輪繪制之后,我們與客戶達(dá)成一致,決定使用一種簡(jiǎn)約的布局。這一步我們可以多繪制一些不同布局的草圖,以便客戶能更加輕松地與我們合作。不過,如果我們?cè)陬^腦風(fēng)暴環(huán)節(jié)中在一個(gè)布局上達(dá)成共識(shí),我們可以大大加快這一步的進(jìn)程。最終,我們選定的首頁草圖是這樣的,見圖4。
這里的草圖故意畫得比較粗糙,因?yàn)槲覀円3挚焖偾翼槙车臏贤?,避免因?yàn)檫^早關(guān)注太多細(xì)節(jié)而陷入無意義的爭(zhēng)論。此時(shí)昆明網(wǎng)站建設(shè)小編認(rèn)為只是使用這個(gè)簡(jiǎn)單的草圖來檢驗(yàn)各部分功能以及內(nèi)容所擺放的位置是否合理。下一步,我們就可以使用Axure來制作經(jīng)過檢驗(yàn)的、更加精確且正規(guī)化的線框圖了。
流行的線框圖工具
在繪制簡(jiǎn)單的線框圖階段有很多工具可供選擇,下面是一些比較知名的。
-Axure
-Microsoft Visio
-Omnigraffle(僅適用于Mac系統(tǒng))
-Balsamiq
(圖4)
注意:本書所有線框圖和案例均使用Axure RP8版本進(jìn)行講解。
最初的首頁線框圖
正如你看到的下面這張首頁線框圖,見圖5,與之前的草圖相比,我們可以添加更多細(xì)節(jié)。這時(shí),我們可以考慮商品廣告圖像和標(biāo)題應(yīng)該放在什么位置。
(圖5)
即便在當(dāng)前階段已經(jīng)添加了這些細(xì)節(jié),但仍然還有很多問題需要解決。我們下一階段的任務(wù)是與客戶會(huì)面討論這些問題,并使用頭腦風(fēng)暴嘗試找到最佳的解決方案,然后我們就要使用收集到的足夠的信息來繪制另外一個(gè)更加詳細(xì)的線框圖。
當(dāng)我們?cè)俅闻c客戶見面并介紹了當(dāng)前所面臨的情況,他介紹了一個(gè)助手給我們。這名助手負(fù)責(zé)提供網(wǎng)站中所需要的文本內(nèi)容(商品名稱和廣告促銷文案),事實(shí)上這正是我們目前所需要的。我們與客戶和新來的助手緊密合作,確保讓他知道,在網(wǎng)頁不同的位置分別需要多少什么類型的文本(比如,是商品促銷文案或是商品介紹,分別需要多少文字)。整個(gè)過程有些乏味,但進(jìn)展很順利。在順暢溝通的前提下,我們收集到了足夠的信息,下一步就開始精煉另一個(gè)版本的首頁線框圖了。
精煉后的首頁線框圖
經(jīng)過之前與客戶和助手的溝通,我們繪制了另一個(gè)精煉后的線框圖,見圖6??梢钥吹剑c之前的線框圖相比有了較大改變,它可以體現(xiàn)出更多直觀且有意義的細(xì)節(jié)。
我們豐富了主導(dǎo)航和搜索功能,還有輪播幻燈用來放置營(yíng)銷信息、社交網(wǎng)絡(luò)信息、視頻庫訪問模塊、郵件訂閱和網(wǎng)站底部的公司信息與合作鏈接??蛻魧?duì)首頁的布局設(shè)計(jì)表示認(rèn)同,并急切地等待我們進(jìn)入視覺設(shè)計(jì)階段。
不過,目前首頁還需要很多更加詳細(xì)的文字信息,通過上圖可以看到,很多地方我們還是使用文本占位符。不過這并不會(huì)影響到項(xiàng)目進(jìn)展,隨著設(shè)計(jì)過程的推進(jìn),我們隨時(shí)可以將文本占位符替換成真實(shí)的內(nèi)容。因?yàn)橹痔峁┑奈谋緝?nèi)容數(shù)量長(zhǎng)度并不是十分符合要求,所以我們可能需要調(diào)整設(shè)計(jì)來適應(yīng)不同的內(nèi)容。在進(jìn)入視覺設(shè)計(jì)階段之前,把這些文本內(nèi)容的位置和長(zhǎng)度確定下來是明智的選擇
(圖6)
昆明網(wǎng)站制作提醒注意:線框圖中的文本占位符Loremipsum,中文又稱“亂數(shù)假文”,是指一篇常用于排版設(shè)計(jì)領(lǐng)域的拉丁文文章,它沒有任何意義,主要目的是測(cè)試文章或文字在不同字型、版式下的視覺效果。AxureRP8中的Paragraph部件默認(rèn)顯示的就是Loremipsum。使用PC機(jī)進(jìn)行設(shè)計(jì)的讀者可以訪問www.lipsum.com快速生成并使用,擁有Mac機(jī)的讀者可以下載一個(gè)名為“LittleIpsum”的應(yīng)用,非常便捷。
當(dāng)前文章標(biāo)題:繪制頁面和內(nèi)容的線框圖
當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3462.html
上一篇:電商網(wǎng)站設(shè)計(jì)過程——信息架構(gòu)和站點(diǎn)地圖
下一篇:分類頁面