Skip to content
2010年10月6日 / island205

【译】UX是什么?概述,工具和资源

随着行业技术和方法论的发展,Web站点或者Web应用越来越复杂。原来单一的静态网页,现在变得如此的丰富,大大提升了交互体验。

但是无论技术或者方法如何的改变,一个Web站点的成功的关键仍然没变:用户是怎么看的。“我从这个站点获得了什么?很容易使用吗?甚至有很愉悦的用户体验?”,用户在使用我的产品的同时心中如此的问,这是产生用户黏性的基础。

User experience design(UX)的任务是让用户说出“Yes”。这篇文章旨在帮助你熟悉专业UX设计的规则,背景将基于Web系统,比如Web站点或者应用。

什么是UX?


人与系统交互时的感就是用户体验(简写为UX)。网站,Web应用,桌面程序都是所谓的系统,在现在概念里通称为人机交互(HCI)。

01 User Experience Graphic in What Is User Experience Design? Overview, Tools And Resources

UX设计师研究和评估一个系统的用户体验,关注与该系统的易用性,价值体现,实用性,高效性等。

设计师也有可能关注与一个系统的子系统或者流程。例如,他们有可能研究一个电子商务站点的结账(checkout)流程,看看流程是否对用户友好易用。他们可以更加深入的研究子系统的组件,比如研究用户在填写Web表单的时候如何更加高效和舒服。

尤其在基于Web的系统,UX是一个相对较新的概念。Donald Norman博士提出了“用户体验”一词,他是一个认知科学的研究人员,首次提出了以用户为中心设计的重要性(用户的需求应该决定产品如何设计)。

02 Userexperience Donald Norman in What Is User Experience Design? Overview, Tools And Resources

为什么UX如此重要?


如今,随着以用户为中心的设计理念不断加强,也产生了一些对于设计和增强用户体验的重要性的质疑和讨论。简单的说:“它是重要的,因为它直接和用户需求打交道——这已经足够”。

以用户为中心,以可用性为中心将使得我们的网站与众不同,但在客户我我们理解以用户为中心的设计之前,只有两件事情决定了我们如何做设计:我们的想法和用户希望看到的。

我们以自己认为的方式建立交互——我们为我们设计。完全以美学和品脾啊为中心,没有人会考虑用户体验。

没有现成的科学理论来支撑我们的设计,我们设计应为我们觉得结果是好的,因为它们是被创造的(以我们的想法)并且因为这是我们的客户想要的。

03 Decision Process in What Is User Experience Design? Overview, Tools And Resources

但是这十年见证了Web的变化。普及显而易见——Web在2008年至少有1.5亿用户——但是Web已经变得如此的复杂,拥有丰富的功能,此时Web想要变得高效,它们必需有良好的用户体验设计。

再者,用户浏览站点的方式变得多种多样:移动设备,各种浏览器,各种连入互联网的方式。

我们也意识到可用性的重要——对于我们基于Web的产品来说——满足屏幕阅读器和非传统的输入设备是不够的,还需要满足那些没有宽带连接的或者使用较老移动用户等等。04 Things To Worry About in What Is User Experience Design? Overview, Tools And Resources

 

随着这些巨大的变化,那些易用的取悦用户的网站已经脱颖而出。如何创建一个Web站点呢?给予使用者高用户体验成了驱动开发的主要因数。

谁将从UX设计中受益?


所有的系统将受益于以用户为中心的设计,受益于一个非常可靠的评价标准,当然,说话很容易,但是,反驳者说:完全以用户为中心设计是一件很难的事情。我们不是生活在一个完美的世界之中,没有无限的资源,因此,我们必须鉴别出一个范围,可以从UX设计中获得效益。

复杂系统(Complex Systems)

系统越复杂,就越需要更多的计划和架构设计。简单的静态网页完整的多用户UX没有必要,而多方位网站,高交互体验的Web应用以及电子商务站点都将从UX设计中受益。

05 Complex System Amazon in What Is User Experience Design? Overview, Tools And Resources

用户规模很大的系统,必须有价值,愉悦用户而且高效。忽略用户体验将会有很大的损失。

初创公司(Start-Ups)

初创公司或者小公司没有额外的资源来雇佣专业的UX设计师来进行UX设计,例如,37Signals,一个精悍的初创公司,开发了Basecamp和Highrise等强壮的非常成功的软件,依靠几个多面手(可以“戴上不同帽子”的人)。

06 37signals in What Is User Experience Design? Overview, Tools And Resources

这中情况下,比起招聘一个全职的UX设计师,训练现有雇员(尤其是Web设计师)学习UX设计的原则和方法,或则是直接外包必须的UX工作可能更加的合适。在软件或服务的最初版本提供一个强壮的用户体验可以在同类产品中跳出来获得用户的青睐。但是作为初创公司,有时候并没有足够的资源来雇佣一个技术娴熟的UX设计师。

预算限制的项目(Project With “OK” Budgets)

为中小企业工作的小代理考虑到用户群和优先交付的成果必须保持低开销来保证预算。在这种情况下,开发者更加关注开发进程而非研究分析和计划。小预算的产品更多由其推出的最终产品来驱动开发。当然这并不意味着这类项目不会因为良好的UX受益——当然可以——但是实际看来,中小型的公司常常认为推出一个网站而外的资源开销没有必要。

较长时限的项目(Project With Longer Timeframes)

简单逻辑来看,给传统的网站增加一个齿轮将增加其开发的时间。时间必须分配给UX设计一部分。UX设计师理论上可以承担一些传统上分配给Web设计师和工程师的任务来缩短时间,有可能节约在必要解决用户问题而修正时花费的时间。

UX设计必知(Things To Know About Ux Design)



UX设计是一个了不起的规则,但是它不能或者不会去完成某些事情。

UX设计不是一刀切(UX Design Is Not One Size Fits All)

UX设计不是一刀切,不能解决所有的问题,因为每个人都是不一样的。在某个人身上完全可行可能在其他人身上就是死穴。我们能做到最好的是为实际的经验和提升具体的行为来设计,但是我们不能伪造、假设或者预测用户的实际体验。

我们不能创造用户体验,同样,也不能直接把用户体验从一个网站直接复制到另一个网站,不同网站的用户体验是不一样的。设计必须适合网站的目标、价值、生产过程一个它的其他产品。

传统量度无法直接测量(Can’t Be Directly Assessed With Traditonal Metrcs)

无法根据基本单独的统计,例如浏览量、跳出率、转化率来评价一个网站的用户体验设计。我们可以假设,可以进行用户调查,但是我们不能(至少现在没有)安装一个程序直接自动的统计用户的体验。

和可用性不是一回事(Not the Same Thing as Usability)

用户体验和可用性变得好像是一回事了,但是他们截然不同。UX重点放在用户使用系统的感觉,而交互界面的友好性和高效性则是可用性关心的事情。

可用性作为用户体验的一个主要部分充当了重要的角色,它体现在系统高效和亲切的体验,但是人类工程学,心理学,信息架构和以用户为中心的设计原则同样充当重要的角色。

把UX作为职业引起的批判(Criticisms Of UX As A Prifession)


并不是所有人都承认在团队里有个UX设计师的价值,围绕着一个增加一个UX设计师带来的额外花销,技术上额外的学习和整合以及对改变的害怕,引起了争论。

还有一个担心的问题

在传统的Web站点开发过程中,尤其是对于小部门或者初创公司来说,没有充足的资源,一般由一个Web设计师和一个Web开发工程师组成。设计师在进行草图设计和功能原型设计等工作的同时也充当的用户体验设计师的角色,同时开发人员按照设计师的设计来创建站点。专业的UX设计师在这种情况下只会增加进程的复杂性。

空中楼阁

从事Web开发的一部分人认为UX设计师里真正的开发实在太远了。举个例子,Ryan Carson,Carsonified的创始人,在Web设计领域有很高的声誉,曾批评了那些不实干的UX专家,应该投身到每个Web项目的各个环节,设计、开发、测试、销售甚至售后升级。

这行业有个基本的观点,没有实际开发背景的UX设计师是无法像那些拥有实际开发经验的设计开发人员熟练的给出解决方案。

然而,很多UX专家都有实际的开发背景;很多web设计师或者是开发人员选择了产品过程中的这个特殊区域。

费用增加

简单的逻辑认为雇佣一个UX设计师将花费更多的钱(除非他们免费服务,但是这不可能)。

相反观点,我们应当把UX设计当作一种投资。尽管UX的益处并没有明显显现,并不像网站或者程序其他部分一样。它姗姗来迟,在以后的日子里,给出更高的回报。例如,在结账过程中用户体验一个简单的提高,可能会带来数百万美元的收益

结果不能直接测量

采用定量的方法来评价UX设计的效力和投资回报率是很难做到的,这是因为这一块东西本身就是很主观的。UX处理是用户的情感,不能像访问量,加载速度和转化率一样给个数据来定义。

反而,我们需要分析流量水平,页面访问量,或前或后的用户调查(类似的)来梳理出结果,指出正面的效果来自于好的用户体验或者美学或者其他因数,例如提高营销或者前端性能优化,都是非决定性因数。

困难在于试图去量化非常主观的效果。我们需要一些定性的证据。

UX设计工具和技术


UX设计师在不同设计阶段使用各种各样的工具。下面提供给大家一些工具。

系统评价

假若已经存在一个系统,则UX专家将全面评估系统现状,根据分析研究得出的数据,他们会报告发现的问题并提出一些解决方案。

A/B测试

UX专家可以拟定一个方案来比较不同用户接口的质量和效率。

07 Ab Test Graphic in What Is User Experience Design? Overview, Tools And Resources

首先提出假设(绿色按钮比红色按钮更具吸引力),然后设做出不同的设计,界定什么是“比较好的用户体验”(例如:绿按钮比较好,因为很多人都点击了他),最后进行测试。

用户调查

UX设计师可对该系统现存的或者潜在的用户进行面谈,洞察什么是好的设计。用户体验是主观,获得信息最直接也是最好的方法就是和用户交流。

草图设计和原型设计

基于A/B测试或者用户调查中的发现,UX设计师可能会创建不同布局的草图,甚至高度逼真的原型。

08 Wireframe in What Is User Experience Design? Overview, Tools And Resources

使用流程(UserFlows)

另一种流行的方法是设计系统的用户使用流程。

09 Userflow in What Is User Experience Design? Overview, Tools And Resources

讲故事

依靠生动的用户情感和熟悉的元素图纸,UX设计师讲故事,输出信息。可查看这两篇文章“Better User Experience With Storytelling.”了解关于讲故事的更多信息。

设计模式

模式提供了解决问题的一致的已知最高效的工具。而对于界面模式则是,对于特定的不同工作选择正确的UI元素(例如:模块标签面包屑幻灯片),从而获得更好的用户体验。UX设计师是并不是提出那些曾经用于其他网站的设计模式,更多的需要开发出适合当前项目的设计模式。

20 Add Patterns Module Tab in What Is User Experience Design? Overview, Tools And Resources

用户兴趣模型和用户扮演

UX设计的第一步就是了解你的用户,确保你的设计能正确反应用户的需求。关于用户扮演更多developed using website data

内容清单

作为最简单术语,内容清单为一个网站结构列表。构建一个内容清单目录是工作转换到信息架构的第一步,提供给用户更好的体验(例如:用户操作流,可见索性和效率)。

21 Add Content Inventory Sitemap in What Is User Experience Design? Overview, Tools And Resources

样式指南

设计的一致性至关重要的,可让用户获得一个关于你的品牌的难忘的体验。内容风格指南可以个作者和设计师一个整体框架,在这个框架下创造内容和设计,并且确保了品牌和元素体验 一致性。

22 Add Style Guide Ilovenewyork in What Is User Experience Design? Overview, Tools And Resources

I Love New York’s branding guidelines

还有很多用户体验的设计成果,请参考更多

工具


一下是一些容易获得的流行的UX专业设计工具,但并不是只适合UX设计专业人士,开发人员,设计师和交互设计师,包括其他更多的人都可以使用。

草图设计和原型设计

简单的使用纸和笔就可进行草图或者原型设计。尤其是纸质原型有很多优点,快速,简单,廉价,利于原型分组设计。

10 Paper Prototype in What Is User Experience Design? Overview, Tools And Resources

草图或原型设计的常用软件:

A/B测试软件

A/B测试(又叫分离测试或多变量测试)对比不同版本的页面,并且支持多方案测试。

11 Ab Test in What Is User Experience Design? Overview, Tools And Resources

一般,A/B测试软件将站点流量均等的分成两部分,分别对应两个不同的版本,分别统计两者的转化率和跳出率。分割测试基于统计结果来判断哪个设计版本更好。Google的Website Optimizer是最流行的A/B测试软件之一。

内容清单软件

有大量的方法管理内容清单。用一个现场服务器程序(为此你需要访问Web服务器)是最好的制作网站的方法。和第三方软件相比,这些应用程序显得更加高效和自然。你可以使用类似于Excel一样简单的工具来创建和管理内容清单。(参考GetUXIndex()template)。

23 Add Content Inventory Getindex in What Is User Experience Design? Overview, Tools And Resources

WordPress和Drupal等类似的网站都内建了内容管理系统,可以显示站点地图。

用户测试和反馈软件

用户访谈另外一种流行的UX设计方法。最高效最节约成本的方法是使用一个调查反馈程序和远程用户测试

用户反馈工具非常多。如PoolDaddy普查工具,还可以用于其他工作的灵活的解决方案。还有特殊用处的反馈工具Usabilla以及可提供远程测试服务以及管理评估者的可用性测试的Feedback Army

等类似软件。

分析软件

UX设计师可以从流量分析中猜测怎样做可以提高网站使用者的用户体验。

12 Analytics in What Is User Experience Design? Overview, Tools And Resources

比方说数据显示Google Chrome是最流行的浏览器。Google Chrome是一个功能非常强大的浏览器(比起IE,Chrome更加主流)。从这个假设开始,UX设计师为吸引有能力的技术娴熟的用户设计出更适合他们的用户体验。

Google Analytics是一个功能强大免费的分析软件。

UX专业网站


有很多网站讨论UX,列举一小部分如下。

UX Magzine

UX Magzine,有大量的关于如何提高用户体验的高质量的讨论。

13 Uxmagazine in What Is User Experience Design? Overview, Tools And Resources

UX Booth

一个用户多作者聚合,UX设计交流社区。也包含可用性和交互设计方面的东14 Uxbooth in What Is User Experience Design? Overview, Tools And Resources西。

 

User Interface:Stack Exchange

beta阶段,UI Stack Exchange(Stack Overflow子集)是一个给UI研究者和专家问答的网站。

43 Add Site Ui Stackexchange in What Is User Experience Design? Overview, Tools And Resources

Stack Overflow

一个流行的编程Q&A网站,有很多精彩的关于UX可用性的讨论。

44 Add Site Stackoverflow in What Is User Experience Design? Overview, Tools And Resources

UX Exchagne

一个社区网站,成员可问一些关于可用性,可访问性以及交互性等和用户体验相关的问题。

15 Uxexchange in What Is User Experience Design? Overview, Tools And Resources

User Interface Engineering

UIE是世界上最大的可用性研究组织。其网站经常发布一些文章这研究成果。

16 Uie in What Is User Experience Design? Overview, Tools And Resources

UXmatters

UXmatters上是一个网络电子杂志。文章涉及用户体验策略,UX规则信息等等。

17 Uxmatters in What Is User Experience Design? Overview, Tools And Resources

52 Weeks of UX

Joshua Porter and Joshua Brewer创建了该站点,相关主题为“真正的用户体验设计(the process of designing for real people)”。

18 52weeks Ux in What Is User Experience Design? Overview, Tools And Resources

Boxes and Arrows

Boxes and Arrows口号是:致力于实践,创新和设计的讨论。因此站点上常常登出一些比较拔尖关于UX的文章。

19 Boxes Arrows in What Is User Experience Design? Overview, Tools And Resources

 

Semantics

Semantic Studios的创始人,Peter Morville,其公司在信息架构,用户体验以及可检索性查询处于领先地位,他在该blog中写一些用户体验相关的文章。

24 Add Site Semantics in What Is User Experience Design? Overview, Tools And Resources

UsabilityPost

Dmitry Fadeyev的blog记录一些功能设计方面的文章。

25 Add Site Usability Post in What Is User Experience Design? Overview, Tools And Resources

101 Things I Learned in Interaction Design School

交互设计和UX设计密切相关,该blog提供一些相关的简短的但容易理解的文章。

26 Add Site 101 Interaction Design School in What Is User Experience Design? Overview, Tools And Resources

UX Quotes

一些关于UX话题的引用片段

Ux-1 in What Is User Experience Design? Overview, Tools And Resources

Outes From the User

用户体验关系一切用户(为什么角色很重要)。Tumblr博客讲述了一些UX相关的故事,来自不同的特点或者不同系统的用户。

28 Add Site Quotes From User in What Is User Experience Design? Overview, Tools And Resources

everydayUX

FourSquare产品总监的blog,Alex Rainert,经常和大家交流一些信息和交互设计的想法。

29 Add Site Everyday Ux in What Is User Experience Design? Overview, Tools And Resources

Konigi

为UX设计是提供新闻,资源和工具Ux-2 in What Is User Experience Design? Overview, Tools And Resources

90 percent of everything

以用户体验为主导的网站,Brignull 分享一些关于信息架构用户体验以及良好设计相关的文章。

31 Add Site 90percenteverything in What Is User Experience Design? Overview, Tools And Resources

DarkPatterns.org

讨论一些基本用户体验设计模式,帮助UX设计师找到合适的设计模式,以制作良好的用户体验产品。

32 Add Site Dark Patterns in What Is User Experience Design? Overview, Tools And Resources

Johnny Halland Magazine

关于UX设计和交互设计的Web杂志33 Add Site Johnny Holland Magazine in What Is User Experience Design? Overview, Tools And Resources

 

UX Pand

致力于提供UX相关的搜索服务34 Add Site Ux Pond in What Is User Experience Design? Overview, Tools And Resources

 

Adaptive Path Blog

Adaptive Path,一个领先的UI设计UX设计的公司,开设的个blog,一些有用的UI和UX的文章。

35 Add Site Adaptive Path Blog in What Is User Experience Design? Overview, Tools And Resources

Putting People First

提供一些关于UX和“用户为中心”链接,文章,资源和新闻,由意大利设计公司Experientia创建。

Ux-3 in What Is User Experience Design? Overview, Tools And Resources

nFrom Blog

nForm的blog发表一些给UX设计师看的优秀的文章。

37 Add Site Nform Blog in What Is User Experience Design? Overview, Tools And Resources

Viget Advance

一个web产品公司的网站,UX相关。

38 Add Site Vigetadvance Blog in What Is User Experience Design? Overview, Tools And Resources

useit.com

Jakob Nielsen,备受关注的可用性研究者,和突破性作家,一可用性和UX为主题写一个叫Alertbox的专栏。

Ux-4 in What Is User Experience Design? Overview, Tools And Resources

UX Array

Sara Summers,微软用户体验传播者。

40 Add Site Ux Array in What Is User Experience Design? Overview, Tools And Resources

UI and Us

UI and Us 是“关于用户界面设计,用户体验设计以及设计背后的认知心理”。

41 Add Site Uiandus in What Is User Experience Design? Overview, Tools And Resources

UX Storytellers

用专业方法中的一种(讲故事)来给UX,UI和IA专业人士讲故事

42 Add Site Ux Storytellers in What Is User Experience Design? Overview, Tools And Resources

源地址:What Is User Experience Design? Overview, Tools And Resources

2010年10月4日 / island205

【译】屏幕设计模式

模式是广泛适用的解决一般问题的解决方案。与此相反:

  • 指南:具体规则
  • 原则:指南的概念型框架

在开发应用程序过程中,无论是面对抽象还是实际问题,模式都大有用处。

它们是解决问题的模板。而标准屏幕模式对于优秀的Web程序甚至企业级软件都很有帮助。

image

摘要/细节(Master/Detail)

摘要/细节模式可横向也可竖向。该模式是满足用户既停留在一个页面又可浏览多个条目需求的典范。

横向

image

image

纵向

image

典型的摘要面板包含:

  • 列表

image

image

  • 折叠板

image

  • 表格

image

而细节面板可能是一个:

  • 文本
  • 小图片/图标(icons)
  • 表格
  • 图表

image

  • 表单

image

最佳实践

显示主窗格的数据量,例如:Inbox(34)

左边使用列表、树、表格等组件的时候,最好包含其标准的操作(添加、删除、重命名、拖放等)

不要在摘要或者细节板块中使用tabs(标签)

在摘要板块显示更多的信息,例如主题或者描述,横向布局是一个不错的选择。

image

image

image

image

image

最佳实践

不要把面板底部当作表格的编辑区。可以使用Spreadsheet模式代替,或者一个高亮显示的层来作为编辑区。

分列浏览(Column Browse)

该模式可横可竖。该模式适用于用户可以从很多入口点导航到他们需要的地方。

纵向

image

image

image

image

横向

image

image

image

image

竖直的条目结构通常可为:

  • 列表
  • 分列表
  • 折叠板

通常3-4栏,往往包含一个全局的搜索模块

最佳实践

只在第一列显示有子节点项目

在标签中加上它所显示的条目数量

很多运用这种模式的程序都提供了一个备用的导航接口,比如树、小图标或者表格视图。

当每个细化列中有很条目很少(少于20个),而且在细节框中有表格或者图形的内容,水平布局是更好的选择。

搜索/结果(Search/Result)

搜索/结果模式可以很简单,也可以很复杂。对于用户需要直接快速的定位所需条目或者设置条目的特殊规则是非常有用,高效的用户体验。

简单搜索

image

image

image

高级搜索

image

image

image

通常,结果显示为:

  • 列表
  • 表格(只读/可编辑)
  • 小图标
  • 地图

搜索返回的数据:

  • 默认排列方式
  • 默认分组方式

image

除了简单的显示最初搜索结果,一般还会附加一些搜索的条件和完善的功能。

最佳实践

除了显示一个简单的搜索框,最好框内包含”key words”字样。

提供便捷的清楚搜索结果的方式(一点完成)。

在同一屏下显示搜索结果。

在企业级运用中通常需要高级的搜索。

高级搜索通常包含如如下一个或者多个功能:

  • 多条件搜索
  • 自定义搜索(可保存)
  • 可定制范围搜索
  • 保存搜索条件
  • 保存搜索结果

image

  • 多次搜索组合到一个列表

image

image

最佳实践

在同一个屏幕上提供高级的搜索条件,NO 弹出框或者分屏。

不要让用户预设搜索域,可按需求设置一个附加功能。比起放在搜索框后面的下拉类表,将其整合到搜索框内更加完美。

image

数据过滤(Filter Dataset)

横纵向皆可,适于用户过滤已知的的数据,或者进一步过滤搜索数据。

纵向

image

image

image

image

横向

image

image

过滤块通常有以下这些组件构成:

  • 文本框
  • 滑块
  • 复选框
  • 列表框
  • 间隔列表框UI
  • 日期范围选择器

最佳实践

动态的过滤结果(无提交按钮),可以使用一个定时器实现。

突出“Clear all filters”按钮

左侧过滤区最好不要使用多个可折叠板

水平布局给结果显示提供了更大的宽度。这种方式便于在简单搜索下面结果集上面扩展一个高级搜索。

Roost和Omio尝试标签化区分不同的类的过滤条件。然而,缺点在于用户不能同时看到所有的过滤条件。

image

最佳实践

如果用户搜索过滤后得结果为空,非常有必要给用户一个清楚的反馈和回复选项。

image

不要为了节约一套过滤而添加新的功能。这个可以考虑用搜索(高级搜索)模式

表单(Forms)

任何表单设计都需要对可用性设计和最佳实践有深刻的理解,请参考Luke Wroblewski的书《Web Form Design:Filling in the Blanks》

image

image

image

最佳实践

通常为左对齐一列式。

image

image

Label放在上边或者左边;在整个应用中保持一致的结构。

image

image

image

image

左对齐命令按钮。

标注清楚必填域。

为用户的每个操作给出清晰的反馈

给出清楚的错误信息和帮助

image

参考37signals的《Defensive Design for the Web》

调色板/画布(Palette/Canvas)

image

image

image

image

image

image

image

很少被正确使用的模板,但是它是唯一在文档制作和设计中使用的模式:

  • 线性或非线性工序
  • 流程图
  • 屏幕布局
  • 任何受到实际大小约束的设计或图表

最佳实践

提供明确的“空白状态”信息来说明开始

提供模板

按类型组织调色板中的对象,尽量可视化

提供可视的网格选项便于点击

提供撤销和重做功能

提供一个项目管理区来管理画布(分组,复制,编辑以及删除画布)

仪表盘(Dashboard)

image

image

image

image

仪表盘是一个被严重滥用的模式,一个优秀的仪表板提供:

  • 关键信息一览

image

  • 实时数据
  • 易读的图表
  • 明确的切入点

这不是简单一屏度量就可以实现的(一个大的表格或者简单一堆图表)

高度定制化无法取代用户研究和测试

image

设计最佳实践

  1. 选择要显示的数据
  2. 依照实际用户确认
  3. 删掉一半
  4. 再次依照用户确认剩下的元素
  5. 选择组件和布局,创建3-4方案用于测试
  6. 全部修订——关键是数据

电子表格(Spreadsheet)

电子表格模式允许用户便捷的浏览修改和键入(大量)数据信息来提高用户体验

image

image

image

需提供以下功能:

  • 标准的表格功能:分类,显示/应藏列,重排列,分组
  • 重做/撤销
  • 添加,插入,删除行

image

  • 键盘导航
  • 导入导出

最佳实践

从视觉上区分可编辑表格(没有斑马线)和只读表格(使用斑马线)。

指明哪些列可编辑,计算,和/或

不要进行多行或多单元格编辑——单击即可编辑单个单元格或单行

image

image

image

点击行或者单元格才显示编辑器

出错信息提醒

向导(Wizard)

对于引导用户进行一些复杂的不常见的工作流程,该模式能有效的提高用户体验。

image

image

image

image

最佳实践

最小化步骤

如果超过五步,在任务层分组,不要编号(类似于亚马逊的购物车)

image

清晰的说明每个步骤

只在一些不常见的工作流程中使用该模式:设置、安装、修复、填写复杂的申请或者表单、提供给有经验用户选择性推出

image

显示正在进行的步骤,允许用户“回退”到上一步

Q&A(Question&Answer)

该模式下,用户可输入已知的信息来获得解决方法。

image

image

image

QA模式和搜索模式不一样的地方在于前者在用户不熟悉的地方提供一些可能的选项和建议。

例如,“我需要一个合适的抵押贷款”,与下个星期五订一张从AUS到JFK的机票不一样,当我看着搜索出来的抵押贷款的结果,缺乏专业知识来对比选择搜索结果。QA模式可以根据我在提问板块提供的信息来给出最佳的选择。

最佳实践

在问题模块允许用户指定其目标(超过十年以上的房屋居住权,低扣税,高医保(co-pay))

提供回答的评价:赞成/反对

平行板  is OK?=平行板:折叠板(Parallel Panels)

平行板模式有折叠(每次显示一个项目)和展开(一次显示所有项目)状态。这种模式易于用来组织相似互相依赖的的多块信息,一屏显示大量信息。

image

image

image

最佳实践

把折叠板放在左下角,把目标放在屏幕的上面、下面或者右边。

image

用对比和边距来突出折叠板,和屏幕下边缘保持一定的距离

整个面板都可点击,不单单是文本块

三到五个面板为佳

展开模式的平行板被应用在:

  • 需要同时显示所有工具的程序
  • 对话框-可折叠面板比起tabs标签,用户更加易于操作

image

最佳实践

如果项目有层次或连续的关系,那折叠板模式就不适合了,可以试试摘要/细节或者向导模式

不能嵌套

互动模型(Interactive Model)

有很多和关键对象(一个日历,地图,图,表,画布)联系的可交互元素是互动模式的特点。一个理想的用户体验模型,与用户的心理模型紧密结合。

image

image

image

该模式可候选:

  • 日历

image

image

  • 地图
  • Gantt 图标
  • 假定情景(包括计算表)

image

  • WYSIWYG 编辑器(包括图形编辑器)

image

最佳实践

用户可快速获得交互对象(批量加载,少量问题,模板,合理的默认设置)

避免弹出窗口,直接互动最佳,拖动,缩放,删除,双击创建……

2010年10月4日 / island205

一枚Notepad的WordPress主题模板

一款由N.Design设的非常漂亮的主题模板,值得学习和借鉴。

notepadbloggertemplate2

520px内容页,270px边栏,固定宽度布局,非常简洁美观,CSS3圆角阴影等效果,GPL授权。

还有主题配置页面非常方便。

notepad-options

点击下载

源地址

2010年10月4日 / island205

HTML5在线阅读

s4251980

该书已有,但国内无中文版,给出个网络英文版(不全)阅读地址:

DIVE INTO HTML 5

捕获 

大家一起学习吧!

2010年10月4日 / island205

[译].Google Chrome extensions(实验室).浏览器交互.历史

chrome.history

chrome.history模块可以和浏览器记录的浏览历史交互。你可以历史中添加、删除、搜索URLS。用自己喜爱的页面来覆盖历史页,更多Override Pages

Manifest

你必须在配置文件extension manifest中取得“history”的授权才可以使用history API。示例如下:

   1:  {
   2:    "name": "My extension",
   3:    ...
   4:    "permissions": [
   5:      "history"
   6:    ],
   7:    ...
   8:  }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

过度类型

history API使用一种过渡类型来描述浏览器如何在某个特定的访问中导航到特定的URL。比如说,某个用户通过点击某个网页的链接来访问其他网页,这种过度类型称为“link”。

下表对每个过渡类型的具体描述:

过渡类型

描述

“link” 用户点击页面链接所到达的页面
typed 地址栏输入URL导航到的页面。还用于其他一些明确的导航动作。查看generated,一种用于用户选择一种看起来不像URL的地方。
“auto_bookmark” 用户通过UI得到的页面——比如说,通过一个菜单项。
“auto_subframe” 子框架导航。这个属于非顶级框架的内容。比如一个包含有广告的一些框架的网页,这个URLs是这种过渡类型。用户甚至认识不到这类页面在子框架内,所以可能不关心这类URL(参见manual_subframe
manual_subframe 对于用户明确要求的子框架里的导航,将产生新的实体添加进后退/前进列表中。一个有用户明确请求的框架要比自动加载的框架重要,因为用户或许更加关心所请求的框架已经被加载。
generated 用户通过向地址栏中输入选择了某个不像URL的条目达到的页面。例如,某个Google搜索结果的页面所拥有的URL,但是它常以“在谷歌搜索……”,这个和typed类型的导航不太一样,因为用户并不输入或者看目的URL。参考keyword
“start_page” 在命令行的启动参数就设置的URL或者是开始页面。
“form_submit” 用户填写表单,并且提交了表单。注意某些特殊的情形——用脚本提交的内容的表单——这样提交的表单不会产生此类过渡类型。
“reload” 不管用户是点击刷新按钮还是在地址栏里回车,产生的刷新页面。恢复的会话或者重新打开的标签页也使用该种类型。
keyword 该URL产生于一个可替换的关键字,而不是由搜索提供的默认关键字。
参考keyword_generated
keyword_generated 为关键字生成的一个对应的访问。参考keyword

示例

API如何使用,参看history sample directoryhistory API test directory。其他示例或者源码阅读帮助,请参看Samples

API参考:chrome.history

方法

addUrl

   1:  chrome.history.addUrl(object details)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     在当前时间 以一过渡类型“link”添加一个URL到历史中。

     参数

     details(object)

     url(string)

          将要添加的URL

deleteAll

   1:  chrome.history.deleteAll(function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     删除所有历史记录

     参数

     callback(function)

     Callback function

     需要的话,如下声明callback参数

   1:  function() {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 deleteRange

   1:  chrome.history.deleteRange(object range, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      删除指定的时间范围的历史记录。非指定时间范围的记录不会被删除。

      参数

      range(object)

             startTime(number)

                   在此时间后历史记录,从新纪元开始计数的毫秒数

             endTime(number)

                    在此时间前添加的历史记录,从新纪元开始计数的毫秒数

       callback(function)

       Callback function   

       需要的话,如下声明回调函数

   1:  function() {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

deleteUrl

   1:  chrome.history.deleteUrl(object details)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     删除所有与给定URL匹配的历史记录

     参数

     details(string)

          url(string)

              要删除的URL

getVisits

   1:  chrome.history.getVisits(object details, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      检索某个URL的信息

      参数

      details(object)

           url(string)

               指定检索信息的URL,它必须是调用history .search返回的一个某种格式。

      callback(function)

      Callback function

      如若需要,如下定义回调函数

   1:  function(array of VisitItem results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      results(array of VisitItem)

search

   1:  chrome.history.search(object query, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      检索每个匹配查询页面的最后一次访问。

      参数

      query(object)

            text(string)

                  随便一个查询文本,为空时查看所有的历史页面

            startTIme(可选 number)

                  从该时间开始检索浏览历史,从新纪元开始计数的毫秒数

           endTime(可选 number)

                  检索该时间以前的浏览历史,从新纪元开始计数的毫秒数

             maxResults(可选 integer)

                  检索的结果的最大数,默认为100

      callback(function)

      Callback function

       如若需要,如下定义回调函数

   1:  function(array of HistoryItem results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

       results(array of HistoryItem)

事件

onVisitRemoved

   1:  chrome.history.onVisitRemoved.addListener(function(object removed) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      当一个或者多个URLs从历史记录中被移除时触发。当某个URL的所有浏览都被删除时,该URL从历史中被清除

      参数

      removed(object)

            allHistory(boolean)

                  当所有历史记录被清除时为true,如果为true则urls将被清空

            urls(可选 array of string)

onVisited

   1:  chrome.history.onVisited.addListener(function(HistoryItem result) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      当某个URL被访问是触发,把HistoryItem数据提供给URL。

      参数

      result(HistoryItem)

类型

VisitItem

(object)

        一个分装了对一个URL的一次访问。

         id(string)

                每个条目的标识符

         visitedId(string)

               该次访问的唯一标识符

          visitTime(可选 number)

               发生访问的时间,从新纪元开始计数的毫秒数

          referringVisited(string)

                指向visit_id的指针

          transition(string)

                该浏览指向的过渡类型transition_type

HistoryItem

(object)

         一个封装一次历史查询结果的对象

         id(string)

              每个条目的唯一标识

        url(可选 string)

              用户导航到的URL

        title(可选 string)

              历史页面的标题

         lastVisitTime(可选 number)

              何时该页面最后一次被加载,从新纪元开始计数的毫秒数

        visitCount(可选 integer)

               用户浏览该页面的次数

         typedCount(可选 integer)

               用户以在地址栏输入地址导航到该页面的次数

2010年10月4日 / island205

[译].Google Chrome extensions(实验室).浏览器交互.事件

Events

     一个事件是一个对象,相关事件发生的时候将会得到报告。这是一个运用chrome.tabs.onCreated事件报告一个新标签的创建:

   1:  chrome.tabs.onCreated.addListener(function(tab) {
   2:    appendToLog('tabs.onCreated --'
   3:                + ' window: ' + tab.windowId
   4:                + ' tab: '    + tab.id
   5:                + ' index: '  + tab.index
   6:                + ' url: '    + tab.url);
   7:  });

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

如例所示,使用addListener()来注册报告。传给addListener()的参数一般是一个函数,用来处理事件,但是这个函数的参数依赖于需要处理事件的类型。查看文档更多关于chrome.tabs.onCreated。这个函数只有一个参数:一个Tab对象拥有新建的tab的细节信息。

方法

      对于一个Event对象你可以调用如下方法:

   1:  void addListener(function callback(...))
   2:  void removeListener(function callback(...))
   3:  bool hasListener(function callback(...))

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

目录:http://island205.coolpage.biz/?p=37

原文链接:http://code.google.com/chrome/extensions/events.html

2010年10月4日 / island205

[译].Google Chrome extensions(实验室).浏览器交互.书签

书签

使用chrome.bookmarks模块可以随意的添加、组织和操纵书签。

bookmarks

Manifest

你必须在extension manifest配置文件中声明“bookmarks”授权来使用书签API。

   1:  {
   2:    "name": "My extension",
   3:    ...
   4:    "permissions": [
   5:      "bookmarks"
   6:    ],
   7:    ...
   8:  }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

对象和属性

我们用树组织管理书签,每个节点是一个书签或一个书签组(包含若干书签的文件夹)。用BookmarkTreeNode对象来代表书签树的每个节点。

BookmarkTreeNode属性在chrome.bookmarks API中到处都会用到,例如:在调用create()时,给新节点传送的父节点属性(parentId),以及,节点的索引(index)、名称(title)和url属性等。点击查看更多关于BookmarkTreeNode更多拥有属性的相关信息。

示例

下面的代码创建了一个名为“Extension bookmarks”的书签文件夹,create()第一个参数指定新书签文件夹的属性,第二个参数指定创建文件夹后的回调函数。

   1:  chrome.bookmarks.create({'parentId': bookmarkBar.id,
   2:                           'title': 'Extension bookmarks'},
   3:                          function(newFolder) {
   4:    console.log("added folder: " + newFolder.title);
   5:  });

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

下面这个小片段创建了一个书签节点指向扩展开发者文档,既然创建书签失败不会发生什么不好的事情,所以没有定义回调函数。

   1:  chrome.bookmarks.create({'parentId': extensionsFolderId,
   2:                           'title': 'Extensions doc',
   3:                           'url': 'http://code.google.com/chrome/extensions'});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

一个使用书签的简单的例子,basic bookmarks sample,其他示例或者查看源码的帮助,看Sample

API参考:chrome.bookmarks

Methods

create

   1:  chrome.bookmarks.create(object bookmark, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      在某个书签文件夹下,创建一个书签或者书签文件夹,url为空则创建书签文件夹。

      参数

      bookmark(object)

                 parentId(string)

                 index(可选 integer)

                 title(可选 string)

                 url(可选 string)

       callback(可选 function)

       Callback function

        需要定义可以回调函数的话,像下面这样:

   1:  function(BookmarkTreeNode result) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

        result(BookmarkTreeNode)

get

   1:  chrome.bookmarks.get(string or array of string idOrIdList, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      获取某个书签节点BookmarkTreeNode(s)。

      参数

      idOrIdList(string or array of string)

             一个id字符串值,或者多个id字符串数组

      callback(function)

      Callback function

      需要定义可以回调函数的话,像下面这样:

   1:  function(array of BookmarkTreeNode results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     results(array of BookmarkTreeNode)

getChildren

   1:  chrome.bookmarks.getChildren(string id, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     获取某个书签节点的子节点

      参数

      id(string)

      callback(function)

      Callback function

       需要定义可以回调函数的话,像下面这样:

   1:  function(array of BookmarkTreeNode results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      results(array of BookmarkTreeNode)

getRecent

   1:  chrome.bookmarks.getRecent(integer numberOfItems, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      取得最近添加的书签

      参数

      numberOffterms(integer)

             返回的最大书签个数

      callback(function)

      Callback function

      需要定义可以回调函数的话,像下面这样:

   1:  function(array of BookmarkTreeNode results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      results(array of BookmarkTreeNode)

getTree

   1:  chrome.bookmarks.getTree(function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      获取整个书签组

      参数

      callback(function)

      Callback function

      需要定义可以回调函数的话,像下面这样:

   1:  function(array of BookmarkTreeNode results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     results(array of BookmarkTreeNode)

move

   1:  chrome.bookmarks.move(string id, object destination, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      移动书签节点

      参数

      id(string)

      destination(object)

             parentId(string)

             index(可选 integer)

             callback(可选 function)

       Callback function

       需要定义可以回调函数的话,像下面这样:

   1:  function(BookmarkTreeNode result) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      result(BookmarkTreeNode)

remove

   1:  chrome.bookmarks.remove(string id, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      从书签文件夹中删除一个书签

      参数

      id(string)

      callback(可选 function)

      Callback function

       如过需要,如下定义回调函数:

   1:  function() {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

removeTree

   1:  chrome.bookmarks.removeTree(string id, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      移除书签文件夹

      参数

      id(string)

      callack(可选 function)

       如果需要,如下定义回调函数:

   1:  function() {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

search

   1:  chrome.bookmarks.search(string query, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      搜索匹配的书签节点

      参数

      query(string)

      callback(function)

      Callback function

      如果需要,如下定义回调函数:

   1:  function(array of BookmarkTreeNode results) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     results(array of BookmarkTreeNode)

update

   1:  chrome.bookmarks.update(string id, object changes, function callback)

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      更新书签或者书签文件夹,只更新你指定的属性,未指定的将不变。注意:到目前为止,只有title和url属性可以修改。

      参数

      id(string)

      changes(object)

            title(可选 string)

            url (可选 string )

      callback(可选 funtion)

      Callback function

      如果需要回调函数,需如下定义:

   1:  unction(BookmarkTreeNode result) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      result(BookmarkTreeNode)

Events

onChanged

   1:  chrome.bookmarks.onChanged.addListener(function(string id, object changeInfo) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      某个书签或者书签文件夹改变的时候出发,注意:目前为止只有title或者url改变可触发该事件。

     参数

     id(string)

     changeInfo(object)

            title(string)

             url(可选 string)

onChildrenReordered  

   1:  chrome.bookmarks.onChildrenReordered.addListener(function(string id, object reorderInfo) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      书签文件夹下的书签顺序的改动可以出发该事件。但并不能被remove()触发。

      参数

      id(string)

      reorderInfo(object)

             childIds(array id string)

onCreated

   1:  chrome.bookmarks.onCreated.addListener(function(string id, BookmarkTreeNode bookmark) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      书签或者书签文件夹被建立时触发。

      参数

      id(string)

      bookmark(BookmarkTreeNode)

onImportBegan

   1:  chrome.bookmarks.onImportBegan.addListener(function() {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      导入书签时触发。观察器需忽略handleCreated更新,直到onImportEnded被触发。观察器仍然处理其他触发事件。

      参数

onImportEnded

   1:  chrome.bookmarks.onImportEnded.addListener(function() {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      在书签导入结束是触发

      参数
onMoved

   1:  chrome.bookmarks.onMoved.addListener(function(string id, object moveInfo) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      当某个书签或者书签文件夹被移动到其他位置时触发

      参数

      id(string)

      moveInfo(object)

             parentId(string)

             index(integer)

             oldParentId(string)

             oldIndex(integer)

onRemoved

   1:  hrome.bookmarks.onRemoved.addListener(function(string id, object removeInfo) {...});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

      当书签或者书签文件夹被删除的时候触发该事件。当一个书签文件夹被删除时,只对该文件夹触发该事件,对与其子节点无触发。

      参数

       id(string)

       removeInfo(object)

              parentId(string)

              index(integer)

类型

BookmarkTreeNode

(object)

        书签数的一个节点(书签或书签文件夹)。子节点(书签或书签文件夹)排列在其父节点(书签文件夹)中。

       id(string)

        节点唯一标识,IDs在当前配置文件中是唯一的,就算重启了浏览器后也是有效的。

       parentId(可选 string)

        父节点的标识,根节点默认省略。

       index(可选 integer)

        以0开始计数的在兄弟节点中的位置

        url(可选 string)

        当用户点击书签导航到的URL,书签文件夹省略

       title(string)

       每个节点显示的内容

       dateAdded(可选 number)

        节点创建的时间。从新纪元(new Date(dateAdded))开始毫秒计数的值。

       dateGroupModified(可选 number)

       节点内容被修改的时间。从新纪元开始毫秒计数的值。

       children(可选 array of BookmarkTreeNode)

       节点的子节点序列

目录:http://island205.coolpage.biz/?p=69

原文链接:http://code.google.com/chrome/extensions/bookmarks.html

关注

每发布一篇新博文的同时向您的邮箱发送备份。

%d 博主赞过: