DOMAIN · FRONTEND
前端与界面
界面如何显示、响应和切换状态。从用户常说的话进入，逐步看懂背后的技术关系与验收边界。
用户在浏览器里直接看到并操作的界面部分。
“把这个页面做得更清楚，按钮点下去要有反应”负责获取网页资源、执行脚本并把页面画出来的应用。
“为什么 Chrome 正常，手机浏览器却错位”描述网页内容结构和语义的标记语言。
“把标题、正文、列表和表单先搭出来”控制页面布局、颜色、间距和响应式表现的样式规则。
“让卡片对齐，手机上改成一列”让网页能够处理数据、响应操作并动态更新的编程语言。
“点击以后打开面板并加载数据”浏览器把 HTML 解析成的可读取、可修改的页面对象树。
“找到这个按钮，点下去后改掉旁边的文字”把一块界面及其行为封装成可复用单元。
“把这张产品卡做成以后还能重复使用的模块”父组件传给子组件的只读输入。
“卡片标题和图标从外面传进来”会随操作或数据变化并影响界面结果的信息。
“记住现在选中了哪个标签页”用户或浏览器发生某个动作时发出的可监听信号。
“点击按钮、输入内容或提交表单时执行动作”按钮执行当前页面动作，链接把用户带到另一个地址。
“这个是提交操作，不是跳到另一个页面”输入控件收集单项信息，表单组织并提交一组信息。
“让用户填写邮箱、选择产品后提交咨询”复选框可多选，单选框在一组中选一个，开关立即切换布尔设置。
“这里能多选，那里只能选一个，通知开关点完马上生效”Select 从有限选项中选择，AutoComplete 边输入边给候选。
“产品固定几个可选，城市太多要支持搜索”在提交前后检查输入是否完整、格式是否正确、业务规则是否满足。
“手机号格式不对时就在字段旁边说清楚”表格适合对齐比较，列表适合顺序浏览，卡片适合独立对象概览。
“数据要横向比就用表格，产品概览用卡片”Modal 居中打断当前任务，Drawer 从边侧展开并保留更多页面上下文。
“居中弹窗和侧边抽屉该怎么选”Toast 短暂提示即时结果，Notification 承载更重要或可追溯的消息。
“保存成功轻轻提示一下，任务完成要能以后再看”Tooltip 解释简短标签，Popover 可承载少量操作或结构化内容。
“鼠标放到图标上解释，点开后再给几个选项”导航帮助用户选择去向，路由把地址映射到对应页面或视图。
“点击产品介绍要打开固定地址，刷新后还在同一页”同一内容根据可用宽度调整布局，而不是简单缩小桌面页面。
“手机改成单列，平板不要挤成两半”界面必须说明正在等待、确实没有数据，还是请求失败。
“别一直白屏，告诉我是加载中、没有内容还是出错了”让键盘、读屏和不同能力的用户都能理解并操作界面。
“不用鼠标也能完成，弹窗打开后焦点别跑到后面”客户端渲染在浏览器组装页面，服务端渲染先生成 HTML 再交给浏览器。
“首屏要快又能被搜索，交互部分再在浏览器接管”触发一个明确动作的可点击控件。
“把“提交”做成主按钮，点击后要有处理中状态。”把用户带到另一个页面、位置或资源的导航入口。
““查看文档”应该能复制地址，也能在新标签页打开。”接收一行短文本、数字或密码的表单控件。
“这里让用户输入项目名称，并保留刚才输入的值。”接收段落、说明和长文本的可伸缩输入区域。
“备注可以写多行，内容多时输入框自动增高。”允许用户独立选择零个、一个或多个选项。
“这些通知方式可以多选，默认只勾选站内消息。”从一组互斥选项中选择且只选择一个。
“部署环境只能选测试、预发布或生产其中一个。”立即打开或关闭一个二元设置。
“打开自动保存后立刻生效，不需要再点保存。”从预设列表中选择一个或多个值。
“项目很多，先点开下拉框再选择对应项目。”用户输入时根据关键词推荐可能的完整值。
“输入公司名称时列出匹配项，也允许继续输入新名称。”用日历或时间面板选择规范化日期。
“开始日期不能晚于结束日期，手机上也容易点。”把本地文件传到服务器或对象存储。
“支持拖拽上传 PDF，并显示进度、大小和失败原因。”说明一个输入控件在收集什么以及是否必填。
“不要只用占位文字，字段上方要有固定名称。”按行列展示可比较的结构化数据。
“设备列表需要排序、筛选，并固定第一列。”按相同结构连续展示一组同类项目。
“消息按时间排列，每条显示标题、摘要和状态。”把一个可独立理解的对象及其操作组织在有限区域内。
“每个产品一张卡片，但不要卡片里再套卡片。”用短标签表达分类，用小徽标表达数量或状态提醒。
“状态用标签，未读数量放在菜单图标旁。”用人像、Logo 或首字母帮助识别用户或组织。
“没有头像时显示姓名首字母，不要出现破图。”在同一上下文中切换少量并列内容视图。
“概览、日志和设置放在同一页的三个标签里。”按标题展开或收起补充内容，降低一次性信息密度。
“FAQ 默认收起，只展开用户正在看的问题。”在当前页面上方临时阻断流程，要求用户完成或取消一个任务。
“删除前弹出确认框，焦点不能跑到背景页面。”从屏幕边缘滑出一个保持主页面上下文的辅助面板。
“点击记录后从右侧查看详情，不离开列表。”短暂显示操作结果，不要求用户立即回应。
“保存成功后右上角提示两秒，不挡住当前操作。”承载较完整、可稍后处理的系统消息。
“任务完成后发通知，用户可以点进去看结果。”悬停或聚焦时解释一个简短控件或术语。
“图标按钮没有文字，悬停时显示“复制链接”。”由某个控件触发、承载少量交互内容的浮层。
“点筛选图标后弹出几个选项，点外面自动关闭。”显示当前页面在信息层级中的位置及返回路径。
“从产品到版本详情，让用户知道自己在哪一层。”把大量结果切成稳定页次，允许定位与返回。
“每页 20 条，返回列表时仍停在原来的第 4 页。”从按钮或导航项展开一组相关命令。
“更多操作里放复制、归档和删除，但危险项单独标识。”页面进入时用主标题、核心说明和主要操作建立第一印象。
“第一屏要说清产品是什么，并露出下一段内容。”引导用户完成页面最重要的下一步。
“主要按钮写“下载 macOS 版”，不要只写“立即体验”。”在页面顶部承载品牌、主导航和全局操作。
“所有页面导航位置一致，手机菜单必须能点开。”在页面末尾提供法律、联系与辅助导航信息。
“把备案号、支持邮箱和常用链接统一放在底部。”沿一个主轴排列、分配和对齐一组元素的 CSS 布局方式。
“按钮组横向排列，空间不够时换行。”用明确的行列轨道组织二维页面结构。
“桌面三列、平板两列、手机单列，卡片宽度保持稳定。”