在 Visual Studio 中创建 GUI 的好资源

Question

我越来越多地使用桌面应用程序，而我的 GUI 很糟糕。我熟悉 GUI 设计的基础知识，但无法将它们付诸实践。

我正在寻找的是在 Visual Studio 中构建（不是设计！）GUI 的优秀（或至少体面的）指南。

如果做不到这一点（我通过通常的来源没有找到太多），我不得不问：是否有可能/值得努力使用 VS2K5 的“设计”视图构建 GUI？这就是我一直在使用的东西，因为我是一个视觉型的人。

具体来说，我正在寻求有关实施已完成设计的“基本要素”方面的帮助

如果需要，我不反对安装额外的工具，但如果可能的话，我的偏好是坚持使用通过 VS2k5 的普通安装获得的东西。

Answer 1

如果您已经对设计进行了布局和规划，那么实施它应该是容易的部分。使用 WinForms，它确实是拖放（并设置一些属性，例如用于停靠和锚定）。

我发现真正有助于完成实现的技巧是在纸上完全模拟出界面。我的意思是一切：每个菜单、按钮、标签、网格等都应该被勾勒出来。之后，只需将控件拖到窗体上，将它们重命名为合理的名称，并确保调整窗口大小不会使控件错位。

如果您在创建 GUI 时没有完全实现的设计可用于工作，那么您将遇到非常困难的情况，因为您仍将做出会妨碍构建的设计决策。

编辑：如果您愿意付费，http://www.learnvisualstudio.net/ 有几个视频，主题是为基本应用程序制作简单的 GUI，通常面向特定控件（DataGridView、ListView 等）。

Answer 2

WinForms 的 Visual Studio 设计器运行良好。我在创建 WinForms 应用程序时一直使用它。另一种方法是在代码中定义 UI 元素，这是相当痛苦的。

OTOH，在我看来，WPF 和 WebForms (ASP.NET) 的 VS 设计器体验不如 WinForms。幸运的是，对于 WPF 和 WebForms 应用程序，如果您不喜欢设计器，至少可以退回到使用声明性标记，这比在代码中定义 UI 元素要好得多（不幸的是 WinForms 没有声明性标记语言）。

使用 VS WinForms 设计器，这里有一些技巧可以改善您的体验：

• 了解如何使用Anchor property。 与 Dock 属性一起学习 可能改进了我的 WinForms 设计 体验胜过一切。

• 在设计器中，总是有 Document Outline 视图打开，显示 你的控制层次结构 在树视图中形成......真的 有帮助，尤其是在重命名时 控制。

Answer 3

当您看到一个成功的软件时，它看起来如此简单，至少在理论上如此。 GUI 代码的复杂性可能被严重低估，并且有时在设计阶段被忽略，因为它被认为是微不足道的。

我不确定您是否在询问有关 WinForms 教程或具体如何以使您保持理智的方式组织和构造代码，但无论哪种方式 Jeremy Miller has a good collection of tips on how to design the GUI code structure。 （注意：这是关于 GUI 代码结构，而不是 WinForms 或可用性设计）。

我对 GUI 代码的理解通常是这样的：

1. 使用 VS 中的设计器创建一个粗糙而丑陋的 GUI。来自网页设计，您可以在所见即所得模式下考虑这个 MS Frontpage - 没有样式或特定结构。只是应用程序、菜单栏、工具栏、状态栏等的粗略视觉结构。没有自定义控件。
2. 查看代码并将其组织成几个类
3. 返回 Designer 并将控件添加到组织好的类中
4. 查看代码并组织它。
5. 冲洗、起泡、重复。

当我的代码结构完成后，我进入极端细节模式，在这里我手动编码值以获得与 GUI 相比像素完美的值。

无论如何，我不太确定您的问题是什么，但我希望这会有所帮助。如果我误解了你，请告诉我。

Answer 4

我没有多少时间来真正挖掘多汁的链接，但我相信你的一点点挖掘会给你一些最佳实践信息。它可能与 VS2k5 中的表单设计器没有直接关系，但无论哪种方式都很有用。我并不是说您应该成为可用性专家，但它们绝对值得一看。

另外，关于“值得努力使用 VS2K5 的“设计”视图构建 GUI”？我会说这是一个是与否。我之所以这么说，是因为如果你过分依赖设计师，不管是什么 IDE，你都会错过那些糟糕和肮脏的东西——这些东西真的可以教你发生了什么。有些事情您必须在设计时或运行时通过代码执行以获得最佳结果，因此真正了解幕后发生的事情不会有什么坏处！

GUI 快乐！

Answer 5

我不得不说我不同意 croutle，创建好的 UI 不一定与编码有任何关系。 SmashingMagazine 拥有大量用于 UI 设计的资源目录，尽管其中大多数都以网络为中心，但无论您是通过编码将 UI 放在表单编辑器中还是在网页上，一般原则仍然适用。

对我来说，GUI 设计器一直是一种将表示与内容分开的方法，如果您开始编写大量代码来影响 UI 中的简单效果线开始模糊。 Mac 上的 Interface Builder 做到了这一点，这是我用过的所有工具中最好的（其中包括 Java Swing、Windows Forms）。

问题是交互糟糕还是外观糟糕，除非你是一个优秀的艺术家，否则你对后者无能为力，但要坚持最低限度。即使是非艺术家类型也可以学习极简主义的科学（例如，将所有内容布置在规则网格上）。 This 以某种方式面向打印，但提到的大多数方面都是通用的，并且确实适用于屏幕和 UI 设计。

可以通过尝试设身处地为用户着想来解决前者。查看用户正在执行的任务以及他们如何使用您的软件完成任务。它是否使用户更容易完成他们的工作，或者它是否会在阻碍工作流程的路径中设置障碍。

Answer 6

我在设计用户界面方面也很烂。我一直在搞砸事情。无论如何，我正在努力改进。我的新方法很简单：复制。周围有很多好的用户界面，我们不需要重新发明轮子。一个好的副作用是我们用户体验的连续性。

采用您的用户熟悉的程序并尝试模仿它。例如，我认为很多应用程序都可以通过跟踪 MS Outlook UI 来完成。或者，如果您想做一些新的事情，看看大佬们是怎么做的：例如，试试 Google 的 Picasa（桌面）。或任何带有功能区的程序。如果您有时间，请查看 MS 的 Vista User Experience Interaction Guidelines（PDF 可供下载）。有很多小解决方案，例如在哪里放置“保存-取消”按钮以及按什么顺序.. 这是一件愚蠢的事情，但有很大的不同。

如果您有要完成的任务并想从如何呈现它的起点开始，这是一个很好的资源Quince from Infragistic。它有很多“这样做”的提示和示例截图。

Harald 提到的另一个好资源是SmashingMagazine：您可以订阅他们的提要，确实，桌面设计每天都更接近网络对手。

最后是图标。 SmashingMagazine 经常提供关于图标的提示，您可以在IconFactory 找到很多合集。

HTH！