首頁 > 新聞資訊 本文翻譯自：From design to reality: building functional UIs with Qt Design Studio
原文作者：Qt公司產(chǎn)品營銷經(jīng)理 Matteo Capelletti
校審：Sam Wang
Qt Design Studio提供了一套完整資源來幫助UI設(shè)計(jì)師將數(shù)字體驗(yàn)變成現(xiàn)實(shí)。任何2D和3D的圖形內(nèi)容都可以通過Qt Bridge技術(shù)無縫導(dǎo)入Qt Design Studio，并轉(zhuǎn)換為真正的UI應(yīng)用程序。這篇博文將著眼于我們最喜歡的一些功能。
Qt Bridge for Figma
作為Qt Design Studio持續(xù)開發(fā)的一部分，我們投入了大量精力，為UI/UX設(shè)計(jì)師使用的一些最常見的內(nèi)容創(chuàng)建工具搭建橋梁。
Qt Bridge技術(shù)使設(shè)計(jì)師能夠?qū)⑺麄兊墓ぷ鲝乃辛餍械脑O(shè)計(jì)和圖形工具無縫地導(dǎo)入Qt Design Studio，而不會(huì)丟失任何細(xì)節(jié)。
將導(dǎo)入Qt Design Studio的汽車UI Figma項(xiàng)目
由于Figma備受設(shè)計(jì)師喜愛，所以Qt Bridge for Figma是我們所推出的最為成熟的bridge插件。在Figma中創(chuàng)建的任何設(shè)計(jì)文件都可以通過Qt Bridge for Figma導(dǎo)入到Qt Design Studio當(dāng)中。除了導(dǎo)入圖形（包括漸變、字體、顏色等），Qt Bridge for Figma還保留了每個(gè)項(xiàng)目的名稱和ID，從而確保設(shè)計(jì)中的邏輯可以輕松地移植到最終的UI應(yīng)用程序中。
分屏視圖：UI設(shè)計(jì)和QML代碼并排
Qt Design Studio支持純可視化UI創(chuàng)建。同時(shí)，它能夠自動(dòng)將UI設(shè)計(jì)轉(zhuǎn)換為QML代碼，以便更多面向代碼的技術(shù)美工和工程師進(jìn)行編輯。
與UI相對(duì)應(yīng)的QML代碼在可選的分屏視圖中可見，與UI預(yù)覽并列。與每個(gè)UI組件相關(guān)聯(lián)的代碼可以通過簡單地單擊進(jìn)行可視化，而可視化更改將實(shí)時(shí)反映到代碼中，反之亦然。當(dāng)設(shè)計(jì)師和程序員一起完成項(xiàng)目時(shí)，分屏視圖提供了一個(gè)很大的優(yōu)勢(shì)，因?yàn)槊總€(gè)團(tuán)隊(duì)都可以實(shí)時(shí)地看到他們的更改對(duì)彼此領(lǐng)域的影響。對(duì)于那些希望只使用可視化工具的設(shè)計(jì)師來說，這個(gè)代碼編輯器也可輕易隱藏。
Outrun儀表演示中的分屏視圖
UI的某些方面更容易通過可視化編輯創(chuàng)建，而在其他情況下，編輯代碼可能更快、更精確。例如，通過編輯圖像X軸位置的QML代碼，將一個(gè)元素綁定到另一個(gè)元素的中心通常更容易做到?？偟膩碚f，QML代碼是一種簡單的描述性、聲明性語言，設(shè)計(jì)師在分屏視圖中工作并實(shí)時(shí)查看更改時(shí)也可以輕松掌握它。
在2D和3D視圖之間切換
大多數(shù)傳統(tǒng)UI設(shè)計(jì)工具都只提供2D或3D圖形的單一支持。通過Qt Framework和Qt Design Studio，技術(shù)美工可以無縫地將這兩種類型的內(nèi)容融合在一起，因?yàn)榭刂坪弯秩驹囟际褂昧讼嗤膱D形管道。其結(jié)果就是2D UI通過3D元素、效果和攝像機(jī)移動(dòng)得到增強(qiáng)。
數(shù)字座艙中的2D和3D視覺交替
在需要時(shí)自由選擇2D和3D內(nèi)容的能力在創(chuàng)造性和外觀定制方面提供了巨大的優(yōu)勢(shì)。在性能方面，開發(fā)者可以交替使用2D和3D元素，以優(yōu)化使用通常來說有限的車載處理資源。
連接至外部數(shù)據(jù)源
為了與現(xiàn)實(shí)世界進(jìn)行交互，用戶界面需要讀取來自外部源的數(shù)據(jù)并進(jìn)行操作。汽車UI會(huì)引入速度表讀數(shù)、燃油水平、胎壓、大燈狀態(tài)等數(shù)據(jù)。例如，通過HVAC顯示器，可以改變汽車的溫度和氣流。更高級(jí)的用例有，讀取并可視化來自道路和周圍車輛的數(shù)據(jù)，如，高級(jí)駕駛輔助系統(tǒng)（Advanced Driving Assistance Systems）。
Outrun HVAC顆粒氣流控制
有了Qt Design Studio，通過使用專門工具來編輯綁定和屬性，設(shè)計(jì)師可以直接在可視化屬性和外部數(shù)據(jù)源之間創(chuàng)建連接。
最后，Qt Design Studio狀態(tài)編輯器允許設(shè)計(jì)師創(chuàng)建、修改和添加不同UI狀態(tài)之間的過渡，如車頭燈的打開和關(guān)閉。編輯器使UI設(shè)計(jì)人員可以輕松地僅使用可視化工具來實(shí)現(xiàn)狀態(tài)以及狀態(tài)之間的轉(zhuǎn)換。
（文章來源公眾號(hào)：Qt軟件）
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
關(guān)于億道電子
億道電子技術(shù)有限公司（英文名稱：Emdoor Electronics Technology Co.,Ltd）是國內(nèi)資深的研發(fā)工具軟件提供商，公司成立于 2002 年，面向中國廣大的制造業(yè)客戶提供研發(fā)、設(shè)計(jì)、管理過程中使用的各種軟件開發(fā)工具，致力于幫助客戶提高研發(fā)管理效率、縮短產(chǎn)品設(shè)計(jì)周期，提升產(chǎn)品可靠性。
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等多家全球知名公司建立戰(zhàn)略合作伙伴關(guān)系，并作為他們?cè)谥袊鴧^(qū)的主要分銷合作伙伴服務(wù)了數(shù)千家中國本土客戶，為客戶提供從芯片級(jí)開發(fā)工具、EDA 設(shè)計(jì)工具、軟件編譯以及測(cè)試工具、結(jié)構(gòu)設(shè)計(jì)工具、仿真工具、電氣設(shè)計(jì)工具、以及嵌入式 GUI 工具等等。億道電子憑借多年的經(jīng)驗(yàn)積累，真正的幫助客戶實(shí)現(xiàn)了讓研發(fā)更簡單、更可靠、更高效的目標(biāo)。
歡迎關(guān)注“億道電子”公眾號(hào)
了解更多研發(fā)工具軟件知識(shí)
