• <th id="d3k9k"></th>
      1. <em id="d3k9k"></em><dd id="d3k9k"><track id="d3k9k"></track></dd>

        繪制頁面和內容的線框圖

        • 2022-05-18 15:12:18
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.shabnamafrand.com

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

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

        首頁

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

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

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

        流行的線框圖工具

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

        -Axure

        -Microsoft Visio

        -Omnigraffle(僅適用于Mac系統)

        -Balsamiq

        11.jpg

        (圖4)

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

        最初的首頁線框圖

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

        11.jpg

        (圖5)

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

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

        精煉后的首頁線框圖

        經過之前與客戶和助手的溝通,我們繪制了另一個精煉后的線框圖,見圖6??梢钥吹?,它與之前的線框圖相比有了較大改變,它可以體現出更多直觀且有意義的細節。

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

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

        11.jpg

        (圖6)

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


        當前文章標題:繪制頁面和內容的線框圖

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

        上一篇:電商網站設計過程——信息架構和站點地圖

        下一篇:分類頁面

        網站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號)
      2. <th id="d3k9k"></th>
          1. <em id="d3k9k"></em><dd id="d3k9k"><track id="d3k9k"></track></dd>

            国产一区二区精品人妖系列,国产成人无码AV麻豆,国产真人一级a爱做片高潮,免费A黄片视屏