浅谈前端设计原则.pdf

浅谈 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” 等备用的信息，我们会发现它们对于绝大多数用户来说都是没有任何意义的，也不会用到， 只是为了以防万一，对于这些元素，我们大多可以删除掉。 其次， 要让应用的后台做更多的工作， 尽可能地把更多的操作自动化，