4. 视觉可读性
以简洁实用为目标，让采购入库页面的物料、数量、状态和按钮在 PDA 上看得清、点得准。
视觉设计以看得清、点得准、状态容易分辨为目标。用一致的布局、清楚的文字和少量状态色支持作业，减少装饰和复杂样式。
设计原则与最佳实践
- 字号适中，层次清楚。 标题和着重文字建议选择
12～14的字号，配合字重、颜色和留白突出重点。正文和辅助文字保持易读，避免为了容纳更多内容不断缩小字号。 - 按钮大小适合触控。 按钮高度一般不小于
36px，以36～48px为宜；高频操作或戴手套使用时，优先采用较大的尺寸。按钮之间留出间距，减少误触。 - 布局跟随视口。 页面外框的宽度和高度以当前可用视口为基准，原则上不超过视口。优先使用活字格行列尺寸的“自适应模式”，需要约束变化范围时使用“范围模式”，适配不同设备。
- 主题统一，重点鲜明。 导航、按钮和同类信息使用一致的主题配色；需要突出的数据选择与背景对比明显的亮色。强调色集中用于关键内容，避免整页都抢眼。
- 状态和内容容易辨认。 状态配合文字和图标说明，不能只依赖颜色。长名称可换行，关键数值、单位和错误原因保持完整；底部导航和输入法不能遮挡当前输入与操作。
尺寸与自适应参考
| 项目 | 建议 |
|---|---|
| 标题、着重文字 | 字号 12～14，按活字格设计器中的字号设置，并在真机上检查实际显示效果 |
| 按钮高度 | 一般不小于 36px，推荐 36～48px；高频操作优先靠近 48px |
| 图标与间距 | 点击区域不小于可见图标，相邻点击区域建议留出至少 8px 间距 |
| 页面宽高 | 以 HAC 内实际可用视口为基准，避免横向溢出；长列表在内容区纵向滚动 |
| 行列布局 | 优先使用“自适应模式”；需要限定尺寸变化范围时使用“范围模式” |
页面可用宽度不能直接使用设备屏幕的 720 物理像素。内容较多时，应保留必要滚动或减少首屏字段，不要把整张列表压缩到一屏；固定顶部、底部区域要为内容留出空间。
查看活字格列宽设置示例
图中显示了列宽的三种模式入口，当前选中的是“固定模式”。页面自适应时，应根据布局需要选择“自适应模式”或“范围模式”；行高也按页面内容安排。
案例：小屏上核对物料
本例使用东集 Seuic 小码哥 CRUISE Ge 的 5.0 英寸屏幕，设备与版本见测试环境。管理员需要快速核对订单、物料和数量，因此视觉重点跟随作业顺序安排。
| 需要看清的内容 | 设计做法 | Demo 中的效果 |
|---|---|---|
| 当前订单与操作入口 | 使用稳定的位置和统一的操作颜色 | 订单号、搜索入口、按钮使用蓝色 |
| 订单和物料信息 | 浅色背景配合简单卡片，字段按组排列 | 订单与物料区域清楚分开 |
| 数量及处理状态 | 突出数量，用状态文字、颜色和图标辅助判断 | 订单状态标签、数量比例、感叹号和对勾 |
| 当前数量编辑 | 面板集中显示物料、数值和保存按钮 | 加减控件与“保存修改”靠近数量 |
Demo 中的红色数量、黄色感叹号和绿色对勾可以帮助定位状态，但物料状态的准确含义仍需补齐文字说明。不同卡片对应不同物料，不应当作同一物料的连续进度。
查看物料数量与状态截图
还需要检查什么
- 对比是否足够： 亮色也要与背景区分，避免亮色文字放在浅色背景上难以辨认；强光和低亮度下都应可读。
- 操作是否稳定： 加载、提示出现和数量变化时，按钮尽量保持原位；危险或清空操作与高频按钮分开。
- 内容是否完整： 检查长单号、长名称、较大数值和列表最后一项；输入法弹起后仍能看到当前字段和保存入口。
- 真机是否好用： 在实际视口和显示缩放下检查字号、触达区域与滚动，现场需要戴手套时再验证对应操作效果。
下一步：性能与稳定性，检查页面在实际设备、数据量和网络条件下的表现。