开发网站要从用户的角度出发！

最新推荐文章于 2024-11-03 16:40:52 发布

weixin_34248487

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量265

点赞数

文章标签：前端 javascript json ViewUI

原文链接：http://www.cnblogs.com/xuanya/p/5947199.html

版权

我本人就是一个用户，当我在使用全国软考网是所遭遇的问题让我头痛，报名和查看信息要登陆账户时，浏览器总是报错，弹窗提示说必须使用IE6版本JS才能正常运行，这样真的很让我很无语。还有在一些个别的企业网站，打开页面通常需要5S的时间，期间页面呈现空白，也会听到散热风扇“呼呼”地吹着热风，我查看了一下源代码，文档的代码结构让我心里很吃惊。而且百度的大部分产品完全没有对桌面触控事件提供支持，让多合一设备无从下手...

我在开发个人网站时，始终重视“用户体验”这个概念。让用户放松的浏览网站中的内容，难道这不重要吗？让代码遇到错误是尽快返回、控制作用域、提升循环性能、缓存变量、使用对象式函数及方法等，这些技术的运用都源自创建良好用户体验这一目标。

 1    success : function (data) {
 2             var fruit = data.fruit,
 3                 count = fruit.length;
 4                 //将output元素置空
 5             
 6                 $("#output").empty();
 7             if(count > 0){
 8                 $.each(fruit, function (i,obj) {
 9                     $("#output").append("<p>'+obj.name+'<a href="*" '+obj.color+'>'+obj.color+'</a></p>");
10                 })
11             }
12                 //这是一段截取的向json数据文件请求的js片段，它形象的返回了请求的各个阶段 相应的提示
13         }.error(function () {
14                 alert("返回请求错误信息！")
15             }).complete(function () {
16                 alert("返回发送完成消息！")
17             }).success(function () {
18                 alert("返回请求成功消息！")
19             })

加载信息提示用户

有时我们需要Ajax接受服务器的数据，网络通信条件可能非常的不稳定，会出现在请求和浏览器渲染过程中导致网页部分暂时空白的情况。如果不针对用户显示相应的等待提示，可能会使用户感到焦虑，在等待过程中在页面左点右点，甚至会认为网站的本身出了问题，从而离开网站。可见用户的体验关系到了网站的运营。至此，我们需要在Ajax通信过程中同时在相应的DOM节点添加loding…或者小动画等提示信息，这样的话用户可能会为数据等待一段时间，而不至于迅速离开网站。

 1     "use strict";   //这是一段截取的js（ajax）代码
 2 
 3     var request = getHTTPObject();
 4     //我想要提醒大家的是：当网页的某个区域在向服务器发送http请求的过程中，要有一个标识提醒用户正在加载...
 5     
 6     outputElement.innerHTML = "Loding..."; //也可以根据各位的需求添加一个循环小动画
 7 
 8     request.onreadystatechange = function () {
 9         
10         if(request.readyState ===4 || request.status ===200){

特效（http://www.w3school.com.cn/jquery/jquery_ref_effects.asp）

对于网站特效的问题，我建议使用适量的前端动态特效，辅以事件监听器达到一种“动态”网站的效果。CSS3新标准迎来大量的伪类样式，使用javascript代码结合CSS可以创造出很好的特效；另外jQuery库中定义了animat()方法，可以直接定义元素的动态效果。

浏览器适配问题（http://www.w3school.com.cn/browsers/index.asp）

关于旧版浏览器适配的问题，可以使用框架进行兼容。HTML5 boilerplate（http://www.bootcss.com/p/html5boilerplate/）是一个前端开发模板，官方宣传由100为资深开发者共同协作而成。它能帮你构建健壮、快速且适应能力强的Web 应用程序和网站，你使用编码器阅读HTML5 boilerplate，你会惊叹这个仅仅64kb左右的源码包，每一个代码都有其存在的意义。它确实能让你的项目开一个好头，它能识别旧的Ie浏览器，并给出用户提示，以免用户误解。你可以自行下载源文件，深入研究。

当你开发项目的过程中，需要对如何处理javascript中的各种问题做出结构或风格方面的决策时，应始终记住用户体验一词，以此来指导开发过程。我们通常关注的是应用程序的终端永华，实际上用户体验还包含另一方面的内容，它就是“可维护性”，它与终端用户的体验同等重要。

可维护性指的是与你一同开发团队中的其他能更新你的代码的人，是否能够有效地维护你开发出来的程序。我们也许可以为了提升终端用户的可用性而牺牲了可维护性，但是一名合格的开发者应该在可用性、执行效率及终端用户可用性之间寻求平衡。

我经常再做一个决定时，我会思考两个问题：“哪种方案会终端用户最好？”，“这么做对代码库的可维护性会造成什么影响？”。如果我的脑海中有明确的答案，这就证明我带领着项目正在朝着良好的方向前进。

转载于:https://www.cnblogs.com/xuanya/p/5947199.html