Category Archives: Silverlight & Wp7

Silverlight Expression Studio

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)。

(译)Windows Phone中环绕icon的圆圈

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

在Stockholm的Windows Phone Design Day期间的Q&A环节,Stockholm本地的交互设计师Petter Sifver提了一个问题,关于Windows Phone app bar上的icon,想知道为什么icon的周围会有圆圈。Petter友好地在其博客上为分享了他围绕设计阐述的观点

我们看到的是Button,而不是icon。——从字面上。在这些Button内部都有小icon。微软提供的开箱即用(out-of-the-box)的Metro设计语言有一致性接近“button like”(可意会的按钮)控件。不论它是一个Push Button, Toggle Button, Command Button或者媒体播放Buttons或者icon button——button在Windows Phone的Metro语言里有一个边框,来定义边界。所以icon buttons在app bar是朴素地遵循了同样的语言——我理解它们可能造成困惑的原因是,我注意到当我们谈论icon时,我们会经常表述在圆圈里的内容并称它们是icons。当我们谈论icon我们会表述它们像icon(没有圆圈——即便如此,99%的它们被当icon buttons来使用)。

Saliency概念是正确的,而在我们的Metro button设计语言中有例外设计。
这样做是在保持一致性。称呼它们button或icon从字面看起来很接近,但是有着非常大的区别。我们使用button用来交互,使用icon传达一个单项的信息。例如,在电话应用在call history list界面中紧挨着calls使用带有电话icon的button——它们是button,不是icon。

另外一个使用icon buttons例子是在文字消息应用——当你希望增加一个新的联系人并发送一条文字消息,你得到一个带有加号icon的小button,同样的,它是一个button——不只是一个icon。你会发现我们不会使用icon作为button。它已经通过加号icon吸引了人去使用——我知道我被建议了。回到开始,正确的接近windows Phone的Metro设计是使用icon button。

现在我们看一下我们如何使用icon。例如在状态栏中,它们是确确实实的通知icon,并且没有使用圆圈(它们不是button)。

我们使用icon做为图形,它们提供给用户单项的信息(它们是不可交互的,因此不是button)。例如在电子邮件应用我们使用小icon(不是button)与用户交流。当有附件在一封邮件里,这时它会成为高优先级邮件(标记)。

所有这些,我希望明确,我们在Windows Phone Design Day所谈轮到——Metro在做两件事情:Metro设计法则与Metro设计语言。Metro法则是设计支撑。Metro设计语言建立在法则之上,是在实体UI元素、动画、排版、构图与其它交互方向中的证明途径。

Metro设计语言由三件事情所定义:Windows Phone的native应用(邮箱应用、文字消息应用、people hub、本地搜索等等);第二,Windows Phone UX Guidelines;第三,控件库与其它Windows Phone SDK & Silverlight Toolkit的可用资源(所有的三项彼此之间会保持一致性)。开发人员与设计人员可以使用Metro设计语言,这会成功地为Windows Phone建立精巧美观、引人注目与一致性的体验。

Metro法则是优先的,它凌驾于任何语言,所以设计人员可用自由的探索法则,并且通过非主流的方式被你所证明。我们也乐意看到这些事情发生。Metro原则允许无限的探索与进化。这里我们给一些思路…从Swiss Design Style的课程中读一些文章。这描述了许多Swiss设计背后的理念(Metro的根源在它,也可以称为International Typographic Style)——阅读其中的海报与印刷媒体设计。然而,许多这些海报、设计与Metro设计语言并不相像,但是这不意味着做为一个设计人员不能探索其它的表达法则的途径。

Windows Phone 7 GUI PSD & more

微软最近发布了 Windows Phone 7 应用界面设计的 PSD 资源,方便设计师或开发者利用 Photoshop 绘制 Windows Phone 7 应用的草稿或效果图。

整个资源包共 88 MB,包含了 28 个部分的 PSD 文件:基础控件和图标、虚拟键盘、顶部状态栏、主题颜色、Start Tiles 图标、推送提醒界面等,另外还附加了相应的字体文件。

这个确实比IPhone、Android给力啊,第三方提供的UI元素怎能与官方媲美。

下载列表

[Job]Silverlight Web Developer

Requirements:

  • Smart, passionate, loves start up and could work under pressure in a fast-paced team environment
  • Major in Computer science or related
  • Excellent C# and/or Java and/or C coding/debugging skills
  • Strong team player, good work ethics and critical in quality.
  • Good in Communication
  • Experience with mobile platform (Windows Mobile, Android, Symbian, J2ME and/or iPhone) will be a plus
  • Experience on SMS, MMS, GPS, and other mobile/phone applications will be a plus
  • Experience on Silverlight development will be a plus

Working Location :Suzhou, Jiangsu

Contact: MSN: mdong{at}live.cn

Company Environment:

Silverlight安装体验优化(1)

Campaign Management基于Silverlight程序。我们要求merchant的电脑需装有Silverlight插件,提醒merchant为什么要安装Silverlight,并表明我们信赖Silverlight,且能移除安装及使用Silverlight的阻碍。

第一次浏览时会出现的两种情况

1. 安装体验(Installation Experience)——当merchant未安装Silverlight插件浏览时,将会看到的安装提示界面。
2. 预定体验(Default Experience)——当merchant已经安装Silverlight插件浏览时,将会看到的loading界面。

设计目标

1.传达该页面的价值,只要安装Silverlight就能够获得。
2.提供明确的要求,请merchant安装Silverlight。
3.消除阻碍merchant完成安装的疑虑。
4.个性化安装提示界面,符合商业需求。
5.优化程序loading速度,并充分利用loading的时间,提供随机tips帮助merchant使用Campaign Management。
6.防止误关闭以及加入其它帮助信息。

原型设计

参考文档 MSDN

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为图像文件名 -->

Expression Design 图标设计

这同样是一篇适用于入门的简明设计教程,以RSS图标为设计对象。使用Expression Design2与Expression Blend3工具创建。

首先看一下最终的静态完成效果。下图为单一图标,组图点击这里查看Design源文件,动态效果点击这里查看

Silverlight rss图标

接下来打开Expression Design,在画布上绘制一个矩形并调节适当的圆角半径。
Read More …

Expression Design人工橡皮擦

前面要说的是,Expression Design是没有illustrator里面的橡皮擦工具的。有些需求可以通过Expression Design里的其它工具组合完成。下面做两个演示,前者主要使用剪刀工具,后者则以路径功能为主。

目标:对圆形进行切口。
Read More …