當賣家們建立品牌網站後,最困擾大家的便是網頁設計,「該如何設計獨具風格的品牌網站?」。在過往,賣家可能會找一個網頁設計公司協助設計與建站,但通常會花上好幾個月的時間。而 SHOPLINE 開店平台所提供的網路商店系統,就替賣家們準備好所有建立官網必備的功能,舉凡在地化金物流、訂單管理系統、顧客管理系統、促銷模組等。而商店的網頁設計模板與拖拉式頁面設計,更替賣家們省去了許多建置電商網站的時間。

(SHOPLINE 建置網站頁面只要拖拉就能完成)

不過,當你開始準備設計自己的品牌購物官網時,肯定也會想問:「怎麼樣的網站設計才能吸引客人呢?」、「有沒有什麼必備元素?」,畢竟,做購物官網的主要目的就是透過網站將品牌特色、理念等傳遞給消費者,激起他們的興趣,然後最重要的是「賣出商品」!

下面就介紹 5 個獨具巧思的品牌購物網站設計,一起來看看他們讓人心動的理由吧!

5 個品牌購物網站設計案例

► 案例一、綠藤生機

綠藤生機這個台灣在地品牌相信大家都不陌生,若你曾到訪過他們的官網,肯定會被綠意盎然的網頁設計風格所吸引。一進到首頁便能看見由「綠色」組成的各種情境照片,加上「純淨保養主張」這樣強烈風格的 CTA ,讓人更想往下一探他的品牌主張到底是什麼?相較於一般購物網站都會放上促購字眼的 Banner,擺上品牌理念的 Banner 也非常引人注目呢!

綠藤生機品牌網頁設計(綠藤生機網站為自行修改網站設計)
圖一、綠藤生機品牌網頁設計(綠藤生機網站為自行修改網站設計)

3 個編輯推薦網頁設計亮點:

  • 網站用色一致,主要以 LOGO 色延伸,讓人留下滿滿的「生機印象」
  • 以品牌理念取代促購,更能凸顯品牌價值,提升好感度
  • 乾淨的商品圖片與頁面,符合品牌「純淨」的風格

► 案例二、1 % Bakery

一進入 1 % Bakery  的網站就有漂亮動人的滿版圖片跟你說嗨,一眼便能知道他是販售蛋糕的商店,而影響客人想不想吃一項食品,最好的方式就是創造五感體驗,但是在網路上僅能靠「視覺」來下手,因此他們的網站風格很明確,就是營造乾淨、好吃的樣子。而透過 SHOPLINE 進階分頁的商品元件搭配文字元件,簡單明瞭的介紹蛋糕特色,非常吸引消費者目光呢!

1 % Bakery 品牌網頁設計
圖二、1 % Bakery 品牌網頁設計

3 個編輯推薦網頁設計亮點:

  • 照片的蛋糕拍攝風格一致,讓人瀏覽起來更舒服
  • 首頁利用滿版圖片吸引消費目光,能很清楚看見商品
  • 替不同口味蛋糕寫下特色介紹,更能引起興趣與食慾

► 案例三、OPT 圓瑞

你對販售隱形眼鏡的商店有什麼樣的想像? OPT 圓瑞便將官網完美結合了購物促購元素,在讓人衝擊的文案與風格素材下,打造出獨具特色的隱形眼鏡網站。而目錄內裏的商品分類更是一絕!一般來說,會以商品名字來做分類,而 OPT 則以受眾常用的口語化文案來當作分類名稱,讓人快速選擇自己喜歡的風格。

OPT 圓瑞品牌網頁設計
圖三、OPT 圓瑞品牌網頁設計

3 個編輯推薦網頁設計亮點:

  • 首頁以當季主題形象為風格舖陳,具有記憶點及衝擊感
  • 商店目錄使用 emoji 和口語化來吸引點擊
  • 利用進階分頁當作發布最新消息的地方,讓顧客願意瀏覽更多頁面

► 案例四、Teamjoined

販賣衣服的商店除了照片拍攝需要清楚或附帶穿搭情境吸引消費目光之外,讓客人能了解衣服的尺寸大小是否符合自身身形也是影響顧客下單意願的一環。Teamjoined 在商店設計上除了利用簡約大方的 LOGO 色系當作網站基底外,消費者購物時常見的購物問題也寫得相當詳細,讓人逛起來舒服又安心呢!

Teamjoined 品牌網頁設計
圖四、Teamjoined 品牌網頁設計

3 個編輯推薦網頁設計亮點:

  • 利用目錄橫幅底色,強調出商品分類
  • 商品圖片乾淨、明亮,並且商品頁敘述簡單明瞭,讓人能快速了解商品特色
  • 常見問題的內容豐富且詳細,想找衣服尺寸很便利

► 案例五、Atelierhomebody

一進到 Atelierhomebody 的商店便有清新滿版的 Banner 迎接,完全符合品牌名字 Homebody 的意象。而透過簡單的品牌理念文字穿插於頁面和商品中間,讓人更能被吸引。對於商品較少的店家來說,網站內容不夠豐富會造成顧客流失率提高,而他們的做法便是將 Instagram 帳號加至首頁,讓整體瀏覽起來內容更豐富,同時還能引流至社群呢!

Atelierhomebody 品牌網頁設計
圖五、Atelierhomebody 品牌網頁設計

3 個編輯推薦網頁設計亮點:

  • 有別於制式的設計,在頁尾增添輪播圖片讓人不由得注意品牌 LOGO
  • 頁面加入 instagram 帳號圖片,增加商店內容與社群導流
  • 雖然商品不多,但照片色系一致,簡單的商品分類逛起來也很舒適

繼續閱讀文章

10 個設計購物網站的基本元素

看完上面 5 個精選的購物網站設計案例,相信聰明的你一定也發現製作一個漂亮的網站所需要具備的基本要素有哪些了吧?除了漂亮的商品圖和風格一致的 Banner 之外,網站本身的基礎架構設計也非常重要,像是目錄選單、頁尾設計、按鈕顏色等等,都是影響網站設計風格是否能有相同調性的元素。

而上述這些品牌都是使用 SHOPLINE 最新的網站版型「 Ultra Chic 及 Kingsman 」做到的,撇開以往「網站版型」的侷限,在新的版型中,你可以自行選擇像是主題顏色、文字顏色、icon 顏色、字體等,同時搭配「進階分頁」的各項元件,透過拖拉加入元件與排版設計,你也能完成獨具風格的品牌購物官網!

PS. 上述介紹之品牌部分有使用「前台設計工具」撰寫進階語法修改網站設計, SHOPLINE 提供之版型預設設計請參考 FAQ

SHOPLINE 最新購物網站設計版型 Kingsman
圖六、SHOPLINE 最新購物網站設計版型可設定主題顏色、文字顏色等

最後,編輯也幫大家整理出幾項製作購物官網時需注意的網頁設計要素:

項目必備 or 建議使用
簡單又清楚的網站目錄選單必備
吸引人的首頁 Banner必備
人性化的目錄子選單(分類名稱)建議使用
商品照片色調一致建議使用
網站圖片與文字配色一致建議使用
詳細的常見問題頁必備
詳細的頁尾內容必備
社群內容嵌入(例:帳號、口碑內容等)建議使用
商品及使用描述內容建議使用
品牌理念內容建議使用
表一、10 個設計購物網站的基本元素列表

你覺得文章有幫助到你嗎?

歡迎給我們評論唷!

5 / 5. 共有 10

可以留下你的評論讓我們知道

延伸閱讀

追蹤電商教室,趨勢新知報你知