怎樣設計轉化頁?重點關注2個方面

編輯導語:在資訊多樣化的網際網路中,要想吸引使用者的眼球,設計頁面的資訊展示點是有講究的。互動設計師做轉化頁面的出發點是什麼?可以採取什麼手段去承載流量以及提高轉化率。這些都是在設計轉化頁時,需要重點關注的資訊點。

怎樣設計轉化頁?重點關注2個方面

上個月淘寶新版本訂單頁的改版大家對整個改版都給與了高度讚譽,今天再次體驗,發現並不是所有商品的訂單頁都是新版樣式,想來淘寶應該也在進行測試,去驗證改版的有效性。

先不管後面資料如何,今天我們來聊聊,互動設計師在做這種轉化頁面出發點是什麼?可以採取什麼手段去承載流量,提高轉化。

怎樣設計轉化頁?重點關注2個方面

從上圖可以看出在未增加新功能,新頁面的情況下,設計師對頁面資訊、結構進行了重整,你會發現更注重使用者價值的傳遞,整個頁面更加高效,使用者關注的資訊點都很突出,並且有這麼多優惠,讓使用者心理感覺更省錢了。以上這些都是為了去傳遞使用者價值,不斷的刺撓使用者心防,讓使用者破防!今天從互動設計師的角度闡述下如何去做轉化頁。

怎樣設計轉化頁?重點關注2個方面

一、凸顯價值

在這個資訊爆炸的時代,人都不願意在無意義的事情上浪費一秒鐘,而面對產品介面也是一樣,看一眼沒有叢中自己能得到什麼可能就划走了。所以在轉化頁這種承流量的頁面,凸顯使用者價值非常重要。

我們首先應該明確你目標使用者想要的到底是什麼?是優惠?是承諾?還是被認可?如:購物類產品,使用者在平臺上可以獲得什麼價值?除了可以不用去實體店在家就可以下單(滿足惰性)外,在使用APP過程中還能獲得什麼價值?購物的爽感、有優惠便宜感覺自己賺到了?所以具體設計轉化頁扥的時候就是要抓住這些最關鍵點,然後進行放大,不斷刺撓使用者心防。

1. 讓使用者感覺省錢

其實絕大多數使用者都不是理性消費者,因為人性原因,我們的思考方式大多都是被系統1(無意識且快速,不費腦力)佔據的,讓消費者失去了理性的誘因有很多,比如:佔便宜、錯過、恐懼、好奇、虧欠、虛榮、逆反等等。其中便宜和錯過是最常用於設計中的。

(1)直接 | 透過優惠標籤、對比、簡單粗暴告知省了多少錢

怎樣設計轉化頁?重點關注2個方面

便宜並不是真的便宜,而是讓消費者感覺到佔了小便宜。相比較拼團特惠標籤,直接將使用者可以省多少錢,對使用者的衝擊會更強。

(2)間接 | 營造一種錯過就虧了、就沒有了的感覺

這在心理學叫:損失厭惡,它指的是人們對已經擁有的事物會習慣性地視若無睹,只有在失去或即將失去的時候才會產生加倍的珍惜感。對應到收益與損失上在人們心理敏感程度上來看,比起收益,人們對於損失更加敏感,這就是為什麼在雙十一期間,各大商家都打著:“全年最低價,再不買就漲價、不買你就虧了、搶光了…”的標語,但是這種只是感覺上給人們造成好像真的“虧大了”,但是就算買到其實也未必賺到。

所以,我們在具體介面上也可以適當採用這個原理技巧,增加緊迫感和稀缺性元素,營造一種錯過就虧了的感覺,讓使用者在猶豫時,能夠斬釘截鐵的按下 “轉化按鈕”!

怎樣設計轉化頁?重點關注2個方面

上圖VUE、脈脈都是採用“限時”的這個手法來因遭稀缺性與緊迫感,從而增加使用者購買慾望,而京東則採用“僅剩1件”“一年曆史最低價”的方式來營造緊迫感。

2. 強化產品賣點打消使用者疑慮

你可以看到現在各大電商上的物品的展示圖都從原來的靜態圖向動態圖及影片化方向演變,這這種手段就是為了更加高效,直觀的展示產品本身的特質,讓使用者看了一目瞭然。在透過分析得出產品最終賣點後,在呈現形式上互動設計師也需要多多考慮。以下重點在展示產品賣點方式上進行闡述。

(1)動態化展示

淘寶上的商品動圖,非常直觀的展示產品核心特性,幫助消除使用者疑慮。

怎樣設計轉化頁?重點關注2個方面

(2)對比型展示

透過列表直接展示普通使用者和會員使用者間的差異,這樣的方式直觀,代入感強,能夠很好體現產品本身的服務價值,更容易打消使用者購買疑慮。

怎樣設計轉化頁?重點關注2個方面

(3)平鋪直述

直接將使用者可以獲得特權展示,告知使用者可獲得哪些權益與服務,一般透過icon+文案的方式直接呈現給使用者。

怎樣設計轉化頁?重點關注2個方面

這樣的方式雖然沒什麼大問題,但是在比較多許可權的時候,細看其實會不知所云,不知道具體是幹嘛用的,所以如果要採用這樣的方式建議搭配輔助說明。

怎樣設計轉化頁?重點關注2個方面

3. 亮資料(權威性)

將產品的資料直接展示出來,透過多維度資料權威展示產品亮點。

怎樣設計轉化頁?重點關注2個方面

所以在凸顯價值感知上我們可以怎麼做:

建立標籤體系,透過標籤優惠讓使用者感覺省錢

營造稀缺與緊迫感,讓使用者感覺再不行動就虧了

強調產品核心賣點且直觀展示

資料化闡述可信度更高,更有權威性

二、提供清晰互動動線

互動本身是一個動態的過程,轉化頁有時需要承載比較多的關鍵資訊,而如何讓這些資訊清晰,有序的展示在使用者面前並引發使用者互動是互動設計師需要思考的。可以從 頁面框架、操作引導上去思考與使用者的關係。

1. 頁面框架

轉化頁面的上的資訊需要非常高效的傳達給使用者,應採用最高效的方式展示給使用者。因為不同於購物類、影片類APP使用者以“逛一逛、刷一刷”看看有啥好看的心態,漫無目的的瀏覽,而是會集中精力尋找價值從而說服自己去買,所以我們 框架儘量線性,符合自上而下,自左往右的閱讀習慣,所以放到頁面上建議 直接大模組化從上至下排布,這樣能讓頁面更加規整,也符合與使用者的視線。

怎樣設計轉化頁?重點關注2個方面

以上是我在各大應用會員轉化頁的框架,可以發現,拋開內容資訊,整體框架前兩個會讓人感覺更舒服,這樣的搭配更加流暢性,比例更好,不會太分割,其實在設計模組化卡片大小時也可以考慮下黃金比例。

怎樣設計轉化頁?重點關注2個方面

2. 操作引導

說到引導我們可以來看一看下方案例,僅僅增加了很小的一個細節就達到質的效果。

怎樣設計轉化頁?重點關注2個方面

所以在做轉化頁面時,對關鍵按鈕我們也需要採取一些方式讓使用者注意到,並吸引使用者點選。主要可以從按鈕的位置、大小顏色,動效、文案4個方面來思考。

3. 位置

由於轉化頁需要展示較多資訊給到使用者充分思考,所以一般根據使用者的瀏覽習慣,按鈕一般放下右下角視覺落點處,這樣能後比較好的組織頁面內容,突出又不強頁面主要視線。

怎樣設計轉化頁?重點關注2個方面

4. 大小和顏色

重要的轉化按鈕大小絕對不能太小,但也不宜過大。記得UI中有關於按鈕大小的計算公式,可以在這個公式基礎上進行靈活調整。有些寬度很寬是為了加大使用者點選熱區,讓使用者更容易點到。

怎樣設計轉化頁?重點關注2個方面

顏色一般使用應用主題色,如果有多個按鈕,主按鈕顏色儘量有一定對比,這樣才能將我們想要讓使用者點選的那個跳出來。

怎樣設計轉化頁?重點關注2個方面

5. 動效

動效一般在按鈕上增加一些掃光、光效、按鈕本身輕微動效即可,只要很微小的效果就可以,因為人眼在一堆靜態內容中很容易注意到動的東西,如果做的很強烈就本末倒置了。

怎樣設計轉化頁?重點關注2個方面

6. 文案

按鈕上的文案一定程度上也能夠促進轉化,所以在文案上表意的基礎上可結合我上面講述的第一部分進行文案的設定,加強使用者感知!

怎樣設計轉化頁?重點關注2個方面

三、寫在最後

以上講述了互動設計師在面對重要的轉化頁時應該要著重將價值簡單高效的傳達給使用者,加強使用者的感知,可以透過貼標籤、緊迫感文案、動態化、對比化、平鋪直述、亮資料內容展示,更好的將產品價值傳達給到使用者,在具體內容佈局上建議準尋線性的框架搭配顏色、動效、引導性文案的方式引導使用者操作。

本文由 @小發哥 原創釋出於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

頂部