對(duì)于設(shè)計(jì)師來(lái)說(shuō)魄懂，工作中的挑戰(zhàn)之一就是創(chuàng)建一個(gè)看起來(lái)不錯(cuò)溶耘，而且還能有很好轉(zhuǎn)換率的登陸頁(yè)面谐区。您可以理解為什么這是案例設(shè)計(jì)的目標(biāo)和業(yè)務(wù)目標(biāo)常常是不一致的叉瘩。
當(dāng)產(chǎn)品相關(guān)人員創(chuàng)建登陸頁(yè)時(shí)竟宋，他們更專(zhuān)注于布局提完，基本原則和信息層次。然而丘侠，設(shè)計(jì)師最關(guān)心的是用戶體驗(yàn)徒欣，顏色，排版和風(fēng)格元素蜗字，有助于建立強(qiáng)大而有效化的準(zhǔn)則打肝。
轉(zhuǎn)化 最優(yōu)設(shè)計(jì)本質(zhì)上希望使這兩個(gè)思想學(xué)派相一致脂新。因此，不僅要專(zhuān)注于UX粗梭，還要強(qiáng)調(diào)勸導(dǎo)和轉(zhuǎn)化争便，同時(shí)將它與將導(dǎo)致更好的網(wǎng)站的美學(xué)選擇合并。
1.選擇正確的布局?
產(chǎn)品經(jīng)理非常了解断医，頁(yè)面上不同元素的布局會(huì)影響轉(zhuǎn)化率滞乙。這就是為什么他們要求設(shè)計(jì)師將最重要的信息放在首要位置，并從檢出頁(yè)面中刪除導(dǎo)航菜單鉴嗤，即使這個(gè)操作違反了UX設(shè)計(jì)的原則斩启。
但是，您可以采用一些理論原則來(lái)創(chuàng)建轉(zhuǎn)化優(yōu)化的著陸頁(yè)醉锅，而不會(huì)影響用戶體驗(yàn)：
A.按照三分法規(guī)定設(shè)計(jì)
如果你曾經(jīng)拍過(guò)攝影課兔簇，你可能聽(tīng)說(shuō)過(guò)三分之一的規(guī)則。這個(gè)規(guī)則越少越好荣挨，這個(gè)規(guī)則說(shuō)男韧，任何形象在分為9個(gè)相等的部分時(shí)朴摊，會(huì)有更多的緊張和精力默垄。
來(lái)自維基百科的這個(gè)GIF說(shuō)明它完美：
三分之一的規(guī)則是攝影師并不總是把他們的主題放在框架中的原因。世界上最著名的一些照片遵循這一規(guī)則甚纲。
這里有一個(gè)例子：
三分法則不僅適用于照片 - 它也適用于登錄頁(yè)口锭。看看WebDAM的這個(gè)登陸頁(yè)面：
或者來(lái)自Inbound Emotion的一個(gè)：
根據(jù)設(shè)計(jì)理論和眼睛定視來(lái)看介杆，3×3網(wǎng)格線的交點(diǎn)在任何頁(yè)面上都得到最多的關(guān)注鹃操。因此，放置在這些網(wǎng)格線上的元素也會(huì)更受關(guān)注春哨。
“使用三分法規(guī)則來(lái)設(shè)計(jì)的布局視覺(jué)看上去會(huì)更舒適荆隘。”
2.按照菲茨法則的重要內(nèi)容
訓(xùn)練人眼遵循層次結(jié)構(gòu)赴背。我們的眼睛自然地從大到大的元素發(fā)展椰拒。尼爾森進(jìn)行的眼睛跟蹤研究也顯示：
在這里，用戶比標(biāo)題更多地集中在人物圖像上凰荚，并且他們的眼睛比較小的段落文字更長(zhǎng)的字體燃观。
與此相似的另一個(gè)原理是菲茨定律。最初由心理學(xué)家保羅·菲茨（Paul Fitts）在1954年制定的描述人機(jī)交互的方法便瑟，該法規(guī)定用戶移動(dòng)到屏幕上對(duì)象的速度是對(duì)象的接近度（與用戶）的比例及其大小的函數(shù)缆毁。
在數(shù)學(xué)上，這表示如下：
結(jié)論：目標(biāo)越大到涂，完成點(diǎn)擊越快脊框，時(shí)間越短颁督。同樣地，目標(biāo)越近浇雹，指向越快适篙，完成點(diǎn)擊時(shí)間越短。也就是說(shuō)箫爷，定位點(diǎn)擊一個(gè)目標(biāo)的時(shí)間嚷节，取決于目標(biāo)與當(dāng)前位置的距離，以及目標(biāo)的大小虎锚。
在桌面應(yīng)用中硫痰，這意味著保持最重要的按鈕靠近角落，占據(jù)主要像素空間（也稱(chēng)為“素?cái)?shù)像素”）窜护。
例如效斑，Word中的素?cái)?shù)像素角落都重要的按鈕：
因?yàn)榫W(wǎng)頁(yè)是可滾動(dòng)的，所以網(wǎng)站缺少素?cái)?shù)柱徙。在這種情況下缓屠，將屏幕的中心作為主像素區(qū)域是明智之舉。網(wǎng)頁(yè)設(shè)計(jì)師必須“選擇一個(gè)更緊湊护侮，居中的布局”敌完，光標(biāo)位于屏幕中心或附近。按照菲茨定律羊初，任何靠近該區(qū)域的大按鈕將產(chǎn)生更高的點(diǎn)擊次數(shù)滨溉。
因此，您會(huì)看到這樣的著陸頁(yè)长赞，CTA和主要文字占據(jù)屏幕上的主要區(qū)域晦攒。
請(qǐng)記住，F(xiàn)itts定律是一個(gè)二進(jìn)制對(duì)數(shù)得哆，因此按鈕的可點(diǎn)擊性不會(huì)線性增加（即300%的按鈕不會(huì)超過(guò)300%的點(diǎn)擊量）脯颜。相反，較小的更改導(dǎo)致更高的可點(diǎn)擊回報(bào)贩据。
因此栋操，通過(guò)將CTA放置在屏幕中心附近，使其稍微大于周?chē)乩稚瑁褪莻€(gè)很好的做法讼庇。
來(lái)自Litmus的這個(gè)頁(yè)面也是一個(gè)很好的例子：
CTA占據(jù)屏幕的中心，并且在頁(yè)面的前半部分容易看到近尚。
這是MarketStrong的另一個(gè)例子：
在這里蠕啄，CTA在折疊上方容易看到，而標(biāo)題文字占據(jù)主屏幕的不動(dòng)產(chǎn)，缺少導(dǎo)航欄和小標(biāo)志歼跟。
這是您可以立即在自己的設(shè)計(jì)中使用的東西 - 最小化屏幕上非必需品和媳，并將最重要的元素更接近屏幕中心，并將其放置在折疊上方哈街。
“更小的變化導(dǎo)致可點(diǎn)擊的回報(bào)更大留瞳。”
3.選擇正確的字體
你可能已經(jīng)知道排版的基礎(chǔ)知識(shí)了骚秦。您也可能會(huì)知道她倘，這兩個(gè)基本類(lèi)別，襯線和無(wú)襯線作箍，可以進(jìn)一步分為不同的字體硬梁，如人文主義，幾何胞得，現(xiàn)代荧止，板條等。
轉(zhuǎn)化率優(yōu)化專(zhuān)家同時(shí)只考慮一件事：這種字體會(huì)導(dǎo)致更好的轉(zhuǎn)換效果嗎阶剑？
轉(zhuǎn)換優(yōu)化設(shè)計(jì)基本上融合了這兩個(gè)問(wèn)題跃巡。因此，您可以單獨(dú)選擇基于審美或可用性考慮的字體牧愁，而不是選擇以下字體：
A.提高品牌知名度素邪，從而被動(dòng)地轉(zhuǎn)換轉(zhuǎn)換目標(biāo)。
B.提高人們閱讀頁(yè)面的速度和便利性递宅，同時(shí)也強(qiáng)調(diào)轉(zhuǎn)換為主題的類(lèi)型元素娘香，如標(biāo)題。
我們來(lái)看看這些更詳細(xì)办龄。
排版和品牌知覺(jué)
看看紐約時(shí)報(bào)的這個(gè)頁(yè)面：
現(xiàn)在來(lái)看看這個(gè)頁(yè)面從Buzzfeed：
這兩個(gè)品牌都使用非常不同的字體。NYT使用襯線字體（NYT-Cheltenham和Georgia）淋昭，而B(niǎo)uzzfeed使用2個(gè)無(wú)襯線字體（Helvetica Neue Light和Proxima Nova）俐填。
這與他們的品牌形象相一致：“紐約時(shí)報(bào)”被認(rèn)為是嚴(yán)肅的新聞學(xué)家，而B(niǎo)uzzfeed仍被視為充滿“有趣”貓GIF的網(wǎng)站翔忽。
設(shè)計(jì)師們已經(jīng)知道這一點(diǎn)：排版和品牌標(biāo)識(shí)是相關(guān)的英融。
例如，有一項(xiàng)研究認(rèn)為排版是品牌是否被視為“真誠(chéng)”歇式，“激動(dòng)人心”或“復(fù)雜”的核心要素驶悟。
讀者對(duì)紐約時(shí)報(bào)的另一個(gè)測(cè)試，測(cè)試結(jié)果表明材失，讀者信賴(lài)最多以Baskerville字體編寫(xiě)的研究痕鳍。另一方面，漫畫(huà)漫畫(huà)中寫(xiě)的研究被認(rèn)為是“最不信任的”。
對(duì)于轉(zhuǎn)換優(yōu)化設(shè)計(jì)笼呆，請(qǐng)嘗試使用與你希望讀者感受的情緒相呼應(yīng)的字體來(lái)進(jìn)行設(shè)計(jì)
也就是說(shuō)熊响，使用像Georgia這樣的真誠(chéng)的字體在可靠性至關(guān)重要的銷(xiāo)售頁(yè)面上，并且在非轉(zhuǎn)換導(dǎo)向的博客頭條上可以使用更“有趣”的字體诗赌，如Playfair汗茄。
一般來(lái)說(shuō)，您可以劃分一些流行的字體如下：
真誠(chéng)：Georgia, Baskerville
復(fù)雜：Garamond Pro, Playfair Display
大膽：Impact, Oswald, Gotham Condensed Bold
現(xiàn)代：Helvetica, Avenir, Roboto, Futura
樂(lè)趣：Lobster, Barrio
排版和可讀性
您所做的字體選擇不僅會(huì)影響您的讀者感受铭若，還會(huì)影響讀者的閱讀速度洪碳。
更重要的是，你的類(lèi)型選擇直接決定了用戶關(guān)注的頁(yè)面元素叼屠。
例如偶宫，考慮一下大膽的裝飾太平洋字體來(lái)作為標(biāo)題：
這當(dāng)然會(huì)引起你的注意，但是當(dāng)段落使用相同的字體時(shí)环鲤，這是最終結(jié)果：
這不是很容易閱讀纯趋。它也不讓任何特定的頁(yè)面元素脫穎而出，這對(duì)于轉(zhuǎn)換是不利的冷离。
除了在標(biāo)題和正文中使用不同的字體外吵冒，還有其他一些方法來(lái)解決這個(gè)問(wèn)題。
可讀性西剥，行高和段長(zhǎng)度
這是CROs和UX設(shè)計(jì)人員同時(shí)得出的結(jié)論：更長(zhǎng)的行高等于更好的可讀性痹栖。
例如，下面的第一段更容易閱讀瞭空，因?yàn)樾懈吆艽蟆?/p>
雖然線高度對(duì)于更好的可讀性很重要揪阿，但更重要的因素是段落長(zhǎng)度，即每段的行數(shù)/字?jǐn)?shù)咆畏。
例如南捂，大多數(shù)老派銷(xiāo)售頁(yè)面幾乎總是限于一句或兩句話：
結(jié)合豐富的線條高度，這些簡(jiǎn)短的段落將使閱讀您的登錄頁(yè)更容易一些旧找。
可讀性和字體大小
根據(jù)一項(xiàng)研究表明溺健，較大的字體對(duì)讀者影響更大，這也增強(qiáng)了閱讀能力钮蛛。
你可以在這個(gè)例子中看到這一點(diǎn)：
現(xiàn)在在段落文本中使用大于16px的字體是標(biāo)準(zhǔn)的鞭缭。一些流行的網(wǎng)站，如中等使用的字體大到21px魏颓。
這不僅對(duì)CRO有好處岭辣，而且還有一個(gè)很好的UX操作，因?yàn)檩^大的字體更有可能使您的內(nèi)容更容易訪問(wèn)甸饱。
選擇正確的顏色
大多數(shù)成熟品牌都有一套“品牌顏色”沦童，用于所有營(yíng)銷(xiāo)材料，包括登陸頁(yè)。
例如搞动，這是Twitter的品牌顏色設(shè)置：
如果你的目標(biāo)是提高轉(zhuǎn)化次數(shù)躏精，則可能必須偏離目標(biāo)網(wǎng)頁(yè)中的品牌顏色，特別是當(dāng)你的品牌顏色不利于轉(zhuǎn)化鹦肿。
對(duì)于轉(zhuǎn)化優(yōu)化設(shè)計(jì)矗烛，請(qǐng)?jiān)谶x擇登陸頁(yè)顏色時(shí)按照以下提示進(jìn)行操作：
1.選擇引起您的登陸頁(yè)情感的顏色
你可能知道不同的顏色與不同的情感和場(chǎng)合有關(guān)。你走進(jìn)綠色和感受的藍(lán)色箩溃，當(dāng)你失意瞭吃。
同樣，你把綠色與自然聯(lián)系起來(lái);白色與雪和純潔涣旨，紅色與饑餓歪架，權(quán)力和侵略;黃色與陽(yáng)光的溫暖都聯(lián)系起來(lái)。
這就是為什么許多食品公司在他們的標(biāo)志中使用紅色的原因：
為什么綠色是太陽(yáng)能城等環(huán)保公司最喜歡的顏色：
當(dāng)您選擇登陸頁(yè)的顏色時(shí)霹陡，請(qǐng)選擇與你的產(chǎn)品或登陸頁(yè)有相同的情緒和蚪。
也就是說(shuō)，如果您希望客戶將您視為未來(lái)品牌烹棉，可以使用黑白色和灰色/銀色的主題攒霹，如特斯拉：
同樣，如果您希望您的品牌被視為值得信賴(lài)的商業(yè)品牌浆洗，可以使用藍(lán)色和白色的“企業(yè)”顏色催束。
看看這個(gè)Salesforce著陸頁(yè)：
請(qǐng)記住，顏色是有文化影響的伏社。紅色在西方可能被視為侵略的象征抠刺，但在中國(guó)，它被認(rèn)為是運(yùn)氣和財(cái)富的象征摘昌。
2.使用互補(bǔ)色對(duì)比
組合時(shí)互補(bǔ)的顏色相互抵消速妖。然而，當(dāng)它們彼此相鄰時(shí)第焰，它們產(chǎn)生最高的對(duì)比度（白黑組合之外）买优。這就是為什么你看到這么多登陸頁(yè)在設(shè)計(jì)中使用補(bǔ)色。
例如挺举，此登陸頁(yè)使用橙色作為其按鈕，藍(lán)色用于周邊地區(qū) - 2種互補(bǔ)色烘跺。
這個(gè)網(wǎng)頁(yè)可能會(huì)獲得穩(wěn)固的轉(zhuǎn)換湘纵。
類(lèi)似地，Groupon的這個(gè)頁(yè)面使用綠色的背景和紅色的按鈕：
注意圖像中的模型如何面對(duì)形式滤淳，引起您的注意梧喷。
互補(bǔ)色彩是所有登陸頁(yè)的基礎(chǔ)。
3.選擇與您的目標(biāo)人口統(tǒng)計(jì)信息相匹配的顏色
研究表明，顏色在我們決定購(gòu)買(mǎi)的地方起著重要的作用铺敌。消費(fèi)者傾向于特別強(qiáng)烈地對(duì)已經(jīng)與其年齡或性別進(jìn)行文化關(guān)聯(lián)的顏色汇歹。
一項(xiàng)研究發(fā)現(xiàn)，男性往往傾向于藍(lán)色偿凭，而女性往往喜歡柔和的粉色色調(diào)产弹。
從Birchbox查看此著陸頁(yè)：
現(xiàn)在看看這個(gè)頁(yè)面從Thrillist：
Birchbox是美容產(chǎn)品的訂閱服務(wù)。他們的顧客幾乎都是女人弯囊。另一方面痰哨，Thrillist的目標(biāo)觀眾主要是男性。
這反映在他們的顏色選擇上：樺木盒使用更輕匾嘱，色彩豐富的色調(diào)斤斧，而Thrillist堅(jiān)持大膽，深色霎烙。
廣義而言撬讽，您可以進(jìn)行以下人口統(tǒng)計(jì)：
男人喜歡大膽，強(qiáng)烈的顏色
女人喜歡柔軟的色調(diào)
年輕消費(fèi)者喜歡明亮悬垃，俏皮的顏色
較老的消費(fèi)者喜歡“值得信賴(lài)”的溫暖和企業(yè)色彩
您可以看到這反映在您最喜歡的一些品牌的顏色選擇中游昼。例如，以紐約為中心的女性時(shí)尚標(biāo)簽凱特·斯潘德（Kate Spade）在主頁(yè)上使用明亮的色彩和柔和的色調(diào)：
凱特·斯帕德（Kate Spade）的姐妹公司Jack Spade為男性銷(xiāo)售服裝盗忱，使用了一個(gè)非常不同的顏色方案酱床，側(cè)重于橄欖，灰色和黑色：
這是品牌通過(guò)仔細(xì)選擇其配色方案來(lái)定位不同人口統(tǒng)計(jì)學(xué)的一個(gè)很好的例子趟佃。
專(zhuān)注于選擇正確的顏色扇谣，字體和布局。選擇符合目標(biāo)市場(chǎng)要求的字體闲昭，并選擇補(bǔ)充品牌的顏色罐寨。對(duì)于布局，設(shè)計(jì)具有強(qiáng)視覺(jué)層次結(jié)構(gòu)并符合菲茨定律的頁(yè)面序矩，將大大有助于提高轉(zhuǎn)化率和品牌營(yíng)銷(xiāo)的存在鸯绿。
自譯鏈接：https://www.invisionapp.com/blog/high-converting-landing-pages/
