在網路行銷的世界裡,訪客可能永遠不會給你第二次機會去打造第一印象,這一點就是為什麼優秀的網站設計是非常重要的理由,而首頁無疑是網站最重要的關鍵頁面之一。

 

對於任何性質的網站而言,建立形象的門面絕對是首頁,是打開一切的大門。最直接的說法就是,如果陌生訪客不喜歡他們所看到的內容或樣子,本能反應將馬上啟動-"關閉網頁"。

 

這絕對是正確的,但好的網站設計不是只有漂亮和好看而已,不但要中看還要真正中用!那麼,到底有哪些因素是打造優質網站的核心法則,而不會讓人感覺混亂或錯愕?

 

在這篇文章中,我會分享一些我認為非常值得效仿和看齊的超讚網站,而在此之前,我想要先剖析經營網站的核心價值。

 

1. 介紹你是誰、你做什麼,或能為別人做什麼
如果你是一個知名的品牌或公司(像是可口可樂或微軟),那麼你肯定有資格不必來形容你是誰和做什麼,但實際情況是,大多數企業仍然需要這麼做。

 

2. 試著努力讓目標受眾有所共鳴
一個好的網站需要跟對的人說對的話,請盡量避免官方說法或鬼扯淡,因此,請務必了解與釐清誰是你的目標客戶。不要試圖跟全世界的所有人對話,這種口吻與方式真的很難有共鳴的!

 

3. 大膽說出你的獨特價值主張
顯示獨特價值主張是人們選擇你,而不是選擇你競爭對手最好的方式,而這同時也關乎於你的商業模式。

我認為差異性、獨特性是在數以億計網站中脫穎而出的關鍵之一,而且往往無法被輕易複製,別人就算模仿也無法學到精隨。

 

4. 優化多螢幕的可看性和使用性
現在上網不再只是使用單一裝置的時代了,因此針對不同上網裝置、尺寸、瀏覽器進行測試和調整是網站優化的一小步,卻是使用者體驗的一大步。趕快跟上潮流吧!

 

5. 不要害羞,多多善用行動呼籲吧
幾乎每個網頁的存在都有它的目的性,如果要有效轉換就需要懂得引導訪客去行動,不論是免費試用、註冊會員、立即購買或了解更多。

請記住,網站的目的是引導遊客更深入你的網站,而這就需要CTAs告訴他們下一步該怎麼做。更重要的是,這會讓網站轉變成銷售先鋒。

 

6. 不斷地改變、調整、優化
優秀的網站不是一成不變的,人需要成長進步,網頁也不例外。這不是只侷限於表面功夫,這包含了網站的一切,像是:設計排版、轉換率、顏色字體、載入速度、SEO、使用動線、使用性…等等。

 

7. 整體設計感保持一致性
網站保持一致性會關乎到品牌,而這會間接影響訪客信任感、價值傳遞度。因此,網頁的排版、段落、顏色…等元素請不要這裡是這樣,那裡是這裡不一樣。

 

10 個你應該要朝聖的超讚網站行銷案例

 

現在,讓我透過真實案例來解析成功網站具有哪些設計特質吧。然而,因為網站架構不盡相同,我只會介紹特定頁面與剖析優點。

 

在此之前,我還想先聲明我完全沒有這些案例的任何統計數據,所以是無法擔保這是絕對的成效指標。儘管如此,如果你覺得有任何啟發,你可以嘗試任何或部分在自己的網站上,因為唯一證實的方式是自己測試。

 

1. 中國BMW

這一個頁面相當獨特,因為在我訪視多個國家版本後,發現只有中國BMW 獨有。除了使用動態增加酷炫感之外,它還具有以下幾點優點:

  • 強烈表達出對用戶的好處,不僅簡單易懂,條例式和粗體的應用讓訊息更明顯
  • 頁面相當新潮,而且還跟行動呼籲(致電邀約和免費檢測)巧妙地融合在一體
  • 頁面中還提供一段售後服務宣傳短片,再次不斷強調售後貼心保固服務的賣點

 

2. Dropbox

Dropbox 網站一直是簡約極致風格的實踐者,這讓使用者在視覺上感覺相當舒適輕鬆。

  • 文案相當明確就是為了企業和IT人員而寫的,目標售眾明確的沒話說
  • 雖然專注提供"免費試用",但是如果你想要直接購買也完全沒問題
  • 明確說出產品有哪些好處,並且進一步提供實際解決客戶問題的案例
  • 延續設計風格和品牌特性,包括:客戶、案例見證、顏色與文案風格

 

3. EVERNOTE

多年來,Evernote已經從一個簡單記事本app 變成了一套企業產品,頁面設計也相當具有國際範。

  • 簡單清楚的標題可以有效引導訪客眼球,相信這對於註冊轉換率應當不錯
  • 網頁標頭使用了幻燈片特效,再搭配積極正面的多組人像地確非常的吸睛
  • 網頁的編排與設計非常亮眼,背景和綠色的相結合使整體感更加出色不俗

 

4. Basecamp

長期以來,Basecamp 一直是我應用於線上專案管理的工具,在網站上你可以清楚看到使用它的特點和好處。另外,設計上它還包含了這些優點:

  • 它們擅長使用定位明確的標題,漫畫風格的輔助無疑是錦上添花
  • 藉由全球知名品牌也是客戶的事實來突顯自家服務品質的可信度
  • 提供高達兩個月免費試用的獨特價值主張,並在網頁中多次強調

 

5. gogoro

對於科技類產品來說,這大概是我看過最出色的設計之一,真的很酷!

  • 頁面設計簡潔而高雅,跟產品圖結合非常地棒,完全不突兀
  • 網頁同時使用了靜態和動態效果,不會太炫技而且恰如其分
  • 文案使用了非常全面的產品圖加以輔助,甚至連零件都有了

 

6. 通路王

雖然這已經是台灣最知名的聯盟行銷平台之一,但網站上仍然是站在使用者的角度在思考,因此頁面設計上具有以下優點:

  • 開門見山介紹加入成為平台會員最大的好處是什麼?步驟有哪些?
  • 網頁符合一般瀏覽動線設計,並且藉由圖文引導訪客註冊成為會員
  • 有很公開的會員推廣業績數據、熱門商品、廠商資訊、活動等訊息
  • 提供知名媒體報導消息,也依照分類提供眾多進駐平台的廠商列表

 

7. Tutor ABC

Tutor ABC說是線上學習英文最成功的平台之一絕對當之無愧,網站設計也是非常到位的,一起來看看它是如何做的:

  • 針對不同學習族群擬定不同課程方案,並且有個別的說明影片
  • 網頁從上到下不斷重覆引導訪客免費體驗課程,想忽略都難啊
  • 頁面中使用了權威代言人和大量客戶心得分享,搭配得恰恰好
  • 有把自身的獨特價值主張說得一清二楚,讓我看的都想報名了
  • 網頁除了有完整課程資訊介紹,還額外提供豐富免費學習資料

 

8. Skype

Skype 一直是線上通訊的翹楚之一,網站設計、用圖、顏色搭配也很符合科技感。

  • 使用影片做為首要背景是此網站的一大特色,而且是用於展現美好的使用者體驗
  • 價值主張不但寫得一清二楚,而且還與背景影片互相呼應,按鈕顏色也非常跳脫
  • 清楚呈列可以使用Skype 的所有裝置,而不同裝置也有分別安裝軟體的導覽步驟

 

9. Wechat 微信

說到社群通訊App,微信絕對會在名單之列,但以下這些優點是我提及微信而不是Line 的原因:

  • "免費下載"按鈕大到讓你很難忽視它,真的是清楚又有力道
  • "功能特性"有非常清楚的圖文操作說明,特點完全一覽無遺
  • 導航聚焦於核心重點上,既可以快速找到內容又能使版面清爽

 

10. IKEA

賣家具的廠商有很多,唯有IKEA讓我覺得有人味,而這一點也體現在它們的網站中。

  • 當你一進到網站你就會被"窩"字給吸引住,居家人情味非常窩心
  • 窩心企劃強調的是省錢大作戰,眾多商品都有優惠正是消費者要的
  • 網站除了大力推廣最新一波企劃活動內容,也不忘推廣自家宜家卡
  • 規劃軟體、型錄、App 在網站中沒有佔據大幅版面,依然清楚可見

你是否也有你特別喜歡的網站設計呢?歡迎在下方留言跟我分享,這可以幫助此篇網路行銷案例更加豐富,我也會不定期增加更多實際案例分析,期待你的分享。

我猜你可能也會喜歡以下這些文章...

3 則留言

  • 張雅涵  2016/07/28 - 13:30

    文章寫得很棒!

    回覆
  • 設計警察  2016/09/02 - 13:27

    文章真的超棒的,但看到範例裡面有SKYPE就軟掉了…. SKYPE的介面設計跟網頁並沒有一致姓,現在IM軟體就屬SKYPE介面最複雜難用了。

    回覆

請在下方留下你的訊息吧...

請輸入你的名字... 請輸入正確的Email... 請輸入留言訊息