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

SHOPLINE
電商教室

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

          申請科技券教學
          熱門文章科技券
          September 5, 2023September 5, 2023
          【科技券計劃懶人包 2023】申請政府TVP資格、流程、文件
          4 marketing strategies for mid-autumn festival
          中秋行銷數碼行銷
          September 1, 2023September 1, 2023
          中秋無月餅都可以吸客? 你不可不知的四個網店 中秋行銷 策略
          節日旺季節日行銷
          August 30, 2023August 30, 2023
          快人一步搶攻節日商機 《網店節日行銷攻略 2023》率先看
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          AIAI工具
          August 4, 2023August 4, 2023
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          SHOPLINE 10周年
          SHOPLINE 10th AnniversarySHOPLINE 10周年
          July 19, 2023July 19, 2023
          【新聞稿】SHOPLINE 成立10周年 突破15億顧客 香港總營業額飆升近3,000倍
          網店平台網店平台比較
          June 27, 2023June 27, 2023
          【2023 開網店平台邊間好?】SHOPLINE vs Shopify:8 點比較熱門網上開店平台
  • 熱門精選
        • selection

          ChatGPT 企業版 vs 普通版比較 OpenAI 功能及收費
          ChatGPT熱門文章
          September 19, 2023September 19, 2023
          【ChatGPT 企業版】最新 OpenAI 功能及收費
          申請科技券教學
          熱門文章科技券
          September 5, 2023September 5, 2023
          【科技券計劃懶人包 2023】申請政府TVP資格、流程、文件
          4 marketing strategies for mid-autumn festival
          中秋行銷數碼行銷
          September 1, 2023September 1, 2023
          中秋無月餅都可以吸客? 你不可不知的四個網店 中秋行銷 策略
          節日旺季節日行銷
          August 30, 2023August 30, 2023
          快人一步搶攻節日商機 《網店節日行銷攻略 2023》率先看
          【WeChat Pay HK】中國內地跨境支付教學
          WeChat Pay HK內地付款
          August 29, 2023
          【WeChat Pay HK】中國內地跨境支付教學
          直播帶貨熱潮已成網店必備營銷技能
          做直播熱門文章
          August 29, 2023August 29, 2023
          【網上直播帶貨教學】新世代網店4大必備直播技巧
          【申請商業登記】流程、費用、所需文件懶人包
          BRBusiness Registration Certificate
          August 11, 2023
          【申請商業登記】流程、費用、所需文件懶人包
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          AIAI工具
          August 4, 2023August 4, 2023
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
  • 品牌故事
        • SHOPLINE 店家專訪
        • 成功案例分析
        • navNews

          bossini
          April 6, 2023
          休閒服裝品牌 bossini 由舊有網店砍掉重練,透過 SHOPLINE 設立網店月省 40% 營運成本
          April 6, 2023
          位元堂作為傳統中醫藥品牌,如何將品牌年輕化並拓展客源?
          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 踏上開網店之路
  • 開店必讀
        • NEW

          【WeChat Pay HK】中國內地跨境支付教學
          WeChat Pay HK內地付款
          August 29, 2023
          【WeChat Pay HK】中國內地跨境支付教學
          【申請商業登記】流程、費用、所需文件懶人包
          BRBusiness Registration Certificate
          August 11, 2023
          【申請商業登記】流程、費用、所需文件懶人包
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          AIAI工具
          August 4, 2023August 4, 2023
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          Shopline vs Boutir
          shopline掌舖 Boutir
          July 7, 2023July 7, 2023
          【2023 開網店平台邊間好?】掌舖 Boutir vs SHOPLINE 開店平台比較
          網店網頁設計教學 網站頁面製作技巧
          網店網頁設計網站版面設計
          July 6, 2023July 6, 2023
          網店網頁設計教學 2023|5 分鐘掌握網站頁面製作技巧
          10 個重點教你選擇合適的網頁設計公司製作網站
          網站制作公司網站製作公司
          July 6, 2023July 6, 2023
          10 個重點教你選擇合適的網頁設計公司製作網站 | SHOPLINE 電商教室
          【IG 新功能】Instagram Reels 使用攻略!附加 4 大玩法+5 大誤區!
          FacebookIG Reel 點玩
          June 26, 2023June 26, 2023
          【香港 IG 新功能】Instagram Reels 使用攻略!附加 4 大玩法+5 大誤區!
          網頁設計公司
          網頁設計網頁設計公司
          June 1, 2023
          【 網頁設計公司價錢 2023 】網站頁面製作設計收費報價指南
        • 開店須知
        • 店務營運
        • 顧客關係
        • 實體門市
  • 市場營銷
        • SEO 教學
        • 行銷技巧
        • 網店行銷技巧
        • 社交媒體趨勢
        • market

          4 marketing strategies for mid-autumn festival
          中秋行銷數碼行銷
          September 1, 2023September 1, 2023
          中秋無月餅都可以吸客? 你不可不知的四個網店 中秋行銷 策略
          節日旺季節日行銷
          August 30, 2023August 30, 2023
          快人一步搶攻節日商機 《網店節日行銷攻略 2023》率先看
          直播帶貨熱潮已成網店必備營銷技能
          做直播熱門文章
          August 29, 2023August 29, 2023
          【網上直播帶貨教學】新世代網店4大必備直播技巧
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          AIAI工具
          August 4, 2023August 4, 2023
          【 Google Bard 是甚麼? 】一文了解 Google Bard及 ChatGPT 功能比較
          【Threads 是甚麼?】Threads APP 新手教學懶人包 店主注意3大盲點
          Threads
          July 18, 2023July 18, 2023
          【Threads 是甚麼?】Threads 首個功能更新!一文了解 Threads App 教學懶人包 店主注意3大盲點
          一文了解 AI 聊天機器人 支援中文 ChatGPT 香港註冊教學
          ChatGPTChatGPT 功能
          June 28, 2023June 28, 2023
          【ChatGPT 教學】一文了解 AI 聊天機器人 支援中文 ChatGPT 香港註冊教學
  • 廣告教學專欄
    • 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

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

關於 SHOPLINE

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

免費試用開店 14 天

文章目錄

    • 在您想到答案之前,我們先來了解網路使用者的習慣,也就是我們人的習慣。
    • 現在大致瞭解了人們的網絡使用習慣,那我們應該如何針對人的習慣去設計自己的網站呢?以下幫你整理出幾個設計整體網站和排版的概念建議。
    • 結論
      • Shopline提供了響應式網頁設計(Responsive Web Design,RWD)的網頁技術,以及多樣設計主題,自由搭配版型,讓您同時完成電腦和行動裝置的品牌官網。未來也將會提供更多的設計主題和設計方式讓您使用,設計品牌官網就是現在,你還在等什麼?立即開店!
  • Related Posts
  • 熱門文章
  • 編輯推薦
  • 【ChatGPT 企業版】最新 OpenAI 功能及收費
  • 【科技券計劃懶人包 2023】申請政府TVP資格、流程、文件
  • 中秋無月餅都可以吸客? 你不可不知的四個網店 中秋行銷 策略
  • 【網上直播帶貨教學】新世代網店4大必備直播技巧
  • 【在家兼職】推薦適合在家工作的副業 創業、教書都得!
  • 【2023 開網店平台邊間好?】掌舖 Boutir vs SHOPLINE 開店平台比較
  • 網店網頁設計教學 2023|5 分鐘掌握網站頁面製作技巧
  • 10 個重點教你選擇合適的網頁設計公司製作網站 | SHOPLINE 電商教室
  • 【2023 開網店平台邊間好?】SHOPLINE vs Shopify:8 點比較熱門網上開店平台
  • 【開網店教學 2023】開網店流程/網店平台比較/創業常見陷阱

追蹤 SHOPLINE

SHOPLINE
                   

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

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

                   
免費試用開店 14 天

SHOPLINE

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

我要開店

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

更多資源

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

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