10個方法教你打造登陸頁面
2022-06-25 分類： 網站建設
現(xiàn)在單頁登陸頁面(Landing Page)的網站已經超過6K+了， 不幸的是，隨著快速增長的網頁設計的需求，用戶對登陸頁面的期望和需求也在不斷變化，下面是通過網站上的用戶反饋得到的10個最常見的用戶反饋，通過學習這些技巧，相信會對我們提高登陸頁面的設計有所幫助。
究竟什么是登陸頁面？
在我們正式開始前，先理清這個概念吧。一個登陸頁(不是登錄頁),是為用戶提供一個最小捷徑能夠幫 助用戶進行選擇信息和執(zhí)行想要進行操作的地方?？梢岳斫鉃槲恼轮械哪夸浰饕?，它是整個網站的門面也是用戶最先接觸和常常進入到的頁面。有一些網站由于內容較少，喜歡直接使用單獨一頁來做Landing Page，通過讓用戶不斷向下滾動來查看更多的信息，例如About, Services或Contact等等。
這樣設計的目的是為了幫助用戶節(jié)省點擊的操作，不用導航到其他頁面去，而是在當前頁面就能完成幾乎所有的操作而顯得非常直觀。這個成功的互動以最清晰的方式與用戶溝通，摒除了那些紛繁復雜的內容，進而加快了對用戶的轉化(例如轉化為付費用戶)。這篇文章就教你如何正確設計這樣一個單頁的Landing Page。
“簡化意味著消除那些不必要的東西，以便真正凸顯重要的內容.” ~ Hans Hofman
1 – 保持品牌的大寫字母的一致性
這一點經常被忽略，如果在品牌名字的地方產生不一致大寫字母的話，會影響到用戶對品牌的一印象(不專業(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)化
如果可能的話，你一定要有一個視網膜屏(Retina屏，x2)優(yōu)化過的Logo。你可能不相信，一個被“像素化”的Logo會影響用戶對你產品的一印象。所以你的Logo至少還需要一個二倍大小的必須是矢量SVG格式的設計才行。 請注意下圖中左側的“像素化”了的Logo，不太清晰。右側是一個二倍的優(yōu)化后的LOGO，在Retina屏幕上看起來十分清晰。
下一步就是優(yōu)先優(yōu)化那些你將要放到展示臺上的產品的截圖，要保證的一印象。（右側優(yōu)化過）
最后是優(yōu)化那些大圖片，讓他們更清晰，看起來更誘人，同時圖片大小要始終: （右側優(yōu)化過）
Tip: 使用ImageOptim 來優(yōu)化更大的，顏色豐富的圖片. 雖然理想的頁面復雜究竟是多大才合適這件事仍然是值得商榷的， 但是都進行優(yōu)化處理終歸是好的。
有用的鏈接:
PNG to SVG resources – 如果將PNG轉換為SVG的有用的文章
IconFinder – 免費的矢量圖標
Ready-To-Use SVG icons – 如何使用SVG圖標資源
Hero Patterns – 利用SVG設計紋理背景
3- 留白：先多后少
大多數用戶瀏覽信息內容時候，他們會略讀。所以你把所有信息都綁定在一起的時候，用戶會略過大部分的內容。 81%的人會略讀那些在線的內容。易用性專家Jacob
Nielson的報告中顯示，用戶在平均訪問網站的時間內最多讀取20%-28%的內容。留白的設計技術上來說通常稱為負空間，它們確實能讓用戶在內容之中獲得呼吸的空間，這就減慢了用戶的速度，也增加了焦點。
The Brenner Cycles 網站有著良好的負空間設計
我們總是談論如何讓PC上的內容在移動端Mobile上也能夠“優(yōu)雅”地顯示，但是又如何讓PC上的設計能夠同樣“優(yōu)雅”地展示在超大顯示器上呢？ 我們高興地看到使用Padding在字體周圍將能夠對大屏幕上那些變大的文字顯示進行優(yōu)化。
Tip: 如果你不確定是否應該增加Padding，那么就增加雙倍吧。
Tip: 堅持使用網格技術來合理增加Padding.
有用的鏈接:
Websites with good whitespace – 網頁留白的靈感
Golden Ratio Typography Calculator – 優(yōu)化每行的字數
How to Tune Typography Based on Characters Per Line
1200px Grid System – 可在PS，AI，CSS中使用的網格系統(tǒng)
All about Grid systems –Rachel Shillcock介紹的網格系統(tǒng)
4 - 一致的垂直間距
當我們使用網格系統(tǒng)時，我們能用考慮到水平填充的問題。但是常常我們會忽略垂直間距的問題。如何保持塊間距和元素padding的一致性呢？ 下面是一個經典的長縱向滾動的Landing Page設計，這里我們把一組內容叫做一“塊”信息(Section):
請注意垂直間距的一致性，而且，較小的間距是大間距的一半。
Tip: 讓間距保持一致的比率。例如，如果我們設計了一個50px的按鈕，然后可以設置這個塊的標題的底部Margin(間距)也是50px, 整個塊與上一個塊之間間距為100px. 保持一致是關鍵。
有用的鏈接：
4 Simple Steps to Vertical Rhythm –4步搞定垂直間距
How to Create Vertical Rhythm and Harmony – 如何創(chuàng)造和諧的縱向空間
Designing Faster with a Baseline Grid – 使用基線和網格加速設計
CSS Baseline: The Good, The Bad And The Ugly – 好的、不好的和丑陋的CSS標準
Basehold.it – 免費的網格系統(tǒng)
Modular Scale – 規(guī)劃網站中文字大小和間距
Type Scale – 可視的文字大小計算器
5-更好、更優(yōu)良的圖片
用一個良好的圖片可以徹底改變用戶的情緒。不幸的是，一個壞的圖片也是如此。“簡潔意味著用最少的手段達到大的目的” ~ Dr. Koichi Kawanaite
好的圖片能夠建立信任，信任就能引導用戶進行轉換?；c錢去拍攝你的團隊，你的產品，你的食物等等。
The Dona Rita 網站特色是只用了四個圖片就涵蓋了她所有的產品和品牌
Tip: 當你有了好的選擇的時候，捫心自問是否這些圖片能夠抓住你想表單的故事的點和你的品牌。要消除一切不必要的內容。
有用的鏈接：
Unsplash – 免費高清圖片
Beautiful Team Images – 僅供參考
6-減少字體, 增加權重
字體不同的權重可以達到加強標題，區(qū)分內容和標題的作用。 這會給你的用戶帶來高質量的閱讀體驗。切記不要使用多種字體(font)，盡量堅持最多只使用兩個字體家族的字體在Landing Page上。
有用的鏈接:
Google Fonts – 超過800中網頁字體
Font Pair – 幫助匹配Google 字體
Typekit – 超級漂亮的高級網頁字體
7- 文本對比度
永遠不要使用純黑(#000000) 文本在純白(#FFFFFF) 背景上。要盡量降低這種超高的對比度。例如使用灰度的背景會讓眼睛更為舒適:
#f8f8f8 背景
#111111 主標題
#222222 次標題
#444444 內容文本
#666666 引用文字
優(yōu)化后如右圖:
有一些在純黑背景上放了純白文字的也不行，對比度太高了。深色背景的優(yōu)化處理如右圖：
Tip: 嘗試在Landing Page上使用完全不同的色盤， 首先你要先確定主要的品牌顏色，其次創(chuàng)建更柔和的帶有層次的顏色。一個優(yōu)質的配色方案的效果是顯著的，可以增強網站的品牌效應。
有用的鏈接:
Colorful websites –網頁設計靈感
Coolors – 配色生成器
ColourLovers – 大量的配色方案
Color Lisa – 藝術的配色方案
8 - 確保凸顯需要用戶點擊的按鈕
嘗試使用柔和的顏色為背景，然后使用特別顯著的顏色例如：橘色，紅色，綠色或藍色來凸顯你網頁中重要的操作按鈕。 要保持按鈕樣式的一致性，這樣會提醒你的用戶哪些是可以操作的。
Pattern by Etsy的 登陸頁面
Oak by Absolut的登陸頁面將按鈕顏色設置為品牌顏色
有用的鏈接:
31 Call-to-Action examples you can’t help but click – 讓你情不自禁想要點擊的按鈕設計
9- 打磨文字間距和文字平滑度
令人難以置信的是小小的文字間距的設計也可以改變著整個網頁的風格。下面這個例子顯示出標題間距的微妙變化：
Tip: 不同的字體家族表現(xiàn)不一樣，有的需要更多的調整，有些則不需要調整。通常合適的間距可以使用戶的閱讀體驗更加流暢。
添加幾行CSS代碼也可以打磨你的網頁中字體的設計，下面是我用在自己項目中的幾行代碼:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
}
你可以看到明顯的不同是右側的文字更加柔和。
這兩個同樣都是在Mac設備上的顯示效果，右側增加了額外的CSS樣式代碼
有用的鏈接:
Font Smoothing Explained by Krzysztof Szafranek
Font Smoothing in Webkit and Firefox by David Walsh
10- 整體清理
一開始我們只削減了圖像的使用，但不應該止步于此，我們應該盡量使用更少的圖和字來達到同樣的效果。必要要有這樣的信念： 每個元素內容都要貢獻自己的力量，否則就要把它移除掉。
2 個最輝煌的見證 – 而不是展示8個水平一般的內容。
2 個最突出的特色功能, 下面可以帶幾個小的功能點 – 而不是平鋪放出12個全部功能.
你的8個婚禮照片 – 而不是過去四年的全部工作.
Launchday 以一個手機郵件地址按鈕的簡單登陸頁面開始，注意它那個美麗的按鈕
Tip: 去掉那些社交分享的Icon， 尤其是內置的那些。如果用戶非常需要的話，可以把他們寫死。
Tip: 要替換，不要新增。當你有一些新的更好的內容或圖片需要展示的話，要替換掉舊的那些。
福利Tip: 充滿感情的設計更精彩
當某些內容非常顯著和引起共鳴時， 它們會自動扎根于腦海中，這種設計是免費的廣告，會被人口碑相傳。讓你的用戶感覺到設計走心，引起共鳴。通過設計來展示你在乎你的用戶。
不要使用默認的UI控件，通常它們都很死板，盡量使用第三方或自定義一些漂亮的控件例如這個彈出框->(more)
在CSS中添加微妙的加載和退出的效果 ->(more)
添加個性表情例如->
添加個性化的加載動畫 -> (more)
高亮當前頁面塊所屬的導航標題 -> (more)
在網頁腳處下功夫 -> (more)
給出對用戶有價值的內容
相反地，通過避免出現(xiàn)下面這些元素來顯示出你對用戶的關心：
錯誤的拼寫、錯字、錯句
彈出窗口
滾動到頂端
謊言
冗長的文字
行話、俚語
混亂的元素或內容
如果你愛你的產品，就以它為自豪吧，因為你已經花了大量的時間來培育自己的登陸頁面了。
分享題目：10個方法教你打造登陸頁面
當前鏈接：http://jinyejixie.com/news2/171452.html
網站建設、網絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容
- 網站建設公司怎樣才能在激烈的競爭中獲勝 2022-06-25
- wap網站建設時需注意事項 2022-06-25
- 網站建設流量來源有哪些？ 2022-06-25
- 在成都做網站建設價格是如何來定的？網站制作需要準備些什么？ 2022-06-25
- 北京網站建設的后期維護都有哪些方面？ 2022-06-25
- 洗牌浪潮下，網站建設企業(yè)苦練“內功”方能占據一席之地。 2022-06-25
- 網站建設企業(yè)：與時代接軌 用創(chuàng)新迎接挑戰(zhàn) 2022-06-25
- 怎樣做營銷型成都網站建設？ 2022-06-25
- 營銷型網站建設的本質內容概括是什么 2022-06-25
- 成都網站建設網頁的四個基本結構 2022-06-25
- 成都外貿網站建設過程中不可忽視的細節(jié) 2022-06-25
- 營銷型網站建設的價值 2022-06-25
- 網站建設是否可以走電商之路? 2022-06-25
- 網站建設時不可忽視那些問題，趕緊收藏起來！ 2022-06-25
- SEO標題寫作技巧 2022-06-25
- 解析成都網站建設六大設計布局的合理搭配 2022-06-25
- 企業(yè)網站建設是否有做響應式的必要 2022-06-25
- 最新域名注冊規(guī)則—網站建設公司成都創(chuàng)新互聯(lián)提醒您域名注冊需要注意什么 2022-06-25
- 企業(yè)網站建設網頁版式設計文字要素 2022-06-25