分類：網頁設計

你是否曾經思考過，在數以萬計的網站中，究竟為什麼有些網站可以一直屹立在搜尋引擎頁面的前三名；究竟為什麼同樣的網站，別人的網站可以有極低的跳出率？其實這些都攸關於網頁設計的元素以及搜尋引擎優化 SEO 的運用，而這兩者的最大共同點在於如何提升使用者體驗的品質。搜尋引擎優化 SEO 是許多網頁設計者都在意的，網路上也有許多相關的資訊可以查閱，詳細可參閱：搜尋引擎優化怎麼做？五個小技巧讓你現學現賣！而本篇重點將著重於，網頁設計中，應該注意哪些元素，才可以提高網頁設計在使用者體驗上的瀏覽品質。 網頁設計重點一：大小標題的運用 如果想要在三秒鐘內抓住一個使用者的目光，你會怎麼做？其實很簡單，你只需要一個間單明兩的標題，用最簡短的文字，明確的告訴使用者你這個網站的內容，在這短短的幾個字內，如果你可以成功吸引使用者的興趣，那麼就能大大的提升使用者進一步閱讀的意願。 第一部抓住了使用這的目光後，接著便需要藉由副標或是摘要內容的提供，給使用者更多的相關資訊，並同時激起使用者願意展開內容詳細閱讀的意願，一般來說，我們在大標上的使用，會吸閃用比較聳動的言詞或是問句，激起使用者的興趣，接著在副標、摘要中做簡單初步的說明，一步一步引導使用者到內容中進行瀏覽。 網頁設計重點二：淺顯易懂的 CTA 對於一個擁有豐富內容的網站來說，明確的 CTA 可以幫助使用者在閱讀上有更明確的方向，像是部落格中的閱讀更多、回到上一頁；電商網站中的加入購物車、結帳等等的，有了這些明確的 CTA，可以更快速的將使用者倒指引導下一個流程中，並不會在中間因為迷失而跳出網站。 網頁設計重點三：清楚的閱讀動線以及導覽 越來越多的網頁設計開始在使用者進入網站時就提供一個簡單的網站導覽，為的是幫助使用者可以更快速的認識網站並了解如何使用網站並在網站中尋找到自己縮需要的相關訊息。在看完簡單的網頁設計導覽後，接著就需要結合流暢的閱讀動線讓使用者在瀏覽網站時，不會因為雜亂無章的排版，以至於找不到相關的訊息或是在眾多的內容中迷了路，更多網頁設計排版以及瀏覽動線資訊，可以參閱：2020 網頁設計大哉問，從排版開始抓住使用者的目光，增加網站停留時間。 網頁設計重點四：明確的類別分類 在各大知名網站中，都可以在網站的上方或是左右兩側看到明確的分類欄，或是可以收合的漢堡式選單，這些分類設置的目的，就是為了讓使用者可以更快速的在網站的眾多內容

根據社群媒體管理平台 Hootsuite 和數位行銷公司 We Are Social 的一份全球統計報告指出，目前世界各國每人每日平均上網時間為 6 小時 42 分鐘，相當於每個人一天有四分之一的時間都在上網。在這可觀的數字下，越來越多的企業開始重視網路的重要性並決定投入相對的預算到網頁設計中，為的就是在網路世界裡可以有一席之地。 然而，要執行網頁設計是一件需要長久經營的事，除了一開始在網頁設計上的規劃以及視覺美觀之外，後續的內容維護以及搜尋引擎優化 SEO 以及使用者體驗優化等等都需要耗費相當的時間以及預算，因此許多業主選擇放棄自己執行網頁設計，轉而尋求專業網頁設計團隊的協助。然而網路上充斥著各式各樣的網頁設計公司，各家的報價以及方案各不相同，到底應該如何挑選一個適合自己的網頁設計公司呢？ 網頁設計步驟一：了解自身需求以及喜好 在投入網頁設計之前，首先需要先對自身的需求以及需要達到的目的有明確的認知，為什麼要建立這個網站？你希望使用者在你的網站上可以獲得哪些內容或是有什麼樣的轉換效果？你希望這個網站可以幫助你的品牌做些什麼？還有你希望在網頁設計中可以有哪些相對應的功能來滿足你的需求？這些都是在初期執行網頁設計時需要確立的！如果在一開始沒有明確的方向，可以多參考網路上知名的網站，從中獲取靈感，同時也可以作為後續網頁設計的參考依據，更多資訊可以參考：網頁設計一把罩，深入解析多個網頁設計作品，教你打造出最專業的網站 網頁設計步驟二：確立網站類別 網頁設計有很多不同的類別，舉例來說以下列舉幾個常見的項目： 提供使用者內容閱讀的部落格 給使用者購物的電商平台 介紹品牌理念以及服務內容的企業網站 以提供服務為主的系統網站像是訂房平台 不同的網頁設計類別，在後續的網頁設計規劃上，都會有不同的方向，在內容的呈現上也不會相同，甚至連後端的技術以及程式開發都相差甚遠，因此在執行網頁設計之前，一定要先釐清網頁設計的類別。 網頁設計步驟三：決定預算 預算可說是網頁設計中非常重要的一環，不同的預算配置在網頁設計中可以獲得不同的功能以及不同的設計方式，所以在尋求專業的網頁設計團隊之前，應該先把自己預計可以投入的預算規劃出來，這樣才能幫助網頁設計團隊在後續的規劃上，為你制訂出一個，最符合你預算又能達到你需求的網頁設計方案。 網頁設計步驟四：挑選網頁設計團隊 有了上述三個對網頁設計的基本認知後

根據 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/。 購買虛擬主機 有了網域之後，接著就是需要購買虛擬主機，虛擬主機根據不同的特性、作業系統、所在位址等等，而有不同種的分類，詳請可參考：虛擬主機是什麼？該如何挑選？但由於在選擇虛擬主機和設定網域時，總會遇到一些設定上的問題，因此在執行這些前置作業時，建議可以尋求像是戰國策集團這樣的網頁設計服務公司，提供網域申請與虛擬主機租用、購買的相關服務，不僅可以解決許多技術上的問題，也可以免去許多後續不必要的麻煩。 網頁設計第二步：網站設計 在完成網頁設計的前置作業後，最重要的當然就是要對網站進行規劃，包括網站類型、網站的視覺設計、網站的內容、網站的瀏覽動線等等，這些都會影響網要設計最終的成效。 網站類型 不同類型的網站當然會有不同的需求，舉例來說，電商型網站，需要的是明確的價格、商品介紹、流暢的購物體驗；但如果是品牌型的網站，那就會需要更凸顯品牌特色，不論是在色彩或是風格上的呈現，都需和品牌相關聯；在資訊型的網站更需要的是正確的內容資訊，以及讓使用者易搜尋或是易閱讀的內容。 網站的視覺設計 網站的視覺設計可以從很多方面切入，像是色彩的使用、排版方式、網站的一致性、影音素材的輔助，這些都會影響到使用者在瀏覽網站時的視覺體驗。有時候過多的素材或是過於華麗、炫目的特效和色彩，反而會讓使用者一次接收到過多的訊息而失去耐心

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

💡 快速答案:Facebook for WooCommerce 有什麼用? 三大功能:商品目錄自動同步到 FB/IG 商店(免手動上架)、Meta 像素自動佈署(再行銷與轉換追蹤)、貼文直接標記商品。電商標配 — 安裝後 IG 貼文可直接點商品購買,廣告也能跑動態再行銷(DPA),找回看過商品沒買的人。 終於架好一個新的網站了，為了讓網站與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就會自動串連，要確認捕抓器有正常運作，並且更快速的管