案例10:使用鋼筆工具和改變形狀制作一個(gè)放大鏡圖標(biāo)

  • 2022-03-30 18:04:15
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://51zuanshi.com.cn

昆明網(wǎng)站建設(shè)制作原型的過程中,通常情況下遇到使用圖標(biāo)時(shí)都會(huì)通過網(wǎng)絡(luò)搜索或使用其他繪圖工具(PS/AI/SKETCH等)來制作所需的圖標(biāo)。當(dāng)然,使用Fontawesome等圖標(biāo)字體也是非常好的選擇。在Axure RP8中適當(dāng)使用鋼筆工具和改變形狀也可以大幅提高工作效率。下面就通過幾個(gè)簡單步驟繪制一枚放大鏡圖標(biāo)。

第一步:在部件【屬性】面板中拖放一個(gè)矩形部件到設(shè)計(jì)區(qū)域,并調(diào)整矩形尺寸為200×200像素,然后調(diào)整其圓角半徑為100像素,將其設(shè)置為圓形,見圖206。

11.jpg

(圖206)

第二步:選中該圓形,按下快捷鍵 Ctrl/Command+D,快速復(fù)制一份,然后設(shè)置第二個(gè)圓形尺寸為160×160像素,同時(shí)選中兩個(gè)圓形,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【對齊】,并選擇【居中對齊】和【上下居中】,見圖207。

第三步:選中兩個(gè)圓形部件,在右側(cè)部件【屬性】面板中單擊【去除頂層】,見圖208。

11.jpg

(圖207)

11.jpg

(圖208)

第四步:在工具欄中選擇鋼筆工具,按快捷鍵Ctrl/Command+4,繪制放大鏡手柄,見圖209。

11.jpg

(圖209)

第五步:選中放大鏡的兩部分形狀,在部件【屬性】面板中單擊【合并圖層】,至此放大鏡圖標(biāo)繪制完畢。接下來可以通過調(diào)整尺寸、顏色、邊框等樣式來檢查該圖標(biāo)在你的原型中是否適用,見圖210

11.jpg

(圖210)

7.編輯部件樣式

編輯器工具欄:使用設(shè)計(jì)區(qū)域上面的工具欄按鈕可以編輯部件樣式,如字體、字號、字體顏色、填充顏色、線條顏色、坐標(biāo)和大小等。還可以選擇多個(gè)部件并使用布局工具,如次序、對齊、分布等,見圖211。

11.jpg

(圖211)

雙擊編輯:雙擊部件來編輯該部件是最常用的屬性編輯。如雙擊一個(gè)圖像部件打開【導(dǎo)入圖像】對話框,雙擊下拉列表打開【編輯列表項(xiàng)】對話框。

右鍵編輯:右鍵單擊部件顯示額外特定的屬性,這些屬性根據(jù)部件的不同而不同。

部件屬性和部件樣式面板:在【部件樣式】面板中可以找到部件坐標(biāo)、大小、字體、對齊、填充、陰影、邊框和內(nèi)邊距等。在部件【屬性】面板中可以找到部件的特殊屬性。

8.部件屬性面板詳解

交互樣式:交互樣式是在特定條件下的視覺屬性。

鼠標(biāo)懸停:當(dāng)鼠標(biāo)指針懸停于部件上。

左鍵按下:當(dāng)鼠標(biāo)左鍵按下保持沒有釋放時(shí)。

選中:當(dāng)部件是選中狀態(tài)。

禁用:當(dāng)部件是禁用狀態(tài)。

調(diào)整寬度/高度自適應(yīng)部件內(nèi)容:在Axure RP8中,雙擊形狀部件四周的尺寸手柄,可讓部件快速自適應(yīng)其內(nèi)容寬/高,見圖212。

11.jpg

(圖212)

禁用:設(shè)置部件為禁用狀態(tài)。

選中:設(shè)置部件為選中狀態(tài),生成原型后該部件為選中時(shí)的交互效果。

設(shè)置選項(xiàng)組:將多個(gè)部件添加到選項(xiàng)組。

提示信息:當(dāng)鼠標(biāo)懸停在部件上時(shí),顯示文字提示信息。

9.部件特定屬性

圖像部件:【保護(hù)邊角】功能類似于九宮格切圖和.9png制作,它可以在調(diào)整圖像大小時(shí)保護(hù)邊角不變。

文本輸入框

類型:主要用于調(diào)用移動(dòng)設(shè)備中不同的鍵盤模式(比如用戶使用手機(jī)輸入手機(jī)號碼時(shí)、輸入密碼時(shí),鍵盤的模式是不同的,這樣可以提升用戶體驗(yàn))。昆明網(wǎng)站制作認(rèn)為文本輸入類型可設(shè)置為文本、密碼、電子郵件、電話號碼、號碼、網(wǎng)址和搜索等。

最大長度:設(shè)置最多可輸入的文字?jǐn)?shù)。

提示文字:文本占位符,可設(shè)置獲取焦點(diǎn)時(shí)消失或輸入內(nèi)容時(shí)消失。

提示樣式:編輯提示文字的樣式。

只讀:生成原型后是不可編輯的文本。

隱藏邊框:隱藏輸入框的邊框。

禁用:將部件設(shè)置為禁用狀態(tài)。

提交按鈕:分配一個(gè)按鈕或形狀按鈕,當(dāng)按下Enter鍵時(shí)執(zhí)行單擊按鈕事件。

內(nèi)聯(lián)框架:將Axure項(xiàng)目內(nèi)部的頁面、外部url、視頻、音頻等加載到內(nèi)聯(lián)框架中顯示。

滾動(dòng)條:根據(jù)需要設(shè)置內(nèi)聯(lián)框架滾動(dòng)條的顯示方式。

隱藏邊框:切換顯示內(nèi)部框架周圍的邊框。

預(yù)覽圖像:顯示Axure 內(nèi)部的預(yù)置圖片(便于工作人員明確該部分內(nèi)容是什么)。

復(fù)選框

選中:勾選此項(xiàng)后,復(fù)選框默認(rèn)為選中狀態(tài)。

對齊按鈕:設(shè)置按鈕的位置,位于文字內(nèi)容的左側(cè)或右側(cè)。

單選按鈕

指定單選按鈕組:創(chuàng)建或分配單選按鈕組,給多個(gè)單選按鈕指定單選按鈕組之后,這些單選按鈕中最多只有一個(gè)可以被選中。

文本區(qū)域

隱藏邊框:隱藏文本區(qū)域周圍的邊框。

下拉列表框

列表項(xiàng):添加/刪除列表的選項(xiàng)。

菜單

菜單項(xiàng):新增/刪除菜單項(xiàng)。

菜單內(nèi)邊距:設(shè)置菜單的內(nèi)邊距。

交互樣式:設(shè)置菜單項(xiàng)的交互樣式。

樹部件:

展開/折疊圖標(biāo):改變展開/折疊樹節(jié)點(diǎn)的小圖標(biāo)。

● 加減號:改變圖標(biāo)為+/-。

● 三角形:改變圖標(biāo)為三角形。

導(dǎo)入圖標(biāo):可導(dǎo)入自定義圖標(biāo)。

顯示樹節(jié)點(diǎn)圖標(biāo):切換顯示額外的樹節(jié)點(diǎn)的圖標(biāo),可以通過右鍵單擊一個(gè)樹節(jié)點(diǎn)并選擇【編輯圖標(biāo)】添加。

10.部件樣式面板詳解

位置·尺寸

選中的部件:編輯選中部件的位置、尺寸以及部件旋轉(zhuǎn)角度和部件中文字的旋轉(zhuǎn)角度,見圖213。

所有選中的部件:當(dāng)多個(gè)部件被選中時(shí)出現(xiàn),編輯選中區(qū)域的位置、尺寸和旋轉(zhuǎn)角度,見圖214-A。

11.jpg

(圖213)

11.jpg

(圖214)

每個(gè)選中的部件:當(dāng)多個(gè)部件被選中時(shí)出現(xiàn),可以同時(shí)編輯每個(gè)部件的位置、尺寸和旋轉(zhuǎn)角度,見圖214-B。

隱藏:勾選后,該部件默認(rèn)為隱藏狀態(tài)(可通過添加交互設(shè)置為顯示)。

部件樣式

部件樣式下拉列表:允許你選擇在部件樣式編輯器中創(chuàng)建的自定義樣式,見圖215-A。

11.jpg

(圖215)

管理部件樣式:允許你編輯Axure內(nèi)建部件的默認(rèn)樣式或創(chuàng)建自定義可應(yīng)用于多個(gè)部件的樣式,見圖215-B。

填充:設(shè)置部件的填充顏色,Axure RP8中所有的形狀部件都可以填充單色或漸變色,見圖216。

陰影:給形狀部件設(shè)置外部陰影和內(nèi)部陰影,見圖217。

11.jpg

(圖216)

11.jpg

(圖217)

邊框:設(shè)置形狀部件的邊框線條寬度、線條顏色、線條樣式、線條的箭頭樣式。在Axure RP8新增的特性中,可以設(shè)置形狀部件不同的邊框,見圖218。

圓角半徑:設(shè)置形狀部件的圓角半徑,在Axure RP8中可以對形狀部件的任意圓角單獨(dú)設(shè)置圓角半徑,見圖219。

不透明度:設(shè)置形狀部件的不透明度。

字體:選擇字體、字體大小、字體顏色、粗體、斜體、下劃線、添加項(xiàng)目符號、字體陰影、行間距、對齊方式和內(nèi)邊距,見圖220。

11.jpg

(圖218)

11.jpg

(圖219)

11.jpg

(圖220)


當(dāng)前文章標(biāo)題:案例10:使用鋼筆工具和改變形狀制作一個(gè)放大鏡圖標(biāo)

當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/3398.html

上一篇:部件操作——改變形狀

下一篇:頁面樣式:(一)頁面樣式

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