2020-5-27 資深UI設(shè)計(jì)者
任何一名設(shè)計(jì)師應(yīng)該都會(huì)接觸到運(yùn)營(yíng)活動(dòng)頁(yè)，產(chǎn)品落地頁(yè)此類(lèi)需求。而這些落地頁(yè)設(shè)計(jì)需求的業(yè)務(wù)目標(biāo)衡量標(biāo)準(zhǔn)都相當(dāng)明確——即轉(zhuǎn)化率。再進(jìn)一步，與我們的設(shè)計(jì)輸出直接相關(guān)的就是首頁(yè)轉(zhuǎn)化率/點(diǎn)擊率。這些數(shù)據(jù)通過(guò)埋點(diǎn)能很輕易地獲得，一般情況下，產(chǎn)品經(jīng)理會(huì)提前在需求文檔中標(biāo)明需要埋點(diǎn)的地方（埋點(diǎn)簡(jiǎn)單說(shuō)就是測(cè)量某個(gè)位置或者交互節(jié)點(diǎn)的具體數(shù)據(jù)，例如發(fā)生了多少次點(diǎn)擊），獲得數(shù)據(jù)用于驗(yàn)證產(chǎn)品最終是否符合預(yù)期，是否達(dá)到了理想的轉(zhuǎn)化效果。
叮~ 講到這我們應(yīng)該明確了一件事，整個(gè)落地的設(shè)計(jì)其實(shí)最終都是為那個(gè)關(guān)鍵數(shù)據(jù)服務(wù)，無(wú)論是點(diǎn)擊率還是轉(zhuǎn)化率，達(dá)到預(yù)期甚至超出預(yù)期，那你的設(shè)計(jì)就完美地完成了任務(wù)，這也是驗(yàn)證設(shè)計(jì)有效性的主要方法，將設(shè)計(jì)與數(shù)據(jù)關(guān)聯(lián)，用可量化的數(shù)據(jù)指標(biāo)來(lái)驗(yàn)證偏感性的視覺(jué)工作。
就這樣，設(shè)計(jì)與產(chǎn)品/運(yùn)營(yíng)的世紀(jì)大戰(zhàn)開(kāi)始了。因?yàn)槲覀兌加辛艘粋€(gè)共同的目標(biāo)，因此在產(chǎn)品的最終收益、期望效果方面互相都很明確。但在實(shí)現(xiàn)手段上，我們很輕易地產(chǎn)生了分歧。主要分歧點(diǎn)就是「按鈕在左還是按鈕在右」這個(gè)問(wèn)題上。我們需要理解，這不是一個(gè)簡(jiǎn)單的交互問(wèn)題，因?yàn)樗渲袚诫s了商業(yè)內(nèi)容。如果這是一個(gè)交互問(wèn)題，那我們很容易判斷，例如彈窗的主次按鈕應(yīng)該主右副左，這既符合平臺(tái)規(guī)范，也符合用戶(hù)認(rèn)知和操作習(xí)慣。
然而作為一個(gè)強(qiáng)商業(yè)屬性的落地頁(yè)，按鈕在左或者按鈕在右都有其合理性。我選擇左，而運(yùn)營(yíng)同學(xué)代表他們團(tuán)隊(duì)要求右。 于是我敗下陣來(lái)，當(dāng)然，雖然表面上設(shè)計(jì)師輸了，但我們?cè)趺茨芊敚谑俏蚁氡M辦法來(lái)驗(yàn)證左側(cè)放置按鈕才是更有利于轉(zhuǎn)化的形式。下面我們來(lái)看看不同的傾向?qū)?yīng)的設(shè)計(jì)原理。
產(chǎn)生左與右的爭(zhēng)執(zhí)其實(shí)主要源于設(shè)計(jì)與需求方的兩個(gè)判斷方向。首先說(shuō)一下我的判斷邏輯，按照已知經(jīng)過(guò)驗(yàn)證的理論，即 F 閱讀順序（尼爾森的用戶(hù)閱讀視線模型），用戶(hù)瀏覽落地頁(yè)的順序應(yīng)當(dāng)是從左往右自上而下，因此左上角的信息最早觸達(dá)用戶(hù)。在當(dāng)前主流的首圖式落地頁(yè)樣式下，首圖 banner 中的內(nèi)容應(yīng)當(dāng)置于左側(cè)，以使用戶(hù)更快地獲知產(chǎn)品的關(guān)鍵信息。
在落地頁(yè)首圖的體驗(yàn)文案本身就是一個(gè)設(shè)計(jì)的覆蓋范圍，因?yàn)樗苯雨P(guān)系到首頁(yè)的視覺(jué)傳達(dá)效率，即用戶(hù)需要花費(fèi)多長(zhǎng)時(shí)間、多少精力才能理解你的產(chǎn)品。我們往往在首頁(yè)體驗(yàn)文案中采用主標(biāo)題加副標(biāo)題的形式，著重解釋這個(gè)產(chǎn)品是個(gè)什么東西、用戶(hù)能從這獲得什么，往往通過(guò)主副文案搭配的形式，來(lái)完成整個(gè)大意的闡述。
基于此，核心內(nèi)容置于左側(cè)，用戶(hù)在快速掃視時(shí)能夠第一時(shí)間獲知產(chǎn)品信息，了解產(chǎn)品利益點(diǎn)，這與我們精心準(zhǔn)備整個(gè)網(wǎng)站，以及精心準(zhǔn)備誘導(dǎo)力文案的方法相契合。這是我做出內(nèi)容置于左側(cè)的設(shè)計(jì)決策的主要思路。可以看出，我這里主要參考的是 F 閱讀模型這一理論，根據(jù)這個(gè)經(jīng)驗(yàn)我得到的結(jié)論是 重要的信息應(yīng)當(dāng)擺放在左側(cè)以使用戶(hù)立即觸達(dá)核心信息，這將有利于接下來(lái)的引導(dǎo)或者轉(zhuǎn)化。
另一方面，運(yùn)營(yíng)同學(xué)又是基于什么考慮決定將核心內(nèi)容放在右側(cè)的呢？答案是操作習(xí)慣，理論化的話可以用費(fèi)茨定律概括，（目標(biāo)距離用戶(hù)距離越短，用戶(hù)觸達(dá)的效率越高）。考慮到大部分用戶(hù)使用右手操作，鼠標(biāo)也大都懸停在屏幕右側(cè)，因此，按鈕置于右側(cè)，用戶(hù)點(diǎn)擊的路徑變得更短，也就更容易觸達(dá)和轉(zhuǎn)化（純體驗(yàn)角度或者說(shuō)效率角度）。
你仔細(xì)閱讀這部分內(nèi)容，從分歧點(diǎn)到各自的理論支撐實(shí)際上都沒(méi)有太大的漏洞，為什么沒(méi)有漏洞？因?yàn)榇_實(shí)都沒(méi)有錯(cuò)誤，也都存在其合理性。例如我們常用的購(gòu)物 APP 會(huì)把按鈕置于右下角，用戶(hù)操作起來(lái)必然比左上角的按鈕更加容易。那么在這兩種分析都合理的背景下，我們要對(duì)比或爭(zhēng)論的其實(shí)不是哪個(gè)判斷是錯(cuò)誤的，而是哪個(gè)判斷更有利，更合理，能夠帶來(lái)更多的數(shù)據(jù)轉(zhuǎn)化。因此，這個(gè)問(wèn)題最終由對(duì)錯(cuò)問(wèn)題，轉(zhuǎn)化為一個(gè)優(yōu)劣問(wèn)題。
有些人很機(jī)智，這個(gè)時(shí)候肯定會(huì)想，既然左邊最容易觸達(dá)信息，右邊最容易觸達(dá)按鈕操作，那左邊放置內(nèi)容，右側(cè)放置操作不就完美解決了嗎？哎呀，讀者真聰明。
由于 F 閱讀的邏輯，將展示性質(zhì)的「內(nèi)容」放置于左側(cè)，使用戶(hù)更快觸達(dá)關(guān)鍵信息，由于費(fèi)茨定律，以及多年來(lái)養(yǎng)成的用戶(hù)習(xí)慣（操作組件在右側(cè)，當(dāng)然現(xiàn)在很多放在中間的情況）將需要執(zhí)行的操作置于右側(cè)，使用戶(hù)快速交互并完成任務(wù)。有一定道理，甚至在實(shí)際落地產(chǎn)品中我們也能看到一些類(lèi)似的設(shè)計(jì)，例如豆瓣。 這是一種左與右的妥協(xié)
但需要注意的是，豆瓣產(chǎn)品的右側(cè)放置的是較為復(fù)雜的交互模塊，例如完整的登錄注冊(cè)模塊。在該場(chǎng)景下，用戶(hù)在交互路徑更短的右側(cè)區(qū)域執(zhí)行交互效率要明顯高于左側(cè)區(qū)域。
那么下面開(kāi)始論述按鈕置于左側(cè)的觀點(diǎn)
論點(diǎn)一：排版的限制
豆瓣的形式對(duì)于落地頁(yè)產(chǎn)品，可能并不適用。主要有兩方面原因。我們都知道，產(chǎn)品落地頁(yè)首屏的組成為體驗(yàn)文案，主 CTA，插畫(huà)配圖三部分。常規(guī)做法是插畫(huà)作為一組信息置于一側(cè)，文案加按鈕作為一組信息置于一側(cè)。因?yàn)椋w驗(yàn)文案與按鈕具有強(qiáng)關(guān)聯(lián)性，同時(shí)按鈕與文案作為一組信息，才能與另一側(cè)的插畫(huà)搭配構(gòu)建平衡的布局，呈現(xiàn)比較優(yōu)美的視覺(jué)效果。
請(qǐng)登錄后查看原圖，因此，豆瓣那種妥協(xié)方式并不適用于商業(yè)類(lèi)落地頁(yè)。因?yàn)閮?nèi)容和操作本身是一體的，這源于排版的規(guī)整性的限制，按鈕和文案只能同時(shí)存在于一側(cè)，如果刻意去追求左側(cè)內(nèi)容，右側(cè)操作，效果就像下面這樣。一方面，只靠文案和按鈕無(wú)法撐起左右兩個(gè)區(qū)域，一方面文案和按鈕被割裂開(kāi)，用戶(hù)的視線由文案轉(zhuǎn)到按鈕的路徑過(guò)長(zhǎng)，體驗(yàn)較差。（文案與按鈕成組后，用戶(hù)可以在閱讀內(nèi)容產(chǎn)生動(dòng)機(jī)后立即觸達(dá)交互按鈕并完成轉(zhuǎn)化）
論點(diǎn)二：文案與配圖孰輕孰重
如果你親自體驗(yàn)這兩種區(qū)別的落地頁(yè)（左圖右文/左文右圖），你會(huì)發(fā)現(xiàn)有一個(gè)共同點(diǎn)，就是在某個(gè)區(qū)域的停留時(shí)長(zhǎng)，沒(méi)錯(cuò)就是內(nèi)容區(qū)域。以下圖的頂部卡片區(qū)域?yàn)槔陂喿x時(shí)我的瀏覽情況是，大致地掃視左側(cè)的插畫(huà)，然后注視右側(cè)文字區(qū)，了解文章的具體內(nèi)容，并在此區(qū)域停留較長(zhǎng)時(shí)間，畢竟仔細(xì)閱讀需要花費(fèi)時(shí)間。
這就涉及到一個(gè)問(wèn)題，插畫(huà)與內(nèi)容哪個(gè)更重要？其實(shí)答案很明顯，我們只需要舍棄掉其中一項(xiàng)來(lái)測(cè)試下，看看哪個(gè)內(nèi)容的缺失會(huì)對(duì)用戶(hù)理解設(shè)計(jì)傳達(dá)的語(yǔ)義產(chǎn)生較大影響。OK，我覺(jué)得沒(méi)必要測(cè)試了（虛晃一槍?zhuān)：苊黠@，刪除插畫(huà)后，我們?nèi)匀豢梢酝ㄟ^(guò)文章的標(biāo)題來(lái)獲知文章概要等關(guān)鍵信息，就像落地頁(yè)首屏的體驗(yàn)文案，即便沒(méi)有插畫(huà)我們也能通過(guò)首頁(yè)文案來(lái)獲知這個(gè)產(chǎn)品是什么，能夠?yàn)槲規(guī)?lái)什么。
然而如果去掉關(guān)鍵信息，去掉標(biāo)題與按鈕，僅憑插畫(huà)我們無(wú)法分辨當(dāng)前頁(yè)面到底在講述什么東西。設(shè)計(jì)本身就像是人與人的交流，產(chǎn)品就是我們，而用戶(hù)則是我們的交流對(duì)象，去掉核心的文案，相當(dāng)于把我們自己變成了啞巴，而去掉插畫(huà)，最多相當(dāng)于我們交流時(shí)面無(wú)表情罷了。
因此，在商業(yè)落地頁(yè)中，我們以轉(zhuǎn)化為核心目標(biāo)，而能夠更快地觸達(dá)最重要的信息顯然是明智之舉，因此我們希望將核心的文案內(nèi)容置于左側(cè)。
（另外，一圖勝千言的原理只適用于個(gè)別場(chǎng)景，例如數(shù)據(jù)可視化。設(shè)計(jì)人員通過(guò)將數(shù)值數(shù)據(jù)轉(zhuǎn)化為易于理解的柱狀圖扇形圖，來(lái)傳達(dá)數(shù)據(jù)結(jié)論。而視覺(jué)修飾性質(zhì)的插畫(huà)則無(wú)法做到準(zhǔn)確表意，我們通常在產(chǎn)品設(shè)計(jì)中見(jiàn)到的插畫(huà)更多的是在情感上和審美上給予我們一定的愉悅，但想要準(zhǔn)確描述關(guān)鍵信息，還是需要文字作為核心角色）
論點(diǎn)三：用戶(hù)會(huì)因?yàn)楸阌诓僮鞫a(chǎn)生動(dòng)機(jī)？
另一點(diǎn)同樣值得我們思考，即用戶(hù)真的會(huì)因?yàn)槟硞€(gè)按鈕更容易點(diǎn)擊而被轉(zhuǎn)化嗎？或者我們換個(gè)形式問(wèn)，假設(shè)你是一名男性，你會(huì)因?yàn)榘粹o在鼠標(biāo)附近而選擇點(diǎn)擊購(gòu)買(mǎi)女士?jī)?nèi)衣嗎？你會(huì)在自己財(cái)務(wù)狀況較差的時(shí)候因?yàn)榘粹o在鼠標(biāo)附近而點(diǎn)擊購(gòu)買(mǎi)品嗎？在大多數(shù)理性場(chǎng)景下，我相信你不會(huì)這樣做。
所以這時(shí)候要引入福格模型，用來(lái)闡述產(chǎn)生轉(zhuǎn)化的整個(gè)路徑。福格模型簡(jiǎn)單來(lái)講就是一個(gè)公式：B=MAT。B(behavior) 代表行為，M(motivation) 代表動(dòng)機(jī)也就是用戶(hù)需求，A(ability) 代表用戶(hù)使用的門(mén)檻，T(trigger) 代表觸發(fā)。也就是用戶(hù)行為的產(chǎn)生需要用戶(hù)需求為基礎(chǔ)，需要保證產(chǎn)品的易用性，但是這還不夠，在這個(gè)基礎(chǔ)上我們還需要在產(chǎn)品中通過(guò)設(shè)計(jì)觸發(fā)用戶(hù)。完成轉(zhuǎn)化的三個(gè)關(guān)鍵要素是，動(dòng)機(jī)、能力、觸發(fā)，缺一不可。
福格模型幫助我們解決了這個(gè)疑問(wèn)。用戶(hù)的購(gòu)買(mǎi)或者轉(zhuǎn)化始于動(dòng)機(jī)，就像我上面舉的例子，如果一個(gè)用戶(hù)根本對(duì)產(chǎn)品沒(méi)有需求（男性對(duì)女性?xún)?nèi)衣），那就不會(huì)產(chǎn)生動(dòng)機(jī)，在沒(méi)有動(dòng)機(jī)的情況下，后面兩項(xiàng)內(nèi)容，能力或者觸發(fā)都沒(méi)有意義，無(wú)法發(fā)揮作用。整個(gè)轉(zhuǎn)化的流程可以參考下方的示意圖。
實(shí)際上對(duì)于那些有強(qiáng)烈動(dòng)機(jī)購(gòu)買(mǎi)或使用產(chǎn)品的用戶(hù)，你的一切設(shè)計(jì)都沒(méi)有太大意義，因?yàn)橛脩?hù)有強(qiáng)烈訴求的情況下，他會(huì)發(fā)揮主觀能動(dòng)性去找到轉(zhuǎn)化的入口，主動(dòng)完成轉(zhuǎn)化。同理，有些用戶(hù)是完全不會(huì)產(chǎn)生動(dòng)機(jī)的，不是目標(biāo)用戶(hù)群。
設(shè)計(jì)策略主要針對(duì)的是有動(dòng)機(jī)但不強(qiáng)烈（某種程度上有需求或者被吸引），以及暫時(shí)沒(méi)有動(dòng)機(jī)的兩類(lèi)用戶(hù)。通過(guò)我們的首屏及詳細(xì)內(nèi)容，痛點(diǎn)利益點(diǎn)的介紹，來(lái)放大用戶(hù)動(dòng)機(jī)，制造共鳴點(diǎn)，創(chuàng)造美好的想象空間，使用戶(hù)涌現(xiàn)強(qiáng)烈動(dòng)機(jī)。然后轉(zhuǎn)化就自然而然的產(chǎn)生。
因此，在首屏我們的核心要義是通過(guò)內(nèi)容設(shè)計(jì)來(lái)觸發(fā)用戶(hù)動(dòng)機(jī)，而不是想方設(shè)法觸發(fā)操作。走捷徑的誤觸方案設(shè)計(jì)能保證百分百的觸發(fā)率，但那種觸發(fā)沒(méi)有任何意義。到這里我們應(yīng)該明確了，用戶(hù)會(huì)因?yàn)楹玫膬?nèi)容所觸發(fā)的動(dòng)機(jī)而買(mǎi)單，但不會(huì)因?yàn)槟惆寻粹o放在我手邊而產(chǎn)生購(gòu)買(mǎi)沖動(dòng)。
因此，我的結(jié)論是，用戶(hù)更有可能因?yàn)樽髠?cè)展示的強(qiáng)洞察力的文案而產(chǎn)生動(dòng)機(jī)，而動(dòng)機(jī)是整個(gè)轉(zhuǎn)化的起始，也是最關(guān)鍵的一點(diǎn)，有了動(dòng)機(jī)，觸發(fā)（按鈕位置）的效率即便低一點(diǎn)，但轉(zhuǎn)化仍然很有可能繼續(xù)（就像動(dòng)機(jī)產(chǎn)生了慣性，有了強(qiáng)烈的動(dòng)機(jī)會(huì)自發(fā)地去尋找觸發(fā)器，去尋找按鈕以自主完成轉(zhuǎn)化，但觸發(fā)器不會(huì)有慣性）
這個(gè)觀點(diǎn)論述下來(lái)，主要涉及到 F 閱讀模型，費(fèi)茨定律以及福格模型，算是很基本的設(shè)計(jì)原則，也順便幫大家重溫一下。最后，我們?cè)倌靡恍┢渌麑?shí)證來(lái)進(jìn)一步論述，例如國(guó)內(nèi)一線公司的落地頁(yè)設(shè)計(jì)。
1. 一線公司落地頁(yè)布局
2. 全球獨(dú)角獸企業(yè)落地頁(yè)
文章來(lái)源：優(yōu)設(shè) 作者：南山可
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn