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