正確的登錄頁面設(shè)計(jì)可以創(chuàng)建或破壞一個(gè)網(wǎng)站，因?yàn)檫@將是你的訪問者操作的第一個(gè)頁面，如果這個(gè)頁面做的不好，那么大多數(shù)人將不會(huì)再逛這個(gè)網(wǎng)站了。登錄頁面設(shè)計(jì)應(yīng)該清楚地傳達(dá)產(chǎn)品或服務(wù)的獨(dú)特賣點(diǎn)，并專注于一個(gè)調(diào)用行動(dòng)(CTA)，比如讓訪問者注冊(cè)他們的詳細(xì)信息或者購(gòu)買。無論目標(biāo)是什么，它都取決于頁面的設(shè)計(jì)來引導(dǎo)用戶走向它，無論是通過使用簡(jiǎn)潔的頁面、漂亮的顏色或更明確的方向線索。

清晰、簡(jiǎn)潔的標(biāo)題、子標(biāo)題和敏感的、容易掃描的要點(diǎn)是當(dāng)天的順序。登陸頁應(yīng)該有醒目的標(biāo)識(shí)，經(jīng)常把企業(yè)形象與產(chǎn)品或服務(wù)相結(jié)合，直接切入正點(diǎn)以避免用戶的注意力漂移。從網(wǎng)上找到了一些特別有效的登陸頁面設(shè)計(jì)實(shí)例，大家可以參考一下。

01. Interface Lovers

為一個(gè)專為"界面愛好者"設(shè)計(jì)的網(wǎng)站設(shè)計(jì)一個(gè)登陸頁面絕非易事，但Facebook的設(shè)計(jì)師Timothy Achumba卻把它釘在了這里。該網(wǎng)站旨在激勵(lì)人們，在UI設(shè)計(jì)的工藝上提供實(shí)用的建議，并慶祝不同設(shè)計(jì)師的獨(dú)特體驗(yàn)。

設(shè)計(jì)把重點(diǎn)牢牢地放在內(nèi)容上，并使用平衡的layoutin，由Achumba的初戀:print。"界面愛好者的設(shè)計(jì)，基于從報(bào)紙版面上取下的簡(jiǎn)單的三欄網(wǎng)格，是不復(fù)雜和干凈的，"他說。美麗的人像攝影吸引了游客，并強(qiáng)調(diào)了網(wǎng)站對(duì)個(gè)人故事的興趣。

為了構(gòu)建這個(gè)站點(diǎn)，開發(fā)人員Iheanyi Ekechukwu利用了Tachyons，這是一個(gè)功能CSS框架，允許對(duì)設(shè)計(jì)進(jìn)行細(xì)粒度的控制。結(jié)果是一個(gè)華麗的，最小的設(shè)計(jì)，沒有任何的鈴聲和哨聲。

02. Google Fonts

谷歌引導(dǎo)你直接到字體，沒有任何麻煩

最初在2010年推出的谷歌字體現(xiàn)在在互聯(lián)網(wǎng)上被瀏覽超過150億次，在全球超過135種語言中。谷歌字體網(wǎng)站是干凈和完全響應(yīng)的，使用材料設(shè)計(jì)的網(wǎng)格和樣式。

在她的博客文章中，設(shè)計(jì)師Yuin Chien解釋道:"我們通過建筑的能力來玩尺度、顏色和字體的配對(duì)，我們邀請(qǐng)每個(gè)人在他們的項(xiàng)目中發(fā)現(xiàn)并無縫地使用字體。"",她是對(duì)的。界面既誘人又美觀。這也是一種直觀而有趣的探索。

至關(guān)重要的是，它不會(huì)強(qiáng)迫你跳過hoops來獲取字體;他們就在登陸頁面的頂端，準(zhǔn)備好讓你玩了。您可以直接輸入頁面的文本字段來測(cè)試它們。如果你被選擇淹沒了，谷歌可以很容易地縮小范圍，在字體類別和方便的滑塊上，有很多風(fēng)格，厚度，傾斜和寬度。

03. MIT Technology Review

麻省理工學(xué)院的技術(shù)評(píng)論讓它變得簡(jiǎn)單

很多網(wǎng)站都在用花里胡哨的方式來瀏覽這些頁面，找到一個(gè)能讓事情變得簡(jiǎn)單的網(wǎng)站是一種解脫。麻省理工學(xué)院(MIT)的技術(shù)綜述首次發(fā)表于18世紀(jì)末，它有著悠久而自豪的傳統(tǒng)，它的網(wǎng)站是專門為展示優(yōu)秀的藝術(shù)和閱讀而設(shè)計(jì)的。

登陸頁面是一種樂趣，你可以用一個(gè)大膽的封面故事，三個(gè)次要的故事，以及一個(gè)被稱為"下載"的故事。這使得訪問者能夠以一種沒有廢話的方式快速地了解事情。右上角的一個(gè)大紅色訂閱CTA也立即吸引了你的眼球，引導(dǎo)訪問者進(jìn)入付費(fèi)的網(wǎng)站選項(xiàng)，而不會(huì)妨礙他們享受免費(fèi)的內(nèi)容。

04. Resn

神秘的"墜落"打破了常規(guī)登錄頁面設(shè)計(jì)的大部分規(guī)則

現(xiàn)在讓我們來看看一個(gè)頁面，它忽略了登陸頁面設(shè)計(jì)的大部分規(guī)則，但無論如何都是成功的。從來沒有人排隊(duì)，使用標(biāo)準(zhǔn)的用戶界面模式，設(shè)計(jì)機(jī)構(gòu)Resn建立了一個(gè)以"Drop"為中心的登陸頁面，這是一個(gè)神秘的、閃閃發(fā)光的淚滴形狀的多邊形，它充當(dāng)了Resn心靈的入口。

點(diǎn)擊并按住鼠標(biāo)，你就會(huì)變成一個(gè)灰度，蘋果主題的萬花筒;一種用x射線激光束將人肉從舊畫中剝離出來的蝙蝠。一個(gè)有趣的管;一種能提供奇異的剪紙的迷幻樂;天知道還有什么。Resn已經(jīng)打破了許多創(chuàng)建登錄頁面的常規(guī)規(guī)則，但其結(jié)果足夠令人信服，如果這種東西能讓你的船漂浮起來，那么你很有可能繼續(xù)挖掘，如果不這樣做的話，你就不會(huì)浪費(fèi)時(shí)間。"The Drop"可能是一個(gè)完美的過濾器，用來吸引公司想要與之合作的客戶類型，這是一個(gè)你可能永遠(yuǎn)不會(huì)忘記的真正華麗的登陸頁面。

05. Present & Correct

每個(gè)小組都是一個(gè)誘惑

在它整潔的華麗圖像網(wǎng)格中，現(xiàn)在和正確的網(wǎng)站觸及了它的核心受眾:那些迷戀文具的人。

一張圖紙背景，淺灰色的著色和經(jīng)典的字體，一個(gè)學(xué)校鍛煉的書vibe和每個(gè)面板顯示一個(gè)漂亮的產(chǎn)品。Stock被精心安排在頂部菜單欄中顯示的類別，很容易點(diǎn)擊整個(gè)過程，從有趣的標(biāo)題"蜉蝣"開始。

06. Monotype

就像公司本身一樣，Monotype的登錄頁面是關(guān)于排版的力量

"我們是類型的公司，"Monotype的登錄頁面，它的低調(diào)而巧妙的設(shè)計(jì)與這自信的聲明攜手并進(jìn)。整個(gè)左半邊的頁面設(shè)計(jì)都是為了公司的使命宣言，有一個(gè)巧妙的轉(zhuǎn)折:通過一個(gè)下拉菜單，你可以看到文字的各種字體，以及各種各樣的重量和風(fēng)格，來體驗(yàn)一下Monotype所做的事情。

頁面的右邊是一個(gè)鏈接到Monotype圖書館，企業(yè)許可證，和公司新聞，在不同的字體中有大量的'M'圖標(biāo)，像drop caps。柔和的sepia色調(diào)色板將重點(diǎn)牢牢地放在字體上。

07. LS Productions

《LS》的制作將你帶進(jìn)華麗的蘇格蘭地區(qū)

LS Productions——一家總部位于蘇格蘭的stills和移動(dòng)服務(wù)制作公司——知道它最大的資產(chǎn)是什么，當(dāng)你去它的網(wǎng)站時(shí)，你會(huì)看到它。一個(gè)窗口填充的循環(huán)視頻展示了公司的工作，都是在美麗的地方設(shè)置的。向下滾動(dòng)，你將學(xué)習(xí)它的三個(gè)主要服務(wù):運(yùn)動(dòng)、靜態(tài)和位置。

到這時(shí)，登錄頁已經(jīng)完成了它的工作。下面的一切——每周的華麗地點(diǎn)，"會(huì)見團(tuán)隊(duì)"的部分——只是粉飾門面。如果你打算招聘LS產(chǎn)品，那么你就已經(jīng)進(jìn)入了一個(gè)主要的服務(wù)頁面，在那里你會(huì)發(fā)現(xiàn)大量相關(guān)的、良好的信息，讓你相信公司的適用性。

08. O'Neill

奧尼爾的照片重拍，完美地出售了沖浪和雪夢(mèng)

美國(guó)生活方式品牌奧尼爾主要關(guān)注兩件事:沖浪和雪。它的美國(guó)網(wǎng)站用一個(gè)圖片引導(dǎo)的登陸頁面，把你的衣服范圍和運(yùn)動(dòng)裝備都賣給了你，讓你能在巨大的海浪和白雪覆蓋的山脈上拍攝。

如果你知道你想要的是什么，那么在登陸點(diǎn)頂部的一組下拉鏈接可以直接把你帶到你想要的東西，但在你的頁面下方，你可以看到一些大的、圖片引導(dǎo)的部分鏈接和Instagram畫廊。這一切都足以讓你沖到海灘上——或者是最近的山的頂部——但不是在先把奧尼爾的裝備儲(chǔ)存起來之前。

09. Hipstamatic

Hipstamatic的登陸頁面顯示了該應(yīng)用程序的功能

對(duì)于復(fù)古的模擬攝影應(yīng)用Hipstamatic，這一切都是為了展示酷炫的功能，以及應(yīng)用程序的外觀、感覺和直觀的導(dǎo)航，盡可能吸引用戶。

在頁面的頂部，一個(gè)滾動(dòng)的畫廊展示了在實(shí)踐中"Hipstamatic美學(xué)"，而一個(gè)巨大的iPhone展示了最新版本的應(yīng)用程序，它的老式的經(jīng)典模式和新的推廣，具有更多最新的功能。在那下面，一個(gè)新的strapline總結(jié)了Hipstamatic現(xiàn)在的全部?jī)?nèi)容:"制作美麗的攝影"，一個(gè)大的CTA引導(dǎo)你到App Store。

10. Apple

蘋果的登錄頁面圍繞著精美的產(chǎn)品攝影

毫無疑問，毫無爭(zhēng)議的工業(yè)設(shè)計(jì)大師可以把一個(gè)像樣的網(wǎng)站整合在一起，而Apple.com毫不費(fèi)力的簡(jiǎn)單，甚至贏得了一個(gè)D&AD黑鉛筆。

該網(wǎng)站將該公司廣泛的產(chǎn)品系列和零號(hào)產(chǎn)品放在一個(gè)熱門產(chǎn)品上。除了頂部的簡(jiǎn)單導(dǎo)航欄外，它只是精美的產(chǎn)品攝影，產(chǎn)品名稱和它的口號(hào)。這里甚至連一個(gè)CTA都沒有——蘋果明智地認(rèn)為，它的精通技術(shù)的觀眾會(huì)知道圖像和文字與更多的信息聯(lián)系在一起。這是一個(gè)真正的大師班。

11. Pinterest

Pinterest非常有名，它的登陸頁面不需要努力推銷自己

Pinterest知道它想要什么，并沒有心情去擊敗布什:它是注冊(cè)的，或者什么都沒有。流行的在線剪貼簿在其品牌和迅速發(fā)展的聲譽(yù)上有足夠的信心，不要過于擔(dān)心自己的銷售，或者讓用戶有機(jī)會(huì)瀏覽一些董事會(huì)，并有機(jī)會(huì)回避。

在注冊(cè)卡的后面，Pinterest的一份令人愉快的照片剪貼簿，讓人感覺很好，給用戶提供了一種體驗(yàn)。這是一個(gè)簡(jiǎn)化版和美化版的你實(shí)際上得到的——沒有冗長(zhǎng)的描述，廣告或repin info在這個(gè)版本的首頁。