繪制頁(yè)面和內容的線(xiàn)框圖

  • 2022-05-18 15:12:18
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.americanwasteexpansions.com

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

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

首頁(yè)

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

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

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

流行的線(xiàn)框圖工具

在繪制簡(jiǎn)單的線(xiàn)框圖階段有很多工具可供選擇,下面是一些比較知名的。

-Axure

-Microsoft Visio

-Omnigraffle(僅適用于Mac系統)

-Balsamiq

11.jpg

(圖4)

注意:本書(shū)所有線(xiàn)框圖和案例均使用Axure RP8版本進(jìn)行講解。

最初的首頁(yè)線(xiàn)框圖

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

11.jpg

(圖5)

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

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

精煉后的首頁(yè)線(xiàn)框圖

經(jīng)過(guò)之前與客戶(hù)和助手的溝通,我們繪制了另一個(gè)精煉后的線(xiàn)框圖,見(jiàn)圖6??梢钥吹?,它與之前的線(xiàn)框圖相比有了較大改變,它可以體現出更多直觀(guān)且有意義的細節。

我們豐富了主導航和搜索功能,還有輪播幻燈用來(lái)放置營(yíng)銷(xiāo)信息、社交網(wǎng)絡(luò )信息、視頻庫訪(fǎng)問(wèn)模塊、郵件訂閱和網(wǎng)站底部的公司信息與合作鏈接??蛻?hù)對首頁(yè)的布局設計表示認同,并急切地等待我們進(jìn)入視覺(jué)設計階段。

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

11.jpg

(圖6)

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


當前文章標題:繪制頁(yè)面和內容的線(xiàn)框圖

當前URL:http://www.americanwasteexpansions.com/news/wzzz/3462.html

上一篇:電商網(wǎng)站設計過(guò)程——信息架構和站點(diǎn)地圖

下一篇:分類(lèi)頁(yè)面

網(wǎng)站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專(zhuān)線(xiàn):15368242187(微信同號)