应用界面设计原则的实践：Tim Corey的比赛追踪器UI

在这节课中，Tim Corey 引导我们通过用户界面设计阶段，构建一个锦标赛追踪器应用程序。Tim 解释说，这是我们开始可视化该应用程序外观的时刻，即使在编写任何代码之前。 他强调，用户界面设计帮助我们"巩固想法"，并了解应用程序应如何整体运作。

在这篇文章中，我们将从 Tim 的视频中深入了解用户界面设计过程，以便我们理解他的思维过程以及他在编码开始之前如何规划界面。 通过遵循 Tim 的方法，我们可以学习如何创建一个清晰、直观且符合用户和开发人员需求的应用程序界面。

开始用户界面设计

Tim 开始说用户界面设计阶段是应用程序开发的有趣部分，因为它让我们能够看到该应用程序的粗略版本。即使他承认自己不是艺术家，他仍然指出，他使用白板或便签本来勾画表单。Tim 坚持认为，这些图纸不需要完美或成比例，它们只需展示表单应包含的基本想法以及其工作原理。

Tim 在这里的主要观点是，用户界面设计阶段是关于规划，而不是美观。 他强调目标是确定需要哪些表单/页面以及每个页面应该包含什么。 这种方法对于清晰至关重要，并帮助开发人员和设计人员在设计过程中保持一致。

从哪里开始设计

Tim 解决了一个常见的问题："我从哪里开始？" 他解释说无论您从哪里开始都没关系。 如果您对应用程序的某个部分不确定，从您确定的部分开始。 一旦您完成了清晰的部分，您通常会对不确定的部分有更好的了解。

他还指出，积累动能是有帮助的—设计了几个表单后，您会感到自信，准备继续。 怀着这种心态，Tim 选择从锦标赛查看器表单开始。

这种方法支持良好的用户流，因为它鼓励设计师和开发人员专注于用户如何从一个屏幕导航到另一个屏幕。

为什么不在 Visual Studio 中先设计？

Tim 解释说您不应从 Windows Form Builder 内的 Visual Studio 中开始设计。 他警告说这样做会导致两个主要问题：

1. 您浪费时间在调整布局和控件上，而不是规划设计。

2. 您缩短了设计过程，这意味着您可能会错过更好的选择或因为不想重新做而留下隐藏的问题。

Tim 说在纸上设计允许您擦除、尝试新想法，甚至测试可能成为优秀解决方案的"傻"概念。 这是用户界面设计中的一个关键原则，因为它使焦点保持在应用程序应该做什么，而不是第一稿中的样子。

锦标赛查看器表单

Tim 揭示了他的第一个粗略UI：锦标赛查看器表单。 他解释说这个表单会展示关于具体锦标赛的所有信息。

锦标赛名称

Tim 将锦标赛名称放在顶部，显示用户正在查看的锦标赛（例如，"女子篮球锦标赛"）。 这是清晰视觉层次结构的简单示例，其中最重要的信息被放在顶部。

回合下拉菜单和对阵

Tim 讨论了如何在屏幕上显示锦标赛表格是困难的，尤其是当它很大的时候。 相反，他建议使用回合的下拉菜单和对阵的列表框。 列表框只会显示所选回合的比赛。

Tim 还添加了一个重要功能：仅未玩过的比赛。 他解释说，在有许多比赛的锦标赛中，用户不希望滚动经过已完成的比赛来找到剩余的比赛。 所以他添加了一个复选框，仅显示未玩过的比赛，这将使列表随着比赛的完成而变短。 这是为用户满意度至关重要的简便和高效设计的一个好例子。

自动选择当前回合

Tim 还建议回合下拉菜单应默认为当前回合。 他承认自己还不知道如何实现这一点，但他指出这是一个强大的设计理念。 这个功能将通过减少访问相关信息所需的时间来改善用户体验（UX）。

得分部分

在表单的右侧，Tim 设计了一个部分，用户可以在其中输入对阵的得分。他解释说，表单将显示两支参赛队伍及其得分。 如果比赛尚未进行，得分框将为空。 输入得分后，用户将点击一个"得分"按钮来完成对阵。

Tim 注意到得分按钮可能需要更好的标签或布局，以清楚显示其工作原理。 这是设计元素应该向用户清楚传达目的的一个例子。

创建锦标赛表单

然后，Tim 转向创建锦标赛表单，他说可能在锦标赛查看器之后需要此表单。

锦标赛名称和报名费

表单从基本字段开始：锦标赛名称和报名费。 Tim 解释说，报名费是每个参赛队伍支付的参与费用。

添加队伍

接下来，Tim 设计了一个团队下拉菜单和一个添加团队按钮。 这允许用户选择现有队伍并将其添加到锦标赛中。

他还包括一个创建新团队链接，以便团队尚不存在时使用。Tim 解释说，他希望"创建新团队"操作在视觉上有所不同，以便用户清楚理解他们是在创建一个团队，而不仅仅是添加一个。 这是确保用户可以轻松导航并避免混淆的重要设计实践。

奖品

Tim 指出，锦标赛还需要奖品，因此他添加了一个创建奖品按钮。 他解释说，奖品在每个锦标赛中都是独一无二的，因此将每次重新创建，而不是重复使用。

删除所选按钮

在每个列表栏（包括团队和奖品）旁边，Tim 添加了一个删除所选按钮。 他解释说，用户需要一种方法在不重新开始表单的情况下移除团队或奖品。 这支持更好的用户流并使应用程序更易于使用。

缺失的回合

Tim 注意到一个缺失的元素：回合。 他解释说，回合的生成是基于代码中的队伍数量，因此用户不需要输入它们。 因此，表单中不包括回合。

创建团队表单

然后，Tim 设计了创建团队表单，包括：

• 团队名称

• 选择团队成员

• 添加新成员

Tim 强调了表单之间一致性的重要性。 他说团队名称布局应与锦标赛名称布局匹配，以创建一个一致的设计。

他还解释说，此表单允许用户从列表中添加现有团队成员，或直接在表单中创建新成员。 Tim 表示他更喜欢在同一表单内进行成员创建，以避免出现深层导航层（即，打开多个表单）。

他解释说，添加多个层次会令人困惑且缓慢。 因此，他选择将设计保持紧凑，并且对用户友好。 这支持一个简单且直观的应用程序界面，减少用户完成任务所需的时间。

创建奖品表单

Tim 的创建奖品表单很简单。 它包括：

• 名次

• 名称

• 奖金金额

• 奖品比例

Tim 注意到最后两个字段应只使用一个（即金额或比例）。 他说表单稍后需验证逻辑，但就设计而言，布局是简洁的。 这是如何利用设计原则创建精美而功能界面的一个好例子。

锦标赛仪表板表单

最后，Tim 讨论了锦标赛仪表板表单，他承认对此不完全满意。 他解释了一个挑战：Windows 窗体应用程序通常有一个主表单保持打开。 如果主表单关闭，应用程序就会结束。

这给锦标赛跟踪器带来了问题，因为用户可能希望同时打开多个锦标赛。 Tim 最初考虑在没有锦标赛存在时自动打开创建锦标赛表单。但他意识到，关闭创建锦标赛表单将导致应用程序结束。

因此，Tim 设计了一个一直打开的中央仪表板表单。 此仪表板使用户可以：

• 查看现有锦标赛

• 加载锦标赛

• 创建新锦标赛

Tim 解释说，即使其他表单关闭，仪表板也会保持打开。 它充当应用程序的中央导航点。虽然他承认它看起来"极其简单"，但他说它有效，并且可能在未来添加设计元素或动画以使其更具视觉吸引力。

结论

Tim 在视频结尾时强调，目标是简单地识别所需的表单并决定每个表单应显示什么。 他说，一旦用户界面设计完成，下一步就是逻辑规划，他将计划如何将用户界面元素连接到数据模型和后端。

Tim 的用户界面设计过程表明，设计应用程序界面是关于规划、一致性和清晰性，而不是过早地创建完美视觉效果。 这种方法帮助开发人员和设计师保持一致，并确保最终的应用程序易于用户导航和使用。