设计师和开发人员一起工作

Question

WPF和Silverlight丰富的表现能力意味着像我这样的开发人员现在会更频繁地与平面设计师密切合作，就像我的下一个项目一样。

有没有人有任何提示和经验（从两个角度来看）让这个更顺利？

例如，当我最近向设计师提到源代码控制时，我很快被告知你无法获取控件图形，图像等，所以这是浪费时间。所以我回答：好吧，但是，WPF / Silverlight中的XAML文件怎么样？

Scott Hanselman在podcast中谈到了这个话题，但他更多地关注这些工具，而我对沟通问题/方面更感兴趣。

Answer 1

我发现的一件事是，作为开发人员设计代码的方式会极大地影响设计人员可以用它做什么。通常你从网上下载一个Silverlight或WPF示例应用程序并在Blend中打开它，只是为了让Blend崩溃，因为代码在设计器中运行不好。如果它没有崩溃，它很少看起来像正在运行的应用程序。

我最近在Tech Ed Australia和新西兰发表了关于您可以应用于“可设计性设计”的技术的演讲。包括一个简短的列表：

1. 编写可以利用数据绑定的代码。 Model-View-ViewModel或表示模式非常适合这种情况。

2. 为您的服务依赖项提供“设计时”存根。如果您要绑定的类进行Web服务调用，请务必使用存根类替换Web服务客户端，该存根类返回设计器在内部混合中使用的“虚拟数据”。这可以通过IoC和依赖注入轻松完成，如果HtmlPage.IsEnabled == false，则注入一个实现。

3. 通过使用数据绑定，您可以限制XAML文件中“命名元素”的数量。如果您编写了大量代码，最后将C＃代码与命名元素（如txtName或txtAddress）相结合，使设计人员可以轻松“搞砸”。

4. 使用命令模式而不是单击事件处理程序后面的代码。通过从处理程序中松散地耦合事件的调用者，您可以拥有较少的命名元素，并且您可以让设计者自由选择Button或Menu Item来调用特定命令。

5. 在Blend中测试您的代码！即使您认为自己是纯粹的开发人员，您也应该通过工具测试您的代码是否可以使用，并努力在设计时获得最佳体验。有些人认为工具不应该影响你的软件设计，正如有人抱怨“可测试性设计”，并且制定软件设计决策只是为了使代码更容易测试。我认为这是一件很聪明的事情，也是你获得一些真正的设计师 - 开发人员工作流程的唯一方法。

其他提示是从小做起。如果您的设计人员不熟悉XAML，WPF和Silverlight，请先将他们介绍给项目团队，让他们在他们熟悉的工具中进行一些基本设计。让他们在Adobe Illustrator中执行一些按钮和插图，并将其导出到XAML，并向他们展示如何直接利用他们的设计资产。继续介绍越来越多，希望他们感兴趣，并希望切换到Blend。这是一个相当学习的曲线，但它确实值得！

祝你好运！

PS：我已经在http://jonas.follesoe.no的博客上撰写了关于模式和设计友好代码的文章。您还可以找到我的Tech Ed演讲录像的链接，以及进一步阅读该主题的大量链接。

Answer 2

我花了4个月的时间与一个与设计师密切合作的项目，他仍然没有找到CVS的基本概念（这不是我选择的源控制系统）。我在这里谈论模板文件，JavaScript和CSS。他并不愚蠢，只是其中一件事让他的工作变得更加艰难，所以他拒绝全力以赴。

在我的情况下，我必须真正重视我几乎所有的JavaScript都依赖于标记，并且当他将纯CSS，基于DIV的布局更改为基于表格的布局而不告诉我然后我的所有JS将要破产。

在项目进行过程中，我自己和设计师（我相处得很好，并且在工作之外踢足球）经常在我们各自的职责上进行非常热烈的交流。如果我不能很好地了解他，只是通过这些交流，那么我认为这会创造一个难以忍受的工作环境。因此，我认为您在两者之间以及某种经理或项目主管之间建立起来非常重要，这与项目期间双方的期望完全相同。

在我的情况下，最近出现的问题很少，因为CVS的情况已经得到解决，并且他不能随时改变标记的想法。设计师不是尝试创建模板文件并直接处理模板文件，而是只处理静态文件，我有责任将它们插入模板文件中。

这都是关于沟通和双方的一点妥协。

Answer 3

这可能有点偏离主题（我专门回答你关于源代码控制和图形的问题），但你可以将二进制数据（图像等）放入源代码控制中（并且在我认为在很多情况下应该） - 它们只占用更多的磁盘空间而你不能使用差异视图以任何有意义的方式分析发生了什么变化，但你获得的是提交消息的历史记录每个修订，回滚功能以及轻松归档（以SVN术语标记修订）的所有文件（无论是可视资产，文档，源代码，等等）属于特定版本/版本的能力。您的构建系统也可以更轻松地从源代码控制中获取构建特定版本软件所需的所有内容。

Answer 4

让平面设计师参与早期设计和架构会议。

你想让他们参与揭示错位的假设，并建立一种共同合作的模式，而不是在墙上来回扔东西。

Answer 5

最初，设想专业设计师可以在Expression Blend中工作，开发人员可以在Visual Studio中工作，对单个共享源文件集进行更改。虽然当然可以这样做（只要你小心定期检查你没有破坏其他开发人员或设计工具所期望的东西），开发人员社区的许多成员，包括微软内部的一些成员，都发现了保持Blend和Visual Studio项目活动分离的好处 - 甚至可以将精心重构的Blend生成的Xaml版本手动剪切并粘贴到“官方”VStudio项目源中，而不是让设计人员和开发人员直接在单个操作上运行共享代码库。微软在英国的用户体验团队发布了一段视频，描述了他们试图协调设计师和开发人员在实际项目上的努力所遇到的问题。

Real_World_WPF_DesignersAndDevelopersWorkingTogether

主要经验教训之一是，您无法与完全不了解彼此域名的设计人员和开发人员合作。开发人员需要熟悉Blend，他们可以为设计人员提供有用的UI shell供设计师进行装饰，以及设计师可以设计交互性的有用数据“存根”，设计师需要对他们不喜欢的开发问题有足够的了解。不做删除控件并用自定义视觉元素替换它们 - 没有意识到它们破坏了与原始控件相关的所有功能。

Answer 6

微软对设计师/开发者工作流程婚姻的看法在现实生活中肯定会被打破。我有相当大规模的WPF项目工作经验，涉及2个专用设计资源约4个月。以下是微软似乎经常忘记的一些事实。

• 设计师通常更喜欢使用Mac（我公司的设计师是100％Mac - 0％Windows）
• Blend不能在Mac上运行（就VM解决方案而言 - 设计人员通常不喜欢像在国外操作系统中运行奇怪的应用程序那样令人讨厌的解决方案。）
• 设计师使用他们的交易工具 - Photoshop和Illustrator。周期。
• 今天时间表的侵略性通常不会为设计师提供足够的时间来学习全新的应用/设计环境（如Blend）。

所以考虑到上述情况，我注意到的是，这创造了一种新的工作类型 - 要么是技术娴熟的设计师，要么是图形开明的程序员。基本上，可以以原始形式获取设计资产的人 - 通常是.psd或插图画家格式，并根据需要将这些应用到应用程序过程。

我原来是那个人（图形开明的程序员）。我花了很多时间从Illustrator文件中导出XAML，必要时手动清理它们，并使这些资产可以轻松地在Blend或VS中显示对象。有时我会采用一个设计元素并使用混合重新绘制它（通常当原始资产是基于位图时，将它转换为矢量更有意义。）

我的应用程序可能不是典型的 - 因为它非常图形丰富，分辨率独立性是主要目标之一，因为它需要在多种分辨率和宽高比上看起来很好（想想当今景观中设计电视的困难） - 低分辨率SD和高分辨率HD都要看起来很好。

总之，我认为WPF是一项非常棒的技术，绝对是迈向正确方向的一步。然而，除非您重新定义设计师的角色，否则它不是将设计师整合到开发过程中的最终解决方案。

Answer 7

我是Felix Corke，你提到的hanselman播客的设计师，所以这里有一些来自真正的创意而不是开发者。

花了很长时间才习惯开发人员工具 - 几年前我第一次开始做xaml工作时，我从未听说过Visual Studio，C＃或任何类型的源代码控制。他们和我一样陌生，也许是Illustrator或3DsMax对你来说。

我最大的一点是，不能指望设计师了解开发人员的做法 - 请准备好做大量的手工操作。您将不必学习任何新东西，而设计师将会开始进入应用程序开发的全新可怕方面。我做了一些正确的解决方案和签到（现在仍然如此）。

令人高兴的是，我学会了成为一个专注于设计的集成商，而不是一个直接的创意，也许这是你需要包含在你的项目中的一个角色。这是我为我们的美女和极客设计师/开发人员会议所做的插图 - 如果你们中任何一方在任何一端走得太远，那么很难理解其他人如何工作以及他们的角色应该是什么。

很高兴回答任何具体问题！

ps你不想在源代码管理中使用100Mb + .psd文件;）

Answer 8

我非常相信Integrator方法，这是我为使WPF工作取得成功而必须履行的职责。

劳伦特·比尼翁（Laurent Bugnion）对此有一个post来描述我在说什么。 Robby Ingebretsen也是这种方法的忠实信徒。

但基本上，有人必须涵盖开发者世界和设计师世界之间存在的“差距”。通常情况下，这个人来自开发者世界或设计师世界。如果他们来自开发者世界，那么他们可能是具有设计师倾向的开发人员（他们负责外观和感觉，应用程序中的视觉效果，屏幕的布局等）。如果他们来自设计师世界，那么他们就不会害怕代码和享受潜水，不时地编码以获得动画或任何闪闪发光的东西。

然而，无论他们来自哪个世界，他们通常都必须建立以前从未有过的技能。在我的情况下，我是喜欢用户界面层的开发人员，因此我会说我是设计师倾向的开发人员。为了弥补这一差距，并与我们的图形设计师进行富有成效的对话，我不得不学习一大堆设计师类型的技能，如：学习使用Expression Design，XAM 3D等。

Shannon Braun最近在当地开发者大会上发表了关于开发者/设计师关系以及社区发现为他们工作的工作流程的演讲。我没有参加会议，但我认为他slides对此事进行了很好的讨论。

Answer 9

设计师感到有权远离构建软件产品所涉及的整个工作的程度是一个需要解决的更大问题。不要迎合任何设计师表达的权利，不必知道他们的工作如何融入整体。

在设计师社区中长大的那种鲜明的专业化是软件开发行业面临的最大的工业成熟问题之一。这是一种专业化程度，可以预见会产生更多的返工和更长的周期时间。

开发人员有幸不知道交互设计和实现的权利也是如此。

极端专业化始终是生产力问题的指数乘数。通过采用促进学习文化的过程在组织上解决它。这是大多数其他制作行业已经实现的成熟度，而且软件背后也是如此。

在开发工作流程中的每个位置，在过度专业化，工作队列和缓冲区之间发生切换。软件仍然是少数几个不承认这是我们面临的最大问题之一的行业之一。由于微软通过其工具和指导过度专业化，过度专业化似乎越来越正常，因此微软社区的情况更加恶化。除非你能够像开发工作那样浪费尽可能多的钱，否则你应该寻找能够更好地了解流程和生产力问题的方法。

因此，无法测试的开发人员和无法编码的测试人员是同一行业不成熟的症状。

您不会从TFS的Scrum模板中学到任何这些。即使在最基本的形式下，微软在实现敏捷思维的过程中已经多年落后了多年，现在我们正在逐步实现精益思维，微软将再过三到五年才能将精益思想纳入其产品线。不要等待Microsoft告诉您如何塑造团队和工作流程。您现在可以从微软最终会在几年内关注的人那里学习。

Answer 10

根据我的经验，除非（小）团队中的每个人都能够执行此角色，否则集成商或“devsigner”角色确实需要参与此过程。这是一种非常罕见的情况。通常你会发现开发人员非常擅长开发，但在设计/可用性方面并不是很好，设计师在美学/可用性方面很出色，但不想或没有足够的教育来编写代码。拥有一个可以跨越两个世界并“说出语言”的人是非常重要的。

集成商需要使用设计人员创建的设计资产来协调正在开发的控件。在我们目前的项目中，我们有6名活跃的开发人员和2名来自外部商店的设计师。我是这个项目的集成商，我大部分时间都在Expression Blend中度过。开发人员主要在VS中创建符合我们产品规范的控件，而设计工作室正在设计最终产品的外观。设计师正在使用Illustrator。我的工作是获取Illustrator文件并从中创建控件样式，然后将它们应用于我们的开发团队开发的控件。当我们转向Blend 3并对PSD和AI文件提供本机支持时，此任务变得更加容易。

在应用程序主干的单独解决方案中为应用程序创建“外观”非常有用，然后将ResourceDictionaries合并到主应用程序中。您可以获得外观和感觉正确，而不会陷入可能仍然不完整的控件。

Answer 11

我将假设你提到SL后就提到了RIA项目。

我在Adobe设计和开发应用程序和服务时已经完成了一些RIA项目。

基于我14年的UX和视觉设计师的经验，我可以给你最好的建议，虽然与你们相比有点可怜但是有点编程经验。

接受你不会互相理解。

程序员认为应该做什么功能，设计师会认为 功能应该如何运作。

对于开发人员来说，按钮通常是通用的，对于设计师来说并非如此。设计师在构图中思考，开发人员在框架中思考。

所以要学会明白你的责任是不同的。

开发人员需要考虑代码的通用性，并且不能将所有内容都视为独特的和硬编码的组合。除非你能以某种方式自动化这种独特性。

设计师需要将应用程序或服务视为某种独特的。这可能意味着按钮不是按钮。可能有不同的大小或颜色或其他烦恼。

因此，请确保您了解设计师的责任并确保他了解您的设计师，从而与设计师建立良好的关系。

并不是说你对世界上最好的应用程序不感兴趣。只是这些设计决策中的一些需要花费很多时间。

确保您清楚了解设计师应如何为您提供服务，这样您就不会浪费自己的时间。什么格式，资产？命名

从一个范例交付到另一个范例所涉及的所有事情。

最重要的是沟通和尊重他们不知道如何做JavaScript或如何理解CVS的基本思想。

大多数开发人员，你不知道如何拯救他们的生命，寡妇是什么，如何最好地分层FireWorks或创建照片般逼真的图标，想出一个好的标语或让一些人理解普通的乔4个字。你不知道网格或对齐是什么，你倾向于把东西变成绿色和紫色。

设计师应该明白，仅仅因为你处理编程并不意味着你是一个机器人，你不能拥有创造性的想法和解决方案。他还应该尝试学习如何编程至少伪程序，以便他了解制作项目所涉及的内容。

最重要的是。不要开始讨论Mac与PC :)因为这个项目已被取消。

Answer 12

坦率地说，你应该告诉设计师，图像可以，应该和“将被放入源代码控制先生！” :)

它可能稍微不常规，您将无法进行合并或任何此类性质，但会有修订和历史等。图像也可以嵌入到源文件中的资源文件中控制也是如此。

XAML可以（并且应该）放在源代码管理中，作为一个标记文件，它将受益于所有功能。

就与设计师合作的提示而言，与你一起工作的人只会因为评论而吓到我，所以它可能归结为你正在与之合作的世界卫生组织。我会以一种很好的方式解释基本的最佳实践并从那里开始。