Category Archives: Ria

Silverlight Expression Studio Flash

Windows Phone app的设计过程

原文http://ux.artu.tv/?p=192
译文http://www.mdong.org/?p=2232

译者注:
原文的作者为Windows Phone Design Studio的设计师,虽然话语啰嗦,但是能够感受到许多Windows Phone设计完善过程中的细节。重要的一释疑是业内对Windows Phone开发环境封闭的以讹传讹,至少从app设计角度,Windows Phone的心态是开放的。并致力于提升产品创造的团队效率。思维方式不限于Windows Phone,同样适用于其它平台的产品参与者。

这里有一个我在使用的Windows Phone app的设计过程。其中许多设计过程阶段是传统的,我尝试从Windows Phone app特别的视角来阐释。

这篇文章是关于end-to-end的过程,所以会保持其高视角,并在下面的文章里详细的探索每一个步骤。比如,下周我们会从理念与概念开始,关于讲故事(storytelling)、草图(Sketching)、故事板(storyboard)与低保真原型(low fidelity prototype)。这篇文章会是系列内容的轴线。但是并不确定会不会基于反馈重新定义(refine)某些阶段,以及增加更多的示例。

图表自下向上读……

Windows Phone设计过程与其它的网站、移动app或任何设计没有本质不同。所有的设计师重视设计过程,用他们自有的方式调整、完善设计,并改变适用于每一个项目。没有项目是相同的,因此非常重要的是以指南(guidelines)理解设计过程而不是规则(rules)。保持灵活性(flexible)。

理解“设计”,设计不是按快门(one-shot)这类活动。你不能凭借一次尝试既确定设计,而是像创作雕塑作品,有一个迭代过程。艺术家拿到一组大理石,他们不会从细节开始,如眉毛、指甲或者头发。而是第一步先塑造整体的感觉,主要的体感与大块。接着第二步定义更多的特性区块,如手臂、胸、头与腿。随后有第三步、第四部与第五步。达到刻画小细节的程度需要经过许多步骤。用户体验设计同理。你不能从细节开始,最终会让你自食其果。应用程序流程(Application Flow)需要在视觉设计(Visual Design)前定义。我看到过许多类似事情的发生,他们尝试跳过一些步骤走捷径,而缺乏设计探索(design exploration)最终得到的是随后项目中的暴怒。

应用主题(App Theme)

我们从应用主题开始。这个是第一个可能产生分歧的点。我只是知道应用主题对于创建接下来的阶段非常重要。我注意到当开始app设计过程我们通常有两个选择。1,已经有一个我们想做的、非常清晰的idea;2,我们有一个目标,基于现有的API与Web Service。但两个途径在我看来都是错的。如果你有一个清晰的idea,你知道你决定了自己与团队的解决方案,但还没有通过探索验证。如果你决定创建一个app基于现有的API或者Web Service,你会最变成另外一个Twitter、Yelp!或者Foursquare 客户端或者另一个从Yahoo获取数据的股票软件!金融或者另外一个从CNN获得内的RSS聚合器……从Marketplace上搜索CNN你就知道我正在说什么。即使这些app有好的体验。相信我,他们无法突围或者为用户做出贡献。不要想APIs或者RSS Feeds。想想用户体验。所以替代的思路是”哇哦……CNN的RSS Feed是可用利用的“ ”我们如何为用户在获得最新与关联且重要的新闻的体验做出贡献?”尽快思考这些,越早为自己与团队打开一个新世界的探索。不再是RSS阅读器,现在你有一个更高的目标,史诗般的任务来帮助用户获得更多关联且重要的新闻。因为对象是宽广的,解决方案是不具体的,这才是想要的点。你保持开放,所以你会探索并拥有革新的idea。替代基于APIs的思考,而基于体验思考,如跑步体验、进餐体验、航行体验,询问自己与团队,你如何为你的用户做出贡献提升体验。注意这并不是必要地意味着解决全部的体验……它意味着只是解决X或Y部分的体验,用户趋向难以发现的地方或者你看到一个机会可以帮助用户发挥全部潜能。在随后的开发过程中,你会选择你会选择API或RSS Feed从任何源,但是起点一定不是技术解决方案。最流行的Twitter或Foursquare客户端都是成功的因为它们将体验放在第一位——而不是API。

现在如果你已经有客户端的app服务于特定的产品服务,或你正在移植iPhone或Android app到Windows Phone,请做好准备,针对主题进行重新定义(refine)。在许多的情况下,受制于预算或委托人,你需要直接跳到信息架构(Information architecture)阶段。然而真诚地说,即便由委托人雇佣你移植一个iPhone/Android app到Windows Phone,请依然做好主题、理念与信息架构的重定义准备。事实上这不是一个坏消息,一旦你进入了信息架构与交互设计(Interation Design)阶段,会得到最好的Metro设计语言:Pivots、Panoramas、App Bar、List View、Typography、布局与动画。当从其它平台移植app,你的工作会变成:1,理解这些平台上的当前信息架构,并用Metro翻译它们到正确的屏幕、内容视图与导航。基本的事情是理解当从iPhone与Android迁移时,你不能迁移UI。你迁移的信息架构。通过思考与实践,你会预防错误的转化过程……如当人们尝试从iPhone迁移返回按钮(通常是屏幕左上角的按钮)到Windows Phone……你在Windows Phone上不需要一个屏幕上的返回按钮,因为我们有一个硬件的返回按钮。所以,遵循思考“迁移IA”比“迁移UI”要更合适。

理念与概念(Ideation & Concept)

现在你有一个主题或者任务,到了为其产生idea的时间~理念与概念阶段非常有趣!——就像是在玩游戏。头脑风暴(Brain storming)的游戏,草图游戏讲与讲故事的游戏。在这个部分有三个关键阶段:1,头脑风暴;2,探索;3,合并(Consolidation)。概况来说,在头脑风暴阶段你产生了大量的idea,在探索阶段你详细分析与研究许多idea(但不是全部),在合并阶段你决定哪些idea会继续向前变成app一部分。只有少数的idea会存活。


完全自由的头脑风暴

这个阶段的目标是产生关联任务的大量idea,如“贡献酒店预订的体验”。想象力(Imagination)、妄想(delusion)与古怪(craziness)是在这个点上都是好的技巧。让自己有玩的心态,思路跳出思维框架。有需多具体的头脑风暴练习如Subject+Verbs+Objects与扩展思路的Alternate Worlds、Impossible Scenarios与In Other‘s Shoes。我们会在下一篇文章讨论所提到的技术。这些游戏你可以与团队一起参与,如果你是独立开发者你可以跟朋友一起参与。这个阶段的目标不是强迫你疑虑“你如何build或编写这个或那个”。也不是关于这些东东长什么样。它是关于产生idea的。在接下来的几个阶段,这些idea会落地执行。后面,就像我们知道的,有百万个非常好的idea,但是只有一个或者两个会被恰当执行,并且成功。

探索分析/审查/测试(Exploration Dissect/Inspect/Test Ideas)

在探索阶段你会得到头脑风暴中脱颖而出的idea,并需要了解更多关于这些idea的内容。你可以通过分析、审查与测试来达到目的。这个点idea刚刚出生,它们就是孩子,没有完全的发展或成熟。然而这些idea只是头脑风暴的一部分,也许许多疯狂的idea在头脑风暴过程中已经灭了——但是有一些依然存在。你可以肯定会发现你或团队中其它人会坚信、接受并深深爱上这些idea——他们的孩子。我冒险地说这不是好事情,但同时,你需要爱上已经确定的idea,这样你就可以把其它idea推得远远儿的。有些时候idea需要发展来完全的证明。如果你太快地放弃了一个idea,也许你会失去一个好的机会。幸运的是这个阶段我们有4个非常有用的工具,允许我们探索我们的idea并发现优秀的种子:草图、故事板、简易原型与讲故事。这些工具帮助开发人员与设计人员针对idea进行测试。

拥有草图能力可以帮助你维持更多的抽象概念。故事板可以帮助你像接近皮克斯或梦工厂动画师一样讲故事。你使用手绘与故事板展现idea的用户体验情景,如何通过app来提供帮助与做出贡献。这是一个可视化的方式。原型是一个全新世界可以探索,当前重心在简易原型。这里有几种方式:一个是通过纸张、便条、卡片与胶带建立模拟原型。你可以通过手动粘贴到画布上测试情景(scenarios) 来传达交互。这类简易模型需要一个向导与测试用户。这听起来像是落伍的活动。但是它真的不是……它是非常严肃的。你会惊讶,你能在一张简易原型上用15~60分钟而不需要花一分钱,就可以收到许多反馈。在进一级的设计过程阶段不会使用简易原型,但在这个点,这是最佳选择。另外一个做简易原型的方式是使用Expression Blend(或者是Powerpoint或者其它的交互工具)。这个是Design Studio的Jared Potter第一次向我展示的复合数模技术。简单的说,你在纸上画草图、拍照、载入图像到Expression Blend,在头部的可点击区域增加透明按钮并关联导航栏。Done!他称这个是15分钟简易原型技术,我们会在下一篇文章中讲得更多。

整合产生决策 (Consolidation Make Decisions)
从头脑风暴开始得到许多idea,经历自己与团队的探索……在这里需要整合,非常好的idea会脱颖而出。这是一个决定哪一个idea会进入app的过程。有不同的练习会帮助你的团队缩减列表与基于优先级排序列表。这里的目标是移除尽可能多的不明确信息。这时,idea比起概念阶段进一步进化,并引发更多的用户情景(user scenarios)或者信息情景(information scenarios)。你需要带到下一个阶段的是一个基于优先级的情景列表。

信息架构(Information Architecture)

信息架构阶段的目标是定义信息、任务与彼此之间的关系。用户所拥有的数字体验:信息与信息利用的潜力——使用信息来帮助决策、获得关于某些事情的知识、产生信息。

信息架构是一个完整的学科。信息架构的目标是制定信息规则。

在理念与概念阶段产生的用户情景包括不定型的信息,如名字、日期、价格、图像、温度范围-在信息架构阶段你会带着不定型的信息并传递为结构化的信息。一次尝试是不可能完成的,它需要经历多个过程。

我们有两个非常有用的工具可以帮助我们定义信息框架:应用程序流程表单(Application Flow charts)与低保真原型(Low Fidelity Prototyping)。

所以在信息架构进行第一次尝试,并通过创建Flow charts进行测试。这里有不同成熟度等级,主要是从任务流程到具体屏幕+内容视图+导航表单。记得经典软件工程的Flow charts吗?这就是app flow charts,它只是一个可视化术语,我们专注在用户流程(user flow)、体验(experience)与交互设计(Interaction design)。一旦你拿到一个flow chart,你就可以尝试讲述用户情景(user scenarios)的故事。你会获得反馈与idea,用来重定义信息架构,并返回完善AI文档。这时你可以反复通过创建较高仿真的flow chart进行测试。flow charts渐渐地变得详细,从简单的任务flow到屏幕展示内容视图、导航。我不称之为高端的flow charts线框图(wireframes),确切的说是低保真框架。

另外一个工具是低保真原型(low fidelity prototypes)。在这个点纸质原型依然有用,因为低成本。无论如何,flow charts会渐渐地更高保真。你需要打印这些app flow chart并把类似的放在一起(不再是草稿、而是打印材料)或使用Jared在Expression Blend的原型技术,用拍摄的原型图像替代,把app flow程序呈现在屏幕上。

在最后你会有一个独立的IA文档,包括组织化的信息、可靠的成组flow charts与基于app flow的低保真原型。

我注意到的一件事情是,创建Windows Phone Design Process chart后,它在IA文档接近35%的高度,占有同样高度的是Interaction Design(下一阶段)。这些chart不代表在项目中占有同样的时间,但是我要说它着实正确的思考了IA应有的时间。如果你明确IA,会更加游刃有余。

最近的几个星期,我们有一篇特别的文章会关于Windows Phone apps的信息框架。

交互设计(Interaction Design)

我们已经定义了信息架构,也就是说目标用户可以使用这些信息。现在我们开始针对性制作用户界面。

交互设计是什么:创建一组用户界面与用户体验元素,用来验证良好的信息架构与用户完成信息关联的任务。我们希望在这个阶段达到的效果是传递信息与任务最大化的潜力发生。即使IA可能是刚刚完善,如果交互设计不能完全执行,这时信息中发生的事情就不会完全正确地在app中体现、用户也不能完成他们想要的任务。

依照我的观点,交互设计默认是信息与任务的过滤器(filter)。它定义的不是信息也不是任务,而是一个工具。交互设计(或用户界面)是在用户与信息之间的中间人。用其它的方式描述,用户界面(交互设计的最终形式)应该是从有罪直到证明无罪,我想这个概念关联了许多Metro法则要点:信息是展示的核心,不是用户界面。它是决定一个好(坏)设计定义的重要因素,无关用户界面层是薄、无形或者笨重。我们不谈论视觉设计,只是交互设计:用户基于现在发生的关系如何面对信息与任务交互。

如果我们没有一个Windows Phone Metro设计语言可用,这时我们需要从零开始弄明白交互隐喻。在未来的文章里我会谈论如何推动Metro,并给出一些idea与如何基于Metro革新,这篇文章里会重点定义交互设计与开箱即用(out-of-box)的Windows Phone Metro设计语言。

设计模式(Design Patterns),可靠的帮助翻译信息架构到Metro控件。信息架构与任务会赋予Pivots、Pages与Panoramas以生命。信息层与架构会赋予内容视图(Content Views)以生命。信息与信息、任务与任务、信息与任务的关系会赋予导航栏(Navigation)以生命。IA文档的所有内容会翻译到明确的Windows Phone控件中。最后不会出现歧义。

让我们回顾,基于IA文档,选择Windows Phone已有的设计模式,例如:search、maps、email、playlists或people hub的Contact cards。这时,如你没有找到一个完整的设计模式,或者根本不能满足你的IA需求。那么你可以定制一个接近或者创建全新的设计模式。当定制或创建自有设计模式,你有三个好的工具:1,Windows Phone设计网格;2,不同尺寸标准的Typography来传达结构化信息;3,Metro控件。当然,这三个不是所有你可以可用的武器,但它们是最基本的。相信Windows Phone用户体验指导(UX Guidelines)会cover到你的安排。

我提议通过设计模式来设计Windows Phone app。这不是唯一的设计Windows Phone Metro app的方式。像我们前面提到的,我们会在随后的文章里谈论关于推动Metro的设计模式,但在这篇文章重心在Windows Phone Metro语言设计。如果我们明确,从我的观点,我们可以创建自有的设计模式,可能一点都不像Metro控件库只是隐喻接近(但仍然基于Metro设计法则)。

你可以在Photoshop format(ListView_PSD.psd)找到许多列表视图设计模式,全景板图(Panorama_PSD.psd)以及其它控件。我们会延伸更多的内容。

经过选择设计模式,定制并创建设计模式,你基本上设计了app。听起来很简单!其实不是,事实上只是选择了正确的设计模式,定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app,我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作,我对Metro并不熟悉,我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用(re-using)已有的设计模式设计整个app做出改变?是的!我印象里6个月前,在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月,许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论

其中一件重要的事情是以不同的格式生产大量设计模式:Photoshop、Illustrator、Expression Design与XAML。现在,市面上没有大量的设计模式,所以推荐使用手机当前的内置,同时我们这边也在大量工作更多的格式将会投入使用。

返回开始,设计模式的选择、定制与创造阶段会呈现在线框图(Wireframes)。线框图是灰度图。不是色彩的!没有品牌……也没有panorama背景!这些线框图理想情况下是由Expression Design、Visio、Photoshop与Illustrator创建(提醒我们应该提供Visio格式的设计模式)。

我们已经准备转移到下一个交互设计阶段:定义动画风格与UI控件规格。实际上,这些概念会跟随之前选择的设计模式。最后,设计模式在这个语境(context)是交互设计模式,而不只是视觉设计模式。

动画风格会帮助我们基于线框图指明,会有动画出现在从A到B屏幕的转化过程(旋转风格),何时显示列表项目的详细内容(飞出飞入Continuum)。动画是Windows Phone app的重要部分,所以我们设计使用的动画风格的要点规格时会非常挑剔。与此同时,UI控件规格同样需要基于线框图,所以开发人员知道当创建一个app时,键盘类型需要基于输入的用户体验。或者当有通知(notifications),我们需要显示内容A、B、C通知消息内容的规则,通知在哪里会带你进入app。对于Loaders会发生同样的事情……我们需要一个%的loader还是一个等待光标?

在这个阶段的最后,针对完整的app,会有可靠的一组线框图,由开箱即用的定制与自主创建的设计模式驱动。这些线框图会包括动画风格与UI控件规格。准备下一阶段:视觉设计!

视觉设计(Visual Design)

目前为止,你会想:什么,到最后才有视觉设计?!。像我之前提到的,设计过程(任何事物)不是线性的。要是像我一样,我会开启Expression Design(你可能会使用Photoshop或Illustrator)我会把额外的事情丢一边并开始工作,我喜欢这样,用我喜欢的工具并开始app设计。没有草稿、没有线框图,只是漂亮或纯粹的视觉震撼!——许多视觉设计师想的就是这个味儿(就像工程师直接跳到Visual Studio开始敲代码!)

我必须承认比起一个交互设计师我更是一个视觉设计师。我肯定会依靠它看起来如何引导自己,所以我在项目的初期被视觉设计所吸引,但是我必须控制自己并记住有一个设计过程如何我跳过了,我的设计最终会非常漂亮但是不能忠实地表现app如何工作的信息架构与交换设计需求。也就是说,我们知道看起来受欢迎与我们都做过在过程的早期被客户询问发送给他们app的设计。明确开始的视觉设计是徒劳无功(虽然有些客户喜欢说要的就是这个)但是更像是“售卖设计”。

尽管我们喜欢信息架构与交互设计,为用户、商业决策制定者或市场管理者,然而一图胜于千张AI(an image is worth a 1000 pages of IA)。一组漂亮的Windows Phone app会帮助人们购买这个app与产生更多购买,给团队boss的进度报告会看起来漂亮。其实就是这样。所以当IA没有完全确定或交互设计被定义时,视觉设计引导人们在项目早期,最好的想象并最终实现。许多次人们会想这个愿景是最终的产品。但事实不是,这只是试图展示了我们方向在哪里。问题既是团队或客户信奉这个早期的视觉设计做为方向。期望应该被规定,这样在随后项目中就不会失望,因为它后于IA与交互设计,你可以完全的认识到视觉设计。

所以,现在我们有IA与交互设计明确时间来做许多有趣的视觉设计活动,像定义调色板(color palette),设计自定义图标、背景、整合品牌到我们的体验与设计live tiles。

你是否知道有一个有关设计的经典对话关于是否开发人员应该做设计?自始至终,对于这点我认为一个开发人员即使没有正式在设计方面训练可以成功的做到。信息架构是一个系统化与结构、逻辑驱动的学科。我个人认为开发人员有正确的思维模式明确IA。交互设计需要更多的体验,这是交互设计在过程中擅长的地方,但是一个开发人员沿着设计模式,我想他肯定可以做正确。这个阶段的挑战在于当前的设计模式缺乏与恰当的工具来实现方法、挑战,这增加对没有正式设计训练的人们的困难程度。最后,视觉设计阶段,我想你最好雇佣训练有素的图形视觉设计师。虽然有相当数量的设计教程与有版权的图标、图像与其它元素,但它与雇佣一个训练有素的设计师绝不一样。我希望我们可以在后面的文章,提供给开发人员许多实用的技巧,将基于素材的视觉设计元素变得更好。

Redlines and Greenlines

什么是Redlines?什么又是greenlines?!简单的问题。他们是交互体验的蓝图。就像是建筑的蓝图,你可以在上面看到楼梯平面图、侧视图、建筑正面,通过标注尺寸,门有多大、窗户有多大、墙的厚度、水管通道经过的地方、电源出口坐标、楼梯有多高、楼梯采用的材质、涂料颜色等等……在交互设计我们同样有我们的蓝图称作红线。我不确定为什么它们是红色而不是品红……但是我们想是因为红色是经常看到的颜色,容易跳出来,所以UI标识尺寸容易读。屏幕上的redlines显示了一个app不同屏幕,顶部不同成串的测量。这些数字定义了外边距(margin)、内边距(padding)、元素的大小与短暂元素如状态栏。为什么我们需要redlines?我通过Expression Blend就可以解决问题!

很久前在设计过程中我们没有Expression Blend。我知道这会引发一个很长的讨论,所以我在个系列保留了对这个设计工具的细节。我会说不管怎样,对于设计师控制UI到不论谁拿到XAML格式的UI,redlines都是最好的表现技巧。这个人可能叫做整合者,另外一个用XAML或Blend的设计师或开发人员。不论是什么情况,拿到设计与设计app的人不是同一个人。团队仍然可以工作。所以这个人需要一个方式用XAML产生UI与redlines帮助实现。通过redlines就没有歧义,但是如果这个按钮是30×150像素,距离屏幕左边24像素,距离顶部427像素,这时这些尺寸就是位置。不需要讨论。在过去,没有redlines,设计师会设计网站并转换JPG素材(不要使用JPG、只用PNG、没有压缩)给其他人产生HTML与CSS。这个过程会破坏设计,结果会与最初想象不同。Redlines表现了“契约”,一个当事人双方都同意写好的文档!我们会在未来的文章讨论更多的redlines与如何创建。

Greenlines是什么?Windows Phone设计工作室定义为触摸区域。需要按钮会说,10像素的直径,但是它们的点击区域会是20像素(便于用户点击)。Greenlines指明这些点击区域,不论它们匹配的物体大小。Greenlines与Redlines传递不同的信息。

最后(The End)

这个是一个高视角的流程总览,在下面的一周,我们会从细节开始。

下一篇: 理念与概念 ideation&Concept

讨论头脑风暴(brainstorming)方法,草图(sketching)、简易原型(paper prototyping)与讲故事(storytelling)。

Silverlight 3 OOB (2)

Silverlight 3 OOB (1)

前文对原理做了简要分析,该篇将针对做部分应用。

总述

在Silverlight 3正式版发布之前,开启该功能,需要修改Properties文件夹下的AppManifest.xml文件。

代码如下:

  1. <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
  2.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3.     <Deployment.Parts>
  4.     </Deployment.Parts>
  5.      <Deployment.OutOfBrowserSettings> 
  6.     <OutOfBrowserSettings 
  7.       ShortName="oob"> 
  8.       <OutOfBrowserSettings.WindowSettings> 
  9.         <WindowSettings Title="I support OOB" /> 
  10.       </OutOfBrowserSettings.WindowSettings> 
  11.       <OutOfBrowserSettings.Blurb> 
  12.         Saving your Silverlight offline. 
  13.       </OutOfBrowserSettings.Blurb>
  14.     </OutOfBrowserSettings> 
  15.   </Deployment.OutOfBrowserSettings> 
  16. </Deployment>

可设置的OutOfBrowerSettings属性。

ShortName – 程序在桌面或开始菜单中的显示名称。
Title – 程序运行时标题栏的现实内容。
Blurb – 程序的备注内容。

当F5运行该程序时,可以看到下面的菜单:

选择第二项。选择添加到开始菜单或者同时安装到桌面,默认选择开始菜单:

移除离线程序也很简单。右键单击运行中的离线程序,选择第二项:

silverlight-oob-3

在Silverlight离线程序中同样可以自定义桌面图标,开始菜单图标等。需要创建四个不同尺寸的PNG文件,16X16、32X32、64X64、128X128。把它们添加到项目中并指定路径,设置图标文件的Build Action的属性为Content。

  1. <OutOfBrowserSettings.Icons> 
  2.         <Icon Size="16,16">Images/sl16.png</Icon> 
  3.         <Icon Size="32,32">Images/sl32.png</Icon> 
  4.         <Icon Size="64,64">Images/sl64.png</Icon> 
  5.         <Icon Size="128,128">Images/sl128.png</Icon> 
  6.       </OutOfBrowserSettings.Icons> 
  7. </OutOfBrowserSettings.Icons>

现在就可以得到自定义图标了。

完整的AppManifest.xml文件。

  1. <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
  2.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3.       EntryPointAssembly="silverlight-oob" 
  4.   EntryPointType="silverlight-oob.App" 
  5. >
  6.     <Deployment.Parts>
  7.     </Deployment.Parts>
  8.      <Deployment.OutOfBrowserSettings> 
  9.     <OutOfBrowserSettings 
  10.       ShortName="silverlight-oob"> 
  11.       <OutOfBrowserSettings.WindowSettings> 
  12.         <WindowSettings Title="I support OOB" /> 
  13.       </OutOfBrowserSettings.WindowSettings> 
  14.       <OutOfBrowserSettings.Blurb> 
  15.         Saving your silverlight offline 
  16.       </OutOfBrowserSettings.Blurb>
  17.         <OutOfBrowserSettings.Icons> 
  18.         <Icon Size="16,16">Images/sl16.png</Icon> 
  19.         <Icon Size="32,32">Images/sl32.png</Icon> 
  20.         <Icon Size="48,48">Images/sl48.png</Icon> 
  21.         <Icon Size="128,128">Images/sl128.png</Icon> 
  22.       </OutOfBrowserSettings.Icons> 
  23.     </OutOfBrowserSettings> 
  24.   </Deployment.OutOfBrowserSettings> 
  25. </Deployment>

Silverlight 3 的OOB并不支持对窗体的修改。

在Silverlight 3 以及 Expression Studio 3 (Expression Blend 3)正式发布时,这个OOB设置方式进行了简化。无需设置Appmanifest.xml,你可以在Properties看到OutOfBrowserSettings.xml文件。

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <OutOfBrowserSettings ShortName="silverlight-oob" EnableGPUAcceleration="True">
  3.  
  4.     <OutOfBrowserSettings.Blurb>
  5.         A short description of the application.
  6.     </OutOfBrowserSettings.Blurb>
  7.     <OutOfBrowserSettings.WindowSettings>
  8.         <WindowSettings Height="600" Width="800" Title="silverlight-oob" />
  9.     </OutOfBrowserSettings.WindowSettings>
  10. </OutOfBrowserSettings>

在Expression Blend 3中,选择Project->Silverlight Projects Options->Enable Application Outside Browser。

Demo

联系人管理器(由微软提供)

Silverlight 3 OOB (1)

名词解释

OOB (Out of Browser): Silverlight 3新特性之一。在浏览器中运行的Web应用界面与传统桌面软件比起来总是死板,不够灵活的。因此,人们就产生了需求,想在浏览器之外运行web应用。Adobe的Air可以实现这个功能,而Google的解决方案是Chrome里的shortcuts。给Web应用建立了shortcuts之后,就可以按照人们习惯的方式启动这个应用,而界面也很传统软件非常接近了。微软的解决方案则是Mesh,或者最新的Silverlight OOB功能。

原理简析

分离程序

当用户第一次浏览应用程序可能是在浏览器的某个位置。当你的程序支持out-of-browser(OOB)体验时,用户可以通过引起事件分离程序。接着会出现下面的情况:

detach

该动作捕获浏览器(例子中虚拟地址 http://foo.com/mysloob.xap)并创建一个OOB程序。

  • 程序(XAP)需要再一次通过浏览器请求数据。
  • 当XAP下载时,在低信任区域中取得本地存储的元数据,包括XAP的原始URI元数据以及重要的ETag信息(本质上是时间戳)。

首次运行OOB

如果我们关闭程序并再次在桌面上运行程序:

launch1

在这种情况下程序会检查它的元数据XAP的原始URI并进行一次请求。对比HTTP的响应数据(代码以及Etag)。如果程序没有更新,程序会正常运行。事实上,程序的检查请求基本上会是这样:

  1. GET /silverlight/oob/ClientBin/OutOfBrowser.xap HTTP/1.1
  2. If-Modified-Since: Thu, 19 Mar 2009 03:52:35 GMT
  3. User-Agent: Silverlight
  4. Host: timheuer.com
  5. X-P2P-PeerDist: Version=1.0
  6. Accept-Encoding: peerdist
  7.  
  8.  
  9. HTTP/1.1 304 Not Modified
  10. Last-Modified: Thu, 19 Mar 2009 03:52:15 GMT
  11. Accept-Ranges: bytes
  12. ETag: "f2e3a81746a8c91:445"
  13. X-Powered-By: ASP.NET
  14. Date: Thu, 19 Mar 2009 03:55:18 GMT

需要注意的是HTTP 304 Not Modified的响应。没有更新信息发送时我们可以看到没有传递信息。程序不会发生变化。在API层,作用于改变DetachedUpdatesAvailable状态的Application.Current.ExecutionState没有被触发。

用户从桌面运行,程序升级

现在我们更新程序并上传到服务器。用户下一次运行程序时,同样的请求出现:

launch2

再一次,请求发送元数据信息。不过这次,有更新了。过程也是加倍的。连同响应发送了新时间戳/ETag,请求同样包括了更新程序。请求会是这样的:

  1. GET /silverlight/oob/ClientBin/OutOfBrowser.xap HTTP/1.1
  2. If-Modified-Since: Thu, 19 Mar 2009 03:52:35 GMT
  3. User-Agent: Silverlight
  4. Host: timheuer.com
  5. X-P2P-PeerDist: Version=1.0
  6. Accept-Encoding: peerdist
  7.  
  8.  
  9. HTTP/1.1 200 OK
  10. Content-Length: 15557
  11. Content-Type: application/x-silverlight-app
  12. Last-Modified: Thu, 19 Mar 2009 03:56:29 GMT
  13. Accept-Ranges: bytes
  14. ETag: "ce39d0ae46a8c91:445"
  15. X-Powered-By: ASP.NET
  16. Date: Thu, 19 Mar 2009 03:56:45 GMT  17: <data>

“data”之上的部分事实上是更新XAP的数据(注意Content-Length与Content-Type headers)。

  • Application.Current.ExecutionState改变为DetachedUpdatesAvailable 状态。
  • 本地存储的XAP更新了数据。

当前还没有选项可以拒绝更新数据。如果程序已更新,用户就会获得它们。这是开发团队考虑到不同使用环境的设定。同样的,不能强制用户关闭程序或者阻止程序继续使用。在某种意义上,你或许可以通过更新程序使下次运行时屏蔽UI。再次运行程序(从本地机器)会进行数据更新,更新请求会跟首次相近:

  1. GET /silverlight/oob/ClientBin/OutOfBrowser.xap HTTP/1.1
  2. If-Modified-Since: Thu, 19 Mar 2009 03:56:49 GMT
  3. User-Agent: Silverlight
  4. Host: timheuer.com
  5. X-P2P-PeerDist: Version=1.0
  6. Accept-Encoding: peerdist
  7.  
  8.  
  9. HTTP/1.1 304 Not Modified
  10. Last-Modified: Thu, 19 Mar 2009 03:56:29 GMT
  11. Accept-Ranges: bytes
  12. ETag: "ce39d0ae46a8c91:445"
  13. X-Powered-By: ASP.NET
  14. Date: Thu, 19 Mar 2009 03:57:12 GMT

上述是Silverlight 3 OOB的基本原理。当程序被分离,与app相关元数据被存储。每一次运行时检查一次元数据,确认升级是否可用。如果程序离线,也不会阻止程序运行。这与部署.NET Framework的ClickOnce观念类似。

延伸阅读
微软 Google云计算基础技术的比较
silverlight 3 offline update framework

在Expression Blend 3中快速创建图像笔刷

之前在Blend中创建一个图像笔刷需要很多步骤。Blend3中对此进行了改进。

复制一个图像到剪贴板

粘贴图像到Resource Dictionary

打开Blend 3 并选择 Resource标签,选择可定义图像笔刷的资源区域。右键点击App.xaml文件并选择粘贴Paste。

clipblend-paste-resource

增加下列xaml代码到App.xaml文件中Application.Resources部分

  1. <ImageBrush x:Key="Image" ImageSource="Image.jpg"/>
  2. <!-- Image.jpg为图像文件名 -->

Silverlight SEO 白皮书

原文档来自Silverlight.net官方。这里做一下简单的翻译,水平有限,言语不免晦涩,不足之处请指正。

概要

这份文档描述了一些Silverlight程序的搜索引擎优化(SEO)技巧。这些技巧是用来帮助开发人员使得Silverlight内容能够在搜索引擎的结果页被发现,并为没有激活Silverlight的用户提供合意的体验。

这份文档将包括以下的章节:

*介绍
*搜索引擎工作原理
*开发Silverlight程序的方法
*Silverlight程序的SEO技巧
*总结

介绍

搜索引擎能够直接识别HTML内容。与此同时,搜索引擎先天的不识别Silverlight内容。这一点与搜索引擎不支持其它的一些通过HTML呈现的对象类似,如脚本、css、媒体文件以及ActiveX控件。为了使Silverlight内容能够被搜索引擎收录,你可以使用搜索引擎已经支持的方法,如将孤立的Silverlight岛与跟内容相关的HTML metadata相结合。

SEO的目的是增加页面在搜索引擎的主要结果页(图中被红色矩形标出的部分)的显示机会,而不是在广告或者赞助商的页面。

Read More …

Silverlight Tips(3)

在PowerPoint中插入Silverlight项目

在做幻灯片演示时用得到。
适用版本:PowerPoint XP/2003/2007。Silverlight 1.0/2.0。
思路:利用PowerPoint支持的WebBrowser控件,创建Silverlight的运行环境。
Demo下载[download id=”2″]

  1. Private Sub CommandButton1_Click()
  2. Dim varURL As Variant
  3. varURL = "file:\\\C:\Documents%20and%20Settings\Administrator\桌面\SilverlightSite2\Default.html"
  4. Slide1.WebBrowser1.Navigate varURL
  5. End Sub
  6. Private Sub WebBrowser1_StatusTextChange(ByVal Text As String)
  7. End Sub

Silverlight粒子系统

Demo演示
源码下载[download id=”3″]

XAML文字竖排

使用MatrixTransform对象。

  1. <TextBlock>
  2.             <TextBlock.RenderTransform>
  3.                 <TransformGroup>
  4.                     <MatrixTransform/>
  5.                 </TransformGroup>
  6.             </TextBlock.RenderTransform>
  7.             <Run Text="A"/>
  8.             <LineBreak/>
  9.             <Run Text="A"/>
  10.             <LineBreak/>
  11.             <Run Text="A"/>
  12.             <LineBreak/>
  13.         </TextBlock>

最近在用SL做片头,慢慢来吧。

在Silverlight中整合HTML页面

Silverlight可以用作网站的应用开发。如果你希望Silverlight程序更像一个网站,并具有更强的扩展性,也许我们需要整合HTML页面。接下来的内容,将基于Silverlight 1.0做一些尝试,希望对您有所帮助。

先看演示(DEMO)

很酷吧。:D

原理。看图:

Silverlight原理结构

Silverlight程序是以控件的形式嵌入到HTML页面中的,这里是把将要整合的HTML页面利用iframe置于Silverlight控件之上,而不影响Silverlight控件的正常工作。

要点:

1.编辑按钮的xaml,定义MouseLeftButtonDown,使按下鼠标左键时,触发相应函数。

2.在该页面的js文件中,关联按钮。

  1. function On_MouseLeftButtonDown(sender,args){
  2. document.getElementById('iframe').style.visibility = "visible";
  3. }
  4. //开启HTML页面,将名为iframe的隐藏层的visibility属性改为visible显示
  5. function Off_MouseLeftButtonDown(sender,args){
  6. document.getElementById('iframe').style.visibility = "hidden";
  7. }
  8. //关闭HTML页面,将名为iframe的隐藏层的visibility属性改为hidden隐藏

3.该项目的html文件。

  1. <div id="iframe" style="position:absolute; width:640px; height:450px; z-index:1; left: 10px; top: 45px;visibility:hidden"><iframe scrolling="no" style="position:fixed; width:640px; height:450px;" src="http://www.mdong.org/qdjw" /> </div>
  2. //将iframe嵌入一个div层,并通过调整z-index值与visibility属性将该层置于Silverlight控件层上方并隐藏,以不影响Silverlight程序正常工作。
  3. //调整DIV层的位置大小。

Code源文件下载

OVER。

上述思路有妥协的嫌疑:D,毕竟所有的功能都能由Silverlight自身实现是最完美的。
但有些情况下,仍不失为一种高效的解决方案。

Silverlight Object 标签的结构

接上一篇《呈现Silverlight:HTML vs. Script》 E文
水平有限,出现不准确的地方请指正。谢谢。

Silverlight 2 的安装模型使用Silverlight object标签模板。在上一篇文章《呈现Silverlight:HTML vs. Script 》提到过,这个模板的设计遵循的5条标准:

1.兼容Silverlight1.0。
2.仅基于静态的HTML。
3.为客户端提供合适的安装文件(Mac,Windows,其它)。
4.为不能够使用Silverlight的用户提供可行的反馈。
5.提供一个易用的可定制的安装升级体验。

这篇文章会解释上述标准在模板中如何体现。

  1. <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="500" height="500">
  2.     <param name="source" value="MyApplication.xap"/>
  3.     <param name="onerror" value="myOnError" />
  4.     <param name="background" value="black" />
  5.    
  6.     <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
  7.          <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" 
  8.               style="border-style: none"/>
  9.     </a>
  10. </object>
  11. <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

示例1:Silverlight 2 Beta 2 object标签模板(局部)

兼容Silverlight 1.0

Silverlight 1.0安装/实例化模型建立在一个名为Silverlight.js的JavaScript帮助文件之上。这个文件拥有一系列参数,通过函数与参数的使用将Silverlight控件嵌入网页的DIV标签内。Silverlight 2控件在IE中使用object标签嵌入DIV标签,而在Firefox与Safari中使用embed标签。

在未定义classid的object标签中使用MIME类型,一个网页即可在支持Silverlight的浏览器中正确地实例化Silverlight控件。当浏览器的classid属性不一致甚至不兼容的情况下,MIME类型定义的类型属性都能以相同的方式被解释。因此,在object标签中使用类型属性,能够满足Silverlight 1.0与Silverlight 2控件通过一个单独的HTML标签进行实例化。

  1. <object ... type="application/x-silverlight-2-b2" ...>

仅基于静态的HTML

脱离对Silverlight.js模型中的js依赖:

*一些虚拟主机不允许用户在网页中加入JavaScript。
*在一个网页中加入一个应用程序需要作者同时连接应用程序与Silverlight.js文件。
*不开启Silverlight的浏览器不能够访问Silverlight内容。

  1. <object type="fake/mimetype" width="500" height="500">
  2.     <param name="foo" value="bar"/>
  3.    
  4.     <table>
  5.         <tr>
  6.             <td>
  7.                你需要安装控件以查看内容。
  8.             </td>
  9.             <td>
  10.                 <a href="http://www.tempuri.org/install/control.exe">
  11.                     <img src="http://www.tempuri.org/install/installControl.png" alt="Install Control"/>
  12.                 </a>
  13.             </td>
  14.         </tr>
  15.     </table>
  16. </object>

如果在浏览器有一个控件映射到“fake/mimetype”MIME类型:

  1. <object type="fake/mimetype" width="500" height="500">
  2.     <param name="foo" value="bar"/>
  3. </object>

运行时浏览器中object标签与param标签将被忽略:

  1. <table>
  2.     <tr>
  3.         <td>
  4.             你需要安装控件以查看内容。
  5.         </td>
  6.         <td>
  7.             <a href="http://www.tempuri.org/install/control.exe">
  8.                 <img src="http://www.tempuri.org/install/installControl.png" alt="Install Control"/>
  9.             </a>
  10.         </td>
  11.     </tr>
  12. </table>

当Silverlight不可用时,Silverlight object标签模板会使用下面的应急机制显示安装提示。如果已经安装Silverlight的用户访问一个Silverilght页面时,Silverlight应用程序会正常显示。如果用户没有安装Silverlight时,浏览器会忽视Silverlight标签并显示嵌入的HTML。默认情况下,用于Silverlight 2 Beta 2的HTML:

  1. <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
  2.      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" 
  3.           style="border-style: none"/>
  4. </a>

将呈现如下UI元素:
Silverlight2安装画面

为客户端提供合适的安装文件
如果你查看用于HTML安装的默认Silverlight object标签模板,你会注意到一个a标签链接到Silverlight 2 Beta 的地址:http://go.microsoft.com/fwlink/?LinkID=115261。在Silverlight.js文件中,为各个操作系统提供了唯一的安装地址:适用于Windows的.exe、适用于Mac的.dmg,以及一个未知平台的链接地址。在Silverlight 2 中微软将这个侦测功能转移到了服务器端。当用户运行到上述的安装程序地址,服务器会为这个用户侦测适用的安装程序。如果可能,安装程序会打开安装程序而无需离开当前页面。如果浏览器不支持Silverilght,如64位的IE,这时会跳转到一个微软的网页,告诉他们关于安装Silerlight控件的平台要求。

服务器端的工具是很有用的。第一,一个网站只需要为控件提供一个单一的下载地址。第二,网站作者不必担心用户的操作环境,如不支持的平台。第三,如果先前一个不支持Silverlight的平台得到支持,这时使用这个单一地址的网站会自动的为那个平台提供支持。

提供给用户可行的反馈

这个部分包含了先前的一些章节。如果侦测到部分用户系统中Silverlight不能正常工作。有3个可能的原因:

*不支持的操作系统。
*不支持的浏览器。
*不支持的64位浏览器。

在确定向特定的客户端提供安装程序之前,系统会检查上述条件。如果碰到其中的一项会发送给用户一个微软的网页告知侦测到的问题。在有些情况下,系统会告诉用户他们的操作系统不被支持。在另外一些情况下,用户会被告知他们应该更换一个被支持的浏览器。在使用64位浏览器时,用户会被告知使用32位浏览器替代64位浏览器。

这个系统会跟随由错误造成的问题而升级。这个系统的目的是,避免用户陷入安装的死循环。这样做的原因是将检测环境的责任由网站作者转移到微软。

其它的模板元素

  1. data="data:...,"

有两个object标签模板元素,他们的作用不是太容易理解。object标签的data属性与iframe标签。

Silverlight object标签增加data属性是在Silverlight 1.0发布不久。如果我们增加object标签到一个网页,而没有在object标签中加入一个data属性,浏览器就会忽略包含object标签的html文件。我会用这个例子说明它:

  1. test1.html
  2. -------------------------------------------------
  3. <html>
  4.    <body>
  5.        <object type="fake/MIMEtype">
  6.        </object>
  7.    </body>
  8. </html>
  9. -------------------------------------------------
  10.  
  11. 当被浏览器运行时,网页会呈现这样的效果:
  12.  
  13. test1.html
  14. -------------------------------------------------
  15. <html>
  16.    <body>
  17.        <object type="fake/MIMEtype" data='<html><body><object type="fake/MIMEtype"></object></body></html>'>
  18.        </object>
  19.    </body>
  20. </html>
  21. -------------------------------------------------

这个行为明显的增加了内存占用,对于复杂的网页尤为突出。更糟的是,网页的HTML不会从内存中被释放。取而代之的是,浏览器会将其当成一个额外的请求退回Web服务器,重复刷新这个页面。如此将增加页面的响应时间并增加了服务器下载页面的时间。

为了缓和这个问题,我们需要一个跨平台的方法用于填充object标签的data属性,而无需花费web开发人员过多的时间精力。经过许多尝试发现object标签允许data从外部引用(从一个文件)或内嵌(从HTML)。基于这样的想法,我们创建了一个内嵌的空数据流加入data属性,而不与任何控件相结合。结果你会看到:

  1. data="data:application/x-silverlight,"

Silverlight的MIME类型防止了控件被错误的解释。逗号后的空字符串最小化的减少流的体积。增加这个属性到object标签防止了额外的内存使用与服务器点击数。

  1. <iframe>

iframe标签包括了一个浏览器的兼容缓存。这个缓存使Silverlight控件在Safari与其它浏览器的呈现保持一致。

延伸:
Silverlight 2应用程序的部署
蓝典Silverlight专版

Silverlight创建运动路径(motion path)

大家知道在Flash中有一个引导层功能,可以辅助完成丰富的动画制作.
于是有人疑问Silverlight中是否有类似功能.
答案是否定的——Silverlight并不支持.
然而在WPF却有运动路径(motion path),效果类似于引导层.
Silverlight受限于浏览器,为了保持小巧的插件体积,如上述功能就被摒弃了.

接下来有一个解决方案,可以使Silverlight如WPF一样,支持运动路径(motion path).
请先下载这个WPF项目.
这个WPF程序的功能是将在Blend中编辑的动画,通过它将WPF动画转化为Silverlight可用.操作如下:
1.用Blend打开harness目录下的项目.
2.在画布中的空白区域绘制图形,目的是利用运动路径(注意取得图形元素的XAML).
3.F5运行WPF程序.调节相关设置Animation Name、Element to Animate、KeyFrame type、Frames per second等.
4.复制取得动画的Translate X,Translate Y值.
5.打开所要操作的Silverlight项目.将第一步取得在图形元素XAML载入.创建新的时间轴,粘贴替换上一步取得的Translate X,Translate Y值.

完毕.

上述方案会产生许多冗余的代码,但仍不失为一种好的尝试.

延伸阅读:
所用WPF的作者原文
蓝典Silverlight专版

呈现Silverlight:HTML vs. Script

E文
许多Silverlight开发人员注意到Silverlight的安装呈现模型在Silverlight1.0与Silverlight2.0之间有着根本的区别.Silverlight1.0依赖一个JavaScript帮助文件——Silverlight.js,供于插件的安装体验.Silverlight2.0的项目却脱离了JavaScript模型,转为一个更为常见的标签模型.这就带来了一些问题:为什么1.0使用Silverlight.js?为什么2.0使用<object>?更重要的是,哪一个模型更适合我?
Read More …