2016.09.20

1.干凈優(yōu)雅的

GitHub-輸入框嵌在背景圖中

知乎-極其干凈的背景圖，整潔利落

2.極簡，大量的留白

簡書-干凈的白背景

小米-超大的輸入框，色彩對比鮮明，干凈愉悅

fonts.com-一個(gè)國外下載字體的網(wǎng)站，顏色素雅

wordpress-一個(gè)博客網(wǎng)站，格式嚴(yán)肅穩(wěn)重

3.與網(wǎng)頁內(nèi)容一起顯示

豆瓣-綜合性分享網(wǎng)站。能夠在不登錄時(shí)瀏覽信息。

20x200.com-像是某個(gè)藝術(shù)網(wǎng)站，清新溫暖

FontM-字體網(wǎng)站，滿滿的粗獷感

4.彈窗登錄

Twitter-一貫的優(yōu)雅

Mixbook-制作相冊，版式有些雜亂

5.美麗的圖片背景

tumblr-介于blog和twitter之間的服務(wù)，輕博客鼻祖。分步驟式，先驗(yàn)證郵箱，十分簡潔

mailchimp-超大的輸入框，霸氣十足

趨勢

輸入框的排列方式：

1.分離式，如mailchimp，Twitter；

2.一體式，如知乎，微信公眾平臺；

登錄框的位置：

1.居中：視覺中心，通常運(yùn)用大圖片做背景或使用干凈的顏色留白，如：Tumblr、Fonts.com、簡書。

2.右側(cè)：左側(cè)用小插畫，小動(dòng)畫，logo等進(jìn)行填充，有利于品牌的宣傳，如：網(wǎng)易郵箱、電商網(wǎng)站。

3.頂部：登錄框占位不大，便于信息量較大的網(wǎng)站進(jìn)行信息的瀏覽，如：豆瓣、新浪微博。

4.彈窗式登錄：透明的黑色蒙版可以很好地讓用戶看到后面的內(nèi)容，不需要設(shè)計(jì)獨(dú)立的登錄頁面，只需要設(shè)計(jì)登錄框。

登錄按鈕的長度：

1.與輸入框等長：視覺上整齊，點(diǎn)擊方便，弱化了注冊通道的顏色，體驗(yàn)上更輕松（大部分網(wǎng)站提供登錄、注冊兩個(gè)通）；

2.登錄、注冊兩個(gè)按鈕與輸入框等長：嚴(yán)謹(jǐn)穩(wěn)重，適用于未提供登錄、注冊兩種通道的網(wǎng)站以及初次進(jìn)入直接顯示本頁面的網(wǎng)站；

3.只有登錄按鈕，長度不定：按鈕伴隨著提示信息或者留白，通常根據(jù)登錄框相對于頁面的位置左側(cè)、右側(cè)對齊，長度或根據(jù)網(wǎng)站規(guī)范的尺寸進(jìn)行統(tǒng)一，或根據(jù)輸入框的長度進(jìn)行設(shè)定……