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

SHOPLINE
電商教室

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

          SHOPLINE Octopus partnership hero image
          $10000消費券2022消費券
          May 10, 2022May 10, 2022
          【新聞稿】SHOPLINE 夥拍八達通增設收款方式 助商戶把握消費券商機
          【 12 星座創業圖鑑】金牛座 店主三個不聽人勸的情況
          12星座12星座創業
          May 6, 2022May 6, 2022
          【 12 星座創業圖鑑】金牛座 店主三個唔聽人講嘅情況
          SHOPLINE Whitepaper 2022 香港開店白皮書 press release hero image
          2021 年熱門網店產業2022 香港開店白皮書
          April 28, 2022April 28, 2022
          【新聞稿】SHOPLINE 發布《2022 香港開店白皮書》揭示 2021 年港電商發展
          $5000 消費券 9 個中伏位及商戶貼士 Blog
          2022消費券Alipay
          March 29, 2022March 29, 2022
          $10000 消費券 4月開始派發,9 個「中伏位」及網店商戶貼士注意!
          SHOPLINE 電子消費券,$5000 點樣用?
          $10000消費券2022消費券
          March 16, 2022March 16, 2022
          【 $10,000 消費券 】3 個生意銷售策略,穩過「疫」境+迎接商機!
          AlipayHKSHOPLINE 抗疫優惠
          March 14, 2022March 14, 2022
          SHOPLINE 推高達 400 萬港元「 抗疫 x 消費券資助計劃」補助商戶同心抗疫
  • 熱門精選
        • selection

          6thfeb SHOPLINE IG LIVE case study hero image
          6thfebIG 直播
          August 4, 2022August 4, 2022
          6thfeb 如何使用 SHOPLINE IG LIVE 直播購物推進銷售?
          6 steps for renting shops 開舖租舖流程 6 大注意事項
          商場舖樓上舖
          July 29, 2022July 29, 2022
          【開舖前準備】2022 開舖租舖流程 6 大注意事項
          PayMe for Business 商用版教學2022:一文看申請流程/手續費/收款退款
          PayMePayMe for Business
          July 22, 2022July 22, 2022
          PayMe for Business 商用版教學2022:一文看申請流程/手續費/收款退款
          five steps to start online shop 香港 blog cover image 開店流程
          online shoponline shop 香港
          July 15, 2022July 15, 2022
          開店流程五步曲,一學就上手!附香港 online shop 例子
          zero cost start online business hero image 零成本開店創業 香港創業成本
          0成本創業存貨費用
          July 7, 2022July 7, 2022
          「零」成本開店創業有可能嗎?香港創業成本一覽
          【 12 星座創業圖鑑】巨蟹座創業自救指南
          12星座12星座創業
          June 29, 2022June 29, 2022
          【 12 星座創業圖鑑】巨蟹座創業自救指南 如何走出 Comfort Zone?
          is online shop need Business Registration cover image 商業登記證
          BRBusiness Registration Certificate
          June 28, 2022June 28, 2022
          開網店 / IG Shop 需要申請 商業登記證 ( BR ) 嗎?附申請流程教學
          【開網店教學】 KOC 、 KOL 是甚麼? 社交媒體行銷的 3 個小技巧!
          Digital MarketingKOC
          June 27, 2022June 27, 2022
          【開網店教學】 KOC 、 KOL 是甚麼? 善用影響力帶動訂單的3 個小技巧!
  • 品牌故事
        • 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

          6 steps for renting shops 開舖租舖流程 6 大注意事項
          商場舖樓上舖
          July 29, 2022July 29, 2022
          【開舖前準備】2022 開舖租舖流程 6 大注意事項
          PayMe for Business 商用版教學2022:一文看申請流程/手續費/收款退款
          PayMePayMe for Business
          July 22, 2022July 22, 2022
          PayMe for Business 商用版教學2022:一文看申請流程/手續費/收款退款
          five steps to start online shop 香港 blog cover image 開店流程
          online shoponline shop 香港
          July 15, 2022July 15, 2022
          開店流程五步曲,一學就上手!附香港 online shop 例子
          zero cost start online business hero image 零成本開店創業 香港創業成本
          0成本創業存貨費用
          July 7, 2022July 7, 2022
          「零」成本開店創業有可能嗎?香港創業成本一覽
          【 12 星座創業圖鑑】巨蟹座創業自救指南
          12星座12星座創業
          June 29, 2022June 29, 2022
          【 12 星座創業圖鑑】巨蟹座創業自救指南 如何走出 Comfort Zone?
          is online shop need Business Registration cover image 商業登記證
          BRBusiness Registration Certificate
          June 28, 2022June 28, 2022
          開網店 / IG Shop 需要申請 商業登記證 ( BR ) 嗎?附申請流程教學
          【開網店教學】 KOC 、 KOL 是甚麼? 社交媒體行銷的 3 個小技巧!
          Digital MarketingKOC
          June 27, 2022June 27, 2022
          【開網店教學】 KOC 、 KOL 是甚麼? 善用影響力帶動訂單的3 個小技巧!
          消費券 開網店 3 ways to earn consumption voucher orders blog cover
          $10000消費券10000元消費券
          June 20, 2022June 20, 2022
          仍單靠減價吸客?3 招教你贏取最多 消費券 訂單!
        • 開店須知
        • 店務營運
        • 顧客關係
        • 實體門市
  • 市場營銷
        • SEO 教學
        • 行銷技巧
        • 網店行銷技巧
        • 社交媒體趨勢
        • market

          6thfeb SHOPLINE IG LIVE case study hero image
          6thfebIG 直播
          August 4, 2022August 4, 2022
          6thfeb 如何使用 SHOPLINE IG LIVE 直播購物推進銷售?
          PayMe for Business 商用版教學2022:一文看申請流程/手續費/收款退款
          PayMePayMe for Business
          July 22, 2022July 22, 2022
          PayMe for Business 商用版教學2022:一文看申請流程/手續費/收款退款
          five steps to start online shop 香港 blog cover image 開店流程
          online shoponline shop 香港
          July 15, 2022July 15, 2022
          開店流程五步曲,一學就上手!附香港 online shop 例子
          【 12 星座創業圖鑑】巨蟹座創業自救指南
          12星座12星座創業
          June 29, 2022June 29, 2022
          【 12 星座創業圖鑑】巨蟹座創業自救指南 如何走出 Comfort Zone?
          【開網店教學】 KOC 、 KOL 是甚麼? 社交媒體行銷的 3 個小技巧!
          Digital MarketingKOC
          June 27, 2022June 27, 2022
          【開網店教學】 KOC 、 KOL 是甚麼? 善用影響力帶動訂單的3 個小技巧!
          消費券 開網店 3 ways to earn consumption voucher orders blog cover
          $10000消費券10000元消費券
          June 20, 2022June 20, 2022
          仍單靠減價吸客?3 招教你贏取最多 消費券 訂單!
  • 廣告教學專欄
    • Facebook 廣告
    • Google 廣告
    • 廣告案例分析
    Home 熱門精選 留住你的顧客,從網店的第一印象開始! 如何用排版抓住顧客的眼睛

留住你的顧客,從網店的第一印象開始! 如何用排版抓住顧客的眼睛

網店網頁設計
September 17, 2015

美國策略專家Roger Ailes說:「7秒鐘」便決定了您在別人眼中的形象。網站首頁視覺設計的第一眼印象有多重要呢?研究指出人們花不到0.1秒便會決定逛不逛網頁。

我們常會在超級市場、大型商場、百貨公司等地方購物,而網路發達的現在,只要你能用電腦或手機點開網站也就能達到同樣效果。實體商店充滿玄機,從商品的擺設到動線的設計,都埋藏了許多巧思,讓你商品一件一件的放入購物車內,當然,網路商店也不例外。看完這篇文章之後,即使你沒有任何經驗,也能讓你第一次開網店就上手。

好的視覺設計能吸引使用者的目光,並傳達品牌概念。藉由視覺設計,網路店家才能建立訪客對網路商店「店面」的第一印象、進而引發起消費意慾。網頁在消費者眼中,甚至不用7秒鐘,就能決定對網站品牌的印象與好感度。

那麼先請你思考一下,你所經營的網站品牌或商品的定位是什麼?當消費者點開網頁時,你希望帶給他的第一印象是?以及你希望給消費者的印象與消費者實際上的第一印象會否有落差?


在您想到答案之前,我們先來了解網路使用者的習慣,也就是我們人的習慣。

北美最大的整合數碼營銷公司Mediative於今年發表最新研究,過去我們常說網路使用者的視覺熱點集中在左上角三角形區域,稱之為「黃金三角」定律,而現在視覺熱點不再集中於頁面左上角三角形區域,而是在左側一路向下拉成一條直線。

了解使用者的閱讀網頁習慣,有助你的網店排版

(圖片來源:Mediative)

一般而言使用者花了近七成的時間在讀取左邊的網頁內容,這跟我們一般的閱讀習慣有很大的關係。另外Nielsen Norman Group公司,也作出了針對200多名網路用戶進行了瀏覽數千個網頁的網頁可讀性的研究分析,總結出了 F 型版式設計在實際運用中具重要意義:

  • 使用者很少會將所有內容都看完,尤其是文字。(事實上,平均來講他們只會看其中 20% 的文字內容)
  • 最左上兩部分是最為重要的,它決定了用戶是否會繼續完整觀看網頁

F型排版:更有效的網店設計

(圖片來源:Brandon Jones)


 

現在大致瞭解了人們的網絡使用習慣,那我們應該如何針對人的習慣去設計自己的網站呢?以下幫你整理出幾個設計整體網站和排版的概念建議。

1. 快速呈現和簡約的設計

簡潔快速的設計應該是讓人能夠快速順暢的打開網頁,並能愉悅地開始欣賞裡面的內容,而不是等半天只顯示了一部分內容,或者卻花了好些時間顯示出內容後,使用者才發現這網站根本沒有我想看的東西,在他繼續看下去前,返回上一頁應該是他比較想做的事。(推薦範例:Google Material Design)

2. 清晰明確網站頁面

初次見到某個事物時,人通常會想到的第一個問題是,這是什麼?同一道理,在進入網站時,使用者首先會想:這個網站有什麼用?這網站是在做什麼?是否有在此停留的必要?還有是否能簡單找到我想知道的資訊?

因此,設計網頁就應避免使用大量文字或圖文不符的表達去作為網站的第一頁,尤其是一個購物網站應該是一進入網站就能清楚,它賣的是什麼、如何購買商品跟如何獲得想要的資訊。(參考:如何善用”呼籲行動”增加銷售量)

3. 突出的視覺效果

研究表明,96%的人訪問網站時會首先關注視覺設計,只有6%的人會先注意到網站內容。而第一印象可持續數年,視覺感受比使用者體驗更容易在第一時間形成。

什麼東西是你想要第一眼就讓顧客知道的?要如何凸顯它?是用大張的圖?是用大小、顏色的對比來凸顯它的重要性?或是善用適當的留白效果讓網頁看起來舒服、利用流暢度來引導使用者並吸引其注意力?

4. 層次明確的擺放方式

在網頁中,元素越大越重要。大,通常是最直接、簡單抓住目光的方式,所以,在設計網頁時,應把網頁中最重要的元素設計得最大,其餘元素再用不同大小等級作出明確的層次。(推薦範例:Apple官網)

5. 圖片與商品內容須高度相關

「圖」和「關鍵字」是使用者在網站會快速瀏覽的重點,通常使用者會透過圖去判斷內容,因此,圖像必須和你的網站密切相關。圖像並非只是「吸引使用者的眼睛」而已,在選擇圖像時,應該要思考圖像傳達給使用者的信息是什麼?減少圖文不符的內容,或是減少過於沒意義、喧賓奪主的花俏設計。

延伸閱讀:
1. 網頁設計的 7 大趨勢:從向量圖到組件標準化,設計師你 Get 了嗎?
2. 這個設計好在哪?設計人一定要答對的55個問題 (實體書)


結論

在網路時代,當各產業紛紛進入網路經濟時,要如何在此競爭激烈的競賽中脫穎而出,你的品牌官網設計是否能一眼就吸引到你的目標消費者或是潛在消費者,成功的官網設計成了營銷致勝的關鍵主因之一。除了排版之外,還有色彩、圖片、網站架構流程設計的使用者體驗等,也都是其中一環,未來我們會繼續在部落格中做經驗分享。

延伸閱讀:好的使用者體驗決定留下多少顧客!3步驟建構網站也能自己來

Shopline提供了響應式網頁設計(Responsive Web Design,RWD)的網頁技術,以及多樣設計主題,自由搭配版型,讓您同時完成電腦和行動裝置的品牌官網。未來也將會提供更多的設計主題和設計方式讓您使用,設計品牌官網就是現在,你還在等什麼?立即開店!

(圖片來源:dave_see)

香港免費電話諮詢

Related Posts

  • 用有效的線上客服,讓顧客再也不想離開你的網店!
  • 培養忠實網店粉絲的重要性
  • 好的使用者體驗決定留下多少網店顧客!3步驟建構網站也能自己來
Justin Chiang
Justin Chiang
Shopline 客戶規劃顧問(TW) 專長資訊管理、統計分析,追求具有藝術感和美好的事物,興趣是電腦美術、攝影、電影欣賞和旅行。看好台灣的電商市場發展,期望培養台灣的企業轉型,提升企業的品牌形象和價值。

文章分類

熱門精選
網店行銷技巧

標籤

網店網頁設計

One thought on “留住你的顧客,從網店的第一印象開始! 如何用排版抓住顧客的眼睛”

  1. Pingback: 5項網站關鍵 決定你的顧客購買意願|Shopline 電商教室

Leave a Reply Cancel reply

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

網店實戰工作坊

免費資源|網店行銷攻略

TAG CLOUD

使用者介面網店新手教學電商iPhoneApple消費券用途AI 廣告投放Google 廣告消費券限期Smart Ads System轉型八達通 失效網店數據八達通 消費券 申請GA使用者體驗八達通 報失轉換率行銷術語跨境海外SEM海外市場廣告術語網店轉換率提升轉換率網頁設計模板網頁設計師網站設計網店模板八達通買iPhone

關於 SHOPLINE

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

免費試用開店 14 天

文章目錄

    • 在您想到答案之前,我們先來了解網路使用者的習慣,也就是我們人的習慣。
    • 現在大致瞭解了人們的網絡使用習慣,那我們應該如何針對人的習慣去設計自己的網站呢?以下幫你整理出幾個設計整體網站和排版的概念建議。
    • 結論
      • Shopline提供了響應式網頁設計(Responsive Web Design,RWD)的網頁技術,以及多樣設計主題,自由搭配版型,讓您同時完成電腦和行動裝置的品牌官網。未來也將會提供更多的設計主題和設計方式讓您使用,設計品牌官網就是現在,你還在等什麼?立即開店!
  • 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
                   

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

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

                   
免費試用開店 14 天

SHOPLINE

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

我要開店

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

更多資源

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

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