19年人机交互考试题解析：从理论到实践的完整解决方案

1次阅读

共计 1845 个字符，预计需要花费 5 分钟才能阅读完成。

2019 年这道人机交互考试题之所以经典，是因为它集中考察了三个核心能力：需求转化能力（将抽象场景转化为具体交互需求）、理论应用能力（选择合适的 HCI 理论指导设计）和工程实现能力（通过代码落地设计方案）。题目描述的是一个医疗场景下医护人员快速录入数据的界面优化需求，这恰好反映了 HCI 领域最典型的挑战——如何在复杂场景中平衡效率与容错。

要解决这个问题，我们需要组合运用以下理论：

Fitts 定律 ：决定按钮大小和间距的关键依据。公式 ID=log2(D/W+1) 中，我们可以通过减小移动距离 (D) 或增大目标尺寸 (W) 来降低操作难度。
尼尔森十大可用性原则：特别是其中的 ” 系统状态可见性 ” 和 ” 防错原则 ”。在医疗场景中，需要实时反馈录入状态，并预防错误操作。
希克定律：反应时间与选项数量呈对数关系。这指导我们合理控制同时显示的选项数量。

通过用户旅程地图梳理出三个关键场景：
– 紧急情况下的快速录入（效率优先）
– 常规情况下的精确录入（准确度优先）
– 数据复核阶段（容错机制）

采用 ” 主 - 次 ” 布局模式：
1. 主操作区使用径向菜单（符合 Fitts 定律）
2. 次功能区采用动态折叠面板（应用希克定律）
3. 状态反馈区固定在顶部（遵循可见性原则）

设计双模式操作：
– 快捷键模式（满足专家用户）
– 引导模式（适合新手用户）
两者通过长按切换，避免模式混淆。

以下是核心交互的代码实现（完整示例需配合 CSS）：

<!-- 径向菜单结构 -->
<div class="radial-menu">
  <button class="center-btn" data-value="confirm">✓</button>
  <div class="menu-items">
    <button data-value="1">1</button>
    <button data-value="2">2</button>
    <!-- 其他菜单项 -->
  </div>
</div>

<script>
// 实现 Fitts 定律优化的动态布局
function adjustMenuLayout() {const items = document.querySelectorAll('.menu-items button');
  const center = document.querySelector('.center-btn');

  // 根据屏幕尺寸动态计算最佳位置
  const radius = Math.min(window.innerWidth, window.innerHeight) * 0.3;
  items.forEach((item, index) => {const angle = (index * (360 / items.length)) * Math.PI / 180;
    item.style.transform = `
      translate(${radius * Math.cos(angle)}px,
        ${radius * Math.sin(angle)}px
      )
    `;
    // 尼尔森原则：扩大可点击区域
    item.style.padding = `${radius * 0.15}px`;
  });

  // 防错设计：禁用危险操作
  center.addEventListener('contextmenu', (e) => {e.preventDefault();
    showConfirmDialog();});
}
</script>

可用性测试建议采用阶梯式方法：