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

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

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

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

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

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

黃金三角定律已改變(圖片來源:Mediative)
圖一、黃金三角定律已改變(圖片來源:Mediative

一般而言使用者花了近七成的時間在讀取左半邊的網頁內容,這跟我們一般的閱讀習慣有很大的關係。另外Nielsen Norman Group公司,也針對了200多名網路用戶進行瀏覽數千網頁的進行了網頁可讀性的研究分析,總結出了 F 型版式設計在實際運用中的重要意義:
補充說明:F 型版式設計是一種最為常用的符合用戶視覺習慣的網頁設計,尤其適用於承載大塊內容的頁面。

  • 使用者很少會將所有內容都看完,尤其是文字。(事實上,平均來講他們只會看其中 20% 的文字內容)
  • 最左上兩部分是最為重要的,它決定了用戶是否會繼續完整觀看網頁
網站閱讀順序圖(圖片來源:Brandon Jones)
圖二、網站閱讀順序圖(圖片來源:Brandon Jones

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

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

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

2. 清晰明確網站頁面

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

因此,設計網頁就應避免使用大量文字或圖文不符的表達作為網