網頁設計無從入手？今期 SHOPLINE 電商教室教你完整網頁設計技巧及製作流程，包括網店首頁編排、網頁設計元素等，更分享 6 個免費網頁設計及製作平台，讓你 5 分鐘便掌握到設計網頁的精髓。好的網頁設計就如穿上漂亮的衣服，令人留下深刻印象。
網頁設計合集：UI、UX 如何直接影響網店轉換率？｜5 分鐘輕鬆學會網站製作｜ 6個免費網站架設平台｜網頁設計公司價錢比較
文章目錄：網頁設計是什麼？｜6個免費網頁設計及製作平台｜如何自己建立網站？｜網店首頁編排設計｜網店網頁設計元素｜如何提升網站轉換率？｜SHOPLINE 網店版面設計
網頁設計是什麼？
網頁設計是創建網站外觀和使用者體驗的重要過程，目標是確保訪客能方便地瀏覽網站並找到所需資訊。設計網頁的過程需要選擇合適的平臺與設計工具，以達到最佳效果。
不同網頁設計平台的分別
各種網站建設平臺在功能和靈活性上有所不同。WordPress 提供強大的自訂功能和擴展性，而 Wix 和 Weebly 更適合初學者，因為它們具有簡單的拖放編輯功能。詳細比較可以參考 網頁設計平臺比較。
各大網頁設計平台的優勢
- WordPress：高靈活性，適合想要完全自訂網頁設計的使用者。
- Wix：拖放式編輯器，適合初學者或不具備程式設計技能的使用者，便於設計網頁。
- Weebly：簡單易用，適合需要快速建立網站的小型企業，用於設計網頁相當方便。
- SHOPLINE：提供一站式服務，包括網域、主機和設計工具，特別適合電商網站。
6個免費網頁設計及製作平台
- WordPress.com：易於使用的平台，提供多個網頁設計主題和自訂選項。
- Wix：具有拖放編輯器，提供各種網頁設計模板和外掛程式，適合初學者。
- Weebly：直觀工具和拖放功能，多種模板和擴展功能讓設計更簡單。
- Webnode：超過 4 千萬用戶選用，適合製作品牌網店或個人網站。
- Jimdo：簡單且直觀，擁有多種模板和友好的使用者界面。
- Yola：操作簡單但尚未支援中文網站設計
免費網站架設限制
- 廣告：免費網站服務通常會在您的網站上顯示廣告，並且您無法控制廣告內容。
- 域名：您可能會被要求使用免費網站服務提供的子域名，而不是自己的自訂域名。
- 儲存空間和頻寬：免費方案通常提供有限的儲存空間和頻寬，如果您的網站需要處理大量資料或高流量，可能會受到限制。
- 功能限制：免費網站服務可能會限制某些高級功能或外掛程式的使用，這可能會限制您對網站的自定義和擴充性。
SHOPLINE 的優勢
SHOPLINE 提供的網站建設服務非常全面，特別適合電商店主。其內置的響應式設計 (RWD) 使得店主無需額外設計不同裝置的網站版本，還有多種版型供選擇，並且可以通過「Drag-and-Drop」方式快速設計網頁。
如何自己建立網站？
1. 網域註冊
要建立網站，首先需要註冊一個網域，這是您的網站地址。您可以通過許多網域註冊平臺來購買網域，例如 GoDaddy 或 Namecheap。選擇一個符合您品牌的網域名稱至關重要。
2. 租用主機
網域註冊完成後，您還需要租用網站主機，這是存放您網站內容的伺服器。常見的主機提供商包括 Bluehost、SiteGround 和 HostGator。選擇穩定且可靠的主機服務，確保網站能持續在線。
3. 收費分別
不同網域註冊和主機服務的收費存在差異，一般而言，網域註冊一年大約需要 10-15 美元，而主機租用的費用則根據流量和服務內容有所不同。若選擇一站式服務提供商，如 SHOPLINE，則以上費用已包含在方案內，不需額外購買。
SHOPLINE 建立網站的方法
使用 SHOPLINE 建立網站非常簡單，只需遵循以下步驟：
- 註冊帳號：前往 SHOPLINE 官方網站，註冊並選擇合適的開店方案。
- 選擇店面設計版型：在平臺上瀏覽並選擇一個適合您品牌風格的版型來設計網頁。
- 自訂店面設計：使用「Drag-and-Drop」工具自訂頁面，您可以更改顏色、字體、圖片和商品佈局，完成設計網頁的過程。
- 設定付款與物流：設定可接受的付款方式和物流選項，確保您的顧客能夠順利下單購物。
- 發布網站：完成設計和設定後，點擊「發布」即可上線您的網站。
SHOPLINE 網頁設計的方法
- 進入設計模式：登入 SHOPLINE 帳號，選擇您的網站並點擊「設計」進入編輯模式。
- 自訂頁面佈局：選擇所需的頁面，例如首頁、產品頁面，並開始設計網頁佈局。
- 拖放元素：使用「Drag-and-Drop」功能將圖片、文字、按鈕等元素放置在合適的位置。
- 預覽和調整：隨時預覽您的設計效果，確保所有元素的顯示符合您的期望，達到最佳的設計網頁效果。
- 保存和發布：完成設計後，點擊「保存」並「發布」網站。
SHOPLINE 建立網站與其他網頁設計公司的分別
使用 SHOPLINE 建立網站相較於其他設計網頁公司有多項優勢：
- 成本效益：SHOPLINE 的方案包含網域、主機和設計工具，一次性付費比外判更具成本效益。
- 控制權：自行建立網站能保持對設計網頁的全程控制，能隨時進行修改和更新。
- 快速上線：SHOPLINE 提供的工具簡單易用，讓您能夠快速完成設計網頁並上線，而外判則可能需耗費更多時間進行溝通和修改。
SHOPLINE 設計網頁與其他網頁設計公司的分別
- 靈活性：使用 SHOPLINE 設計網頁時，您可以根據需要隨時修改頁面設計，而外判設計可能需要額外費用和更長的時間。
- 費用透明：SHOPLINE 的收費透明，您可以根據方案選擇合適的服務，而外判設計費用通常較高，且可能包含隱藏費用。
- 工具便捷：SHOPLINE 提供的「Drag-and-Drop」功能讓設計網頁變得簡單，而外判則需完全依賴設計師的技術能力。
網店首頁編排設計
網店首頁設計十分重要，大多數人在瀏覽網站時的視覺動線，是從上到下 、 左至右閱讀，而當中版面設計會涉及不同的部分：
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 團隊成員。喜歡在電商世界中尋寶，與大家分享所見所聞，相信遇見與錯過的事情都是緣份。