設計快速登錄頁面可能看起來不多。畢竟它只是一個表單和一個提交按鈕。

然而，如果您深入了解各種登錄表單頁面，您會發現大量的設計理念。如果您有一些代碼片段可以使用，您可以快速構建登錄表單頁面，而無需從頭開始編寫代碼。

 

1.登錄頁面UI

 

開發人員Khaled Mneimneh使用一些基本的CSS3屬性構建了這個時尚的登錄UI。

舍入的輸入字段非常易于復制，并且投影效果也不需要多行代碼。在一段時間內編輯樣式和顏色，這一切都可以輕松地在任何網站上運行。

但是對我來說突出的一個部分是提交按鈕中的自定義漸變。這是對細節的一些關注。

2.漸變形式

Tyler Fry開發了一個帶有黑暗風格登錄表單的有趣漸變頁面。

我最喜歡的部分是較暗的背景，以及它如何在表單中使用較輕的文本。

通常情況下，設計師堅持使用深灰色背景來制作暗頁，但是這一個在漸變中使用較暗的色調看起來很棒。

聚焦時，即使輸入字段也有一些樣式。看起來很近，你會看到焦點上的陰影突出。

3.純HTML5

紙疊登錄表單對于設計者來說是一種非常常見的技術。由于平面設計的普及，我們現在經常看不到這種情況。

然而，我仍然是這種風格的粉絲，這就是為什么Vladimir Banduristov的HTML5形式值得稱贊。它完全適用于HTML和CSS，并帶有一些非常簡潔的表單輸入設計。

但這是整個頁面突出，這是一個你可以添加到幾乎任何網站的設計。

如果你想走得那么遠，它甚至可以作為自定義WordPress登錄頁面的模板。

4.顯示/隱藏密碼字段

這個片段的基本深色設計非常干凈，易于使用。但這甚至不是焦點。

當您處理表單時，您會注意到密碼字段有一個顯示/隱藏按鈕。通常，這用于移動應用程序，因為在那里輸入密碼更加困難。

但您可以將此功能添加到您的所有登錄字段，只是為了讓用戶高枕無憂。它可以幫助人們避免錯誤的登錄，除非有人站在屏幕后面，否則這不是一個安全問題。

5.清理登錄表格

這是一個超級干凈的藍色登錄頁面，使用一些明亮的漸變效果。

輸入字段實際上具有輕微的外部發光，帶有淺色邊框和較暗的文本樣式。整個過程非常專業，我可以看到這個登錄表單用于從初創公司到公司網站的所有內容。

總的來說，我是這個設計的忠實粉絲，擁有出色的風格登錄以吸引任何人的注意力。

6. Apple Dev登錄

開發人員Christophe Molina創建了這個Apple風格的登錄字段，專為Apple Dev面板練習而設計。

這并不是大多數Apple用戶日常認可甚至使用的東西。

但它有一個非常瘋狂的設計風格，具有skeuomorphism和一個出色的標題功能區。

更不用說整個表單在純CSS上運行，這本身就是一項真正的成就。

7.動畫表格

在UI設計中添加一些動畫總是很有趣。這就是這種形式提供的簡短的jQuery驅動的表單動畫。

即使演示沒有做太多，也很容易將其轉換為工作表單字段。但是，您也可以直接在jQuery中處理用戶輸入，如果這更符合您的風格。

整體而言，這是一個非常簡單的設計，帶有不那么簡單的動畫。但是，如果有一些時間來編輯代碼，應該很容易復制。

8.黑暗登錄

黑暗的UI設計不是網絡上的標準。但如果做得好，我個人覺得深色更加誘人。

看看Andreas Storm創建的這個黑暗登錄表單。它使用明亮的石灰綠色作為登錄按鈕和自定義單選按鈕。

它可能是整個列表中最美觀的形式之一，沒有太多炫目的功能。

我強烈建議對任何黑暗的網站進行測試。它可以作為自定義登錄頁面使用，甚至可以作為嵌入到您網站上的表單。

9.使用注冊模式登錄

你現在看到很多登錄+注冊模式窗口都是由JavaScript驅動的。而這一次由Andy陳僅僅是一個不錯的設計與出色的用戶體驗混合的又一個例子。

頁面背景本身很干凈，表單字段足夠大，可以快速吸引注意力。但是，如果單擊右側的藍色小側邊欄，您將看到一個注冊窗口飛入視圖。

它出現在登錄表單的頂部，因此它就像一個典型的模態窗口一樣工作。很酷的效果！

它確實需要一些jQuery，但總共可以使用25行JS。考慮到這種形式令人難以置信的可用性，這令人印象深刻。

10.極簡主義登錄

超輕和超級基本是描述由Marcello Africano開發的這種隨和形式的最佳方式。