浅谈WebApp前端设计原则

浅谈WebApp前端设计原则关于WebApp随着web2.0时代的到来，越来越多的应用程序都是基于Web环境来构建的。这样做的好处显而易见，用户可以方便地使用浏览器来访问应用，而不需要安装客户端程序。而在企业内部，很多应用也都采用了这种模式，以便于安装和部署，特别是在业务变化频繁，需要经常对应用程序进行更新的情况下，WebApp更是为我们提供了很大的便利。WebApp作为Web环境中的应用，和网站以及传统的Winform式应用有着千丝万缕联系，同时也有很明显的区别。与网站相比：共同点在于用户都是通过浏览器来访问，不需要安装其他客户端。区别也很明显，网站的功能在于展示，用户访问网站的目的就在于获取信息；而WebApp则不然，用户访问它更重要的目的在于交互，执行各种操作，不仅仅要从中获取数据，还要向应用中存储数据，并让应用执行自己所需要的功能。与Winform式应用相比：共同点在于二者都是应用，都会完成一定的业务功能。区别的一方面在于安装和部署的方式，WebApp是通过浏览器来访问的，不需要经过繁琐且耗时的安装过程，直接就可以使用。而且，当系统升级的时候，用户也不需要重新部署，只需要在浏览器中重新打开就好。区别的另一方面在于二者所提供的用户体验不同，因为浏览器的限制，WebApp带给用户的体验还比不上传统的Winform式应用，尽管现在有了很多可以在浏览器中运行的类似于富客户端的技术，像Silverlight、Flex等等，但想要提供与Winform式应用一样丰富的体验，还有很多需要努力的地方。关于WebApp前端设计在架构上，不管是何种应用，在构建的时候都会体现出分层的思想。最经典的就是三层架构：表现层、业务逻辑层和数据层，而WebApp前端设计所关注的就在于表现层。前端设计的目标想要设计出合理且易于让用户使用的WebApp界面，让用户获得最好的体验，从而更好地使用应用来完成所需要的功能。为了达到这个目标，有三点原则可供遵循，那就是：简单、美观和规范。接下来让我依次对其进行说明。原则之一：简单简单的目的就是要方便用户的使用，但是要简单到什么样的程度呢？用什么标准来衡量我们的界面设计是否简单呢？我认为有两点基本的标准：l不需要思考——界面上所有元素所提供的功能一目了然，没有歧义，易于理解。l不需要学习——不需要复杂的培训，所有的功能遵循操作的习惯，直接上手可以使用。还记得之前有人把全自动的相机叫做“傻瓜”相机，其实我们所要设计的就是“傻瓜”式的应用界面，进而让我们的应用成为“傻瓜”式的应用，那样会赢得更多客户，而不是让人望而生畏。想要达到这样的标准，我们需要怎么做呢？首先，界面上的元素要少，放置太多只会让用户觉得不知所措，需要仔细观察和思考之后，才知道对哪些元素进行操作才能够达到自己的目的。我们经常会在一些产品的界面上看到许多不必要的元素，比方说在输入联系方式的时候，有“电话”、“地址”、“传真”、“手机”、“Email”，这些都没有问题，如果出现“地址2”、“电话2”等备用的信息，我们会发现它们对于绝大多数用户来说都是没有任何意义的，也不会用到，只是为了以防万一，对于这些元素，我们大多可以删除掉。其次，要让应用的后台做更多的工作，尽可能地把更多的操作自动化，而不是把所有的任务都交给用户完成。这样会减少用户的操作，同时也就减少了出现误操作的可能。接下来我们以Google翻译为例，来理解一下上述的内容，如图1所示。首先，在Google翻译中，界面上的元素很少，可供操作的主要就是“源语言”、“目标语言”、“翻译”按钮，以及一个大大的输入框，每个元素都很容易理解，输入框也很明显，让我们一看到就知道是要把需要翻译的内容放到其中。当我们在输入框中输入内容的时候，应用的后台功能就开始显示威力了，它会自动地帮我们识别出语言的种类，然后自动地把翻译出来的结果放在结果显示的位置。我们所有做的操作只是输入了想要翻译的内容。试想一下，如果没有达到简单的效果的话，我们会怎么做呢？首先我肯定需要选择“源语言”和“目标语言”，输入完所要翻译的内容之后，再点击“翻译”按钮，然后才能够看到结果。和Google翻译所提供的简单相比，这样的方式多了很多不必要的操作。上述的简单更多关注的是界面元素，其实还有另一个方面的简单，那就是操作上的简单。对于系统的操作，我们会使用输入工具主要就是两种：鼠标和键盘。（当然还有触摸屏的方式，而且已经在手机和平板电脑上的应用越来越广泛，但暂时不在我们讨论的范围之内。）那么我们的目的就很明确了，想要达到操作上的简单，一方面要减少点击鼠标和敲击键盘的次数，另一方面要减少鼠标和键盘操作之间切换的次数。在此我依然用Google的产品作为例子，请看图2中Google日历输入活动的界面。图2在Google日历创建活动比方我们现在要创建的活动是“到会议室开会”，时间在上午7点，那么我们在Google日历中所要做的操作就是：点击日期（鼠标点击一次）→输入内容“上午7点到会议室开会”（键盘输入）→确定（回车一次）。就是这么简单，活动的内容和时间都已经分析完毕，新的活动已经创建。如果是在Outlook中做同样的一件事，需要什么样的步骤呢？图3显示的是Outlook“新建约会”的界面。图3在Outlook中创建约会在Outlook中步骤有：选择日期（双击鼠标）→输入主题（键盘输入）→输入地点（键盘输入）→取消对“全天”的选择（鼠标点击）→选择开始时间（鼠标选择）→选择结束时间（鼠标选择）→输入内容（键盘输入）→保存关闭（鼠标点击）。不需要再做过多说明，一切都已经很清楚了。我们不仅多做了很多鼠标和键盘的操作，而且还多次在鼠标和键盘之间进行切换。和Google日历相比，操作复杂了很多。简单这一原则会节省用户的时间，而时间是最宝贵的，这也是我把“简单”放在第一位的原因所在。原则之二：美观对于任何一个应用的界面来说，美观都是非常重要的。应用的界面就像是人的脸，看上去让人觉得舒服，然后才会有更多的人喜欢它，否则即便功能再强大，使用起来也会让人觉得不舒服。然而，美观并不意味着我们要使用很多的图片、很多种颜色。使用图片会降低页面载入的效率，而使用过多颜色，不仅不会让人觉得美观，反而会觉得乱七八糟。组成页面的元素可以主要可分为三类：文字、图片和控件。所以，想要达到美观的效果，我们同样需要基于这三类元素来思考。在此我想借鉴一下《写给大家看的设计书》一书中所提到的几点排版原则，那就是：重复——同样作用的元素的风格、颜色统一对比——不同作用的元素，要有鲜明的对比，可以使用字体、颜色等等方面来达到对比的效果。对齐——灵活使用左对齐、右对齐、居中对齐等对齐方式，让元素的排列显得整齐、规矩。亲密性——有关联的元素要尽可能“亲密”地排列，而无关联的元素之间要有足够的“距离”来产生美。还是用例子来说明，首先我们来看图4中的界面：这个界面中有不少问题，让我们采用上面的四点原则来检查一下。重复：这一点界面上体现的还不错，各种文字和界面的风格还是很统一的。对比：这里的问题在于上面的标题部分和下面的内容部分之间的对比不够强烈，仅仅是对字体加粗，不能够给人一种很醒目的感觉。对齐：内容部分的文字标签和控件都采用了左对齐，但第二行的文字过长，看起来比较乱；并且下面的两个按钮与内容框之间没有对齐（应该是右对齐）亲密性：文字标签和控件本来应该是比较“亲密”的关系，但是却因为都采用左对齐的方式，离得比较远。针对以上问题，我们可以对上面的界面做出一些调整，如图5所示：图5调整后的界面首先我们把标题的字体调大，加强了与内容文字的对比，显得更加醒目；然后把标签文字设为右对齐，与相应的控件的亲密性大大加强；最后调整最下面的按钮，使其与内容框右侧对齐，达到了美观的目的。由此看来，只要我们理解并使用好这九个字，就能够设计出比较美观的界面了。原则之三：规范作为程序员，大家都知道在项目开始之前要制定比较严格的代码规范，这样才能够让代码的可维护性更好。但是，这些规范往往都是针对的都是高级语言，像Java、C、C++、VB等等。其实，WebApp的前端页面同样也是由代码组成的，只不过是HTML样式的代码，对于这些代码，也同样需要规范。并且，和编程用的高级语言相比，这里的代码还有特殊需要注意的问题：lID属性的设置——在编程的时候，我们都会给变量命名，而在前端界面的代码中，各个元素也需要有自己的名字，那就是ID属性。经常会看到界面中的元素只有name属性，而没有id属性；或者id属性的名称就是button1、button2之类无意义的名称，这样的情况都应该得到规范。l浏览器的兼容性——比方说，在前端界面的代码中，每个元素的属性值可以放在引号之中，也可以把引号省略，有些浏览器具备比较好的纠错能力，也能够正确地显示界面。但是为了达到浏览器的兼容性，还是建议把所有属性值都放在引号之中，那样可以避免不必要的麻烦。想要让应用能够在更多的浏览器中使用，就一定要有规范来限制，否则很可能就需要限制应用只能在特定的浏览器中使用了。lCSS的使用——对于元素的样式，要尽量使用CSS来控制，而不能随心所欲地使用各种格式来控制，否则，一旦想要统一调整界面元素的风格，那就会成为前端开发人员的噩梦。除了代码的规范之外，页面元素的布局也应该规范，不过，我们在很多时候都可以使用CSS来规范，所以在此不再赘述。在以上的内容中，我简单地介绍了进行WebApp前端设计所需要遵循的三点原则，希望能够对大家设计WebApp的界面起到一些帮助作用，进而能够做出漂亮、拥有良好用户体验的系统，让用户喜欢使用开发出来的产品。