竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier


24月/140

node.js 初体验

发布在 邵珠庆

最近写的文章收到许多朋友的反馈,感谢大家的支持和建议,让我对坚持写博客充满热情,一个月一篇文章确实有点少,所以以后尽力多做分享,做好的分享,希望能对朋友们有用。

到新公司的这段时间学到了很多新东西,有好多东西需要去总结去探索,不过事情得一件一件来,今天咱们先从Node开始。注:以后出现的Node即node.js。

先搞点前戏热热场 - 为什么写这篇文章:

1.前段时间单位有新项目启动,服务端要做的工作不多也不算麻烦,就是处理一些中间层的服务,而且我们团队里面个个都会JavaScript,领导就决定试试服务器端的JavaScript,结果本人有幸被派去研究了几天Node,怀着鸡冻的心情开始了node.js的篇章,这篇文章也就是为这几天研究的总结。

2.一个JavaScript工程师如果没听过node.js那么我想你是不是错过了什么,每个优秀的前端工程师都有必要去了解后台处理流程,那么如果又能从JavaScript出发,岂不是一件很美妙的事么。

3.互联网的火热使得JavaScript风光无限,且服务端的JavaScript也并不是什么新技术了,相关的框架也有不少,只是node.js的成功让他爆发式的出现在我们的视线中,让很多前端工程师看到了从前端写到后端的另一种实现希望。注:node.js 是一个允许开发人员使用 JavaScript 语言编写服务器端代码的框架。

4.今年8月曾在某大公司最后一轮(第五轮)的面试被问到Node.js的问题,相对应的回答那是相当之糟糕,结果怎样你们懂的,感觉这个问题是导致没有通过的关键点之一...那家公司是我在读大学的时候就无比向往的公司,现在回想起那次经历和过程,谈不上惋惜,毕竟我真的尽力了 - 其实这篇文章更多的也是为了完成自己一个小小的心结...好吧,又扯远了。

5.欢迎各种转载,不过请注明出处,谢谢。
 

  PS:此篇文章的进阶内容在此《Nodejs初阶之express》,欢迎阅读和评论:)

 

Node是个啥?

写个东西还是尽量面面俱到吧,所以有关基本概念的东西我也从网上选择性的拿了些下来,有些地方针对自己的理解有所改动,对这些概念性的东西有过了解的可选择跳过这段。

1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅。

2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。处理高并发和异步I/O是Node受到开发人员的关注的原因之一。

3.Node 本身运行Google V8 JavaScript引擎,所以速度和性能非常好,看chrome就知道,而且Node对其封装的同时还改进了其处理二进制数据的能力。因此,Node不仅仅简单的使用了V8,还对其进行了优化,使其在各种环境下更加给力。(什么是V8 JavaScript 引擎?请“百度知道”)

4.第三方的扩展和模块在Node的使用中起到重要的作用。下面也会介绍下载npm,npm就是模块的管理工具,用它安装各种 Node 的软件包(如express,redis等)并发布自己为Node写的软件包 。

 

安装Node

在这简单说说在window7和linux两种环境下安装Node。安装的时候一定要注意Python的版本,多次因为Python版本的问题安装失败,建议2.6+的版本,低版本会出现Node安装错误,查询Python版本可在终端中输入:pyhton -v 

  1.先介绍linux下的安装吧,Node在Linux环境下的安装和使用都非常方便,建议在Linux下运行Node,^_^...我使用的是Ubuntu11.04

a.安装依赖包:50-100kb/s大概每个包一分钟就能下载安装完成

  sudo apt-get install g++ curl libssl-dev apache2-utils 
  sudo apt-get install git-core

b.在终端一步步运行一下命令:

  git clone git://github.com/joyent/node.git   
  cd node
  ./configure
  make   
  sudo make install

安装顺利的话到这一步Node就算安装成功了,2M的网络用了共计12分钟。

注:如果不用git下载也可以直接下载源码,不过这样下载安装需要注意Node版本问题。使用git下载安装是最方便的,所以推荐之。

 

2.在Windows下使用Cygwin安装Node,这个方式不太推荐,因为真的需要较长时间和较好的人品。我的系统是 win7旗舰版

Cygwin是一个在windows平台上运行的unix模拟环境,下载地址:http://cygwin.com/setup.exe

下载好Cygwin后开始安装,步骤:

a.选择下载的来源 - Install from Internet

b.选择下载安装的根目录

c.选择下载文件所存放的目录

d.选择连接的方式

e.选择下载的网站 - http://mirrors.163.com/cygwin

f.麻烦就麻烦在这步,考验人品的时候到了。需要的下载安装时间不确定,反正需要比较长的时间(超过20分钟),偶尔会出现安装失败的情况。单击一下各个程序包前面的旋转箭头图标选择你想要的版本,选中时会出现了"x"号表示已经选中了该程序包。选择需要下载的程序包:

复制代码
  Devel包:
    gcc-g++: C++ compiler
    gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
    gcc4-g++: G++ subpackage
    git: Fast Version Control System – core files
    make: The GNU version of the ‘make’ utility
    openssl-devel: The OpenSSL development environment
    pkg-config: A utility used to retrieve information about installed libraries
    zlib-devel: The zlib compression/decompression library (development)
  Editor包:vim: Vi IMproved – enhanced vi editor
  Python包:把Default切换成install状态即可
  Web包:
    wget: Utility to retrieve files from the WWW via HTTP and FTP
    curl: Multi-protocol file transfer command-line tool
复制代码

上个截图,以下载zlib-devel为例:

cygwin例子

其上几步走完才算把环境搭建完成,可是现在还没有到安装Node,还需要在Cywgin的ASH模式下执行rebaseall,步骤如下:

a. cmd命令行

b. 进入cygwin安装目录下的bin子目录

c. 运行ash进入shell模式

d. ./rebaseall -v

e. 没有错误就关闭命令行窗口
好了,现在到下载安装Node了,启动Cygwin.exe后输入:

复制代码
  $ wget http://nodejs.org/dist/node-v0.4.12.tar.gz
  $ tar xf node-v0.4.12.tar.gz
  $ cd node-v0.4.12
  $ ./configure
  $ make
  $ make install
复制代码

 

  3.直接下载node.exe文件

nodejs.org下载较慢所以我在网盘上传了一个,下载地址:http://www.everbox.com/f/VhyL6EiGF5Lm3ZSRx85caFDIA5

听说有不太稳定的问题,不过你假如只是想先在windows下了解Node,个人感觉这个方法比你装个Cygwin好很多。

 

注:原本不太想写安装Node这段,可是为了这篇文章的全面性还是写了,没想到一写就是那么长一段了...茶几了

 

“Hello World” - 为什么每次见到这句心情都会小激动,不解...

首先,创建个hello.js的文件,在文件中copy如下代码:

复制代码
  var http = require('http');
  http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
  }).listen(1337, "127.0.0.1");
  console.log('Server running at http://127.0.0.1:1337/');
复制代码

代码逻辑:

a. 全局方法require()是用来导入模块的,一般直接把 require() 方法的返回值赋值给一个变量,在 JavaScript 代码中直接使用此变量即可 。require("http") 就是加载系统预置的 http 模块

b. http.createServer 是模块的方法,目的就是创建并返回一个新的web server对象,并且给服务绑定一个回调,用以处理请求。

c. 通过 http.listen() 方法就可以让该 HTTP 服务器在特定端口监听。

d. console.log就不用多说了,了解firebug的都应该知道,Node实现了这个方法。

    注: 想了解具体细节请查看文档 cnodejs.org/cman/all.html#http.createServer

接着运行Node服务器,执行hello.js代码,成功启动会看见console.log()中的文本。有图有真相:

 

npm的下载和使用

除Node本身提供的API外,现在有不少第三方模块可极大的提高开发效率,npm就是Node的软件包管理器,可以用它安装所需软件包并发布自己为nodejs写的软件包。官网地址:npmjs.org

安装只需要在终端写入一行代码:

  curl http://npmjs.org/install.sh | sh

npm安装node扩展包同样是一行代码:

  npm install <包名>    //例:npm install express

注:如果安装模块的过程中报域名错误的话,请清空缓存 >npm cache clean 或重启计算机即可。

  

理解Node的模块概念

在Node中,不同的功能组件被划分成不同的模块。应用可以根据自己的需要来选择使用合适的模块。每个模块都会暴露一些公共的方法或属性。模块的使用者直接使用这些方法或属性即可,对于内部的实现细节就可以不用了解。除了Node本身提供的API外,开发人员也可以利用这个机制来将应用拆分成多个模块,以提高代码的可复用性。

1.如何使用模块?

在Node中使用模块是非常方便的,在 JavaScript 代码中可以直接使用全局函数 require() 来加载一个模块。

在刚刚”Hello World"的例子中,require("http") 可以加载系统预置的 http 模块;模块名称以 "./" 开始的,如 require("./myModule.js") 用来加载与当前 JavaScript 文件同一目录下的 myModule.js 模块。

2.自己如何开发模块?

刚刚介绍使用require()导入模块的时候,模块名称以 "./" 开始的这种,就是自己开发的模块文件。需要注意的就是JS文件的系统路径。

代码中封装了模块的内部处理逻辑,一个模块一般都会暴露一些公开的方法或属性给其他的人使用。模块的内部代码需要把这些方法或属性给暴露出来。

3.来一套简单的例子。先创建一个模块文件如myModule.js,就一行代码

  console.log('Hi Darren.')

然后创建一个test.js文件,导入这个JS文件,执行node看到结果

现在Node社区中已有不少第三方的模块,希望能有更多人通过学习Node,加入到这个大家庭中,为Node社区来添砖加瓦。先谢谢之,咱们继续。

4.来一个深点的例子。这个例子中将会针对 私有和共有 进行介绍。先创建一个myModule.js,代码如下:

  var name = "Darren";
  this.location = "Beijing";
  this.showLog = function(){
      console.log('Hi Darren.')
  };

代码中出现了三种类型,分别是: 私用属性,共有属性和共有方法,再创建一个test.js,执行Node

结果高亮的地方很清楚的告诉我们,私有方法我们在模块以外是取不到的,所以是undefined。共有属性和共有方法的声明需要在前面加上 this 关键字。

 

Node能做什么和它的优势

Node核心思想:  1.非阻塞;  2.单线程;  3.事件驱动

在目前的web应用中,客户端和服务器端之间有些交互可以认为是基于事件的,那么AJAX就是页面及时响应的关键。每次发送一个请求时(不管请求的数据多么小),都会在网络里走一个来回。服务器必须针对这个请求作出响应,通常是开辟一个新的进程。那么越多用户访问这个页面,所发起的请求个数就会越来越多,就会出现内存溢出、逻辑交错带来的冲突、网络瘫痪、系统崩溃这些问题。

Node的目标是提供一种构建可伸缩的网络应用的方案,在hello world例子中,服务器可以同时处理很多客户端连接。

Node和操作系统有一种约定,如果创建了新的链接,操作系统就将通知Node,然后进入休眠。如果有人创建了新的链接,那么它(Node)执行一个回调,每一个链接只占用了非常小的(内存)堆栈开销。    

举一个简单的异步调用的例子,把test.js和myMydule.js准备好了,^_^。把以下代码拷贝到test.js中并执行:

复制代码
  var fs = require('fs');
  fs.readFile('./myModule.js', function (err, data) {
    if (err) throw err;
    console.log('successfully');
  });
  console.log('async');
复制代码

所谓的异步,大家应该都能想得到运行时会先打先显示"async",再显示"successfully"。

Node是无阻塞的,新请求到达服务器时,不需要为这个请求单独作什么事情。Node仅仅是在那里等待请求的发生,有请求就处理请求。

Node更擅长处理体积小的请求以及基于事件的I/O。

Node不仅仅是做一个Web服务的框架,它可以做更多,比如它可以做Socket服务,可以做比方说基于文件的,然后基于像一些比方说可以有子进程,然后内部的,它是一个很完整的事件机制,包括一些异步非注射的解决方案,而不仅仅局限在网络一层。同时它可能,即使作为一个Web服务来说,它也提供了更多可以深入这个服务内核、核心的一些功能,比方说Node使用的Http Agent,这块就是它可以更深入这个服务内核来去做一些功能。

 

Node事件流概念

因为Node 采用的是事件驱动的模式,其中的很多模块都会产生各种不同的事件,可由模块来添加事件处理方法,所有能够产生事件的对象都是事件模块中的 EventEmitter 类的实例。代码是全世界通用的语言,所以我们还是用代码说话:

复制代码
  var events = require("events"); 
  var emitter = new events.EventEmitter(); 
  emitter.on("myEvent", function(msg) { 
    console.log(msg); 
  }); 
  emitter.emit("myEvent", "Hello World.");
复制代码

简单的分析这段:

1. 使用require()方法添加了events模块并把返回值赋给了一个变量

2. new events.EventEmitter()这句创建了一个事件触发器,也就是所谓的事件模块中的 EventEmitter 类的实例

3. on(event, listener)用来为某个事件 event 添加事件处理方法监听器

4. emit(event, [arg1], [arg2], [...]) 方法用来产生事件。以提供的参数作为监听器函数的参数,顺序执行监听器列表中的每个监听器函数。

 

EventEmitter 类中的方法都与事件的产生和处理相关:

1. addListener(event, listener) 和 on(event, listener) 这两个方法都是将一个监听器添加到指定事件的监听器数组的末尾

2. once(event, listener) 这个方法为事件为添加一次性的监听器。该监听器在事件第一次触发时执行,过后将被移除

3. removeListener(event, listener) 该方法用来将监听器从指定事件的监听器数组中移除出去

4. emit(event, [arg1], [arg2], [...]) 刚刚提到过了。

在Node中,存在各式各样不同的数据流,Stream(流)是一个由不同对象实现的抽象接口。例如请求HTTP服务器的request是一个流,类似于stdout(标准输出);包括文件系统、HTTP 请求和响应、以及 TCP/UDP 连接等。流可以是可读的,可写的,或者既可读又可写。所有流都是EventEmitter的实例,因此可以产生各种不同的事件。

可读流主要会产生以下事件:

  • data   当读取到流中的数据时,此事件被触发
  • end   当流中没有数据可读时,此事件被触发
  • error   当读取数据出现错误时,此事件被触发
  • close   当流被关闭时,,此事件被触发,可是并不是所有流都会触发这个事件。(例如,一个连接进入的HTTP request流就不会触发'close'事件。)

还有一种比较特殊的 fd 事件,当在流中接收到一个文件描述符时触发此事件。只有UNIX流支持这个功能,其他类型的流均不会触发此事件。

相关详细文档:http://cnodejs.org/cman/all.html#events_

 

强大的File System 文件系统模块

Node 中的 fs 模块用来对本地文件系统进行操作。文件的I/O是由标准POSIX函数封装而成。需要使用require('fs')访问这个模块。所有的方法都提供了异步和同步两种方式。

fs 模块中提供的方法可以用来执行基本的文件操作,包括读、写、重命名、创建和删除目录以及获取文件元数据等。每个操作文件的方法都有同步和异步两个版本。

异步操作的版本都会使用一个回调方法作为最后一个参数。当操作完成的时候,该回调方法会被调用。而回调方法的第一个参数总是保留为操作时可能出现的异常。如果操作正确成功,则第一个参数的值是 null 或 undefined 。

同步操作的版本的方法名称则是在对应的异步方法之后加上一个 Sync 作为后缀。比如异步的 rename() 方法的同步版本是 renameSync() 。下面列出来了 fs 模块中的一些常用方法,都只介绍异步操作的版本。

test.js和myModule.js文件准备好了木?把下面这段代码copy到test.js中执行一次

  var fs = require('fs');
  fs.unlink('./myModule.js', function (err) {
    if (err) throw err;
    console.log('successfully deleted myModule.js');
  });

如果没有报error,那么myModule.js就被删除了,就是这么简单

这只是一个简单的例子,感兴趣的话自己去多多尝试,实践出真理。由于篇幅原因就不多举例了。^_^

 

学习Node的总结:

1.对于一个linux的命令和shell知识几乎为零的我来说,这段时间又学到了不少关于linux知识;vim真是一个强大的编辑器,不用鼠标的感觉真的很好;而且有一点对我来说很重要,在linux下编程很cool,尤其是在团队中都是使用windows的,装装更健康^_^。

2.理解了服务端JavaScript的一个成功框架-Node,以及它的一些优势和使用的方式,这篇文章就是最好的总结,当然,这只会是一个开始

3.对于没有进入那么梦想的公司其实是有那么点遗憾,不过生活就应该要这样,有波折有起伏,这正是我需要并且期待的...那么新的生活还是要继续,做自己的舵手,把握好自己的方向,过去的就让它过去吧。

 

一些想对大伙说的话:

1. 在这我得打击一部分人的积极性。假如你对后台技术不够了解或者没接触过服务端语言,不知道I/O这些知识,没有后台处理流程这种概念,那么......Node并不是一门适合入门的服务端技术。为什么这么说:

a.重点就是中文实例少,文章少,想系统的学习会比较麻烦,所以在使用过程中总有一种不成熟的感觉,当然主要还是因为我对它不熟悉所造成的。国内使用Node的公司确实不多,当然国外还是有不少了,从cnodejs.org截了一个图:

b.对没有经验的朋友来说node其实并不好上手,从最简单“Hello world”就可以看出来(各种运行环境和安装细节的了解都得费点功夫),不要以jQuery库为比较,所处理的事物不同,学习的成本也不同 - 所以不太建议作为新手入门的服务端技术,如果想学习一门服务端语言PHP和Python都是不错的选择,因为:书多 例子多 框架多 上手简单 容易理解 搭建方便...

c.以上都是我个人善意的建议,由于水平有限,请大家多多指教,希望嘴下留情。

2. 关于Node的书写规范和具体技巧本人就不献丑了,自己写Node的代码也不多,不过面向对象的编程思想在哪都是好使的。

3. 希望这篇文章能对大家学习Node有用,如果觉得这文章也算用心,请劳驾点右下角的推荐。

 

 推荐几个学习Node的网址:
http://nodejs.org/ 

http://cnodejs.org/   由淘宝人建立的社区,内有Node中文文档

  http://www.oschina.net/p/nodejs/

http://www.ibm.com/developerworks/cn/opensource/os-nodejs/index.html

 注:最终领导决定放弃Node而使用Python,可是这不会影响我对Node的喜爱。我说过,这篇文章只会是一个开始。

 

 

作者:聂微东
出处:http://www.cnblogs.com/Darren_code/

228月/120

《用户体验的要素》笔记

发布在 邵珠庆

关于用户体验

  用户体验并不是指一件产品本身是如何工作的(虽然这有时对用户体验具有很大的影响)。用户体验是指“产品如何与外界发生联系并发挥作用的”,也就是人们如何“接触”和“使用”它。 互联网的一些事

  网站的用户体验比任何其它产品都重要。因为它是一个“自助式”的产品。没有事先阅读的说明书,没有任何操作培训或讨论会,也没有客户服务代表来帮助用户了解这个网站。

  一个常用的投资收益的度量标准是转化率。通过跟踪有百分之多少的用户被转化到下一个步骤,就能衡量你的网站达到“商业目的”方面的效率有多高。

  以用户为中心

  创建吸引人的、高效的用户体验的方法被称为以用户为中心的设计。其思想在于:在开发产品的每一个步骤中,都要把用户列入考虑范围。 yixieshi

  网站的双重性质 一些事

  1、网页作为软件的界面:把每一个问题看成是“应用软件”的设计问题。关注点是任务,即所有的操作都被纳入一个过户过程,去思考人们如何完成。网站是完成任务的工具。

  2、网页作为超文本系统:以信息的发布和检索的角度来看待。关注点是信息,即网站应该提供哪些信息,这些信息对用户的意义是什么。超文本是用户可以穿越的信息空间。

 用户体验的要素

  战略层:交互双方的所得

  战略层

  范围层:网站各种特性、功能最合适的组合方式

  范围层 yixieshi

  结构层:类别出现在哪 一些事

  结构层

 

  框架层:区域位置布局

 

  框架层

 

  表现层:组成网页的图片和文字 互联网的一些事

  表现层 一些事

  此外,还包含两个额外因素:内容与技术。

  应用

  大量收集亟待解决的细微问题。了解问题所在(位于哪个层),然后加以解决(考虑后果)。

  参考资料

  01 噶瑞特 《用户体验的要素》 http://book.douban.com/subject/2297549/

  02 小轰 本文思维导图整合版 http://cuikai-wh.com/wp-content/uploads/2011/01/elements-of-ue-v1.png

175月/122

用户体验覆盖表现,框架,结构,范围,战略四个层面

发布在 邵珠庆

 一款产品,必须能够为用户提供价值,才可以称为实用产品。通常,我们会谈论某家餐厅的服务很好,或某电影院的环境很差等,其实,这些都是围绕着用户体验而展开的讨论。

  以购物类网站为例,用户体验主要表现在如下几个层面——

  一、表现层

  在表现层(surface),你看到的是一系列的网页,有图片和文字组成。一些图片是可以点击的,从而执行某种功能,例如把你带到购物车里去。一些图片就只是图片,比如一本书的封面或网站自己的标志。

  二、框架层

  在表现层之下是网站的框架层(skeleton):按钮、表格、照片和文本区域的位置。框架层用于优化设计布局,以达到这些元素的最大效果和效率——使你在需要的时候,能记得标识并找到购物车的按钮。

  三、结构层

  与框架层相比更抽象的是结构层(structure),框架则是结构的具体表达方式。框架层确定了我们的结账页面上交互元素的位置;而结构层则用来设计用户如何到达某个页面,并且在他们做完事情之后能去什么地方。

  框架层定义了导航条上各项的排列方式,允许用户可以浏览书籍的不同类别;结构层则确定哪些类别应该出现在那里。

  四、范围层

  结构层确定网站各种特性和功能的最合适的组合方式,而这些特性和功能就构成了网站的范围层(scope)。有些卖书的网站提供了一个功能,使用户可以保存之前的邮寄地址,这样他们可以再次使用它。

  这个功能——或任何一个功能——是否应该成为网站的功能之一,就属于范围层要解决的问题。

  五、战略层

  网站的范围基本上是由网站的战略层(strategy)所决定的。这些战略不仅仅包括了经营者想从网站得到什么,还包括了用户想从网站得到什么。

  就网上书店的例子而言,一些战略目标是显而易见的:用户想要买书,我们想要卖出它们。另一些目标可能并不是那么容易说清楚的。

36月/110

用户体验参考资源

发布在 邵珠庆

(一)关于体验

约瑟夫。派恩和詹姆士。吉尔摩在《体验经济》一书中提出其观点:所谓“体验”就是企业以商品为道具,以服务为舞台,以顾客为中心,创造出可以使消费者全面参与、让消费者感到值得回忆的活动。

体验是使每个人以个性化的方式参与消费,在消费过程中产生情绪、体力、心理、智力、精神等方面的满足,并产生预期或更为美好的感觉。

体验的核心就是顾客参与,体验营销的消费者充分发挥自身的想象力和创造力,主动参与产品的设计、创造和再加工。

通过创造性的消费来体现独特的个性和价值,获得更大的满足和成就感。体验营销的焦点放在顾客体验上,把顾客作为价值创造的主体,及时回应消费者的感情诉求。

(二)网络体验

网站体验,指的是利用网络特性,为客户提供完善的网络体验,提高客户的满意度,从而与客户建立起紧密而持续的关系。

网络的体验,是体验的延伸。随着网络的普及,网络体验成为体验营销不可缺少的重要组成部分。

(三)网站体验的分类

1、感官体验:呈现给用户视听上的体验,强调舒适性。
2、交互体验:呈现给用户操作上的体验,强调易用/可用性。
3、情感体验:呈现给用户心理上的体验,强调友好性。
4、浏览体验:呈现给用户浏览上的体验,强调吸引性。
5、信任体验:呈现给用户的信任体验,强调可靠性。

(四)网站体验的76个体验点

一、感官体验:呈现给用户视听上的体验,强调舒适性。

1. 设计风格:符合目标客户的审美习惯,并具有良好的引导性。
网站在设计之前,必须明确目标客户群体,并针对目标客户的审美喜好,进行分析,从而确定网站的总体设计风格。
2. 网站LOGO:确保logo的保护空间,确保品牌的清晰展示而又不占据过分空间。
3. 页面速度:正常情况下,尽量确保页面在5秒内打开。如果是大 型门户网站,必须考虑南北互通问题,进行必要的压力测试。
4. 页面布局:重点突出,主次分明,图文并茂。与企业的营销目标相结合,将目标客户最感兴趣的,最具有销售力的信息放置在最重要的位置。
5. 页面色彩:与品牌整体形象相统一,主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度,确保浏览者的浏览舒适度。
6. 动画效果:与主画面相协调,打开速度快,动画效果节奏适中,不干扰主画面浏览。
7. 页面导航:导航条清晰明了、突出,层级分明。
8. 页面大小:适合多数浏览器浏览(以15寸及17寸显示器为主)。
9. 图片展示:比例协调、不变形,图片清晰。图片排列既不过于密集,也不会过于疏远。
10. 图标使用:简洁、明了、易懂、准确,与页面整体风格统一。
11. 广告位:避免干扰视线,广告图片符合整体风格,避免喧宾夺主。
12. 背景音乐:与整体网站主题统一,文件要小,不能干扰阅读。要设置开关按钮及音量控制按钮。

二、交互体验:呈现给用户操作上的体验,强调易用和可用性。

13. 会员申请:介绍清晰的会员权责,并提示用户确认已阅读条款。
14. 会员注册:流程清晰、简洁。待会员注册成功后,再详细完善资料。
15. 表单填写:尽量采用下拉选择,需填写部分需注明要填写内容,并对必填字段作出限制。(如手机位数、邮编等等,避免无效信息)
16. 表单提交:表单填写后需输入验证码,防止注水。提交成功后,应显示感谢提示。
17. 按钮设置:对于交互性的按钮必须清晰突出,以确保用户可以清楚地点击。
18. 点击提示:点击浏览过的信息颜色需要显示为不同的颜色,以区分于未阅读内容,避免重复阅读。
19. 错误提示:若表单填写错误,应指明填写错误之处,并保存原有填写内容,减少重复工作。
20. 在线问答:用户提问后后台要及时反馈,后台显示有新提问以确保回复及时。
21. 意见反馈:当用户在使用中发生任何问题,都可随时提供反馈意见。
22. 在线调查:为用户关注的问题设置调查,并显示调查结果,提高用户的参与度。
23. 在线搜索:搜索提交后,显示清晰列表,并对该搜索结果中的相关字符以不同颜色加以区分。
24. 页面刷新:尽量采用无刷新(AJAX)技术,以减少页面的刷新率。Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起,用户每次调用新数据时,无需反复向服务器发出请求,而是在浏览器的缓存区预先获取下次可能用到的数据,界面的响应速度因此得到了显著提升。
25. 新开窗口:尽量减少新开的窗口,以避免开过多的无效窗口,关闭弹出窗口的功能。
26. 资料安全:确保资料的安全保密,对于客户密码和资料进行加密保存。
27. 显示路径:无论用户浏览到哪一个层级,哪一个页面,都可以清楚知道看到该页面的路径。

三、浏览体验:呈现给用户浏览上的体验,强调吸引性。

28. 栏目的命名:与栏目内容准确相关,简洁清晰,不宜过于深奥。
29. 栏目的层级:最多不超过三层,导航清晰,运用JAVAscrip等技术使得层级之间伸缩便利。
30. 内容的分类:同一栏目下,不同分类区隔清晰,不要互相包含或混淆。
31. 内容的丰富性:每一个栏目应确保足够的信息量,避免栏目无内容情况出现。
32. 内容的原创性:尽量多采用原创性内容,以确保内容的可读性。
33. 信息的更新频率:确保稳定的更新频率,以吸引浏览者经常浏览。
34. 信息的编写方式:段落标题加粗,以区别于内文。采用倒金字塔结构。
35. 新文章的标记:为新文章提供不同标识(如new),吸引浏览者查看。
36. 文章导读:为重要内容在首页设立导读,使得浏览者可以了解到所需信息。文字截取字数准确,避免断章取义。
37. 精彩内容的推荐:在频道首页或文章左右侧,提供精彩内容推荐,吸引浏览者浏览。
38. 相关内容的推荐:在用户浏览文章的左右侧或下部,提供相关内容推荐,吸引浏览者浏览。
39. 收藏夹的设置:为会员设置收藏夹,对于喜爱的产品或信息,可进行收藏。
40. 栏目的订阅:提供Rss或邮件订阅功能
41. 信息的搜索:在页面的醒目位置,提供信息搜索框,便于查找到所需内容。
42. 页面打印:允许用户打印该页资料,以便于保存。
43. 文字排列:标题与正文明显区隔,段落清晰。
44. 文字字体:采用易于阅读的字体,避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置,以满足不同的浏览习惯。
45. 页面底色:不能干扰主体页面的阅读。
46. 页面的长度:设置一定的页面长度,避免页面过长而影响阅读。
47. 分页浏览:对于长篇文章 进行分页浏览。
48. 语言版本:为面向不同国家的客户提供不同语言的浏览版本。
49. 快速通道:为有明确目的的用户提供快速的入口。

四、情感体验:呈现给用户心理上的体验,强调友好性。

50. 客户分类:将不同的浏览者进行划分(如消费者、经销商、内部员工),为客户提供不同的服务。
51. 友好提示:对于每一个操作进行友好提示,以增加浏览者的亲和度。
52. 会员交流:提供便利的会员交流功能(如论坛),增进会员感情。
53. 售后反馈:定期进行售后的反馈跟踪,提高客户满意度。
54. 会员优惠:定期举办会员优惠活动,让会员感觉到实实在在的利益。
55. 会员推荐:根据会员资料及购买习惯,为其推荐适合的产品或服务。
56. 鼓励用户参与:提供用户评论、投票等功能,让会员更多地参与进来。
57. 会员活动:定期举办网上会员活动,提供会员网下交流机会。
58. 专家答疑:为用户提出的疑问进行专业解答。
59. 邮件/短信问候:针对不同客户,为客户定期提供邮件/短信问候,增进与客户间感情。
60. 好友推荐:提供邮件推荐功能。
61. 网站地图:为用户提供清晰的网站指引。

五、信任体验:呈现给用户的信任体验,强调可靠性。

62. 搜索引擎:查找相关内容可以显示在搜索引擎前列。
63. 公司介绍:真实可靠的信息发布,包括公司规模、发展状况、公司资质等。
64. 投资者关系:上市公司需为股民提供真实准确的年报,财务信息等。
65. 服务保障:将公司的服务保障清晰列出,增强客户信任。
66. 页面标题:准确地描述公司名称以及相关内容。
67. 文章来源:为摘引的文章标注摘引来源,避免版权纠纷。
68. 文章编辑作者:为原创性文章注明编辑或作者,以提高文章的可信度。
69. 联系方式:准确有效的地址、电话等联系方式,便于查找。
70. 服务热线:将公司的服务热线列在醒目的地方,便于客户查找。
71. 有效的投诉途径:为客户提供投诉或建议邮箱或在线反馈。
72. 安全及隐私条款:对于交互式网站,注明安全及隐私条款可以减少客户顾虑,避免纠纷。
73. 法律声明:对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。
74. 网站备案:让浏览者确认网站的合法性。
75. 相关链接:对于集团企业及相关企业的链接,应该具有相关性。
76. 帮助中心:对于流程较复杂的服务,必须具备帮助中心进行服务介绍