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

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

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

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

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

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

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

（圖片來源：Mediative）

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

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

（圖片來源：Brandon Jones）

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

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

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

2. 清晰明確網站頁面

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

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

3. 突出的視覺效果

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

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

4. 層次明確的擺放方式

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

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

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

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

結論

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

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

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

（圖片來源：dave_see）

Justin Chiang

Shopline 客戶規劃顧問(TW) 專長資訊管理、統計分析，追求具有藝術感和美好的事物，興趣是電腦美術、攝影、電影欣賞和旅行。看好台灣的電商市場發展，期望培養台灣的企業轉型，提升企業的品牌形象和價值。