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

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

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

究竟什么是登陸頁面？
在我們正式開始前，先理清這個(gè)概念吧。一個(gè)登陸頁(不是登錄頁),是為用戶提供一個(gè)最小捷徑能夠幫 助用戶進(jìn)行選擇信息和執(zhí)行想要進(jìn)行操作的地方?？梢岳斫鉃槲恼轮械哪夸浰饕?，它是整個(gè)網(wǎng)站的門面也是用戶最先接觸和常常進(jìn)入到的頁面。有一些網(wǎng)站由于內(nèi)容較少，喜歡直接使用單獨(dú)一頁來做Landing Page，通過讓用戶不斷向下滾動(dòng)來查看更多的信息，例如About, Services或Contact等等。
這樣設(shè)計(jì)的目的是為了幫助用戶節(jié)省點(diǎn)擊的操作，不用導(dǎo)航到其他頁面去，而是在當(dāng)前頁面就能完成幾乎所有的操作而顯得非常直觀。這個(gè)成功的互動(dòng)以最清晰的方式與用戶溝通，摒除了那些紛繁復(fù)雜的內(nèi)容，進(jìn)而加快了對(duì)用戶的轉(zhuǎn)化(例如轉(zhuǎn)化為付費(fèi)用戶)。這篇文章就教你如何正確設(shè)計(jì)這樣一個(gè)單頁的Landing Page。
“簡(jiǎn)化意味著消除那些不必要的東西，以便真正凸顯重要的內(nèi)容.” ~ Hans Hofman
1 – 保持品牌的大寫字母的一致性
這一點(diǎn)經(jīng)常被忽略，如果在品牌名字的地方產(chǎn)生不一致大寫字母的話，會(huì)影響到用戶對(duì)品牌的一印象(不專業(yè)的)，下面是我見過的一個(gè)品牌名”One Page Love”
One Page Love (正確的寫法，以下都不正確)
Onepagelove
ONEPAGELOVE
onepagelove
one page love
One-Page Love
Onepage Love
下面是一些當(dāng)前流行的品牌大寫的方法:
WordPress (1 單詞, 2 大寫字母)
MailChimp (1單詞, 2大寫字母)
Stack Overflow (2單詞)
Facebook (1單詞)
避免所有的字母都大寫！ 只需要選擇1-2個(gè)就來大寫就可以，而且要始終保持一致。
2- 不要忽視Retina屏幕的優(yōu)化
如果可能的話，你一定要有一個(gè)視網(wǎng)膜屏(Retina屏，x2)優(yōu)化過的Logo。你可能不相信，一個(gè)被“像素化”的Logo會(huì)影響用戶對(duì)你產(chǎn)品的一印象。所以你的Logo至少還需要一個(gè)二倍大小的必須是矢量SVG格式的設(shè)計(jì)才行。 請(qǐng)注意下圖中左側(cè)的“像素化”了的Logo，不太清晰。右側(cè)是一個(gè)二倍的優(yōu)化后的LOGO，在Retina屏幕上看起來十分清晰。

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

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

Tip: 使用ImageOptim 來優(yōu)化更大的，顏色豐富的圖片. 雖然理想的頁面復(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ì)略過大部分的內(nèi)容。 81%的人會(huì)略讀那些在線的內(nèi)容。易用性專家Jacob
Nielson的報(bào)告中顯示，用戶在平均訪問網(wǎng)站的時(shí)間內(nèi)最多讀取20%-28%的內(nèi)容。留白的設(shè)計(jì)技術(shù)上來說通常稱為負(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ù)來合理增加Padding.
有用的鏈接:
Websites with good whitespace – 網(wǎng)頁留白的靈感
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í)，我們能用考慮到水平填充的問題。但是常常我們會(huì)忽略垂直間距的問題。如何保持塊間距和元素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í)候，捫心自問是否這些圖片能夠抓住你想表單的故事的點(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ì)給你的用戶帶來高質(zhì)量的閱讀體驗(yàn)。切記不要使用多種字體(font)，盡量堅(jiān)持最多只使用兩個(gè)字體家族的字體在Landing Page上。
有用的鏈接:
Google Fonts – 超過800中網(wǎng)頁字體
Font Pair – 幫助匹配Google 字體
Typekit – 超級(jí)漂亮的高級(jí)網(wǎng)頁字體
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)頁設(shè)計(jì)靈感
Coolors – 配色生成器
ColourLovers – 大量的配色方案
Color Lisa – 藝術(shù)的配色方案
8 - 確保凸顯需要用戶點(diǎn)擊的按鈕
嘗試使用柔和的顏色為背景，然后使用特別顯著的顏色例如：橘色，紅色，綠色或藍(lán)色來凸顯你網(wǎng)頁中重要的操作按鈕。 要保持按鈕樣式的一致性，這樣會(huì)提醒你的用戶哪些是可以操作的。
Pattern by Etsy的 登陸頁面
Oak by Absolut的登陸頁面將按鈕顏色設(shè)置為品牌顏色
有用的鏈接:
31 Call-to-Action examples you can’t help but click – 讓你情不自禁想要點(diǎn)擊的按鈕設(shè)計(jì)
9- 打磨文字間距和文字平滑度
令人難以置信的是小小的文字間距的設(shè)計(jì)也可以改變著整個(gè)網(wǎng)頁的風(fēng)格。下面這個(gè)例子顯示出標(biāo)題間距的微妙變化：
Tip: 不同的字體家族表現(xiàn)不一樣，有的需要更多的調(diào)整，有些則不需要調(diào)整。通常合適的間距可以使用戶的閱讀體驗(yàn)更加流暢。
添加幾行CSS代碼也可以打磨你的網(wǎng)頁中字體的設(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- 整體清理
一開始我們只削減了圖像的使用，但不應(yīng)該止步于此，我們應(yīng)該盡量使用更少的圖和字來達(dá)到同樣的效果。必要要有這樣的信念： 每個(gè)元素內(nèi)容都要貢獻(xiàn)自己的力量，否則就要把它移除掉。
2 個(gè)最輝煌的見證 – 而不是展示8個(gè)水平一般的內(nèi)容。
2 個(gè)最突出的特色功能, 下面可以帶幾個(gè)小的功能點(diǎn) – 而不是平鋪放出12個(gè)全部功能.
你的8個(gè)婚禮照片 – 而不是過去四年的全部工作.
Launchday 以一個(gè)手機(jī)郵件地址按鈕的簡(jiǎn)單登陸頁面開始，注意它那個(gè)美麗的按鈕
Tip: 去掉那些社交分享的Icon， 尤其是內(nèi)置的那些。如果用戶非常需要的話，可以把他們寫死。
Tip: 要替換，不要新增。當(dāng)你有一些新的更好的內(nèi)容或圖片需要展示的話，要替換掉舊的那些。
福利Tip: 充滿感情的設(shè)計(jì)更精彩
當(dāng)某些內(nèi)容非常顯著和引起共鳴時(shí)， 它們會(huì)自動(dòng)扎根于腦海中，這種設(shè)計(jì)是免費(fèi)的廣告，會(huì)被人口碑相傳。讓你的用戶感覺到設(shè)計(jì)走心，引起共鳴。通過設(shè)計(jì)來展示你在乎你的用戶。
不要使用默認(rèn)的UI控件，通常它們都很死板，盡量使用第三方或自定義一些漂亮的控件例如這個(gè)彈出框->(more)
在CSS中添加微妙的加載和退出的效果 ->(more)
添加個(gè)性表情例如->
添加個(gè)性化的加載動(dòng)畫 -> (more)
高亮當(dāng)前頁面塊所屬的導(dǎo)航標(biāo)題 -> (more)
在網(wǎng)頁腳處下功夫 -> (more)
給出對(duì)用戶有價(jià)值的內(nèi)容
相反地，通過避免出現(xiàn)下面這些元素來顯示出你對(duì)用戶的關(guān)心：
錯(cuò)誤的拼寫、錯(cuò)字、錯(cuò)句
彈出窗口
滾動(dòng)到頂端
謊言
冗長(zhǎng)的文字
行話、俚語
混亂的元素或內(nèi)容
如果你愛你的產(chǎn)品，就以它為自豪吧，因?yàn)槟阋呀?jīng)花了大量的時(shí)間來培育自己的登陸頁面了。

分享題目：10個(gè)方法教你打造登陸頁面
當(dāng)前鏈接：http://muchs.cn/news2/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í)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)