本文翻译自：From design to reality: building functional UIs with Qt Design Studio

原文作者：Qt公司产品营销经理 Matteo Capelletti

校审：Sam Wang

Qt Design Studio提供了一套完整资源来帮助UI设计师将数字体验变成现实。任何2D和3D的图形内容都可以通过Qt Bridge技术无缝导入Qt Design Studio，并转换为真正的UI应用程序。这篇博文将着眼于我们最喜欢的一些功能。

Qt Bridge for Figma

作为Qt Design Studio持续开发的一部分，我们投入了大量精力，为UI/UX设计师使用的一些最常见的内容创建工具搭建桥梁。

Qt Bridge技术使设计师能够将他们的工作从所有流行的设计和图形工具无缝地导入Qt Design Studio，而不会丢失任何细节。

将导入Qt Design Studio的汽车UI Figma项目

由于Figma备受设计师喜爱，所以Qt Bridge for Figma是我们所推出的最为成熟的bridge插件。在Figma中创建的任何设计文件都可以通过Qt Bridge for Figma导入到Qt Design Studio当中。除了导入图形（包括渐变、字体、颜色等），Qt Bridge for Figma还保留了每个项目的名称和ID，从而确保设计中的逻辑可以轻松地移植到最终的UI应用程序中。

分屏视图：UI设计和QML代码并排

Qt Design Studio支持纯可视化UI创建。同时，它能够自动将UI设计转换为QML代码，以便更多面向代码的技术美工和工程师进行编辑。

与UI相对应的QML代码在可选的分屏视图中可见，与UI预览并列。与每个UI组件相关联的代码可以通过简单地单击进行可视化，而可视化更改将实时反映到代码中，反之亦然。当设计师和程序员一起完成项目时，分屏视图提供了一个很大的优势，因为每个团队都可以实时地看到他们的更改对彼此领域的影响。对于那些希望只使用可视化工具的设计师来说，这个代码编辑器也可轻易隐藏。

Outrun仪表演示中的分屏视图

UI的某些方面更容易通过可视化编辑创建，而在其他情况下，编辑代码可能更快、更精确。例如，通过编辑图像X轴位置的QML代码，将一个元素绑定到另一个元素的中心通常更容易做到。总的来说，QML代码是一种简单的描述性、声明性语言，设计师在分屏视图中工作并实时查看更改时也可以轻松掌握它。

在2D和3D视图之间切换

大多数传统UI设计工具都只提供2D或3D图形的单一支持。通过Qt Framework和Qt Design Studio，技术美工可以无缝地将这两种类型的内容融合在一起，因为控制和渲染元素都使用了相同的图形管道。其结果就是2D UI通过3D元素、效果和摄像机移动得到增强。

数字座舱中的2D和3D视觉交替

在需要时自由选择2D和3D内容的能力在创造性和外观定制方面提供了巨大的优势。在性能方面，开发者可以交替使用2D和3D元素，以优化使用通常来说有限的车载处理资源。

连接至外部数据源

为了与现实世界进行交互，用户界面需要读取来自外部源的数据并进行操作。汽车UI会引入速度表读数、燃油水平、胎压、大灯状态等数据。例如，通过HVAC显示器，可以改变汽车的温度和气流。更高级的用例有，读取并可视化来自道路和周围车辆的数据，如，高级驾驶辅助系统（Advanced Driving Assistance Systems）。

Outrun HVAC颗粒气流控制

有了Qt Design Studio，通过使用专门工具来编辑绑定和属性，设计师可以直接在可视化属性和外部数据源之间创建连接。

最后，Qt Design Studio状态编辑器允许设计师创建、修改和添加不同UI状态之间的过渡，如车头灯的打开和关闭。编辑器使UI设计人员可以轻松地仅使用可视化工具来实现状态以及状态之间的转换。

（文章来源公众号：Qt软件）

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

关于亿道电子

亿道电子技术有限公司（英文名称：Emdoor Electronics Technology Co.,Ltd）是国内资深的研发工具软件提供商，公司成立于 2002 年，面向中国广大的制造业客户提供研发、设计、管理过程中使用的各种软件开发工具，致力于帮助客户提高研发管理效率、缩短产品设计周期，提升产品可靠性。

20 年来，先后与 Altium、ARM、Ansys、Minitab、Green Hills、EPLAN、QT、QA Systems、MicroFocus、Visu-IT、HighTec、PLS、Ashling、MSC Software 、Autodesk、Source Insight、TeamEDA、IncrediBuild、Adobe等多家全球知名公司建立战略合作伙伴关系，并作为他们在中国区的主要分销合作伙伴服务了数千家中国本土客户，为客户提供从芯片级开发工具、EDA 设计工具、软件编译以及测试工具、结构设计工具、仿真工具、电气设计工具、以及嵌入式 GUI 工具等等。亿道电子凭借多年的经验积累，真正的帮助客户实现了让研发更简单、更可靠、更高效的目标。

欢迎关注“亿道电子”公众号

了解更多研发工具软件知识