網頁設計須知 – SUMASTAR 數碼星網路 https://www.sumastar.com.tw 專注RWD網站設計、WordPress 架站、SEO Thu, 23 Feb 2023 05:41:37 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.8.2 https://www.sumastar.com.tw/wp-content/uploads/favicon4-150x150.png 網頁設計須知 – SUMASTAR 數碼星網路 https://www.sumastar.com.tw 32 32 網站設計前必做準備：網站架構圖 https://www.sumastar.com.tw/web-design-knowledge/notice/%e7%b6%b2%e7%ab%99%e8%a8%ad%e8%a8%88%e5%89%8d%e5%bf%85%e5%81%9a%e6%ba%96%e5%82%99%ef%bc%9a%e7%b6%b2%e7%ab%99%e6%9e%b6%e6%a7%8b%e5%9c%96/ Thu, 23 Feb 2023 05:41:15 +0000 https://www.sumastar.com.tw/?p=1027 很多需要網站的創業者，會將網站製作委託給專業，這時候問題來了．怎麼傳達你的「理念」給網頁設計？請你提供兩樣東西，一是你喜歡的「網站風格」網站一至三個，另一個是「網站架構圖」。

[toc]

找出你喜歡的「網站風格」網站

每個人喜歡的網站風格都不大相同，有些喜歡「豐富的」希望網站上滿滿的資訊，有些喜歡「簡潔」的網站版面越乾淨越好。

光是告訴 設計師 / 網站設計公司你要「資訊豐富的網站」、「版面乾淨的網站」、「上面有一個大大輪播圖」，像這樣全憑各自認知，很可能雙方想的是有差異的。

最簡單的方式就是：找一兩個喜歡的網站，把「網址」給設計師吧，跟他說我喜歡的風格大致上是這樣。

因此造九的網站估價詢問表單有一欄，就是詢問客戶有沒有喜歡的網站，如果遇到沒有明確喜歡風格的客戶，造九也會主動提供各種類型的版型讓客戶做選擇，再以版型的風格下去製作。

提供網站架構圖：網站架構圖實例

另一個是網站架構圖，這部分我想透過實際案例的方式幫助大家了解，下面會舉一些造九自己以及擷取一些客戶的架構圖來幫助各位了解。

基本上分成兩個步驟，第一步驟是排出「網站大綱 Sitemap」。

第一步驟：網站大綱規劃 Sitemap

造九頑五部落格網站企劃架構 sitemap

將網站需要的頁面都排出來就對了！

這個步驟的原則就是網站要有哪些頁面以及功能，全都把它寫下來，像積木一樣排出來即可！如果想要補充什麼網站功能也不妨寫下來。

這裡你就當作你在規劃網站的選單，要有哪些選單 (頁面/分頁) 就都把它寫出來吧。

第二步驟：網站頁面架構圖

造九頑五部落格首頁 wireframe 草圖

第二步驟就是實際規劃「網站頁面」中的實際功能分佈的「架構圖」。上面這個範例文章區塊中還有將標題、內文放進去，這些不做也沒關係，「網站架構圖」主要是要告知網站製作者，你的功能區塊分布，下面再看更多客戶提供給我們的例子，更簡單潦草的規劃都沒問題。

更多網站架構圖案例

最原始、最直覺的工具：手畫架構圖

實際客戶案例：群欣診所

手畫網站架構草圖
網站架構圖就算很潦草、也沒對齊，只要能大致排出想要資訊的位置就夠了，因此不要害怕動手畫出想法。
依照網站架構圖製作 網站完成圖
依照上方架構圖實際完成的首頁

當初到診所去拜訪醫生，醫生直接現場拿出筆畫了他想要的方式，有讓我想起小時候去看醫生時，醫生都會在紙上寫一些潦草到完全認不出的英文字，感覺很專業。

實際客戶案例：hrshop 電商網站架構草圖

手畫電商網站架構圖
第一階段就是表達你想法的時候，至少提供首頁的架構圖，網站公司會更好的幫你完成整個網站
依照網站架構圖製作 網站完成圖
依照架構圖製作，實際網站完成樣式。

把所需的功能當作一個又一個的「箱子」找地方放就對了。不用怕放錯地方，如果你畫的方式是網站上可行的，網站公司會依照你畫的方式來製作，「不可行」的時候也沒關係，我們也會依照我們的專業幫你做「編排」。

依照架構圖提供檔案

記得還要將公司的 Logo、圖檔、文案、商品圖檔等檔案依照架構圖提供給網頁設計公司，可以參考這篇文章：委託了網頁設計公司製作網站，然後呢？

額外補充：更多網站架構圖案例：

只要能畫出架構圖，不管用手畫、用Word、用Excel都可以，用你習慣的方式就好！

網站架構圖 wireframe 範例1

網站架構圖 wireframe 範例
只要把資訊當作一個又一個的箱子，放到你想放的地方就好

網站架構圖 wireframe 範例2

網站架構圖 wireframe 範例
就算箱子排出來是不符合實際的，網頁設計師也會知道你這頁需要放哪些資訊，幫你做編排。

網站公司也有提供「網站規劃」的「顧問服務」，網站架構圖的部分可以幫你做編排，當然這部分可能是需要另外收費的。如果你自己對網站有想法，不訪自己做編排吧。

網站架構圖軟體推薦

基本上委託網站公司就只需要簡單手繪、或用 Word、任何你熟悉的工具編排給網站公司看即可，而假如你真想使用專門的軟體來編排的話，這邊推薦一款免費的雲端軟體 Figma

專業 wireframe 雲端應用 Figma

有興趣的人請自行到官網去瞧瞧，它可以雲端直接登入使用，也可以下載桌面端安裝，開始要熟悉一下他的熱鍵使用起來才能順手喔！另外他也支援多人協作功能，可以將做好的圖直接線上網址給另一個人觀看，甚至一起編排都沒問題

Figma 官網：https://www.figma.com/

]]> 為何 WordPress 是你網站的最佳選擇？ https://www.sumastar.com.tw/web-design-knowledge/notice/%e7%82%ba%e4%bd%95-wordpress-%e6%98%af%e4%bd%a0%e7%b6%b2%e7%ab%99%e7%9a%84%e6%9c%80%e4%bd%b3%e9%81%b8%e6%93%87%ef%bc%9f/ Wed, 11 Jan 2023 07:16:11 +0000 https://www.sumastar.com.tw/?p=983 WordPress 的市場佔有率

根據最新的數據，WordPress 是目前最受歡迎的內容管理系統，其市場佔有率約為 40%。這意味著，約有 40% 的網站使用 WordPress 來構建和管理其內容。這個數字顯示了 WordPress 的廣泛應用和流行程度，同時也表明了它在網站建設領域的強大實力。

市場佔有率高能代表什麼嗎？

這就要問問為何市場選擇 WordPress 居多？且這個數字逐年在上升，從早期的 30% 就已經高的誇張了，到現在的 40%，市場是聰明的，且是容易大者恆大的。

大者恆大的 WordPress 被支援性就高

為了因應非常收歡迎的 WordPress 網站，可想而知，各大網路巨擎、服務也都會特別對 WordPress 上心處理，像是 Google、Facebook 等都有推出 WordPress 的外掛。除了官方推出的外掛之外，第三方的支援外掛更是不枚勝舉，WordPress 已然成為一個豐富的網站軍火庫！

WordPress 所帶來的 SEO 好處

而 WordPress 網站在搜尋引擎優化（SEO）方面表現較好的原因有幾點。其中一個原因是 WordPress 是一個流行且廣泛使用的內容管理系統，所以像 Google 這樣的搜尋引擎對它非常熟悉，可以輕鬆地爬取和索引 WordPress 網站。此外，WordPress 內置了許多方便搜尋引擎優化的功能和工具，如可定制的固定鏈接結構和輕鬆添加圖像 meta 標籤和 alt 文本的功能。最後，WordPress 上有許多 SEO 專注的插件和工具可以幫助您提高網站在搜尋引擎結果頁面中的可見性。

經過多代大受歡迎並持續進化的 WordPress

除了上述原因外，WordPress 的其他一些特點也有助於搜尋引擎優化。例如，WordPress 的結構清晰，代碼整潔，有助於搜尋引擎理解網站內容。此外，WordPress 有豐富的插件和主題庫，您可以根據自己的需求選擇適合的插件和主題來優化網站，從而更容易獲得搜尋引擎的排名。另外，WordPress 社群活躍，有許多專家和專業人士可以提供幫助和指導，幫助您更好地瞭解如何在 WordPress 上進行搜尋引擎優化。

SEO 外掛！持續為你的網站加強 SEO

您還可以嘗試使用一些 WordPress SEO 插件，如 Yoast SEO 插件，這樣可以讓您更輕鬆地優化網站，提高其在搜尋引擎中的排名。此外，您還可以訂閱 WordPress SEO 相關的博客或電子報，以獲得最新的信息和知識。

持續進化與更新的網站系統

如果你找人製作一般網站，正常來說製作上線開始，你的網站就永遠保持這個狀態了。但 WordPress 卻是會持續更新與進化的。定期更新 WordPress 核心、以及與時俱進的 SEO 等外掛。都讓你的網站更加的健康與安全。

]]>