• 令人怦然心動的「風格首頁」,你可以這樣設計!

    • 最後更新 2022-07-01 08:49

     

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

     

    目錄

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

    一、簡約風格

    二、活潑風格

    三、沉浸風格

     

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

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

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

     

     

     

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

     

    【形象首頁】▶

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

     

    【購物首頁】▶

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

     

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

     

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

    首頁 風格 要素



     簡約風格

     1.留白

     2. 一次只講一件事

     3. 精簡分頁

     活潑風格

    1. GIF動圖

     2.  圓角圖片

     3.  特色插圖

     沉浸風格

    1.  滿版輪播

    2.  黑白圖片

    3.  減少頁面跳轉





     品項複雜

    1. 善用各種分類方式

    2. 重要資訊擺上面


     品項單純

    1. 秀出品牌識別標籤

    2. 首頁增加多元資訊

     

     

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

     

    一、 簡約風格

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

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

     

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

     

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

     

     

    網頁留白範例,日本深川製磁的網站運用大量留白,以延伸磁器花紋上雲霧優美的意象。

    網頁留白範例,日本深川製磁的網站運用大量留白,以延伸磁器花紋上雲霧優美的意象。

    圖片來源:深川製磁 

     

     

    2.一次只講一件事

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

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

     

     

    Apple watch簡約網站設計,一個版面只講一個重點。

    圖片來源:Apple

     

     

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

     

     

    🔎 WACA 可以怎麼做 ?

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

     


    WACA首頁新版型,利用留白可以做出簡約風格的網站。

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

     

     

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

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

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

     

     

    日本nikon官方網站,色彩簡單明亮。

    圖片來源:Nikon

     

     

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

     

     

    日本資生堂用幾種不同的奶茶色,製造有些變化的簡約質感。

    圖片來源:ELIXIR

     

     

    二、 活潑風格

    1. GIF 讓畫面動起來

     

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

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



    minimatters,mini matters,GIF,meg品牌,meg,活潑型網站

    圖片來源:mini matters

     

     

    2. 使用圓角圖片

     

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

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

     


    HOLO網頁使用圓形圖框呈現照片,讓畫面活潑可愛。


    圖片來源:HOLO

     

     

    網頁設計使用圓角矩形,散發溫暖、值得信賴的印象。

    圖片來源:kamispo

     

     

    🔎 WACA 可以怎麼做 ?

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

     


    WACA 網站設計可以調整圖片方角、導角或圓角。

     

     

    3.加入可愛插圖

     

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

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

     

     

    網頁加入活潑插圖,可以替公司形象加分,也能提高辨識度。
    圖片來源:Tasaco

     

    線上開店,咖啡網站,OMO,網頁插圖,客製化插圖


    圖片來源: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. 首頁增加多元資訊

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

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

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

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

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

     

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

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

    用圖片加連結的方式,吸引顧客進入日誌頁面。

    圖片來源:  點子包研究所

     

    第二個做法是,在首頁加入重點頁面的內容曝光。如 金弘麻油花生行 ,他們在首頁商品列下方,以一個專屬版位去露出精選的文章內容,置入顧客可能會感興趣的主題。例如由影音文字帶你來到原料產地,認識產品使用原料花生與芝麻的播種、開花、採收、曬選歷程,對於大多數顧客而言,這些罕見新奇的背景介紹確實能加深對這個商家的記憶點。

     

    在首頁加入部落格元件曝光部分內容,有助於引導顧客閱讀重點頁面

    圖片來源: 金弘麻油花生行


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

     

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

     

    🔎 WACA 可以怎麼做 ?

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

     

    WACA版型的部落格元件。

    部落格元件

     

    輪播元件

     

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

     

     

    用WACA做出用WACA 做出3種風格的形象網站與2種類型購物網站。

     

TOP