Axure RP 8 入門手冊 – 第6章(三)

AxureRP8.0教程 小樓一夜聽春語 9366℃ 0評論

第8節????????? 檢視功能-元件屬性

u0Alice.:小樓大大好!小樓大大帥!我有些小困惑,想請你幫我指點下。可以嗎?

 

u2小樓:你誠實直白的我無法拒絕。

 

u0Alice.:嘻嘻!我的問題有點多哦。

 

u2小樓:來嘛!

 

u0Alice.:我想做個密碼輸入框,就是輸入文字時只能看到圓點那種。帥帥的小樓老師,這個怎么實現呢?

 

u2小樓:這個是文本框的類型,看來你對這個元件的屬性不太了解呀!我給你詳細講解吧!

 

在檢視功能的屬性面板中有每個元件的屬性設置,不同元件的屬性會有差別。這里我對各類元件的屬性,分別進行講解。

  • 文本框

文本框是一個獲取用戶輸入的元件。在這個元件的屬性中,可以更改文本框的類型,實現不同內容的輸入。(圖6-30)

%e5%9b%be6-30

(圖6-30)

u0Alice.:帥帥的老師,你再把屬性中其它的設置也給我講講吧?

 

u2小樓:沒問題!

 

Axure中的文本框給我們提供了很多常用的功能,比如一個登錄面板中帳號輸入框的提示,現在比較流行將提示寫在文本框中,在光標進入文本框(獲取焦點)或者用戶開始輸入時,提示自動消失。

案例04:文本框中的提示

具體步驟如下:(圖6-31)

%e5%9b%be6-31

(圖6-31)

  • 在畫布中放入文本框,然后在屬性面板的提示文字中輸入提示文字;
  • 為提示文字設置樣式,默認為淺灰色;
  • 根據不同的需求,設置提示文字消失的觸發條件為【輸入】或【獲取焦點】。

 

另外,文本框的屬性中,還提供了一些其它的設置,我們通過一張圖來了解一下。(圖6-32)

%e5%9b%be6-32

(圖6-32)

第一項:最大長度。是指文本框輸入文字的最大數量。例如:設置為“6”,則文本框最多只能輸入6個文字。

第二項:隱藏邊框。勾選此項后,能夠將文本框的邊框隱藏掉。

第三項:只讀。勾選此項后,文本框的內容將不可編輯。

第四項:禁用。勾選此項后,元件的交互會失效。對文本框元件的作用還包括內容不可編輯,光標無法進入,以及樣式變為灰色等。

第五項:提交按鈕。是指在文本框編輯文本時,按下<Enter>鍵,能夠觸發指定元件鼠標單擊時的交互。比如:登錄面板上的賬號輸入框完成輸入時,按下<Enter>鍵,觸發點擊登錄按鈕的交互。

第六項:元件提示。是指將鼠標指針停放在元件上面時,顯示的提示內容。例如:在一個“忘記密碼?”的文本標簽元件屬性中設置提示文字為“點擊找回密碼”。 (圖6-33)

%e5%9b%be6-33

(圖6-33)

當瀏覽原型時,將鼠標指針停放在文本標簽上,就會顯示設置的提示文字。(圖6-34)

%e5%9b%be6-34

(圖6-34)

u0Alice.:老師,你上面說的隱藏邊框會在什么時候用到呢?

 

u2小樓:我舉個例子給你!

 

案例05:圓角藍色邊框的文本輸入框

具體步驟如下:(圖6-35)

%e5%9b%be6-35

(圖6-35)

  • 畫布中放入一個矩形,設置邊框為藍色,圓角半徑為“5”px。
  • 在做好的矩形上方,放入一個文本框,長寬都小于矩形,并與矩形中心對齊。
  • 在文本框的屬性中,勾選【隱藏】邊框。

 

這樣就制作出了一個圓角藍色邊框的文本輸入框。(6-36)

%e5%9b%be6-36

(圖6-36)

u0Alice.:老師,是不是元件的屬性中有些是獨有的,有些是其他元件也有的?

 

u2小樓:是的。比如剛才我說的元件提示,大部分元件都有這個設置。

 

u0Alice.:那老師能不能帥帥的把其它的元件也給我講講?我感覺很有用處呢!

 

u2小樓:看你誠實的樣子,讓我怎么能忍心拒絕呢?

 

  • 形狀

形狀類元件因為互相之間可以轉換,所以屬性都是一樣的。同樣,我們先通過一張圖來說明一下。(圖6-37)

%e5%9b%be6-37

(圖6-37)

第一項:選擇形狀。可以將當前形狀更改為其它形狀。

第二項:交互樣式設置。可以為元件的不同狀態設置不同的視覺樣式。

鼠標懸停:能夠設置鼠標進入元件范圍時,元件呈現的樣式。

鼠標按下:能夠設置在元件上按下鼠標按鍵時(左鍵與右鍵均會觸發),元件呈現的樣式。

選中:能夠設置選中狀態時,元件呈現的樣式。

禁用:能夠設置禁用狀態時,元件呈現的樣式。

第三項:引用頁面。能夠將形狀鏈接到當前項目的某個頁面,形狀上顯示該頁面名稱。

第四項:禁用。勾選此項,設置元件默認狀態為禁用。

第五項:選中。勾選此項,設置元件默認狀態為選中。

第六項:設置選項組名稱。為多個元件設置相同的選項組名稱后,同組元件僅有一個能夠設置為選中狀態。當設置某個元件為選中狀態時,其它元件自動改變為未選中狀態。

第七項:元件提示。與文本框的元件提示相同,是指將鼠標指針停放在元件上面時,顯示的提示內容。

u0Alice.:老師,那個交互樣式有什么用啊?沒太理解什么時候能用到。

 

u2小樓:問題重說一遍。

 

u0Alice.:哦!哦!帥帥的老師,那個交互樣式有什么用啊?沒太理解什么時候能用到。

 

u2小樓:嗯,我給你做個小案例。

 

案例06:動態樣式的按鈕效果

一般來說一個按鈕我們會有三種樣式,分別是默認狀態的樣式、鼠標進入的樣式以及鼠標按鍵按下的樣式。(圖6-38)

%e5%9b%be6-38

(圖6-38)

這樣一個具有交互效果的按鈕,就可以通過交互樣式的設置來實現。

  • 在畫布中放入一個矩形,設置好默認樣式;然后,在{交互樣式設置}中點擊【鼠標懸停】。(圖6-39)

%e5%9b%be6-39

(圖6-39)

  • 在交互樣式設置窗口中,為按鈕設置鼠標進入元件時呈現的樣式。(圖6-40)
  • 點擊交互樣式設置窗口中的【鼠標按下】按鈕,繼續為按鈕設置鼠標按下時呈現的樣式。(圖6-40)

%e5%9b%be6-40

(圖6-40)

完成以上設置后,一個具有交互效果的按鈕就實現了。

 

  • 圖片

u0Alice.:帥帥的老師,我看圖片的屬性里和形狀差不多呀!

 

u2小樓:是的。

 

圖片元件除了導入圖片的設置,其它設置都和形狀一樣。

關于導入圖片,一般我們都是鼠標雙擊來實現導入,這樣比在屬性中的操作更快捷。如果需要將導入的圖片清除,恢復元件原有的樣式,則需要在屬性中點擊【清空】按鈕來實現。(圖6-41)

%e5%9b%be6-41

(圖6-41)

  • 框架

u0Alice.:帥帥的老師,那個內聯框架聽說能往原型里面嵌入視頻、地圖是嗎?

 

u2小樓:對呀!可以插入!你對這個有興趣?

 

u0Alice.:對插入沒興趣,對嵌入視頻地圖有興趣!

 

u2小樓:嘿嘿!那我我就給你講講框架的屬性,順便分享兩個案例給你吧!

 

內聯框架的屬性很簡單,我們由上至下依次介紹。(圖6-42)

%e5%9b%be6-42

(圖6-42)

第一項:選擇框架目標,為框架指定嵌入的頁面、URL或文件。這個設置可以通過鼠標雙擊元件實現。

第二項:框架滾動條。設置鑲嵌的頁面尺寸超過框架尺寸時,滾動條的呈現方式。

第三項:隱藏邊框。設置框架在頁面中是否顯示邊框。

第四項:預覽圖片。當框架取消邊框與滾動條會與頁面白色背景形成一體,無法分辨。可以通過添加預覽圖片,讓框架在頁面上顯示出來。此項設置只在畫布中有效,瀏覽器中查看原型時,不會顯示預覽圖片。

 

案例07:頁面中嵌入優酷視頻。

  • 獲取優酷的視頻連接。在優酷的視頻播放界面中,點擊分享給好友后方的列表圖標,在彈出的界面中點擊flash地址的【復制】按鈕,復制地址。如果瀏覽器不支持復制功能,可以劃選文本框中的地址,使用快捷鍵<Ctrl+C>進行復制。(圖6-43)注意:瀏覽器逐漸屏蔽或禁用flash,此處的視頻地址使用【通用代碼】中“src=”后面雙引號中的地址。

%e5%9b%be6-43

(圖6-43)

  • 在畫布中放入內聯框架,設置成合適的尺寸。在內聯框架的屬性中設置{框架滾動條}為【從不顯示】,勾選【隱藏邊框】,并設置{預覽圖片}為【視頻】。(圖6-44)

%e5%9b%be6-44

(圖6-44)

  • 雙擊框架元件或在屬性中點擊【選擇框架目標】,選中【鏈接到url或文件】,將操作步驟1中復制的flash地址粘貼到文本框中,點擊確定退出編輯。(圖6-45)

%e5%9b%be6-45

(圖6-45)

 

案例08:頁面中嵌入百度地圖。

  • 打開百度地圖提供的地圖生成器,地址http://api.map.baidu.com/lbsapi/createmap/
  • 在定位中心點的面板中輸入地圖中心點的地名,也可以拖動地圖改變中心點位置。(圖6-46)

%e5%9b%be6-46

(圖6-46)

  • 在設置地圖的面板中,設置地圖的尺寸以及其它符合需求的選項。(圖6-47)

%e5%9b%be6-47

(圖6-47)

  • 點擊頁面中的【獲取代碼】按鈕,將生成的代碼進行復制。代碼中需要填寫AK秘鑰才能夠正常使用地圖,可以點擊【申請秘鑰】按鈕進行申請,如何申請秘鑰可點擊【了解如何申請秘鑰】進行查看。(圖6-48)

%e5%9b%be6-48

(圖6-48)

特別說明:為了讓讀者能夠順利完成本案例,作者在這里分享一個可公開使用的密鑰:5c4b6cfcdf62237013fe7c34ddb9d80c。

  • 在本地硬盤中新建文本文檔,將復制的代碼粘貼到文檔中,并且將秘鑰填寫到指定的位置。(圖6-49)

%e5%9b%be6-49

(圖6-49)

  • 將文本文檔另存,{保存類型}選擇【所有文件】,文件名填寫:html。此名稱前綴可以自定義,但建議使用字母命名。(圖6-50)

%e5%9b%be6-50

(圖6-50)

  • 在畫布中放入內聯框架元件,設置框架尺寸與地圖尺寸相等。然后,在元件的屬性中設置{框架滾動條}為【從不顯示】,勾選【隱藏邊框】,并設置{預覽圖片}為【地圖】。(圖6-51)

%e5%9b%be6-51

(圖6-51)

  • 雙擊框架元件,在打開的窗口中選擇【鏈接到url或文件】,在文本框中輸入“html”。在文本框中直接輸入文件名“mymap.html”,這是一個相對路徑,軟件會自動找到與當前頁面文件(html文件)同文件夾下的“mymap.html”文件并打開。(圖6-52)

%e5%9b%be6-52

(圖6-52)

  • 生成HTML文件,將制作好的“html”文件放入HTML文件夾中,再次打開原型瀏覽(注意是打開生成的HTML文件,不是預覽!!!不是預覽!!!不是預覽!!!),頁面中即可正常顯示地圖文件。(圖6-53)

%e5%9b%be6-53

(圖6-53)

  • 單選按鈕

u0Alice.:帥帥的老師,那個單選按鈕是不是注冊時做性別選擇的那種元件?

 

u2小樓:是的呀!怎么了?

 

u0Alice.:我用了那個元件,選中之后就不能取消了。怎么能只選中一個呢?

 

u2小樓:這個也是在屬性里要設置的。

 

案例09:性別的唯一選擇

單選按鈕的屬性中有一個{設置單選按鈕組名稱}的設置。如果需要設置多個單選按鈕中,某一個被選中,其它自動取消選中,則只需要為這些單選按鈕添加相同的組名稱即可。(圖6-54)

%e5%9b%be6-54

(圖6-54)

  • 其它元件

u0Alice.:帥帥的老師,還有……

 

u2小樓:呃……別加帥帥的了!

 

u0Alice.:怎么了……

 

u2小樓:總聽有點惡心……,你也別問了,我把其它一些元件的屬性都給你用截圖做標注,你了解一下就行了。

 

1、表格的屬性。(圖6-55)

%e5%9b%be6-55

(圖6-55)

2、菜單的屬性。(圖6-56)

%e5%9b%be6-56

(圖6-56)

3、樹的屬性。(圖6-57)

%e5%9b%be6-57

(圖6-57)


~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程,以獨有的教學方法與技巧,幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】


轉載請注明:Axure原創教程網 » Axure RP 8 入門手冊 – 第6章(三)

喜歡 (43)or分享 (0)
頭像
發表我的評論
取消評論

表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(11)個小伙伴在吐槽
  1. 頭像
    大樓啊,那個優酷視頻鏈接要用通用代碼里src屬性值的鏈接才行
    hamlin2017-05-05 12:39 回復
    • 小樓一夜聽春語
      嗯,那是因為flash逐漸被瀏覽器給禁用了。
      小樓一夜聽春語2018-05-29 22:46 回復
  2. 頭像
    老師會做一些游戲的原型嗎
    摳腳韓信2017-05-23 17:42 回復
  3. 頭像
    表示,插入地圖總是失敗。秘鑰用公開的和自己申請的最后通過雙擊html文件的地圖中的文字是亂碼,然后預覽的話也從來沒出現過地圖(地圖的html文件絕對放到了生成的html文件夾中了)愁死了,弄了好幾天,不知道帥帥的小樓老師知不知道咋么回事
    安哥2017-10-20 16:19 回復
    • 小樓一夜聽春語
      生成!!!仔細看,是生成不是預覽!
      小樓一夜聽春語2017-10-20 21:08 回復
      • 頭像
        我也是看不懂HTML文件這一段的操作,小樓教主,嚶嚶嚶~
        歐子2018-05-29 18:59 回復
        • 頭像
          小樓老濕動作好迅速啊,昨天才說HTML保存之后插入地圖搞不定,今天就修改過答案了。我今天才反應過來怎么回事。其實就是在項目里面新建一個頁面就叫page1吧,放入內聯框架,把地圖mymap.html文件路徑配到框架上,然后選擇“發布->生成HTML文件”將頁面page1生成html文件。之后把存好的mymap.html放到這個page1對應的HTML文件同一個文件夾下。再用瀏覽器打開page1的HTML文件就能看見地圖了。哈哈哈~
          歐子2018-05-30 14:52 回復
          • 頭像
            研究了半天,終于在你這里看明白了!給你點贊! ??
            小慈悲2018-06-13 17:42
  4. 頭像
    樓老濕,文本框設置了提示文字,預覽時為森么光標先在提示文字最后一個字后面停頓一下再跳到最文本框最左面,搞的我這強迫癥又犯了!
    樓老濕你好2018-05-02 17:23 回復
  5. 頭像
    看了在線版買了書,結果跟書里不一樣啊!另外有電子版賣嗎,書看起來不方便
    樓大爺2018-05-04 23:14 回復
    • 小樓一夜聽春語
      在線版除了對話和圖書是一樣的,電子版出版社還沒發行。
      小樓一夜聽春語2018-05-07 21:43 回復
辽宁快乐12选5走势图表