現(xiàn)在單頁(yè)登陸頁(yè)面(landing page)的網(wǎng)站已經(jīng)超過(guò)6k+了， 不幸的是，隨著快速增長(zhǎng)的網(wǎng)頁(yè)設(shè)計(jì)的需求，用戶(hù)對(duì)登陸頁(yè)面的期望和需求也在不斷變化，下面是通過(guò)網(wǎng)站上的用戶(hù)反饋得到的10個(gè)最常見(jiàn)的用戶(hù)反饋，通過(guò)學(xué)習(xí)這些技巧，相信會(huì)對(duì)我們提高登陸頁(yè)面的設(shè)計(jì)有所幫助。
究竟什么是登陸頁(yè)面？
在我們正式開(kāi)始前，先理清這個(gè)概念吧。一個(gè)登陸頁(yè)(不是登錄頁(yè)),是為用戶(hù)提供一個(gè)最小捷徑能夠幫 助用戶(hù)進(jìn)行選擇信息和執(zhí)行想要進(jìn)行操作的地方?？梢岳斫鉃槲恼轮械哪夸浰饕?，它是整個(gè)網(wǎng)站的門(mén)面也是用戶(hù)最先接觸和常常進(jìn)入到的頁(yè)面。有一些網(wǎng)站由于內(nèi)容較少，喜歡直接使用單獨(dú)一頁(yè)來(lái)做landing page，通過(guò)讓用戶(hù)不斷向下滾動(dòng)來(lái)查看更多的信息，例如about, services或contact等等。
這樣設(shè)計(jì)的目的是為了幫助用戶(hù)節(jié)省點(diǎn)擊的操作，不用導(dǎo)航到其他頁(yè)面去，而是在當(dāng)前頁(yè)面就能完成幾乎所有的操作而顯得非常直觀。這個(gè)成功的互動(dòng)以最清晰的方式與用戶(hù)溝通，摒除了那些紛繁復(fù)雜的內(nèi)容，進(jìn)而加快了對(duì)用戶(hù)的轉(zhuǎn)化(例如轉(zhuǎn)化為付費(fèi)用戶(hù))。這篇文章就教你如何正確設(shè)計(jì)這樣一個(gè)單頁(yè)的landing page。
“簡(jiǎn)化意味著消除那些不必要的東西，以便真正凸顯重要的內(nèi)容.” ~ hans hofman
1 – 保持品牌的大寫(xiě)字母的一致性
這一點(diǎn)經(jīng)常被忽略，如果在品牌名字的地方產(chǎn)生不一致大寫(xiě)字母的話，會(huì)影響到用戶(hù)對(duì)品牌的一印象(不專(zhuān)業(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- 不要忽視r(shí)etina屏幕的優(yōu)化
如果可能的話，你一定要有一個(gè)視網(wǎng)膜屏(retina屏，x2)優(yōu)化過(guò)的logo。你可能不相信，一個(gè)被“像素化”的logo會(huì)影響用戶(hù)對(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ù)用戶(hù)瀏覽信息內(nèi)容時(shí)候，他們會(huì)略讀。所以你把所有信息都綁定在一起的時(shí)候，用戶(hù)會(huì)略過(guò)大部分的內(nèi)容。 81%的人會(huì)略讀那些在線的內(nèi)容。易用性專(zhuān)家jacob
nielson的報(bào)告中顯示，用戶(hù)在平均訪問(wèn)網(wǎng)站的時(shí)間內(nèi)最多讀取20%-28%的內(nèi)容。留白的設(shè)計(jì)技術(shù)上來(lái)說(shuō)通常稱(chēng)為負(fù)空間，它們確實(shí)能讓用戶(hù)在內(nèi)容之中獲得呼吸的空間，這就減慢了用戶(hù)的速度，也增加了焦點(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在字體周?chē)鷮⒛軌驅(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è)良好的圖片可以徹底改變用戶(hù)的情緒。不幸的是，一個(gè)壞的圖片也是如此。“簡(jiǎn)潔意味著用最少的手段達(dá)到大的目的” ~ dr. koichi kawanaite
好的圖片能夠建立信任，信任就能引導(dǎo)用戶(hù)進(jìn)行轉(zhuǎn)換。花點(diǎn)錢(qiá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ì)給你的用戶(hù)帶來(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上使用完全不同的色盤(pán)， 首先你要先確定主要的品牌顏色，其次創(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 - 確保凸顯需要用戶(hù)點(diǎn)擊的按鈕
嘗試使用柔和的顏色為背景，然后使用特別顯著的顏色例如：橘色，紅色，綠色或藍(lán)色來(lái)凸顯你網(wǎng)頁(yè)中重要的操作按鈕。 要保持按鈕樣式的一致性，這樣會(huì)提醒你的用戶(hù)哪些是可以操作的。
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)整。通常合適的間距可以使用戶(hù)的閱讀體驗(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)置的那些。如果用戶(hù)非常需要的話，可以把他們寫(xiě)死。
tip: 要替換，不要新增。當(dāng)你有一些新的更好的內(nèi)容或圖片需要展示的話，要替換掉舊的那些。
福利tip: 充滿感情的設(shè)計(jì)更精彩
當(dāng)某些內(nèi)容非常顯著和引起共鳴時(shí)， 它們會(huì)自動(dòng)扎根于腦海中，這種設(shè)計(jì)是免費(fèi)的廣告，會(huì)被人口碑相傳。讓你的用戶(hù)感覺(jué)到設(shè)計(jì)走心，引起共鳴。通過(guò)設(shè)計(jì)來(lái)展示你在乎你的用戶(hù)。
不要使用默認(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ì)用戶(hù)有價(jià)值的內(nèi)容
相反地，通過(guò)避免出現(xiàn)下面這些元素來(lái)顯示出你對(duì)用戶(hù)的關(guān)心：
錯(cuò)誤的拼寫(xiě)、錯(cuò)字、錯(cuò)句
彈出窗口
滾動(dòng)到頂端
謊言
冗長(zhǎng)的文字
行話、俚語(yǔ)
混亂的元素或內(nèi)容
如果你愛(ài)你的產(chǎn)品，就以它為自豪吧，因?yàn)槟阋呀?jīng)花了大量的時(shí)間來(lái)培育自己的登陸頁(yè)面了。


常州到海門(mén)物流專(zhuān)線
蘇州到德清物流專(zhuān)線
網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的錯(cuò)誤，可以破壞可用性
域名注冊(cè)問(wèn)題？
網(wǎng)站優(yōu)化有哪些不一樣的注意事項(xiàng)
南昌到阿克蘇物流專(zhuān)線
網(wǎng)銷(xiāo)客服快速拿到客戶(hù)聯(lián)系方式技巧
蕪湖到趙縣物流專(zhuān)線