Ajax改造:使用Ajax和jQuery改进现有站点（一）(2)

以下小结帮助您了解 Customize Me Now 1.0 — 它的用户体验和源代码。

用户体验

图 1 展示了 Customize Me Now Results 页面和一个信息弹出窗口。它演示了站点能够向用户提供的与他们定制的产品有关的信息。尽管最佳的用户路径是从搜索和结果到定制和购买的直线路径，但该界面却提供了一些迂回的路径。站点使用传统的弹出窗口显示每个产品和产品选项的一小段上下文信息。单击 Pizza，您将会看到关于站点的批萨产品的信息。单击 Cheese，您将会看到关于您的批萨可用的奶酪的信息。此外，用户可以导航到厂商的 Web 站点 — 同样通过弹出窗口呈现。

图 1. Results 页面 1.0

如果用户想要获得更多信息，站点就会提供一个 Product Details 页面，其中包括每个产品的更详细信息 —— 图片、文章、用户评论等等。最后，如果用户想要将一个产品与其他产品进行比较，他可以在 Comparison 页上逐个查看这些产品。在这些资源中进行导航非常复杂。由于用户需要定制每个产品，很难在每步操作中都提供一个 Add to cart 链接。站点鼓励用户定制、然后添加到购物车中。但是也允许用户跳过这些步骤，使用一组默认选项添加到购物车，在稍后进行定制。

图 2 展示了 Customize Me Now 1.0 的站点地图。它显示了用户的路径非常复杂。大多数屏幕都链接到至少 2 或 3 个其他屏幕。

图 2. Customize Me Now 1.0 站点地图

代码

Customize Me Now 的功能演示代码只提供了客户端部分：HTML CSS、JavaScript 代码和图像文件。在实际中，您显然还需要一个大型的服务器端组件：Microsoft® ASP.NET、Java 技术、Ruby on Rails、Django 或 PHP。但是 jQuery 的美妙之处在于，它纯粹关于客户端。您可以使用 Ajax 简化您的用户体验，无需服务器端组件。我没有提供任何服务器端代码，因为这些细节对于这个项目无关紧要。您只需知道当您打开一个 HTML 文件时，就会有一个 PHP 模板、一个 JavaServer Pages™ (JSP) 文件或任何其他将 HTML 发送到服务器的文件。

下载了 1.0 版应用程序的源代码之后，请看一下其中一个页面的标记。它应该与清单 1 类似。

清单 1. results.html 1.0 的 HTML 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Customize Me Now: Search Results</title>
<link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/>
</head>

<body id="CMN">



<div id="main">
   <form method="GET" action="comparison.html">
     <h1>Search Results</h1>
     <div class="buttons">
       <input class="button" type="submit" name="submitTop" id="submitTop"
         value="Compare Selected Products" />
       or <a href="index.html">search again</a>
     </div>
     <table class="searchResults">
       <thead>
         <tr>
           <th>Product</th>
           <th>Description</th>
           <th>Options</th>
           <th>Compare</th>
           <th>Actions</th>
         </tr>
       </thead>
       <tr>
         <td class="name">
           <a target="productPopup"
           href="productPopup.html?product=A">Pizza</a>
         </td>
         <td class="desc">
           A delicious Italian treat.<br />
           [<a href="detail.html?product=A">full product details</a>]
         </td>
         <td class="options">
           <ul>
             <li>
               <a target="optionsPopup"
               href="optionsPopup.html?product=A">crust</a>
             </li>
             <li>
               <a target="optionsPopup"
               href="optionsPopup.html?product=A">cheese</a>
             </li>
             <li>
               <a target="optionsPopup"
               href="optionsPopup.html?product=A">toppings</a>
             </li>
           </ul>
         </td>
         <td class="action">
           <input type="checkbox" target="productPopup" name="compareA"
           id="compareA" value="true" checked="checked"/>
         </td>
         <td class="action">
           <a class="button" href="customize.html?product=A">customize
           product</a>
           <a class="button" href="cart.html?product=A">add to cart with
           default options</a>
         </td>
       </tr>

       

     </table>
     <div>
     <div class="buttons">
       <input class="button" type="submit" name="submitBottom" id="submitBottom"
       value="Compare Selected Products" />
       or <a href="index.html">search again</a>
     </div>
   </form>
</div>



</body>
</html>

共3页:

标签: 改进现有改造站点用户使用

首页

Ajax改造:使用Ajax和jQuery改进现有站点（一）(2)

猜您也喜欢...

热门TagS