分類：網頁設計

根據 2020 年 Digital Report 統計的數據，全球網路用戶已高達 45.4 億，而這些網路使用者，平均每天會花 6 小時 43 分鐘在使用網路上，而這些可觀的數據還在不斷的攀升中。 從以上的數據，不難看出網路對現今這個時代的重要性，也因此對於業主來說，要選擇一個可以快速並且最廣泛地接觸到潛在使用者的媒介，絕對非架設一個網站莫屬，而對於許多剛起步的業主來說，基於預算的考量，往往會選擇免費的網頁設計網站，而在眾多的網頁設計網站中，要該如何選擇呢？ 免費網頁設計網站的好處 免費網頁設計網站的好處，當然就是免付費，對於剛起步的業主來說，在初期便省去了一大筆的預算消耗；此外，多數免付費的網頁設計網站，除了提供網頁設計的架設空間之外，也會額外附加許多的功能，像是既有的網域、伺服器、金流串接外掛等等，另外，多數的網頁設計網站在使用上，都非常的直觀，不需要學習太多負責的網頁設計程式，就可以輕易上手，這些優勢都幫助了許多網頁設計者免去了許多困擾，只需要建立一個帳號，便可以透過這些網頁設計網站，架設出一個像樣的網站。 免費網頁設計網站的風險 雖然免付費網頁設計網站有著很多的優勢，卻也存在一定的風險，舉裡來說，雖然很多免付費網站是標榜免費，但當使用者在後期需要越來越多的附加功能時，就需要透過付費的方式取得外掛程式；此外，免費網頁設計網站雖然提供了網域，但如果要設定專屬的網域名稱，也是需要額外付費的。 除了以上付費的問題外，免付費網站的高使用率，也造成了許多網頁設計的大同小異，因為都套用了同一個網頁設計網站的模板，在外觀上就沒有太多特色可言。 熱門網頁設計網站一：WordPress WordPress 可說是目前網路上最火紅的網頁設計網站，除了簡單易上手的使用介面，WordPress 上更有來自世界各地的使用者為其開發的網頁設計外掛程式，從電商必備的 WooCommerce、更方便網頁設計編輯的 Elementor Page Builder 到幫助建立多國語言網站的 WPML，各式各樣的外掛程式都讓 WordPress 逐漸成為網頁設計網站中的霸主。 熱門網頁設計網站二：Weebly                         Weebly 可說是在

在競爭激烈的網路世界中，華麗的網頁設計功能以及流暢的網頁設計使用體驗已不能滿足使用者的需求，網頁設計的視覺體驗對於使用者的影響比例已日益增加，在使用網頁時，不僅要滿足原先的搜尋需求，同時也必須符合感官上的饗宴；除此之外，一個視覺設計之於網頁，就好比一個人的穿著之於他人的第一印象，不同的穿著以及搭配，能帶給旁人不同的感受，網頁的視覺設計亦然，因此，在網頁設計的整體配色、Logo 搭配、素材使用上，都必須得體，才能讓使用者對於品牌有正面的回應。而在本文中，將提供數個執行網頁設計時，網頁設計者可以參考的網站，幫助在網頁設計的過程中，更能設計出讓使用者願意駐足久留的網站。 網頁設計參考 One Page Love 在最近的網路世界中，逐漸興起一股一頁式網站風潮，在過往，大部分的一頁式網頁設計多用於短期的活動上，而如今越來越多的電商業主，也傾向於選擇一頁式網頁設計，然而一頁式網頁設計最大的困難在於，需要在僅限的頁面中，將所有的訊息清楚傳遞，且有鮮明的記憶點，正因為如此，一頁式網頁設計在整體的設計構思上，會需要更多的巧思。在 One Page Love 中，提供了許多一頁式網頁設計版型的免費下載，幫助網頁設計者在執行一頁式網頁設計時，可以有更明確的方向並啟發更多的靈感。 awwwards awwwards 是一個知名的專業網頁設計評分平台，在 awwwards 有來自世界各地的專業網頁設計師們，對所有投稿的網頁設計作品進行評分，也因此，經由 awwwards 評分的網站，在參考價值上具有一定的可信度。而 awwwards 除了有過往的評分作品外，也有來自使用者對於實用網頁設計的教學與工具分享，對於網頁設計者來說，可說是一個極富參考價值與實用性的網頁設計資料庫來源。 Web Design Clip Web Design Clip 是日本一個集結了許多網頁設計作品的網站，裡面集結了非常多的種類，從行動版網頁設計到 Landing Page 網頁設計作品都有收錄，更特別的是 Web Design Clip 上可以依據所選的不同主色調、副色調、layout 去進行不同的搜尋，點擊網站縮圖即可進到網站進行瀏覽，Web Design Clip 在色調、排版上提供了網頁設計者非常多可運用的資源。 CSS  Drive CSS Drive 收錄了許多極具質感的網頁設計作品，並對每個網站進行分

身為網頁設計者或是想要執行網頁設計的業主，在執行網頁設計初期，一定都會有一個想法：我要做出一個美觀、吸引人目光的網站。的確，視覺體驗在網頁設計上佔了很大的一部分，但在這之外，網站是否提供一個使用者體驗友善的瀏覽方式、是否符合搜尋引擎優化 SEO 的標準，這些都是在網頁設計中不可忽略的部分，如何讓這每一環節相輔相成達到網頁設計效益最大化，還需仰賴網頁設計者在執行網頁設計時，從中取得一個平衡。 網頁設計重點一：瀏覽動線建立在視覺體驗上 在執行網頁設計時，明確的瀏覽動線是幫助使用者在瀏覽網頁時可以更快速找到內容的方式，但太平鋪直敘的瀏覽動線，在視覺體驗上卻也缺乏了一些新鮮感，因此在執行網頁設計的瀏覽動線時，可以運用文字與影音的搭配，增加內容的豐富度，同時也可以為原本枯燥乏為的內容，增加更多吸引人的地方提高使用者的瀏覽體驗品質並降低網頁的跳出率。詳細的網頁設計瀏覽動線設計可以參閱：2020 網頁設計大哉問，從排版開始抓住使用者的目光，增加網站停留時間。 網頁設計重點二：分享 icon 的輔助 當使用者在網路上看到有趣的內容或是吸引人的商品時，第一時間一定是會想分享給身邊的親朋好友，這時就需要仰賴分享標誌的幫助了，有了明確的分享按鈕，像是臉書、IG、部落格或是網誌複製的按鈕，使用者可以更快速的把網頁分享給別人，這對於網頁設計在搜尋引擎優化 SEO 上是一個很大的幫助，因為當網頁設計提高了使用者願意自主分享網頁的頻率時，就能有更高的機會讓搜尋引擎判定該網站的內容是實用且符合使用者需求的。 網頁設計重點三：響應式網頁設計 RWD 在這個多元裝置的時代，電腦已經不再是上網的唯一媒介，手機、平板、筆電、桌電等等，都能夠用來瀏覽網站，然而，這些顯示屏幕大小不一的裝置，所適合的網頁設計排版方式以及瀏覽動線也相差甚遠，這時就需要藉由響應式網頁設計 RWD 的幫助，讓使用不同瀏覽裝置的使用者，都能夠獲得最佳的使用者體驗，除此之外，響又是網頁設計 RWD 的使用，對於搜尋引擎優化 SEO 也有很大的幫助，更多響應式網頁設計 RWD 以及 搜尋引擎優化 SEO 可以參閱：輕鬆兩招，讓你的網頁設計更勝其他網站，成功攻佔搜尋引擎頁面排行榜。 網頁設計重點四：圖片替代文字優化 圖片搜尋已成了目前網路上逐漸被大家所重視的趨勢，當使用者在搜尋引擎上進行圖片時，有輸入相關替代文字的圖片將會有較高的機率顯示

大家都知道網站是在現今的網路世界中不可缺少的工具之一，也都了解網站架設的重要性，但在開始開始執行網站設計時，卻也難免遭遇不知道該如何開始的困境，然而放眼望去，網路上玲琅滿目的網站，總有一些蛛絲馬跡是可以運用在初始的網頁設計上的，本篇將整理出三種網頁設計者最常使用的網頁設計模板，幫助網頁設計者可以在初期進行網頁設計規劃時，可以有一個更明確的方向，創造一個兼具實用以及視覺體驗的網站，達到業主創建網站的目標。 網頁設計事前準備 在著手開始網頁設計之前，你需要先了解你的使用者，統計數據指出，有將近 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