12、小屏幕大手指：响应式设计中的UI与导航优化

小屏幕大手指：响应式设计中的UI与导航优化

1. 触摸目标尺寸规范

不同厂商对于触摸目标的尺寸有不同的推荐标准：
- Android开发者指南建议最小目标尺寸为48dp（约9mm），最小和最大推荐目标尺寸分别为7mm和10mm，元素间最小间距为8dp。这里的dp是密度无关像素，在普通密度屏幕上1dp等于1px。
- Ubuntu文档建议界面元素不应小于1cm（约55px）。

综合这些推荐，在低密度屏幕上合适的尺寸如下：
| 类型 | 尺寸 |
| ---- | ---- |
| 推荐目标尺寸 | 48dp × 48dp = 48px × 48px |
| 最小目标尺寸 | 5 mm x 5 mm = 30px × 30px |
| 最大目标尺寸 | 10 mm x 10 mm = 55px × 55px |
| 元素间间距 | 2 mm = 10px |

2. 姿势模式与触摸区域

触摸目标的位置同样重要，即使尺寸合适，如果位置不佳，设计也可能失败。Luke Wroblewski在其文章中提到了用户握持智能手机、平板电脑和触摸笔记本时的姿势模式和触摸区域。
- 姿势模式 ：了解用户的姿势模式有助于确定内容的最佳布局方式。当屏幕空间不足时，触摸目标可以适当小一些；而需要高精度操作时，则可以大一些，因为使用拇指和食指操作的情况有所不同。
- 触摸区域 ：根据姿势的不同，设备上的某些区域容易触摸，而某些区域则较难触摸。在智能手机、平板电脑和触摸笔记本等主要设备类型中，理想触摸区域为深绿色，尚