文件
crab-input-rtos/com.sydxky.rtos.inputmethod/DESIGN.md
T

2.5 KiB

浅色输入界面

用户选择:浅色简洁,接近手机输入法。自 1.0.1 起使用以下界面规范。

  • 浅灰键盘底 #ECEEF2、白色主按键、深色主文字 #20232B。
  • 蓝色 #2867D9 用于完成、取消、拼音编码和候选翻页;候选文字保留深色,不使用多种彩色按键。
  • 候选栏使用连续浅色区域,三个候选与展开箭头同排。全候选页每页四个大选项,字形和拼音分别对齐,不截断剩余候选。
  • 九宫字母居中,数字作为较小的辅助标记。全拼和英文使用 QWERTY 10/9/7 三排;14键使用相邻字母配对的5/5/4三排。英语及数字模式隐藏无用的候选栏。
  • 模式切换采用无底色文字操作,完成保留蓝色主按钮,空格和删除分别使用白色及灰色。
  • 首页只突出一个“开始输入”按钮,草稿、数字、私密输入放在同一行;操作说明通过独立入口展开。
  • 圆屏与方屏保留各自的安全边距,不将矩形按键硬贴圆形边缘。界面只使用厂商支持的原生布局、颜色和圆角,不依赖阴影、CSS 渐变或 DOM。图标作为原生按钮内部的本地图片,不用图片替代交互布局。

1.1.0 增加以下约束:

  • 最外层无 padding 的背景容器铺满视口,内层单独处理安全边距,避免黑色留边。
  • 九宫、26键和14键保留 49px 实际行高,键盘容器禁止收缩;26键采用22px字号、14键采用24px字号。QWERTY第二/三排收为94%/84%,其他模式末排收为91%,使用显式行布局。
  • 圆屏完整候选每项高37px、上下间距各2px,四项总高度不得超过列表容器;页码不允许收缩。不能仅凭按钮落在圆屏内就认定没有内部裁切。
  • 圆屏顶部、预览、候选、模式和底部操作按垂直预算分配空间;底部操作栏宽 200 设计像素,编辑行宽 300,按钮四角离圆边至少 3px。
  • 取消、退格、完成、编辑、返回键盘、翻页使用 iconfont 上经固定版本上游核对的 Remix Icon 线性图标。运行时使用 72px 透明 PNG,以 20/24px 显示;保留原始 SVG 与许可,不在运行时联网加载。
  • 使用实际 Inspector 树检查按钮和文字是否超出任一父容器;另检查屏幕边界、边缘黑色缺口、四候选与翻页/底栏的整体显示。几何与截图同时通过才可用于最终预览。

浏览器1.1.0同步使用浅色主界面和同一个键盘维护源。14键使用独立编码索引,候选仍来自同一完整词库;账号、私密输入和草稿持久化规则保持有效。