網頁設計無從入手？今期 SHOPLINE 電商教室教你完整網頁設計技巧及製作流程，包括網店首頁編排、網頁設計元素等，更分享 6 個免費網頁設計及製作平台，讓你 5 分鐘便掌握到設計網頁的精髓。好的網頁設計就如穿上漂亮的衣服，令人留下深刻印象。
6個免費網頁設計及製作平台｜網店首頁編排設計｜網店網頁設計元素｜如何提升網站轉換率？｜SHOPLINE 網店版面設計
6個免費網頁設計及製作平台
- WordPress.com：易於使用的平台，提供多個網頁設計主題和自訂選項。
- Wix：具有拖放編輯器，提供各種網頁設計模板和外掛程式，適合初學者。
- Weebly：直觀工具和拖放功能，多種模板和擴展功能讓設計更簡單。
- Webnode：超過 4 千萬用戶選用，適合製作品牌網店或個人網站。
- Jimdo：簡單且直觀，擁有多種模板和友好的使用者界面。
- Yola：操作簡單但尚未支援中文網站設計
免費網站架設限制
- 廣告：免費網站服務通常會在您的網站上顯示廣告，並且您無法控制廣告內容。
- 域名：您可能會被要求使用免費網站服務提供的子域名，而不是自己的自訂域名。
- 儲存空間和頻寬：免費方案通常提供有限的儲存空間和頻寬，如果您的網站需要處理大量資料或高流量，可能會受到限制。
- 功能限制：免費網站服務可能會限制某些高級功能或外掛程式的使用，這可能會限制您對網站的自定義和擴充性。
網店首頁編排設計
網店首頁設計十分重要，大多數人在瀏覽網站時的視覺動線，是從上到下 、 左至右閱讀，而當中版面設計會涉及不同的部分：
Header
這部分通常在網頁的最上方，是訪客到訪網站時的主要視覺焦點區，你可以將最要的資訊放在這裡，例如：公司 Logo、標題、導覽列、站內搜尋引擎等，讓訪客用最短時間了解到公司資訊及產品。
Strong follow area
這是緊接着 Header 的下方，大多數訪客看完第一個區域後就會查看這個地方的資訊，你可以擺放一些突出品牌形象的圖片，或有關公司最新產品、資訊或優惠的橫額。
Content
這是在標題、導覽列、橫額的下方，是介紹網店產品的重要部分，通常包括產品名稱、圖片及價錢，多件產品分成數排，每排約 3 至 5 件產品，不建議太密集，工整及具空間感的設計讓訪客易於觀看。
Footer
最後是網站下方的 Footer，當訪客瀏覽完上面的產品後，想認識品牌更多的話，就會查看這裡的資訊，你可以擺放「關於我們」、「聯絡我們」等資訊，讓訪客加深認識公司創辦人及品牌理念，同時有需要亦可聯絡到你。
例如：Adidas 香港官網頁面最上方是公司 Logo、導覽列、站內搜尋引擎，然後緊接着下方是最新優惠的橫額，吸引人限時內購買，再下面便是網店熱門精選產品，每排約 5 件產品，並有產品名稱、圖片及價錢，最後網站下方有關於品牌更多的資訊及聯絡方法。
網店網頁設計元素
網頁設計元素一：標題
進入網站時，很多時第一眼看到的就是大標題，因此應盡量精簡，以最少的字，概括整個網站頁面的主題內容，瞬間吸引訪客的目光。不建議將所有與公司業務有關的字眼都放在標題內，這會影響訪客的瀏覽體驗，同時標題過長，搜索引擎不能夠完整收錄，對 SEO 亦有影響。除了大標題，次標題亦十分重要，用以進一步解說你網店的商品或服務，最好能引起訪客的好奇，繼續看下去。
網頁設計元素二：導覽列（Navigation Menu）
導覽列（Navigation Menu）就好像地圖一樣，告訴訪客網店內主要產品及服務的分類位置，並帶領訪客遊走網店各頁面。因此在設計網站時，導覽列的架構、視覺與互動設計極需深思熟慮。大多數商戶設計以下三種架構：
- 將導覽列放在左側，讓訪客由左邊第一層導覽選項，再打開第二層導覽、甚或有第三層導覽。
- 第一層和第二層導覽選項都放在網頁上方
- 第一層的導覽在網頁上方，次要導覽和第三層導覽在左側（導覽列較少放在網頁右側，相信與大多數人喜歡由左至右來閱讀網頁資訊有關）
網頁設計元素三：圖片或影片
除了標題，圖片亦是吸引訪客的重要元素，最好清楚簡易地描繪到你品牌的特色，讓人一看就知道你所售賣的產品或服務。你可以配合品牌顏色或風格來加強網站的視覺效果，甚至進一步透過圖片引起訪客的興趣，讓他們點進去你的產品。
你亦可以在商品內頁擺放影片，例如售賣化妝品可以上載一些試妝影片，更具體地呈現出產品效果，還能加深訪客對網站的印象和興趣，有助提升網站轉換率。
例如：專售兒童教具的網店下午茶媽媽（Teateamama），首頁的畫面是有多個嬰孩兼色彩繽粉的繪畫，讓訪客還未看到產品及文字的時候，已經先從圖片了解到這網店是售賣與嬰幼兒有關的產品。
網頁設計元素四：資訊欄
如果訪客第一次造訪網店的話，對你品牌並不了解，要將他們由訪客變為你的顧客，便要增加一些關於你的資訊，一般常見資訊包括以下的分類：
- 公司資訊：關於我們、團隊介紹、門市位置
- 客戶服務：聯絡我們、公司的社交媒體連結，如 FB、IG等
- 條款及細則：送貨規則、退換貨及退款規則、會員細則
不妨將這些資訊擺放到每頁的最下方，讓有需要的訪客隨時都看到，以便進一步了解及聯絡你，促成購買的機率。
網頁設計元素五：響應式網頁設計（RWD）
SHOPLINE《2022 香港開店白皮書》數據顯示，使用智能電話下單購物的比率繼續超越電腦裝置（包括桌上型電腦及手提電腦），成為最熱門網購消費裝置，佔整體 58%。因應手機支付的趨勢，Google 現已全面執行 Mobile First Indexing 安排，強調網站的手機頁面將成網站排名位置的考量之一。
而透過 RWD 即 Responsive Web Design，中文是「響應式網頁設計」，商戶可以設計一次即可製作桌面、手機兩個版本的網店網站。萬一有任何修改或更新，也只需要改動一個設計，就能應用在不同裝置。RWD 的架構還能將網頁的文字、圖片，甚至是特殊效果，自動縮放成符合不同視窗尺寸的頁面。這個 Mobile Friendly （流動裝置友好）的設計，可以為消費者帶來更好瀏覽體驗，加長消費者停留時間，下單機會自然更大。
網頁設計元素六：Call to action（CTA）
網店的目的是想將每一個瀏覽者都變為你的客戶，因此除了有鮮明的標題、圖片之外，你還要設計一個明確的行動呼籲，即 Call to action（CTA），令瀏覽者採取「下一步」，令你獲取更多他們相關的資訊，深化與他們的關係，便更易獲得訂單。
常見的 CTA 包括：「立即加入會員」、「立即免費試用」、「立即訂閱品牌電郵」
例如：SHOPLINE 首頁的橫額加入了顯眼的 「免費試用」按鈕，並以簡潔的設計，襯托出期望訪客會採取的行動，絕對有助提升網站點擊率和轉換率！
如何提升網站轉換率？
使用 RWD 設計，確保你的網站在手機端的顯示效果良好，因應手機購物趨勢，Google 已全面推行 Mobile First Indexing，響應式設計將成為網站排名的重要因素之一。
SHOPLINE 網店版面設計
不想從零開始自己設計網頁？其實大部分開店平台方案一般已包括網店版面設計，以 SHOPLINE 為例，網店架構均內置 RWD 設計，店主們不用另聘網頁設計師，也能輕易採用 RWD 設計。此外，SHOPLINE 提供 29 個店面設計版型，讓店家能夠自行選擇各類風格，方案內已包括網店設計，無需額外購買。即使不懂得設計美術的店家，也能以「 Drag-and-Drop 」的拖曳方式，自由編排網頁物件，快速及輕鬆設計出簡潔好用的網店，更能配合不同商品類型，建立獨一無二的品牌形象！
根據 SHOPLINE《2022 香港開店白皮書》，商戶問卷調查反映，最多店家選用的設計主題是 Ultra Chic，同時這個主題為店家帶來不少生意，在高平均訂單量的設計主題排行榜中排第二位。而設計主題 Bianco 雖然並非店家的五甲心水，但高平均訂單量的設計主題排行榜中排首位。有興趣的店家歡迎到版型主題頁面，瀏覽更多商店版型。
如果想進一步了解網店版面設計的資訊，歡迎預約專業開店顧問進行免費諮詢。SHOPLINE 亦有提供 14 天免費試用，讓你能夠親身體驗自己設計網店版面的便利和樂趣。
SHOPLINE HK 的 Content Marketing 團隊成員。喜歡在電商世界中尋寶，與大家分享所見所聞，相信遇見與錯過的事情都是緣份。