如何通過(guò)排版提高網(wǎng)站的何提(ti)戶(hù)轉化率？

恭喜有人登陸了您的(de)網(wǎng)站！但是升廣在離開(kāi)之(?????)前，它們會(huì )停留半秒以上嗎？告頁(yè)該樣他們的經(jīng)歷會(huì )愉快還是令人沮喪？他們會(huì )選擇做??您希望他們做的事情嗎？

經(jīng)驗豐富的提高營(yíng)銷(xiāo)人員分享了許多技巧和竅門(mén)，以提高轉化率，何提戶(hù)例如利用心理學(xué)來(lái)制作最具說(shuō)服力的升廣副本，或者懸掛不可抗拒的告頁(yè)該樣免費贈品以吸引訂戶(hù)。但是轉化轉化，當人們閱讀您的率客網(wǎng)站可能提供的內容時(shí)，他們也在體驗您網(wǎng)站的提高另一個(gè)關(guān)鍵要素：版式。

排版是何提戶(hù)我們網(wǎng)站設計人員用來(lái)傳達信息的主要手段，只要我們做對了，升廣它就會(huì )強大。告頁(yè)該樣如果我們弄錯了，那么設計就會(huì )失敗。無(wú)論如何都必須仔細考慮布??局，代碼或內容編寫(xiě)。

排版如何影響轉換

字體（文字的設計）可能會(huì )影響您的網(wǎng)站的有效性或使其失效。它有五種影響人們對您的品牌，產(chǎn)品或信息的反應的(de)方式。

1.好的字體使人們相信你

在一項研究中，要求參與者閱讀健身APP的說(shuō)明。一組(zu)閱讀了“微軟雅黑”字體的說(shuō)明。另一組閱讀了裝(zhuang)飾畫(huà)筆字體的說(shuō)明。

結果？裝飾畫(huà)筆字體小組將比容易理解的“微軟雅黑”組多花費83％的時(shí)間。裝飾畫(huà)筆字體小組還認為，健身APP將需要更多技能，并(bing)且不太愿意嘗試。

2.好的字體鼓勵行動(dòng)

您的網(wǎng)站應該有明確的號召性用語(yǔ)（CTA），例如“關(guān)注我們的公眾號”或“注冊免費試??用”。借助易于閱讀且愉悅的字體??，訪(fǎng)問(wèn)者更有可能注意這些CTA。

一項研究中，要求參與者閱讀一部手機手冊，其中一組閱讀一種易于閱讀的字體（宋體），另一組閱讀一種難以閱讀的字體（宋體斜體，帶有分散的陰影）。

參與者被問(wèn)到是否會(huì )立即購買(mǎi)電話(huà)，??或者是否需要更多時(shí)間做出決定。擁有易于閱讀??的手冊的參與者中只??有17％表示希望推遲購買(mǎi)決定，而擁有難以理解的手冊的參(′；д；`)與者中有41％希望等待購買(mǎi)。

轉換的另一??個(gè)關(guān)鍵？您的網(wǎng)站結構。

3.好的排版會(huì )影響感官

我們的大腦以幫助我們生存的方式響應環(huán)境。因為類(lèi)型是視覺(jué)的，所以我們對它的響應與對物理世界的響應幾乎相同。我們通常會(huì )在消化實(shí)際意思之前快速，不自覺(jué)地響應文字內容。

最近的一些調查揭示了人們對“字體為何如此重要”中的字體所產(chǎn)生的物理聯(lián)系。ヽ(′▽?zhuān)?ノ

在一項調查中，測試者給了1?00個(gè)??人相同的軟心豆粒糖┐(′д｀)┌。當她在左側顯示字體??時(shí)，人們對軟糖的評價(jià)是甜17％。當她在右邊顯示字體時(shí)，人們對（相同?。┸浶亩固堑乃岫忍岣吡?1％。

字體的左側曲線(xiàn)反映了軟心豆粒糖本身的圓度，以及枕頭或云朵等其他柔軟的圓形物體。鋸齒狀的字體讓人聯(lián)想到憤怒和(he)侵略性(′▽?zhuān)?)，就像掠食者的裸露牙齒。

4.良好(????)的排版可以放大您的信息

您選擇的字體有太多個(gè)性，排版定了基調：是認真，有趣，還是異想天開(kāi)？

字體可以具有個(gè)性的想法可能看起來(lái)很虛構，但(′_ゝ`)這并不是在開(kāi)玩笑。除了我們的感官之外，我們的個(gè)人記憶以及共享的(′▽?zhuān)?歷史和文化可以為字體增加一層含義。

弗吉尼亞理工大學(xué)進(jìn)行的一項研究??發(fā)現，(′ω｀)人們歸因于字體的特征中存在清晰的圖案，??并且這些特征可以分為三個(gè)主要類(lèi)別：優(yōu)雅，友好和直接。

字體普查調查深入探討了流行字體?的“個(gè)性”，這是一些關(guān)于人們歸因于字體(′▽?zhuān)?)的個(gè)性??和價(jià)值觀(guān)的發(fā)現的樣本：

• Baskerville：知識分子，學(xué)術(shù)，智慧，傳統，傳統，可信賴(lài)
• Clarendon：行動(dòng)者，領(lǐng)導者，思想家，傳統，專(zhuān)業(yè)，自(zi)信
• Futura：領(lǐng)導者，理想主義者，思想??家，負責??任，專(zhuān)業(yè)，見(jiàn)多識廣
• VAG Rounded：每個(gè)人，理想主義者，行動(dòng)者，友好，開(kāi)朗，輕松

當字體的“個(gè)性”與文本消息匹配時(shí)，它會(huì )支持并放大該消息。

例如，如果您看到粗體的全大寫(xiě)Gotham字體，則可能會(huì )想到使奧巴馬的“HOPE”海報使字體成為設計師的寵兒，并且可能將其與樂(lè )觀(guān)，靈感和前瞻性聯(lián)系在一起，思維。

5.良好的排版使您的網(wǎng)站訪(fǎng)問(wèn)者想要停留

如果讀者對網(wǎng)站感到沮喪，那么吸引人的選擇始終是點(diǎn)擊。您的用戶(hù)正在給您他們的時(shí)間和精力（可能還有金錢(qián)），因此請給他們??精美的排版禮物，以使他們的體驗順暢無(wú)阻，甚至令人愉悅。

如何明智地選??擇和使用類(lèi)型

準備好磨練您的排版技巧來(lái)贏(yíng)得網(wǎng)站了嗎？您可以按照(′?ω?`)以下方法創(chuàng )建銷(xiāo)(???)售類(lèi)型的轉化。

選擇適合用途的類(lèi)型

字體不僅可以選擇哪種字體（我們接下來(lái)將介紹可讀性），但(◎_◎;)是字體選擇通常是第一步也是最重要的一步。

快速說(shuō)明：字體經(jīng)?；Q使用，但是有些不同。甲字體是設計，如Helvetica。甲字體是字體顯示在格式，如Helvetica斜體，10磅。字體就(jiu)像一個(gè)家庭。字體就像家庭中的個(gè)人成員。

看似無(wú)止盡的字體選項以及使用字體的各種上下文。通?？梢詫⑦@些用途分為兩個(gè)簡(jiǎn)單的類(lèi)別(′ω｀*)：暫時(shí)輸入和隨身攜帶。

暫時(shí)輸入

顧名思義，這是一種僅需一點(diǎn)時(shí)間即可閱讀的字體。

對于導航或界面文本，我們建議??選擇一種字體，該字體應以小尺??寸可讀且沒(méi)有過(guò)多裝飾，例如簡(jiǎn)單的無(wú)襯線(xiàn)字體。

使用具有很多個(gè)性的裝飾性字體會(huì )立即引起一種情緒，這可能是吸引讀者的好方法。也就是說(shuō)，您不希望將其??用于其他用途??。一兩行，??因為它很快變得難以閱讀。

隨身攜帶

這種類(lèi)型的讀者(zhe)會(huì )花更多的時(shí)間，例如在閱讀文章或書(shū)籍時(shí)。您使用的字體應該平滑，以消除讀者和文本之間的摩擦。幫助人們忘記他們盯著(zhù)屏幕，而是將他們沉浸在ヽ(′?｀)ノ您所講的文字和故事中。

我們議查看字體的一些特征以評估其可讀性：

• 足夠的x高度： x高度反映了字體(ti)的比例。
• 低或中等對比度： 可以做一點(diǎn)對比，但是可以太多，太多了，高對比度襯線(xiàn)對于標題來(lái)說(shuō)可能效果很好，但很難在較大的文本塊中閱讀。
• 識別和獨特的字體形式：一些字體，特別是無(wú)襯線(xiàn)字體，不具有相似的結構字母形式之間的區別很多。盡管運行文本為這些外觀(guān)提供了上下文線(xiàn)索，但較短的文本片段可能會(huì )造成混淆。讀者花在識別文本上的每一刻都是浪費時(shí)間。

選擇適合消息的類(lèi)型

還記得有關(guān)類(lèi)型如何擁有自己的性格的研究嗎？您想讓這種個(gè)性適合您，并選擇一種(zhong)匹配甚至放大您想要的消息的字體。

我們建議集思廣益一些您想反映您的信息的字體聯(lián)想。是(shi)傳統(tong)的，現代的還是時(shí)尚的？豪華還是便利？好玩還是專(zhuān)業(yè)？堅固還是優(yōu)雅？

然后嘗試以下操作：使用您想到的關(guān)鍵詞，然后在字體庫中搜索結果，您可能??會(huì )找到所需的東西。

配對可一起使用的字體

亂七八糟的字體通(tong)常是好的設計的大招。遵循經(jīng)驗法則，一次只能使用(yong)兩個(gè)字樣。

對于完美的配對，我們建議選擇具有互補結構但又不太相似以至于無(wú)法區分的字體。

一種技巧是簡(jiǎn)單地在(zai)一種字體中選擇???不同的粗細和樣式，或者選擇一個(gè)既提供襯線(xiàn)又提供無(wú)襯線(xiàn)的“超家族”。

使類(lèi)型可讀

僅僅是因為某些東西清晰易讀并不意味著(zhù)它可讀性強。易讀性意味著(zhù)可以解釋文本，但這就像說(shuō)樹(shù)皮可食用。我們的目標更高。

以下是一些簡(jiǎn)單的方法來(lái)確保您網(wǎng)站上的文本可讀。

使文字更大

Web文本越大越好。一項2016年的研究使用了眼動(dòng)追蹤技術(shù)，并衡?量了閱讀文章中各種文本大小和行距的人們的理解力。

結果：(′ω｀)18點(diǎn)文字具有最佳的可讀性和理解力，并且1.0至1.4行間距是理想的。

使行更短

您不希望您??的文字行??遍及整個(gè)頁(yè)面，因為眼睛??很難跟隨下一行。建議使用大量空白，并將行(′?｀)長(cháng)保持不超過(guò)65個(gè)字符。

總結

字體就像是多感覺(jué)想象力的手榴彈(′?ω?`)。字體將文?字變成故事。像動(dòng)作一樣，打字勝于雄辯。當您知道如何明智地選擇和使用類(lèi)型時(shí)，可以確保您發(fā)送的信息正確。

提高客戶(hù)轉化的網(wǎng)頁(yè)布局方法

能把目標訪(fǎng)問(wèn)者轉換成客戶(hù)的網(wǎng)站不僅有良好的外觀(guān)設計，也不僅是說(shuō)服式的內容組織，還需要一些更深入的研究。

依據的交互設計和心理學(xué)理論、以(′?｀)及采用A/B測試和熱力圖等(deng)工具分析訪(fǎng)問(wèn)者的過(guò)程中，不斷總結出提高網(wǎng)站客戶(hù)轉化的網(wǎng)頁(yè)布局理論。

潛在客戶(hù)對您的產(chǎn)品和服務(wù)感興趣。這些群體??也會(huì )同時(shí)比較多家企業(yè)，訪(fǎng)問(wèn)多個(gè)網(wǎng)站。純粹以說(shuō)服為目的的頁(yè)面是否能為訪(fǎng)問(wèn)者帶來(lái)ヽ(′ー｀)ノ舒適體驗？是否能夠達到轉化目的？這有待數據證明。但以下布(bu)局設計方法將為網(wǎng)站提升客戶(hù)轉化發(fā)揮作用。

簡(jiǎn)潔導航，控制鏈接

一個(gè)人ヽ(′?｀)ノ面臨的選擇越多，所需要作(′▽?zhuān)?出決定的時(shí)間就越長(cháng)。?？朔▌t是交互設計中的七大定律之一。

心理學(xué)家希娜·艾揚格和馬克·(╬?益?)萊珀有一個(gè)著(zhù)名研究：他們發(fā)現一張只展示6種果醬的展品桌比一張有24種果醬的展品桌更容易吸引人們的興趣。

這就是?？诵袆?dòng)法則的一個(gè)例子：行動(dòng)的損失與選擇的數量??成比例。

在網(wǎng)頁(yè)設計中如果要提??高轉換，那ヽ(′ー｀)ノ(na)么給予訪(fǎng)問(wèn)者選擇的機會(huì )需要減少。我們可以通過(guò)限制用戶(hù)的選擇數量來(lái)提(???)高轉換。首先考慮的是導航欄(′▽?zhuān)?。顯然，主導(╯‵□′)╯航不能有太多的鏈接可供選擇，否則用戶(hù)將降低對您網(wǎng)站的興趣。

依據此原理，在著(zhù)陸頁(yè)設計時(shí)減去主導航，避免跳轉操作。緊接著(zhù)有個(gè)問(wèn)題，一個(gè)內容繁多的網(wǎng)站如何設計簡(jiǎn)潔導航呢？這里有個(gè)原則：主要業(yè)務(wù)在主導航，其(′▽?zhuān)?他部分作為網(wǎng)站底部???或者側導航處理。但是鏈接的數量(??-)?需要控制，能夠集中在一個(gè)頁(yè)面闡述的問(wèn)題，不再細分為多個(gè)頁(yè)面。

構成布局元素(?????)的數量

“7加減2法則”??來(lái)源于19世紀中葉，愛(ài)爾蘭哲學(xué)家威廉??漢密爾頓觀(guān)察到：如果將一把(ba)子彈撒在地板上，人們很難一下子觀(guān)察到超過(guò)7顆子彈。

用戶(hù)使用網(wǎng)站是尋找內容，這種需求往往非常急切，請不要以為每個(gè)訪(fǎng)問(wèn)者都會(huì )像挖寶一樣孜孜不倦，如??果不能快速的找到自己想要看的東西，那么他們就會(huì )關(guān)掉您的頁(yè)面去其他網(wǎng)站?？刂撇季种性財盗繒?huì )使用戶(hù)(′▽?zhuān)?對于網(wǎng)站的內容一目了然，使他們確信從您的網(wǎng)站獲得信息是(??-)?件輕松的事情。

首屏三分法

三分(fen)法是一種在(zai)攝影、繪畫(huà)、設(′ω｀*)計等藝術(shù)中經(jīng)常使用的構圖手段，有時(shí)也(ye)稱(chēng)作井字構圖法。 三分法構圖是指把畫(huà)面橫分三分，每一分??中心都可放置主體形態(tài)，這種構圖適宜多形態(tài)平行焦點(diǎn)的主體。

網(wǎng)頁(yè)首屏等ヾ(′▽?zhuān)??比例分為三等分，產(chǎn)生四個(gè)交匯點(diǎn)。這四個(gè)交匯點(diǎn)是人們視覺(jué)的重點(diǎn)，如果網(wǎng)站的按鈕（鏈接）放置在它的附近，將有利于提高網(wǎng)??站轉化率。

這一理論(′?｀)目前被應??用于網(wǎng)頁(yè)banner的設計，及轉化頁(yè)按鈕的放置。

布局留白ヾ(＾-＾)ノ

留白即是擴大空白的空間，幫??助視線(xiàn)集中在主要元素上，避免視覺(jué)噪音干擾訪(fǎng)問(wèn)者獲取信息。這些信息是你希望傳達給瀏覽者的重要內容。留白也是奧卡姆原理，被稱(chēng)為“簡(jiǎn)單有效原理”的應用。

廣泛應用于網(wǎng)頁(yè)banner設計及版面布局，及文本字間距行間距設計中。

布局留白控制也要求我們在網(wǎng)頁(yè)上只放置必要元素，多余的元素只會(huì )使訪(fǎng)問(wèn)者疑ヽ(′ー｀)ノ惑，增加網(wǎng)(⊙_⊙)站使用的困(°o°)難。留白控制能使網(wǎng)站看起來(lái)簡(jiǎn)單，越簡(jiǎn)單的東西人們越利于使用。

將關(guān)聯(lián)內容靠近擺放

格式塔設計原則認為：“整體不是各部分的總和?！?基本上，人眼和┐(′д｀)┌大腦對統一設計的感知方式不同于對該設計的(de)各個(gè)組成部分的感知。

人眼/大腦喜歡將相似的物體組合在一??起。它是一種機制，讓我們能夠理解(jie)事物和辨別嘈雜的環(huán)境。

在Web設計方面，我們通過(guò)對希望相互關(guān)聯(lián)的項（如證明框、轉??換按鈕或圖像）進(jìn)行分組來(lái)利用此理論。

例如，如果您有一份很有說(shuō)服力的推薦語(yǔ)，并且想用它來(lái)提高加入表單的轉化率，我們可以把它直接放在表單下面。用戶(hù)會(huì )將兩者聯(lián)系起來(lái)，促進(jìn)表單提交。

行動(dòng)號召采用雙按鈕布局

研究證明，行動(dòng)號召采用雙按鈕明顯能夠提升轉化率。并且按鈕出現在首屏偏下位置比出現在一個(gè)長(cháng)頁(yè)面下半部更能夠提升轉化。

版權聲明：本文內(nei)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻，該文觀(guān)點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權，不承擔相關(guān)法律責任。如發(fā)現本站有涉嫌抄襲侵權/違法違規的內容， 請發(fā)送郵件至 [email protected] 舉報，一經(jīng)查實(shí)，本站將立刻刪除。