Readiz 网页 UI 设计
用户不喜欢按钮和说明占据屏幕的布局。通过小型控件和清晰的层级，让用户一眼阅读和浏览实际内容。无论是新建 Web UI 还是修改现有 UI，均适用此标准。如果用户有指定的品牌、平台和无障碍要求，则优先遵循。
基本密度
以下为未单独指定设计的 Web 工具起始值。优先减少不必要的边距和控件，而非将正文压缩至更小。
| 元素 | 默认值 |
|---|---|
| 常规按钮·筛选器·select | 高度 28px，字号 12px，左右内边距 6~8px |
| 图标按钮 | 26×26px，图标 14~16px |
| 辅助/表格内控件 | 24~26px |
| 按钮间距 | 4~6px |
| 卡片内边距 | 12~16px |
| 表格单元格 | 纵向 5 |
| 正文 | 13 |
- 短按钮按内容宽度自适应。不要仅仅因为是主操作就做成大或宽的按钮。
- 在移动端也保持紧凑的视觉尺寸。不要通过统一的媒体查询将所有按钮放大至 38~48px。如果确认存在实际触摸错误，则调整该操作的间距和点击区域，并确保不与相邻操作重叠。如有明确指定的平台规格则另行遵循。
- 长选项/列表行根据文本长度自然扩展。不要固定高度或使用省略号截断可读内容。如果像编号导航那样能单独展示当前标题，则将小型导航控件与内容标题分离。
- 偏好蓝色系作为默认强调色。使用明亮安静的背景、细边框和小圆角。已有的明确品牌和图表中按语义区分的颜色保持不变。
屏幕布局
- 在首屏区域放置实际图表、表格和核心内容。不要用大标题、长副标题或重复的徽章挤占工作区域。
- 重复数值和比较使用表格，条目导航使用排序列表/短标签页，图表操作使用小型工具栏。不要将单个按钮排列成大卡片样式。
- 熟悉的操作使用项目现有的 SVG/图标体系。为图标提供可访问的名称和 tooltip/必要的短标签。不要仅靠颜色区分选中、成功和错误。
- 保留核心摘要和常用操作，将详细说明、来源、用法、保存标准放入 ⓘ 或默认折叠的 details 中。错误、保存失败、执行结果和重要判断条件在需要时显示。
- 不要在同一状态下重复显示标题、卡片、徽章和说明。不要让用户为了寻找功能而阅读长文。
- 对齐操作按钮、表格和图表之间的间距。桌面端的目录适合窄布局，移动端的目录适合可折叠且能显示当前位置的样式。
以实际屏幕验证
- 修改前先检查实际按钮的 computed height、padding、line-height 以及首内容位置。不要仅因为 CSS 声明变更就认为已经变小。
- 优先修改现有组件的 variant 和 token。检查通用 CSS、高优先级规则、移动端覆写和动态样式是否导致尺寸变大。不要继续堆叠覆盖规则，而是清理导致该尺寸的根源。
- 在代表性 PC、平板和 360~390px 移动端上直接查看。确认常规操作保持上述默认值，长文本未被截断，文档无横向溢出，工具和图表无重叠。
- 验证展开、选中、键盘焦点、触摸以及必要的保存/恢复功能。不要因为设计更改而修改现有数据、存储键或图表坐标。
- 对请求范围内的结果进行实现和验证；涉及部署的任务还需确认实际部署后的屏幕。本技能本身不增加发布或消息发送权限。