10個方法教你打造登陸頁面

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

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

究竟什么是登陸頁面？

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

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

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

1 – 保持品牌的大寫字母的一致性

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

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

Onepagelove

ONEPAGELOVE

onepagelove

one page love

One-Page Love

Onepage Love

下面是一些當前流行的品牌大寫的方法:

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

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

Stack Overflow (2單詞)

Facebook (1單詞)

避免所有的字母都大寫！只需要選擇1-2個就來大寫就可以，而且要始終保持一致。

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

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

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

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

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

有用的鏈接:

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

IconFinder – 免費的矢量圖標

Ready-To-Use SVG icons – 如何使用SVG圖標資源

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

3- 留白：先多后少

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

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

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

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

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

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

有用的鏈接:

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

Golden Ratio Typography Calculator – 優(yōu)化每行的字數(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 - 一致的垂直間距

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

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

Tip: 讓間距保持一致的比率。例如，如果我們設(shè)計了一個50px的按鈕，然后可以設(shè)置這個塊的標題的底部Margin(間距)也是50px, 整個塊與上一個塊之間間距為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è)計

CSS Baseline: The Good, The Bad And The Ugly – 好的、不好的和丑陋的CSS標準

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

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

Type Scale – 可視的文字大小計算器

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

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

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

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

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

有用的鏈接：

Unsplash – 免費高清圖片

Beautiful Team Images – 僅供參考

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

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

有用的鏈接:

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

Font Pair – 幫助匹配Google 字體

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

7- 文本對比度

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

#f8f8f8 背景

#111111 主標題

#222222 次標題

#444444 內(nèi)容文本

#666666 引用文字

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

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

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

有用的鏈接:

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

Coolors – 配色生成器

ColourLovers – 大量的配色方案

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

8 - 確保凸顯需要用戶點擊的按鈕

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

Pattern by Etsy的登陸頁面

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

有用的鏈接:

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

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

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

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

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

body {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;

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

}

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

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

有用的鏈接:

Font Smoothing Explained by Krzysztof Szafranek

Font Smoothing in Webkit and Firefox by David Walsh

10- 整體清理

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

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

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

你的8個婚禮照片 – 而不是過去四年的全部工作.

Launchday 以一個手機郵件地址按鈕的簡單登陸頁面開始，注意它那個美麗的按鈕

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

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

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

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

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

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

添加個性表情例如->

添加個性化的加載動畫 -> (more)

高亮當前頁面塊所屬的導航標題 -> (more)

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

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

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

錯誤的拼寫、錯字、錯句

彈出窗口

滾動到頂端

謊言

冗長的文字

行話、俚語

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

如果你愛你的產(chǎn)品，就以它為自豪吧，因為你已經(jīng)花了大量的時間來培育自己的登陸頁面了。

分享題目：10個方法教你打造登陸頁面
當前鏈接：http://www.rwnh.cn/news2/171452.html

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

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

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

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

10個方法教你打造登陸頁面