长期以来，设计人员和开发人员之间一直存在紧张关系，通常认为代码和用户界面存在冲突。 实际情况并非如此：精心设计的UI可以帮助定义基础代码，而代码片段则可以通过向用户显示应用程序的形状来增强原型，从而优化项目可交付成果。
冲突的一部分来自设计和编码的优先级。 以代码为先的方法可能导致设计师只有很少的时间来制作UI并将其与代码绑定。 以设计为导向的方法也存在问题，可能需要在最后时刻进行前加载用户体验，或者对代码施加限制，从而增加了复杂性。 由此导致的缺乏协调会导致挫败感，并导致不良的项目范围和不正确的估算，项目交付的时间少于预期和计划的时间。
[ Visual Studio Code入门 ，Microsoft的轻量级编辑器，适用于Windows，MacOS和Linux。 •了解最新版本的Visual Studio Code中的新增功能 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]
向Web和移动的转变使设计成为应用程序开发生命周期中越来越重要的部分。 这个问题意味着您需要问如何尽快将设计和开发整合在一起？
通过草图进行设计和开发
大约十年前，作为其Silverlight开发工具的一部分，Microsoft引入了基于草图的UI设计模型 。 SketchFlow基于Microsoft Research的Bill Buxton所做的工作，在他的《 素描用户体验》一书中对此进行了详细介绍。 作为现代设计思想的先驱之一，巴克斯顿（Buxton）的产品设计跨学科方法以草图为基础。 SketchFlow提取了这些纸上的草图，并提供了WPF中使用的关键用户界面组件的简化，类似草图的实现，可以在XAML画布上使用。
使用SketchFlow，设计人员可以将UX元素快速拖放到粗略设计中，并将这些控件绑定到界面上。 开发团队可以采用该草图并向其中添加代码，以迭代用户可以在与设计团队一起构建实际应用程序时测试的一系列原型。 设计更改将导致可以将新草图附加到代码上，以查看它们在实践中的工作方式。 SketchFlow元素具有手绘的感觉，因此不会与最终产品混淆，从而降低了原型被视为可交付的风险。
同样，开发人员可以快速将UX草图汇总为新代码，并根据需要添加控件和页面。 一旦他们构建了新功能，他们就可以将SketchFlow草图传递给设计者，后者可以对其进行完善而不影响基础代码。 随着时间的推移，随着应用程序的成熟，设计人员可以将草图控件替换为实际控件，从而将草图转变为最终的用户界面，以供用户测试和发布。
使用Adobe XD的UI布局
随着逐步淘汰Silverlight以及Blend作为Visual Studio套件中XAML设计元素的新角色，遗憾的是不再支持SketchFlow。 相反，现在鼓励您使用Adobe的XD设计工具来构建UX原型。 Adobe XD是一个很好的工具，但是它更加注重设计，并且将UX元素和设计输出为图像。 它是可扩展的，Microsoft提供了一组UWP设计模板 ，可将关键元素添加到屏幕设计中，但同样，这些只是图像。 它也是在Photoshop或Illustrator中创建的设计元素与应用程序之间切换的有用工具。
使用XD，您使用的是设计工具，除了将一个设计中的热点链接到另一个设计，从而模拟应用程序流程之外，没有交互性。 这对于模拟设计很好，但是当您构建功能原型或从一组设计组合过渡到代码时，这无济于事。 与使用PowerPoint进行视觉原型制作相比，这无疑是一个更好的选择，但就交互性而言，它并没有走得更远。
使用Ink to Code返回草图
即使它不是Visual Studio的一部分，在应用程序开发中仍有一个草图的位置。 微软内部孵化器的最新版本，车库，部分替代了用实际的草图绘制工具替换SketchFlow，该工具可以将您的图纸转换为原型用户体验。 最初由Xamarin团队赞助的Ink to Code是一种快速组合轮廓UX，使用机器学习工具来完善您的草图并将其用于UWP或Android Xamarin应用程序的方法。
Ink to Code是一个相对简单的应用程序。 您将看到一块空白画布，非常类似于典型的绘图应用程序。 屏幕左侧的一些控件使您可以放大和缩小页面，以及在受限和不受约束的绘图模式之间切换。 另一个按钮将标尺覆盖在屏幕上，以帮助布置控件。
至少在您不熟悉“油墨到代码”的情况下，最好打开指南窗格。 在这里，您可以找到绘制不同控件类型所需的手势：按钮，标签，文本框，段落和图像。 这不是您将在Xamarin或UWP应用程序中使用的全部控件，但是足以入门一个基本UI，一旦将其导入Visual Studio，就可以对其进行扩展和扩展。
IDG Microsoft Garage的Ink to Code工具
使用墨水进行编码
我建议使用带有Ink to Code的Surface或类似的平板电脑； 屏幕像一张纸一样平放时，使用起来要容易得多。 您可以绘制相当粗糙的矩形和圆形，该应用程序可以将它们转换为适当的框，并产生令人惊讶的有效UI元素。 在向页面或按钮添加标签时，它甚至可以处理我几乎无法阅读的半草书文本。 有两种绘制模式：一种提供自由格式的布局，另一种将您限制为网格。 尽管可以在Visual Studio中编辑布局，但是使用限制可以帮助提供更有用的用户体验。
完成布局草图后，可以将其导出为Android的Xamarin XAML或Windows应用程序中使用的UWP XAML。 由Ink to Code生成的XAML确实需要进行一些编辑，然后才能在Visual Studio中使用，但这更多的是为应用程序添加适当的类名称，以便可以开始将其创建的XAML控件链接到代码。
这里有很多希望，但是像大多数车库项目一样，它需要一个赞助商才能将其从当前的基本形式扩展到可以作为Visual Studio工作流一部分的工具。 尽管它显然是用于测试用户界面的工具，但是Ink to Code绝对与开发人员的体验脱节，无法使其完美地适合您的工作流程。 它也是一种单向工具：您不能将现有的UI引入草图表面以进行快速更改，也不能将其与源代码控制工具一起使用以确保记录您的设计更改。
IDG 墨水到在Visual Studio中呈现的代码
微软清楚地意识到其开发工具方面的差距，但是目前这两个主要选项还不是Visual Studio生态系统的一部分。 Adobe XD无疑是Adobe设计家族的一部分，尽管它为常见设备提供了量身定制的设计图面，但它非常注重故事的设计部分而不是支持代码。 Ink to Code更不成熟，但是它具有开发人员将草图带入原型所需的代码重点。 两者都在应用程序开发生命周期中占有一席之地，但是如果没有深度的Visual Studio集成，您将需要找到自己的方式将它们带入项目工作流。
From: https://www.infoworld.com/article/3301156/solving-the-ui-challenge-in-visual-studio-code.html