如何设计用户体验更佳的仿真 App

正文

请到「今天看啥」查看全文

”和“ 另存为 ”的顺序找到这些按钮，同理 “确定”按钮应当在 “取消” 按钮 之前，而不是先取消再确定。同时，Windows® 和 Mac App 中 UI 组件、控件和按钮的尺寸也应遵循和系统一样的标准。

此外，使上述项在布局上保持符合相关标准的间距和位置也同样重要。如果用户界面上的表单和控件之间的间距过于宽阔或狭窄，或者表单之间的间距不一致，很容易影响到用户界面的专业性。表单通常向左对齐，从其顶部向底部填充。另外，如果仔细观察，您会发现在专业 App 中，通常只有表单集合的右侧或者 UI 主要部分的下方留有空白。

图 2. “螺旋型静态混合器”App 是遵循设计标准的优秀示例。请留意“图形”工具栏（指定任务工具栏）位于 “图形”窗口里面。“图形”工具栏也可以垂直排列，因为 Windows® 和 Mac App 中的指定任务工具栏通常都是垂直排列。

图 2 显示的 App 用于模拟不同工作条件下尺寸和配置各异的螺旋型静态混合器。这个 App 的用户界面外观干净朴素，输入和命令符合大多数 Windows® 和 Mac App 的标准布局。图标和菜单的尺寸，以及表单与控件之间的间距同样遵循着统一标准。空白区域只出现在表单和控件的右侧，或者在 UI 主要部分的下方。

在设计结构中划分指定任务区域

为了实现功能性设计，将 App 界面划分为指定任务区域是一个好办法。每个区域的指定任务可以用标题明确地进行表述。如图 2 中的App 所示：

• 重要命令位于主工具栏（Windows® 的功能区），每个重要命令各自成栏

• 文本和数字的输入、输出表单排布在左边，每个表单都有各自的指定任务栏（在 “输入和结果” 表单集合中）

• 所有图形输出均位于“图形”表单集合，每个输出都有对应的指定任务选项卡

在此 App 中，主工具栏中的每个任务（ “输入 ” 、 “ 仿真 ” 和 “ 文档 ” ）都有自己的栏。 “ 输入和结果 ” 表单集合划分到了带标题和内部层次的表单区域，这些区域还包括了 “ 几何 ” 、 “ 工作条件 ” 、 “ 结果 ” 和 “ 计算信息 ” 。

我们常常会想把某一个任务的全部输入、输出和图形输出放在同一张表单中。我曾见过有些 App 将几何输入和图形的几何输出放进同一张表单，但却将仿真结果的图形输出布置在 UI 的另一个区域。把输入和输出混杂在 UI 的不同区域，即使它们对应着特定任务，所呈现的 UI 也很容易让人混淆。一个更好的策略是把相似的输入和输出置于一处，也就是说，把全部图形输出归到一张“图形”表单集合中，如图 2 所示。

请到「今天看啥」查看全文