21、移动界面设计与列表展示策略

移动界面设计与列表展示策略

一、移动界面设计要点

（一）宽大边界设计

在触摸屏设备上，可点击的用户界面（UI）元素周围应留出大量空间。对于按钮、链接和其他可点击控件，要设置较大的边距和空白区域。
- 使用场景 ：当需要使用带有文本标签的按钮、项目列表或普通基于文本的链接时，也就是任何在屏幕上本身尺寸不大的触摸目标。
- 原因 ：触摸目标必须足够大，以便手指能够成功点击。特别是对于仅由文本组成的按钮和链接，它们需要足够高。
- 操作方法 ：用足够的内边距、边框和周围的空白区域围绕每个触摸目标，使其成为适合指尖点击的足够大的点击区域。还可以将目标周围的空白区域设置为可点击，这样按钮外观大小不变，但能增加点击灵敏度。目标的合适大小取决于设计的设备和分辨率，参考尺寸如下：
| 设备类型 | 尺寸 |
| ---- | ---- |
| Android 设备 | 48 × 48 dp (9 mm) |
| Apple iOS | 44 pt × 44 pt |
- 示例 ：Autodesk 的 Sketchbook 应用程序为 iPhone 的触摸目标留出了充足的边距空间，整个应用给人一种轻松、不拥挤的感觉；Zoom 移动应用的大按钮让手指容易点击到触摸目标；Instacart 应用也是如此，其关键操作按钮（如“添加商品”、导航元素）很有特色。

（二）加载或进度指示器

使用微交互（基于设备的单个任务事件）动画，告知用户某些事情即将发生