網頁新知

2019.01.11

網站建置必看重點 – 10 個網站製作前必須了解的知識與概念！

內容目錄

一、網站建置前需準備的事項與概念

1. 網站製作主要目的與取向

網站建置目的之所以會重要，是因為不同的目標取向，將會影響到後續網站架設流程，如果沒有很明確的將企業主要發展業務與網站類型相互結合，就無法發揮網站主要的功能，而且會因為資訊不夠明確、排版過於雜亂，反而會帶給網站訪客對企業品牌有不好的瀏覽體驗。以下條列最常見的網站目標類型，並解說特點與適合製作的對象：

（1）一頁式網站：只建立一個網頁，所有網站內容直接顯示在單一頁面中，透過選單連結錨點定位不同的內容區塊，快速捲動畫面至指定位置。

優點：架站時間較短，介面操作容易。
注意事項：可容納資訊較少，樣式較為單調。
適合架站類型：具時效性活動網頁、公告與通知頁面、單一產品介紹頁、入口網站。
了解更多 網站示範版型

（2）形象網站：以企業起源、業務介紹、產品特色、人才招募、聯絡方式為主要網站內容，通常建立 6 ~ 10 個頁面，主要目的在於利用互聯網特性推廣產品及服務，以促進企業品牌經營與發展。

優點：可按照企業本身經營項目彈性調整網站內容，客製化程度高，網站可發展性強。
注意事項：必須花費較多時間規劃網站架構及製作網站，過於複雜的網站瀏覽動線容易提升網頁跳出率，在網站維護與 SEO 優化也需學習比較進階的知識。
適合架站類型：自有品牌網站、企業官方網站、學術教育網站、影音或文字部落格。

形象網站案例：
客戶案例 – 仁寶電腦
客戶案例 – 采泥藝術
客戶案例 – 桔豐科技
客戶案例 – 仁華貿易
客戶案例 – 泥巴娛樂
客戶案例 – 蘭姆酒吐司

（3）電子商務網站：所有網站資訊內容只圍繞兩個重點：商品特色與銷售方式，頁面數視產品種類多寡而定，在架構上基本會有產品介紹、產品展示、FAQ、使用條款、退換貨政策等頁面，並且具有完整的線上銷售系統（購物車、運送、結帳等）。

優點：網路商店經營成本較低，銷售時間不受限制，可整合網路行銷工具多方面宣傳產品，交易管理系統易於學習。
注意事項：在製作網站架構時不要塞入太多與產品服務無關的頁面資訊，應該把焦點放在消費者體驗上，諸如商品介紹頁的文案內容、提供快速篩選商品方法、結帳流程是否順暢、如何再行銷老客戶等。
適合架站類型：零售販賣網站、產銷同步網站、軟體下載網站、課程報名網站、影音電子書即時消費網站、一般購物網站等。

購物網站案例：
客戶案例 – 一手私藏
客戶案例 – 群羊針織
客戶案例 – 威麥克
客戶案例 – SCHEMING GG
客戶案例 – 米樂
客戶案例 – 先創國際

（4）外銷網站：形象網站加入電子商務部分功能，以大量商品訂購製作或者重型機工具做詢價及合作提案，並且將主力銷售放置於海外市場，具有多國語言功能。頁面數無上限，除了企業品牌來源、產業介紹、服務項目、產品優勢等，也結商品詢價車與即時通訊軟體，以境外銷售為核心目的。

優點：多語言優勢能提升網站格局，具有國際銷售特性能獲得更多詢價合作的機會，同時具有形象網站與電商網站優點，網站功能新增或者版面資訊調整都具有更佳的潛力，一個網站就能提供給不同瀏覽目的使用者所想觀看的資訊，且網站可運作時間更為持久。
注意事項：必須使用規格較高的網站主機，才能讓網站眾多資料順利運行 ; 多語言翻譯內容要正確合理，需花費時間校對語言內容。
適合架站類型：傳統產業轉型、海外市場開拓。

外銷網站案例：
客戶案例 – 上尊企業
客戶案例 – 寶濟工業
客戶案例 – 百城機械
客戶案例 – 千富企業
客戶案例 – 聯茂電子
客戶案例 – 光曄科技

有了初步網站架設目標概念後，就要好好思考想要架設的網站應該定位在哪一種類型，太多特性與功能的結合不代表就是一個高品質網站，重點在於要怎樣規劃才能夠讓網站輔助企業品牌及產品服務發揮最大網路價值，這才是架設網站的基本核心目的。

2. 網站內容資料準備與架構規劃

決定網站目標之後，就可以把想法付諸於行動，以下提供幾個問題，可以作為思路的參考。

網站需要哪些頁面？如何正確分配內容？
企業精神與品牌特色要用怎樣的文案風格表達？
圖片還是影音？哪一種形式能達到最好效果？
主要服務及產品該如何分類？
網站架構是不是要符合 SEO 優化規則？
網站製作時間？如何更有效率完成？

可以用像是心智圖或者表格的方式來將所有項目列出，接者決定每一項目的大致方向，再接續處理細項問題，越仔細的規劃，在網站開始製作一直到完成的過程中就會更加順利。

3. 網站設計過程溝通與討論

如果是想要自架站，事情就變得簡單，所有網站樣式、風格、功能可以自己決定就好，只有多方查找資料，詢問專業人士或者報名實體課程，慢慢摸索發現問題並解決問題，雖然會花費不少時間與精力找尋正確的網站架設方法，但也不失為一條成功完成網站的道路。

當沒有那麼多時間可用於網站架設，想要找網站設計公司配合的時候，就需要雙方多次溝通與討論，比如剛剛第二點提到的那些問題，對於長期在專業領域的網頁設計師來說，會以較為豐富網站架設的經驗並以相似網站類型做為參照基礎，給予較佳的建議做法。

要知道網站也像蓋房子一樣，需要有藍圖規劃，設計公司必須要了解你喜愛的風格樣式，功能要求項目，才能夠更有效的讓網站符合標準與期待，因此雙方的溝通互動與細節討論，是非常重要的一件事情。

4. 網站維護與更新

在這一點上主要是想要分享一個網站建置完成後的小概念。有些人認為，網站放在網路上是虛擬且數據化的空間，架設完成後放著就好，不太需要花費時間去注意，但實際上，網站跟機器一樣，也是需要定期維護與保養。

大家都知道現在是互聯網時代，網路是生活不可或缺的一部分，但相對的問題也產生不少，破解網站竊取資料，將網站植入病毒偷取流量，這些麻煩也開始層出不窮，如果説網站只是被弄到無法開啟，那頂多就是一時的損失，如果説是網站內具有相當多的客戶資料遭竊取移做它用，嚴重的會甚至會有法律官司問題以及鉅額的賠償金。

因此一定要有網站必須要長期維護的概念，比如使用 WordPress 架站，主程式與外掛更新的相當頻繁，除了一些安全性漏洞的修補，也有解決 CMS 版本與主題及外掛間相容性的用意在，為確保網站能夠正常運作，不會出現版面及功能無法使用的問題，網站維護與更新還是非常必要的！

5. 網站上線後的使用者體驗

網站完成後，多數的人都會開始找一些流量數據分析工具來查看網站瀏覽狀況，那麼在獲得這些數據之後，可能會發現像是在行動裝置上使用者離開的機率很高，某篇文章平均觀看時間很短，商品介紹頁幾乎沒有人去點擊此類的問題，這樣的情形就是在告訴網站管理員：網站的使用者體驗不佳。

要知道會造成數據顯示結果的根源，是來自於網站的設計方式，重點永遠都要擺在使用者瀏覽網站的角度，而不在執著於數據的高低。這樣描述有點太理論，以上面的例子來說，行動裝置網頁進入後就直接離開，是不是手機版的網頁版型不正確？或者是網址設定錯誤顯示 404 找不到頁面的回應碼？文章大家看一下就離開，是不是字數太少或者文案內容不夠豐富？有沒有搭配圖影片來增加可看性？商品的介紹頁連結位置在網頁上會不會不夠明顯？是不是可以調整到較為熱門點擊的區域？

所以請記得，網站完成後不要忘記使用者體驗，讓網站持續改進與修正內容，才能有效提升網站流量。

延伸閱讀：

如何做好網站建置流程及在網站製作前制定網站架設計畫？

B2B 外銷網站 – 網站設計與規劃的五大面向

WordPress 架站兩種方式比較與分析，哪一種適合建立網站？

二、網站架設前可以先了解的小知識

6. 網站在不同瀏覽器的畫面差異

如果有比較常在逛網站，就會發現同一個網站在不同瀏覽器中顯示的畫面會不太一樣，總會有那麼一個小地方無法顯示或顯示錯誤，其主要的原因在於部分的程式語言在一些瀏覽器上並不支援，那為什麼會不支援？因為數據已經說明了部分原因，瀏覽器市佔率的問題。

自從 2008 年 Google Chrome 加入瀏覽器市場之後，使用者數量逐年遞增，到 2018 年的 10 月在台灣已經達到 76.91 的市佔率（由海外知名流量分析公司 StatCounter 網站統計的數據），全台灣有超過八成以上的人，都在使用 Chrome 來觀看網站。

因此不建議只以自己習慣的瀏覽器來觀看及調整網站畫面。假設因為種種因素只使用 IE 瀏覽器來判別網站畫面排版，但現在市面上絕大多數人都是使用 Chrome ，當發現畫面不一致時，之前做的都只讓 5.32 % 的使用者看到正常網站，而大多數的人觀看網站卻都是不正常的，對網站造訪率及跳出率會有一定程度的影響。

7. 網站多國語言建置原理

多國語言在網站中並不是單純將文字翻譯就好，而是每一種語言都是一個版本，並具有不同子網域的網址，比如説網站要建立繁體中文、英文、日文，假設網站總共有 10 個頁面，那麼就是要建立 30 個網頁，這還沒有計算到商品及文章等其他的內容。

因此要網站要加入多國語言前，必須要確認好網站的主要語言（避免語言切換問題），要建立多少語言（減少網站製作時間）以及語言文法特性（讓網站畫面盡量一致），下方有提供鵠崙設計客戶網站的多國語言切換影片，按照規劃流程製作，就不容易發生多語言網站問題。

生多語言網站問題。

影片製作來源：寶濟工業

8. 網站跨裝置顯示與功能設計

RWD 響應式設計主要解決的是畫面顯示問題，讓網站在不同裝置上以最合理的閱讀樣式呈現在使用者面前，下方分別是模擬電腦版與手機版的畫面，可以看到在電腦版上移動游標到連結及按鈕上時，會出現變色效果，而在手機版中則不會有任何改變。用這個範例所要表達的是網站在不同裝置上的操作方式不同，因此在功能效果上是不會達到百分之百完全一致。

9. 網頁元素動畫效果影響搜尋引擎索引

其實在網站中加入動畫，在使用者體驗上的確會為網站帶來加分的效果，但要注意的是 Google 在爬取網站內容時，對於以 JavaScripts 製作的內容，有無法識別的機率，因此在規劃網站時要注意到不要將讓主要連結或重要內容使用過多的動畫特效，導致搜尋引擎看不懂網站最主要的核心資訊，影響網站在搜尋結果中的排名。

下方是 Google I/O 年會上解釋如搜尋引擎如何處理 JavaScripts 連結的影片，有興趣的話可以觀看。

10. 讓網站出現在搜尋結果有必須遵循的規則

網站完成並不是放著等流量就好，如果是要自己做網路行銷，必須要了解 Google 爬取及索引網站及如何建立搜尋結果排名的規則，也就是常常聽到的 SEO 搜尋引擎網站排名優化，雖然說這是一們不容易的學問，但依舊可以從基本的設定做起。

比如為網站設定正確的搜尋結果標題、描述，找尋最多人搜尋的企業服務與產品的相關關鍵詞，壓縮圖片尺寸加快網站載入速度，避免網址錯誤等，有很多都是不需要太專業的知識也一樣可以優化網站的項目，因此不要再乾等網站瀏覽人數上升，做點什麼幫助網站更容易被搜尋到吧！

Google 搜尋基本概念：搜尋服務的運作方式