掌握 MasterGo 組件屬性:UI設(shè)計(jì)更高效的秘訣

今天小編為大家介紹一個(gè)MasterGo全新上線(xiàn)的強(qiáng)大功能——組件屬性。

組件屬性是基于原有組件的已有能力,添加一個(gè)暴露到最外層的自定義功能。它有三點(diǎn)好處:首先,它可以減少組件的數(shù)量,從而便于快速查找和管理;其次,你可以更直觀地判斷,當(dāng)前組件有哪些地方能被你自定義,從而提升實(shí)例修改的效率;最后,組件屬性功能直接沿用了開(kāi)發(fā)邏輯,所以對(duì)接開(kāi)發(fā)時(shí)可以降低溝通成本。

組件屬性按功能可以劃分為3種:顯示狀態(tài)屬性、文本內(nèi)容屬性和實(shí)例切換屬性。

掌握 MasterGo 組件屬性:UI設(shè)計(jì)更高效的秘訣

首先,“顯示狀態(tài)屬性”可以自定義某個(gè)圖層的顯示或隱藏。我們用一個(gè)【關(guān)注】按鈕組件舉例,選中圖標(biāo)后,點(diǎn)擊右側(cè)圖層版塊中的「關(guān)聯(lián)組件屬性」按鈕,就會(huì)出現(xiàn)一個(gè)彈窗。我們?cè)趯傩悦Q(chēng)中寫(xiě)上【顯示圖標(biāo)】,就完成了對(duì)這個(gè)屬性的描述,默認(rèn)值就是定義默認(rèn)的屬性選擇。點(diǎn)擊創(chuàng)建屬性后,我們會(huì)發(fā)現(xiàn),右側(cè)多出來(lái)組件屬性的版塊。然后拷貝出實(shí)例,右側(cè)的實(shí)例版塊就會(huì)多出一個(gè)默認(rèn)關(guān)閉的開(kāi)關(guān),這時(shí)我們?cè)谧钔鈱泳涂梢噪S時(shí)切換圖標(biāo)的顯示和隱藏。

掌握 MasterGo 組件屬性:UI設(shè)計(jì)更高效的秘訣

“文本內(nèi)容屬性”可以用來(lái)自定義文本圖層的內(nèi)容,具體添加步驟和“顯示狀態(tài)屬性”一樣。我們先選中按鈕組件中的文本圖層,然后在右側(cè)文本內(nèi)容版塊中,點(diǎn)擊「關(guān)聯(lián)組件屬性」按鈕。創(chuàng)建屬性后,我們拷貝出實(shí)例,就可以在右側(cè)版塊的輸入框中任意修改文本了。

掌握 MasterGo 組件屬性:UI設(shè)計(jì)更高效的秘訣

“實(shí)例切換屬性”的作用就是快速替換組件的嵌套實(shí)例。比如這個(gè)【按鈕】組件,已經(jīng)嵌套了一個(gè)圖標(biāo)實(shí)例。我們想給組件加一個(gè)能快捷切換圖標(biāo)的功能。那就可以先選中內(nèi)部的圖標(biāo)實(shí)例,然后在右側(cè)實(shí)例面板中,點(diǎn)擊「關(guān)聯(lián)組件屬性」按鈕。創(chuàng)建屬性后,右側(cè)就會(huì)顯示實(shí)例切換屬性版塊。我們拷貝出實(shí)例,就可以在最外層把圖標(biāo)快速替換成我們想要的圖標(biāo)?,F(xiàn)在,我們可以把組件屬性添加到任何組件集中了。

掌握 MasterGo 組件屬性:UI設(shè)計(jì)更高效的秘訣

但有時(shí)候組件屬性更方便,有時(shí)候組件狀態(tài)更好用。那我們?cè)撊绾戊`活使用組件屬性和組件狀態(tài)呢?

首先,組件屬性適用于這兩類(lèi)情況:當(dāng)組件或組件集中有圖層需要切換可見(jiàn)性,比如 "有圖標(biāo)" 和 "無(wú)圖標(biāo)";以及組件中需要自定義文本內(nèi)容或者嵌套實(shí)例時(shí)。組件狀態(tài)則適用于這兩類(lèi)情況:組件的主題需要變化,比如尺寸、顏色;和組件具備不同的交互狀態(tài)。

以上就是小編分享的關(guān)于MasterGo組件屬性的全部?jī)?nèi)容,感興趣的設(shè)計(jì)師們都可以在MasterGo中試一下。未來(lái),MasterGo 團(tuán)隊(duì)還會(huì)不斷優(yōu)化產(chǎn)品功能,給設(shè)計(jì)師提供更流暢、優(yōu)質(zhì)的設(shè)計(jì)體驗(yàn)。

(免責(zé)聲明:本網(wǎng)站內(nèi)容主要來(lái)自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿,凡在本網(wǎng)站出現(xiàn)的信息,均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性,但不保證有關(guān)資料的準(zhǔn)確性及可靠性,讀者在使用前請(qǐng)進(jìn)一步核實(shí),并對(duì)任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對(duì)有關(guān)資料所引致的錯(cuò)誤、不確或遺漏,概不負(fù)任何法律責(zé)任。
任何單位或個(gè)人認(rèn)為本網(wǎng)站中的網(wǎng)頁(yè)或鏈接內(nèi)容可能涉嫌侵犯其知識(shí)產(chǎn)權(quán)或存在不實(shí)內(nèi)容時(shí),應(yīng)及時(shí)向本網(wǎng)站提出書(shū)面權(quán)利通知或不實(shí)情況說(shuō)明,并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后,將會(huì)依法盡快聯(lián)系相關(guān)文章源頭核實(shí),溝通刪除相關(guān)內(nèi)容或斷開(kāi)相關(guān)鏈接。 )