Qt Design Studio是一款專為應(yīng)用程序設(shè)計(jì)UI和開發(fā)工具，是用它有效的協(xié)調(diào)設(shè)計(jì)師和開發(fā)者，使用Qt，QML以及Qt Design tools增強(qiáng)工作流，設(shè)計(jì)師可以查看圖形視圖，而開發(fā)者能夠查看QML代碼。讓設(shè)計(jì)師和開發(fā)者可以迅速設(shè)計(jì)原型，并且開發(fā)復(fù)雜的可伸縮的UI。不僅僅縮短了UI設(shè)計(jì)的時(shí)間，還可以將當(dāng)初設(shè)計(jì)的想法完美的展現(xiàn)出來，是UI設(shè)計(jì)從業(yè)人員必備的工具之一。

軟件特色

•Qt PS Bridge —— 在PS中創(chuàng)建您的UI設(shè)計(jì)和UI組件，然后把它們導(dǎo)入到Qt Design Studio中。這包含一個(gè)先進(jìn)的PS插件，它能把您的設(shè)計(jì)翻譯成QML語言，并導(dǎo)入到Qt Design Studio中。

•基于時(shí)間軸的動(dòng)畫 —— 創(chuàng)建高級(jí)動(dòng)畫從來都不是容易的事情。基于時(shí)間軸/關(guān)鍵幀的編輯器，它能讓設(shè)計(jì)師為各種類型元素創(chuàng)造每個(gè)像素都完美的動(dòng)畫，而不需要寫任何一行代碼。

•QMLLive Preview —— 在桌面、Android設(shè)備、Boot2Qt設(shè)備上直接運(yùn)行和預(yù)覽您的應(yīng)用。實(shí)時(shí)地在目標(biāo)設(shè)備上檢查您修改的效果。

•QML Visual Effects  —— 在您的設(shè)計(jì)上直接應(yīng)用開箱即用的可視效果。例如：模糊、上色、發(fā)光或更多。您甚至可以在時(shí)間軸編輯器中添加可視效果動(dòng)畫。

•QML Shape Items —— 許多個(gè)開箱即用的形狀，例如：扇形，弧線、三角形等，隨時(shí)可以幫助設(shè)計(jì)原型和創(chuàng)建定制的QML可視效果。

•管理和創(chuàng)建定制的、可復(fù)用的元件 —— 只需幾次鼠標(biāo)點(diǎn)擊一可以把PS的圖層變成可以被不同項(xiàng)目復(fù)用的元件。

軟件功能

輸入方式

使用物理鍵盤、鼠標(biāo)、定制硬件按鍵和帶有虛擬鍵盤和多點(diǎn)觸控手勢(shì)的觸摸屏。

可視化編輯器

通過Qt Design Studio的直觀設(shè)置完成對(duì)2D/3D設(shè)計(jì)的可視化修改，能讓其他流行設(shè)計(jì)軟件的用戶立即上手。

可定制的視覺效果

利用內(nèi)置和可定制的視覺效果提升您的圖形設(shè)計(jì)！

帶可編輯緩和曲線的時(shí)間軸動(dòng)畫

使用基于關(guān)鍵幀的時(shí)間軸動(dòng)畫讓設(shè)計(jì)栩栩如生，并自由定義動(dòng)畫緩和曲線。

用JavaScript制作原型

在應(yīng)用程序設(shè)計(jì)過程中用JavaScript模擬應(yīng)用程序邏輯

動(dòng)態(tài)可擴(kuò)展布局

自動(dòng)改變用戶界面元素的大小或位置，以適配任何尺寸、分辨率的屏幕。

狀態(tài)機(jī)

創(chuàng)建、修改和添加用戶交互過程中各種UI狀態(tài)間的轉(zhuǎn)換。

流程編輯器

設(shè)計(jì)用戶如何在應(yīng)用程序視圖之間的導(dǎo)航流程和轉(zhuǎn)換。

可編輯緩和曲線

始終如一地編輯和定義動(dòng)畫的速度和加速度。

3D后處理FX

具有不同濾鏡和效果的3D后處理效果，可實(shí)現(xiàn)逼真的視覺效果。

場(chǎng)景編輯器

高級(jí)場(chǎng)景編輯器：可微調(diào)設(shè)計(jì)至像素級(jí)完美

概念和術(shù)語

•零件

可實(shí)例化的QML定義，通常包含在.qml文件中。例如，可以在Button.qml中定義一個(gè)Button組件。QML運(yùn)行時(shí)可以實(shí)例化此Button組件以創(chuàng)建Button對(duì)象。或者，可以在Component QML類型內(nèi)定義一個(gè)組件。

•部署配置

將必要文件的打包和復(fù)制處理到要在其中預(yù)覽UI的位置。可以將文件復(fù)制到開發(fā)PC或設(shè)備的文件系統(tǒng)中的某個(gè)位置。

•設(shè)備

嵌入式設(shè)備或Anroid設(shè)備。

•套件

Qt Design Studio組將設(shè)置作為工具包運(yùn)行，以簡(jiǎn)化跨平臺(tái)開發(fā)。每個(gè)套件均包含一組定義一個(gè)環(huán)境的值，例如用于預(yù)覽UI的設(shè)備。

•模式

使Qt Design Studio UI適應(yīng)當(dāng)前的不同UI設(shè)計(jì)任務(wù)。每種模式都有其自己的視圖，該視圖僅顯示執(zhí)行特定任務(wù)所需的信息，并且僅提供與之相關(guān)的最相關(guān)的特征和功能。因此，大多數(shù)Qt Design Studio窗口區(qū)域始終專用于實(shí)際任務(wù)。

•項(xiàng)目

將一組文件，映像和其他資產(chǎn)組合在一起，您可以根據(jù)部署配置和運(yùn)行配置的指定在不同的桌面和設(shè)備平臺(tái)上部署和運(yùn)行這些文件，映像和其他資產(chǎn)。

•運(yùn)行配置

在部署配置復(fù)制UI的位置啟動(dòng)UI 。默認(rèn)情況下，運(yùn)行項(xiàng)目時(shí)，Qt Design Studio會(huì)將其部署到所選工具包中指定的設(shè)備上，然后在此處運(yùn)行。但是，如果自上次部署項(xiàng)目以來未對(duì)項(xiàng)目進(jìn)行任何更改，則Qt Design Studio會(huì)再次運(yùn)行它。

設(shè)計(jì)應(yīng)用程序流程

您可以以示意圖的形式設(shè)計(jì)應(yīng)用程序流程，該示意圖通過符號(hào)顯示應(yīng)用程序UI的所有重要組件及其相互連接。這將產(chǎn)生一個(gè)交互式原型，可以單擊該原型來模擬應(yīng)用程序的用戶體驗(yàn)。QML代碼是在后臺(tái)創(chuàng)建的，可用作應(yīng)用程序生產(chǎn)版本的基礎(chǔ)。

在Qt Design Studio中，流程圖表示示意圖。它由代表UI中的屏幕的流項(xiàng)目和連接它們的過渡線組成，從而說明了通過UI的可能的用戶途徑。您可以將操作區(qū)域用作過渡線的起點(diǎn)。您可以將效果附加到過渡線（例如淡入淡出或推動(dòng)），以確定當(dāng)一個(gè)屏幕切換到另一個(gè)屏幕時(shí)用戶看到的內(nèi)容。

您可以使用流程決策在UI中的屏幕之間設(shè)置替代路徑。例如，如果用戶輸入確定接下來應(yīng)打開哪個(gè)屏幕，則可以通過彈出對(duì)話框來測(cè)試原型中的不同方案，您可以在其中選擇下一個(gè)顯示的屏幕。

特別是在移動(dòng)和嵌入式平臺(tái)上，應(yīng)用程序可能需要對(duì)平臺(tái)的外部事件做出反應(yīng)，例如通知或需要用戶注意的其他應(yīng)用程序。您可以使用流通配符通過將屏幕列入白名單或黑名單來確定屏幕的優(yōu)先級(jí)。

1、創(chuàng)建流程

您可以將流程視圖添加到現(xiàn)有項(xiàng)目或?yàn)槠鋭?chuàng)建新項(xiàng)目，如創(chuàng)建項(xiàng)目所述。要?jiǎng)?chuàng)建流視圖，請(qǐng)選擇“文件” >“新建文件”或“項(xiàng)目” >“文件和類” >“ Qt快速文件” >“流視圖”，然后按照向?qū)У恼f明進(jìn)行操作。

如果要將事件模擬器添加到流視圖中，則僅需要選中“使用事件模擬器”復(fù)選框。

流視圖屬性使您可以調(diào)整流中所有項(xiàng)目的外觀：操作區(qū)域，過渡線，決策和通配符。您可以通過編輯流視圖屬性來更改所有項(xiàng)目的全局設(shè)置，也可以選擇單個(gè)操作區(qū)域或過渡線并更改該項(xiàng)目的外觀，包括顏色，線條粗細(xì)，點(diǎn)線或?qū)嵕€，甚至是連接曲線。這使您可以在流程圖本身的設(shè)計(jì)中添加額外的語義。

2、添加流項(xiàng)目

如果從設(shè)計(jì)工具中將屏幕設(shè)計(jì)作為單個(gè)組件（.ui.qml文件）導(dǎo)入，則可以將它們用作流項(xiàng)目的內(nèi)容。如果要在Qt Design Studio中從頭開始構(gòu)建UI，則必須像添加任何QML組件一樣，首先將組件添加到流項(xiàng)目中以創(chuàng)建屏幕。有關(guān)更多信息，請(qǐng)參見創(chuàng)建組件。“我的QML組件”下列出了將組件附加到的流項(xiàng)目。

注意：您必須使用向?qū)韯?chuàng)建流項(xiàng)目。創(chuàng)建流視圖之后，“流視圖”部分將在“庫”中可見。它包含一個(gè)流項(xiàng)目類型，可用于將狀態(tài)應(yīng)用于流項(xiàng)目，并且應(yīng)僅用于此目的。

3、添加行動(dòng)領(lǐng)域和過渡

操作區(qū)域可以用作可單擊區(qū)域，以在屏幕之間啟動(dòng)轉(zhuǎn)換，也可以創(chuàng)建與流項(xiàng)目中任何組件的任何信號(hào)的連接。例如，您可以將動(dòng)作連接到onPressed屏幕上按鈕的信號(hào)。

通常，一個(gè)屏幕可以通過雙向連接連接到流中的其他幾個(gè)屏幕。為避免混亂，可以將操作區(qū)域設(shè)置為back，而不是在每個(gè)可能連接的屏幕之間添加明確的過渡線。當(dāng)回去選項(xiàng)被激活，過渡將始終以用戶返回到上一畫面。

4、將效果應(yīng)用于轉(zhuǎn)場(chǎng)

您可以應(yīng)用效果，例如淡入淡出，移動(dòng)或推動(dòng)過渡。淡入淡出效果使第一個(gè)屏幕看起來淡出，而下一個(gè)屏幕淡入。移動(dòng)效果使第二個(gè)屏幕看起來像在第一個(gè)屏幕上移入，而推入效果看起來像是使一個(gè)屏幕向前一個(gè)屏幕推出。您還可以設(shè)計(jì)和使用自定義效果。

過渡方向確定新屏幕顯示的方向：左，右，上，下。您可以設(shè)置效果的持續(xù)時(shí)間，并在效果上附加緩和曲線。

5、模擬事件

雖然過渡線對(duì)于原型制作很有用，但在生產(chǎn)中，您需要使用來自UI屏幕的真實(shí)信號(hào)來控制應(yīng)用程序的流程。為此，您可以以更高級(jí)的方式使用操作區(qū)域，方法是讓它們偵聽來自屏幕或其中的控件的信號(hào)，并將它們連接到流程視圖。預(yù)覽UI時(shí)，可以使用鍵盤快捷鍵來模擬這些事件。

使用向?qū)?chuàng)建“流視圖”項(xiàng)時(shí)，請(qǐng)選中“使用事件模擬器”復(fù)選框以將事件模擬器添加到流視圖。

您可以創(chuàng)建事件列表，在其中為事件分配鍵盤快捷鍵，然后使用上下文菜單命令將事件附加到操作區(qū)域或過渡線。

為什么選擇Qt

1、設(shè)計(jì)、開發(fā)出色的用戶體驗(yàn)

您能用Qt創(chuàng)造出卓越的用戶體驗(yàn)將用戶轉(zhuǎn)變?yōu)樗乐曳郏⒊掷m(xù)塑造、提升您的品牌形象。

2、Qt能為您節(jié)省開支

有了Qt, 一個(gè)代碼棧和一個(gè)開發(fā)團(tuán)隊(duì)就能同時(shí)支持所有目標(biāo)平臺(tái)。

您可能不相信我們的話，但總該信任Forrester的《總體經(jīng)濟(jì)影響力研究》報(bào)告。

3、讓您的產(chǎn)品更快上市

Qt為您的項(xiàng)目簡(jiǎn)化每一步工作流程。有了Qt，設(shè)計(jì)師和開發(fā)者能無縫協(xié)作，充分利用Qt現(xiàn)成的各類庫在競(jìng)爭(zhēng)脫穎而出，率先交付產(chǎn)品。

4、性能強(qiáng)大

性能也是一種功能。 Qt讓可以您輕松交付。更靈敏的人機(jī)交互、更快的啟動(dòng)時(shí)間、更流暢的動(dòng)畫和更好的性能，讓您的UX與眾不同。

更新內(nèi)容

*提高了浮子特性的精度（QDS-2190）

*添加了過渡編輯器

*添加了ListModel編輯器（QDS-2294）

*添加了刪除組操作（QDS-2228）

*添加了狀態(tài)注釋（QDS-2312）