后臺(tái)返回json數(shù)據(jù)給前臺(tái)和前臺(tái)解析json數(shù)據(jù)（總結(jié)）

一般來說web開發(fā)中，前臺(tái)采用json數(shù)據(jù)提交給后臺(tái)，后臺(tái)處理數(shù)據(jù)以后返回json數(shù)據(jù)給前臺(tái)，前臺(tái)解析json，顯示數(shù)據(jù)。

總而言之，前后臺(tái)直接交換的數(shù)據(jù)格式最常用的非json數(shù)據(jù)無疑了。

這里就總結(jié)一些json數(shù)據(jù)的前后臺(tái)處理方式。



1.JSON數(shù)據(jù)

JSON(JavaScript Object Notation, JS 對(duì)象簡譜)



是一種輕量級(jí)的數(shù)據(jù)交換格式，比xml更輕巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數(shù)據(jù)所占用的帶寬）。



json是javascript原生格式，就是說在javascript中處理json數(shù)據(jù)，需要引用其他API或工具包。



簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。



只需要記??！

Json是一種文本字符串！被存儲(chǔ)在responseText屬性中，而讀取json數(shù)據(jù)可以使用javascript的eval函數(shù)來解析json。



2.json規(guī)則：

在 JS 語言中，一切都是對(duì)象，對(duì)象是一個(gè)無序的 “鍵/值” 對(duì)集合。

因此，任何支持的類型都可以通過 JSON 來表示，例如字符串、數(shù)字、對(duì)象、數(shù)組等。但是對(duì)象和數(shù)組是比較特殊且常用的兩種類型：

? 對(duì)象表示為鍵值對(duì).

? 數(shù)據(jù)由逗號(hào)分隔.

? 花括號(hào){}保存對(duì)象.

? 方括號(hào)[]保存數(shù)組.



鍵/值對(duì)組合中的鍵名寫在前面并用雙引號(hào) “” 包裹，使用冒號(hào) : 分隔，然后緊接著值：



{"firstName": "Json"}

1

這很容易理解，等價(jià)于這條 JavaScript 語句：



{firstName : "Json"}

1

對(duì)象在 JS 中是使用花括號(hào)包裹 {} 起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 {key1：value1, key2：value2, …} 的鍵值對(duì)結(jié)構(gòu)。



在面向?qū)ο蟮恼Z言中，key 為對(duì)象的屬性，value 為對(duì)應(yīng)的值。



鍵名可以使用整數(shù)和字符串來表示，值的類型可以是任意類型。



數(shù)組在 JS 中是方括號(hào) [] 包裹起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 [“java”, “javascript”, “vb”, …] 的索引結(jié)構(gòu)。



在 JS 中，數(shù)組是一種比較特殊的數(shù)據(jù)類型，它也可以像對(duì)象那樣使用鍵值對(duì)，但還是索引使用得多。同樣，鍵名可以使用整數(shù)和字符串來表示，值的類型可以是任意類型。



3.JSON 與 JS 對(duì)象的關(guān)系：

很多人搞不清楚 JSON 和 Js 對(duì)象的關(guān)系，甚至連誰是誰都不清楚。其實(shí)，可以這么理解：

JSON 是 JS 對(duì)象的字符串表示法，它使用文本表示一個(gè) JS 對(duì)象的信息，本質(zhì)是一個(gè)字符串。

如：



var obj = {a: 'Hello', b: 'World'};    //這是一個(gè)對(duì)象，注意鍵名也是可以使用引號(hào)包裹的

var json = '{"a": "Hello", "b": "World"}';  //這是一個(gè) JSON 字符串，本質(zhì)是一個(gè)字符串

1

2

4.后臺(tái)返回json數(shù)據(jù)

一般來說，使用JsonObject來將Java類型數(shù)據(jù)轉(zhuǎn)換成Json類型，首先要下載該庫相關(guān)的jar包，下載地址如下：



json-jar包下載



JsonObject的使用：

后臺(tái)controller部分代碼:



JSONObject object = new JSONObject();  //創(chuàng)建Json對(duì)象

object.put("username", "張三");         //設(shè)置Json對(duì)象的屬性

object.put("password", "123456");

System.out.println(object.toString());  //調(diào)用toString方法將json對(duì)象轉(zhuǎn)換成json字符串



//把json數(shù)據(jù)返回給瀏覽器：

PrintWriter out = cu.getWriterOut(response);

out.print(object.toString());

//或者

response.getWriter().write(jsonObject.toString());



1

2

3

4

5

6

7

8

9

10

11

5.在JavaScript代碼中接收J(rèn)son數(shù)據(jù)：

假設(shè)result為瀏覽器得到的json數(shù)據(jù)，可以使用以下js代碼可以將json對(duì)象轉(zhuǎn)換為字符串。



比如：



通過$.get從后臺(tái)獲取了一段json串{“id”:“1”,“name”:“ww”}，然后要拿到這里面的id和name值：



注意！注意！注意！

如果你直接這么寫！



$.get(url,

     function(data) {

       alert("ID:" + data.id + "\nName:" + data.name);

     });

1

2

3

4

直接這樣寫的話，界面會(huì)alert提示undefined，因?yàn)闆]能正確解析返回的字符串。



圖示：





解決方案：



1、 需要用eval()函數(shù)



將返回的串轉(zhuǎn)化成可用的strig串，eval(data)，但是因?yàn)樵锩媸且詛}開始和結(jié)束的，會(huì)被認(rèn)為是可執(zhí)行方法，因此需要加上()包圍起來,最終形成：



var jsonobj= eval('(' + data + ')');  // 把JSON字符串解析為javascript對(duì)象

1

然后再



alert("ID:" + jsonobj.id + "\nName:" + jsonobj.name);

1

各種正常的按key取值，就能正常顯示了。



2、獲取的時(shí)候就直接表示返回的是json格式，用.getJSON代替 .getJSON代替.getJSON代替.get，其他代碼不變，也能正常獲取。



也可以直接獲取json對(duì)象的屬性，如下：console.log(result.username);



前端js代碼:



$.ajax({

url: url,

type: "POST",

data: parameters,

dataType:"json",

async: false,

success: function(result){

var newData = JSON.stringify(result);    //將json對(duì)象轉(zhuǎn)換為字符串

newData = eval("("+newData+")");   /解析json



var annualDays = newData.annualDays;

var entryDate = newData.entryDate;



$("input[name='extendDataFormInfo.value(fd_shengyu_nianjia)']").val(annualDays);

$("input[name='extendDataFormInfo.value(fd_ruzhi_date)']").val(entryDate);



}});



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

ps: 注意注釋中的代碼，如果少了這一句，那么直接alert(result);得到的結(jié)果會(huì)是







所以在這里stringfy()的作用是用于從一個(gè)對(duì)象解析出字符串

加上了var newData = JSON.stringify(result);這句，然后你再alert(newData);

得到的就會(huì)是你想要的結(jié)果，如下:





另外：

如果返回的json數(shù)據(jù)格式不是很規(guī)范的解決辦法：



判斷后臺(tái)返回的數(shù)據(jù)格式是否字符串，是則轉(zhuǎn)，不是則不轉(zhuǎn)？



  var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content

1

總結(jié)：



前臺(tái)發(fā)送請(qǐng)求，并且設(shè)置數(shù)據(jù)為json格式‘

    $.ajax({

    url:"selectByid.",

    datatype:'json',

    data:{id:id}, // 發(fā)送數(shù)據(jù) 

1

2

3

4

數(shù)據(jù)回調(diào)函數(shù)

success:function(data){

alert(data);

var json = eval("("+data+")");//將json類型字符串轉(zhuǎn)換為json對(duì)象

alert("hjf"+json.name);

1

2

3

4

給對(duì)應(yīng)的input賦值：

$("#id").val(json.id),

$("#name").val(json.name),

$("#age").val(json.age);

1

2

3

后臺(tái)代碼：返回json數(shù)據(jù)

response.getWriter().print(str);    //將數(shù)據(jù)返回前臺(tái)ajax

1

6.前端ajax接不到j(luò)son解決？

在前臺(tái)：



async:false,                //加上這個(gè)屬性就好了

1

7.返回的json字符串中有轉(zhuǎn)義符解決？

比如：



"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",}"

1

這樣我們我們使用JSON.parse(result) ，直接轉(zhuǎn)化為json的話是會(huì)報(bào)錯(cuò)的。



解決方法：

我們先把轉(zhuǎn)義符用正則表達(dá)式去掉，



   var string = result.replace("/\","");

   var getDataArray = JSON.parse(string)

1

2

這樣就OK了，不過要注意有時(shí)候也是需要指定返回?cái)?shù)據(jù)類型的

dataType:“json”



8.使用其他的json依賴包方式：

引入阿里巴巴的json依賴包：



    <dependency>

     <groupId>com.alibaba</groupId>

     <artifactId>fastjson</artifactId>

     <version>1.2.9</version>

    </dependency>

1

2

3

4

5

模擬后臺(tái)：



    String params="{\"channelCode\":\"bbb\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";

    JSONObject pa=JSONObject.parseObject(params);

    System.out.println(pa.getString("message"));

1

2

3

結(jié)果：





或者：

引入net.sf.json-lib依賴包：



    <dependency>

      <groupId>net.sf.json-lib</groupId>

      <artifactId>json-lib</artifactId>

      <version>2.4</version>  

      <classifier>jdk15</classifier>

    </dependency>

1

2

3

4

5

6

后臺(tái)：



String params="{\"channelCode\":\"ccy\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";

JSONObject pa=JSONObject.fromObject(params);

String accountNo=pa.getString("accountNo");

System.out.println(accountNo);

1

2

3

4

結(jié)果：





9.后臺(tái)對(duì)象轉(zhuǎn)換json數(shù)據(jù)返回給前臺(tái)

List集合轉(zhuǎn)換成json代碼：



List list = new ArrayList();

list.add( "first" );

list.add( "second" );

JSONArray jsonArray2 = JSONArray.fromObject( list );

1

2

3

4

Map集合轉(zhuǎn)換成json代碼：



  Map map = new HashMap();

map.put("name", "json");

map.put("bool", Boolean.TRUE);

map.put("int", new Integer(1));

map.put("arr", new String[] { "a", "b" });

map.put("func", "function(i){ return this.arr[i]; }");

JSONObject json = JSONObject.fromObject(map);

1

2

3

4

5

6

7

或者在項(xiàng)目中加入引入JSON-lib包，JSON-lib包同時(shí)依賴于以下的JAR包：

下載地址。



  1.commons-lang.jar

  2.commons-beanutils.jar

  3.commons-collections.jar

  4.commons-logging.jar 

  5.ezmorph.jar

  6.json-lib-2.2.2-jdk15.jar

1

2

3

4

5

6

用法同上



JSONObject jsonObject = JSONObject.fromObject(message);

getResponse().getWriter().write(jsonObject.toString());

1

2

當(dāng)把數(shù)據(jù)轉(zhuǎn)為json后，用如上的方法發(fā)送到客戶端。前端就可以取得json數(shù)據(jù)了。（可以參考最下面的實(shí)例）



10.后臺(tái)返回?cái)?shù)據(jù)給前臺(tái)，json中文亂碼解決方法

在實(shí)際運(yùn)用場景中，當(dāng)前臺(tái)發(fā)起請(qǐng)求后，我們需要從后臺(tái)返回?cái)?shù)據(jù)給前臺(tái)，這時(shí)，如果返回的數(shù)據(jù)中包含中文，則經(jīng)常會(huì)出現(xiàn)在后臺(tái)查詢出來都是好好，但是傳輸回去就莫名的亂碼了，而且即使在 web.xml 中進(jìn)行編碼過濾了，但還是亂碼。



解決辦法：

只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我們重復(fù)寫的麻煩，配置內(nèi)容如下：



<!--自定義消息轉(zhuǎn)換器的編碼,解決后臺(tái)傳輸json回前臺(tái)時(shí)，中文亂碼問題-->

    <mvc:annotation-driven >

        <mvc:message-converters register-defaults="true">

            <bean class="org.springframework.http.converter.StringHttpMessageConverter" >

                <property name = "supportedMediaTypes">

                    <list>

                        <value>application/json;charset=utf-8</value>

                        <value>text/html;charset=utf-8</value>

                        <!-- application 可以在任意 form 表單里面 enctype 屬性默認(rèn)找到 -->

                        <value>application/x-www-form-urlencoded</value>

                    </list>

                </property>

            </bean>

            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" ></bean>

        </mvc:message-converters>

    </mvc:annotation-driven>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

加上這段配置，保存重新運(yùn)行，再次訪問，會(huì)發(fā)現(xiàn)，原先的中文亂碼都已經(jīng)正常顯示了。



方法二：在后臺(tái)的方法映射添加：



@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)



11.Spring MVC返回json數(shù)據(jù)的方式

1. 采用@ResponseBody注解
   
   @ResponseBody 注解的作用是:
   
   
   
   將controller的方法返回的對(duì)象通過適當(dāng)?shù)霓D(zhuǎn)換器轉(zhuǎn)換為指定的格式之后，寫入到response對(duì)象的body區(qū)，通常用來返回JSON數(shù)據(jù)或者是XML數(shù)據(jù)，需要注意的呢，在使用此注解之后不會(huì)再走試圖處理器，而是直接將數(shù)據(jù)寫入到輸入流中，他的效果等同于通過response對(duì)象輸出指定格式的數(shù)據(jù)。
   
   
   
   使用舉例：
   
   
   
   
   
   使用@ResponseBody 注解返回響應(yīng)體 直接將返回值序列化json
   
   優(yōu)點(diǎn)：不需要自己再處理
   
   
   
   再舉例：
   
   
   
   RequestMapping("/login")
   
   @ResponseBody
   
   public User login(User user){
   
   return user;
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   使用@ResponseBody 注解返回響應(yīng)體 直接將返回值序列化json。
   
   
   
   User字段：userName pwd，那么在前臺(tái)接收到的數(shù)據(jù)為：’{“userName”:“xxx”,“pwd”:“xxx”}’，效果等同于如下代碼：
   
   
   
   @RequestMapping("/login")
   
   public void login(User user, HttpServletResponse response){
   
   response.getWriter.write(JSONObject.fromObject(user).toString());
   
   }
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   需要在springmvc的配置文件xml中添加：
   
   
   
   <mvc:annotation-driven/>  
   
   1
   
2. 采用工具類，進(jìn)行json格式轉(zhuǎn)換帶回
   
   JSON-lib包是一個(gè)beans,collections,maps,java arrays 和XML和JSON互相轉(zhuǎn)換的包。在本例中，我們將使用JSONObject類創(chuàng)建JSONObject對(duì)象，然后我們打印這些對(duì)象的值。為了使用JSONObject對(duì)象，我們要引入"net.sf.json"包。為了給對(duì)象添加元素，我們要使用put()方法。
   
   
   
   要使程序可以運(yùn)行必須引入JSON-lib包，JSON-lib包同時(shí)依賴于以下的JAR包：
   
   
   
   commons-lang.jar
   
   commons-beanutils.jar
   
   commons-collections.jar
   
   commons-logging.jar 
   
   ezmorph.jar
   
   json-lib-2.2.2-jdk15.jar
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   效果：
   
   
   
   工具類：
   
   ResponseUtil.java
   
   
   
   package com.zout.utils;
   
   import java.io.PrintWriter;
   
   import javax.servlet.http.HttpServletResponse;
   
   import net.sf.json.JSONArray;
   
   import net.sf.json.JSONObject;
   
   
   
   /*
   
    @class_name：ResponseUtil  
   
    @param: EasyUi-響應(yīng)工具類
   
    @return: 返回字符串格式數(shù)據(jù)、result是JSONObject對(duì)象（json對(duì)象）
   
    @author:Zoutao
   
    @createtime:2018年3月8日
   
    /
   
   public class ResponseUtil {
   
   public static void write(HttpServletResponse response, Object result)
   
   throws Exception {
   
   response.setContentType("text/html;charset=utf-8");
   
   response.addHeader("Access-Control-Allow-Origin", "");
   
   PrintWriter out = response.getWriter();
   
   out.println(result.toString());
   
   System.out.println("帶回的json字符串為："+result.toString()+"類型為："+result.getClass().getName());
   
   out.flush();
   
   out.close();
   
   }
   
   
   
   public static void main(String[] args) throws Exception {
   
   /在web運(yùn)用控制層中調(diào)用如下：/
   
   JSONObject result = new JSONObject(); //創(chuàng)建json對(duì)象
   
   JSONArray jsonArray = JSONArray.fromObject("name:zhangsan"); //字符串轉(zhuǎn)為json數(shù)組
   
   result.put("rows", jsonArray);  //放入json數(shù)組中，并起個(gè)名字
   
   HttpServletResponse response = null; //jsp的response對(duì)象
   
   ResponseUtil.write(response, result); //result寫入response帶回前臺(tái)，jsp按名字拿取。
   
   }
   
   }
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   34
   
   35
   
   后臺(tái)具體調(diào)用:
   
   
   
   JSONObject result = new JSONObject();
   
   if (resultTotal > 0) { //處理結(jié)果
   
   System.out.println("操作成功。");
   
   result.put("success",true)
   
   result.put("message","操作成功"); //消息語句
   
   } else {
   
   System.out.println("操作失敗。");
   
   result.put("success", false);
   
   result.put("message","操作失敗");
   
   }
   
   ResponseUtil.write(response,result); //帶回字符串+狀態(tài)碼
   
   return null;
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   圖：
   
   
   
   
   
   后臺(tái)已經(jīng)通過工具類封裝為json字符串了，使用response帶回需要的數(shù)據(jù)，使用result帶回狀態(tài)字符串或狀態(tài)碼。
   
   
   
   前臺(tái)：
   
   這是當(dāng)成返回一個(gè)json字符串，然后直接采取字符串截取的方式，取出消息語句message等消息。
   
   
   
   
   
   這是另外一種寫法：就是解析傳回來的json字符串我js的對(duì)象，然后按照key/value的取值。
   
   
   
     function (data) {
   
             var data=eval("("+data+")");  //解析json
   
            //alert(data.message)
   
               $.messager.show({
   
                 title:'消息',
   
                 msg:data.message,  //按key取值
   
                 timeout:1000,
   
                 showType:'slide',
   
                 height:120,
   
                width:200
   
        });
   
    });
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   推薦這種方式。
   
   效果圖：
   
   
   
   
   
   以上都是后臺(tái)返回json數(shù)據(jù)給前臺(tái)和前臺(tái)解析json數(shù)據(jù)的一些總結(jié)，還有json數(shù)據(jù)的封裝，工具類的使用等等，東西有點(diǎn)復(fù)雜有點(diǎn)多，挑選自己需要的地方即可。
   
   另外的一些常用的web開發(fā)json：
   
   
   
   Json–Java數(shù)據(jù)類型對(duì)照表（映射）表
   
   
   

文章來源：優(yōu)設(shè)

原型：函數(shù)中的屬性prototype，她的名字就叫原型。可以通過也只能通過prototype添加可繼承的屬性和方法

原型對(duì)象：函數(shù)中prototype中的proto 和對(duì)象中的proto

先記住原型（prototype）和原型對(duì)象（proto）

下面用代碼解釋原型、原型對(duì)象、 原型鏈

<!DOCTYPE html>

<html>

   <head>

    <meta charset="utf-8">

    <title>對(duì)象</title>

   </head>

   <body>

    <script type="text/javascript">

       //創(chuàng)建一個(gè)對(duì)象和一個(gè)函數(shù)

       var obj = {}

       console.log(obj.proto)//obj有原型對(duì)象

       function objFun (){}

       console.log(objFun.prototype) //objFun 原型

       console.log(objFun.prototype.proto) //原型中有原型對(duì)象

       console.log('*華麗的分割線***')

       // 以objFun為構(gòu)造函數(shù) (為了把構(gòu)造函數(shù)和普通函數(shù)做區(qū)分，通常把構(gòu)造函數(shù)名首字母大寫)

       // 添加屬性和方法

       objFun.prototype.name='saozhu'

       objFun.prototype.say = function(){

        console.log(this.name+'-騷豬')

       }

       // 創(chuàng)建實(shí)例對(duì)象1

       var obj1=new objFun()

       console.log(obj1)//打印對(duì)象 空對(duì)象

       console.log(obj1.name) //騷豬 證明obj1繼承了objFun函數(shù)的屬性

       console.log('*華麗的分割線***')

       // 此時(shí)此刻 可以理解原型鏈了: 

       console.log(obj1.proto=== objFun.prototype)

       //true 

       // 原型鏈?zhǔn)怯袑?shí)例對(duì)象的proto(原型對(duì)象)指向構(gòu)造函數(shù)函數(shù)的原型（prototype)

       console.log(objFun.prototype.proto==window.Object.prototype)

       // true

       // 然后構(gòu)造函數(shù)的原型的原型對(duì)象(prototype.proto)指向window.Object.protype(對(duì)象的原型)

       console.log(window.Object.prototype.proto===null)

       // 這樣的指向關(guān)系形成的鏈?zhǔn)疥P(guān)系就是原型鏈

       //鏈?zhǔn)讲樵?查詢對(duì)象中的屬性和方法,會(huì)根據(jù)這樣的原型鏈查找,直到找到響應(yīng)的屬性和方法.找到window.Object.prototype.proto還沒有值,就返回undeifne

       

    </script>

   </body>

</html>

昨天我們講了用戶體驗(yàn)分為五個(gè)層次，從內(nèi)而外分別是：

①戰(zhàn)略存在層 > ②能力圈范圍層 > ③資源結(jié)構(gòu)層 > ④角色框架層 > ⑤感知層

以下案例來自于 梁寧老師的《產(chǎn)品思維30講》

苦思冥想，還是只有梁寧老師這個(gè)案例最為合適；

說到“搜索”，你會(huì)想到哪些呢

如果我沒猜錯(cuò)，你想到的第一個(gè)詞是：“百度”

研發(fā)行業(yè)的話，可能我們用的瀏覽器應(yīng)該是：“google”居多

但你是否用過古老的“yahoo”呢？

今天，我們就來說說搜索業(yè)三大巨頭的戰(zhàn)爭，

他們之間的戰(zhàn)爭，有助于我們?nèi)ダ斫庥脩趔w驗(yàn)的五個(gè)層次

首先

Google與百度

說到百度與谷歌的競爭前，梁寧老師說了下雅虎：

我們做設(shè)計(jì)的最知道，色彩是非常重要的元素，如果以科技為關(guān)鍵詞，

我們想到的第一個(gè)詞，一定是藍(lán)色，藍(lán)色一來不會(huì)太刺眼，

又相對(duì)普遍，所以不會(huì)出現(xiàn)審美疲勞，

而yahoo用的是什么為主色呢，是一個(gè)我們最不會(huì)用的顏色——紫色

那么，假如有個(gè)用戶指著那個(gè)“紫色”的“音噗忒（input）”說：“不好用”，

他指的是什么呢？

1.是感知層，不喜歡藍(lán)色？

2.按鈕的形狀太突兀？尺寸太大？位置不合適？

3.還是說是框架層，內(nèi)容的排列方式?jīng)]有令他滿意呢？

說點(diǎn)令人興奮的，我們?cè)诎俣人阉鳌按髽吠浮保?

度娘顯示的結(jié)果第一條，就是本期開獎(jiǎng)的結(jié)果，

然后是百度百科對(duì)“大樂透”這個(gè)詞條的解釋，

其次的就是關(guān)于大樂透的各類新聞和各種“行業(yè)大師”對(duì)下期開獎(jiǎng)結(jié)果的分析；

百度的框架的意義就是，能一步走完，絕對(duì)不讓用戶走一步半，

為什么百度能給出這么符合用戶的搜索結(jié)果呢？

雖然這個(gè)結(jié)果離不開的肯定得是百度的爬蟲技術(shù)是數(shù)以毫秒為單位的，

但百度爬蟲技術(shù)肯Google當(dāng)然還是沒法比的，

最重要的什么呢，是百度不單只是去爬數(shù)據(jù)，而且他還建立數(shù)據(jù)，

當(dāng)整個(gè)互聯(lián)網(wǎng)的數(shù)據(jù)都不多的時(shí)候，

百度做了一件Google沒有做的事，

就是我們剛才說到的“建立數(shù)據(jù)”

百度做了兩個(gè)平臺(tái)：1.百度貼吧     2.百度知道

展示下各自的裝備

一個(gè)在升級(jí)技術(shù)去爬，一個(gè)在建立數(shù)據(jù)

你覺得，誰會(huì)贏到最后呢，

你說，Google為什么不跟著做呢，

Google 的性格是絕對(duì)不會(huì)的，用梁寧老師的話來說：

“以Google的清高和耿直，不會(huì)做這樣的事，甚至當(dāng)用戶有需求時(shí)，Google還會(huì)為百度導(dǎo)流量，給對(duì)手送彈藥”

但至此，搜索業(yè)都還是處于資源層的比拼

這一仗，百度帶著它的百度貼吧和百度知道，拿到了勝利！

但三十年河?xùn)|，三十年河西

百度在移動(dòng)場景下輸給微信，也是因?yàn)槲⑿乓园俣葢?zhàn)勝Google同樣的方式，以公眾號(hào)的形式建設(shè)資源；

Yahoo與Google

2004年，一批華爾街精英做了搜索引擎的比評(píng)，評(píng)測結(jié)果呢，Yahoo優(yōu)于Google，Yahoo勝利，

但奇怪的是評(píng)測完之后，大家打開了Google工作，

為什么會(huì)出現(xiàn)這個(gè)情況呢，

他們的評(píng)測方式非常的簡單，對(duì)，就是簡單，

第一步：選幾個(gè)關(guān)鍵詞

第二步：在各個(gè)搜索引擎中搜索

第三步：將結(jié)果打印

第四步：比對(duì)結(jié)果，認(rèn)為哪個(gè)好，就投一枚硬幣

最后雅虎獲得的硬幣最多

簡單吧，你閑的蛋疼也可以去試試，

那為什么雅虎會(huì)勝出呢，因?yàn)檠呕⒂玫暮笈_(tái)搜索引擎也是Google的，

雅虎只是對(duì)熱門的關(guān)鍵詞做了人工優(yōu)化，

所以結(jié)果不是跟Google一樣，就是比Google好，

。。扯吧，但就是這樣。

那為什么這批精英日常還是會(huì)用Google呢，

竟然是因?yàn)榭蚣軐?，因?yàn)閅ahoo的設(shè)計(jì)比較喜歡高大尚，所以界面相對(duì)寬松，易看，

但缺點(diǎn)就是一屏只能顯示一兩條，

而谷歌的搜索結(jié)果一屏展示好幾十條，

所以對(duì)于搜索引擎這個(gè)東西來說，

我們更在乎內(nèi)容，

而形式恐怕稍微次要，

在感知層差別不大的情況下，Yahoo竟然在框架層就輸了一局，恐怕很難想到吧

設(shè)計(jì)師，要有產(chǎn)品思維！

但在互聯(lián)網(wǎng)設(shè)計(jì)的今天，可能這五個(gè)層級(jí)有了一些整合，

但是，在用戶抱怨體驗(yàn)不好時(shí)，你能分辨，會(huì)去分辨用戶是說哪個(gè)層級(jí)嗎？

還是說你會(huì)跟用戶講道理，說服他們呢？

銷售天然的本領(lǐng)就是說服，掌握各種說服的技巧：

擺事實(shí)，講道理，打比方，舉例子，要同情，裝可憐，將心比心，軟磨硬泡；

如果是現(xiàn)實(shí)中，或許你能說服用戶，

但作為一個(gè)互聯(lián)網(wǎng)產(chǎn)品，別說說服，你連站在旁邊說句話的資格都沒有，

何況，比起用自己的道理說服用戶，我們更應(yīng)該做的，不應(yīng)該是挖掘用戶真正的需求嗎？

從今天起，

不再做銷售：按我的來

而要做產(chǎn)品：順你的意

用戶沒有我們這么專業(yè)，他的表達(dá)方式就是：情緒；

如果我們不能接受這個(gè)表達(dá)方式，就不可能挖掘到用戶的真正需求，

總結(jié)一下：

1. 接受用戶的表達(dá)方式，通過五個(gè)層面，挖掘到用戶真正的需求；

2. 銷售是按我的來，而產(chǎn)品是順你的意

《點(diǎn)石成金:訪客至上的網(wǎng)頁設(shè)計(jì)秘笈》在用戶體驗(yàn)領(lǐng)域，可以說是一部很經(jīng)典的書籍，該書于2000年出版第一版，現(xiàn)在已經(jīng)更新到第三版，自從問世以來可以說已經(jīng)將近20年了，但一直是備受推崇。這本書主要為我們介紹了產(chǎn)品可用性原則，并用大量的案例來闡述及運(yùn)用。幾年前我讀過一次，最近再次重溫，準(zhǔn)備做一個(gè)整理，當(dāng)做自己的學(xué)習(xí)記錄。

作者史蒂夫·克魯克（簡稱Krug先生）是一名備受尊敬的可用性咨詢師，他把多年的從業(yè)經(jīng)驗(yàn)，以通俗易懂的方式凝結(jié)成此書，并且篇幅簡短，雖然作者說兩個(gè)小時(shí)就可以讀完，但如果邊讀邊思考的話，兩個(gè)小時(shí)還是不夠的，畢竟這是一本工具類書籍，不是小說。本篇文章只是我的一個(gè)學(xué)習(xí)記錄，還是非常希望大家能夠讀一讀原著的。

別讓我思考，作為Krug可用性第一定律，意味著，設(shè)計(jì)者應(yīng)該盡量做到，當(dāng)看到一個(gè)頁面時(shí)，應(yīng)該是不言而喻，一目了然。我能明白它是什么，怎樣使用它，而不需要花費(fèi)很多精力進(jìn)行思考。

舉個(gè)例子，假如一個(gè)你不認(rèn)識(shí)的人，就比如是你隔壁的鄰居，對(duì)你的網(wǎng)站毫無興趣，也幾乎不知道如何使用，但是他仍然看一眼你的主頁，就知道這是干什么的，該怎么用。

比如以下這個(gè)網(wǎng)站，這是我從網(wǎng)上隨便找的一個(gè)網(wǎng)站，之前從來沒有聽說過，點(diǎn)擊鏈接進(jìn)入后的第一眼，就是很多關(guān)于車的元素，猜測一定是關(guān)于車的網(wǎng)站；右下角兩個(gè)大大的按鈕“找新車”“品牌找車”，那這個(gè)應(yīng)該是賣車網(wǎng)站，八九不離十了。先不說下面是多么雜亂不堪，起碼第一眼我就可以看出，這個(gè)網(wǎng)站是干什么的，該怎么用，這是最基本的。

有可能我們之前訪問過一些網(wǎng)站，打開后茫然不知所措，幾乎把首頁的每個(gè)地方都瀏覽過了，才知道是該怎么操作，或者某些元素看起來像按鈕，但是卻不能點(diǎn)擊，也沒有點(diǎn)擊失敗的提示...總之體驗(yàn)很差。所以當(dāng)我們創(chuàng)建網(wǎng)站時(shí)，就需要去掉這些問號(hào)。作為一個(gè)用戶，永遠(yuǎn)不能讓我花幾秒思考，能不能點(diǎn)擊的問題。

當(dāng)我們?cè)L問WEB的時(shí)候，每個(gè)問號(hào)都會(huì)加重我們的認(rèn)知負(fù)擔(dān)，把我們的注意力從要完成的任務(wù)上拉開。這種干擾也許很輕微，但他們會(huì)累積起來，有時(shí)候這樣的干擾不用太多，就足以讓我們抓狂。這樣會(huì)讓我們對(duì)網(wǎng)站失去信心。

那么哪些事情是訪問者在訪問網(wǎng)站時(shí)不應(yīng)該花時(shí)間思考的事呢？

例如：

1、我在什么位置？

2、我該從哪里開始？

3、他們把某某放在什么地方了？

4、這個(gè)頁面上最重要的是什么？

5、為什么他們給他取這個(gè)名字？

...

我們?cè)谠O(shè)計(jì)網(wǎng)站的前和后，可以把這些作為走查對(duì)象審視一下，慢慢的這些習(xí)慣就會(huì)變成你的潛意識(shí)，再次設(shè)計(jì)網(wǎng)站的時(shí)候就會(huì)自然而然的把這些因素考慮在內(nèi)。

不過，有時(shí)候，特別是在進(jìn)行一項(xiàng)嶄新的，開拓性的或者非常復(fù)雜的頁面設(shè)計(jì)時(shí)，也許只能做到自我解釋。在一個(gè)自我解釋的頁面中，用戶只需要花一點(diǎn)點(diǎn)時(shí)間去理解頁面的外觀，精心選擇的名稱，頁面布局以及少量仔細(xì)斟酌過的文字。所以，如果不能做到讓一個(gè)頁面不言而喻，那么至少應(yīng)該讓它自我解釋，這個(gè)非常重要。

我們常常認(rèn)為用戶會(huì)盯著每個(gè)網(wǎng)頁，仔細(xì)閱讀我們精心制作的文字，領(lǐng)會(huì)我們組織頁面的方式，然后，在點(diǎn)擊某個(gè)鏈接之前權(quán)衡他們的可選目標(biāo)。

但是大部分情況卻是，用戶只會(huì)在每個(gè)頁面上瞥一眼，掃過一些文字，點(diǎn)擊第一個(gè)令他們感興趣或者大概符合他們目標(biāo)的鏈接。通常，頁面上的很多部分他們都不看（想一想，你是不是這樣瀏覽網(wǎng)頁的呢）。

本想舉快手WEB端的例子，沒想到再次打開后發(fā)現(xiàn)已經(jīng)改版了，而且應(yīng)該是近兩個(gè)月左右的事情，可惜已經(jīng)不能截圖，不過這次的改版比之前好多了。

上一版本中，幾乎有幾段整段整段的文字，雖然文采不錯(cuò)，比較優(yōu)美吧，但誰有耐心看呢，總之我打開幾次，一次也沒一字一字的閱讀過。這個(gè)直接增加了用戶的負(fù)擔(dān)，降低了主要元素的層級(jí)，畫蛇添足。

所以，如果我們想設(shè)計(jì)有效的網(wǎng)頁，必須開始接受關(guān)于網(wǎng)絡(luò)使用的三個(gè)事實(shí)：

一、我們不是閱讀，而是掃描

原因有3：

1、我們總是處于忙碌之中；

2、我們知道自己不必閱讀所有內(nèi)容，只對(duì)網(wǎng)頁中的一小部分內(nèi)容感興趣，剩下的內(nèi)容我們并不關(guān)心，掃描就是我們找到相關(guān)內(nèi)容的方式。

3、我們善于掃描，在日常生活中，我們不管是看報(bào)紙，還是雜志，書籍，基本都是用掃描的方式，找到我們感興趣的部分。

大家想一想，我們?cè)诳磮?bào)紙的時(shí)候，是不是先瀏覽一遍，然后看到哪個(gè)標(biāo)題比較吸引才專心去看那篇文章，而且也不會(huì)是一字一句的去讀，而是知曉大概內(nèi)容即可。

再舉個(gè)貼近的例子，打開站酷的首頁，你們會(huì)從左到右，從上到右的一字不漏的去看嗎，我們是不是用眼睛掃一遍，看到吸引你的內(nèi)容，然后再點(diǎn)進(jìn)去看詳情，對(duì)的，這就是互聯(lián)網(wǎng)用戶的掃描閱讀。

二、我們不做最佳選擇，而是滿意即可

在設(shè)計(jì)頁面時(shí)，我們通常假設(shè)用戶只是掃過整個(gè)頁面，考慮所有可能的選項(xiàng)，然后選擇一個(gè)最好的。

事實(shí)上，大多數(shù)時(shí)間里，用戶不會(huì)選擇最佳選項(xiàng)，而是選擇一個(gè)合理的選項(xiàng)，一旦發(fā)現(xiàn)一個(gè)鏈接，看起來似乎能跳轉(zhuǎn)到我們想去的地方，那很大的機(jī)會(huì)就會(huì)去點(diǎn)擊它。

原因有以下幾個(gè)：

1、我們總是處于忙碌之中，尋找最佳策略需要的時(shí)間很長。

2、如果猜錯(cuò)了，也不會(huì)產(chǎn)生什么嚴(yán)重的后果。就算做了錯(cuò)誤選擇，我們只要點(diǎn)擊幾次返回按鈕就好，所以，返回按鈕，是WEB端用的最多的地方。

3、對(duì)選擇進(jìn)行仔細(xì)思考還不如很快多嘗試幾次。

4、猜測更有意思，猜測不會(huì)像仔細(xì)權(quán)衡那么累，而且如果猜對(duì)了，速度會(huì)更快。

當(dāng)然，這并不是說用戶在點(diǎn)擊之前從不進(jìn)行權(quán)衡，這要取決于時(shí)間上的緊迫以及其他因素。

大家想一想，現(xiàn)實(shí)中是不是這樣的呢。也許通往一個(gè)入口有好幾條路徑，但是第一次進(jìn)入該網(wǎng)站的時(shí)候，不會(huì)尋找最佳路徑，而是試探的摸索，只要找到就可以了，不會(huì)刻意的找那條最捷徑的。

三、我們不是追根究底，而是勉強(qiáng)應(yīng)付。

生活中，人們?cè)谑褂萌魏螙|西，往往不理解它們的運(yùn)作原理，甚至對(duì)它們的工作原理有完全錯(cuò)誤的理解。

無論面對(duì)哪種產(chǎn)品，除了刻意鉆研的，很少有人會(huì)花時(shí)間閱讀說明書。相反，我們往往是貿(mào)然前進(jìn)，勉強(qiáng)應(yīng)付。

比如我們買了一臺(tái)新款電視機(jī)，幾乎從來不會(huì)把電視機(jī)的零件一個(gè)個(gè)都拆下來，完全理解了它們的工作原理后才使用，我們甚至連說明書都不看，而是拿著遙控器自己琢磨，完全沒有必要去深究。

為什么會(huì)這樣？

1、這對(duì)我們來說并不重要。對(duì)于大多數(shù)人來說，是否明白背后的工作機(jī)制并不重要，只要正常使用即可，這并不是智力低下的表現(xiàn)，而是我們并不關(guān)心。

2、如果發(fā)現(xiàn)某個(gè)事物能用，我們會(huì)一直使用它。我們一旦發(fā)現(xiàn)某個(gè)事物能用，很少去找更好的替代品。如果偶然發(fā)現(xiàn)一種更好的方法，我們會(huì)換用這種更好的方法，但很少去主動(dòng)尋找更好的。

舉個(gè)我小時(shí)候的例子，上學(xué)時(shí)我用的第一只中性筆是同學(xué)給我的，雖然可以用，但我發(fā)現(xiàn)比較粗，不太喜歡，但是認(rèn)為可以用，從來沒想過是否有稍微細(xì)一點(diǎn)的。當(dāng)?shù)谝恢还P芯用完，去文具店購買時(shí)，發(fā)現(xiàn)竟然還有0.35的筆芯，很意外，當(dāng)然我就放棄了之前的筆芯，換作成0.35的，這樣的例子應(yīng)該都會(huì)發(fā)生在每個(gè)人的生活中。

那如果人們勉強(qiáng)應(yīng)付的時(shí)候這么多，有沒有弄明白真的那么重要嗎？答案是很重要，因?yàn)橛袝r(shí)候可以勉強(qiáng)應(yīng)付，但通常效率不高，而且容易出錯(cuò)。

如果用戶很清楚，不是勉強(qiáng)應(yīng)付呢？

1、他們會(huì)更容易找到自己需要的東西。

2、會(huì)更容易理解你的網(wǎng)站提供哪些服務(wù)。

3、你更可能引導(dǎo)他們到你的網(wǎng)站上希望他們看到的地方。

4、在你的網(wǎng)站上，會(huì)覺得自己更聰明，感覺更好，這樣他們就會(huì)離開讓人勉強(qiáng)應(yīng)付的網(wǎng)站了。

這也是現(xiàn)在競品之間搶奪用戶的一個(gè)重要因素，兩個(gè)服務(wù)內(nèi)容一樣的產(chǎn)品，一個(gè)直觀明了，一個(gè)結(jié)構(gòu)比較混亂，不能很快找到目標(biāo)，對(duì)于這兩個(gè)產(chǎn)品，那用戶該選擇哪一個(gè)呢，可想而知。

前面已經(jīng)說到，現(xiàn)在互聯(lián)網(wǎng)的用戶閱讀都是掃描式閱讀，那么在這種情況下，怎樣才能讓用戶清晰理解你的網(wǎng)站，提高體驗(yàn)。

需要注意5個(gè)方面，保證他們會(huì)很容易理解你的網(wǎng)站：

1、在每個(gè)頁面上建立清晰的視覺層次；

2、盡量利用習(xí)慣用法；

3、把頁面劃分成明確定義的區(qū)域；

4、明顯標(biāo)識(shí)可以點(diǎn)擊的地方；

5、最大限度降低干擾；

前面已經(jīng)說到，現(xiàn)在互聯(lián)網(wǎng)的用戶閱讀都是掃描式閱讀，那么在這種情況下，怎樣才能讓用戶清晰理解你的網(wǎng)站，提高體驗(yàn)。

一個(gè)視覺層次清晰的頁面有3個(gè)特點(diǎn)：

1、越重要的部分越突出；

2、邏輯上相關(guān)的部分，視覺上也相關(guān)；

3、邏輯上包含的部分在視覺上游嵌套；

也可以這么說，要把版式設(shè)計(jì)的四個(gè)原則，親密，重復(fù)，對(duì)齊，對(duì)比，把這幾點(diǎn)做好。

對(duì)于習(xí)慣用法可以說是人的一種本性習(xí)慣了，這也是為什么很多競品都很相似的原因了。

舉個(gè)常見的例子，比如聊天的icon，都是一種對(duì)話框的設(shè)計(jì)，因?yàn)槿藗円呀?jīng)習(xí)慣了這種圖標(biāo)設(shè)計(jì)，如果換成其他，用戶看到后會(huì)不理解這到底是什么東西。

對(duì)于設(shè)計(jì)師，很多人一直想創(chuàng)新，但是一定要秉持兩個(gè)原則：

1、創(chuàng)新的方法同樣也要不言而喻；

2、能夠?yàn)橛脩魩砗艽髢r(jià)值，值得用戶付出一點(diǎn)努力來學(xué)習(xí)新的方法。

Krug可用性第二定律——點(diǎn)擊多少次都沒關(guān)系，只要每次點(diǎn)擊都是無須思考的選擇。

文中說：WEB設(shè)計(jì)師和可用性專家一直有一個(gè)爭論，用戶在到達(dá)目標(biāo)之前點(diǎn)擊多少次不會(huì)覺得有挫敗感，作者認(rèn)為，真正的問題不是到達(dá)目標(biāo)之前要點(diǎn)擊的次數(shù)，而是每次點(diǎn)擊有多艱難，需要多少思考，有多大的不確定性來判斷自己是否在進(jìn)行正確的選擇。

所以當(dāng)我們?cè)谑褂媚壳耙恍┏晒Φ漠a(chǎn)品時(shí)，會(huì)感到自然而然的流暢體驗(yàn)，雖然有時(shí)候因?yàn)楫a(chǎn)品體量大，沒有很快找到目標(biāo)，但我們也沒有過多挫敗和煩躁。

Krug可用性第三定律——去掉每個(gè)頁面上一半的文字，然后把剩下的文字再去掉一半。

好處：

1、可以降低頁面的噪聲。

2、讓有用的內(nèi)容更加突出。

3、讓頁面更簡短，讓用戶在每個(gè)頁面上一眼就能看見更多的內(nèi)容，而不必滾動(dòng)屏幕。

如果有歡迎詞，盡量減少，能不用就不用。

指示性說明盡量不用。

如果指示性說明非常冗長，用戶發(fā)現(xiàn)所需信息的機(jī)會(huì)很小。

我們應(yīng)該通過讓每項(xiàng)內(nèi)容不言而喻來完全消除指示性說明，當(dāng)指示文字變得完全沒有必要，就應(yīng)把他們?nèi)咳サ簟?

現(xiàn)在比較成功的App的引導(dǎo)頁都非常簡潔，因?yàn)闆]有人會(huì)在進(jìn)入的時(shí)候看你寫的一長段文字，等待很長時(shí)間，除非視覺性很強(qiáng)，比如今年美團(tuán)變黃的那段視頻，視覺沖擊力很強(qiáng)，我看完一次后，在網(wǎng)上又自己找，看了幾次。所以要做到盡量減少指示性說明。

作者認(rèn)為，很多網(wǎng)站，一旦到了第二個(gè)層次，導(dǎo)航會(huì)變得支離破碎，隨意發(fā)揮，以至于很難找到良好的三級(jí)導(dǎo)航的例子。

原因有3：

1、好的多級(jí)導(dǎo)航本來就很難設(shè)計(jì)，同時(shí)有很多元素需要安排到頁面中。

2、設(shè)計(jì)師即使在設(shè)計(jì)前兩個(gè)層次也常感到時(shí)間不夠。

3、第三個(gè)原因是它看起來并不重要，不是主導(dǎo)航，也不是二級(jí)導(dǎo)航，而且有一種傾向認(rèn)為，當(dāng)人們深入到網(wǎng)站的這一個(gè)層次后，會(huì)自然明白如何進(jìn)行操作。

而且就算設(shè)計(jì)師提出需求，他們也可能拿不到，因?yàn)樨?fù)責(zé)內(nèi)容的通常不會(huì)想的那么深遠(yuǎn)。

事實(shí)上，用戶在底層頁面上花的時(shí)間通常和花在頂層頁面的時(shí)間相同，除非從一開始就自頂往下進(jìn)行導(dǎo)航設(shè)計(jì)，否則以后很難再進(jìn)行添加，也很難保持一致性。

網(wǎng)站主頁是我們打開后第一眼看到的，也是最容易向用戶突出網(wǎng)站的價(jià)值等內(nèi)容的，那在主頁該放什么哪些內(nèi)容比較合適呢：

1、站點(diǎn)的標(biāo)識(shí)和使命：告訴我們這是什么網(wǎng)站，做什么的；

2、站點(diǎn)層次：提供服務(wù)概貌，包括內(nèi)容，功能，組織形式；

3、搜索；

4、導(dǎo)讀：主頁最好有“里面有精彩內(nèi)容”的暗示提醒；

5、內(nèi)容經(jīng)常更新；

6、友情鏈接；

7、快捷方式：最常訪問的內(nèi)容片斷；

8、登錄、注冊(cè)；

...

除了這些主要的，最好還要滿足這些：

1、讓我看到自己正在尋找的東西；

2、我也許感興趣的精彩內(nèi)容；

3、告訴我從哪里開始；

4、建立可信度和信任感。

比如打開淘寶首頁，你不僅可以看到以上羅列的內(nèi)容，淘寶通過算法，會(huì)自動(dòng)推薦你曾經(jīng)搜索過得商品，最上角的非常醒目的位置，logo動(dòng)效還會(huì)告訴你最近的活動(dòng)。

對(duì)于一個(gè)控件的選擇或者其他設(shè)計(jì)，很多團(tuán)隊(duì)經(jīng)常在無休止的討論，始終沒有決定，這樣的討論除了浪費(fèi)時(shí)間，也很容易造成緊張氣氛，破壞團(tuán)隊(duì)成員之間的關(guān)系，常常讓團(tuán)隊(duì)無法做出關(guān)鍵的決定.

我們每個(gè)人都是用戶，和所有的用戶一樣，對(duì)網(wǎng)站上喜歡什么，不喜歡什么有著強(qiáng)烈的感覺。

我們往往認(rèn)為我們自己喜歡的，絕大多數(shù)用戶也都喜歡。這應(yīng)該是人的一種天性。

同時(shí)，在團(tuán)隊(duì)中，由于職位不同，不同崗位的人對(duì)網(wǎng)站設(shè)計(jì)也有不同的看法。

比如設(shè)計(jì)師喜歡視覺上比較好看的網(wǎng)站，而開發(fā)卻喜歡構(gòu)建新穎，有趣，功能出色的網(wǎng)站。所以不同的角色，不同的視角，常常造成不同的看法，繼而不停的討論，讓會(huì)議陷入僵局，當(dāng)然每個(gè)人的想法并不是一層不變的，只要有足夠的證據(jù)能打動(dòng)他，他的想法完全可以反過來。

一旦因個(gè)人和職位不同而造成的沖突不分勝負(fù)時(shí)，討論常常會(huì)轉(zhuǎn)化為尋找某種方式（專家的意見、焦點(diǎn)小組或者用戶測試）來決定絕大部分用戶喜歡或不喜歡什么，但是，找出所謂的普通用戶，就是錯(cuò)誤的想法，因?yàn)?，本來就沒有什么普通用戶，所有的web用戶都是的。

越是仔細(xì)觀察用戶，認(rèn)真傾聽他們表達(dá)自己的想法，越能意識(shí)到他們對(duì)網(wǎng)頁的個(gè)人反應(yīng)和很多不同的變量有關(guān)系。所以，試圖用一些簡單的喜好來形容用戶，既瑣碎又沒有什么作用，另一方面，好的設(shè)計(jì)會(huì)把這種復(fù)雜性考慮進(jìn)去。

關(guān)于普通用戶的這個(gè)說法，最糟糕的是加強(qiáng)了這種看法，認(rèn)為好的web設(shè)計(jì)主要是找出人們的喜好，這種想法看上去不錯(cuò)。比如面包屑導(dǎo)航好，要么不好，彈出框好，要么不好，非黑即白。

問題是，對(duì)于大部分web設(shè)計(jì)問題來說，沒有簡單的“正確”答案，好的設(shè)計(jì)能滿足需要，也就是說，經(jīng)過仔細(xì)考慮，實(shí)現(xiàn)和測試的設(shè)計(jì)就是好的。

例如，對(duì)于Flash的使用，如果詢問用戶，有些用戶會(huì)說他們很喜歡Flash，而另外差不多同樣數(shù)量的用戶會(huì)說他們討厭Flash。實(shí)際上，他們不喜歡的是使用不當(dāng)?shù)腇lash，大而復(fù)雜的動(dòng)畫，需要很長時(shí)間下載，沒有帶來任何價(jià)值。如果仔細(xì)觀察他們，很可能發(fā)現(xiàn)同樣是這些人，喜歡那些使用精心設(shè)計(jì)，適當(dāng)并小規(guī)模使用Flash的網(wǎng)站，增加一些簡約的修飾，或者有用的功能，同時(shí)又不帶來麻煩。

并不是說不存在完全錯(cuò)誤的方法，有些設(shè)計(jì)網(wǎng)頁的方法確實(shí)是完全錯(cuò)誤的，只是他們往往并不是設(shè)計(jì)團(tuán)隊(duì)通常爭論的那些方法。

解決這種問題的關(guān)鍵方法就是，不要再問這樣的問題“大部分人喜歡這樣的導(dǎo)航嗎”，正確的問題應(yīng)該是“在這個(gè)頁面，這種導(dǎo)航會(huì)讓可能使用這個(gè)網(wǎng)站的大部分人產(chǎn)生一種良好的體驗(yàn)嗎？”，然后觀察人們對(duì)它的看法和使用的方法，再不斷調(diào)整。

爭辯人們喜歡什么既浪費(fèi)時(shí)間又消耗團(tuán)隊(duì)的經(jīng)歷，而通過測試將討論對(duì)錯(cuò)轉(zhuǎn)移到什么有效，什么無效上，更容易緩和爭論，打破僵局，而且測試會(huì)讓我們看到用戶的動(dòng)機(jī)，理解，反應(yīng)的不同，從而讓我們不再堅(jiān)持認(rèn)為用戶的想法和我們的想法一樣。

在做測試時(shí)，往往很多人不清楚什么是焦點(diǎn)小組訪談和可用性測試的的區(qū)別，那就先科普一下。

焦點(diǎn)小組訪談，百度百科的解釋是這樣的：就是采用小型座談會(huì)的形式，由一個(gè)經(jīng)過訓(xùn)練的主持人以一種無結(jié)構(gòu)、自然的形式與一個(gè)小組的具有代表性的消費(fèi)者或客戶交談。從而獲得對(duì)有關(guān)問題的深入了解。

簡單來說就是一個(gè)小組圍坐在桌子周圍，主持人拋出問題，針對(duì)這一問題，被訪談人說出自己的想法，從而快速得到用戶的意見和反應(yīng)。

焦點(diǎn)小組可以抽象的確定你的目標(biāo)用戶想要什么，需要什么，喜歡什么。也可以測試出網(wǎng)站的理念是否有意義，價(jià)值主張是否吸引人等等。

但焦點(diǎn)小組只是適合用于網(wǎng)站設(shè)計(jì)前就應(yīng)該進(jìn)行的，是一個(gè)早期階段方法。

比如電視劇《我的前半生》中，段曉天因得不到主角羅子君而為難她的那個(gè)片段，就是一次焦點(diǎn)小組訪談。

可用性測試的百度百科解釋是這樣的：讓一群具有代表性的用戶對(duì)產(chǎn)品進(jìn)行典型操作，同時(shí)觀察員和開發(fā)人員在一旁觀察，聆聽，做記錄。

該產(chǎn)品可能是一個(gè)網(wǎng)站，軟件，或者其他任何產(chǎn)品，它可能尚未成型。測試可以是早期的紙上原型測試，也可以是后期成品的測試。

簡單說就是向用戶展示一些內(nèi)容，不管是網(wǎng)站還是原型，或是草圖，并且要求用戶說出這是什么，并用他們來完成一項(xiàng)特定的任務(wù)。

如果想建立一個(gè)優(yōu)秀的網(wǎng)站，一定要測試。為一個(gè)網(wǎng)站工作幾個(gè)星期會(huì)讓你失去新鮮感，因?yàn)槟銓?duì)網(wǎng)站了解的太多，很多細(xì)節(jié)都知道，所以清楚網(wǎng)站是否正常運(yùn)作的唯一方法就是測試。

測試會(huì)提醒你，不是每個(gè)人的想法都和你一樣，會(huì)和你用同樣的方法使用網(wǎng)站。

要記住，測試一個(gè)用戶比不做測試好一百倍。測試總是會(huì)有效果，哪怕對(duì)錯(cuò)誤的用戶做一次糟糕的測試，也會(huì)讓你看到改善網(wǎng)站的一些方面。

在項(xiàng)目中，早做測試，哪怕一位用戶也好過最后測試50位用戶。

一旦一個(gè)網(wǎng)站投入使用，要改變就不是很容易了，有些用戶拒絕做出任何變化，所以在開始的時(shí)候，有助于防止你犯錯(cuò)誤的方法都很劃算。

測試的關(guān)鍵不是證明什么或者反駁什么，而是了解你的判斷力。對(duì)于用戶的招募也不要太嚴(yán)格，如果能夠讓用戶是更接近使用網(wǎng)站的用戶就更好了，但更重要的是，要盡早和經(jīng)常進(jìn)行測試，這是一個(gè)開發(fā)，測試，修復(fù)，再度測試的過程，沒有什么比現(xiàn)場用戶的反應(yīng)更重要了。

其實(shí)做可用性測試沒有想象的那么復(fù)雜，一個(gè)簡單的可用性測試完全可以把問題解決。

那么應(yīng)該測試多少用戶呢：

很多情況下，每輪測試用戶數(shù)量應(yīng)該是三個(gè)，最多四個(gè)。前三個(gè)用戶很可能會(huì)遇到幾乎所有最明顯的問題，更重要的是多做幾輪測試，只測試三名用戶有助于很快進(jìn)行下一輪測試。由于你會(huì)修正在第一輪測試提出的問題，因此在第二輪測試中，就會(huì)發(fā)現(xiàn)新的問題。這樣的話，能夠很快的對(duì)測試進(jìn)行總結(jié)，并能很快利用測試結(jié)果進(jìn)行修正。

很多人不知道該招募怎樣的測試人員，總是很糾結(jié)，其實(shí)沒那么難。

實(shí)際上，我們都是初學(xué)者。就算找一位專家，你也有可能發(fā)現(xiàn)他也在勉強(qiáng)應(yīng)付。

設(shè)計(jì)出的網(wǎng)站如果只有你的目標(biāo)用戶能使用，這通常不是一個(gè)好的方法，應(yīng)該既要滿足專家的要求也要滿足新手的要求。

例外：

如果你的網(wǎng)站幾乎由某一類用戶使用，那就只招募這一類用戶。

如果你的目標(biāo)用戶群體可以分成幾個(gè)明顯的陣營，而且這些陣營有著完全不同的興趣和需要，那么至少要從每個(gè)陣營里選擇用戶進(jìn)行一次測試。

同時(shí)避免對(duì)網(wǎng)站或網(wǎng)站背后的組織架構(gòu)進(jìn)行預(yù)先討論。

可以找任何人來引導(dǎo)測試，真正需要的工作只是鼓勵(lì)測試用戶去嘗試。同時(shí)還需要一個(gè)觀察人，對(duì)于觀察人選，建議如果能讓管理層參與就好了，他們的參加能極大鼓舞團(tuán)隊(duì)的士氣，這是他們第一次看到自己的網(wǎng)站被人使用，而且很多地方和他們想象的畫面并不一樣，這樣的話，團(tuán)隊(duì)也更容易向管理層拿到對(duì)測試的投資，可謂是一舉兩得。

測試什么，什么時(shí)候測試?

測試：顧名思義，就是讓測試用戶看到網(wǎng)站，然后看他們能否理解這個(gè)網(wǎng)站，包括目標(biāo)，價(jià)值主張，組織方法和運(yùn)行方式等。

可以對(duì)用戶進(jìn)行關(guān)鍵任務(wù)測試，讓用戶完成一些任務(wù)，然后觀察他們是怎么做的。

立刻回顧測試結(jié)果

在測試后的討論會(huì)議上，主要做以下兩件事：

給問題分類：

回顧大家看到的問題，決定哪些問題需要修正。

解決問題：

找出修正這些問題的方法。

這樣，從其他人的角度看你的作品，常常能為問題提供全新的解決方案，或者讓你用一種新的眼光看待原有的問題。

要記住，這是一個(gè)循環(huán)的過程，不能只做一兩次就停止了。

測試常見問題：

1、用戶不清楚概念：用戶看著網(wǎng)站，要么不清楚他們說的是什么，要么他們以為自己知道，但是理解有誤。

2、他們找不到自己要找的字眼：這通常意味著你組織的內(nèi)容分類不符合用戶的習(xí)慣或者分類符合他們的習(xí)慣，但沒有使用他們期望的名字。

3、內(nèi)容太多了：有時(shí)候，他們要找的內(nèi)容就在頁面上，但就是看不到，在這種情況下，你需要減少頁面上的整體干擾或者把他們需要看到的內(nèi)容設(shè)置的更加醒目，讓它們從可視層次結(jié)構(gòu)中更加突出。

在任何測試中，你都可能會(huì)遇到這樣的情況，用戶暫時(shí)出現(xiàn)錯(cuò)誤，然后在不需要任何幫助的情況下回到原來的軌道。

只要出現(xiàn)問題的人馬上發(fā)現(xiàn)自己偏離了原來的主體，盡量不需要幫助就能回到原來的方向，這種情況看起來沒有擾亂他們的活動(dòng)，就可以忽略這些。總的來說，如果用戶關(guān)于在哪里找到他們需要的內(nèi)容的第二次猜測總是對(duì)的，就可以了。

這樣的問題總會(huì)存在的，因?yàn)橛行┖熘帲偸菦]有簡單的解決方法，不管怎么做，都會(huì)有一半用戶在第一次猜測的時(shí)候出錯(cuò)，但每個(gè)人都會(huì)在第二次猜測之內(nèi)找到，這樣就好。

當(dāng)在測試時(shí)清楚看到人們沒有理解某些內(nèi)容時(shí)，大部分人的第一反應(yīng)是增加一些內(nèi)容，例如一些注釋或者指導(dǎo)說明。

這樣的方法不對(duì)，正確的解決方案往往是去除某個(gè)或一些讓人混淆的內(nèi)容，而不是增加另一些干擾。

而且不要太看重人們對(duì)新功能的需求，人們常常說“如果它能像某某”就好了，這樣的說法常常被看做是在要求新的功能，如果仔細(xì)詢問，常常會(huì)發(fā)現(xiàn)，他們已經(jīng)找到一個(gè)很好的網(wǎng)站，能做某某功能，就算你做了這個(gè)功能，他們也不會(huì)切換到你的網(wǎng)站，他們只是在告訴你他們的喜好而已。

當(dāng)大家看到第一個(gè)用戶試著勉強(qiáng)應(yīng)付的時(shí)候，問題和解決方法都很明顯的那種驚喜，就像是現(xiàn)成的收獲，你應(yīng)該馬上修正它們。

和任何好的設(shè)計(jì)一樣，成功的網(wǎng)頁需要巧妙的平衡，要記住，哪怕一個(gè)微小的變化都會(huì)帶來不小的影響，有時(shí)候，真正的挑戰(zhàn)不是修正你發(fā)現(xiàn)的問題，而是修正這些問題的同時(shí)不破壞已經(jīng)正常運(yùn)行的部分。

只要進(jìn)行改變，就要仔細(xì)思考它將會(huì)影響哪些其他內(nèi)容。特別是，當(dāng)你把某些部分調(diào)整的更為突出時(shí)，想想看是不是把其他內(nèi)容的重要性降低了。

降低網(wǎng)站好感度有幾種方式：

1、隱藏我想要的信息；

2、因?yàn)闆]有按照你們的方式行事而懲罰我；

3、向我詢問不必要的信息：大多數(shù)用戶都很介意個(gè)人信息，如果網(wǎng)站要求的信息超出當(dāng)前任務(wù)時(shí)，會(huì)讓用戶覺得很麻煩。

4、敷衍我，欺騙我：我們都會(huì)討厭虛偽的真誠，也討厭假意的關(guān)心，想想每次你聽到“您的電話對(duì)我們來說很重要”的時(shí)候是什么感覺吧！

5、給我設(shè)置障礙：不得不等待一個(gè)長長的flash介紹。

6、你的網(wǎng)站看上去不專業(yè)：網(wǎng)站看起來很凌亂，組織很混亂。

就算你有些地方做的不好，也還有可能再度提高我的好感，只要讓我相信你的所作所為是在為我著想。

提高好感的幾種方式：

1、知道人們?cè)谀愕木W(wǎng)站上想做什么，并讓他們?nèi)菀酌靼祝喊延脩糇钕胱龅膸准路旁谧蠲黠@的地方；

2、告訴我我想知道的。

3、盡量減少步驟，讓用戶以最快的途徑到達(dá)他們想去的地方。

4、知道我可能有哪些疑問，并且給予解答：可以做一個(gè)經(jīng)常更新的常見列表。

5、為我提供協(xié)助。

6、容易從錯(cuò)誤中恢復(fù)：當(dāng)潛在的錯(cuò)誤不可避免時(shí)，要提供一個(gè)快速且清晰的方法快速從錯(cuò)誤中恢復(fù)。

7、如果不確定，記得道歉：有時(shí)候會(huì)因?yàn)闀簳r(shí)沒有能力或資源做到用戶想要的，如果你做不到，至少讓他們明白你知道你在給他們?cè)斐刹槐恪?

開篇

之前對(duì)js中的原型鏈和原型對(duì)象有所了解，每當(dāng)別人問我什么是原型鏈和原型對(duì)象時(shí)，我總是用很官方（其實(shí)自己不懂）的解釋去描述。有一句話說的好：如果你不能把一個(gè)很復(fù)雜的東西用最簡單的話語描述出來，那就說明你沒有真正的理解。最近正在讀《Javascript高級(jí)程序設(shè)計(jì)》，書中對(duì)原型對(duì)象和原型鏈的描述讓我受益匪淺，下面僅用一個(gè)對(duì)比性的例子來說明。



我們經(jīng)常會(huì)這么寫

    function Person () {

        this.name = 'John';

    }

    var person = new Person();

    Person.prototype.say = function() {

        console.log('Hello,' + this.name);

    };

    person.say();//Hello,John

1

2

3

4

5

6

7

8

上述代碼非常簡單，Person原型對(duì)象定義了公共的say方法，雖然此舉在構(gòu)造實(shí)例之后出現(xiàn)，但因?yàn)樵头椒ㄔ谡{(diào)用之前已經(jīng)聲明，因此之后的每個(gè)實(shí)例將都擁有該方法。從這個(gè)簡單的例子里，我們可以得出：



原型對(duì)象的用途是為每個(gè)實(shí)例對(duì)象存儲(chǔ)共享的方法和屬性，它僅僅是一個(gè)普通對(duì)象而已。并且所有的實(shí)例是共享同一個(gè)原型對(duì)象，因此有別于實(shí)例方法或?qū)傩裕蛯?duì)象僅有一份。



所以就會(huì)有如下等式成立：



    person.say == new Person().say

1

可能我們也會(huì)這么寫

    function Person () {

        this.name = 'John';

    }

    var person = new Person();

    Person.prototype = {

        say: function() {

            console.log('Hello,' + this.name);

        }

    };

    person.say();//person.say is not a function

1

2

3

4

5

6

7

8

9

10

很不幸，person.say方法沒有找到，所以報(bào)錯(cuò)了。其實(shí)這樣寫的初衷是好的：因?yàn)槿绻朐谠蛯?duì)象上添加更多的屬性和方法，我們不得不每次都要寫一行Person.prototype,還不如提煉成一個(gè)Object來的直接。但是此例子巧就巧在構(gòu)造實(shí)例對(duì)象操作是在添加原型方法之前，這樣就會(huì)造成一個(gè)問題： 

當(dāng)var person = new Person()時(shí)，Person.prototype為：Person {} (當(dāng)然了，內(nèi)部還有constructor屬性),即Person.prototype指向一個(gè)空的對(duì)象{}。而對(duì)于實(shí)例person而言，其內(nèi)部有一個(gè)原型鏈指針proto,該指針指向了Person.prototype指向的對(duì)象，即{}。接下來重置了Person的原型對(duì)象，使其指向了另外一個(gè)對(duì)象,即



 Object {say: function}

1

這時(shí)person.proto的指向還是沒有變，它指向的{}對(duì)象里面是沒有say方法的，因?yàn)榇藞?bào)錯(cuò)。



從這個(gè)現(xiàn)象我們可以得出：



在js中，對(duì)象在調(diào)用一個(gè)方法時(shí)會(huì)首先在自身里尋找是否有該方法，若沒有，則去原型鏈上去尋找，依次層層遞進(jìn)，這里的原型鏈就是實(shí)例對(duì)象的proto屬性。



若想讓上述例子成功運(yùn)行，最簡單有效的方法就是交換構(gòu)造對(duì)象和重置原型對(duì)象的順序，即：



    function Person () {

        this.name = 'John';

    }

    Person.prototype = {

        say: function() {

            console.log('Hello,' + this.name);

        }

    };

    var person = new Person();

    person.say();//person.say is not a function

1

2

3

4

5

6

7

8

9

10

一張圖讓你秒懂原型鏈

 



其實(shí)，只需要明白原型對(duì)象的結(jié)構(gòu)即可：



    Function.prototype = {

        constructor : Function,

        proto : parent prototype,

        some prototype properties: ...

    };

1

2

3

4

5

總結(jié)：

函數(shù)的原型對(duì)象constructor默認(rèn)指向函數(shù)本身，原型對(duì)象除了有原型屬性外，為了實(shí)現(xiàn)繼承，還有一個(gè)原型鏈指針proto，該指針指向上一層的原型對(duì)象，而上一層的原型對(duì)象的結(jié)構(gòu)依然類似，這樣利用proto一直指向Object的原型對(duì)象上，而Object的原型對(duì)象用Object.prototype.proto = null表示原型鏈的最頂端，如此變形成了javascript的原型鏈繼承，同時(shí)也解釋了為什么所有的javascript對(duì)象都具有Object的基本方法。



Blog同步

JavaScript 隊(duì)列

題目：

在計(jì)算機(jī)科學(xué)中 隊(duì)列（queue）是一個(gè)抽象的數(shù)據(jù)結(jié)構(gòu)，隊(duì)列中的數(shù)據(jù)條目都是有秩序的。新的條目會(huì)被加到 隊(duì)列 的末尾，舊的條目會(huì)從 隊(duì)列 的頭部被移出。



寫一個(gè)函數(shù) queue ，用一個(gè)數(shù)組arr和一個(gè)數(shù)字item作為參數(shù)。數(shù)字item添加到數(shù)組的結(jié)尾，然后移出數(shù)組的第一個(gè)元素，最后隊(duì)列函數(shù)應(yīng)該返回被刪除的元素。

queue([], 1) 應(yīng)該返回 1

queue([2], 1) 應(yīng)該返回 2

queue([5,6,7,8,9], 1) 應(yīng)該返回 5

在 queue(testArr, 10) 之后, testArr[4] 的值應(yīng)該是 10



通關(guān)答案：



function queue(arr, item) {

/下面這兩句是關(guān)鍵/

    arr.push(item);

    return arr.shift();// Change this line

}



console.log(queue([], 1));

console.log(queue([2], 1));

console.log(queue([5,6,7,8,9], 1));

// Test Setup

var testArr = [1,2,3,4,5];



// Display Code

console.log("Before: " + JSON.stringify(testArr));

console.log(queue(testArr, 10)); // Modify this line to test

console.log("After: " + JSON.stringify(testArr));



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

轉(zhuǎn)發(fā)和重定向區(qū)別詳解

        作為一名程序員，特別是java web開發(fā)的程序員，在使用servlet/jsp的時(shí)候，我們必須要知道實(shí)現(xiàn)頁面跳轉(zhuǎn)的兩種方式的區(qū)別和聯(lián)系：即轉(zhuǎn)發(fā)和重定向的區(qū)別。



      1、RequestDispatcher.forward方法只能將請(qǐng)求轉(zhuǎn)發(fā)給同一個(gè)WEB應(yīng)用中的組件；而HttpServletResponse.sendRedirect 方法不僅可以重定向到當(dāng)前應(yīng)用程序中的其他資源，還可以重定向到同一個(gè)站點(diǎn)上的其他應(yīng)用程序中的資源，甚至是使用絕對(duì)URL重定向到其他站點(diǎn)的資源。如果傳遞給HttpServletResponse.sendRedirect 方法的相對(duì)URL以“/”開頭，它是相對(duì)于整個(gè)WEB站點(diǎn)的根目錄；如果創(chuàng)建RequestDispatcher對(duì)象時(shí)指定的相對(duì)URL以“/”開頭，它是相對(duì)于當(dāng)前WEB應(yīng)用程序的根目錄。、



      2、調(diào)用HttpServletResponse.sendRedirect方法重定向的訪問過程結(jié)束后，瀏覽器地址欄中顯示的URL會(huì)發(fā)生改變，由初始的URL地址變成重定向的目標(biāo)URL；而調(diào)用RequestDispatcher.forward 方法的請(qǐng)求轉(zhuǎn)發(fā)過程結(jié)束后，瀏覽器地址欄保持初始的URL地址不變。



      3、HttpServletResponse.sendRedirect方法對(duì)瀏覽器的請(qǐng)求直接作出響應(yīng)，響應(yīng)的結(jié)果就是告訴瀏覽器去重新發(fā)出對(duì)另外一個(gè)URL的 訪問請(qǐng)求，這個(gè)過程好比有個(gè)綽號(hào)叫“瀏覽器”的人寫信找張三借錢，張三回信說沒有錢，讓“瀏覽器”去找李四借，并將李四現(xiàn)在的通信地址告訴給了“瀏覽器”。于是，“瀏覽器”又按張三提供通信地址給李四寫信借錢，李四收到信后就把錢匯給了“瀏覽器”?？梢姡盀g覽器”一共發(fā)出了兩封信和收到了兩次回復(fù)， “瀏覽器”也知道他借到的錢出自李四之手。RequestDispatcher.forward方法在服務(wù)器端內(nèi)部將請(qǐng)求轉(zhuǎn)發(fā)給另外一個(gè)資源，瀏覽器只知道發(fā)出了請(qǐng)求并得到了響應(yīng)結(jié)果，并不知道在服務(wù)器程序內(nèi)部發(fā)生了轉(zhuǎn)發(fā)行為。這個(gè)過程好比綽號(hào)叫“瀏覽器”的人寫信找張三借錢，張三沒有錢，于是張三找李四借了一些錢，甚至還可以加上自己的一些錢，然后再將這些錢匯給了“瀏覽器”?？梢姡盀g覽器”只發(fā) 出了一封信和收到了一次回復(fù)，他只知道從張三那里借到了錢，并不知道有一部分錢出自李四之手。



       4、RequestDispatcher.forward方法的調(diào)用者與被調(diào)用者之間共享相同的request對(duì)象和response對(duì)象，它們屬于同一個(gè)訪問請(qǐng)求和響應(yīng)過程；而HttpServletResponse.sendRedirect方法調(diào)用者與被調(diào)用者使用各自的request對(duì)象和response對(duì)象，它們屬于兩個(gè)獨(dú)立的訪問請(qǐng)求和響應(yīng)過程。對(duì)于同一個(gè)WEB應(yīng)用程序的內(nèi)部資源之間的跳轉(zhuǎn)，特別是跳轉(zhuǎn)之前要對(duì)請(qǐng)求進(jìn)行一些前期預(yù)處理，并要使用HttpServletRequest.setAttribute方法傳遞預(yù)處理結(jié)果，那就應(yīng)該使用RequestDispatcher.forward方法。不同WEB應(yīng)用程序之間的重定向，特別是要重定向到另外一個(gè)WEB站點(diǎn)上的資源的情況，都應(yīng)該使用HttpServletResponse.sendRedirect方法。



        5、無論是RequestDispatcher.forward方法，還是HttpServletResponse.sendRedirect方法，在調(diào)用它們之前，都不能有內(nèi)容已經(jīng)被實(shí)際輸出到了客戶端。如果緩沖區(qū)中已經(jīng)有了一些內(nèi)容，這些內(nèi)容將被從緩沖區(qū)中。



以上五點(diǎn)的論述來源于：點(diǎn)擊查看原文論述



轉(zhuǎn)發(fā)和重定向的圖解





兩種跳轉(zhuǎn)獲得對(duì)象的方式

//獲得轉(zhuǎn)發(fā)對(duì)象getRequestDispatcher()

HttpServletRequest(httpServletRequest).getRequestDispatcher

ServletContext.getRequestDispatcher();

 

//獲得重定向?qū)ο髎endRedirect()

HttpServletResponse(httpServletResponse).sendRedirect();

轉(zhuǎn)發(fā)和跳轉(zhuǎn)的小結(jié)

      1、轉(zhuǎn)發(fā)使用的是getRequestDispatcher()方法;重定向使用的是sendRedirect();



      2、轉(zhuǎn)發(fā)：瀏覽器URL的地址欄不變。重定向：瀏覽器URL的地址欄改變；



      3、轉(zhuǎn)發(fā)是服務(wù)器行為，重定向是客戶端行為；



      4、轉(zhuǎn)發(fā)是瀏覽器只做了一次訪問請(qǐng)求。重定向是瀏覽器做了至少兩次的訪問請(qǐng)求；



      5、轉(zhuǎn)發(fā)2次跳轉(zhuǎn)之間傳輸?shù)男畔⒉粫?huì)丟失，重定向2次跳轉(zhuǎn)之間傳輸?shù)男畔?huì)丟失（request范圍）。



轉(zhuǎn)發(fā)和重定向的選擇

      1、重定向的速度比轉(zhuǎn)發(fā)慢，因?yàn)闉g覽器還得發(fā)出一個(gè)新的請(qǐng)求，如果在使用轉(zhuǎn)發(fā)和重定向都無所謂的時(shí)候建議使用轉(zhuǎn)發(fā)。



      2、因?yàn)檗D(zhuǎn)發(fā)只能訪問當(dāng)前WEB的應(yīng)用程序，所以不同WEB應(yīng)用程序之間的訪問，特別是要訪問到另外一個(gè)WEB站點(diǎn)上的資源的情況，這個(gè)時(shí)候就只能使用重定向了。



轉(zhuǎn)發(fā)和重定向的應(yīng)用場景

       在上面我已經(jīng)提到了，轉(zhuǎn)發(fā)是要比重定向快，因?yàn)橹囟ㄏ蛐枰?jīng)過客戶端，而轉(zhuǎn)發(fā)沒有。有時(shí)候，采用重定向會(huì)更好，若需要重定向到另外一個(gè)外部網(wǎng)站，則無法使用轉(zhuǎn)發(fā)。另外，重定向還有一個(gè)應(yīng)用場景：避免在用戶重新加載頁面時(shí)兩次調(diào)用相同的動(dòng)作。



       例如，當(dāng)提交產(chǎn)品表單的時(shí)候，執(zhí)行保存的方法將會(huì)被調(diào)用，并執(zhí)行相應(yīng)的動(dòng)作；這在一個(gè)真實(shí)的應(yīng)用程序中，很有可能將表單中的所有產(chǎn)品信息加入到數(shù)據(jù)庫中。但是如果在提交表單后，重新加載頁面，執(zhí)行保存的方法就很有可能再次被調(diào)用。同樣的產(chǎn)品信息就將可能再次被添加，為了避免這種情況，提交表單后，你可以將用戶重定向到一個(gè)不同的頁面，這樣的話，這個(gè)網(wǎng)頁任意重新加載都沒有副作用；



       但是，使用重定向不太方便的地方是，使用它無法將值輕松地傳遞給目標(biāo)頁面。而采用轉(zhuǎn)發(fā)，則可以簡單地將屬性添加到Model,使得目標(biāo)視圖可以輕松訪問。由于重定向經(jīng)過客戶端，所以Model中的一切都會(huì)在重定向時(shí)丟失。但幸運(yùn)的是，在Spring3.1版本以后，我們可以通過Flash屬性，解決重定向時(shí)傳值丟失的問題。



       要使用Flash屬性，必須在Spring MVC的配置文件中添加一個(gè)<annotation-driven/>。然后，還必須再方法上添加一個(gè)新的參數(shù)類型：org.springframework.web.servlet.mvc.support.RedirectAttributes。



       如下所示：



@RequestMapping(value="saveProduct",method=RequestMethod.POST)

public String saveProduct(ProductForm productForm,RedirectAttributes redirectAttributes){

 

     //執(zhí)行產(chǎn)品保存的業(yè)務(wù)邏輯等

  

     //傳遞參數(shù)

       redirectAttributes.addFlashAttribute("message","The product is saved successfully");

   

     //執(zhí)行重定向

      return "redirect:/……";



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。