重新设计复杂UI的技术

Question

我相信你们都见过他们。具有以下逻辑的业务线UI：“当选择ComboA时，根据该选择查询值，并填充文本框B”，或“按下ButtonC时，禁用文本框C和D”，以及依次打开..当你可以对上面的逻辑进行多种排列时，它会变得特别糟糕。

如果有机会重新设计其中一个可爱的屏幕，你会如何接近它？你会在UI面前放一个向导吗？你会保留单屏幕范例但是使用其他模式来使UI状态的逻辑可维护吗？你用什么过程来确定如何理想地呈现和实现它？

并不是说我觉得这应该对回复很重要，但我目前只提供了这个“机会”，它是一个ASP.NET网页，它使用javascript来响应用户的选择，禁用控件，并制作ajax需要额外的数据。

Answer 1

你可能想要看的是这些依赖关系中是否有一些并不意味着虽然看起来相似并且提供相同的功能，但这些元素应该分成多个相似但实际上不同的页面。有人可能将这些分组到页面上，因为有足够的相似之处。

如果您可以尝试查看问题，就好像它根本没有实现一样，如果您现在必须实现它，您将如何构建用户界面。如果它根本不同并且现有用户会遇到重大问题，您可能不得不妥协。但正如Elie所说，从用户的角度来看待它。他们是必须与您的产品合作的人。

Answer 2

我会在一个对象上模拟整个UI的状态。该对象应该跟踪每个UI对象应该处于的状态，包括组合框的选项列表（当然选择哪个选项）。

这意味着拥有一个状态对象可以正确地重新绘制整个屏幕，而不会在UI上以破坏状态结束。当然，每次更改任何内容时都要刷新所有组件，所以我会在状态对象中的每个setter的回调中刷新它们。如果你想要的话，这也可以让你在同一个状态下拥有两个UI。

Answer 3

从KISS原则开始，然后从那里开始工作。不要过度设计解决方案，并尝试从用户的POV中考虑问题。您对构建良好布局的第一印象可能与您应该构建的内容非常接近，因为良好的UI非常直观。

话虽如此，单屏与多屏，JavaScript或AJAX，并不重要。如果它看起来很好，很容易理解，并且在幕后，很好地评论和编写清晰的代码，它的工作原理。它应该是可维护的，因此目标是具有清晰功能的模块化代码块。

Answer 4

我认为最重要的是用户体验以及较小程度的代码可维护性。在网上我尝试尽可能地减少往返次数，所以我不确定我会采用向导方法，因为这会导致用户通过多个页面或需要通过AJAX替换几乎整个页面（这似乎是错误的） 。我通常与客户一起捕获他们需要的功能，尽管我的目标是功能，而不是实现。我可以嘲笑一些例子来向他们展示替代方案，或者只是在白板上画出来给他们提供想法。如果结果是一个大大改进的用户界面，我不介意在应用程序中做“硬”或“复杂”的事情。当然，即使在Javascript中，我也尽可能简单地使用好的做法。