Signup Page
注册页
Aliases:注册页面注册账号创建账号页面新用户注册立即注册页开户页注册表单
What is it
The 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?"
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Conversion entry where new accounts are created
- The product promises instant start after signup
- A guided multi-step onboarding follows
✕ When not to use
- Existing users signing in — never route them here by mistake
- Invite-only or SSO-provisioned accounts — no self signup
- Products preferring anonymous trials before asking for an account
Variants
Centered Card
居中卡片
Same centered card as login — lowest cognitive cost
Split Value Prop
分屏价值
Left panel sells the value, right holds the form
Social-first
社交优先
OAuth buttons first, one-click provisioning
Guided Steps
多步引导
Steps collect info, onboarding while signing up
Page structure
- 01
Brand & value
States what signing up unlocks, lowering the barrier.
- 02
Signup form
Only email and password; everything else deferred into the product.
- 03
OAuth
One-tap signup, visually ranked against the form button.
- 04
Terms
The terms checkbox gates the submit button.
- 05
Login link
A “Have an account? Log in” link sharing the login layout.
Implementation
flexgridmin-height: 100vhplace-items: centerShare the login page layout skeleton, swapping copy and fields. Inline-validate fields (email format, password strength meter) with autocomplete=new-password; disable submit until terms are checked. Keep OAuth and form submit visually ranked; on submit, move into guided profile completion.
Compare
Full comparison →| Signup Page注册页 | Login Page登录页 | |
|---|---|---|
| User state | New users without an account | Returning users with an account |
| Core goal | Lower the barrier and convert | Fast re-entry into the product |
| Safety requirement | High — verification and anti-abuse | Medium — session and brute-force protection |
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 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.
PagesAlternative