10個(gè)方法教你打造登陸頁(yè)面

2022-06-25 分類：網(wǎng)站建設(shè)

現(xiàn)在單頁(yè)登陸頁(yè)面(Landing Page)的網(wǎng)站已經(jīng)超過(guò)6K+了，不幸的是，隨著快速增長(zhǎng)的網(wǎng)頁(yè)設(shè)計(jì)的需求，用戶對(duì)登陸頁(yè)面的期望和需求也在不斷變化，下面是通過(guò)網(wǎng)站上的用戶反饋得到的10個(gè)最常見(jiàn)的用戶反饋，通過(guò)學(xué)習(xí)這些技巧，相信會(huì)對(duì)我們提高登陸頁(yè)面的設(shè)計(jì)有所幫助。

究竟什么是登陸頁(yè)面？

在我們正式開(kāi)始前，先理清這個(gè)概念吧。一個(gè)登陸頁(yè)(不是登錄頁(yè)),是為用戶提供一個(gè)最小捷徑能夠幫助用戶進(jìn)行選擇信息和執(zhí)行想要進(jìn)行操作的地方?？梢岳斫鉃槲恼轮械哪夸浰饕?，它是整個(gè)網(wǎng)站的門面也是用戶最先接觸和常常進(jìn)入到的頁(yè)面。有一些網(wǎng)站由于內(nèi)容較少，喜歡直接使用單獨(dú)一頁(yè)來(lái)做Landing Page，通過(guò)讓用戶不斷向下滾動(dòng)來(lái)查看更多的信息，例如About, Services或Contact等等。

這樣設(shè)計(jì)的目的是為了幫助用戶節(jié)省點(diǎn)擊的操作，不用導(dǎo)航到其他頁(yè)面去，而是在當(dāng)前頁(yè)面就能完成幾乎所有的操作而顯得非常直觀。這個(gè)成功的互動(dòng)以最清晰的方式與用戶溝通，摒除了那些紛繁復(fù)雜的內(nèi)容，進(jìn)而加快了對(duì)用戶的轉(zhuǎn)化(例如轉(zhuǎn)化為付費(fèi)用戶)。這篇文章就教你如何正確設(shè)計(jì)這樣一個(gè)單頁(yè)的Landing Page。

“簡(jiǎn)化意味著消除那些不必要的東西，以便真正凸顯重要的內(nèi)容.” ~ Hans Hofman

1 – 保持品牌的大寫(xiě)字母的一致性

這一點(diǎn)經(jīng)常被忽略，如果在品牌名字的地方產(chǎn)生不一致大寫(xiě)字母的話，會(huì)影響到用戶對(duì)品牌的一印象(不專業(yè)的)，下面是我見(jiàn)過(guò)的一個(gè)品牌名”One Page Love”

One Page Love (正確的寫(xiě)法，以下都不正確)

Onepagelove

ONEPAGELOVE

onepagelove

one page love

One-Page Love

Onepage Love

下面是一些當(dāng)前流行的品牌大寫(xiě)的方法:

WordPress (1 單詞, 2 大寫(xiě)字母)

MailChimp (1單詞, 2大寫(xiě)字母)

Stack Overflow (2單詞)

Facebook (1單詞)

避免所有的字母都大寫(xiě)！只需要選擇1-2個(gè)就來(lái)大寫(xiě)就可以，而且要始終保持一致。

2- 不要忽視Retina屏幕的優(yōu)化

如果可能的話，你一定要有一個(gè)視網(wǎng)膜屏(Retina屏，x2)優(yōu)化過(guò)的Logo。你可能不相信，一個(gè)被“像素化”的Logo會(huì)影響用戶對(duì)你產(chǎn)品的一印象。所以你的Logo至少還需要一個(gè)二倍大小的必須是矢量SVG格式的設(shè)計(jì)才行。請(qǐng)注意下圖中左側(cè)的“像素化”了的Logo，不太清晰。右側(cè)是一個(gè)二倍的優(yōu)化后的LOGO，在Retina屏幕上看起來(lái)十分清晰。

下一步就是優(yōu)先優(yōu)化那些你將要放到展示臺(tái)上的產(chǎn)品的截圖，要保證的一印象。（右側(cè)優(yōu)化過(guò)）

最后是優(yōu)化那些大圖片，讓他們更清晰，看起來(lái)更誘人，同時(shí)圖片大小要始終: （右側(cè)優(yōu)化過(guò)）

Tip: 使用ImageOptim 來(lái)優(yōu)化更大的，顏色豐富的圖片. 雖然理想的頁(yè)面復(fù)雜究竟是多大才合適這件事仍然是值得商榷的，但是都進(jìn)行優(yōu)化處理終歸是好的。

有用的鏈接:

PNG to SVG resources – 如果將PNG轉(zhuǎn)換為SVG的有用的文章

IconFinder – 免費(fèi)的矢量圖標(biāo)

Ready-To-Use SVG icons – 如何使用SVG圖標(biāo)資源

Hero Patterns – 利用SVG設(shè)計(jì)紋理背景

3- 留白：先多后少

大多數(shù)用戶瀏覽信息內(nèi)容時(shí)候，他們會(huì)略讀。所以你把所有信息都綁定在一起的時(shí)候，用戶會(huì)略過(guò)大部分的內(nèi)容。 81%的人會(huì)略讀那些在線的內(nèi)容。易用性專家Jacob

Nielson的報(bào)告中顯示，用戶在平均訪問(wèn)網(wǎng)站的時(shí)間內(nèi)最多讀取20%-28%的內(nèi)容。留白的設(shè)計(jì)技術(shù)上來(lái)說(shuō)通常稱為負(fù)空間，它們確實(shí)能讓用戶在內(nèi)容之中獲得呼吸的空間，這就減慢了用戶的速度，也增加了焦點(diǎn)。

The Brenner Cycles 網(wǎng)站有著良好的負(fù)空間設(shè)計(jì)

我們總是談?wù)撊绾巫孭C上的內(nèi)容在移動(dòng)端Mobile上也能夠“優(yōu)雅”地顯示，但是又如何讓PC上的設(shè)計(jì)能夠同樣“優(yōu)雅”地展示在超大顯示器上呢？我們高興地看到使用Padding在字體周圍將能夠?qū)Υ笃聊簧夏切┳兇蟮奈淖诛@示進(jìn)行優(yōu)化。

Tip: 如果你不確定是否應(yīng)該增加Padding，那么就增加雙倍吧。

Tip: 堅(jiān)持使用網(wǎng)格技術(shù)來(lái)合理增加Padding.

有用的鏈接:

Websites with good whitespace – 網(wǎng)頁(yè)留白的靈感

Golden Ratio Typography Calculator – 優(yōu)化每行的字?jǐn)?shù)

How to Tune Typography Based on Characters Per Line

1200px Grid System – 可在PS，AI，CSS中使用的網(wǎng)格系統(tǒng)

All about Grid systems –Rachel Shillcock介紹的網(wǎng)格系統(tǒng)

4 - 一致的垂直間距

當(dāng)我們使用網(wǎng)格系統(tǒng)時(shí)，我們能用考慮到水平填充的問(wèn)題。但是常常我們會(huì)忽略垂直間距的問(wèn)題。如何保持塊間距和元素padding的一致性呢？下面是一個(gè)經(jīng)典的長(zhǎng)縱向滾動(dòng)的Landing Page設(shè)計(jì)，這里我們把一組內(nèi)容叫做一“塊”信息(Section):

請(qǐng)注意垂直間距的一致性，而且，較小的間距是大間距的一半。

Tip: 讓間距保持一致的比率。例如，如果我們?cè)O(shè)計(jì)了一個(gè)50px的按鈕，然后可以設(shè)置這個(gè)塊的標(biāo)題的底部Margin(間距)也是50px, 整個(gè)塊與上一個(gè)塊之間間距為100px. 保持一致是關(guān)鍵。

有用的鏈接：

4 Simple Steps to Vertical Rhythm –4步搞定垂直間距

How to Create Vertical Rhythm and Harmony – 如何創(chuàng)造和諧的縱向空間

Designing Faster with a Baseline Grid – 使用基線和網(wǎng)格加速設(shè)計(jì)

CSS Baseline: The Good, The Bad And The Ugly – 好的、不好的和丑陋的CSS標(biāo)準(zhǔn)

Basehold.it – 免費(fèi)的網(wǎng)格系統(tǒng)

Modular Scale – 規(guī)劃網(wǎng)站中文字大小和間距

Type Scale – 可視的文字大小計(jì)算器

5-更好、更優(yōu)良的圖片

用一個(gè)良好的圖片可以徹底改變用戶的情緒。不幸的是，一個(gè)壞的圖片也是如此。“簡(jiǎn)潔意味著用最少的手段達(dá)到大的目的” ~ Dr. Koichi Kawanaite

好的圖片能夠建立信任，信任就能引導(dǎo)用戶進(jìn)行轉(zhuǎn)換?；c(diǎn)錢去拍攝你的團(tuán)隊(duì)，你的產(chǎn)品，你的食物等等。

The Dona Rita 網(wǎng)站特色是只用了四個(gè)圖片就涵蓋了她所有的產(chǎn)品和品牌

Tip: 當(dāng)你有了好的選擇的時(shí)候，捫心自問(wèn)是否這些圖片能夠抓住你想表單的故事的點(diǎn)和你的品牌。要消除一切不必要的內(nèi)容。

有用的鏈接：

Unsplash – 免費(fèi)高清圖片

Beautiful Team Images – 僅供參考

6-減少字體, 增加權(quán)重

字體不同的權(quán)重可以達(dá)到加強(qiáng)標(biāo)題，區(qū)分內(nèi)容和標(biāo)題的作用。這會(huì)給你的用戶帶來(lái)高質(zhì)量的閱讀體驗(yàn)。切記不要使用多種字體(font)，盡量堅(jiān)持最多只使用兩個(gè)字體家族的字體在Landing Page上。

有用的鏈接:

Google Fonts – 超過(guò)800中網(wǎng)頁(yè)字體

Font Pair – 幫助匹配Google 字體

Typekit – 超級(jí)漂亮的高級(jí)網(wǎng)頁(yè)字體

7- 文本對(duì)比度

永遠(yuǎn)不要使用純黑(#000000) 文本在純白(#FFFFFF) 背景上。要盡量降低這種超高的對(duì)比度。例如使用灰度的背景會(huì)讓眼睛更為舒適:

#f8f8f8 背景

#111111 主標(biāo)題

#222222 次標(biāo)題

#444444 內(nèi)容文本

#666666 引用文字

優(yōu)化后如右圖:

有一些在純黑背景上放了純白文字的也不行，對(duì)比度太高了。深色背景的優(yōu)化處理如右圖：

Tip: 嘗試在Landing Page上使用完全不同的色盤，首先你要先確定主要的品牌顏色，其次創(chuàng)建更柔和的帶有層次的顏色。一個(gè)優(yōu)質(zhì)的配色方案的效果是顯著的，可以增強(qiáng)網(wǎng)站的品牌效應(yīng)。

有用的鏈接:

Colorful websites –網(wǎng)頁(yè)設(shè)計(jì)靈感

Coolors – 配色生成器

ColourLovers – 大量的配色方案

Color Lisa – 藝術(shù)的配色方案

8 - 確保凸顯需要用戶點(diǎn)擊的按鈕

嘗試使用柔和的顏色為背景，然后使用特別顯著的顏色例如：橘色，紅色，綠色或藍(lán)色來(lái)凸顯你網(wǎng)頁(yè)中重要的操作按鈕。要保持按鈕樣式的一致性，這樣會(huì)提醒你的用戶哪些是可以操作的。

Pattern by Etsy的登陸頁(yè)面

Oak by Absolut的登陸頁(yè)面將按鈕顏色設(shè)置為品牌顏色

有用的鏈接:

31 Call-to-Action examples you can’t help but click – 讓你情不自禁想要點(diǎn)擊的按鈕設(shè)計(jì)

9- 打磨文字間距和文字平滑度

令人難以置信的是小小的文字間距的設(shè)計(jì)也可以改變著整個(gè)網(wǎng)頁(yè)的風(fēng)格。下面這個(gè)例子顯示出標(biāo)題間距的微妙變化：

Tip: 不同的字體家族表現(xiàn)不一樣，有的需要更多的調(diào)整，有些則不需要調(diào)整。通常合適的間距可以使用戶的閱讀體驗(yàn)更加流暢。

添加幾行CSS代碼也可以打磨你的網(wǎng)頁(yè)中字體的設(shè)計(jì)，下面是我用在自己項(xiàng)目中的幾行代碼:

body {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;

-moz-font-feature-settings: "liga" on;

}

你可以看到明顯的不同是右側(cè)的文字更加柔和。

這兩個(gè)同樣都是在Mac設(shè)備上的顯示效果，右側(cè)增加了額外的CSS樣式代碼

有用的鏈接:

Font Smoothing Explained by Krzysztof Szafranek

Font Smoothing in Webkit and Firefox by David Walsh

10- 整體清理

一開(kāi)始我們只削減了圖像的使用，但不應(yīng)該止步于此，我們應(yīng)該盡量使用更少的圖和字來(lái)達(dá)到同樣的效果。必要要有這樣的信念：每個(gè)元素內(nèi)容都要貢獻(xiàn)自己的力量，否則就要把它移除掉。

2 個(gè)最輝煌的見(jiàn)證 – 而不是展示8個(gè)水平一般的內(nèi)容。

2 個(gè)最突出的特色功能, 下面可以帶幾個(gè)小的功能點(diǎn) – 而不是平鋪放出12個(gè)全部功能.

你的8個(gè)婚禮照片 – 而不是過(guò)去四年的全部工作.

Launchday 以一個(gè)手機(jī)郵件地址按鈕的簡(jiǎn)單登陸頁(yè)面開(kāi)始，注意它那個(gè)美麗的按鈕

Tip: 去掉那些社交分享的Icon，尤其是內(nèi)置的那些。如果用戶非常需要的話，可以把他們寫(xiě)死。

Tip: 要替換，不要新增。當(dāng)你有一些新的更好的內(nèi)容或圖片需要展示的話，要替換掉舊的那些。

福利Tip: 充滿感情的設(shè)計(jì)更精彩

當(dāng)某些內(nèi)容非常顯著和引起共鳴時(shí)，它們會(huì)自動(dòng)扎根于腦海中，這種設(shè)計(jì)是免費(fèi)的廣告，會(huì)被人口碑相傳。讓你的用戶感覺(jué)到設(shè)計(jì)走心，引起共鳴。通過(guò)設(shè)計(jì)來(lái)展示你在乎你的用戶。

不要使用默認(rèn)的UI控件，通常它們都很死板，盡量使用第三方或自定義一些漂亮的控件例如這個(gè)彈出框->(more)

在CSS中添加微妙的加載和退出的效果 ->(more)

添加個(gè)性表情例如->

添加個(gè)性化的加載動(dòng)畫(huà) -> (more)

高亮當(dāng)前頁(yè)面塊所屬的導(dǎo)航標(biāo)題 -> (more)

在網(wǎng)頁(yè)腳處下功夫 -> (more)

給出對(duì)用戶有價(jià)值的內(nèi)容

相反地，通過(guò)避免出現(xiàn)下面這些元素來(lái)顯示出你對(duì)用戶的關(guān)心：

錯(cuò)誤的拼寫(xiě)、錯(cuò)字、錯(cuò)句

彈出窗口

滾動(dòng)到頂端

謊言

冗長(zhǎng)的文字

行話、俚語(yǔ)

混亂的元素或內(nèi)容

如果你愛(ài)你的產(chǎn)品，就以它為自豪吧，因?yàn)槟阋呀?jīng)花了大量的時(shí)間來(lái)培育自己的登陸頁(yè)面了。

分享文章：10個(gè)方法教你打造登陸頁(yè)面
URL地址：http://www.rwnh.cn/news/171452.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

10個(gè)方法教你打造登陸頁(yè)面