登入網店立即開店
  • 免費試用
  • 免費講座
  • 免費諮詢
電商教室
  • 功能特色
  • 平台收費
  • 客戶案例
  • 開店講座
  • 開店諮詢
  • 電商教室
  • 更多資源
    • 開店密技
    • 版型主題
    • 新手問答
    • 廣告計畫
登入網店立即開店
  • 免費試用開店
  • 免費開店講座
  • 免費專人諮詢

SHOPLINE
電商教室

Menu
  • 首頁
  • SHOPLINE 快訊
        • 最新網店功能
        • 專題討論
        • swiper9

          網上花市網上花店 2022
          January 1, 2023January 1, 2023
          【 網上花店香港 2023 】8 間線上花店推介 精選新春花卉巡禮!
          SHOPLINE 公布本地第四季暢銷產品清單 揭示最受港人歡迎的節日禮物選擇
          港人節日消費習慣節日旺季
          December 1, 2022December 1, 2022
          【新聞稿】SHOPLINE 公布本地第四季暢銷產品清單 揭示最受港人歡迎的節日禮物選擇
          申請科技券教學
          科技券
          November 18, 2022November 18, 2022
          【2023 申請科技券計劃教學】一文整合申請科技券資格、程序、文件
          SHOPLINE Payments 6 大功能及好處 blog cover
          AlipayHKSHOPLINE Payments
          November 11, 2022November 11, 2022
          SHOPLINE Payments 6 大功能及好處 助店家快速收款
          holiday season playbook 2022
          節日旺季節日行銷
          September 29, 2022September 29, 2022
          快人一步搶攻節日商機 《網店節日行銷攻略 2022》率先看
          SHOPLINE Octopus partnership hero image
          $10000消費券2022消費券
          May 10, 2022May 10, 2022
          【新聞稿】SHOPLINE 夥拍八達通增設收款方式 助商戶把握消費券商機
  • 熱門精選
        • selection

          Shopper App 幫你打造網店手機 App!附 6 大營銷功能及商戶成功例子
          Shopper App即時訊息廣播
          January 18, 2023January 18, 2023
          Shopper App 幫你打造網店手機 App!附 6 大營銷功能及商戶成功例子
          【新年禮盒】8 間賀年食品網店推介|足不出戶辦年貨
          年糕新年禮盒
          January 17, 2023January 17, 2023
          【新年禮盒 2023】8 間賀年食品網店推介|足不出戶辦年貨
          【策略分析】農曆新年網店銷量大跌?教你用 6 秒廣告 ,如何轉危為機、部署銷量回升?
          YouTube Bumper AdsYouTube 廣告
          January 12, 2023January 12, 2023
          【策略分析】農曆新年網店銷量大跌?教你用 6 秒廣告 ,如何轉危為機、部署銷量回升?
          App 開發 寫手機 App 價錢比較懶人包
          App 開發Shopper App
          January 12, 2023January 12, 2023
          【 開發App 】2023 寫 App 價錢、上架、手機 App 開發類型懶人包
          網上花市網上花店 2022
          January 1, 2023January 1, 2023
          【 網上花店香港 2023 】8 間線上花店推介 精選新春花卉巡禮!
          10 個重點教你選擇合適的網頁設計公司製作網站
          網站制作公司網站製作公司
          December 23, 2022December 23, 2022
          10 個重點教你選擇合適的網頁設計公司製作網站 | SHOPLINE 電商教室
          香港開網店教學 開網店流程、網店平台比較
          網店宣傳開網店
          December 5, 2022December 5, 2022
          【開網店教學 2023】開網店流程/網店平台比較/創業常見陷阱
          【2022 網上收款平台】一文了解各類Payment Gateway 申請程序、手續費
          Payment GatewaySHOPLINE Payments
          November 21, 2022November 21, 2022
          【2023 網上收款平台】一文了解各類 Payment Gateway 申請程序、手續費
  • 品牌故事
        • SHOPLINE 店家專訪
        • 成功案例分析
        • navNews

          6thfeb SHOPLINE IG LIVE case study hero image
          6thfebIG 直播
          August 4, 2022August 4, 2022
          6thfeb 如何使用 SHOPLINE IG LIVE 直播購物推進銷售?
          5 elements of successful digital transformation
          企業轉型創業例子
          November 16, 2021November 16, 2021
          數碼轉型 要「轉」甚麼? 5 大轉型策略助企業提升競爭力 附 創業例子
          【店家專訪】電影少女轉開文青網店 砍斷重練網店的 4 個原因
          Picnich文青穿搭
          October 7, 2021October 7, 2021
          【店家專訪】電影少女轉開 文青網店 砍斷重練網店的 4 個原因
          【店家專訪】從惜貨到識貨,與 AikoMall 踏上網購之路
          KOL開網店創業
          September 2, 2021September 2, 2021
          【網店店家專訪】從惜貨到識貨,與 AikoMall 踏上開網店之路
          智慧廣告系統一周年 Smart Ads System 1st Anniversary
          MartechSmart Ads System
          August 16, 2021August 16, 2021
          「智慧廣告系統 Smart Ads System」推出一週年,2 大廣告方案帶領店家創造廣告佳績!
          內容行銷成功案例
          March 31, 2021
          【 內容行銷 】出 Post 帖文點寫好? 成功案例──下午茶媽媽 3 個帖文撰寫貼士
  • 開店必讀
        • NEW

          Shopper App 幫你打造網店手機 App!附 6 大營銷功能及商戶成功例子
          Shopper App即時訊息廣播
          January 18, 2023January 18, 2023
          Shopper App 幫你打造網店手機 App!附 6 大營銷功能及商戶成功例子
          App 開發 寫手機 App 價錢比較懶人包
          App 開發Shopper App
          January 12, 2023January 12, 2023
          【 開發App 】2023 寫 App 價錢、上架、手機 App 開發類型懶人包
          10 個重點教你選擇合適的網頁設計公司製作網站
          網站制作公司網站製作公司
          December 23, 2022December 23, 2022
          10 個重點教你選擇合適的網頁設計公司製作網站 | SHOPLINE 電商教室
          香港開網店教學 開網店流程、網店平台比較
          網店宣傳開網店
          December 5, 2022December 5, 2022
          【開網店教學 2023】開網店流程/網店平台比較/創業常見陷阱
          【2022 網上收款平台】一文了解各類Payment Gateway 申請程序、手續費
          Payment GatewaySHOPLINE Payments
          November 21, 2022November 21, 2022
          【2023 網上收款平台】一文了解各類 Payment Gateway 申請程序、手續費
          SHOPLINE Payments 6 大功能及好處 blog cover
          AlipayHKSHOPLINE Payments
          November 11, 2022November 11, 2022
          SHOPLINE Payments 6 大功能及好處 助店家快速收款
          SHOPLINE WhatsApp Business API 功能一覽
          WhatsApp Business APIWhatsApp Business API 功能
          October 31, 2022October 31, 2022
          SHOPLINE WhatsApp Business API 功能一覽|提升訂單轉換率
          香港 WhatsApp Business API 教學|申請、收費全攻略
          WhatsAppWhatsApp Business
          October 26, 2022October 26, 2022
          WhatsApp Business API 2023 教學申請、收費全攻略
        • 開店須知
        • 店務營運
        • 顧客關係
        • 實體門市
  • 市場營銷
        • SEO 教學
        • 行銷技巧
        • 網店行銷技巧
        • 社交媒體趨勢
        • market

          【策略分析】農曆新年網店銷量大跌?教你用 6 秒廣告 ,如何轉危為機、部署銷量回升?
          YouTube Bumper AdsYouTube 廣告
          January 12, 2023January 12, 2023
          【策略分析】農曆新年網店銷量大跌?教你用 6 秒廣告 ,如何轉危為機、部署銷量回升?
          IG 增加粉絲 7 招教你如何快速增加 followers
          igIG follower 增加
          November 18, 2022November 18, 2022
          【 2023 IG 增加粉絲 】7 招教你如何快速增加 followers
          【Instagram 教學】IG 吸客爆單經營攻略、功能合集
          igIG 廣告
          November 1, 2022November 1, 2022
          【2023 Instagram 教學】IG 吸客爆單經營攻略、功能合集
          SHOPLINE WhatsApp Business API 功能一覽
          WhatsApp Business APIWhatsApp Business API 功能
          October 31, 2022October 31, 2022
          SHOPLINE WhatsApp Business API 功能一覽|提升訂單轉換率
          香港 WhatsApp Business API 教學|申請、收費全攻略
          WhatsAppWhatsApp Business
          October 26, 2022October 26, 2022
          WhatsApp Business API 2023 教學申請、收費全攻略
          holiday season playbook 2022
          節日旺季節日行銷
          September 29, 2022September 29, 2022
          快人一步搶攻節日商機 《網店節日行銷攻略 2022》率先看
  • 廣告教學專欄
    • Facebook 廣告
    • Google 廣告
    • 廣告案例分析
    Home 熱門精選 網店網頁設計教學 2023|5 分鐘掌握網站頁面製作技巧
網店網頁設計教學 網站頁面製作技巧

網店網頁設計教學 2023|5 分鐘掌握網站頁面製作技巧

網店網頁設計
網站版面設計
September 8, 2022
網店網頁設計教學 網站頁面製作技巧

網站頁面設計令人留下第一印象,好的網站設計就如穿上漂亮的衣服,令人印象深刻。今期 SHOPLINE 電商教室教你網站頁面製作技巧,由網店首頁編排到網頁設計元素,5 分鐘便掌握到設計網頁的精髓。

文章目錄

網店首頁編排設計|網店網頁設計元素|SHOPLINE 網店版面設計


網店首頁編排設計

網店首頁十分重要,大多數人在瀏覽網站時的視覺動線,是從上到下 、 左至右閱讀,而當中版面設計會涉及不同的部分:

Header

這部分通常在網頁的最上方,是訪客到訪網站時的主要視覺焦點區,你可以將最要的資訊放在這裡,例如:公司 Logo、標題、導覽列、站內搜尋引擎等,讓訪客用最短時間了解到公司資訊及產品。

Strong follow area

這是緊接着 Header 的下方,大多數訪客看完第一個區域後就會查看這個地方的資訊,你可以擺放一些突出品牌形象的圖片,或有關公司最新產品、資訊或優惠的橫額。

Content

這是在標題、導覽列、橫額的下方,是介紹網店產品的重要部分,通常包括產品名稱、圖片及價錢,多件產品分成數排,每排約 3 至 5 件產品,不建議太密集,工整及具空間感的設計讓訪客易於觀看。

Footer

最後是網站下方的 Footer,當訪客瀏覽完上面的產品後,想認識品牌更多的話,就會查看這裡的資訊,你可以擺放「關於我們」、「聯絡我們」等資訊,讓訪客加深認識公司創辦人及品牌理念,同時有需要亦可聯絡到你。

例如:Adidas 香港官網頁面最上方是公司 Logo、導覽列、站內搜尋引擎,然後緊接着下方是最新優惠的橫額,吸引人限時內購買,再下面便是網店熱門精選產品,每排約 5 件產品,並有產品名稱、圖片及價錢,最後網站下方有關於品牌更多的資訊及聯絡方法。

網店首頁編排設計

網店首頁編排設計

網店首頁編排設計

相關文章:【開網店教學】UI、UX 是什麼?即睇網頁設計如何直接影響網店轉換率!

【返回目錄】


網店網頁設計元素

標題

進入網站時,很多時第一眼看到的就是大標題,因此應盡量精簡,以最少的字,概括整個網站頁面的主題內容,瞬間吸引訪客的目光。不建議將所有與公司業務有關的字眼都放在標題內,這會影響訪客的瀏覽體驗,同時標題過長,搜索引擎不能夠完整收錄,對 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 首頁的橫額加入了顯眼的 「免費試用」按鈕,並以簡潔的設計,襯托出期望訪客會採取的行動,絕對有助提升網站點擊率和轉換率!

網店網頁設計元素 CTA

相關文章:開店流程五步曲,一學就上手!附香港 online shop 例子

【返回目錄】


SHOPLINE 網店版面設計

不想從零開始自己設計網站?其實大部分開店平台方案一般已包括網店版面設計,以 SHOPLINE 為例,網店架構均內置 RWD 設計,店主們不用另聘網站設計師,也能輕易採用 RWD 設計。此外,SHOPLINE 提供 29 個店面設計版型,讓店家能夠自行選擇各類風格,方案內已包括網店設計,無需額外購買。即使不懂得設計美術的店家,也能以「 Drag-and-Drop 」的拖曳方式,自由編排網頁物件,快速及輕鬆設計出簡潔好用的網店,更能配合不同商品類型,建立獨一無二的品牌形象!

SHOPLINE webpage design

根據 SHOPLINE《2022 香港開店白皮書》,商戶問卷調查反映,最多店家選用的設計主題是 Ultra Chic,同時這個主題為店家帶來不少生意,在高平均訂單量的設計主題排行榜中排第二位。而設計主題 Bianco 雖然並非店家的五甲心水,但高平均訂單量的設計主題排行榜中排首位。有興趣的店家歡迎到版型主題頁面,瀏覽更多商店版型。

SHOPLINE design
最多商戶選用排行榜

 

高平均訂單量排行榜

如果想進一步了解網店版面設計的資訊,歡迎預約專業開店顧問進行免費諮詢。SHOPLINE 亦有提供 14 天免費試用,讓你能夠親身體驗自己設計網店版面的便利和樂趣。

【返回目錄】

Related Posts

  • 【開網店教學】UI、UX 是什麼?即睇網頁設計如何直接影響網店轉換率!
  • 【網店改名秘笈】名字就能決定一切?12 個專家級改名要訣!
  • 【 開網店教學 】14 個開網店必須認識的術語、連同詳細介紹文章(持續更新)
  • 【 2023 香港開網店教學 】開網店流程、網店平台比較、網店創業陷阱合集
  • 【2023 開網店邊間好?】5 個問題教你選擇網購開店平台
  • 「零」成本開店創業有可能嗎?香港創業成本一覽
Elise Chu
Elise Chu
SHOPLINE HK 的 Content Marketing 團隊成員。喜歡在電商世界中尋寶,與大家分享所見所聞,相信遇見與錯過的事情都是緣份。

文章分類

熱門精選
開店必讀
開店須知

標籤

網店網頁設計
網站版面設計
網站製作
網站設計
網站設計教學
網站頁面
網站頁面設計
網頁製作
網頁製作教學
網頁設計
網頁設計教學
網頁設計網站
製作網站
製作網頁
設計網站
設計網頁

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

網店實戰工作坊

免費資源|網店行銷攻略

TAG CLOUD

廣告消費心理網上書展代購網店Google Core Algorithm Update 2020Google演算法品牌網店官網DTC 模式D-Biz 遙距營商計劃d-biz市場消息新零售Youtube 影片廣告PayMeForBusiness重量轉換率網紅行銷KOL熱門精選即時通訊客戶服務檢測品質驗證快速支付系統網絡潮流電商轉型網店數據GA電商稅務

關於 SHOPLINE

一站式網店平台,提供全面功能包括付款、物流等串接,另有多款版型選擇,沒有電腦背景的人都可以輕鬆建立自己的品牌網店,開拓自己的網絡創業夢。

免費試用開店 14 天

文章目錄

  • 網店首頁編排設計
    • Header
    • Strong follow area
    • Content
    • Footer
  • 網店網頁設計元素
    • 標題
    • 導覽列(Navigation Menu)
    • 圖片或影片
    • 資訊欄
    • 響應式網頁設計(RWD)
    • Call to action(CTA)
  • SHOPLINE 網店版面設計
    • Related Posts
  • 熱門文章
  • 編輯推薦
  • iOS 14 私隱政策 2021 更新:網店收入將受波及?即睇電商廣告應對策略!
  • SHOPLINE 串接 Facebook Shops 與 Instagram 購物功能 帶領 25 萬店家輕鬆進軍社交媒體電商
  • SHOPLINE 店家專訪 - 高質獨特腕錶 與 The Watchdrobe 細說每分每秒
  • 【SHOPLINE 店家專訪】從息微產品變成爆紅-趣香蝦子花生經典故事的啟示
  • 【SHOPLINE 店家專訪】有一種愛叫 Serco Store:充滿甜淡情懷的情侶創業故事
  • iOS 14 私隱政策 2021 更新:網店收入將受波及?即睇電商廣告應對策略!
  • Kingsman 全新版型!高彈性的網站設計,更換字體、自訂主顏色,打造你的人氣購物網站
  • 【SHOPLINE 2018 年回顧】 全球智慧開店平台助 15 萬品牌打造新藍圖,開啟全通路銷售
  • 時間就是金錢!SHOPLINE 順豐 自動化寄件 功能,節省時間,造就更多生意!
  • 【網店文字技巧】如果圖片是調味料,文字就是主菜!你有讓客人買不停手的文字技巧嗎?

追蹤 SHOPLINE

SHOPLINE
                   

全亞洲超過 500,000 個品牌
都在使用 SHOPLINE

讓更多人看見你的品牌,
愛上你的商店,購買你的產品

                   
免費試用開店 14 天

SHOPLINE

  • 關於我們
  • 認識團隊
  • 人才招募
  • 媒體報導

我要開店

  • 功能特色
  • 平台收費
  • 客戶案例
  • 開店講座
  • 開店諮詢
  • 企業旗艦方案

更多資源

  • 電商教室
  • 開店秘技
  • 版型主題
  • 新手問答
  • 廣告計劃
服務時間 星期一至五 上午 10 點至晚上 7 點
© Copyright 2013-22 SHOPLINE Limited.
  • 網站導覽
  • 文章轉載說明
  • 投稿流程說明
  • SHOPLINE
    • 關於我們
    • 認識團隊
    • 人才招募
    • 媒體報導
  • 我要開店
    • 功能特色
    • 平台收費
    • 客戶案例
    • 開店講座
    • 開店諮詢
    • 企業旗艦方案
  • 更多資源
    • 電商教室
    • 開店秘技
    • 版型主題
    • 新手問答
    • 廣告計劃
  • 網站導覽
  • 轉載說明
  • 投稿流程
服務時間 星期一至五 上午 10 點至晚上 7 點
© Copyright 2013-21 SHOPLINE Limited.

© Copyright 2013-23 SHOPLINE.
本網站內容未經許可不得任意轉載,欲引用或轉載網站內容,歡迎洽詢 academy+hk@shoplineapp.com