案例3:添加一個(gè)自定義部件樣式

  • 2022-03-17 11:27:11
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.supportcoffeeroasters.com

下面,網(wǎng)站建設(shè)小編來(lái)創(chuàng)建一個(gè)自定義部件樣式,然后將其運(yùn)用于多個(gè)不同的部件上。修改該自定義樣式,所有使用該樣式的部件也會(huì)同步發(fā)生改變。

第一步:在【部件】面板中拖放一個(gè)矩形部件到設(shè)計(jì)區(qū)域,然后完成以下設(shè)置,見(jiàn)圖45。

1.設(shè)置其尺寸為140×40像素。

2.設(shè)置圓角半徑為5像素。

3.設(shè)置隱藏邊框。

4.設(shè)置填充顏色為#FF0033。

5.雙擊該矩形部件,輸入文字BUTTON。

6.設(shè)置字體為Arial,字體大小為13像素,設(shè)置字體顏色為#FFFFFF。

1.jpg

(圖45)

第二步:在【部件樣式】面板中單擊【創(chuàng)建】,見(jiàn)圖46,在彈出的【部件樣式編輯器】中輸入部件樣式名稱Red Button,見(jiàn)圖47,單擊【確定】按鈕關(guān)閉【部件樣式編輯器】。

1.jpg

(圖46)

1.jpg

(圖47)

第三步:在【部件】面板中,拖放兩個(gè)矩形部件到設(shè)計(jì)區(qū)域,并將其調(diào)整為任意尺寸大小,見(jiàn)圖48。然后選中這兩個(gè)矩形,在右側(cè)【部件樣式】面板的樣式下拉列表中選擇剛剛新增的Red Button,見(jiàn)圖49。此時(shí),這兩個(gè)新增的矩形樣式就變成了我們剛剛新建的Red Button樣式,見(jiàn)圖50。

1.jpg

(圖48)

1.jpg

(圖49)

1.jpg

(圖50)

第四步:選中任意一個(gè)矩形,調(diào)整填充顏色為#0066FF,然后在右側(cè)【部件樣式】面板中單擊【Update】,見(jiàn)圖51,更新部件樣式。此時(shí),另外兩個(gè)矩形部件的樣式也發(fā)生了改變,見(jiàn)圖52。

1.jpg

(圖51)

1.jpg

(圖52)

至此,使用自定義樣式的小案例就結(jié)束了。在工作項(xiàng)目中,善用自定義部件樣式可以大大提升工作效率。

設(shè)置選項(xiàng)組:與圖像部件的【指定選項(xiàng)組】功能一樣,此處不再贅述。

圓角半徑:使用形狀部件可以添加圓角半徑。要添加圓角半徑效果,選中形狀按鈕部件,拖動(dòng)部件左上角的黃色小三角調(diào)整圓角半徑,或者到【部件樣式】面板中設(shè)置圓角半徑,見(jiàn)圖53。在Axure RP8中,可以設(shè)置某(幾)個(gè)角的圓角半徑,這可以幫助我們?cè)谥谱魈厥獍粹o時(shí)變得更加輕松,見(jiàn)圖54。

1.jpg

(圖53)

1.jpg

(圖54)

轉(zhuǎn)換形狀/文本部件為圖像:若要將形狀部件轉(zhuǎn)換為圖像且保留形狀部件上已經(jīng)添加的注釋和交互,可以使用【轉(zhuǎn)換為圖像】功能。右鍵單擊想要轉(zhuǎn)換的形狀按鈕,選擇【轉(zhuǎn)換為圖像】,見(jiàn)圖55。

自適應(yīng)部件內(nèi)容的寬和高:形狀部件擁有自適應(yīng)寬高屬性,這是為了自適應(yīng)其文字內(nèi)容的寬高,取代手動(dòng)指定尺寸和文字換行。設(shè)置自適應(yīng)寬高的快捷操作是雙擊大小調(diào)整手柄。雙擊左右手柄會(huì)自動(dòng)調(diào)整寬度,雙擊上下手柄自動(dòng)調(diào)整高度適應(yīng)其內(nèi)容高度,雙擊左上、右上、左下、右下4個(gè)角會(huì)自動(dòng)調(diào)整寬度和高度適應(yīng)其文字內(nèi)容,見(jiàn)圖56。

1.jpg

(圖55)

1.jpg

(圖56)

陰影:通過(guò)添加外部陰影、內(nèi)部陰影和文字陰影可以增加原型的保真度。要添加陰影,可以在頂部的工具欄和【部件樣式】面板中進(jìn)行設(shè)置,見(jiàn)圖57。

1.jpg

(圖57)

A:外陰影

B:內(nèi)陰影

文字陰影:在【部件樣式】面板的【字體】欄目下,可對(duì)形狀部件設(shè)置字體陰影,見(jiàn)圖58。

1.jpg

(圖58)

不透明度:要設(shè)置形狀部件的不透明度,在【部件樣式】面板中設(shè)置【不透明】的值,如50%(數(shù)值越小,透明度越高),見(jiàn)圖59。

1.jpg

(圖59)

邊框:在Axure RP8中可以對(duì)形狀部件的某條邊框進(jìn)行設(shè)置,選中部件后,在【部件樣式】面板中的【邊框】項(xiàng)目中進(jìn)行設(shè)置,見(jiàn)圖60。

格式刷:當(dāng)復(fù)制形狀部件的時(shí)候,形狀部件的樣式也會(huì)被一起復(fù)制。使用【格式刷】工具可以將某個(gè)部件的樣式復(fù)制到其他指定部件上,見(jiàn)圖61。

1.jpg

(圖60)

1.jpg

(圖61)


當(dāng)前文章標(biāo)題:案例3:添加一個(gè)自定義部件樣式

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3380.html

上一篇:挑戰(zhàn)1:進(jìn)一步熟悉部件交互樣式

下一篇:案例4:使用動(dòng)態(tài)面板部件制作簡(jiǎn)單的輪播廣告

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號(hào))