阿里巴巴（中文站）用户体验设计部博客 http://www.aliued.cn 阿里巴巴中文站用户体验设计部，用户体验，追求卓越 Tue, 20 Jul 2010 11:37:47 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 亚马逊用户体验改善 http://www.aliued.cn/?p=2690 http://www.aliued.cn/?p=2690#comments Tue, 20 Jul 2010 11:31:42 +0000 zongbo.yuzb http://www.aliued.cn/?p=2690 本文被发表于《商界评论》2010年7月号 P98

亚马逊的成功是强大用户购物体验的直接结果，今天无论是在理念还是在实践上，都堪称电子商务开发者的学习标杆。

01

 

随着电子商务热潮的持续升温，现在电子商务网站的设计，正面临着一系列的挑战，其中最主要的挑战就是如何建立一种用户体验，来提高用户在线购物的可能性。

为了对抗网上激烈的竞争，消除网上多疑购物者的顾虑，设计人员可以采取一些措施来改善他们网上商城的可用性。自1995年以来，亚马逊已经成为在电子商务B2C领域里公认的世界领导者。它的成功并非偶然，也不仅仅是在一个正确的地方与一个正确的时间的结果。

亚马逊的成功是强大用户购物体验的直接结果，今天无论是在理念还是实践上，都为许多的电子商务开发者提供了值得仿效的参考。

双重目标明确

产品搜索和在线采购

当您浏览一般的电子商务网页时，常常会面对一片凌乱的布局，让你不知所措。而亚马逊则通过为数不多的简洁区块，或者独特的元素立即就能捕捉用户的眼睛：在导航搜索的左上角和靠近顶端的搜索/购物车控制器，这使得亚马逊的简单的双重目的得以实现：

即用户可以快速查找和购买产品；其次，卖方能够快速处理网上订单并获得利润。

亚马逊的设计师和架构师团队必须确保在网站的结构中，这两个元素是足够的突出和可用的。设计师、客户、项目经理和参与建设电子商务网站的开发人员，从一开始的用户体验（无论是第一次用户或回头客）都会遵循明确强调产品搜索和在线购买。

内容适合当前用户

一旦建立了网站的产品搜索与网上购物等功能，用户最有可能想利用这些特性的优势马上开始搜索。亚马逊使用Cookies来记录用户登录情况，并对用户的购物习惯进行跟踪并存储到服务器端。这是一个很好的提高，因为它能动态地定制用户体验：以事先进行搜索、网页浏览、愿望清单添加、评价填写为基础，并达到最终购买目的。

相关产品显示

一个定制内容的例子展现在主页上，被修改的推荐内容取决于用户如何与产品搜索功能相互作用。

基于先前行为的推荐产品

只要浏览器的Cookies保持不变，这种定制相同类型的内容就会在随后的访问中一连串地出现：

正如亚马逊这样，一个好的电子商务网站将跟踪客户端行为（在服务器端），以确保每个用户每次访问都能越来越适合他们的口味和习惯。这就将增加用户进行购买的可能性，在某些情况下，还能加快采购进程。更重要的是，它可以将更广泛的产品和配合他们感兴趣领域的服务公开给用户。

各种“为什么我们购物”的提示

亚马逊购物体验充斥着为何用户应该从亚马逊购买的提醒，而不是充斥着从其他来源（在线或其他方式）的提醒。

与市场零售价对比

页面上面显示的每个产品除了有亚马逊提供的优惠价格，还有MRSP（制造商建议零售价）。这个简单的功能是由于文案的撞击即时地被用户理解了。对用户来说，“这就是为什么你应该从我们这里购买此产品”，这是一个简单但强大的销售诱因，毫无疑问它提高了亚马逊的收入。

用户早先被通知“免费送货”

另一个“为什么我们从这里购物”更好的例子，就是在页面上显示提醒的图片。当用户增加了一些产品到他们的购物车时，独特的黄色的大横幅在屏幕上方出现，并告诉用户：你现在有资格取得免费的送货服务。

这些横幅还包括其他可能应用的限制规定的链接。从逻辑上讲，“免费送货通知”应该是在“货运选项”里，但现在在用户将商品放进购物篮后即显示，这也在提醒用户之后可以买更多货品而不用考虑运费了，这样的心理暗示将大大促进商品的销售。

逼真的图书预览

购物者可能会放弃在网上购买机会的一个原因是，他们无法评估产品质量。但是，一个近距离预览的产品，将有助于消除一些，虽然不是全部疑虑。

“查找内部”功能

书是在亚马逊最常被购买的产品之一，所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查找内部”内容的功能。“查找内部”的功能可以让购物者观看到书籍的某些部分：通常的封面、目录、首页、索引和封底。这会非常有用，因为消费者能够一目了然，通过一个内容表或目录就知道一本书是否适合他们。

“内搜索”功能

“查找内部”功能的预览菜单上还有一个小盒子标有“书内搜索”，它可以让用户搜索整本书，而不仅仅是部分章节预览。当用户从“查找内部”的菜单选择一项时，一个灯箱弹出，让用户预览的产品几乎是和你持有手中的书一样好。

“内搜索”的功能，可以从书中的任何页面返回结果，但如果页面不能被预览就会通知用户不可用。现在的搜索引擎很智能，甚至能直观地判别单词的单复数，这是搜索的最佳实践。虽然这个功能好像是一个婴儿车般简单，但当你需要对一本书研究的时候，它仍然是一个很好的选择。

可定制的历史和推荐

在“今天为你推荐”的下面，亚马逊针对购物者个人网页上列出的产品清单可以进行编辑。点击“修改这一建议”链接，将显示一个窗口，正好说明为什么推荐这个产品，并提供购物者去选择改变它的机会。通常一个被推荐的产品是以记录事先购买行为并跟踪购物习惯为基础的。在这里购物者可以告诉亚马逊不要推荐以某些因素为基础的产品。另一个可定制的功能则是购物者已经浏览的所有产品历史记录，这个选项会出现在该用户的个人页面的顶部。

产品的显示顺序是从你最近一次访问过的产品开始，而且每个项目都有一个“删除此产品”选项，类似于在购物车页面查找商品。当一个产品被删除，页面将重新加载并更新清单。在同一页的右侧栏，用户还会看到一个列表是他们最近浏览的搜索条件和类别。

这些定制或编辑功能，能够确保购物体验不会给用户带来繁重的负担。如果用户收到的推荐并不满意，他们可以修改它们，以改善今后的访问。电子商务开发人员可以按照这个例子，允许任何动态个性化用户尽可能地为其定制内容。这可以确保用户不会感觉好像内容正在通过广告或促销奖励强迫他们购买。

让用户感觉舒适

简单轻松的导航条

任何网上商店的成功，至关重要的一点，就是用户可以简单轻松地使用导航条，包括基本店铺分类、用户页面、购物车页面、采购页面等。像这样的任何购物体验点都可以轻松方便地被访问，在这方面亚马逊做了很好的工作，例如下方截图所示编号的部分。

对“商店所有分类”按钮悬停（＃1）触发一个下拉菜单，显示了所有主要产品类别，让消费者轻松访问其他产品。导航元素的位置，恰恰是用户期望它被放在屏幕左上角LOGO下面的位置。

在LOGO的旁边（＃2）有少数几个同样重要的链接，如登出的，个性化的推荐和用户的亚马逊个人页面。这一部分并不是非常突出，但出现的地方却是在顶部或上面与LOGO视觉平行的位置。

下一个元素（＃3）部分有“购物车”和“愿望清单”。购物车功能的位置几乎没有什么变化,总是位于电子商务网站布局的右上角。

每当用户浏览产品页面时，邀请他们加入自己的产品购物车或希望清单（＃4）。恰好这个位置是在亚马逊产品及产品细节的右边，用户可以很自然地找到此功能。

最后，亚马逊邀请用户在亚马逊市场查看同一产品的“二手和新品”版本（＃5）。在其集市上销售的产品显然在短期内不能增加亚马逊的收入，但它可能获得长期的回报，因为知道此选项，可让许多购物者选择亚马逊作为其主要目标，甚至二手商品也是如此。

亚马逊这样做是因为它很清楚地认识到：把用户的利益放在首位将对长远大有裨益。你还会注意到的这样的一个元素是其他五个中最为突出的一个，它具有艳丽的色彩，梯度和微妙的三维效果。这当然不是巧合：亚马逊希望在重要的地方引起用户的注意。

易于筛选和用户评价比较

上面的截图比较两种对立的客户评级和评论（所示两边“VS”图形）。用户还可以按等级过滤客户评论。通过获得有好有坏透彻的客户评论，使他们更加安心购买，并帮助他们做出明智的决定。用户不是迫于压力才购买商品的，而是认为购买产品的决策权是否完全掌握在自己手中。

额外的购物车选项

如上所述，在购物车页面包括一些选项，可以让用户感到舒适。首先，如果对于一次特定购买行为用户改变了主意，他们有权选择从购物车里删除它们。

但亚马逊希望删除（Delete）是最后一个选择，所以他们选择用先保存下来以后处理（Saving it for later）替代了去执行删除（Delete）。你可以称之为“软删除”：它会从购物车的产品中移出，但会保存在用户购物车页面上的物品清单里，在任何时候用户都可以很容易地再添加回购物车中。

在运送页面更改或删除产品

在随后的购买步骤中，用户可以继续控制。当选择物流选项时，用户将看到该页面，这可能意味着他们已经承诺或接近承诺，购买该产品了。

当选择的送货方式时，提供用户一个相当突出的按钮去“更改数量或删除”。鉴于以上的运送方式，用户很可能需要这些选项，因此，现在该按钮可以让用户得到帮助并使他放心使用。

提醒用户“继续”并不意味着“最终决定”

在用户往购物车添加了产品，并选择了送货方式后，他们回顾了下他们的订单概要，并点击“继续”按钮继续他们的购物。该按钮不是让他们确认订单，也不是他们实际购买的最后一个页面。

为了确保用户知道这不是“最后”一步，放在下方的“继续”按钮是一个有益的提醒，提醒他们把最终的订单放在最后汇总页面确认。

一切围绕购物体验

通过学习亚马逊移情用户体验的例子，电子商务开发人员可以理解用户各项关注和忧虑，包括一个用户每个阶段可能的购物体验。

总结亚马逊的页面设置，我们可以发现其工程师始终是围绕着用户的购物体验在动脑筋，而使用户感到舒适和可控是一切设计的核心。

1）一个电子商务网站的焦点，应是产品搜索和在线购买；

2）只要有可能，应该为每个用户提供个性化内容；

3）给予“为什么我们购物”的提醒创建销售奖励；

4）让用户尽可能多地接触到产品；

5）不要让用户感到有些产品或服务正在强迫他们购买；

6）在适当的时候可轻松地访问重要部分；

7）在任何时候让顾客感到舒服和可控。

新浪财经频道转载地址：http://finance.sina.com.cn/leadership/mroll/20100716/15008309075.shtml

商界财视网发布地址：http://media.caistv.com/html/2010-07-15/266636.shtml

原文地址：http://www.alitedesign.com/archives/86

]]> http://www.aliued.cn/?feed=rss2&p=2690 3 电子商务搜索LIST页面用户体验设计 http://www.aliued.cn/?p=2655 http://www.aliued.cn/?p=2655#comments Sat, 15 May 2010 03:35:46 +0000 zongbo.yuzb http://www.aliued.cn/?p=2655 [版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.alitedesign.com/

改版背景

创建专业的电子商务垂直搜索，以及把原有的信息聚合平台转型为在线采购批发交易平台。根据行业特点及交易需要，对原有的零批(小额批发)搜索进行改版，改造为适合行业搜索交易频道，便是这次改版的设计目标。我们搜索产品线的产品经理与用户体验设计师们进行了长达半年的准备工作。 项目组成员将对现有的功能需求，信息架构，视觉色彩，用户体验等，做多视角、多纬度的分析。力求在1688.com上线后，推出另一个电子商务垂直搜索用户体验盛宴。

功能需求取舍

 

在项目中，我们从市场运营那里采集了大量需求，那怎么把这些需求归类整理，挑选出我们目标用户迫切需要的功能点呢？总体来说：以娱乐的心态取舍功能需求，只给最需要的不给最强悍的。

来自运营的需求，来自用户的需求，往往多种多样，可以用千奇百怪来形容，那么如何配合产品规划师、产品经理找到用户最迫切的需求呢？

 

头脑风暴可以让产品设计团队成员产生很多创意。当收集到大量需求时，其中可能有主要需求与次要需求，客观判断哪些是首先要完成的，哪些是可以放到2期来做的，并制定标准需求优先级与对应时间节点，这样可以保证项目按期完成。

最让人头疼的往往是取舍功能需求，我们应该以什么标准，什么心态来应对呢？最好通过创建一个纸上原型或观察用户的操作，来制定取舍标准，并确保标准里涵盖以下基础点：

  • 用户档案-描述用户的具体特点。特别注意用户在使用网站时的任何问题，如物理限制。（抛弃与用户的特点不匹配的需求）
  • 文本环境分析-研究用户的日常任务、工作流程模式、工作环境和概念框架。这有助于你理解为什么用户对正在测试的网站做出如此反应。（抛弃与用户操作环境不匹配的需求）
  • 可用性目标设定-需要制订质量具体化的目标，它能体现从用户档案中搜集到的需求。测试在某个阶段用户能否完成任务，如果用户受到限制，那就应该重新设定用户的目标。（抛弃与用户目标不匹配的需求）
  • 平台功能和约束-必须确定界面或产品的功能和限制，以界定可用性需求的范畴。这一信息会受用户可用性需求的影响。（抛弃与平台技术能力不匹配的需求）
  • 通用设计指南-必须使用公认的设计准则来设计你的界面。参照网页设计指南制作出来的网页才能在网页浏览器上表现正常。（抛弃与用户体验设计指南不匹配的需求）

产品（交互）体验设计师在做互动设计之前，除了要对需求把关外还要消除项目关系人之间的分歧，满足用户的期望、工程师的期望、销售与市场人员的期望、经理的期望。最后寻找一个各方都能够接受的平衡点，具体阐述请参看：交互设计师怎样和产品团队合作。

交互设计优化

从设计图到原型的诞生，是一个复杂而又有趣的过程。首先我们怎么完成复杂的设计图呢？前期的市场调研与需求分析为我们提供了第一手好资料，接下来我们要把这些资料逐条分析并提炼需求要点。在头脑风暴讨论中，交互设计师要与产品设计师、需求分析师等一起参加设计图创建的讨论。在讨论中确定商业需求范围、产品需求逻辑、产品规范等，最后总结出一份过程文档。它可能是BRD或FRD，它将是纸上原型的设计指导书。

当交互设计师拿到这个过程文档后，就可以创建设计图中的逻辑架构图和任务操作流程图了。在创建逻辑架构图时，可以选择Camp Tools或Illustrator制作，当然也有人选择Mind Manage制作。不管选用哪一种制作工具只要能把逻辑架构表达清晰即可，这里就不再赘述每种工具的使用方法和优缺点了。同时，交互设计师要始终以信息架构的原则来创建逻辑架构图，确保逻辑信息的完整性、表达信息的一致性、架构信息的简洁性等。在创建任务操作流程图时，通常选择Visio制作。在用Visio制作过程中，重在表达功能点之间的交互，我们可以用Visio中提供的流程图形与流程符号，来表达设计中的关键功能与关键节点。

在经过纸上原型设计之后，交互设计师要与产品规划师、可用性工程师迅速沟通，优化纸上原型。交互设计师会根据纸上原型确定的功能点与信息框架，通过Axure制作出低保真的交互设计原型DEMO。在制作Axure交互设计原型DEMO时候，应该注意的以下几点原则：

  1. 用Axure页面导航结构去构建信息架构。
  2. 页面的命名要有统一的规范标准。例如：一级页面，二级页面，过程页面（状态页、结果页）等都要有统一的标准。
  3. 避免纠结复杂的交互控件实现。要记得Axure是快速原型实现工具，并且网上已经有很多成型的Axure交互设计模板可以直接调用。
  4. 少一点色彩与布局，多一点标注与说明。把色彩与布局的问题留给视觉思考吧，多些减少沟通成本并可消除歧义的注释吧。
  5. Axure交付物也要注意可读性、可及性。把你的交互产出物移交给视觉和前端的时候，记得让他们能很容易看懂你想传达的东西。
  6. 交互设计原型不是必须生成HTML文件并能动态交互。不一定要能动态展示，但必须要能完整清楚传达出你的交互过程。

最后，请交互设计师们把自己当成真正的产品设计师，你们对产品与项目的责任不低于项目（产品）经理。

视觉色彩优化

IBM一直被人们称蓝色巨人（Big Blue)：信任、可靠。可口可乐是红色：活力、热情。颜色不仅仅作为这些公司的标识，还把它们加以理想化了。

不可否认，色彩改变了我们对于所见事物的反应“颜色”。不同的配色方案，给人以不同的感受，或顽皮、或深沉；或冷淡、或热情；或别致、或邋遢；或充满活力、或安静；或阴郁、或活泼；或端庄、或幼稚；或朴实、或浪漫；或专业、或业余；或炽热、或阴森。色彩选择，决定了人们在第一眼看到网站时的感觉。因此，色彩是Web设计者手中最普遍，也是最强大的工具。我们说“设计=解决问题”，而视觉设计，就是“用视觉语言去解决逻辑问题”。

在2002年，一个研究小组得到了一些有趣的发现。斯坦福Web可信性项目开始了解是什么因素让人们对网站产生信任或者不信任，而很多因素在他们的发现中都很明显：公司声誉、客户服务、出资人，还有广告，这些都会让用户决定该网站是否值得信任。但是最重要的因素——在他们列表中排在第一位的——却是网站的视觉风格和美感。

交互设计领域著名的大师，Donald Norman，总结说：“积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”当人们开始喜欢某些界面的时候，它们事实上会变得更可用。

电子商务垂直搜索LIST页面的视觉优化，风格上我们通常会支持品牌。目标上传达出一种强烈的品牌信息，如“阿里巴巴的橙色系列，“1688的Logo”。但是品牌识别不止是图标和广告词。它遍布在阿里巴巴项目产品设计、阿里巴巴的网站，以及阿里巴巴的材料中——事实上，品牌对配色方案的选择、字体、图形、词汇表，体现在各个方向。

视觉设计师制作了内容相同而风格不同的上百个界面，然后产品规划与设计团队成员集体投票，选择一个最合适的风格定位。在设计与选择的过程中，如果我们很了解目标用户，那么他们的内在反应和情感反应是可以预见的，并且可以预见的程度还相当惊人。答案就在于实际情况下很多因素的结合：

  • 颜色-让色彩更具有可读性，少一点颜色，多一点价值。
  • 排版-根据字体的选择，文字颜色的选择，再看内在的、情感上的因素来布局。
  • 规模-避免空间过度拥挤。
  • 角度和形状-尖锐的角度、线交叉点或多个线条汇聚的地方，使用这些焦点把用户的眼光引导到你希望的地方去。
  • 重复出现的视觉主题-角落处理模式可以给用户带来视觉旋律。
  • 文本-选择形散，神不散的字体与文本颜色。
  • 图片-节制性的使用装饰性图片，在功能性GUI里谨慎使用，因为会分散用户注意力。
  • 文化因素-如果要表达明显的文化含义，考虑下将要面对的受重。

针对电子商务搜索LIST页面用户体验设计，视觉优化不是万能的，但是没有视觉优化阶段是万万不能的。

前端代码优化

文件越大，用来下载和显示页面的时间就越长。请记住：文件总体积，指的是构成Web页面的所有文件，包括：HTML、外部CSS、外部JavaScript、图像、声音以及视频在内的文件的大小。在这些文件中，HTML、CSS、以及JavaScript文件只是文本文件，因此，常常相当紧凑。而图像、声音，以及视频文件通常都很大，存在下载问题。

公共网站的页面大小，从每页小于20K到每页大于100K（包括页面的所有图形文件）。究竟应该有多大，即使是所谓的专家在这个问题上，也普遍存在着分歧。如果你的网站需要专业品质的图形，那么就不可能遵守“20K定律”。但是，如果目标受众的Internet连接速度慢，或者目标受众的耐性有限，你就不得不放弃那令人难以抗拒的漂亮图像，转而遵守关于“20K定律”的限制。怎么样为有限的文件体积做事先的规划呢？

  • 把大部分的CSS和JavaScript文件放入外部文件。只在网站第一次引用这些文件时，才进行下载。之后，网站上任何页面都可以重复使用这些文件，而无需再次下载。
  • 重复使用不同页面的图形、音频和视频。因为这些文件也是在第一次时，才进行下载。
  • 不要使用不必要的图形、动画或声音。无论是出于实用性的考虑，还是为了增强网站的吸引力，每个文件都应该有清楚的存在于网站上的理由。一个用于导航，大尺寸、具有吸引力的图像映射，同时具备了实用和美观两种用途，就像待售产品的照片一样。另一方面，应该去掉那些只起到填充空白作用的图形。
  • 在可能的情况下，使用小尺寸图像，而不是大尺寸图像。因为在其他因素相同的条件下，与大尺寸图像相比，小尺寸图像的下载速度更快。例如：你可能使用一个平铺（重复）显示在背景上的小尺寸图像，代替单个的大尺寸背景图像。
  • 尽量减少特殊导航按钮，每个按钮都具有独特的措辞和翻转效果，则需要下载100个不同的图像。相反地，50个文本链接（具有CSS提供的翻转效果），只需很小的下载代价。

做为技术出身的交互设计师，可以不断探索新的技术带来的变革(例如：html5)。无论何时，页面打开速度是给用户的第一印象，也是提升用户对网站满意度的重要因素，并且前端代码的优化将会给用户带来舒适地操作体验！

 

《电子商务搜索LIST页面用户体验设计》第2部分（用户体验原则制定，快速迭代与可用性测试，定性与定量结合的数据分析）

]]> http://www.aliued.cn/?feed=rss2&p=2655 18 使用Fiddler提高前端工作效率 (实例篇) http://www.aliued.cn/?p=2581 http://www.aliued.cn/?p=2581#comments Sun, 25 Apr 2010 05:57:00 +0000 前端-qhwa http://www.aliued.cn/?p=2581 fiddler-title

在上一篇（介绍篇）中，我们对Fiddler Web Debugger有了简单的接触，也许你已经开始在用Fiddler进行HTTP相关的调试，在这一篇，我们将通过一个实例了解Fiddler的神奇魔法。

在我们前端开发的日常工作中，发现服务器上某个css/javascript文件有问题，需要修改，那真是家常便饭。通常，我们需要将文件进行修改，然后重新发布再验证，这样就很容易影响到生产环境的稳定性。更普遍的做法是，我们在开发环境中修改文件并验证，然后发布到生产环境。虽然安全，却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性，我们就非常敏捷地基于生产环境修改并验证，确认后再发布。

假设我们发现这个页面有问题，需要修改所引用的js文件（http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102）。

第一步：用Fiddler查看页面的数据流列表，找到这个js文件的session

image_thumb

tip: 最好是没有缓存的返回内容（Result Code是200），这样可以进行下一步的保存。不是200也没关系，你只要本地硬盘上有这个文件就好了。

第二步：将js文件保存到本地（如果本地已经有这个文件，可以跳过这步）

image1

在这个js session上右键点击，选择“Save – Response –Response Body…”，将js文件的内容保存到本地。记住存的位置，下面我们会用到这个保存下来的文件。

第三步：开启Fiddler的请求自动重定向功能

image2

打开AutoResponder标签设置。有没有看到界面上有两个复选框？第一个的作用是开启或禁用自动重定向功能，我们就可以在下面添加重定向规则了。第二个复选框框勾上时，不影响那些没满足我们处理条件的请求。

第四步：创建重定向规则，将目标是这个js的HTTP请求重定向到本地文件

我们可以通过“Add…”按钮手动添加规则，不过这个URL已经出现在我们的session列表中，可以直接拖动过来。在左侧的Session列表中选择第一步找到的session，拖动到AutoResponse标签中。这样就创建了一个针对这个URL的规则。

image3

Fiddler帮我们生成的规则是：

我们需要修改这个规则，

image_thumb1

选择“Find a file…”，就可以选择本地的文件作为返回的body内容。

image5

选择我们刚刚保存下来的文件。

刷新一下浏览器页面，看一下session列表，如果像下面这样，这个session的底色是灰色的，那么恭喜你，你已经成功将这个请求重定向到本地文件了！

image6

tip: 如果浏览器用的是Firefox，记得先清一下临时文件缓存，因为Firefox是真正的缓存，当判断文件的缓存还未过期时，就不会再发请求出来，Fiddler就获取不到了。

第五步：修改本地文件，进行测试

我们在本地的js文件中加一句alert(‘hello’)

image7

刷新浏览器，看看效果，如果alert出来，那就成功了。

继续修改这个文件并测试，成功修复问题后，我们就可以发布修改后的文件了。

小结：自动重定向功能是Fiddler最实用的功能，这里的Rule可以自由地设定，可以使用搜索（默认）、精确匹配（EXACT）、正则表达式匹配（REGEX）。处理方式可以选择使用文件，也可以选择合适的时间暂停数据流（*bpu、*bpafter），人工干预。通过以上几个步骤，我们演示了怎样将HTTP请求重定向到本地的文件，进行web调试。这种调试方式不需要发布到线上再验证，避免了修改不成功、对用户造成影响的风险，而且不需要搭建复杂的开发服务器等开发环境，非常适合快速web调试。

延伸阅读：

  1. Fiddler使用帮助
  2. Fiddler AutoResponder标签说明
]]> http://www.aliued.cn/?feed=rss2&p=2581 15 使用Fiddler提高前端工作效率 (介绍篇) http://www.aliued.cn/?p=2567 http://www.aliued.cn/?p=2567#comments Sun, 18 Apr 2010 08:50:00 +0000 前端-qhwa http://www.aliued.cn/?p=2567

1. Fiddler 是什么？

Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思，Fiddler Web Debugger就像小提琴一样，可以让前端开发变得更加优雅。

Fiddler是以代理服务器的方式，监听系统的网络数据流动。运行Fiddler后，就会在本地打开8888端口，网络数据流通过Fiddler进行中转时，我们可以监视HTTP/HTTPS数据流的记录，并加以分析，甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具，对前端开发工作很有价值。

2. 下载和安装Fiddler

  1. 安装.net framework 2.0以上版本
  2. 从官方网站免费下载Fiddler。

Firefox中用Fiddler，可以下载一个插件：Fiddler开关

3. Fiddler的界面和功能

列表

左侧是数据列表，以不同的图标区分数据类型和状态，以下是图标对应的含义：
正在将请求数据发往服务器
正在从服务器下载返回数据
请求过程中暂停
返回过程中暂停
请求中使用了HTTP HEAD方法; 返回中应该没有body内容
请求中使用了HTTP CONNECT方法，建立HTTPS连接通道
返回的内容类型是HTML
返回的内容类型是图片
返回的内容类型是Javascript
返回的内容类型是CSS
返回的内容类型是XML
普通的成功的返回
返回内容为 HTTP/300,301,302,303 or 307 跳转
返回内容为HTTP/304: 使用本地缓存
返回内容为一个证书请求
返回内容是服务器错误
请求被客户端、Fiddler或服务器中断

查看器

利用查看器提供的很多形式，我们可以查看数据流的内容。

请求构建器（Request Builder）

可以创建任意数据的请求

过滤器

过滤器可以对左侧的数据流列表进行过滤，我们可以标记、修改或隐藏某些特征的数据流。

AutoResponse功能

这个功能可以算的上是Fiddler最实用的功能，可以让我们修改服务器端返回的数据，例如让返回都是HTTP404或者读取本地文件作为返回内容。我们将在实例中介绍利用AutoResponse功能。

文本编码和解码

提供了常用的一些文本编解码的转换。

此外，还可以对两个数据流进行比较

Fiddler可以保存和打开“SAZ”格式的文件，这样就可以将监听到的数据流保存下来，下次再重新打开分析。可以利用FiddlerCap——一个专门用来录制保存SAZ的小工具——保存SAZ文件。SAZ文件可以设置密码保护，比较贴心。

延升阅读：使用Fiddler提高前端工作效率 (实例篇)

]]> http://www.aliued.cn/?feed=rss2&p=2567 6 Microsoft ,Apple,Google用户体验设计原则 http://www.aliued.cn/?p=2556 http://www.aliued.cn/?p=2556#comments Sat, 03 Apr 2010 10:51:49 +0000 zongbo.yuzb http://china.aliued.com/?p=2556 
[版权声明]:版权归作者Alite所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明
:http://www.alitedesign.com/






p64052029-1











 

细致的Microsoft
减少概念……增强信心 

•你是不是引入了新的概念？为什么？真的必要吗？
•你能去掉这些不需要的概念吗？
•其中的区别有意义吗？
•用户体验会延续同样的概念吗？
小的好或坏也很重要 

•哪些重要的“小事”是经常会碰到的？
•哪些小问题是你在着手解决的？
•少做一些更好。
•不要把小事从你的体验中去除。
•为深思熟虑的细节制订计划。
•修正小的错误。
看起来和用起来都很棒 

•你的用户体验哪里最棒？它看起来有那么好吗？
•用户第一眼看到的东西能够让人觉得它用户体验很棒吗？
•用户体验符合期望吗？
•用户很清楚能做什么吗？
•是不是只提供了必要的步骤？

要解决的是让人分心的事，而不是可发现性 

•减少令人分心的事情。
•不要让功能自己之间进行竞争。
•致力于新的功能。
•下列方法不能解决糟糕的可发现问题：
◦在开始菜单上添加图标。
◦在桌面上放置图标。
◦在通知区域放置图标。
◦使用通知。
◦提供首次运行体验。
◦提供功能教程。
旋钮和问题前的 UX 

•调低问题的音量。
•只问一次。
•不要要求配置来获取数据。
•这个问题是不是已经问过了？
•寻找合并统一的机会。
个性化，而非定制化 

•这个功能是否能让用户自己来表述元素？
•你是否能够区分个性化和定制化？
•个性化是需要成为新的功能，还是可以利用现有的功能和信息（如用户的位置、背景图片或排列方式）？
体验的生命周期 

•考虑下列各个阶段下的用户体验：
◦安装与生成
◦首次使用与定制
◦常规使用
◦管理与维护
◦卸载或升级
•以一个已经使用了 12 个月的用户身份来审视整个体验。它是否具有：
◦合理的内容
◦合理的“音量”
为移动人士建造 

•所有的 UX 原则对于 12 英寸和 20 英寸的屏幕都是等价适用的。
•允许用户被打断。
•考虑启动和中断（快速恢复，不要妨碍其他用户体验）。
•考虑获取或失去连接。
•性能永远是用户体验的杀手。
ps:微软的细致可以渗透到产品中的每一个环节，或组成人机界面的每一个像素，实在令人钦佩。





















轻巧的Apple
注重设计过程 

•在设计过程中引入用户交互的5个目标：
◦了解您的目标客户
◦分析用户的工作流
◦构造原型系统
◦观察用户测试
◦ 制定观察用户准则
•做出设计决定
◦避免功能泛滥
◦80% 方案
•优秀软件的标准
◦高性能
◦易于使用
◦吸引人的界面
◦可靠
◦灵活
◦互操作性
◦移动性
人机接口设计准则

•人机接口设计准则：
◦ 隐喻（尽量使用隐喻来描述程序的概念和功能，这样可以利用一些已有的概念和知识。）
◦反映用户的心智模型（用户的心智模型应该在产品的用户接口的设计中体现出来，主要体现在应用程序窗口的布局，工具栏上图标和控件的选择和组织，以及面板的功能等。）
◦隐式和显式操作（显示的操作清楚的表明了对一个对象操作的结果。隐式的操作通过一些可视化的线索或者上下文来表达结果。）
◦直接操作 （直接操作是隐式操作的一种，它会让用户觉得可以直接控制计算机显示的对象。）
◦用户控制一切（允许用户而不是计算机来启动和控制操作。）
◦反馈和交互（反馈和交互意味着通过合适的反馈以及和程序之间的交互从而让用户时刻知道现在发生了什么，而不仅仅是当事情出错时显示一个警告。）
◦一致性（在用户接口上的统一可以让用户使用从其他应用程序学到的知识和技巧。）
◦ 所见即所得（用户应该可以找到程序的所有功能。）
◦容错性（提供充分的容错性以鼓励用户使用程序的各种功能─也就是说，大部分的操作都是很容易恢复的。）
◦感知的稳定性（为了给用户一个稳定的感知，对于对象以及实施在这些对象上的操作，Aqua接口提供了一个清晰的限制集合；为了不破坏用户对稳定性的体验，程序应该保留用户更改过的配置，例如窗口的大小和位置等；提供程序运行的状态和反馈让用户知道程序正在进行的任务，同样能提高感知的稳定性。）
◦整体美学（整体美学意味着信息经过良好的组织并且和视图设计一致。）
◦避免“模式”（尽可能的让用户在任何时候都能做他们想做的事情。避免使用模式对话框来将用户锁定在某个操作中，以至于在当前操作完成前用户不能做别的事情。）
◦管理程序的复杂性（开发一个易于使用的程序的最好办法就是设计得尽可能的简单。）
•设计的优先级
◦满足最低限度的要求
◦发布用户期望的功能
◦让您的程序与众不同
ps:苹果的轻巧不仅体现在它的工业设计上，更多的是它的操作系统和软件的用户体验层面。 





















简洁的Google

Jon Wiley- Google User Experience Designer 在一次专业分享中,提到了Google 的用户体验设计原则:

•1. 有用（Useful）：以用户为焦点，关注他们的生活、工作和梦想。
•2. 快速（Fast）：争取节省每一个毫秒。
•3. 简单（Simple）：简洁就是力量。
•4. 魅力（Engaging）：能够唤起新手的好奇心，能够吸引资深用户。
•5. 革新（Innovative）：勇于创新。
•6. 通用（Universal）：全世界适用的设计。
•7. 盈利（Profitable）：为现行的和将来的商业模式做好安排。
•8. 优美（Beautiful）：外观具有视觉愉悦性，但是不会令用户分心。
•9. 可信（Trustworthy）：值得用户信赖。
•10. 人性（Personable）：加入人性化因素。
ps:谷歌的简洁永远是它的产品特色，从谷歌网站的每个界面到浏览器chrome的用户体验与交互，都尽力把复杂问题设计得让用户感觉到最简单。
]]> http://www.aliued.cn/?feed=rss2&p=2556 5 jQuery 1.4 Released 新特性官方诠释 http://www.aliued.cn/?p=2453 http://www.aliued.cn/?p=2453#comments Thu, 21 Jan 2010 00:39:49 +0000 Denis http://www.aliued.cn/?p=2453 一直以来，jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后，就迫不及待去了解了一下1.4版本对比以往1.3.2有什么新特性和改进。其实本文更多的是一篇翻译文章，但感觉还是发成一篇博客，能让更多不愿意看英文的同学了解jQuery。
自半年前发布的1.3.2版本以来，John Resig带领的jQuery团队一直没有大的动作。一方面1.3.2已经算是一个比较完善的版本，作为一款轻量级的框架，jQuery现在要做的已经不是方法的增加和功能的增强，而是要在优化结构提高上下功夫。虽然jQuery UI团队也在孜孜不倦地更新版本，但说实话它真不是一款搭建Web系统的框架，它的UI目前跟Ext这种大腕也有一定的差距。所以，1.4姗姗来迟，但它却从核心上带给了大家惊喜。

总体上讲jQuery 1.4对代码库进行了内部重写组织，开始建立一些风格规范。老的core.js文件被分为attribute.js, css.js, data.js, manipulation.js, traversing.js和queue.js；CSS和attribute的逻辑分离（喜欢研究代码的同学可以现在源文件来看，同事能发现里面出现了很多有用的小技巧）详细的特性如下：
1.提高了一些常用方法的效率，有些有大幅度的提高：

jQuery常用方法效率对比

jQuery常用方法效率对比

2.给attr, html, css等方法提供方便的Setter方法参数：

// 给所有a标签中的&符号包一个span标签
$('a').html(function(i,html){
return html.replace(/&/gi,'&');
});

// 为每个a标签追加额外的title信息
$('a[target]').attr("title", function(i,title){
return title + " (Opens in External Window)";
});
3.Ajax
a.提供了更方便的参数序列化方式，提供了PHP和Ruby on Rails中常用的序列化模式（{foo: ["bar", "baz"]}被序列化为foo[]=bar&foo[]=baz），当然可以通过全局设置jQuery.ajaxSettings.traditional = true;序列化为传统的模式（foo=bar&foo=baz）。1.4也支持单个变量的序列化。
b.能通过判断content-type的类型来判断Response的JSON和script类型
c.添加了对Etag的支持
d.提供了JSON.parse方法来转换JSON格式
e.提供了序列化HTML5的表单元素的功能，比如datetime和range！
f.ajax的回调方法现在可以指定context了，也就是里面的this指向，在请求之前就可以指定了！这是一个很好用的改进！
4.Attribute和css性能优化图：

css和attr方法的性能提升

css和attr方法的性能提升


5.其他性能的优化：
删除和清空操作效率的提升

删除和清空操作效率的提升


jQuery .html方法效率的提升

jQuery .html方法效率的提升


jQuery class操作的3个方法效率提升

jQuery class操作的3个方法效率提升


官方还原文还有一些更细的优化点，个人认为是锦上添花的改进，有兴趣的同学可以去官网了解。

]]> http://www.aliued.cn/?feed=rss2&p=2453 1 模板技术，设计模式和OOP实践心得–个性化list http://www.aliued.cn/?p=2430 http://www.aliued.cn/?p=2430#comments Wed, 20 Jan 2010 10:36:59 +0000 g_kevin http://www.aliued.cn/?p=2430 提示：在firefox浏览将带给你更好的体验

个性化list它的一个特点是采用后台开放的api接口，通过前台配置参数来提取相应的数据，基于CMS系统，达到快速搭建页面的目的。历时两次改版，从数据分析来看，是非常不错的，目前在主推这个，有点欣慰。

先上效果图：gslist

http://view.china.alibaba.com/cms/search/wandie.html

抛出商业层面上不说，来谈点技术性的东西，或许才是大家比较敢兴趣的。D2归来，提到模板技术，平时也看了较多关于设计模式，OOP相关的书，这次项目很好实践了这些技术以及设计思想。细心的朋友看页面的源码，会发现，页面就只有如下这样的代码，但是主数据区集成了很多功能。

  1.  
  2. var page_config={
  3. id:'search-result',
  4. type:4,
  5. params:{
  6. 'displayCatIds':'1032712',
  7. 'keywords':'',
  8. 'pagesize':'30',
  9. 'recommended':'A'
  10. }
  11. }
  12. FYE.onDOMReady(function(){
  13. changeRegion(YAHOO.util.Dom.get("province_slt"));
  14. YAHOO.IList.init(page_config);
  15. });

很好的实现行为与表现分离，只要你代码组织的好，使用一些合适的设计模式，对于后期的维护以及改版也非常方便，这一点体会在项目体会很深。

综述想看来发中的细节点：
1.初始化管理，良好的初始化顺利并结合一些技巧，能够达到事半功倍的目的，不管是可读性，还是后续的问题定位。

  1. var _this = this;
  2.    var initFunctionsQueue =[
  3.     {
  4.      fn:this.initFirstSearchData,
  5.      info:'渲染接口数据'
  6.     },
  7.     {
  8.      fn: this.selectMutiPic,
  9.      info:'多图筛选'
  10.     },
  11.     {
  12.      fn:this.orderSelect,
  13.      info:'相关排序'
  14.     },
  15.     {
  16.      fn:this.purchaseListTabInit,
  17.      info:'购物车'
  18.     },
  19.     {
  20.      fn:this.pageEventHandle,
  21.      info:'翻页'
  22.     },
  23.     {
  24.      fn:this.selectWangWangOnline,
  25.      info:'旺旺在线筛选'
  26.     }
  27.    ];
  28.    for (var i = 0, len = initFunctionsQueue.length; i < len; i++) {
  29.     try{
  30.      initFunctionsQueue[i].fn(config,_this);
  31.     }catch(e){
  32.      YAHOO.functions.log('Error info:' + initFunctionsQueue[i].info + '; ' + e.name + ':' + e.message);
  33.     }finally{
  34.      continue;
  35.     };
  36.    }

为此还专门开发了一个执行器，可以很方便的调用(点此查看)

  1. YAHOO.Actuator.add(this.getPurchaseListOfferByMemberId,this,'初始化进货单的已有offer列表');
  2. YAHOO.Actuator.fire();

2.在中大型的项目中，我们会抽离很多脱离于业务逻辑的方法，那我也不例外，可能还有些细微的差别

  1. YAHOO.namespace('functions');
  2.  $L.augmentObject(YAHOO.functions,{
  3. log:function(){}
  4. });
  5. $L.augmentObject(YAHOO.functions,YAHOO.lang);//请关注这里

而不是如下这样：

  1. YAHOO.namespace('functions');
  2. YAHOO.functions={
  3. log:function(){}
  4. };

从代码层面上，成本多了几行的代码，但是后续可以很方便的扩展。
3.模板技术应用
晒下核心代码：

  1. function doFormat(str,arg){
  2.  var _str = str;
  3.  var A = Array.prototype.slice.call(arguments, 1);
  4.  return str.replace(/\{(\d+)\}/g|>, function (C, D) {return A[D];});
  5. }
  6. function getPurchaseFailureTemplate(){
  7.    var purchaseFailureTemplate = '
  8. <div class="pl-pannel-wrap"><a class="pl-close" onmousedown="YAHOO.functions.hiddenPurchasePannel(\'PL_{0}\')" href="javascript:void(0)" target="_self"></a>'
  9.       + '
  10. <h3>您的进货单已经货品数已达上限</h3>
  11. 共<strong>{2}</strong>种货品 合计：<strong>{1}</strong>元
  12.  
  13. <a class="view-pl" onmousedown="YAHOO.functions.hiddenPurchasePannel(\'PL_{3}\')" href="'+YAHOO.IApi.config.viewPurchaseListURL+'" target="_blank">查看进货单</a></div>
  14. ';
  15.    return purchaseFailureTemplate;
  16.   }
  17. function doRenderPurchaseFailureTemplate(offerid,total,quantity){
  18.  var s = doFormat(getPurchaseFailureTemplate(),offerid,total,quantity,offerid);
  19.  return s;
  20. }

doFormat可以算是模板引擎，但目前的功能还是比较弱的，但基于这个已经满足我的大部分要求，这里只是给大家展示其中的一个小的应用，如果结合到项目，涉及到很多节点的创建，是非常方便的。
4.设计模式和OOP，太熟悉的名字，我觉得在项目中应用才是价值的最大体现。在本次项目中，主要用到到代理模式，MVC模式，具体怎么应用，三言两语很难说的清楚，可以看下整个项目的前端设计：
(1)全局配置文件IApi
(2)公用函数集合functions;
(3)业务功能集合IList;
(4)页面有很多筛选项，需要监听，故抽离一个筛选监听器FilterListener;
(5)管理搜索数据接口的IAction
(6)管理搜索数据渲染的IView
(7)管理进货单接口的MAction
(8)管理进货单数据的MView

源码地址：http://style.china.alibaba.com/js/pages/search/ilist091207.js

这里只分享到一些技术层面上的东西，其实我更看中的是程序的设计，是否有很好的可读性，可维护性，可扩展性，还有是否适合团队开发。

很少在博客晒下自己的想法，欢迎拍砖，我的旺旺Id：alixiecg

]]> http://www.aliued.cn/?feed=rss2&p=2430 5 一个兼容多种场合的Javascript图片大小自适应function http://www.aliued.cn/?p=2412 http://www.aliued.cn/?p=2412#comments Fri, 15 Jan 2010 03:55:34 +0000 Denis http://www.aliued.cn/?p=2412 在实际应用中，图片自适应大小结合水平垂直居中，是非常常用的手段。今天就图片的自适应这里推荐一个方法，此方法已经通过多种常见场合和各大浏览器兼容性的测试。

先看方法：

/*
  1. * auto resize image
  2. * @param    img     img obj
  3. * @param    w       custom width
  4. * @param    h       custom height
  5. */
  6. function resizeImage(img,w,h) {
  7.     //remove default attribute
  8.     img.removeAttribute("width");
  9.     img.removeAttribute("height");
  10.     var pic;
  11.     //if is ie
  12.     if(window.ActiveXObject) {
  13.         var pic=new Image();
  14.         pic.src=img.src;
  15.     } else pic=img;
  16.     if(pic &amp;&amp; pic.width &amp;&amp; pic.height &amp;&amp; w) {
  17.         if(!h) h=w;
  18.         if(pic.width&gt;w||pic.height&gt;h) {
  19.             var scale=pic.width/pic.height,fit=scale&gt;=w/|>h;
  20.             if(window.ActiveXObject) img=img.style;
  21.                 img[fit?'width':'height']=fit?w:h;
  22.             //if is ie6
  23.             if(window.ActiveXObject)
  24.                 img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
  25.         }
  26.     }
  27. };

这个方法一共测试了3种场合：

场合1，直接作用在img标签上：

<img src=”http://img.china.alibaba.com/images/trade/other/091231/test1.jpg” width=”400″ height=”900″ onload=”resizeImage(this,400,300)” />

场合2，对现有标签重置src属性：

<img id=”test2″ src=”about:blank” />

var test2=document.getElementById(’test2′);

test2.onload=function(){ resizeImage(test2,400); };

test2.src=’http://img.china.alibaba.com/images/trade/other/091231/test2.jpg’;

场合3，动态加载img：

var test3=new Image();

test3.onload=function(){ resizeImage(test2,300); };

test3.src=’http://img.china.alibaba.com/images/trade/other/091231/test3.jpg’;

document.appendChild(test3);

以上3种所演绎的情况在技术层面的差别主要有：

1. img是否存在与页面上，在ie6下，对不存在页面上的img的宽高自适应，对2个属性都必需进行设定。

2. img是否自带width, height属性，在不删除原有属性的前提下，通过js设定图片的宽高将会失效

3. img在onload的过程中是否可见，在ie6下，对不可见的img在onload中无法获取图片的宽高属性。

同时需要注意的是，在Opera和Chrome浏览器下，没有设置宽高属性的图片是在DOM Ready之后进行load的，所有请使用此方法的同学注意方法调用的时机。

]]> http://www.aliued.cn/?feed=rss2&p=2412 7 UED能为WCAG 做些什么？ http://www.aliued.cn/?p=2376 http://www.aliued.cn/?p=2376#comments Thu, 14 Jan 2010 05:07:06 +0000 sam http://www.aliued.cn/?p=2376   Web Content Accessibility Guidelines（WCAG） 主要目的是实际体验一下网站访问无障碍化、网站亲和力（Accessibility）
主要服务对象是手持移动设备（包括mobile  phone）、屏幕阅读器和残障人士等.
甚至在美国更有具体化的WCAG–  Section 508法案
由于WCAG不是每个网站都那么容易做到，所以即使是Section 508规则的范围也只被限制于联邦部门

WCAG可以理解成是W3C的一个分支，做为前端来支持会有更好的基础，当然部分准则还需要交互，视觉的参与，WCAG不像W3C那样一定要做到，但考虑到受众正在逐年增多，在这样的背景下，我们完全可以花很少的时间，把一些不需要花很大成本准则渐渐加进网站，提高亲和力，何乐而不为呢！

  WCAG的历史
  The WCAG 1.0 were published and became a W3C recommendation on May 5, 1999
  The WCAG Samurai  were published on February 2008
  The WCAG 2.0 was published as a W3C Recommendation on December 11, 2008

WCAG对每一点都定义了优先级
  优先级 1 — Web 开发者必须 满足这一检查点，否则一个或多个用户组将不能访问此内容。 
  优先级 2 — Web 开发者应该 满足这一检查点，否则一个或多个用户组将发现难于访问此内容。
  优先级 3 — Web 开发者可以 满足这一检查点，否则一个或多个用户组在访问此内容时可能有困难。

很明白，我建议我们的网站尽量减少优先级 1的问题。

  1、为视觉和听觉的内容提供等义的替代
一切呈现给用户的内容，包括视觉上和听觉上的，都需要提供功能上或目的上等义的替代。

说明文字

从支持长度排序 alt–title—longdesc
鉴于目前还没有什么浏览器支持longdesc（仅Firefox的扩展 longdesc-0.3-fx.xpi 支持），所以 W3C 推荐使用 [D]链接

ok[D]

  2、不要仅依靠色彩来提供信息
确保没有颜色的情况下，文字和图像都易于理解，尽量用方文字代替图片。
[对于图片为优先级 2，对于文字为优先级 3]

  3、适当使用标记语言和样式表
使用结构化元素来标记整个文档。使用样式表来控制表现，而非表现层元素和属性。 <p> <h1>…<h6>等

  4、阐明自然语言的使用
比如在HTML里使用“lang”属性，在XML里，使用“xml:lang” 方便屏幕阅读器方便阅读

  5、创建编排良好的表格
对于数据表格，指名行和列标题。[优先级 1]
比如在HTML中，使用TD来表示数据单元格，用TH来表明标题。 [优先级 1] 比如在HTML中，使用THEAD，TFOOT，和TBODY来为行分组，使用COL和COLGROUP来为列分组，使用”axis”，”scope”，和”headers”属性来描述数据间的复杂关系。 比如在HTML中，不要使用TH元素来使文字（非表格标题）居中和加粗。 比如在HTML中，使用”summary”为TABLE添加摘要信息。 比如在HTML中，使用”abbr”为TH添加缩写信息。
table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption这些属性的应用等

  6、确保页面能够在新技术下良好呈现
确保在脚本，小应用程序或其它程序型对象在被关闭或不支持的情况下，网页仍可使用。如果实在不可能办到的话，应该提供等义的替代信息或其它具可访问性的网页。[优先级 1]

如果浏览器不支持，须为脚本提供特定的文字说明


脚本提示方案说明

这个很好做到，在脚本不支持地方放一块说明性的方案

  7、确保使用者能处理时间敏感内容的改变
保证用户可以暂停或者停止移动的、闪烁的、自动更新的对象或者页面。
【注】 当屏幕闪烁在4至59每秒及峰值灵敏度20Hz的情况下（如从暗变亮，类似于闪光灯），感光性癫痫症患者可能会发作。 主要是针对手持设备

  8、确保嵌入式用户界面具有直接的可访问性
这个主要是针对手持设备用户

  9、设备无关的设计
在链接、表单控制及对象间，提供合乎逻辑的Tab条约顺序。[优先级 3] 比如在HTML里，可以通过“tabindex”属性来制定tab顺序，确保页面设计的逻辑性。
为重要链接提供键盘快捷键（包括客户端图像映射、表单控制、表单控制群组）。[优先级 3] 比如在HTML里，可以使用”accesskey”来指明键盘快捷键。

  10、使用W3C推荐的技术和规范
这是做为前端必须做到的，也是我们正在做的

大家可以看到，其中的1，2，7我们是需要整个UED合作来完成的，而其它是我们前端可以独立来做的，当然以上列出的是按我的理解整理过，并不是WCAG的全部，正如本文标题所说，目前阶段我只关心我们可以做得到的

想到检验是你的网站哪些地方需要改进吗？
本地检验：使用Macromedia Dreamweaver 8 自带的。新建一个站点，把你要检验的文件放进去，在 DW 8 的菜单 > 站点 > 报告 > 辅助功能 > 报告设置。支持WCAG/W3C 优先级 1 2 检查点，Section 508 。
当然我们可爱的Firefox也为我们提供了丰富的插件来做这件事
  WCAG Contrast checker
https://addons.mozilla.org/zh-CN/firefox/addon/7391

Web Accessibility Test
https://addons.mozilla.org/zh-CN/firefox/addon/1158
例举了两个，当然还有其它，有兴趣的可以到http://addons.mozilla.com下用关键字“Accessibility”搜索更多。

在这里再推荐一款不错的屏幕阅读器 NVDA
下载地址：http://www.nvda-project.org/

当然想了解最新的关于WCAG的信息的可以访问：  http://www.w3.org/TR/WCAG/

]]> http://www.aliued.cn/?feed=rss2&p=2376 0 Javascript Selectors 入门篇 http://www.aliued.cn/?p=2335 http://www.aliued.cn/?p=2335#comments Wed, 23 Dec 2009 00:59:51 +0000 Denis http://www.aliued.cn/?p=2335 Javascript-Selectors

作为前端开发工程师，平时对于Dom的查找遍历和操作是家常便饭。对于优秀的前端来说，也肯定早已有了自己的一套方法来封装这些重复的操作。但是，现在市面上已经有很多成熟的框架已经提供了这么一套封装的方法来极大地方便我们的工作，而且在浏览器兼容及效率上也各有深入的研究了，我们何不来看看这些解决方案是否好用，从来再次提高我们的工作效率呢？这些解决方案，有一个统一的命名：Javascript Selectors

Selectors长什么样

常用的Selectors

  • “#ElementId” ID为ElementId
  • “.ClassName” class包含ClassName
  • “TagName” Dom标签为TagName
  • “[AttributeName]” Dom包含属性AttributeName
  • “(expr1), (expr2)[, (expr3), ...]” 满足表达式1或表达式2或表达式3…

高级的Selectors

  • “:empty” 空或’/>’结尾的标签
  • “:first-child” 同类同级别第一个Dom
  • “:nth-child(odd)” 同类同级别奇数位Dom
  • “:nth-child(even)” 同类同级别偶数位Dom
  • “(PreExpr)>(NextExpr)” 直接子节点Dom
  • “(PreExpr)+(NextExpr)” 同级别紧挨着的Dom
  • “(PreExpr)~(NextExpr)” 同级别Dom
  • “[AttributeName=(Value)]” Dom包含属性AttributeName且等于Value
  • “[AttributeName^=(Value)]” Dom包含属性AttributeName且以Value开头
  • “[AttributeName$=(Value)]” Dom包含属性AttributeName且以Value结尾

表单中的Selectors

  • “:checked” 选中状态的表单控件

JS Selectors & CSS Selectors

两者在使用上并没有直接关系。但两者长得很像，并从不同的角度管理着HTML页面上的Dom节点。
JS Selectors通过JS原生的方法或者浏览器支持的方法，结合正则，筛选Dom。
CSS Selectors通过浏览器内置的渲染引擎筛选Dom。
两者最终得到的结果互不相干。

JS Selectors与框架

通俗地说，Selectors引擎是独立的，是作为JS框架的一个组件存在的。
目前有很多引擎，大多没有独立的名字，是跟随JS框架出现的(如YUI，Ext，Dojo)。
jQuery的引擎为Sizzle，目前效率最高的引擎之一。此外还有Peppy。
YUI 2.x的引擎效率惨不忍睹，3.x的效率有了脱胎换骨的优化，是亮点。

IE6下各大框架Selectors的执行效率

IE6下各大框架Selectors的执行效率

怎么用Selectors引擎

其实很简单：
JS Selectors引擎，用山寨的话来解释，那就是：一个返回类型是array的function，它必须包含一个string类型的Selector表达式参数，之后的可选参数等你用段日子再了解也不迟！

YAHOO.util.Selector.query

看到标题了吗？这就是YUI 2.x 中的Selectors引擎所在的命名空间(YAHOO.util.Selector)和方法名(query)。
来看看query这个方法的官方API:

Retrieves a set of nodes based on a given CSS selector.
Parameters:
selector The CSS Selector to test the node against.
root optional An id or HTMLElement to start the query from. Defaults to Selector.document.
firstOnly optional Whether or not to return only the first match.
Returns: Array
An array of nodes that match the given selector.
static Array query ( selector, root, firstOnly)

扩展思维

YUI 2.x 的Selectors引擎效率低，我们能否切换一个效率更高的引擎呢？答案是肯定的！YAHOO.util.Selector.query作为一个静态函数我们可以用更高的引擎来重写它，比如我们用Sizzle的引擎来替换它：

YAHOO.util.Selector.query=Sizzle;

当然我们也可用从YUI 3.x版本中剥离出高效的引擎来重写2.x中的引擎

]]> http://www.aliued.cn/?feed=rss2&p=2335 11