案例：登录注册

登录页是转化漏斗的第一道闸口：字段每多一个，流失就多一截。移动端的登录设计 只有一条铁律——一屏一个动作：手机号 + 验证码 + 密码收进单列，协议勾选与 第三方登录兜底，主按钮吸底对准拇指。本案例把倒计时、密码可见性切换、协议拦截 全部做成真实交互。

整页演示

手机号登录 · 转化表单

品牌字标 + 单列三字段（验证码倒计时 / 密码可见性切换）+ 协议勾选拦截 + 吸底提交 + 第三方登录兜底。

9:41

登录

EVOKE

还没有账号？验证通过后自动注册。

手机号

验证码

设置密码

8 位以上，建议字母 + 数字组合

我已阅读并同意《服务协议》与《隐私政策》

其他方式登录

拆解：桌面 → 移动做了什么

桌面版式	本案例的移动表达
登录/注册双卡切换	合并为一个动作：验证通过自动注册，少一次选择
三栏表单行	单列字段，EwField label 上置 + 错误内联（不弹窗报错）
图形验证码 + 刷新按钮	短信验证码 + 倒计时后缀按钮，60 s 内置灰防重发
密码强度条	hint 一句话给到规则，可见性切换收进输入框后缀
页脚协议小字	勾选圆点上移到按钮上方，未勾选提交时整句标红拦截
多入口并存	吸底区收敛为一个主按钮 + 第三方图标兜底

搭建清单

1. 字段纪律：手机号 inputmode="tel"、验证码 inputmode="numeric"，键盘直接 出数字；错误用 EwField 的 error 内联展示，输入即清除。
2. 验证码倒计时：后缀按钮放 EwInput 的 #suffix 插槽，倒计时期间 disabled 置灰；倒计时逻辑在页面层，组件不感知业务。
3. 密码可见性：#suffix 放 eye / eye-off 切换，type 在 password / text 间切换即可。
4. 协议拦截：勾选圈用 check 图标反白表达选中；未勾选提交不弹窗， 协议文案整句转危险色一次即可。
5. 第三方登录：wechat / apple / github 都是核心图标集内置品牌 Logo， 40px 正圆描边按钮对齐「轻注册」语气。