(浅谈WebApp前端设计原则.docVIP

浅谈Web App前端设计原则 关于Web App 随着web 2.0时代的到来，越来越多的应用程序都是基于Web环境来构建的。这样做的好处显而易见，用户可以方便地使用浏览器来访问应用，而不需要安装客户端程序。而在企业内部，很多应用也都采用了这种模式，以便于安装和部署，特别是在业务变化频繁，需要经常对应用程序进行更新的情况下，Web App更是为我们提供了很大的便利。 Web App作为Web环境中的应用，和网站以及传统的Winform式应用有着千丝万缕联系，同时也有很明显的区别。 与网站相比： 共同点在于用户都是通过浏览器来访问，不需要安装其他客户端。 区别也很明显，网站的功能在于展示，用户访问网站的目的就在于获取信息；而WebApp则不然，用户访问它更重要的目的在于交互，执行各种操作，不仅仅要从中获取数据，还要向应用中存储数据，并让应用执行自己所需要的功能。 与Winform式应用相比： 共同点在于二者都是应用，都会完成一定的业务功能。 区别的一方面在于安装和部署的方式，Web App是通过浏览器来访问的，不需要经过繁琐且耗时的安装过程，直接就可以使用。而且，当系统升级的时候，用户也不需要重新部署，只需要在浏览器中重新打开就好。 区别的另一方面在于二者所提供的用户体验不同，因为浏览器的限制，WebApp带给用户的体验还比不上传统的Winform式应用，尽管现在有了很多可以在浏览器中运行的类似于富客户端的技术，像Silverlight、Flex等等，但想要提供与Winform式应用一样丰富的体验，还有很多需要努力的地方。 ? 关于Web App前端设计 在架构上，不管是何种应用，在构建的时候都会体现出分层的思想。最经典的就是三层架构：表现层、业务逻辑层和数据层，而Web App前端设计所关注的就在于表现层。?? 前端设计的目标想要设计出合理且易于让用户使用的Web App界面，让用户获得最好的体验，从而更好地使用应用来完成所需要的功能。 为了达到这个目标，有三点原则可供遵循，那就是：简单、美观和规范。接下来让我依次对其进行说明。 原则之一：简单 简单的目的就是要方便用户的使用，但是要简单到什么样的程度呢？用什么标准来衡量我们的界面设计是否简单呢？ 我认为有两点基本的标准： l??????????不需要思考——界面上所有元素所提供的功能一目了然，没有歧义，易于理解。 l??????????不需要学习——不需要复杂的培训，所有的功能遵循操作的习惯，直接上手可以使用。 还记得之前有人把全自动的相机叫做“傻瓜”相机，其实我们所要设计的就是“傻瓜”式的应用界面，进而让我们的应用成为“傻瓜”式的应用，那样会赢得更多客户，而不是让人望而生畏。 想要达到这样的标准，我们需要怎么做呢？ 首先，界面上的元素要少，放置太多只会让用户觉得不知所措，需要仔细观察和思考之后，才知道对哪些元素进行操作才能够达到自己的目的。 我们经常会在一些产品的界面上看到许多不必要的元素，比方说在输入联系方式的时候，有“电话”、“地址”、“传真”、“手机”、“Email”，这些都没有问题，如果出现“地址2”、“电话2”等备用的信息，我们会发现它们对于绝大多数用户来说都是没有任何意义的，也不会用到，只是为了以防万一，对于这些元素，我们大多可以删除掉。 其次，要让应用的后台做更多的工作，尽可能地把更多的操作自动化，而不是把所有的任务都交给用户完成。这样会减少用户的操作，同时也就减少了出现误操作的可能。 接下来我们以Google翻译为例，来理解一下上述的内容，如图1所示。 首先，在Google翻译中，界面上的元素很少，可供操作的主要就是“源语言”、“目标语言”、“翻译”按钮，以及一个大大的输入框，每个元素都很容易理解，输入框也很明显，让我们一看到就知道是要把需要翻译的内容放到其中。 当我们在输入框中输入内容的时候，应用的后台功能就开始显示威力了，它会自动地帮我们识别出语言的种类，然后自动地把翻译出来的结果放在结果显示的位置。我们所有做的操作只是输入了想要翻译的内容。 试想一下，如果没有达到简单的效果的话，我们会怎么做呢？首先我肯定需要选择“源语言”和“目标语言”，输入完所要翻译的内容之后，再点击“翻译”按钮，然后才能够看到结果。和Google翻译所提供的简单相比，这样的方式多了很多不必要的操作。 上述的简单更多关注的是界面元素，其实还有另一个方面的简单，那就是操作上的简单。 对于系统的操作，我们会使用输入工具主要就是两种：鼠标和键盘。（当然还有触摸屏的方式，而且已经在手机和平板电脑上的应用越来越广泛，但暂时不在我们讨论的范围之内。）那么我们的目的就很明确了，想要达到操作上的简单，一方面要减少点击鼠标和敲击键盘的次数，另一方面要减少鼠标和键盘操作之间切换的次数。 在此我