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

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

01. Interface Lovers

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

設(shè)計把重點牢牢地放在內(nèi)容上，并使用平衡的layoutin，由Achumba的初戀:print?！敖缑鎼酆谜叩脑O(shè)計，基于從報紙版面上取下的簡單的三欄網(wǎng)格，是不復(fù)雜和干凈的，”他說。美麗的人像攝影吸引了游客，并強(qiáng)調(diào)了網(wǎng)站對個人故事的興趣。

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

02. Google Fonts

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

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

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

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

03. MIT Technology Review

麻省理工學(xué)院的技術(shù)評論讓它變得簡單

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

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

04. Resn

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

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

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

05. Present & Correct

每個小組都是一個誘惑

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

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

06. Monotype

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

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

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

07. LS Productions

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

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

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

08. O'Neill

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

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

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

09. Hipstamatic

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

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

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

10. Apple

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

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

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

11. Pinterest

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

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

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