WPF 设计师：您的设计过程是什么？ [关闭]答案

【问题标题】：WPF Designers : What is your design process? [closed]WPF 设计师：您的设计过程是什么？ [关闭]
【发布时间】：2011-10-14 18:58:26
【问题描述】：

我将完全重新提出这个问题。所以这是一个很大的修改

我正在寻找 WPF 专业人士关于他们的设计过程的一些反馈。例如，当我设计一个网站时，在我编写任何 HTML、CSS、JavaScript 之前，我会在 Photoshop 中设计界面，这样我就可以向客户展示他们网站的外观。在我编写任何代码之前，我会选择样式、配色方案、大部分（如果不是全部）第三方图形（图库摄影）一旦客户批准了设计，我就开始构建它。

我想知道设计 WPF 桌面应用程序的等价物是什么。在设计界面时，选择配色方案，选择按钮样式，选择可能进入其中的任何图像，首先创建模型是否常见？您是否只是在构建它的同时快速创建所有图形。或者更常见的是在网上找到一个主题/皮肤并在您的应用中使用它？

再说一次，我知道没有正确的答案，我只是想听听你们都在做什么。

谢谢

附言- 我有 Expression Blend 4，我擅长手写 XAML（不仅仅是在 Blend 中使用设计视图）。我的问题不是关于我应该使用什么工具来构建 WPF 应用程序，而是关于设计过程。

【问题讨论】：

如果您来自印刷/网络背景，那么这个microsoft.com/expression 应该是设计 WPF 的一个很好的解决方案...
@Yahia，感谢您的反馈，很抱歉我的问题可能让您感到困惑……我已经重新措辞了我的问题。
也许 Yahia 谈到了表情设计而不是融合？
我投票结束这个问题，因为“没有正确答案”和real questions have answers。

标签： .net wpf expression-blend application-design

【解决方案1】：

在进行任何 Xaml 编码之前，我们已使用 Microsoft Visio 进行布局并获得 UI 的批准。如果你真的很擅长 Photoshop，我认为这不会比 Photoshop 好太多。对于我们这些不太擅长 Photoshop 的人来说，Visio 有很多工具可以对齐东西、应用颜色样式等。一个人做了很多库存对象，我们打开他的文件进行复制，这样我们所有的UI 模型看起来一致。

有趣的是，现在我擅长使用 Xaml 编辑器，我发现在许多情况下它比使用 Visio 更快。 :-)

【讨论】：

【解决方案2】：

对于 WPF 应用程序，使用 Blend 来设计界面是最好的方法，因为您可以直接将 Blend 中的 xaml 重用到 VS 中，并且您不需要返工。虽然，您不会发现太多具有 Blend 专业知识的设计师（与 Photoshop 等相比）；因此，到目前为止，WPF 世界中的设计流程并没有那么多（如在 Web 中）。

如果您擅长使用其他设计工具并想使用它们（如 photoshop），那么您可以评估这些工具以从其他格式创建 XAML -

Visio Export to XAML 用于创建 XAML 的 Visio 2007 加载项直接。

XAML Tune – Convert SVG# to XAML 一个免费的工具，让你将 SVG 文件转换为 XAML 文件。它自动执行 XAML 转换为了改进设计和代码集成。

Adobe Illustrator Export to XAML 免费提供的插件使 Adobe Illustrator 能够导出 WPF 和 Silverlight 兼容 XAML

Adobe Illustrator to XAML Export C# Script 一个脚本以 WPF/XAML 格式导出 Adobe Illustrator 图稿。剧本使用 Illustrator CS2 COM 类型库以 C#/.Net 2.0 编写。虽然它在 Illustrator 中被视为脚本，但它也是独立应用程序。

Adobe Fireworks Export to XAML Infragistics Fireworks 到 XAML Exporter 是一个 Fireworks 扩展，可让您轻松地将 Adobe Fireworks 中创建的图稿转换为新的 XAML 格式与 Windows Presentation Foundation (WPF) 一起引入。对于那些您拥有在 Fireworks 中创建的艺术作品库（如 Infragistics Visual Design Group），这应该是个好消息！你现在可以在新的 WPF 中重用以前的图稿、填充和布局应用程序。

Adobe Photoshop Export to XAML 简单、免费、开源的工具用于将 Photoshop .PSD 文件转换为 XAML。还支持有限的 SWF 转换为 XAML。

Adobe Flash Export to XAML 一个免费的转换工具 Adobe/Macromedia Flash 文件到 XAML

SVG Export to XAML 另一个免费工具，可让您将 SVG 文件转换为 XAML 文件。

取自 - http://www.realsoftwaredevelopment.com/the-complete-list-of-xaml-tools/

【讨论】：

【解决方案3】：

样机不仅仅是一个好主意：我认为，如果您有任何复杂的东西并且您希望您的客户满意，那么它们是强制性的。我见过两种都成功的方法：

1) 使用 Sketchflow（现在是 Expression Blend 的一部分）创建交互演示。您拥有 Blend 的所有功能，但它处于快速原型设计环境中。然后，您可以构建整个项目并将其发送给您的客户进行审查。如果您的项目交互量很大，这是一个很好的方法。 Check out these videos Sketchflow 速成课程。

2) 将您的 Photoshop 合成素材直接导入 Blend。我没有将它与 akjoshi 提到的一些工具进行比较，但它确实有效。关键是将每个屏幕切成小块，然后导入它们。然后，您可以随时调整每个部分，将它们转化为资源等。

【讨论】：

我同意 Mike 所说的大部分内容，它适用于 windows(WPF) 世界；但是 Kdub 来自 Web，并且他提到的过程通常在 Web 中遵循（考虑到 Web 应用程序的 UX 因素的重要性，它适合）。在 Windows 的情况下，功能更为重要，并且由于受限的用户群（与 Web 相比），第一优先级并不总是 UI。

【解决方案4】：

我建议您在 Illustrator 中制作屏幕和资源，因为您可以稍后导入矢量资源。然而，没有奇迹，Blend 无疑是处理视觉内容（尤其是动画和屏幕行为）的工具。

到目前为止，这是我的方法：

FreeMind（或 Visio，如果您愿意）上的功能要求和信息架构
Illustrator 上的线框和复合材料
Illustrator 上的“资产板”（您要导入的所有内容：画笔（颜色和渐变）、图标、复杂形状）
创建图片库（类似于网络，带有 PNG 的首选项）
创建资源字典（如 CSS）：样式（尤其是字体）、模板、画笔和图像等。

还可以使用 Sketchflow 在 Blend 中模拟概念验证或基本交互式模型。我不熟悉这个，但我听说它很方便。

当然，Illustrator 可以被 Photoshop 取代，我只是认为 Illustrator 更接近您在创建 XAML 时应该想到的：有图形样式和符号工具可以作为等效的 XAML 资产。然后，您将更好地了解如何组织您的制作。

【讨论】：