起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計理論：如何使登錄頁更完美與高效？
美觀的登錄頁面將帶來很好轉化率，那么如何是登錄也面更加美觀與高效呢？
對于設計師來說，工作中的挑戰之一就是創建一個看起來不錯，而且還能有很好轉換率的登錄頁面。您可以理解為什么這是案例設計的目標和業務目標常常是不一致的。
當產品相關人員創建登陸頁時，他們更專注于布局，基本原則和信息層次。然而，設計師最關心的是用戶體驗，顏色，排版和風格元素，有助于建立強大而有效化的準則。
轉化最優設計本質上希望使這兩個思想學派相一致。因此，不僅要專注于UX，還要強調勸導和轉化，同時將它與將導致更好的網站的美學選擇合并。
1.選擇正確的布局
產品經理非常了解，頁面上不同元素的布局會影響轉化率。這就是為什么他們要求設計師將最重要的信息放在首要位置，并從檢出頁面中刪除導航菜單，即使這個操作違反了UX設計的原則。
但是，您可以采用一些理論原則來創建轉化優化的著陸頁，而不會影響用戶體驗：
A.按照三分法規定設計
如果你曾經拍過攝影課，你可能聽說過三分之一的規則。這個規則越少越好，這個規則說，任何形象在分為9個相等的部分時，會有更多的緊張和精力。
來自維基百科的這個GIF說明它完美：
三分之一的規則是攝影師并不總是把他們的主題放在框架中的原因。世界上最著名的一些照片遵循這一規則。
這里有一個例子：
人物在九分之一的右上角
三分法則不僅適用于照片 – 它也適用于登錄頁?？纯碬ebDAM的這個登陸頁面：
或者來自Inbound Emotion的一個：
Inbound Emotion
根據設計理論和眼睛定視來看，3×3網格線的交點在任何頁面上都得到最多的關注。因此，放置在這些網格線上的元素也會更受關注。
“使用三分法規則來設計的布局視覺看上去會更舒適?！?/a>
2.按照菲茨法則的重要內容
訓練人眼遵循層次結構。我們的眼睛自然地從大到大的元素發展。尼爾森進行的眼睛跟蹤研究也顯示：
在這里，用戶比標題更多地集中在人物圖像上，并且他們的眼睛比較小的段落文字更長的字體。
與此相似的另一個原理是菲茨定律。最初由心理學家保羅·菲茨（Paul Fitts）在1954年制定的描述人機交互的方法，該法規定用戶移動到屏幕上對象的速度是對象的接近度（與用戶）的比例及其大小的函數。
在數學上，這表示如下：
結論：目標越大，完成點擊越快，時間越短。同樣地，目標越近，指向越快，完成點擊時間越短。也就是說，定位點擊一個目標的時間，取決于目標與當前位置的距離，以及目標的大小。
在桌面應用中，這意味著保持最重要的按鈕靠近角落，占據主要像素空間（也稱為“素數像素”）。
例如，Word中的素數像素角落都重要的按鈕：
因為網頁是可滾動的，所以網站缺少素數。在這種情況下，將屏幕的中心作為主像素區域是明智之舉。網頁設計師必須“選擇一個更緊湊，居中的布局”，光標位于屏幕中心或附近。按照菲茨定律，任何靠近該區域的大按鈕將產生更高的點擊次數。
因此，您會看到這樣的著陸頁，CTA和主要文字占據屏幕上的主要區域。
請記住，Fitts定律是一個二進制對數，因此按鈕的可點擊性不會線性增加（即300%的按鈕不會超過300%的點擊量）。相反，較小的更改導致更高的可點擊回報。
因此，通過將CTA放置在屏幕中心附近，使其稍微大于周圍元素，就是個很好的做法。
來自Litmus的這個頁面也是一個很好的例子：
CTA占據屏幕的中心，并且在頁面的前半部分容易看到。
這是MarketStrong的另一個例子：
在這里，CTA在折疊上方容易看到，而標題文字占據主屏幕的不動產，缺少導航欄和小標志。
這是您可以立即在自己的設計中使用的東西 – 最小化屏幕上非必需品，并將最重要的元素更接近屏幕中心，并將其放置在折疊上方。
3.選擇正確的字體
你可能已經知道排版的基礎知識了。您也可能會知道，這兩個基本類別，襯線和無襯線，可以進一步分為不同的字體，如人文主義，幾何，現代，板條等。
轉化率優化專家同時只考慮一件事：這種字體會導致更好的轉換效果嗎？
轉換優化設計基本上融合了這兩個問題。因此，您可以單獨選擇基于審美或可用性考慮的字體，而不是選擇以下字體：
A.提高品牌知名度，從而被動地轉換轉換目標。
B.提高人們閱讀頁面的速度和便利性，同時也強調轉換為主題的類型元素，如標題。
我們來看看這些更詳細。
排版和品牌知覺
看看紐約時報的這個頁面：
現在來看看這個頁面從Buzzfeed：
這兩個品牌都使用非常不同的字體。NYT使用襯線字體（NYT-Cheltenham和Georgia），而Buzzfeed使用2個無襯線字體（Helvetica Neue Light和Proxima Nova）。
這與他們的品牌形象相一致：“紐約時報”被認為是嚴肅的新聞學家，而Buzzfeed仍被視為充滿“有趣”貓GIF的網站。
設計師們已經知道這一點：排版和品牌標識是相關的。
例如，有一項研究認為排版是品牌是否被視為“真誠”，“激動人心”或“復雜”的核心要素。
讀者對紐約時報的另一個測試，測試結果表明，讀者信賴最多以Baskerville字體編寫的研究。另一方面，漫畫漫畫中寫的研究被認為是“最不信任的”。
對于轉換優化設計，請嘗試使用與你希望讀者感受的情緒相呼應的字體來進行設計
也就是說，使用像Georgia這樣的真誠的字體在可靠性至關重要的銷售頁面上，并且在非轉換導向的博客頭條上可以使用更“有趣”的字體，如Playfair。
一般來說，您可以劃分一些流行的字體如下：
- 真誠：Georgia, Baskerville
- 復雜：Garamond Pro, Playfair Display
- 大膽：Impact, Oswald, Gotham Condensed Bold
- 現代：Helvetica, Avenir, Roboto, Futura
- 樂趣：Lobster, Barrio
排版和可讀性
您所做的字體選擇不僅會影響您的讀者感受，還會影響讀者的閱讀速度。
更重要的是，你的類型選擇直接決定了用戶關注的頁面元素。
例如，考慮一下大膽的裝飾太平洋字體來作為標題：
這當然會引起你的注意，但是當段落使用相同的字體時，這是最終結果：
這不是很容易閱讀。它也不讓任何特定的頁面元素脫穎而出，這對于轉換是不利的。
除了在標題和正文中使用不同的字體外，還有其他一些方法來解決這個問題。
可讀性，行高和段長度
這是CROs和UX設計人員同時得出的結論：更長的行高等于更好的可讀性。
例如，下面的第一段更容易閱讀，因為行高很大。
雖然線高度對于更好的可讀性很重要，但更重要的因素是段落長度，即每段的行數/字數。
例如，大多數老派銷售頁面幾乎總是限于一句或兩句話：
結合豐富的線條高度，這些簡短的段落將使閱讀您的登錄頁更容易一些。
可讀性和字體大小
根據一項研究表明，較大的字體對讀者影響更大，這也增強了閱讀能力。
你可以在這個例子中看到這一點：
現在在段落文本中使用大于16px的字體是標準的。一些流行的網站，如中等使用的字體大到21px。
這不僅對CRO有好處，而且還有一個很好的UX操作，因為較大的字體更有可能使您的內容更容易訪問。
選擇正確的顏色
大多數成熟品牌都有一套“品牌顏色”，用于所有營銷材料，包括登陸頁。
例如，這是Twitter的品牌顏色設置：
這是可樂零的：
如果你的目標是提高轉化次數，則可能必須偏離目標網頁中的品牌顏色，特別是當你的品牌顏色不利于轉化。
對于轉化優化設計，請在選擇登陸頁顏色時按照以下提示進行操作：
1.選擇引起您的登陸頁情感的顏色
你可能知道不同的顏色與不同的情感和場合有關。你走進綠色和感受的藍色，當你失意。
同樣，你把綠色與自然聯系起來;白色與雪和純潔，紅色與饑餓，權力和侵略;黃色與陽光的溫暖都聯系起來。
這就是為什么許多食品公司在他們的標志中使用紅色的原因：
為什么綠色是太陽能城等環保公司最喜歡的顏色：
當您選擇登陸頁的顏色時，請選擇與你的產品或登陸頁有相同的情緒。
也就是說，如果您希望客戶將您視為未來品牌，可以使用黑白色和灰色/銀色的主題，如特斯拉：
同樣，如果您希望您的品牌被視為值得信賴的商業品牌，可以使用藍色和白色的“企業”顏色。
看看這個Salesforce著陸頁：
請記住，顏色是有文化影響的。紅色在西方可能被視為侵略的象征，但在中國，它被認為是運氣和財富的象征。
2.使用互補色對比
組合時互補的顏色相互抵消。然而，當它們彼此相鄰時，它們產生最高的對比度（白黑組合之外）。這就是為什么你看到這么多登陸頁在設計中使用補色。
例如，此登陸頁使用橙色作為其按鈕，藍色用于周邊地區 – 2種互補色。
這個網頁可能會獲得穩固的轉換。
類似地，Groupon的這個頁面使用綠色的背景和紅色的按鈕：
注意圖像中的模型如何面對形式，引起您的注意。
互補色彩是所有登陸頁的基礎。
3.選擇與您的目標人口統計信息相匹配的顏色
研究表明，顏色在我們決定購買的地方起著重要的作用。消費者傾向于特別強烈地對已經與其年齡或性別進行文化關聯的顏色。
一項研究發現，男性往往傾向于藍色，而女性往往喜歡柔和的粉色色調。
從Birchbox查看此著陸頁：
現在看看這個頁面從Thrillist：
Birchbox是美容產品的訂閱服務。他們的顧客幾乎都是女人。另一方面，Thrillist的目標觀眾主要是男性。
這反映在他們的顏色選擇上：樺木盒使用更輕，色彩豐富的色調，而Thrillist堅持大膽，深色。
廣義而言，您可以進行以下人口統計：
- 男人喜歡大膽，強烈的顏色
- 女人喜歡柔軟的色調
- 年輕消費者喜歡明亮，俏皮的顏色
- 較老的消費者喜歡“值得信賴”的溫暖和企業色彩
您可以看到這反映在您最喜歡的一些品牌的顏色選擇中。例如，以紐約為中心的女性時尚標簽凱特·斯潘德（Kate Spade）在主頁上使用明亮的色彩和柔和的色調：
凱特·斯帕德（Kate Spade）的姐妹公司Jack Spade為男性銷售服裝，使用了一個非常不同的顏色方案，側重于橄欖，灰色和黑色：
這是品牌通過仔細選擇其配色方案來定位不同人口統計學的一個很好的例子。
專注于選擇正確的顏色，字體和布局。選擇符合目標市場要求的字體，并選擇補充品牌的顏色。對于布局，設計具有強視覺層次結構并符合菲茨定律的頁面，將大大有助于提高轉化率和品牌營銷的存在。
譯者：L_Lainey
原文鏈接：https://www.invisionapp.com/blog/high-converting-landing-pages/
本文由 @L_Lainey 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
- 目前還沒評論，等你發揮！
