Login Page
登录页
Aliases:登录页面登陆页登录界面登录表单登录框输密码进系统的页面账号登录页
What is it
The gateway page that gets existing users in with minimal friction: an identity form (email/password) and one primary button, supported by third-party login, password recovery and a signup link. Deliberately minimal — every removed field raises conversion, and all decoration yields to the single goal of getting in fast.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Entry point of any product with an account system
- Returning users need to resume a session quickly
- SSO or third-party identity providers are involved
✕ When not to use
- First-time account creation — a signup page fits better
- Throwaway tools that need no identity
- Lightweight inline auth — a modal is lighter
Variants
Centered Card
居中卡片
One centered card, the universal default
Split Screen
分屏品牌
Brand panel left, form right — common in SaaS
Multi-step
多步登录
Email first, password next — enables passwordless
Social-first
社交优先
OAuth buttons first, form secondary
Page structure
- 01
Brand panel
Logo or brand art; takes one side in split layouts, hidden on mobile.
- 02
Login form
Email or username plus password, minimal fields, a single primary button.
- 03
OAuth
OAuth buttons below a divider, visually ranked below the primary action.
- 04
Recovery links
Forgot password and remember-me as de-emphasized secondary actions.
- 05
Signup link
A “No account? Sign up” link at the bottom to close the loop.
Implementation
flexgridmin-height: 100vhplace-items: centerCentered card via min-h-screen grid place-items-center; split variant uses grid-cols-2 at md, hiding the brand panel on mobile. Fields set autocomplete (username / current-password); password gets a visibility toggle; errors are inline and linked with aria-describedby; disable the submit button while pending.
Compare
Full comparison →| Login Page登录页 | Signup Page注册页 | |
|---|---|---|
| User state | Returning users with an account | New users without an account |
| Core goal | Fast re-entry into the product | Lower the barrier and convert |
| Safety requirement | Medium — session and brute-force protection | High — verification and anti-abuse |
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsContainsA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsContainsChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUses patternThe conversion page turning strangers into accounts: the form keeps only the fields needed to start (email + password) and defers everything else into the product, supported by third-party signup, a password strength hint and terms consent. It shares a layout skeleton with the login page, but every design decision answers "is signing up worth it and painless?"
PagesAlternative