浅谈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所示。