分類：網頁設計

大家都知道網站是在現今的網路世界中不可缺少的工具之一，也都了解網站架設的重要性，但在開始開始執行網站設計時，卻也難免遭遇不知道該如何開始的困境，然而放眼望去，網路上玲琅滿目的網站，總有一些蛛絲馬跡是可以運用在初始的網頁設計上的，本篇將整理出三種網頁設計者最常使用的網頁設計模板，幫助網頁設計者可以在初期進行網頁設計規劃時，可以有一個更明確的方向，創造一個兼具實用以及視覺體驗的網站，達到業主創建網站的目標。 網頁設計事前準備 在著手開始網頁設計之前，你需要先了解你的使用者，統計數據指出，有將近 80% 的網路使用者在瀏覽網頁內容時，傾向於使用快速掃瞄的方式閱讀，利用最短的時間找出符合他們需求的內容，甚至是對他們有絕對吸引力的資訊，當得到這些資料後，才會促使他們願意進一步停留在網站上；此外根據調查，多數使用者在瀏覽網站時，只會瀏覽網站前半部的資訊，之後內容的瀏覽量則以倍數快速下降，也因此在網頁設計時，網頁內容的排版呈現，以及瀏覽動線，就成了網頁設計者在進行網頁設計時，第一個需要先考量到的重點。 網頁設計版型一：Z 型排版 圖片來源：每日頭條 Z 型排版是一種在網頁設計中常見的排版方式，所謂的 Z 型排版，是指使用 Z 型的閱讀模式，瀏覽動線從從左到右，從上到下，形成一個 Z 字型的瀏覽方式。Z 型排版的優勢在於，他的呈現方式簡單，幾乎可以適用於所有的網頁設計，而在使用 Z 型排版時，網頁設計者必須根據內容的重要程度去做排列，沿著 Z 字型的閱讀動線依序放上重要的內容，因此在使用 Z 型排版時，首先要定義的是各項資訊的輕重關係。 網頁設計版型二：古騰堡排列 古騰堡排列可以說是最簡單的網頁設計排版樣式，在過去，網頁瀏覽者的習慣與閱讀報章雜誌相同，習慣一行一行的進行閱讀，由上到下由左到右，也因此我們可以觀察到在報章雜誌上的標題、網站的 Logo 等重要的訊息，普遍都是放置在頁面最上方或是上方偏左的位置。一般來說，古騰堡排列會建議使用於多文字的網頁設計上。 網頁設計版型三：F 型排版 圖片來源：10種網站設計布局模式整理 F 型排版是目前最被廣泛使用的網頁設計佈局判定的依據，來自於追蹤使網野瀏覽者的閱讀動線，依據不同的顏色區隔出瀏覽者感興趣的內容分佈。由於現今網站的普及以及爆炸的資訊量，瀏覽者會快速進行掃描，搜尋感興趣的內容，而在這樣的觀察下，發現當瀏覽者在進行快速閱讀時，很少

在這個網路發達的時代，網頁已成為企業主、品牌或是經營個人形象的工作者接觸使用者最重要的渠道，根據數據指出全球每人每天平均上網時間將近約 7 小時，在這樣可觀的市場下，網頁設計便成了至關重要的關鍵，但究竟該自己進行網頁設計抑或是請專業的網頁設計公司，也成了一個令人頭大的問題。 網頁設計第一步：網域申請與購買虛擬主機 其實架設網站就好比建造一棟屬於自己的房子，首先你需要的是一塊地和一個地址，而地址就好比是網頁的網址；建地則是虛擬主機。 網域申請 網域就是常聽到的 Domain Name，如同地址一樣，是一個網際網路中的門牌號碼，舉例來說，在台灣最常見的網域大概就屬 .com 和 .com.tw 以及在教育機構會使用的 edu。決定好了網域之後接下來需要申請前面的網址，就像是地址中的路名和巷弄，一般在設定網址時，會建議使用簡單或是和品牌相關的字串，讓使用這可以更方便記憶，像是 https://www.google.com/ 或是 https://www.nike.com/。 購買虛擬主機 有了網域之後，接著就是需要購買虛擬主機，虛擬主機根據不同的特性、作業系統、所在位址等等，而有不同種的分類，詳請可參考：虛擬主機是什麼？該如何挑選？但由於在選擇虛擬主機和設定網域時，總會遇到一些設定上的問題，因此在執行這些前置作業時，建議可以尋求像是戰國策集團這樣的網頁設計服務公司，提供網域申請與虛擬主機租用、購買的相關服務，不僅可以解決許多技術上的問題，也可以免去許多後續不必要的麻煩。 網頁設計第二步：網站設計 在完成網頁設計的前置作業後，最重要的當然就是要對網站進行規劃，包括網站類型、網站的視覺設計、網站的內容、網站的瀏覽動線等等，這些都會影響網要設計最終的成效。 網站類型 不同類型的網站當然會有不同的需求，舉例來說，電商型網站，需要的是明確的價格、商品介紹、流暢的購物體驗；但如果是品牌型的網站，那就會需要更凸顯品牌特色，不論是在色彩或是風格上的呈現，都需和品牌相關聯；在資訊型的網站更需要的是正確的內容資訊，以及讓使用者易搜尋或是易閱讀的內容。 網站的視覺設計 網站的視覺設計可以從很多方面切入，像是色彩的使用、排版方式、網站的一致性、影音素材的輔助，這些都會影響到使用者在瀏覽網站時的視覺體驗。有時候過多的素材或是過於華麗、炫目的特效和色彩，反而會讓使用者一次接收到過多的訊息而失去耐心

在競爭激烈的網路市場中，如果網頁設計無法直接快速的抓住使用者的眼睛或是提供正確的內容，那就會造成使用者立即跳出網站，讓你的網站永遠石沉搜尋引擎的排名的汪洋大海。因此，如何創造出一個令人印象深刻兼具美觀與實用性的網站，便需仰賴專業的網頁設計團隊來操盤。 台北網頁設計公司推薦 提到台北網頁設計公司，就不得不推薦戰國策網頁設計，光是 24 小時客服專線和即時的線上聊天系統，就讓人覺得獲得了保障，畢竟網路的世界是 24 小時的，隨時都有可能出狀況，有了這樣即時不間斷的服務，就能更快速的應變網頁設計上發生的任何問題。 在戰國策網頁設計 20 年的經驗下，不僅累積了將近上萬個網頁設計經驗，更是許多大廠牌的合作對象，像是養樂多、寵愛之名、信義房屋、郭元益還有 illy，戰國策網頁設計合作的對象不僅橫跨各種產業，也遍佈中小企業和大型集團，此外，執行過的網頁設計類型也很多元，在這樣豐富的經驗下，也累積了許多客戶的好評。 此外，戰國策網頁設計除了提供網頁設計方面的相關服務，從最初期的網站架設所需要的網域申請、虛擬主機租用與購買、SSL 憑證申，到中期的金流設定、系統開發、SEO 優化、社群代操，以及後期的備份、售後服務等等，都有提供非常全面的服務，有了這樣一條龍的規劃，不僅可以免去同時需要和多家廠商溝通的困擾，也可以在多元的選擇中選出最符合需求的方案，不僅節省了時間與麻煩，也省去了不必要的資金投入。 網頁設計要點 當然，身為付錢的業主，對網頁設計也不能一問三不知，一定要有一定基礎的了解，才可以幫助在與網頁設計團隊溝通時可以更順利。 網頁設計要點一：了解自己的需求 在執行網頁設計前，首先你需要知道自己想要的是什麼，你是想要打造一個可以建立企業形象的品牌官網，又或者是你想要多一個可以讓消費者購買的渠道，也可能你是想要搭配某一次的行銷規劃，去製作一個活動網頁，擁有明確的需求都可以幫助網頁設計團隊在後續的執行上更順利。 網頁設計要點二：提供自己想要的風格 在和網頁設計團隊溝通前，可以先上網尋找一些自己喜歡的設計風格，像是想要以什麼樣的色彩呈現，或是想要什麼手繪風、可愛風、現代風等等的，同時，也可以在瀏覽其他網站時，去進一步的思考，有哪些功能是可以優話使用者體驗的，而哪些功能又是不必要又干擾使用者的，在這裡都可以進一步的截圖或是提供給往右設計團隊做參考。 網頁設計要點三：了解你的使用者 在執行

網頁設計究竟為何如此重要？網路無遠弗屆，不受到地理、時間限制，這樣的特性，讓網路成為了最容易接觸到消費者的管道，因此，現在從大中小型企業到轉型中的傳統產業，甚至是個人品牌，都在往架設網站的道路邁進，而在這個競爭激烈的市場中，便凸顯了網頁設計的重要性。優質的網頁設計，不僅可以提升品牌的形象，讓使用者留下深刻印象；當好的網頁設計讓消費者擁有了好的使用體驗後，也更能增加使用者轉單甚至是自主推廣品牌的機率。 網頁設計重點一：使用者體驗 當進入一個網站，沒有使用者希望看到的是不停加載中的畫面；也沒有人希望看到一個雜亂無章的畫面，因為這些都嚴重影響著使用者在瀏覽網頁時的使用者體驗，有了良好的使用者體驗，就可以增加使用者願意在網站上停留的時間，甚至是增加日後回訪的機率，而影響網頁使用者體驗的因素有以下幾種： 1. 網頁加載速度 會影響網頁加載速度的因素，有像是圖片檔案的大小、主機系統、網頁快取等等，因此在執行網頁設計時，建議在上傳圖片時，可以先進行圖片壓縮；選擇距離位置適當的虛擬主機，也可以善加利用 Google 的小工具 PageSpeed Insights，保持網頁加載速度的品質。針對虛擬主機的影響網頁速度的相關資訊，可以參閱：租用國外機房的主機因速度慢會影響貴公司網站在Google的SEO排名。 2. 網頁瀏覽動線 沒有規則可循的網頁瀏覽動線，容易讓使用者迷失在網頁中，而導致失去耐心或是找不到想要的資料而跳出網站，也因次清楚明瞭的網頁瀏覽動線便顯得重要。清楚的主選單位置、簡單明瞭的網站架構，都有助於提升網頁瀏覽動線的明確性。此外，在排版，建議乾淨俐落，不宜跳來跳去，以免使用者在瀏覽時，眼花撩亂，找不到合適的瀏覽方式。 3. 清楚明確的選單、CTA 以及搜尋欄 清楚明確的選單以及 CTA 可以讓使用者更快速找到自己所需要的內容，當找不到所需內容時，搜尋欄也能成為使用者強力的輔助。此外，針對重點內容，或者是使用者最常在網站上搜尋的資料，也可以利用字體大小、粗體或者是較鮮豔的顏色，讓使用者可以很快速地抓到重點，甚至是因為被吸引，而進行內容點擊。 4. RWD 響應式網頁設計 RWD 響應式網頁設計，是一種可以根據使用者使用的瀏覽裝置大小，而給予不同的呈現模式、排版的網頁設計方式，為的是因應現代人，擁有多元的瀏覽裝置，小至手機、平板，大至筆電、桌電，不同的大小如果都使用一樣的呈現

終於架好一個新的網站了，為了讓網站與FB的連動更加緊密，FaceBook特別出了 針對WP網站的超實用外掛，這次就來介紹這個外掛好用在哪！ Facebook for WooCommerce, 三大優點 不用手動更新粉絲團商店頁，網站上架後粉絲團即會自動上傳 廣告轉換自動更新、提交到FaceBook廣告管理員、廣告受眾洞察報告 串接Messanger在網站上，客戶隨傳隨收客服一把罩 安裝＆啟用教學 第一步：下載＆啟用外掛     第二步：執行啟用流程 點選WP後台左方選單，找到WooCommerce，選單中會有Facebook的選項，點擊後即可開始啟用流程 若無登入FaceBook，在這個步驟後會先跳出登入的頁面，請先登入具有粉絲專頁管理權的帳號，再進行之後的流程。 確認資訊沒問題，則點選continue到下一步驟，經過2個程序後就完成了，完成畫面如下 Facebook for WooCommerce, 三大優點設定教學 如何讓粉絲團商品頁與網站自動同步? 一樣在左方列表找到WooCommerce，選擇Facebook後，上排會出現三個不同的設定區域，選擇第二個Product sync 如果要調整單一商品怎麼辦呢？ 沒關係，這個外掛也有支援單一商品調整的功能，請看下圖教學，選擇需要單一調整的商品，將頁面往下拉會找到下圖的選項，點擊後即可單獨設定，可調整的項目有 1.是否要同步？ 2.商品的短說明  3.產品圖要與網站上相同還是客製？  4.在粉絲團上顯示的價格 如何讓Messenger顯示在網站上？ 在WooCommerce的Facebook設定頁面中，選擇第三個選項Messenger並開啟 開啟這個功能後，可以打開網站確認，此時網站頁面的左下方或右下方應會出現Messenger的圖示 廣告轉換自動更新提交到FaceBook廣告管理員 基本上外掛下載啟用並串聯好帳號後，pixel就會自動串連，要確認捕抓器有正常運作，並且更快速的管理FB pixel，可以到Chrome的擴充功能下載 FaceBook Pixel Helper！ 下載完後，記得點選Chrome右上方的齒輪，將Facebook Pixel Helper釘選在選單上，更能方便使用。再來就是確定是否有正常啟用了，請看下圖PageView顯示綠色即為正常運作。 什麼是Facebook Pi

網頁設計百百種，根據業主不同的需求、想要傳遞給使用者的內容、功能不同；又或者是不同產業別的網站、品牌定位，都會影響到網頁設計的方向。而網頁設計為什麼重要，不僅是因為網頁設計對於業主來說就好似一個品牌在網路上的形象，也因為擁有良好網頁設計的網站，在提供了使用者良好的使用以及視覺體驗之下，便能大大提升使用者的停留時間，為業主後續的轉換目標帶來更豐碩的成績。 網頁設計作品 對於剛開始要架設網站的業主而言，可以多參考各方的網頁設計作品或是網頁設計範例，從中挑選出自己喜歡的設計風格以及想呈現模式，再近一步與網頁設計公司討論，讓整體的網頁設計方向可以更明確，以下將根據不同設計風格以及網站目的，提供一些優秀的網頁設計作品給業主做參考。 企業網頁設計範例 Gogoro Gogoro 的官網首頁，會根據當下不同的主打商品科做不同的設計變換，整體設計風格走科技感的呈現手法、靜態以及動態的素材相輔想成的呈現，讓整體更豐富但程度拿捏得當。網站說明清楚，並使用明顯的 CTA 指引、輔助說明，不僅不會使用者感到眼花撩亂，反而更能清楚找到方向。 響應式網頁設計範例 Dropbox 相信講到 RWD 響應式網頁設計，Dropbox 絕對是一個會被提出來網頁設計範例，因為 Dropboox 在 RWD 響應式網頁設計，展現了強大的網頁設計能力。在 Dropbox 的桌機版官網以及行動版官網上，為了符合不同的使用者需求以及體驗，而分別以不同的設計手法呈現，使用者首先可以看到的差別，是在於會員註冊的欄位，為了不影響到行動版的使用者閱讀，因此會員註冊欄位只有在桌機版上才會出現；排版上在桌機版上是以圖片、文字平行呈現，到行動版中則是變成上下排列。 電商網頁設計範例 IKEA IKEA 網頁的風格，搭配其品牌 Logo，多以藍色、白色以及黃色為主要色彩，給人一種活潑、溫暖、親切的感受。在 IKEA 官網上，不僅各式活動資訊明確顯眼，整體排版以及設計乾淨利落，符合 IKEA 的品牌形象，也符合家居整齊乾淨的目標。在商品頁面部分，各商品的價格、尺寸、運費、庫存等等相關資訊，都標示清楚給使用者一目瞭然的感受。 服務型網頁設計範例 Hahow 好學校 Hahow 好學校是台灣知名的線上學習平台，Hahow 好學校在風格設計上是使用比較活潑色彩，素材方面也比較童趣，就好似真的回到學校一般，除此之外，在 Hahow 好

在競爭激烈的網路市場中，各家網頁設計公司為了殺出一條生路，不免祭出許多不同種的方案吸引有需求的業主前往諮詢。雖然這對擁有網頁設計需求的業主來說，多了許多不同的選擇，但要在這參差不齊的市場中，找到一家品質優良、服務到位的網頁設計公司，也是非常吃力的，因此，在戰國策 24 年的網頁設計經驗中，我們特別整理出來十大網頁設計公司健檢方法，提供給業主一個參考根據。 1. 網頁設計公司口碑評價 在網路世界當道的現代，鄉民的力量足以撼動一間公司的名譽，各家網頁設計公司的一舉一動，都被網路力量所關注著。因此當業主在選擇網頁設計公司時，可以先上網搜尋，不論是 Google 評價、PPT 或是一些專業介紹網頁設計的部落格等等，確保想了解的網頁設計公司過網的評價以及服務品質，藉由參考網友的評論，來為自己的選擇做把關。 2. 網頁設計公司發展歷程 網路世代流動是非常快速的，也因此許多網頁設計公司，往往會因為沒有辦法跟上網路的腳步而被淘汰，因此雖然年資並非絕對，但在挑選網頁設計公司時，依舊可以是個參考指標。此外，擁有較多年經營經驗的網頁設計公司，對於各種狀況的處理通常有較佳的經驗，成熟度等各方面也相對有保障。 3. 過往網頁設計作品 經驗豐富的網頁設計公司，是必會擁有許多過往網頁設計作品的累積，業主在挑選網頁設計公司時，可以先前往各網頁設計公司的官網上瀏覽過去的作品集，除了可以參考此網頁設計公司針對其他與業主相似產業的設計方式是否符合期待，也可以從網頁設計公司的作品量、風格、執行過的網頁類別，去對網頁設計公司做更全方面的評估。 4. 網站設計流程是否完善  在執行網頁設計時，從一開始的洽詢、理解需求、方案挑選、細節規劃到後續的細節執行，需要透過一連串的設計流程，每一個細節都需要經過完善規劃，才可以把網頁建立在一個完善的基礎上，因此在與網頁設計公司做溝通時，可以用整體的流程是否完善且流暢，去做為一個網頁設計公司專業度是否足夠的衡量標準。 5. 整體規劃是否完整可行 根據不同的需求以及網站類型，會有不同的網站架構、經營模式甚至是適合的方案，因此當網頁設計公司提出報價單以及規劃書時，業主應該要先確認這樣的規劃是否符合自身需求，對於網站的規劃、附加功能、虛擬主機選擇等等，是否真的是在所需範圍，也符合業主自己設定的網站架構。 另外，也要注意，有些網頁設計公司會為了壓低價格，提出一些看似豐富，卻華而不