網站首頁，是消費者踏入品牌的第一道門，通常也是帶來最高流量的頁面。首頁背負著第一時間將「品牌形象」、「產品賣點」表達清楚並留住客人的重大任務。以下我們整理出多種風格與產業的首頁版型案例，一起找出屬於你的命定首頁吧！

P.S. 閱讀到最後，免費領取《賣場健檢 Check list》電子書！

首先，在建置或改版首頁前，除了我要營造出怎樣的「首頁風格」以外，通常我們還需要思考我需要一個形象首頁，還是購物首頁? 兩者的差別主要在於 :

【形象首頁】▶

強調烙印品牌形象、故事理念、產品特色與服務內容。重點在於美觀的頁面與圖像、使用完整的語句描述商家與產品特色，第一時間吸引消費者並建構信任感，但相較之下不會有太多的商品呈現。

【購物首頁】▶

商家優惠活動曝光，清楚呈現商品分類，引導消費者認識並購買產品。 傾向用一目了然的方式陳列商品分類，例如多個連結按鈕、Banner宣傳優惠資訊，方便消費者快速尋找。

過去我們會用「形象網站」與「購物網站」去區分網站類型，但現在有越來越多的網站首頁融合兩者，替自己打造一個極具風格的首頁來強化品牌特色，進而讓消費者停留時間拉長。因此無論你的網站賣的是什麼類型的商品，都可以擁有一個有別傳統的形象首頁，也可以依商家喜好比例拿捏 7：3 或是 3：7 分配。

接下來我們會分別介紹 3 種風格【形象首頁】重點特色元素，與 2 種【購物首頁】排版小靈感，只要掌握要點就能營造出高相似度的首頁，一起看下去！

3種【形象首頁】風格介紹

一、 簡約風格

1. 留白 - 我要說的東西很少，但是很重要

留白是簡約風格中最不可或缺的原則。 ( 筆記✍ 在網站編排時，一不小心會把許多重要資訊在同一個頁面都呈現出來，或是加了許多CTA，這麼做並沒有錯，只是如果你的目標是「打造簡約風格的形象首頁」，就要記得一個重點 :「留白是一種視覺設計，善用它。」

留白的概念在英文中稱為－Negative Space 「負空間」，我們可以想像在網頁中每一行文字、圖片、元素都是「正空間」，正空間乘載我們想傳達的內容，而「負空間」就是協助襯托重點的版面，包含文字間的行距、整個頁面中沒有使用到的部分。如果首頁設計有預留足夠多的負空間，就像進到 Apple101 直營店，寬敞簡單的動線設計，是不是讓人逛起來心曠神怡呢？

另外，留白是提升網頁質感的重點，因為降低了視覺噪音，讓消費者專注閱讀僅有的資訊，彷彿對著他們的頭腦呼喊「我要說的東西很少，但是很重要～」。俗話說 Less is more ，精簡了箭頭、表格、圖案、動畫等元素，讓整個網頁更有格調並增添優雅氣質。下方範例日本深川製磁的網站運用大量留白，以延伸磁器花紋上雲霧優美的意象。

圖片來源：深川製磁 

2.一次只講一件事

意思就是「大圖大字，一個區塊只說明一件事」。

簡單說只要懂得控制資訊量，一個區塊只帶到一個重點。話不多說直接看Apple Watch首頁範例，這麼大的版面，只提了一個重點，新版 Apple Watch 螢幕放大超過 50%。

圖片來源：Apple

使用 WACA 的版型設計也可以做到這樣的排版，詳細的 WACA 新版型功能介紹請看 👉 這篇文章

🔎 WACA 可以怎麼做 ?

可以選擇使用2格分格的網格，添加一張大圖、一段放大的文字，再加上一個連結導到商品頁面，就完成囉。當然如果比起文字連結你更偏好使用按鈕，也可以使用三格網格，在第三格中加入按鈕元件。總之，資訊越少版面越簡潔有力，抓住消費者眼球的時間就越充足。

 

用WACA首頁新版，模擬 Apple Watch簡約排版

3.避免過多色彩與花紋背景

白色與淺灰色背景，是最萬用的顏色。很容易創造清新明亮的感官。除了顏色選擇，也應盡量避免有花紋的背景，如果厭倦了無彩國度，有兩種方式可以解決。

第一種，你可以添加 1至 2個點綴色，如下方範例，整個首頁最大面積的部分用了白色，並在內容後方壓上淺灰色區塊作背景，接著整個網頁添加亮黃色企業識別色，與社群按鈕的藍色，小面積色塊達到點綴畫面又不過於搶眼，這樣的顏色搭配讓視覺乾淨有亮點。

圖片來源：Nikon

第二種方式，可以使用「不同的相近色」，如下面這個範例就是使用了幾個接近的奶茶色，製造變化的同時，又能維持一致的簡約整齊質感。

圖片來源：ELIXIR

二、 活潑風格

1. GIF 讓畫面動起來

GIF 永不退流行的動圖，透過多張連續靜態圖片播放所達成。有時候拍攝一部形象短片的成本高昂，你可能會需要撰寫影片腳本、剪接或特效能力，在降低製作成本的前提下，使用GIF小動圖是一個很棒的方法喔！

吸引目光、風趣可愛，是GIF動畫的特色，運用同張圖片不同角度轉動GIF、連續動作GIF，或是單純只是圖片的切換，想製造逗趣活潑的風格用它就對啦！

圖片來源：mini matters

2. 使用圓角圖片

選用圓角的圖片，不但可以修飾畫面，更能幫網頁增添活潑溫潤的質感。 你可以觀察有許多活潑類型的網站都會大量使用圓角的元素～不要看這一個小小的細節，有研究顯示，圓角視覺可帶來溫暖、值得信賴的印象，國外甚至將圓角矩形稱作友善的矩形（friendly rectangles）。

相關理論認為，圓角設計對於使用者體驗更好，因為它能夠降低大腦的認知負荷，讓資訊更容易被閱讀與接受。所以如果你的首頁想展現出 很親切、很親近就可以這麼做，再搭配溫和的，或鮮豔的顏色，會更能凸顯不同質感，大方的使用圓角圖片與色彩吧～

圖片來源：HOLO

圖片來源：kamispo

🔎 WACA 可以怎麼做 ?

你可以直接上傳自訂形狀的去背圖片，或是使用 WACA 後台調整圖片「方角、導角或圓角」，按鈕元素也同樣可以選擇方角、導角或圓角。

 

3.加入可愛插圖

加入符合品牌形象的活潑插圖，這種亮點裝飾不僅僅能替網站形象加分，重點是在同業之間的辨識度也會提高非常多。 如下圖範例，Tasco 是日本知高縣一家釀造啤酒的公司，因為網頁主打製造出「每個人都可以微笑著享用的平易近人的啤酒」，並運用當地不同水果及原料釀造，就非常妥善的使用水果插圖來呈現不管是男生女生，誰都會喜歡的感覺。

而 Cafe Cahon 是一家專門經營特色咖啡的家庭烘焙店，實體店面走溫馨可愛的路線，整間木頭質感的牆面與吧台，還有溫暖可愛的燈飾。架設網站時他們加入清新簡單的人偶小插畫，去延伸實體店面的元素風格。其實現在有很多免費或付費的素材圖庫，使用時只要注意商業規範，或是直接外包設計師設計專屬插圖，都是一項很好的投資～

圖片來源：Tasaco

圖片來源：Cafe Cajon

三、沉浸風格

1. 滿版輪播

要營造沉浸的感覺，首頁圖片絕對離不開滿版。滿版能營造出豐盛的視覺引誘人們進入網頁世界，因為少了內邊距離的畫面分割，就像為什麼人們追求窄邊框大螢幕，這樣看電影才過癮啊。

🔎 WACA 可以怎麼做?
其實 WACA 的每一個區塊都可以單獨設定滿版，請點選網格框，打開「寬度滿版」輕鬆達成。

2. 使用黑白精緻圖片

可以嘗試使用黑白精緻的圖片，因為當圖片以黑白呈現元素的紋理、圖案表現出來的質感會提高。 黑白圖片尤其給人一種安靜深沉的感覺，有利於情感渲染與引導，因此很多攝影大師們都喜歡將作品調整為黑白。

🔎 WACA 可以怎麼做?

可以嘗試使用圖片濾鏡功能，裡面除了黑白濾鏡還有其他各種色調，有偏日系的淺色、美式的鮮豔色，有些濾鏡會有意想不到的效果替商品照加不少分，親自玩玩看吧！

3.減少頁面跳轉

不要放置過多按鈕、也不要顯示頁籤索引，以達到減少頁面跳轉，目的在於提高滑動順暢。當消費者想閱讀的資訊一個區塊一個區塊往下接續，不受頁面跳轉干擾的情境下，瀏覽網頁內容的狀態相對會更專注，有助於網頁維持沉浸的感受。

相信你一定有聽過一頁式網站，它的概念就是整個網頁只靠不斷往下滑動來呈現所有內容，對於使用行動裝置的用戶相當友善。

🔎 WACA 可以怎麼做 ?

選擇新版型中隱藏 Header頁籤的頁首元件 。不用擔心這樣消費者會找不到商品列表，這時候只要在首頁以圖片連結或按紐，引導消費者進入分頁即可 ! 這個方法也是新版型上線後 WACA 力推的首頁排版方式之一，因為要創建形象首頁，以視覺主導動線，優於以文字主道動線。

頁首設計隱藏選單，可以降低視覺干擾

以上，就是三種形象首頁風格- 簡約、活潑、沉浸的重點要素，你學會了嗎?

接下來介紹 2 種「購物首頁」排版小靈感，請繼續往下看

2種【購物首頁】排版小靈感

我們將用「商品分類多寡」與「活動資訊量」來推薦購物首頁的版型運用。

一、商品分類多樣 X 活動資訊複雜

重點商家: 冷凍食品、生活百貨、服飾鞋包

這種類型的商家有三種特色

• 產品多樣，分類方式較複雜。
• 強調希望消費者完成的指定動作如「綁定會員」「下載APP」「加入Line」。
• 很可能有「活動多拼」的機會，促銷活動、組合活動、全館活動，同時發生。

以上加總起來是不是超複雜呢? 你可以這樣做 :

1. 善用各種分類方式

有數量繁雜的產品種類，可以掌握三種分類邏輯 :

• 商品種類 : 杯子蛋糕、磅蛋糕、貝果、司康、吐司、手工餅乾
• 商家標記 : 熱銷專區、新品專區、活動專區
• 情境日子 : 彌月系列、喜餅系列、三節送禮

2.重要的資訊擺上面

因為活動繁多，商家可以評估是否要將所有「活動規則」或是「獨家服務」一開始就清楚呈現。

專營進口英國茶與獨創英式茶飲的 英茶香 ，有客製化茶葉禮盒的獨家服務，不但可以選擇不同口味茶包混搭，還能印製客製化小卡，這項資訊至頂於首頁，表現出此服務的重要性。接著是兩組任選活動專區，以及三大種類商品「餅乾、茶包、茶袋」的開箱影片，影片清楚呈現。

圖片來源：英茶香

總結商家應該要掌握一個大原則，綜合評估「你的賣點」如獨家服務和主打商品，與「客人想看到什麼」如活動優惠，將越重要的資訊擺在越上面！

🔎 WACA可以怎麼做?

輪播元件，圖片影片元件，以多個活動Banner拼接，絕對大大烙印在消費者心坎裡💗

二、商品分類單純 X 活動資訊簡單

重點商家: 甜點、寢具、環保用品、服務性質

這類型的商家有兩種特色

• 一個品牌一個主打商品。
• 商家具有鮮明的品牌印象，包含產品的品質、原料、製程或服務，都相當有特色。
  

1. 秀出品牌識別標籤

你希望讓消費者聽到你的品牌三秒鐘內會聯想到什麼? 那個就是你的品牌識別標籤，可以想像最能代表商家的三個 #hashtag。

舉例來說，當我們聽到 眠豆腐 ，就馬上連想到 「MIT舒適床墊試睡100天」。 我們來觀察他的首頁，首先他告訴你，我的床墊舒服到躺一秒就不想起來，怎麼說呢？

❶  95%的人都說好睡

❷  如果你不信，讓你試睡100天，消除消費者網購床墊心中絕對會有的疑慮

❸  再來你可能會擔心這麼好康該不會用久了品質堪憂？請放心，設計製造全部 Made In Taiwan。

在短短的首頁，馬上點出 # 舒適床墊、# 試睡100天、# MIT 三大品牌標籤，超容易被消費者記住！

圖片來源：眠豆腐

2. 首頁增加多元資訊

在網站首頁中，別忘了給你想要曝光的「特殊頁面」一個Ｃ位 !  購物型網站的首頁以呈現商品為主要目的，其他頁面多半顯示在 Header 頁籤中，但是對於「品牌故事性強、延伸內容豐富」的商家來說，這樣實在是太可惜 (握拳✊)！ 如果將有核心價值的精隨內容藏在小小的 Header 頁籤，真心不騙會被消費者忽略，又或者只被閱讀一次，下一次就不會想要再點開來看更新資訊囉。

考考你，值得給他一個首頁Ｃ位做曝光的頁面有哪些 ?

(A) 有深度、有感人的品牌故事
(B) 能讓顧客認識產品源頭、增加信任感的產地製程介紹
(C) 可提供價值的產品使用及保養教學
(D) 用日誌專題來包裝的產品使用情境分享
...

答案是 (E) 以上皆是
只要是對品牌識別、提升好感度有加分的頁面，都是合適的人選喔~

那麼，到底要如何在首頁曝光這些優質內容 ?
做法一、在網站首頁加入圖片連結，導入該內容頁面
做法二、在首頁插入部落格元件，曝光部分頁面內容引導顧客查看更多

舉例來說，台灣品牌 點子包研究所 ，網站首頁中有一個版位依序播放著「漫步赤峰街特輯 EP1－4」的圖片，點擊進去會連結到那一集數的專屬日誌頁面。原本置身部落格中的「漫步赤峰街特輯」，以輪播圖片被拉到首頁正中央，讓所有人進到網站都不會錯過，不禁好奇「赤峰街特輯」到底是什麼?

原來這些內容是商家跟赤峰街文青小店合作，介紹在地文創商家的圖文日誌，圖片上的人物穿搭都揹著自家產品包包。把商品融入日常當中創造情境感，文章最後再推播讀者可能有興趣的商品進行導購。

圖片來源:  點子包研究所

第二個做法是，在首頁加入重點頁面的內容曝光。如 實心蛋捲，他們在首頁中加入品牌形象影片，由影音文字待顧客來到製成工廠，認識產品的生產環境與用心，這些背景介紹確實能加深對這個商家的記憶點並強化信任。

圖片來源: 實心蛋捲

等等，你是不是想問，這些頁面明明已經存在分頁列表中，為什麼還要單獨抽出來放首頁呢 ? 原因是，因為商家必須主動引導顧客去吸收你想要他們看到的內容。有時網頁內容太豐富，消費者一時之間可能會找不到重點資訊，或是只針對零星頁面瀏覽，這時無論使用以上介紹的何種方式，記得 在首頁增加多元的資訊曝光，幫重點頁面製造多個入口，即使 同樣的分頁但是用不同方式呈現，都可以幫助消費者快速查找抓到重點。

另外，這種版面配置方式，還可以應用在媒體報導、活動紀錄等等，不但能使品項單純的網站內容看起來更豐富，也非常適合想要加深品牌信任度的商家。

🔎 WACA 可以怎麼做 ?

使用部落格元件、輪播元件即可達成 !

部落格元件

輪播元件

以上林林總總說了這麼多，首頁規劃有沒有更有具體方向，同時更清楚怎樣運用 WACA 達到你要的效果。歡迎把以下表格儲存下來，下次在首頁改版時想想怎麼用創意的方式讓首頁發揮最大價值，一起把門面打理好，吸引更多質感好顧客 ☺～

👇 點擊作者欄下方圖片，免費領取電子書！