September 23rd, 2011 at 5:43 pm by allan. 0 Comments
filed under UX & Design, WP7

你是否想与客户侃侃而谈让他们认真的对待你的观点，因为看上去你就是个专家？如果你的答案是肯定的，那么恭喜你，有许多人与你一样。如果希望有一天能真正做到，那么你需要退后一步再想想，成为专家对你来说为什么如此重要？

为什么我们都希望看上去像个专家

我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待。被人尊敬，让自己更有价值，也为了满足自己的自负，当然，最主要的是我们希望自己能成为最棒的，同时有自己独特的有力的行事方式。

无论如何，就像我们接下来要讲的，成为专家绝不仅仅是让别人听从我们。如果我们仅能做到这点并不能真正意义上达到我们的期待和被其它人所认可。

让人尊敬并不是我们成为专家的唯一期望。有些人认为也许专成主家会让我们有更多的工作机会，以及更多的话语权。但不幸的是，有很多情况下，许多专家并没有比人懂得更多，甚至在他们熟悉的领域，并没有获得更多薪水。成为一个小众的专家对职业上的提升并不大。

尽管如此，被视为专家的能够帮助我们与客户工作，并让我们有创造更高质量工作的潜力。那么，如何让我们成为专家呢？

如何让我们成为专家？

在 《异族》（Outliers）一书中，作者Malcolm Gladwell建议成为一个专家（高手）在通常情况下需要花费近10000小时的练习与实践。对于大多数全职工作的网页设计师来说，这相当于整整4年不休假的8小时并有成效的工作。

我觉得10000小时的值得怀疑之处，我能看见将这种理论到一些类似于乐器训练，或是体育运动中也许会有效，但我不确定将这种理论应用于其它如网页设计。如10000小时的Photoshop使用经验不会让你成为网页设计专家，及充其量仅仅让你成为一个Photoshop高手。

当然，Gladwell的说法在某些程度上是有一定道理的。成为专家，你必须需要时间与经验。

很多人宣称自己是专家，但只有仅少数的人真正投入了数千小时的努力。图片来源 Brett Jordan.

时间和经验

无需怀疑的是专业技能必须通过花费时间并持之以衡的练习来达到。绝不是一夜灵感闪现，没有任何捷径去达到高水平的技能。随着经验的不断丰富，学得越多，越会发现自己更加需要学习。

当然，你可以说网页设计领域的变化非常之快，四年前的知识在现在几乎毫无用处。但是我不觉得这是个问题。在我的经验之中，尽管技术在变化，但使用技术的人不变。在开发一个网站的时候永远是在与用户或是用户体验中的细节在打交道。同时，数年的经验能提高你解决问题的能力。尽管挑战是全新的，你所解决问题的方式将会越来越熟练。你积累的理论知识以及工作流程使得你更出色。因此，数年前学到的知识在今天仍然用得上。

偏执般激情

我并不是说经验就是一切。例如，我不觉得你应该花上数年的时间给某人朝九晚五打工就能获得足够的经验。相反，永远寻找值得学习的内容，在你的企业中富有创造性的工作，最重要的是需要有激情来对待你所注的事物。

以我自己来说，我的事业从IBM开始，数年后我觉得并没有在技能上有多大提高。许多在我身边的人并不能充满激情的工作。没有激情，就没有学习新东西的渴望和推动力。

我相信对网页设计拥有偏执般的激情是成为专家所必需的。

另外，我IBM的同事们从不愿承担风险。而勇于尝试以及偶尔的错误都会是成为一个专家所必须经历和学到的

犯错误的重要性

成为一个真正的专家不能回避一个事实：你必须愿意去犯错误，而且犯非常多的错误。

不幸的是，我们并不是生活在一个表扬失败的社会文化之中。我们需要成功人士。但成功并不光是灵感闪现，而是努力和汉水。Winston Churchill说过：

事业上的成功和成为一个专家不光是需要你经历过一两次失败，而是不停的经历。

失败是我们成过专家的一个重要环节，Charles Willson说过：

不经历失败，我们不能学会做事情的最佳方式。从他人的失败中也可以学到很多，但没有什么比得上我们自己亲身经历过的失败。

我们需要战胜我们对失败的恐惧。当项目中出错时，人们总是会本能的有二种反应。有些人不停的纠结其中，否则问题的存在，不愿意接受投入但不产出的结果，这时候重要的是学会什么时候放手。另外一些人则尽可能的逃离这些问题假装其从来没有发生过。但这样意味着你永远不会从你的错误中学到东西。我们需要在最后花上一些时间去审视我们项目中的错误，并从中学到东西。这个过程很难，特别是当你与已经不郁快的客户打交道的时候。

而从没有经历过失败的人，他们可能胆心不愿去尝试，担心他人的批评，或在一开始根本就对成功没有任何渴望。

怎样确定你已经是一个专家

有时候并不是人人都认同你是一个专家。光有足够的知识是不够的，我们还需要有人认同我们所获得的知识。

这可能是你会经常经历的问题。你已经完成了你的10000小时的学习，也从错误中学到了。尽管如此，你的客户或老板并没有认同你所累积的知识与经验。

如何说服他们你已经是一个专家了，应该认真考虑你的建议呢？

展现一些谦虚

第一步要做的是不要过份表现我就是专家的态度。真正的专家往往是最后一个称自己为专家的人。事实上，专家往往会积极承认他们的知识的有限从而带动其它人更好的接受他们的观点。

人们往往会怀疑自称专家的人。让你自己的知识替你说话比起主动引起别人的注意更有效。直接说自己是专家显得并不明智，你可以用多种不同的方式来暗示这一点。其中很重要的一种方法是使用情景。

用情景展示你的优点

当你把一些现代艺术绘画从画廊中拿下，放在小学时，很有可能被误认为是小孩的涂鸦。因为环境影响了事物接受时的辨标准。想象一下有时候经理们会非常认真的听从某些外聘顾问的观点，而忽略自己员工的观点，尽管二人说的都是同样的事情。因为付了顾问更多钱，所以他们的观点冒似更加有价值。

你也许没有办法提高你的劳务价格；尽管如此，你可以改变你的表达方式，让人们提高对你的价值认同。

就像画廊中的作品一样，你的专业技能在某些合适的场合下会被认同。例如，相对于在会议室里发言，或是只在自己工位上表达观点来说，在会议室里可能会更加有份量一些。同样，如果你的专业知识来自某些书本，这会比你在会议室里夸夸其谈更加有价值得多。

作为一个专家我经常犯错误，因为我站在舞台上. 照片来源 Marc Thiele.

并不是人人都有机会出书或是在会议上发言。如果这样的话，也可以自己出书，或是做一些播客、博客或是参与一些开源项目。像专家一样展示自己比你想的要简单一些。

如果获得会议演讲或是写书的邀请的话，意味着你的技能已经被某些人认同。会议组织者和出版商就好像是质量保证，如果他们认同你，那么人们会在开始就认定你所要讲的事情。

当然，情景并非一切。更重要的是你所表达的观点和如何去表达你的观点。

风格和主旨

写书、演讲、博客或播放比起简单的交谈来说更有效果。因为这些比起交谈来说，表达结构和方式更加缜密严谨。

表达自己的重要性。当有些事情对你来说非常明确时，其它人可能不这么看，特别是一些重复出现的问题。当客户让你把他们的Logo变大一些或是多些留白时，你必须要精心对待这些小事。你会很容易不耐烦或是无所谓因为这样的事情总是在发生。但是细心的考虑你的应对方式和对策会使得你更具说服力。除了主旨，你辨论和交流的风格同样重要。专家应该充满信心，交谈时富于表达和权威性。听众并不会因为你的意见不同而不爽，只要表达得当，他们会转换他们的观点。如果你想被认同为一个专家，了解你自己、放松并充满信心的表达。

不幸的时候，有时候问题还是发生，因为另一方早就准备好了自己的观点。

过多偏见

在你现有的老板和客户前开始充当专家的角色可能是个挑战。特别是你以前的曾是初级员工，他们对你的态度不会一夜改变。幸运的是，你可以做一些有效的工作来帮助你转换角色。

第一，为你的观点提供有效的证据。当你老板担心你的提议上不了台面的时候，给他看看有效的证据，如下面这个滚动条行为报告。

引用一个研究结果能够增加你的内容的可信度。

其次，引用一个已有的专家将有效支持你的观点，例如有人曾写过有关滚动条这个案例的相关报告。

这些技巧不光能支持你的观点。同时他们能够充分的表现你有广泛的阅读与研究。同时，你在做这些的同时也加了自己的可信度，像专家一样思考问题。你离专家已经一步之遥。

当然，没有办法能快速的消除偏见。这对于总是与相同的人工作的人来说非常困难。但通过一段时间，有效的展示自己的专业知识和使用这些技巧，他们最终能改变他们对你的看法。

能力越大责任越大

本文的关注的是有关如何成为专家，在结束前，我想说说当你真正成为专家后意味着什么。

当你从客户，同事及老板那里获得尊敬后，还会怎样？成为专家不光光是一段自我之旅。更多的是有关为他人服务。当你成为专家后，你能更好的为你的客户服务，为你的公司提供更多价值，促进你的行业发展。如果只是想获得大家的爱戴与尊敬，那么你永远不会真正达成你的目标。人们会意识到你可能只是在满足自己的虚荣心从而忽略你。

也就是说，必须认真对待我们的工作。如果不认真对待，好网站可能变差。我确定你肯定有过与人分享过有关网站越做越烂因为别人没有听取你的观点。但是多讲讲你的一些有关说服老板和客户，认真的对待你的观点的故事，可能更有益处。

封面图片版权: Aural Asia

原贴出处：

http://www.smashingmagazine.com/2011/08/25/how-to-become-a-web-design-expert/

翻译：

http://experience10.com/

August 31st, 2011 at 3:17 pm by allan. 0 Comments
filed under UX & Design

August 18th, 2011 at 6:47 pm by allan. 0 Comments
filed under UX & Design

在过去的几年中，iPhone成功的使得Tab Bar标签栏导航方式在移动设备上流行起来。Apple将tab bar和其它许多的设计原则整合到了他们的人机交互指南(HIG)中——但有些疑问他们从来没有回答。在过去的几年中我一直从事交互与图形设计，在这篇文章中我将分享一些我的想法有关什么是该做的，什么是不该做的。

第一课：魔法数字是5

这对从事iPhone设计的人来说不是新鲜事。自从iPhone的屏幕宽度为320点(dots)开始(1点＝2象素)，Apple设计了标准的tab bar不能超过5个tab，每个tab包含其图标与可读的文字。

5个之后会如何呢？当然，我们可以采用使用”More”标签的方式放进标准的tab bar。但是我还是推荐尽可能的去避免”More”标签。为什么呢？

• 首先，你自然会损失掉一个tab
• 你将记录”More”标签下功能的这个重担交给了用户。如果你的”More”下面的内容达到5个时，问题更加突出，这些加重了用户的认知负荷能力(cognitive load)
• 一些测试表明用户根本不知道”More”功能的用途，而且根本不会影响用户(来源：Tapworthy – Designing Great iPhone Apps by Josh Clark）

当然，当你在各种视图下工作、数据排序以及分类时（例如iPod），使用”More”标签的方式来替代让用户自定义标签会更合理一些。因为自定义标签的这种行为在某些情况下只适用于高级用户。

第二课：询问用户的意见

这种方式在你的设计过程中会非常有帮助，但标签的分类和级别应该更接近于你目标用户群的想法。当我们做这种研究测试时，记得事实1中提到的内容，不断思考所有的内容是否能分类到五个标签之中。如果不行，请问自己是不是非得用tab bar作为导航方式呢？

第三课：花多的时间在图标和文字上

一些用于图标设计及文案设计的点子：

• 确定图标和文案能真实的标签这些标签下所要进行的行为。最让人闹火的事情莫过于明明知道程序中有一个功能，但却不知道在哪个tab下面
• 避免一些语义上无关的设计，例如一个笔刷的图标但下面却写着“报表”。可参见 picture word interference
• 如果你要创建另一个“我的收藏”的标签，不用试着重新设计星形图标或改变文字“我的收藏”(Favorites)。虽然重新识别一个事物的成本低于回忆事物，但是我们应该帮助用户减少认知负荷(Jacob Nielsens Ten Usability Heuristics)
• 避免出现重复的文字。例如，想象你需要创建“我的图书”“我的杂志”“我的CD”这样的情况。根据Stroop effect(斯特鲁普效应)的解释用户会主动忽略掉这些文字。
• 让图标设计得有含义及易于识别这样用户能立即知道该点哪个tab，避免让用户考虑例如“到底是扳手呢？还是在齿轮表示设置呢？”
• 如果你在设计图标的时候遇到一些问题，不妨进这一层下面的内容去看看下面的布局以及内容是否能激发你的灵感。

重申，实地测试和探索非常重要。问问用户他们的理解方式！“你们认为这个脸部图标表示什么？”“你们觉得应该在什么样tab下可以找到Finder”“你觉得图标是脸，而文字写着Finder，这样说得通吗？”

Figure 1 — 左: NUUS 24 使用了相似的图标, 中: Spotify 使用了房子图标和 “What’s new”的文字, Right: Vimeo 重复使用文字 “My Videos” 和 “My Stuff”

第四课：避免自动改变tab

这是在我从事的很多项目中经常争论的问题。我的想法是，如果不是用户主动直接的在Tab上发生交互行为，永远不要改变Tab！我知道你们有可能在一些情况上发现这是唯一能解决一些奇怪的信息架构问题的方式，但是请还是主动去避免！为什么呢？

• 你在尝试打断用户所期望的控制行为。举例当用户点击一个表视图(Table View)的时候，他们永远期待二种结果：a)新视图从右向左滑进，b)新视图从下向上滑进。他们同样不希望在Tab Bar上发生他们预想不到的变化
• 你在扰乱用户早已习惯的iPhone“返回”交互习惯。如果他们没有注意到Tab已经改变，他们有可能以为到了下一级，试图找“返回”按钮

第五课：不要在Tab上做限制

如果你没有提供更好的方式让用户访问某些内容，不用让Tab设计具备限制性（如只针对注册用户）。让用户点击后才发现这些内容不可用时，这会让他们非常苦恼。

Figure 2 – Hemnet 应用中当你点击某个Tab时，提示你必须登录

第六课：小心使用自定义Tab

当越来越多的iPhone应用使用Tab Bar来展示信息架构的时候，设计师已经开始觉得无趣。设计师自己都知道，当设计师自己觉得无趣时，坏情况可能发生。一种方式就是为了避免设计上的无趣，开始自定义Tab Bar。

现在，我也是常常自定义Tab，因为能有个性，好记忆，而且有更好的品牌体验。但是有一些重要的事情必须牢记于心。

• 需花时候，而且有时候要花大量的时间。从开发人员角度来说，自定义Tab Bar 意味着完全重写代码。
• Apple设计Tab Bar和Tool Bar的颜色色调时是有一定理由的；它能很好的区别外观和导航的级别。将这种思想带到你的色彩设计之中。
• 有时候开发者和设计师总是忘了当点击一个Tab时，顶部的导航条显示了当前位置，同时如果有电话打入，系统的状态栏会变成双倍高度。别忘了设计这些情况。
• 有些应用使用一些自定的设计模式来应对具有共享视图的Tab Bar(如Twitter for iPhone)。如果你也考虑这种方式，那注意你有可能让你的用户产生疑惑。

Figure 3 — 在Twitter for iPhone中,这种多层Tab很容易让人困惑。当点了第一屏中的”651 favorites”后，进入了”favorites”视图，如中图所示，再点Back按钮，在第三屏中还是处于同一等级下的Tab，这时图标变成了”More”

总结

tab bar是你导航应用的主要方式。不要低估了设计一个完美的tab bar体验所要花的时间。这些总结中并没有绝对的规则，但希望能让你开启思路。

原文出处significantpixels.com翻译 Experience10.com

April 27th, 2011 at 4:01 pm by allan. 1 Comment
filed under UX & Design

1: Stop Thinking So Much不要思考太多
2: Take a Step Back往回退一步
4: Do Some Research做一些研究
3: Separate Entirely将复杂问题分解一下
5: Ask For Help寻求帮助

原贴地址

April 27th, 2011 at 10:44 am by allan. 0 Comments
filed under UX & Design

近来尝试使用Silverlight介入早期的iPad开发，尝试做一些原型用来测试交互设计的效果。由于Silverlight开发工具的便利及对触屏显示器的支持，开发速度非常快，虽然不能完全模拟在iPad上的效果，但也可以算是达到了一半快速原型的目的。以下是使用Dell的触控显示器的原型实际效果：

与此同时，为了方便下次使用，我把用于iPad模拟的项目文件制作成了一个Visual Studio 的项目模板，点此下载，以下是预览效果：

下载ZIP文件包后，拷到

C:\Users\[Your Name]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight

以后在新建Visual Studio项目的时候，在Silverlight分类下便可以看到这款模板

April 22nd, 2011 at 4:55 pm by allan. 0 Comments
filed under Silverlight, UX & Design

有人感兴趣为什么Douban电台的新图标是这个样子的吗？

看看这张图是不是有点明白了？

April 11th, 2011 at 2:21 pm by allan. 0 Comments
filed under UX & Design

早上看到一篇国外的讨论有关如何去界定设计师的技能要求和工作范围，有很多说法值得学习一下，拿到这里记录一下：

March 23rd, 2011 at 12:18 pm by allan. 0 Comments
filed under UX & Design

“当我们在看线框图的时候，有些东西就应该能感受到”

当我听到类似的话时，我常常感觉这不是客户理解能力的事，而是我们的内容如何表达的问题。作为一个交互设计师，我们的工作是当信息无法正确传达时去进行有效沟通，这时候就变成了我们的问题。同时，我们必须面对一个问题：很多人并没有完全接受类似于线框图一类的比较专业的文档。这需要一个学习过程，而且我们必须尝试去教育大家。

从翻开线框图文档的封面开始，整个过程往往比我们想象中要复杂一些。当我们一页页的浏览画面并表述时，客户也在尝试着对这些难以理解的文档提出正确的见解。

接下来是我常常使用的三个可视化的策略，用来使得整个过程更加顺畅并获得有效反馈。这些并不能替换你现有的演示技巧，但会很有帮助。

策略 1：讲故事

我觉得常常很难脱离一个上下文环境去描述设计，所以应该使用较好的讲故事技巧演示。

我喜欢把很多页面放在一张画面下，并展示一个实际的应用场景。这些内容应该能表达动机，前提条件及期望的目标。

让这些画面经过他们的大脑，我发现人们会尝试用角色扮演的方式来理解这些线框图。通常，能尽量少的争论主观上的细节而应该花更多时间讨论如何更好的完成预定的设计目标。第二个好处是，你可以重复使用这些预定的人物原型(Persona)以及场景(Scenario)。

视觉上，我使用流程图(Flow Diagram)加上画面缩图的形式来替代传统的大方块。这些“小局部”帮助我们理解交互之间的变化。当线框图之间有超链接之后，这个图片就变为更好理解的可视化的内容展板。

策略 2：带到幕后

另一难点是如何将整个系统的概念放到你的设计传达之中。页面布局以及设计模块都是关于一些页面中的小局部细节。通常，初始就能定下这些细节，然后再考虑其它页面的情况。

当我设计页面时，我会先创建灰色的方块。这些方块会主动失去一些内容上的细节，相互关系以及访问路径。当我快速浏览这些页面时，这些方块能帮助我去理解页面之间的关系以及是否有相似的内容可以被类型化。在做更多细节前，留给我更多抽象级别的考虑空间。

同时我发现这些灰色方块方式也是一个很好的方式去进行线框图的讨论。细节的缺失反而更容易让我们介绍页面的架构。常规情况下，我会讨论如下内容：

• 页面的意图
• 系统的本质是什么
• 为什么内容这样组织
• 为什么另一些页面共享一些相同的设计模式

在展示更多细节前，通过这些“带到幕后”的方式预览页面，客户常常能更好的去理解我们设计的原因。他们可以分享设计师的意图以及考虑一些细节变化如何影响全局。

下面的图表展示了一个演示的流程。在(1)中我会强调这二页之间的一些相似和不同。之后，我会花一些时间讨论每个页面－同时我会通过调整灰块的透明度(2)来适时的隐藏结构，以便于更清楚的表述。

策略 3：展示工作

我的草图画得很糟－很杂乱。当然，一些客户可能不愿看这些东西，但我发现也会有很多人感激你通过草图把这些想法带到你的工作之中。

设计像一门神秘艺术。有时候难以理解、太多选择、太丰富或过琐碎，整个过程中需要深思熟虑及做适时决策。如果我们能展示整个设计的过程－哪些设计被放弃以及哪些留了下来－帮助我们更好的证明最终结果。它能很好的展示你曾探索过很多不同的方式，并不是仅仅在执行最初的想法。草图同样还能强调设计时的一些限定和约束，最可能的解决方案，以及可以接受的需求妥协。

具体来说，展现这些越早越好－甚至早到最终线框图展示之前。偶尔的，我还会把他们放进最终的演示之间来表达为什么其它的方式效果不佳。

其它技巧：

这些只是仅有的三个策略来帮助你的观众更好的投入你的线框图演示。除了这些之外，我不得不提及其它一些对我非常有用的技巧：

• 从小处开始。很难同一时间去消化10－15个线框图。每当我们表达过多内容时，观众总是觉得疲劳而且给一些很沉闷的反馈。这些会使得发现问题的过程变得缓慢以及影响设计和开发的时间。当然，没有人真的愿意开很开的会。
• Dribbble ideas（注重过程）。引自来自Dribbble，考虑在早期更多的引入各种各样的想法。你的工作不必放在结果上，只是不断的告之客户你的工作进展，并获得反馈，避免后期的风险。获得的回报时，客户也会参与到创作过程中，帮你承担一定的风险。
• 指导你的客户。是不是总是在线框图阶段就得到一些视觉方面的设计建议？与其去向客户解释“这只是线框图而不是设计”，不如直接想办法表达你的设计重点，你可以从这个列表开始尝试。

你呢？

这些当然不是全部的策略。你平时使用什么样的技巧使你的线框图展示更顺畅呢？

原文出处 Viget.com
翻译 Experience10.com

March 22nd, 2011 at 11:29 am by allan. 0 Comments
filed under UX & Design

构建原型指的是构建基于XAML语言，可用于实际应用开发的前端资源文件。一方面当所有的设计稿转化为XAML后，能直接交给程序员进行开发，同时由于XAML语言本身具备很强的交互能力，能够让我们快速的预览应用的最终效果，帮助我们调整用户体验与UI细节。

整个过程有点像网站开发中的制作HTML的过程，但由于XAML语言有更强的扩展性和技术细节，一个原型应用我认为可以有几种完全不同的制作思路：

• Static XAML:纯静态XAML页面
• Control and Template based XAML:模板化与控件化的XAML页面
• ViewModel based XAML:基于MVVM模式构建的XAML页面

静态XAML就不用多说，完全是将设计稿进行1:1的转换为XAML语言。模板化与控件化的XAML页面是指在制作的过程中就能够根据最终的应用程序进行一些有效的样式提取，拥有更好的控件复用，样式重用等特性。

而基于MVVM模式构建的XAML，是目前最理想的方式。MVVM是近几年Silverlight开发中比较突出调强的一种开发模式。其基本原则是基于传统的MVC模式，让样式与数据与控制进行有效的分离。而由于基于Silverlight开发中突出的XAML表现层语言的特性，MVVM引入了全新的ViewModel的概念，通过ViewModel与XAML之间的数据绑定，来帮助快速的进行页面的呈现，是一种非常高效的开发方式。

同时，包括微软和其它开发者在不断开发各种有效的MVVM框架，使得MVVM模式还可以与Expression Blend进行有效的协同，使得在设计时就能够预览最终效果，进一步增强了设计到开发转化的工作流。有关MVVM的细则在这个系列中不再重复。我们会通过下面的过程来认识这样一种开发模式。

在这里我们选用的是一个比较轻量和简单的MVVM Light Toolkit框架。MVVM Light经过几个版本的开发，目前已经提供了Windows Phone 7的模板，可以在Codeplex下载。

如果你正确的按照安装指南安装了MVVM Light Toolkit的话，那么在Visual Studio中将能够直接创建基于MVVM Light的WP7工程文件：

Visual Studio默认创建了MainViewPage.xaml在项目中作为我们的应用入口。我们在项目中创建一个新的文件夹叫Views来放置我们所有的View文件，我们在新建的Views文件夹上右键单击选New Item，在接下来的对话框中选择MvvmView(WP7)，命名为Home.xaml：

我们打开位于项目的Properties/WMAppManifest.xml，将位于DefaultTask中的NavigationPage属性批量向/Views/Home.xaml：

接下来我们可以用Expression Blend来可视化的构建Home页面的UI布局：

[Placeholder]

Home视图主要采用Panorama Control，有关此控件的用法都可以从其它地方找到。接下来我们就要开始设计针对Home视图所使用的ViewModel。所谓ViewModel实际上就是用于某个View的数据模型。该模型的设计目标是保证View上的所有动态信息能够获得正确的数据，以及承担数据载入、刷新等操作。我们可以在ViewModel目录下，建立一个命为HomeVm的MvvmViewModel(WP7)项目：

通过对首页的UI设计的检查我们发现首页主要需要获得二个List类型的数据 ，一个是newest，另一个是most popular。而其下面所承载的数据都是单个的颜色方案(Theme)。我们通过检查Kuler的API来看看每一个颜色方案(Theme)的数据结构：

 <kuler:themeItem>
      <kuler:themeID>1175537</kuler:themeID>
      <kuler:themeTitle>Friends and foes</kuler:themeTitle>
      <kuler:themeImage>http://kuler-api.adobe.com/kuler/themeImages/theme_1175537.png</kuler:themeImage>
      <kuler:themeAuthor>
        <kuler:authorID>254539</kuler:authorID>
        <kuler:authorLabel>syork</kuler:authorLabel>
      </kuler:themeAuthor>
      <kuler:themeTags/>
      <kuler:themeRating>4</kuler:themeRating>
      <kuler:themeDownloadCount>1128</kuler:themeDownloadCount>
      <kuler:themeCreatedAt>20110105</kuler:themeCreatedAt>
      <kuler:themeEditedAt>20110105</kuler:themeEditedAt>
      <kuler:themeSwatches>
        <kuler:swatch>
          <kuler:swatchHexColor>2F2933</kuler:swatchHexColor>
          <kuler:swatchColorMode>rgb</kuler:swatchColorMode>
          <kuler:swatchChannel1>0.185839</kuler:swatchChannel1>
          <kuler:swatchChannel2>0.161431</kuler:swatchChannel2>
          <kuler:swatchChannel3>0.2</kuler:swatchChannel3>
          <kuler:swatchChannel4>0.0</kuler:swatchChannel4>
          <kuler:swatchIndex>0</kuler:swatchIndex>
        </kuler:swatch>
        <kuler:swatch/>
        <kuler:swatch/>
        <kuler:swatch/>
        <kuler:swatch/>
</kuler:themeItem>

通过API中返回数据的情况，我们可以实现自己的Theme的对象：

public class ThemeItem
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public string AuthorId { get; set; }
        public string Tags { get; set; }
        public string Rating { get; set; }
        public string DownloadCount { get; set; }
        public string CreatedAt { get; set; }
        public List<string> ThemeSwitches { get; set; }
        public ThemeItem()
        {
            ThemeSwitches = new List<string>();
        }
    }

然后我们在HomeVm中引用我们的对象，形成用于Home的数据结构：

public class HomeVm : ViewModelBase
    {
        private ObservableCollection<ThemeItem> NewestThemes { get; set; };
        private ObservableCollection<ThemeItem> MostPopularItems { get; set; };
        /// <summary>
        /// Initializes a new instance of the HomeVm class.
        /// </summary>
        public HomeVm()
        {
            NewestThemes = new ObservableCollection<ThemeItem>();
            MostPopularItems = new ObservableCollection<ThemeItem>();
            ////if (IsInDesignMode)
            ////{
            ////    // Code runs in Blend --> create design time data.
            ////}
            ////else
            ////{
            ////    // Code runs &quot;for real&quot;: Connect to service, etc...
            ////}
        }
    }

接下来需要做的是为UI准备一组设计时(Design Time)的数据，设计时的数据区别于最终编译运行后的数据，他将只呈现在Blend软件的环境之中，帮助我们更好的在Blend中对UI进行布局。将HomeVm构造的if(IsInDesignMode)的大段取消注释，并加入相应的方法用于构建样例数据：

public class HomeVm : ViewModelBase
    {
        public ObservableCollection<ThemeItem> NewestThemes { get; set; }
        public ObservableCollection<ThemeItem> MostPopularItems { get; set; }
        /// <summary>
        /// Initializes a new instance of the HomeVm class.
        /// </summary>
        public HomeVm()
        {
            if (IsInDesignMode)
            {
                BuildSampleData();
            }
            else
            {
               //Runtime Data
            }
        }
        private void BuildSampleData()
        {
            NewestThemes = new ObservableCollection<ThemeItem>();
            MostPopularItems = new ObservableCollection<ThemeItem>();
            ThemeItem theme1 = new ThemeItem();
            theme1.Id = &quot;1175537&quot;;
            theme1.Title = &quot;Friends and foes&quot;;
            theme1.Author = &quot;syork&quot;;
            theme1.AuthorId = &quot;254539&quot;;
            theme1.Tags = string.Empty;
            theme1.Rating = &quot;4&quot;;
            theme1.DownloadCount = &quot;1128&quot;;
            theme1.CreatedAt = &quot;20110105&quot;;
            theme1.ThemeSwitches = new List<string>();
            theme1.ThemeSwitches.Add(&quot;2F2933&quot;);
            theme1.ThemeSwitches.Add(&quot;01A2A6&quot;);
            theme1.ThemeSwitches.Add(&quot;29D9C2&quot;);
            theme1.ThemeSwitches.Add(&quot;BDF271&quot;);
            theme1.ThemeSwitches.Add(&quot;FFFFA6&quot;);
            ThemeItem theme2 = new ThemeItem();
            theme2.Id = &quot;782171&quot;;
            theme2.Title = &quot;Sea Wolf&quot;;
            theme2.Author = &quot;xizzzy&quot;;
            theme2.AuthorId = &quot;132523&quot;;
            theme2.Tags = string.Empty;
            theme2.Rating = &quot;4&quot;;
            theme2.DownloadCount = &quot;2038&quot;;
            theme2.CreatedAt = &quot;20100213&quot;;
            theme2.ThemeSwitches = new List<string>();
            theme2.ThemeSwitches.Add(&quot;DC3522&quot;);
            theme2.ThemeSwitches.Add(&quot;D9CB9E&quot;);
            theme2.ThemeSwitches.Add(&quot;374140&quot;);
            theme2.ThemeSwitches.Add(&quot;2A2C2B&quot;);
            theme2.ThemeSwitches.Add(&quot;1E1E20&quot;);
            NewestThemes.Add(theme1);
            NewestThemes.Add(theme2);
        }
    }

接下来我们在ViewModelLocator.cs尝试实例化我们的这个ViewModel，我们在ViewModelLocator中会发现MVVM Light模板还保留着默认的MainViewModel的相关信息，我们可以手工进行代码删除。在当前类中输入MVVM Light提供的Code Snippet，并按Tab键，自动生成相关的代码：

对生成的代码进行修改如下所示：

public class ViewModelLocator
    {
        private static HomeVm _home;
        /// <summary>
        /// Gets the HomeVm property.
        /// </summary>
        public static HomeVm Home
        {
            get
            {
                if (_home == null)
                {
                    CreateHomeVm();
                }
                return _home;
            }
        }
        /// <summary>
        /// Gets the HomeVm property.
        /// </summary>
        [System.Diagnostics.CodeAnalysis.SuppressMessage(&quot;Microsoft.Performance&quot;,
            &quot;CA1822:MarkMembersAsStatic&quot;,
            Justification = &quot;This non-static member is needed for data binding purposes.&quot;)]
        public HomeVm HomeVm
        {
            get
            {
                return Home;
            }
        }
        /// <summary>
        /// Provides a deterministic way to delete the HomeVm property.
        /// </summary>
        public static void ClearHomeVm()
        {
            _home.Cleanup();
            _home = null;
        }
        /// <summary>
        /// Provides a deterministic way to create the HomeVm property.
        /// </summary>
        public static void CreateHomeVm()
        {
            if (_home == null)
            {
                _home = new HomeVm();
            }
        }
        /// <summary>
        /// Cleans up all the resources.
        /// </summary>
        public static void Cleanup()
        {
            ClearHomeVm();
        }
        /// <summary>
        /// Initializes a new instance of the ViewModelLocator class.
        /// </summary>
        public ViewModelLocator()
        {
            ////if (ViewModelBase.IsInDesignModeStatic)
            ////{
            ////    // Create design time view models
            ////}
            ////else
            ////{
            ////    // Create run time view models
            ////}
        }
    }

打开Home.xaml，在第一行标记中加入如下属性：

DataContext="{Binding Main, Source={StaticResource Locator}}"

如果我们在Blend中再次打开Home.xaml，我们将看见我们的设计时数据已经关联到了Data面板之中

接下来就是开始构建XAML的UI界面了。虽然Blend提供了从PSD文件导入图层为位图的方式，但我个人更喜欢在Blend及XAML中直接实现各个控件效果，以达到更好的控制UI元素的目的。所以我会先放置设计稿到Blend文件的底层中作为参考图层，然后再放置相应的控件。打开Home.xaml并清空系统给我们放置的默认元素，整个对象的结构应该如下所示：

记得在选中PhoneApplicationPage层级的同时，在属性面板中将Show SystemTray设置为不选，这样在应用程序中的本页面下，将不显示手机屏幕顶部的信号，电池等系统托盘的信息：

在主画面中放置好我们的设计图作为参考：

然后我们放置Panorama控件，并简单设定一下标题等信息：

下面将是最有意思的一部分。我们知道我们在ViewModel中建立的二个集合分别用于newest和mostpopular面板，所以我们只需要简单的将第一个叫newestItems的集合拖入第一个PanoramaItem的Gird中：

Blend将自动根据我们的数据源来创建一个ListBox显示数据，调整ListBox的外观相关属性如图所示：

右键单击ListBox，编辑ItemTemplate:

由于我们的设计稿已经放置在画面下方，所以我们可以根据设计稿的要求，来调整各个数据的显示位置，并清理不需要的数据，进行简单的布局操作后，结果如下，注意我们放置了一个空的Border用来放置一会需要绑定的颜色预览：

接下来我们需要实现显示我们的配色方案。比较简单的做法是通过ItemsControl控件来放置五个方块。每个方块的颜色由ItemsControl的数据源提供。所以我们先放置一个ItemsControl到画面之中,同时继续从数据源中将ThemeSwitches数据源拖动到ItemsControl之上：

如果成功的绑定数据的话，我们已经能在画面中看见一些颜色数值进入了ItemsControl之中，接下来我们需要做的是对ItemsControl中每一个呈现数据用的项目进行一些模板的定制：

我们去掉Blend自动为我们生成的元素，在里面放置一个60×60的矩形：

由于我们数据源中的颜色数值只是一个字符串，所以为了与这个方块的背景色进行绑定，我们需要做一些转换操作，接下来我们在Visual Studio中做一个额外的编码工作，创建一个值转换器(ValueConverter)，代码如下：

    public class ColorBrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string s = System.Convert.ToString(value);
            byte a = System.Convert.ToByte("FF", 16);
            byte r = System.Convert.ToByte(s.Substring(0, 2), 16);
            byte g = System.Convert.ToByte(s.Substring(2, 2), 16);
            byte b = System.Convert.ToByte(s.Substring(4, 2), 16);
            return new SolidColorBrush(Color.FromArgb(a, r, g, b));
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

回到Blend中，刷新解决方案之后，我们回到定义方块的地方，选中矩形，在Properties面板的颜色选择中，点击Fill右侧的方块，选择Data Binding…

在接下来的对话框中,在下方的Value Converter选项中，点击右边的更多按钮，在对话框中选中我们刚才建立的ColorBrushConverter

确定后如果没什么问题，你将能看颜色方块出现。接下来我们调整一下ItemsControl的ItemsPanel，也就是控件对其下面的所有Item元素进行布局的这个面板。回到上一级，继续操作ItemsControl。如下图所示，创建一个ItemsPanel：

在ItemsPanel中,将默认的StackPanel的Orientation改为Horizontal，也就是水平方向：

处理好之后就能看见实际显示的效果了。我们可以继续修饰一下一些UI元素的细节，达到和设计稿一致的效果。但需要注意的是，现在进行发布预览无法获得和在Blend中一样的效果，因为的样例数据只在设计时呈现，如果需要在运行时用现在的样例数据进行预览，我们可以简单的修改一下HomeVm.cs:

        public HomeVm()
        {
            if (IsInDesignMode)
            {
                BuildSampleData();
            }
            else
            {
                BuildSampleData();
            }
        }

我们在这个判断语句中都使用BuildSampleData，就能临时使用我们制作的数据进行预览，最终的运行效果如下：

我们可以用同样的方法，在most popular区域中实现另一种不同布局的数据呈现方式，但需要注意的是，由于这个区域的布局与左侧不同，所以我们将不使用ListBox来构建，我们在画面中直接放置一个ItemsControl，并将相应的数据源绑定到ItemsControl下面：

继续对ItemsTemplate进行一些UI上的调整，思路与上面的类似，制作完成后结果如下：

接下来我们需要实现类似设计图中的WarpPanel的效果。每一种排版方式我们都可以通过编程实现，但更好的是微软在最新版的Tool Kit中已经提供了WarpPanel以及其它有用的控件，所以我们只需要引用相应的库就可以实现。ToolKit的最新版可以在CodePlex获得。安装好Tool Kit后，我们在项目中引入相应的库：

返回Blend，我们为ItemsControl创建一个新的ItemsPanel，删掉默认这个模板下的StackPanel，从Assets中找到WrapPanel，拖动到这个控件下面：

接下来还需要做的是将WrapPanel的排列方向由水平改为垂直：

回到主画面后，我们已经看到了实际的效果，但我们发现面板的右侧被截短，这时候我们需要先将整个这个PanoramaItem的对齐方式由默认的垂直改为水平，让这个PanoramaItem可以水平方向向右延展：

然后我们将这个PanoramaItem的高度设为定高，并向左对齐，如图所示：

这样我们的第二个most popular区域就已经顺利完成了。

优化一些细节，比如设计一个字母大小写的转换器，让画面中绑定文字的地方，通过转换器变为全大写的形式，以符合设计稿的要求。

接下来我们实现其它设计细节，编辑应用程序的标题，也就是Panorama的Header：

我们在空的默认中随意插入一个文本框，用以达到与默认的Title似近的效果，方便我们预览：

通过调整形成如下图所示的效果，比较特殊的是，我们将Logo中的一部分作为一段XAML Path置入，这样在未来我们可以实现对其颜色的动态绑定，在后面我们将用得上，Blend本身支持从Photoshop或Illustrator文件导入，所以我们只需要导入一个AI路径文件，该路径就会自动转换为XAML的Path：

最后我们做一些小的功能上的优化，让每次使用应用程序时的背景，都从最新的主题上随机取得一个，我们在HomeVm中建立二个新的属性，同时在建立样例数据后， 加一个随机的方法：

public string ThemeBackground { get; set; }
public string ThemeForeground { get; set; }
//...
        private void RandomAppTheme()
        {
            ThemeItem randomTheme = NewestThemes[(new Random()).Next(NewestThemes.Count - 1)];
            ThemeBackground = randomTheme.ThemeSwitches[0];
            ThemeForeground = randomTheme.ThemeSwitches[1];
        }

然后我们在Blend中对背景进行数据绑定：

同样，我们对需要设置ThemeForeground的一些元素也进行相应的绑定。最后运行时的效果如下，这样我们在每次运行时都能获得不一样的配色效果：

January 28th, 2011 at 5:24 pm by allan. 0 Comments
filed under UX & Design, WP7