著陸頁(yè)整體布局較滿，容易給用戶帶來(lái)視覺(jué)負(fù)擔(dān);且主體顏色和自身產(chǎn)品色不搭，也沒(méi)有很好地展示產(chǎn)品;某些字體較小，瀏覽起來(lái)較為困難;文案也不夠戳痛點(diǎn)……

毫不夸張地說(shuō)，有點(diǎn)擊沒(méi)對(duì)話80%都由于落地頁(yè)不給力，因?yàn)橹戫?yè)負(fù)責(zé)承載流量;而移動(dòng)端著陸頁(yè)的重要性就占據(jù)80%(除個(gè)別傳統(tǒng)行業(yè))，因?yàn)檫@是一個(gè)移動(dòng)互聯(lián)網(wǎng)時(shí)代。

那也許此時(shí)有人會(huì)說(shuō)：我知道我的著陸頁(yè)有問(wèn)題，可我們這沒(méi)有專業(yè)的美工，而我又不懂設(shè)計(jì)。

所以，如此有才華的小編今天就向大家分享幾招。本文將注意以移動(dòng)端為例，從手機(jī)屬性和用戶習(xí)慣兩方面來(lái)分析下著陸頁(yè)的設(shè)計(jì)技巧，都拿小本本記好了啊。

手機(jī)屬性

01 輕、薄、小

說(shuō)起手機(jī)屬性，大家第一反應(yīng)肯定是輕、薄、小。而在著陸頁(yè)設(shè)計(jì)中，小為重點(diǎn)，重要性為100%。

一般情況下，手機(jī)尺寸大則6寸，小則3.5寸，一只手便可拿住。

所以，我們?cè)谠O(shè)計(jì)時(shí)要注意設(shè)備的尺寸，以此來(lái)確定圖片的大小，避免規(guī)格不同，造成圖片展示不完整等。

設(shè)計(jì)優(yōu)化方案：

符合手機(jī)尺寸

目前情況下，大多數(shù)手機(jī)滿屏尺寸為720*1280像素，即9：12的構(gòu)圖比例。

建議設(shè)計(jì)時(shí)尺寸為：寬度720px，高度1000px。

02 縱向展現(xiàn)

外形也隸屬于手機(jī)屬性的一類。而手機(jī)與PC端最大的區(qū)別便是一個(gè)橫向顯示、一個(gè)縱向顯示。

所以，在設(shè)計(jì)時(shí)，要注意著陸頁(yè)設(shè)計(jì)的形式，注意其構(gòu)圖思維。

設(shè)計(jì)優(yōu)化方案：

上下分欄

由于PC端的影響，眾多設(shè)計(jì)師在設(shè)計(jì)時(shí)構(gòu)圖思維可能會(huì)傾向橫向展現(xiàn)。

• 比如圖一：圖小、字小，不利于閱讀

• 比如圖二：上下閱讀更符合用戶瀏覽習(xí)慣

圖一

圖二

手機(jī)形狀小而長(zhǎng)，日常瀏覽信息時(shí)，我們也會(huì)傾向于由上往下。所以，我們要盡量上下分欄，而避免左右分欄。

03 足夠聚焦

當(dāng)我們的眼前是一張白紙，我們的目光會(huì)聚焦在整張紙上;若紙上有一個(gè)小圓點(diǎn)，我們的目光就會(huì)被聚焦。

而自帶小屬性的手機(jī)，也意味著用戶的目光會(huì)足夠聚焦。

所以，在設(shè)計(jì)時(shí)，我們要能保證用戶可以最大限度記住頁(yè)面上的內(nèi)容。

設(shè)計(jì)優(yōu)化方案：

一屏一主題

一屏于手機(jī)而言就是最小的信息單元，即用戶可以最大限度看到的信息內(nèi)容。

而一屏一主題，一方面可以內(nèi)容一目了然，用戶只需瀏覽一遍便可記住，另一方面減少了信息與信息間的互相干擾。

• 比如圖一：賣點(diǎn)較多，閱讀后印象并不深刻

• 比如圖二：整屏突出一個(gè)賣點(diǎn)，更有沖擊性，且閱讀后印象更為深刻

圖一

圖二

適當(dāng)留白

利用斷句符、行間距等對(duì)著陸頁(yè)上的內(nèi)容信息進(jìn)行適當(dāng)留白。

一方面可使內(nèi)容信息表達(dá)地更有層次感，另一方面可大幅度降低用戶接收信息的難度，提高信息溝通的效率。

• 比如圖一：文字與圖片間緊密排列，沒(méi)有太多的空間呼吸感

• 比如圖二：文字間有留白，排序整齊，多而不亂

圖一

圖二

砍掉上下留白

在面對(duì)豎的長(zhǎng)方形屏幕時(shí)，為了畫面整體平衡，將設(shè)計(jì)主體居中，會(huì)讓用戶的注意力往中間的形狀聚焦。這幾乎是天生和諧的排版設(shè)計(jì)手法。

但這并不利用我們對(duì)產(chǎn)品的展現(xiàn)。

• 比如下圖，視覺(jué)上在一定程度上用戶目光集中化，但同時(shí)也不利于產(chǎn)品的展示。

所以，在對(duì)產(chǎn)品進(jìn)行展示時(shí)，要避免上下留白，而是以全屏顯示。

用戶習(xí)慣

01 跳讀、挑讀

“燥”可以說(shuō)是大部分人的關(guān)鍵詞。在海量信息的誘惑下，匆促時(shí)間的逼迫下，快時(shí)代的發(fā)展下，用戶極少有耐心去認(rèn)真看某些東西。

且目前閱讀環(huán)境都較為碎片化，所以跳讀、挑讀便是當(dāng)代人的特性。

設(shè)計(jì)優(yōu)化方案：

利用對(duì)比

由于用戶會(huì)進(jìn)行挑讀，所以我們要擅用對(duì)比，讓文字有一個(gè)層次感，讓用戶看到我們想讓他看到的東西。

• 比如下圖。利用灰色和黃色形成對(duì)比，使其內(nèi)容更加突出化。

通常對(duì)比的展現(xiàn)形式有以下幾種：

大小對(duì)比、顏色對(duì)比、虛實(shí)對(duì)比、前后對(duì)比

02 滑動(dòng)速度快

跳讀形成的一種現(xiàn)象便是滑動(dòng)速度快。且在大屏手機(jī)的加持下(只是手指上下滑動(dòng)即可)，更是造就了這種現(xiàn)象的發(fā)生。

所以，著陸頁(yè)內(nèi)容一定要“一眼見(jiàn)，秒懂”。

設(shè)計(jì)方案：

一眼見(jiàn)，秒懂

內(nèi)容信息要簡(jiǎn)單化，避免官方化、技術(shù)化、行業(yè)化的語(yǔ)言。

背景圖勿蓋字

很多情況下，廣告主為了加強(qiáng)用戶對(duì)于產(chǎn)品的認(rèn)知，會(huì)采用背景圖+字的形式進(jìn)行展示。

比如下圖，你愿意瀏覽這類的產(chǎn)品信息嗎?

上述栗子可以是一個(gè)反例。通常，我們要使用這種設(shè)計(jì)手法時(shí)，要滿足以下兩點(diǎn)：

第一，色彩不用太復(fù)雜，減少對(duì)眼睛的刺激，客觀上延長(zhǎng)了用戶的耐心，也就是延長(zhǎng)了對(duì)本屏信息的閱讀時(shí)間。

第二，背景圖上不要蓋字，否則文字和圖像傳遞的信息都會(huì)受影響，傳遞效果會(huì)被削弱。

• 比如下圖，從整體來(lái)看，色彩較多，且暗紅色背景加上紅字，使其文字的辨識(shí)度很低。

我們經(jīng)常會(huì)說(shuō)有點(diǎn)擊沒(méi)對(duì)話，但其實(shí)關(guān)鍵點(diǎn)就在于著陸頁(yè)。

那何為著陸頁(yè)?簡(jiǎn)單來(lái)說(shuō)便是：一方面是利用營(yíng)銷理論去套路用戶下單，另一方面便是利用設(shè)計(jì)去增強(qiáng)用戶體驗(yàn)。而體驗(yàn)是前提。