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


    我本人就是一个用户,当我在使用全国软考网是所遭遇的问题让我头痛,报名和查看信息要登陆账户时,浏览器总是报错,弹窗提示说必须使用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中的各种问题做出结构或风格方面的决策时,应始终记住用户体验一词,以此来指导开发过程。我们通常关注的是应用程序的终端永华,实际上用户体验还包含另一方面的内容,它就是“可维护性”,它与终端用户的体验同等重要。

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

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

  • 相关阅读:
    没有服务商如何购买ERP的序列号?
    智能ERP主副机设置
    银盒子·序列号购买(2018-12-05)
    简易付微信收款提示支付失败
    简易付无法登录的解决方案
    Orchard详解--第八篇 拓展模块及引用的预处理
    Orchard详解--第七篇 拓展模块(译)
    Orchard详解--第六篇 CacheManager 2
    Orchard详解--第五篇 CacheManager
    Orchard详解--第四篇 缓存介绍
  • 原文地址:https://www.cnblogs.com/xuanya/p/5947199.html
Copyright © 2020-2023  润新知