APP登录页原型可以用三种方式起稿：拖拽组件、复用模板，或用AI生成页面。无论选哪种，都要补齐输入、验证码、提交中、失败和登录后返回的状态。画出手机号框与登录按钮，只完成了外观，还没有讲清登录体验。
已有明确布局，可以直接用墨刀原型搭建；希望先看到一版方案，可从墨刀AI描述任务。下面以手机号验证码登录为主例，介绍三条路径与共用的状态设计；这些是原型演示，不会替代真实短信发送和账号认证。
拖拽制作：先画能完成任务的一屏
新建项目时选择目标移动端画布，注明平台和逻辑尺寸。先放应用标识、手机号输入框、验证码输入框、获取验证码按钮、协议说明与登录按钮；如果项目需要其他登录方式，再明确它们与主入口的关系，不必为“完整”把所有方式堆到首屏。
拖入输入框后，把标签与占位提示分开。手机号输入框的标签在填写后仍应可辨认；验证码区域说明验证码发送到哪里，不让用户根据消失的占位词猜测字段含义。协议入口可以查看完整内容，勾选逻辑和文案由项目负责人确认，不直接套用模板中的政策。
接下来连接登录成功后的页面。不要只跳到通用首页：用户若从收藏一条内容时进入登录，成功后应按项目约定回到那条内容；如果从独立登录入口进入，则到合理的默认页面。保留这两种入口，能提前发现返回流程缺口。
套用模板：选结构，别照搬所有内容
模板适合快速比较登录布局。使用前先打开详情确认包含的页面和组件，再检查当前使用权限、价格及授权。只拿配色相近的模板可能还要大量返工，优先选与登录方式、信息密度和品牌气质接近的结构。
简洁快捷登录：适合突出一个主要入口
快捷登录页原型模板可作为手机号或单一主入口的参考。替换应用名称、输入字段和协议入口后，补上发送验证码后的界面，避免只保留一张默认状态。
蓝色登录界面：注意表单层级与辅助入口
蓝色登录界面模板可以参考品牌区域与表单之间的比例。将登录按钮放在明显位置，但不要让找回密码、切换登录方式等必要动作过于隐蔽；模板中的装饰与文案不适合时，可以单独调整。
明暗风格方案：分别检查真实文字和图标
登录界面风格模板适合比较不同视觉方案。若同时采用浅色与深色模式，要分别检查输入框、占位文本、错误提示和协议链接，而不是只把背景翻成深色。
更多布局可以继续查看移动登录页原型模板。确定结构后，回到同一个验证码案例完善状态，不需要为每一种配色重新发明一套登录规则。
AI起稿：把成功与失败一起描述
进入墨刀AI当前可用的生成入口，说明是移动端登录页面，提供登录方式与目标内容。没有完整APP需求时，不必先生成整个社交或电商应用；先得到登录页及结果状态，范围更容易控制。
设计手机端验证码登录原型。包含手机号、验证码、获取验证码、协议查看与登录按钮。发送成功后显示示例倒计时；验证码错误时在字段附近提示；提交失败保留手机号，允许重试；处理中避免重复操作。登录成功后回到用户登录前查看的内容。使用虚构号码和演示状态，不接短信接口，不生成真实账号。保持布局简洁，补默认、发送后、错误、处理中和成功五种状态。
倒计时、验证码有效期、发送限制和错误次数不能由AI替业务决定。可以先采用明确标注的演示值表达界面，再由产品和安全负责人确认正式规则。某次结果少了一种状态，就针对该区域补充，不必整页重做。
验证码登录最容易漏掉哪些状态
| 场景 | 界面表现 | 还要说明什么 |
|---|---|---|
| 号码未填或格式不符 | 说明号码问题，不继续发送 | 支持哪些号码范围，由业务确认 |
| 验证码发送中 | 显示发送进度，避免重复点击 | 失败后允许恢复，不能假装已发送 |
| 发送成功 | 显示发送目标与再次获取条件 | 倒计时只作界面反馈，限制由服务端控制 |
| 验证码错误或过期 | 说明输入问题或引导重新获取 | 不清空仍有效的手机号 |
| 登录处理中 | 反馈正在处理，避免重复提交 | 网络失败与账号限制采用对应提示 |
| 登录成功 | 进入此前内容或约定默认页 | 不能丢失用户发起登录的目的 |
错误提示不只写“操作失败”，应尽量说明可采取的动作；涉及账号是否存在等信息时，同时考虑信息泄露风险。界面演示可以使用虚构提示，但正式提示策略需要产品、安全和研发共同确认。
密码登录、键盘和粘贴也要能用
如果支持密码登录，提供清晰的显示或隐藏密码动作，切换后不丢失已填号码。允许粘贴和密码管理器等辅助方式，避免要求用户必须记住并手动输入复杂密码；W3C可访问认证说明解释了减少这类认知障碍的意义。
在手机预览中检查键盘弹出后输入框、错误提示和主要按钮的位置。验证码自动填充、键盘类型和真实焦点行为需要在实际应用或网页中测试，不能因为原型画了数字键盘就认定已经实现。不同平台的触控尺寸可以参考移动端UI设计规范。
交付前，从默认页走一次成功路径，再走验证码错误、发送失败与登录后返回。请同事独立操作，记录他在哪一步不知道怎么办。需要形成测试文档，可继续看验证码登录的AI测试用例示例。先把一条登录流程做完整，再扩展注册、找回密码和第三方登录，会更便于持续维护。
