起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識“登錄-注冊”表單設計那些事兒！
近期想總結下關于登錄與注冊設計的東西，碰巧發現了這篇文章。表單的設計是登錄與與注冊部分的核心要素，暫時拋下注冊與登錄機制不談，這篇文章搜集了大量有意思（saoqi）的相關表單設計案例，個人表示很喜歡。
在這個被互聯網稱霸的世界里，我們幾乎每天都會接觸到各式各樣的表單，如果要在這些表單中找出接觸頻率最高的一種，相信「注冊/登錄」這對好基友一定榜上 有名。由于數量略多，所以本篇會分為上下兩期，緊密團結在以這對好基友為核心的主題中，以客竄醬油類角色為補充案例，一起來跟大家聊聊它們中一些不錯的設 計。
Heck House 的報錯提示不僅清晰明確，而且充分利用了表單空間。
Basecamp 注冊頁的卡通人會跟隨輸入焦點而移動手臂，出現錯誤時表情還會發生變化。
Geeklist 注冊頁的密碼強度是用破解所需的時間來表示的。
Delectable 注冊頁中的表單名稱并不會如傳統做法那樣在激活輸入后消失，而是移位至輸入框上方并通過色彩的變化來提示當前輸入狀態。
Automatic 的注冊表單會提示密碼的最小長度，并且會根據輸入內容實時提示密碼位數是否達標。
在 Hotel Tonight 中只有當卡號信息輸入完整后才會激活下一步操作。
The Fernway 中將郵箱格式的判斷提示集成在了按鈕上，非常贊。
在 Mixpanel 中更改密碼時，會發現當前密碼輸入框中的圖標是一枚「老」鑰匙，而新密碼則是一枚「新」鑰匙。
填空式的表單設計，跟 Invisible Girlfriend 這款 App 一樣頗有創意。
在 Readme.io 的登錄頁，超萌的貓頭鷹會在你輸入密碼時遮住眼睛哦。
Yahoo Mail 注冊頁對于日期「月」采用了選項方式，而對于「日」和「年」則采用了輸入方式。
Dubble 將提示文案放在了虛擬鍵盤中，既節省界面空間又可以在輸入時持續進行提示。
Uber 的信用卡信息填寫流程可以通過一個輸入框來完成，且在填寫完成后自動進行提交。
AutoAnything 車型選項的圖標不僅動效很贊，同時也增強了表單選項的提示性。
Gumroad 的信用卡綁定頁面會根據輸入的卡號顯示所對應的卡片圖標，并且在輸入安全碼時會自動翻轉到卡片背面提示 CV Code 位置。
Evernote 將「注冊」和「登錄」合二為一，賬戶若存在即轉向「登錄」，否則轉向「注冊」。
易到用車注冊頁面中的性別選項使用了更形象的圖標來代替傳統的文字。
MailChimp 的注冊頁面將對于密碼強度的要求以清晰的文案列在密碼框下方，并通過色彩明暗的變化實時對所輸入的密碼進行強度提示。
Instagram 注冊表單中用戶名一欄的圖標會通過色彩的變化提示格式的正確與否。
Coda 購買頁的按鈕會根據表單的填寫狀況顯示相對應的進度。
原文標題 表單設計二三事-上
來源：http://www.tuicool.com/articles/JzQbUf
素材來源：http://uedetail.com/archives/2951
呃。。。像是打卡的文章。。。呵呵加油吧
?? 贊 已閱~感謝樓主分享~
好有情懷
樓主，圖片的動態效果怎么做到的？
不錯哦，喜歡
贊~！~自己還是經驗不足啊，很多登錄注冊方式和交互都沒見過呢~
我對于手動輸入日期還是比較贊同的，現在一律都是滑動輸入生日，有沒有想過30歲人的感受，需要滑動很久去找
有點意思，學習了。
太有動感了，不知代碼是怎么實現的？
basecamp卡通人物的手指隨輸入焦點移動，而手指的預設定義為指向的意思，指引、指路的含義。兩者的匹配不是很好。