OURInsights

/
/
網頁設計的前置作業 — 認識 Sitemap(2021最新)

網頁設計的前置作業 — 認識 Sitemap(2021最新)

目錄

Sitemap (網站架構地圖),網站架構地圖是最簡單、快速的方式讓人了解網站整體的架構,我們可以透過 Sitemap 讓彼此取得共識,以建置出符合專案需求的網站。


什麼是 Sitemap?

在網站開發初期,Sitemap 可以用於釐清網站每個頁面的分類層級與連結關係,以評估網站的規模與複雜度,利用 Sitemap 制定好網站的規格與項目,與客戶溝通及說明後,設計師就可以依照專案需求與限制,做出適當的規劃,在設計確認後,提供給工程師進行前台開發。

為什麼需要繪製 Sitemap?

我們可以透過 Sitemap 了解網站整體的架構以及頁面層級、頁面彼此間的連結關係,以評估網站共有幾個頁面需要執行,預計有幾個版型需要設計,進而安排出專案時程表,做出符合專案時程的規劃。

Photo by Christina @ wocintechchat.com on Unsplash

如何繪製 Sitemap?

Sitemap 繪製就如同一間公司的組織圖,包含如何一層一層的分配部門,每個部門又涵蓋哪些單位或人員,一開始可以用簡單的草稿繪製出每個頁面的關係;後期在與客戶進行確認後,盡可能將網站未來會呈現的所有頁面規劃在 Sitemap 中,與客戶釐清專案的製作項目、降低日後修改的風險。

Sitemap 實際案例 / 使用 XMind 繪製
Figma MockFlow SiteMap

繪製 Sitemap 不一定需要設計或工程相關背景,但在網站架構較為複雜的情況,如大型電商網站建置,需要考量使用者操作、操作邏輯流程等,盡量事先與工程師、設計師進行討論,再決定如何呈現 Sitemap,透過溝通與協調,讓專案執行人員可以依照 Sitemap 建置出符合客戶需求的網站。


參考資料

Astral Web(2021.08.12)。如何繪製購物網站前端Sitemap 以Magento 2 Demo為例【Astral Web】。取自 https://www.astralweb.com.tw/how-to-draw-a-shopping-site-front-end-sitemap-as-an-example-magento2-demo/

Ranking小編(2021.08.12)。【網站架構】關於規劃網站架構,你一定得知道的事【Ranking SEO】。取自 https://ranking.works/%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88/%E7%B6%B2%E7%AB%99%E6%9E%B6%E6%A7%8B

參柒設計(2021.08.12)。製作企業/品牌網站設計應如何規劃?【參柒設計】。取自 https://www.37design.com.tw/blog/how-to-start-a-web-design-project

TAG

目錄

CATEGORIES
SHARE

Related Posts

現在這個時代,每個企業、產業都擁有自己的網站,但對於剛要起步的我們,該如何去確認,自己是不是要使用客製化網頁設計,以下將介紹什麼是客製化網頁設計,以及你適不適合...
使用 WordPress 架設網站時,我們可以利用編輯器去編輯文章及頁面,編輯器分為頁面編輯器與區塊編輯器兩種,依照編排和維護需求,兩種編輯器會運用在不同的使用...
Wireframe 是網頁設計初期確認每一個頁面構成的工具,如同我們在繪製一幅畫作時會先幫畫作打好草稿,以便後續的繪製。為什麼需要 Wireframe 呢? 如...