電商百問第72集，直接給你一頁式網站案例參考，讓你日進斗金、賺錢如有神助。我們在【電商百問71】哪裡有一頁式商店範例參考?分享了一頁式商店要怎麼做，而如果提到一頁式商店，就不免俗的要提到一頁式網站。這兩個的設計邏輯不太一樣，簡單的說，一頁商店就是為了銷售而服務，所以所有的設計邏輯都是為了取信消費者而存在。而一頁式網站雖然也是想要導到銷售，但是在這個過程中，他更會嘗試說服消費者這個產品值得他購買，進而促進購買。
換個說法就是，我們在一頁商店的時候會利用打XX折、倒數計時器等等的促銷工具讓消費者覺得好像現在不買就會虧大了。而一頁式網站並不會特別提到限時特惠之類的詞語，而是透過文案的編排和設計，促發消費者購買的渴望，最典型的一頁式網站案例就是Apple的商品頁設計，我們等下也會用Apple來做一頁式網站的案例說明。
什麼是一頁式網站
一頁式網站（Landing page）與網站首頁不同，網站首頁以傳遞企業資訊跟展示產品為目的，所以在頁面上會設計多個入口給使用者點選。而一頁式網站則是以傳送特有資訊為目的，並通過資訊引導使用者完成某一動作。簡單的說，一頁式網站會通過提供包含但不限於文字、圖片、影片等等的元素給使用者並引起使用者對這個商品產生興趣。現在也有另一種做法是在產品正式上線前，先作為一個擬態產品推出。並讓產品企劃可以在一頁式網站中驗證你的產品創意、價值主張、市場潛力、獲取使用者回饋、驗證產品功能的必要性，也可以先通過一頁式網站收集那些對你的產品感興趣的潛在使用者的電子郵件地址。就能在產品上線的時候，提醒他們產品推出的消息。
一頁式網站如何設計
一頁式網站的設計看起來雖然簡單，就是放個logo加個圖再寫個文案就搞定了，但是就像我們過往所說的，魔鬼藏在細節裡，我們要怎麼讓看到這個網站的使用者對我們的產品產生興趣，這個絕對不是就隨便些就完事了，頁面的設計應該特別，但不應該複雜。
我們在設計一頁式網站時，要牢記它的目的和作用就是「銷售產品或想法」，這不是設計或是創意比賽，如果你設計的再美輪美奐，沒有轉換率都是白搭。
一頁式網站常見的設計問題
我們先說這個頁面設計的成果應該是長怎麼樣的，首先是頁面中的資訊應該直接了當、整體的視覺風格也要契合產品特徵，並同時保證能夠吸引目標使用者。最後讓用戶在整個網頁的體驗都是快速、簡單、愉快的。那接下來就是幾個我們在設計一頁式網站常犯的錯誤。
- 盲目跟風
- 文字太多
- 按鈕太多
一頁式網站常見的設計問題01:盲目跟風
還記得前幾年蘋果的簡約風大紅的時候，一堆網站都把自己弄成了簡約風，但是這麼多年來，有幾家公司的產品可能因為跟隨設計趨勢而大賣呢？顯然寥寥無幾，因為使用者並不會因為一個一頁式網站設計得好看就決定下單。
例如，現在很流行走簡單的插畫路線，那如果你的產品是賣給五六十歲以上的保健品，你覺得用簡單插畫的方式跟直接拍出戶外的那種陽光炫目，這兩種做法哪個更適合這些客群呢?所以我們要考慮這種設計風格是否真的符合產品定位和使用者心理，如果目標使用者不買單你的設計，那你做的再好都是白搭。
一頁式網站常見的設計問題02:文字太多
我們剛才雖然說，不要跟著潮流走，但是還是有一些通則的。像現在大部分的消費者都已經習慣在手機上面閱讀資訊，之前有過調查，現在使用桌機跟使用手機去了解資訊的比率大概是四比六，手機佔六成。那這件事意味著我們在設計頁面的時候一定要連手機閱讀是否舒服都要列入考慮。而也意味著無論你的產品多出色，無論你多想向整個世界介紹你的產品，你都應該知道一件事：人們並不喜歡閱讀大量文字，尤其是在手機上。
你應該使用簡單而有力的句子來描述產品的創意和優點，並以最快的速度抓住使用者的注意和興趣。因為瀏覽網頁的消費者通常不會有耐心在手機上看完你精心撰寫的每一個文字，如果頁面有太多文字的話，使用者很有可能會離開頁面。
我更建議你把這些文字化成多個部分，除了試著用簡單、易懂的文字來表達資訊之外，也可以盡量用圖片來表達這些內容。最好再搭配一些資訊化圖表，不然這個頁面會看起來很呆版跟沉重。
一頁式網站常見的設計問題:03按鈕太多
按鈕的唯一邏輯就是「少就是多」，你並不會因為多放了幾個按鈕就能增加使用者的點擊率，反而可能會因為你擺了太多的按鈕，讓使用者覺得厭煩或無所適從，就直接離開頁面。我更建議你只要在最前面的時候有出現按鈕就好，另外把按鈕做在頂邊欄，甚至是讓使用者嘗試滾動頁面時候在跑出來，這樣一來使用者也不會找不到，二來也不會造成視覺上的干擾。
一頁式網站案例的經典結構
我們剛才提到了一頁式網站的常見問題，接下來就是一頁式網站的結構應該長甚麼樣子，像我們前面說的，如果是要達到某種目的，那麼就必須要有目標，而一頁式網站的目標無非就資訊傳遞與行為轉化。前者指的是你想讓使用者知道些什麼，後者則是涉及了點擊、購買、填寫、推薦等等的內容。這次我們就用apple的MacBook Pro的網頁設計邏輯來看他們如何把一頁式網站拆成以下6點:
- 價值定位
- 行動呼喚
- 產品特徵
- 風險承諾
- 常見問題
- 終極呼喚
目錄
- 什麼是一頁式網站
- 一頁式網站如何設計
- 一頁式網站常見的設計問題
- 一頁式網站常見的設計問題01:盲目跟風
- 一頁式網站常見的設計問題02:文字太多
- 一頁式網站常見的設計問題:03按鈕太多
- 一頁式網站案例的經典結構
- 一頁式網站案例的經典結構01:價值定位
- 一頁式網站案例的經典結構02:行動呼喚
- 一頁式網站案例的經典結構03:產品特徵
- 一頁式網站案例的經典結構04:風險承諾
- 一頁式網站案例的經典結構05:常見問題
- 一頁式網站案例的經典結構06:終極呼喚
- 一頁式網站案例Apple設計的 3 項關鍵
- 一頁式網站案例Apple設計的關鍵01:產品介紹跟銷售文案清晰易懂
- 一頁式網站案例Apple設計的關鍵02:讓你想像購買的好處
- 一頁式網站案例Apple設計的關鍵03:使用多種號召性用語
- 小結:透過一頁式網站案例，幫你提升產品形象
