Web APP 设计原则

问题

在设计 Web APP 时，应当遵循哪些原则？

解答

1. 简化操作流程

减少用户完成任务所需的步骤，避免复杂的导航层级。

<!-- 不好：多步骤表单 -->
<form>
  <div class="step-1">...</div>
  <button>下一步</button>
</form>

<!-- 好：单页完成 -->
<form>
  <input type="text" placeholder="姓名" />
  <input type="email" placeholder="邮箱" />
  <button type="submit">提交</button>
</form>

2. 减少用户输入

利用设备能力和智能默认值，降低输入负担。

<!-- 使用合适的输入类型 -->
<input type="tel" placeholder="手机号" />
<input type="email" placeholder="邮箱" />
<input type="date" />

<!-- 提供智能建议 -->
<input type="text" list="cities" placeholder="城市" />
<datalist id="cities">
  <option value="北京">
  <option value="上海">
  <option value="广州">
</datalist>

3. 响应式设计

适配不同屏幕尺寸，保证各设备上的可用性。

/* 移动优先 */
.container {
  padding: 16px;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

4. 触摸友好

确保交互元素足够大，间距合理。

/* 按钮最小 44px，便于触摸 */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* 列表项间距 */
.list-item {
  padding: 16px;
  margin-bottom: 8px;
}

5. 性能优先

优化加载速度，减少等待时间。

// 图片懒加载
<img loading="lazy" src="image.jpg" alt="..." />

// 代码分割
const Detail = React.lazy(() => import('./Detail'));

// 资源预加载
<link rel="preload" href="critical.css" as="style" />
<link rel="prefetch" href="next-page.js" />

6. 离线支持

使用 Service Worker 提供离线体验。

// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// sw.js - 缓存策略
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

7. 反馈及时

操作后立即给予视觉反馈。

/* 按钮点击反馈 */
.btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 加载状态 */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

// 操作反馈
async function handleSubmit() {
  setLoading(true);
  try {
    await submitData();
    showToast('提交成功');
  } catch (e) {
    showToast('提交失败，请重试');
  } finally {
    setLoading(false);
  }
}

关键点

• 简化流程：减少步骤，降低用户认知负担
• 减少输入：利用设备能力，提供智能默认值
• 响应式：移动优先，适配多种屏幕
• 触摸友好：交互元素至少 44px，间距合理
• 性能优先：懒加载、代码分割、资源预加载
• 离线支持：Service Worker 缓存关键资源
• 及时反馈：操作状态可见，错误提示明确