登录页重设计：从第一轮排版到正式上线的每个细节

这次登录页的变化从 11 月 3 日开始，并在当天完成首轮部署。工作不只是替换配色：欢迎信息、表单、操作按钮、插画、自动填充和手机阅读顺序都逐项调整。随后开放邮箱注册、接入邮箱验证，11 月 8 日又将协议勾选限定到注册流程。

本文保留设计迭代过程。文中的旧图展示当时状态，当前账号流程以文末说明为准。邮箱注册与验证的完整过程另见专题。

先整理信息，再调整视觉

最初的重设计把桌面页面分为左侧表单、右侧插画。标题突出 ASD Super Agent，周围减少重复说明；手机改为上下布局，让欢迎信息和输入表单按顺序出现。

第一轮完成了登录与注册表单、密码确认、协议弹窗及三种界面语言。已有用户名账号继续使用原来的登录方式，邮箱注册作为新入口加入，并不是将原账号体系整体替换。

改为明亮几何背景与独立插画层

后续版本收敛为白色卡片与珊瑚橙、亮黄、绿色的几何背景。家庭成员、植物、小机器人以及对话和视频元素组成右侧插画，背景使用轻微漂浮效果；系统选择减少动态效果时关闭相应动画。

插画并非一张图直接铺满。为了保留植物和几何形状，调整过容器裁切、插画大小和偏移位置。上传窗口又拆成独立图层，允许它浮出登录卡片右缘，形成最终的层次关系。这也是后续缓存修复需要分别检查两份图片的原因。

一天内的逐轮调整

以下时间为 11 月 3 日的提交时间，采用新加坡／北京时间。每项都对应实际实现，并随当天部署进入网页。

时间	改动	具体处理
13:37	首轮重设计	完成登录／注册、邮箱字段、确认密码与协议流程。
13:49	明亮几何版	精简页面说明，加入家庭与 Agent 插画，统一暖色视觉。
13:54	压缩卡片高度	移除顶部图标、放大产品名，收紧勾选项间距，保留植物全貌。
13:55	恢复背景形状	恢复插画后的几何图形，避免边界裁掉花草。
13:57	调整卡片宽度	缩窄卡片，调小“欢迎使用”，重新安排操作区域。
13:58	调整标题与操作文字	继续突出产品名，校准按钮文字的对齐。
14:01	精简输入框	移除输入框上方的可见标签，采用透明底和边框；输入含义仍由占位及可访问名称说明。
14:03	圆角按钮与箭头	调整登录按钮形状、箭头与文字位置。
14:04	收窄并居中	登录按钮缩窄，箭头和文字一起居中。
14:05	登录与注册并排	注册入口放到登录右侧，两个操作等宽排列。
15:26	浮动上传卡片	让上传窗口浮出卡片右侧，校准与主插画的关系。
15:35	修复旧插画缓存	更新图片版本参数，避免线上把旧主图和新上传窗口叠在一起。

这些调整并非全部同时保留。比如按钮曾按中间方案改变对齐，最后收敛为并排、等宽、内容居中的操作区。记录中间步骤，是为了说明最终界面怎样形成，而不是把每个中间稿都描述为当前可选主题。

自动填充和协议弹窗也属于界面工作

浏览器自动填充原本可能带来系统蓝色背景，与整页视觉脱节；这轮改动将其处理为与页面一致的暖色整行高亮。自动登录和协议采用圆形勾选样式，保留明确的选中与未选中状态。

协议不只是一行链接。弹窗需要支持手机内容滚动、键盘关闭和焦点限制，避免打开后键盘继续落到背景表单。打开协议与实际同意协议也需要区分：如果用户已取消勾选，只有明确选择“同意并继续”才重新勾选。

11 月 3 日还调整过协议默认勾选。到 11 月 8 日，按最新使用流程取消了登录页的协议项：现在只有注册需要勾选，普通登录和找回密码都不需要。 当前行为与早期截图中的勾选项因此不同。

如何验证这次重设计

• 在桌面和手机尺寸检查卡片、完整插画、输入框、按钮及弹窗，避免横向溢出或植物被裁切。
• 使用合成账号与模拟接口检查登录、注册、协议取消与确认、自动登录、返回目标页面等流程。
• 核对简体中文、繁体中文和英文，确认标题长度和按钮文字变化后仍可使用。
• 完成前后端部署检查、公开入口和静态资源检查，确认线上实际返回新图片。
• 后续账号验证与找回密码回归再次覆盖这套界面，未向真实用户发送测试邮件或改动真实账号。

登录页重设计、邮箱注册开放、邮箱验证上线和找回密码，是连续但独立的工作。将它们分开记录，也能更清楚地看见这套账号入口是怎样逐步完整的。