網站製作指南｜網站架設好簡單，頁面設計重點與內容編排技巧

現在的網站設計不僅僅只是建置一個展示業務或內容的平台，而是必須建置一個提供給使用者優質使用體驗的網路平台，隨著科技的進步，網站設計也不斷在演變，以滿足客戶的需求和技術的趨勢，因此，了解最新的網站設計趨勢與使用者偏好就顯得相當重要，這不僅關係到網站的美觀程度，更關乎使用者的體驗影響您訂單的成交率。

早期的網站設計，通常著重在視覺的美編及動畫的特效，透過華麗的效果吸引瀏覽者的目光，然而此種過度強調視覺效果的網站設計方向已不符合現階段的需求，隨著時代的變遷，現在使用者瀏覽網站的目的，更加注重效率、功能性與使用者體驗，在現今，使用者瀏覽網站的目的已經不再是欣賞網站的視覺效果，而是為了能夠快速找到對他們有用的資訊，因此豐富的資訊、良好的網站動線、適當且清楚的文章段落編排，才是現階段網站設計的重點。

網站製作的目的是什麼？這個問題看似不是太重要，但在網頁設計中，它其實相當的重要，在網站製作前，必須要先確定您製作這個網站最主要的目的是什麼，主要的目標受眾是哪些人，才能決定後續的網站製作相關事宜，如:網站功能、網站設計風格…等，當然，影響這些東西的因素還有很多，不會完全由網站製作的目的決定，但網站製作的目的肯定是最關鍵的因素之一。

如果您不太了解網站可以做到什麼事情、可以帶給您的企業什麼樣的幫助，以下提供幾個常見的網站製作類型及設計重點給您參考：

1. 形象網站

許多企業或政府機關網站製作的主要目的都是為了提供給使用者相關的服務資訊，這些網站通常會提供關於企業或該政府機關的產品、服務或其他特定主題的相關資訊，並不需要提供線上購物功能，而這類型的網站，通常會建置關於我們、產品或服務介紹、常見問題、聯絡方式等網站單元內容，透過這樣的網站架構讓使用者可以輕鬆瀏覽更多訊息。

2. 電商網站

電商網站顧名思義主要用於線上銷售產品或服務，這類型的網站製作的重點就會著重在商品目錄的展示、購物車系統、多元線上支付方式，以及訂單處理、客服功能，主要目的就是讓消費者獲得最佳的購物體驗。

3. 社群網站

社群網站主要用於建立社群或網路論壇、平台，讓人們可以發文、互相分享資訊、交流互動…等，這類型的網站功能通常就會著重在用戶註冊、個人資料的維護、訊息發送、討論區、部落格、留言版等。

4. 新聞網

許多媒體、新聞機構或出版社都會架設網站作為他們的線上平台，提供新聞報導、文章、影片、音樂等內容，這類型網站的功能會著重在資料的上下架與首頁版面設計，讓發佈的內容能夠達到有效的曝光。

5. 線上教育平台

線上教育平台顧名思義就是提供線上課程、教學影片等線上教學資源，幫助使用者提升知識和專業技能的網站，這類網站的設計重點就會在強化使用者體驗，如：課程版面的分類設計、影片上傳、提供線上測驗等，提供給使用者一個簡單易用的學習介面。

6. 個人或專業形象展示

許多個人接案者或是工作室會使用網站展示他們的作品、經歷和專業技能，這類型網站通常會包括個人介紹、作品集、經歷、聯絡方式等內容，主要目的在於提高知名度並塑造專業形象，因次版面的設計也通常不會太過花俏，會以簡約專業的設計為主。

7. 線上服務和工具

許多網站製作的目的就是提供各種線上服務和工具給使用者，以滿足使用者的需求，如:線上支付、線上翻譯、日曆、專案管理等，這類線上服務的網站，當然最主要的重點就是網站的功能開發，另外是否提供API給他人做串接也是需要考慮的設計重點之一。

如果一個網站充斥著太多無意義的圖片或動畫，不僅會降低網站下載的速度而影響到網友瀏覽的品質，更重要的是也有可能會影響到網站於各大搜尋引擎的排名。
因此在您要製作網站前，務必注意以下事宜，方能給瀏覽者一個最佳的使用者體驗，也才能為您的網站帶來更多的人氣。

1. 網站設計必需要有良好的「動線」

網站設計要以使用者為中心，確保使用者有最佳的網頁瀏覽體驗，網站設計應著重於網站的易用性、網站導航、網站內容架構等方面，也就是網站必需隨時讓瀏覽者清楚了解自己目前處於哪個網頁單元，並能夠快速找到自己想要的資訊，此外，也建議最好為您的網站加上「網站導覽（SiteMap）」或「全文檢索」，使用易於理解的標籤和連結，考慮使用瀏覽列、側邊欄或麵包屑等導航元素，以提供瀏覽者更佳的導覽資訊。

2. 提升網站載入速度，避免過多不必要的元素

確保你的網站載入速度快，以提供良好的使用體驗。優化圖片大小、瀏覽器快取、代碼壓縮和減少 HTTP 請求等都是提升網頁速度的常用方法。過多的圖片、動畫，事實上是會影響網站及網友瀏覽的品質的，所以我們建議網站中，除非必要，否則應該盡量少使用一些「無義意」的元素，例如：視覺性沒有意義的動畫及圖片、背景音樂、沒有必要的 JavaScript 特效或程式…等。所以如何兼具網站視覺的美感精緻度及網站的下載速度與動線，將是網站設計人員一個十分重要的課題。

3. 網站設計風格符合企業形象

為了加深瀏覽者及消費者對企業或商品的印象，網站設計的風格必需要與企業的 CIS 一致，才能突顯網站或企業的特色，當然，從零開始全客製化設計一個專屬於您的網站也是不錯的選擇，但相對的費用也會比較高，其實只要選擇合適的顏色、字體、圖像和視覺元素，也能創建與您企業品牌形象一致的風格設計，除此之外，還要注意網站版面的配置、對比度和統一的視覺層次，這樣也能讓您的網站看起來更加專業。

4. 清晰的網站主題

網站除了視覺設計風格必須要一致外，網站的主題與內容也必須維持一致，舉例來說，如果您的公司業務廣泛且業務類型差異大，就算您有很多實用、有趣的內容想放到網站上，也一樣務必要謹遵清晰的網站內容主題這個原則，主要的原因除了資訊太過雜亂，會導致瀏覽者無法快速找到自己想要的資訊外，也因為搜尋引擎會根據網站的內容及搜尋者使用意圖將網站進行分類，並將網站推播給適合的受眾，如果您的網站內容主題不夠清晰，可能就會影響搜尋引擎的排名，讓您的網站無法確實推播給您的潛在客戶。

5. 文字或標題必需明確且一目瞭然

網友到我們網站瀏覽，如果沒有在 30 秒內看到對他們有興趣的文字或標題資訊，通常會直接選擇離開我們的網站到其它相關甚至同業的網站去瀏覽。所以網頁中明顯且吸引人的文字標題就十分重要了，尤其是網站的「首頁」，一般而言，首頁是整個網站中，最多人瀏覽的地方，所以網站首頁的文字必需花些心思來編寫。

6. 豐富的資訊及網站內容

網站內容使用適當的標題、段落和列表，規劃設計吸引人且易於閱讀的網站布局，網站設計亦可適度使用空白間距，讓內容結構更清晰、有邏輯，網站內容越豐富完整，網友也會願意在網站中停留更多的時間，甚至會分享推薦給親朋好友，長久下來網站的排名與流量一定都會有所成長，也勢必為網站帶來更多的商機，目前一般常見的網站內容規劃有「商品資訊、教學資訊、常見問題、參考文件、相關報導、技術支援、相關討論…等」，可以在網站中提供相關資訊給網友。

7. 網站系統功能人性化

大多數的網站為了加強資訊發佈的即時性及增加與網友互動的機會，通常會在自已的網站設計規劃中加上系統功能的建置。建置系統功能好處在於可以自已由後端管理系統即時的發佈或變更最新的資訊，並且能取得客戶的資訊，例如：「訊息管理系統、商品管理系統、會員管理系統、訂單管理系統、討論區或留言版系統…等」。在製作這些有利於網站的系統前，一定要做好系統分析及流程規劃，盡量讓網友使用操作上更為人性化，才能提高網友使用的意願、同時也能讓使用後端系統的管理人員使用上更加便利。

8. RWD 響應式網站設計／跨瀏覽器相容性

RWD響應式網站設計可以讓您網站的排版設定隨著使用裝置的螢幕大小縮放顯示，讓您的網站在不同裝置和螢幕尺寸下都能提供一致的使用體驗，包括桌面電腦、平板和手機，而因應現今大眾的瀏覽習慣，使用手機及平板瀏覽網站的人也越來越多，因此 Google 也將行動裝置體驗這項指標列入網站排名的評估標準，如果您的網站沒辦法有效支援行動裝置瀏覽，那麼也就很難在搜尋引擎上有好的排名。

9. 網站 SEO 優化

網站 SEO 優化可以說是每個網站經營者都必須要做的工作，SEO 優化最主要的好處當然就是提升網站的排名，此外 SEO 優化可以自行操作，不用額外花錢委託給廠商代操，當然可以自行操作的項目，如果您不是專業人士的話，就僅限於關鍵字設定、網頁描述和標題及文案的內容、架構等，其他網站架構或是網頁程式方面的優化還是必須委託給專業網站設計公司處理，但只要您的網站設計是依照 SEO 的架構進行開發，縱使後續只有透過您自行操作網站 SEO 優化，仍然有可能取得不錯的成效，提高網站在搜索結果中的可見性，因此擁有一個方便設定網站 SEO 優化項目的管理後台，也是網站設計的製作重點之一！

10. 善用影片

隨著大眾瀏覽習慣的變化，透過影片的方式來傳達您想要表達的資訊，有時候反倒是比純文字的網站內容來得吸睛，尤其在許多產業都是如此，例如：機械的使用教學、家具的安裝說明等，我們可以將這些說明製作成影片，上傳到 Youtube 並嵌入到網站中，不管是對於您的網站內容品質、流量還是提升消費者對您的品牌印象都有正向的幫助，此外，這些影片除了方便使用者觀看、分享給其他人外，在 Youtube 中也能夠持續為您帶來不同於網站的曝光來源。

當然，網站的主體還是內容本身，Google 也公開表示，創作優質的網站內容才是提高網站排名的最佳方法，其餘的網站優化都只是輔助，不過所謂的優質網站內容，其實除了提供實用的資訊外，還有許多的小技巧，內容的排版、字體、圖片的選擇以及如何適當的安排關鍵字在網站內容都是優質的網站內容所必須要有的關鍵，底下為大家一一說明：

1. 網站內容排版

大家都知道網站設計的動線，一般來說都是由上往下滑動，因此我們必須在內容的最一開始，也就是文章的最上方就吸引住瀏覽者的目光，增加他們在網站中的停留時間，那要如何在這個區塊吸引住瀏覽者的目光，主要可以分成三個部分，標題、圖片跟引言，文章的標題一定要吸引人，這個相信大家都知道就不多說了，那為什麼建議您，內容一定要放圖片呢，因為人類的大腦對於圖像的處理速度是比文字快速的，人類的在瀏覽內容時，通常一定都會先看圖片，因此必須要藉由一張引起瀏覽者的興趣，來引導瀏覽者繼續閱讀網站的其他內容，另外，引言的部分也必須特別注意，不要寫得太過攏長，可以先簡單概述文章的重點，接著在內文的部分好好說明即可，否則引言太過攏長，非但吸引不了使用者，可能還會造成反效果。

2. 網站字體

網站字體看似只是一個小細節，不是太重要，但其實網站字體用得好不好對於網站的易讀性影響相當得大，如果一個網站對於瀏覽者來說，連閱讀裡面的內容都不容易了，那麼網站的流量及排名想必都不會太好，因此我們也建議不要使用太過花俏或過度浮誇的字體，雖然這些字體很好看，但長時間看下來也容易造成視覺的疲勞，讓瀏覽者無法長時間瀏覽網站，另外，也不建議使用太過特殊的字體，否則有的瀏覽者可能會因為作業系統或瀏覽器的版本問題，導致網站無法顯示或出現亂碼。

除了網站字體的選擇之外，文字的編排也相當重要，字體的間距、行距、字體大小、顏色、字數、段落留白、一致性等，都可能是影響您網站內容好壞的因素，文字的編排必須要整齊，不要過度雜亂、段落的區分也務必要清晰，把文章的內容架構層級安排清楚，字體大小及間距也要特別注意，可以針對您的網站受眾進行調整，舉例來說，如果您的網站主要受眾年齡偏高，您可能就必須把網站的字體及行距拉大，以方便他們瀏覽。

3. 網站圖片的選擇

在網站中插入圖片除了營造網站風格氣氛、吸引瀏覽者目光之外，也是幫助瀏覽者理解網站內容的重要關鍵，那網站的圖片應該要怎麼選，首先，當然必須要與該頁面的內容相關，如果頁面中的內容可用圖表的方式做呈現，我們就可以將圖表製作出來，放置在網站中；如果內容是介紹實體的產品或服務，那麼我們就可以搭配實體的照片或影片做展示；當然，您也可以插入意象式的圖片，搭配網站的內容、風格選擇適合的圖片做插入，舉例來說，如果您的產業是科技業或是製造業，就可以選擇一些比較科技感或是冷色系的圖片素材來營造網站的專業風格，那圖片的部分不管您想要使用實體照片或是手繪式的圖像都可以，只要符合網站的內容與風格就好，最重要的是圖片必須要真的能夠對您的網站內容起到加分的作用。

4. 適當的安排關鍵字

網站的內容品質當然很重要，但如何適當的將有搜尋量的關鍵字安排在網站內容中也很重要，否則您的網站空有好內容，卻沒有人搜尋也是英雄無用武之地，那什麼是適當的安排關鍵字，最直觀的想法當然就是將關鍵字自然的安排在網站的各個段落中，不能有不通順的地方，這樣當然沒有錯，但還有其他的小細節需要注意，舉例來說，一個頁面之中我們會建議不要置入超過5組以上不同的關鍵字，網頁的標題中也必須包含您想要在這個頁面操作的主要關鍵字，另外也必須要注意關鍵字的密度，同一組關鍵字不宜太過頻繁出現在同一段落中，除了可能造成語句不通順外，也容易被搜尋引擎判定為垃圾內容，這些都是您在網站內容中置入關鍵字需要注意的小細節。

info當然，以上只是單純列出一些網站設計中最重要、必須要注意的事項，其他還有很多細節需要注意，根據不同的網站類型、網站目標受眾都可以能會有不一樣網站設計重點，但總而言之，好的網站設計還是有許多共同應該要注重的地方，如:使用者體驗、網站視覺設計、性能優化和品牌一致性、行動裝置支援性、符合 SEO 架構的網站設計等方面，只要能夠兼顧以上這幾點就能夠稱得上是一個優質的網站設計。

網站製作該委託給網頁設計公司進行還是自行架設網站，其實各有優缺點，當然如果您有網頁設計的專業技術能力，選擇自行架設網站一定會有較高的自由度，但相對來說網址申請、網站主機租用等網站製作相關事項也全部都必須自己來，而委託給網頁設計公司就相對省事，只需要定期跟網頁設計公司溝通自己的需求就能夠有一個美觀且功能完整的網站，而將網站製作委託給網頁設計公司的方案類型也分為客製化網站、套版網站、租用型網站三種，可依據您的網站需求及預算選擇適合網站製作方案，底下我們也幫您分析自行架設網站、客製化網站、套版網站、租用型網站四種網站製作方案的優缺點，讓您更了解自己適合哪一種網站製作方案。

自行架設網站

• 架站平台

  這些架站平台通常提供會有方便您拖曳編輯的網站製作界面和外觀主題模板供您選擇，基本上不需要撰寫程式碼就能夠把網站製作好，如：Wix, WordPress.com, Squarespace 等都是常見的架站平台，這些平台適合那些想要快速製作簡單網站的使用者，當然這些平台也提供您使用程式碼修改網站的功能。

• 內容管理系統（CMS）

  相較於架站平台，透過 CMS 來製作網站，會有更高彈性和自由度，它允許您自由的設定網站的外觀和功能，但也因此如果您想用 CMS 來製作網站，就必須有相當程度的網頁設計專業，否則很難上手，常見的 CMS 有 WordPress.org, Joomla, Drupal 等。

客製化網站

客製化網站製作將針對企業特色及實際功能需求做完全的客製化，經由雙方溝通後進行網站製作，採用「量身打造」的方式，能製作出百分百符合企業獨特之形象的專業網站，此種方式也是目前大多數企業網站製作所採用的類型。

套版網站

套版網站指該網站之「系統功能」或「版面風格」為制式的系統或版面，客戶僅可依照既有的系統或版面進行套用，因此在功能及樣版設計上的限制較多，可修改地方不多，甚至無法修改，但相對整體網站設計費用將較為便宜。

租用型網站

租用式網站類似套版式網站，但價格是採用租用的方式收費，通常為年繳方式。此類型之網站系統會提供幾款的版面風格供客戶選擇及切換，所有的系統功能都是固定的，所以無法根據個人的喜好進行大幅度變更，大多只能選擇是否開放該功能。此類型網站通常適用於較不計較網站視覺風格及預算有限之企業或個人。

網站製作方案選擇要點

至於網站製作的方案要怎麼選，才能找到符合自身網頁設計需求及預算的方案，在決定之前您必須考量以下四個因素：

1. 功能需求

確定您的網站設計與製作需求及網站功能、網站類型等，舉例來說，如果您想架設電商購物網站，那麼您的網站就必須要建置購物車系統、串接線上金流並整合社群媒體，可以事先將想建置的網站功能全部列出來，後續再依據網站製作的預算、可行性與必要性做刪減。

2. 技術能力

依技術能力與人力、時間成本，評估自行架設網站或是委託網頁設計公司製作網站，選擇最划算的網站製作方案，另外，也必須將網站架設完畢上線後的營運維護成本一起考慮進去，評估是否選擇有網站維護服務的網頁設計公司，否則網站上線後出現問題，卻發生找不到人可以解決的窘境，反而又要額外花一筆費用請人幫忙修復網站。

3. 網站製作預算

根據您可以投入網站製作的資金預算，選擇適合的網站製作方案，因為在網頁設計的領域中，全客製化網站設計與套版網站的價格、製作時間與成本差異很大，以購物型網站為例，全客製化設計的購物網站價格可能要數 10 萬且需要 3 個月以上才能建置完成，但租用型的套版網站可能只需要幾千塊，而且 1 個月內就能讓網站上線運行。

4. 網站擴充性及客製性

進行網站製作前，也必須先確定網站未來是否有功能擴充的需求，以及是否需要根據品牌形象進行客製化網站設計，如果您沒有這些需求，那麼選擇套版網站就能夠符合您的需求，否則您可能就要選用智慧型網站設計或是客製化網站設計方案了。

其實在準備進行網站設計前，就必須要開始著手準備網站製作相關的資料了，先行把資料準備好，當您與網頁設計公司溝通時，也能夠加速整個溝通過程，幫助網頁設計公司快速了解您的需求，製作符合您需求的網站，那通常進行網站製作時應該準備哪些資料給網頁設計公司，底下一一為您說明：

1. 網站架構

所謂網站架構，指的就是網站的單元，您的網站需要有那些單元的呈現，建議可先經由企業內部討論及評估後再整理出來給網頁設計公司報價，您可參考同業或類似的網站來規劃此架構，當然，您也可以請網頁設計公司為您擬定初步架構後，企業內部再針對此架構予以討論。

2. 網站類型

網站類型大致可區分為「形象網站、購物網站、入口型網站、活動網站」…等，您可以先針對您的需求決定要製作何種類型的網站，另外您也可以提供一些參考網站的範例，不論是同業或是非同業的網站均可，只要您覺得該網站針對美編或程式具有參考的價值，都可以整理出來給網頁設計公司參考。

3. 網站系統功能

確認您的網站需要製作哪些功能，例如:產品展示、線上購物、聯絡表單、會員登錄等功能，列出您需要的功能清單，這樣網頁設計公司才能就你的需求幫您規劃網站結構及功能。

4. 公司資訊

「公司簡介、企業沿革、營業項目、購物需知、加入會員需知、公司連絡基本資料…等」，這些文案通常需由企業提供給網頁設計公司進行製作，如果企業本身有行銷企劃人員，可請他們先將文案整理後並撰寫出具專業文案之相關資訊，若企業內部沒有專業的文案撰寫人員，也可請網頁設計公司幫忙撰寫，或是請他們提供參考範本，然後企業內部再針對範本進行內容編修。

5. 公司品牌資料

此外若企業本身有自行的 CIS 企業識別設計，也必須提供品牌元素給網頁設計公司，如標誌、標語、顏色方案和任何其他與品牌形象相關的內容等，如此才能將網頁設計整合企業品牌凸顯企業形象。

6. 目標受眾

描述你的目標受眾特徵，包括他們的年齡、性別、地理位置、興趣和需求，讓網頁設計公司能夠了解您的主要客群，針對您的主要客群設計能夠吸引他們的網站。

7. 網站內容

您希望在網站上展示的內容，包括文字、圖片、影片等，提供清晰的文字內容，以及高品質的圖片及影片素材，例如:網站製作需要的圖片資料，主要是以商品照片、企業 Logo 圖片或可編修原始檔及公司相關照片為主，而圖片資料中，以「商品照片」最為重要，優質的商品照片，除了可增加網站豐富度及美感外，更能增加消費者購買的慾望，所以慎選照片是很重要的，建議可以挑選幾張主要的商品照片，放置於網站首頁，如此將更能增加商品的曝光機會。此外，您也需要注意圖檔的所有權，以免造成侵權行為。

8. 競爭對手分析

提供您主要競爭對手的網站資訊給網頁設計公司，有助於網頁設計公司了解產業的標準和趨勢，從中找出符合您產業但又獨具特色的設計風格，幫您製作不同於競爭對手獨一無二的網站。

9. 預算和時間

您可以直接請網頁設計公司為您針對提出的網頁設計需求來報價，或是您也可以直接編列網站製作的預算，讓網頁設計公司針對預算需求，來規劃可行的製作範圍及功能。

10. 其它檔案資料

除了文案及圖片資料外，若您的網站需要有其它特殊需求時，便需另外準備相關的檔案資料，例如：「技術說明文件、操作手冊、欲提供網友下載的檔案…等」。

以上這些都只是準備給網頁設計公司的基本資料，根據您的具體需求，也可能需要提供其他相關資料，所以與網頁設計公司的溝通很重要，一定要充分溝通，確認對方百分百了解您的期望和網站要求。

總結

總之，網站設計與製作的方式五花八門，網站的類型當然也遠不只這一些，實際上網站還有很多其他可以達成的目標與應用，而雖然網站有很多種不同的變化，但事實上網站還是有許多共同的特性，例如：網站可以全年無休、24 小時運行，曝光效果可以觸及全世界等，而網站製作費用也比實體店面的成本來的低很多，因此網站也成為許多企業重要的行銷管道。

除此之外，您也應該思考您想透過網站提供給您的客戶什麼樣的服務，以及您期望這個網站能帶給您什麼樣的效益，依此來製作您的網站，網站設計也應該與您的需求和目標息息相關，如此一來，您這個網站才能真正為您帶來商機。