GUI Design Studio是一款用戶界面及軟件原型設(shè)計(jì)工具，適用于Web，桌面，移動(dòng)和嵌入式軟件應(yīng)用程序設(shè)計(jì)。其快速、易于使用以及無(wú)需任何編碼的優(yōu)點(diǎn)，使其成為軟件設(shè)計(jì)師，用戶體驗(yàn)專家，業(yè)務(wù)分析師，開(kāi)發(fā)人員，項(xiàng)目經(jīng)理和咨詢專家的首選原型設(shè)計(jì)工具。

點(diǎn)擊下載GUI Design Studio

Caretta Software的iOS設(shè)計(jì)庫(kù)是作為原始iPhone庫(kù)的擴(kuò)展而創(chuàng)建的，旨在取代該庫(kù)以用于所有新項(xiàng)目。使用iPhone庫(kù)中組件的現(xiàn)有項(xiàng)目應(yīng)繼續(xù)鏈接至該項(xiàng)目，但也可能鏈接至該新庫(kù)。iOS庫(kù)包含用于為Apple iPad，iPhone和iPod Touch應(yīng)用程序制作原型的自定義元素小部件，組件和圖標(biāo)的集合。像這樣創(chuàng)建庫(kù)能夠提供許多有關(guān)如何改進(jìn)GUI Design Studio本身的想法，但也為庫(kù)設(shè)計(jì)帶來(lái)了一些有趣的學(xué)習(xí)經(jīng)驗(yàn)。

以下是學(xué)到的三個(gè)關(guān)鍵課程，它們可能對(duì)您創(chuàng)建自己的設(shè)計(jì)庫(kù)以重用自己項(xiàng)目中的小部件和組件很有用。

規(guī)劃圖書(shū)館結(jié)構(gòu)時(shí)要三思

當(dāng)生產(chǎn)原始的iPhone庫(kù)時(shí)，總是有人想生產(chǎn)一個(gè)單獨(dú)的iPad庫(kù)。但是，當(dāng)開(kāi)始使用iPad庫(kù)時(shí)，很快意識(shí)到，兩個(gè)庫(kù)中出現(xiàn)的相同小部件存在很多重疊。如果蘋果曾經(jīng)生產(chǎn)過(guò)另一種具有類似UI的iOS設(shè)備，那么重疊問(wèn)題將會(huì)惡化。不僅如此，還需要針對(duì)兩個(gè)平臺(tái)設(shè)計(jì)許多iOS應(yīng)用程序，因此單個(gè)設(shè)計(jì)項(xiàng)目可能包含兩個(gè)目標(biāo)的屏幕。雖然分別鏈接到iPhone和iPad庫(kù)仍然很容易，但僅需要一個(gè)庫(kù)就很有意義。

最后，為iPhone組件保留了幾乎相同的文件夾結(jié)構(gòu)和文件名，并為針對(duì)iPad的新添加內(nèi)容添加了“ iPad”標(biāo)簽。因此，如果設(shè)計(jì)文件或文件夾包含“ iPad”，那么它就是它的用途，否則，它適用于iPhone或通用產(chǎn)品。對(duì)于小部件來(lái)說(shuō)，還不錯(cuò)。該結(jié)構(gòu)并不重要，因?yàn)榕c組件不同，小部件被復(fù)制到設(shè)計(jì)中，而沒(méi)有引用它們的原始位置。

總的來(lái)說(shuō)，只要經(jīng)過(guò)一些前瞻性的思考和規(guī)劃，我們就可以擁有一個(gè)更加一致的結(jié)構(gòu)和命名約定，還可以避免過(guò)時(shí)的設(shè)計(jì)庫(kù)浮出水面的問(wèn)題。

將復(fù)雜的靜態(tài)組件轉(zhuǎn)換為圖像以提高性能

虛擬鍵盤對(duì)于應(yīng)用程序設(shè)計(jì)至關(guān)重要，因?yàn)樘摂M鍵盤在激活時(shí)會(huì)占用大量屏幕空間。您需要設(shè)計(jì)您的應(yīng)用程序，以便在您只有一半的屏幕可以播放時(shí)才能正常運(yùn)行。但是，渲染構(gòu)成iPad鍵盤的93層元素以及細(xì)微的漸變填充會(huì)影響性能。

那該怎么辦呢？但是這樣的設(shè)計(jì)僅用作靜態(tài)組件。在原型中沒(méi)有與他們的真正互動(dòng)。在使用虛擬鍵盤的情況下，您將使用真實(shí)的鍵盤輸入文本（直到在實(shí)際iPad上運(yùn)行的日期）。

Caretta Software了解到，將設(shè)計(jì)轉(zhuǎn)換為圖像可顯著提高性能，因?yàn)樗袉为?dú)的圖層均被單個(gè)圖像替換。而且只需幾秒鐘即可完成，因此如果您需要更改設(shè)計(jì)并重新創(chuàng)建圖像，這沒(méi)什么大不了的：

1. 打開(kāi)設(shè)計(jì)后，使用“編輯| 復(fù)制設(shè)計(jì)圖片”菜單命令（Ctrl + Shift + C熱鍵）。
2. 在項(xiàng)目文件樹(shù)中選擇目標(biāo)文件夾。我們建議使用與原始設(shè)計(jì)相同的文件夾。
3. 單擊“將圖像粘貼到文件”按鈕或使用“項(xiàng)目| 將圖像粘貼到文件…”菜單命令。
4. 輸入圖像文件名。我們建議您使用與設(shè)計(jì)相同的名稱，但當(dāng)然要帶有圖像擴(kuò)展名，而不要使用“ .gui”。

現(xiàn)在，您可以拖放設(shè)計(jì)的圖像版本而不是設(shè)計(jì)文件。從一開(kāi)始就使用實(shí)際的iPad鍵盤屏幕抓圖，而不是花所有精力從元素重新創(chuàng)建然后將其變成圖像，這是很誘人的。如果要?jiǎng)?chuàng)建供私人使用的庫(kù)，這是可以接受的，但是在分發(fā)庫(kù)時(shí)，版權(quán)問(wèn)題將成為主要考慮因素。

考慮如何更輕松地重用自定義元素小部件

自定義元素（也稱為小部件）是設(shè)計(jì)庫(kù)的真正核心。除了最簡(jiǎn)單的小部件之外，所有小部件通常都由多個(gè)元素層組成。但是，如果沒(méi)有以正確的方式創(chuàng)建它們，則在設(shè)計(jì)項(xiàng)目中使用它們可能會(huì)很尷尬。

良好的窗口小部件設(shè)計(jì)的關(guān)鍵是多花半英里，花一兩分鐘的時(shí)間檢查它在重用中的性能，特別是當(dāng)您要移動(dòng)和調(diào)整大小或編輯文本或其他內(nèi)容時(shí)。

自定義按鈕小部件和分解圖，顯示了其從4個(gè)元素層的構(gòu)造以及頂部，文本層調(diào)整錨點(diǎn)的大小。

在某些情況下，以下某些技巧可能不適用，例如在輸入表單中組合多個(gè)控件時(shí)，但是如果您要?jiǎng)?chuàng)建一個(gè)獨(dú)立的小部件，則在大多數(shù)情況下它們都是有意義的：

1. 在將小部件作為整體進(jìn)行移動(dòng)時(shí)，完成小部件設(shè)計(jì)后，您應(yīng)該采取的最后一個(gè)操作是選擇所有元素（Ctrl + A）并將它們分組（Ctrl + G）。這樣可以確保在選擇頂層元素時(shí)，所有小部件元素都將一起移動(dòng)。在編輯設(shè)計(jì)時(shí)，您可能需要在某個(gè)時(shí)候做相反的操作（選擇全部然后用Ctrl + Shift + G取消組合），以使重新安排事情變得更加容易。
2. 調(diào)整窗口小部件大小的能力由子節(jié)點(diǎn)上的“調(diào)整大小錨點(diǎn)”控制的位置父子關(guān)系確定。使用Shift + F8可以在圖形編輯器中打開(kāi)和關(guān)閉這些功能，或從屬性編輯器的“位置”選項(xiàng)卡中訪問(wèn)它們。使用圖形方法的一個(gè)優(yōu)點(diǎn)是您可以同時(shí)影響所有選定的元素。
3. 內(nèi)容編輯很簡(jiǎn)單。通常，請(qǐng)確保將所有可編輯內(nèi)容（如文本和圖標(biāo)）放在頂層，以便直接單擊即可進(jìn)行編輯。
4. 有時(shí)，您必須通過(guò)在各個(gè)圖層中組合可用的基本元素來(lái)發(fā)揮創(chuàng)意，以實(shí)現(xiàn)所需的效果。最后一個(gè)技巧是確保小部件具有包含整個(gè)內(nèi)容的單個(gè)背景元素。將小部件拖到設(shè)計(jì)上時(shí)，將選擇所有背景元素。如果只有一個(gè)，則該操作是干凈的，并且假設(shè)調(diào)整大小錨點(diǎn)已正確設(shè)置，則可以調(diào)整該元素的大小以調(diào)整整個(gè)窗口小部件的大小。

最后，值得注意的是，每當(dāng)您在設(shè)計(jì)中使用分層小部件并且想要選擇背景元素以調(diào)整大小時(shí)，請(qǐng)記住，Tab鍵和Shift + Tab組合是您在選擇的元素之間切換的朋友。

如果您覺(jué)得有用，請(qǐng)?jiān)谙旅姘l(fā)表評(píng)論，并與您的朋友和同事分享這篇文章。

| 查找更多界面類產(chǎn)品請(qǐng)?jiān)L問(wèn)用戶界面專題|

關(guān)注慧聚IT微信公眾號(hào) ???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。