Axure教程 axure新手入門基礎(chǔ)(2)

Nairo
20 評論 722427 瀏覽 387 收藏 6 分鐘

(二)Axure rp的線框圖元件

?

l? 圖片

圖片元件拖入編輯區(qū)后,可以通過雙擊選擇本地磁盤中的圖片,將圖片載入到編輯區(qū),axure會自動提示將大圖片進行優(yōu)化,以避免原型文件過大;選擇圖片時可以選擇圖片原始大小,或保持圖片元件的大小。

l? 文本

在網(wǎng)頁中文本的名稱是lable,用于頁面中添加說明文字、文字連接,或一些動態(tài)的提示。

l? 矩形

矩形的應(yīng)用比較廣泛,比如作為頁面的背景、按鈕、以及一些元件的遮蓋等;矩形的形狀可以通過鼠標右鍵點擊–編輯選項—改變形狀,來變成我們需要的形狀,比如做選項卡時候我們需要頂部圓角的矩形,就可以通過改變矩形的形狀來實現(xiàn)。

l? 占位符

制作原型時,可以用它來代替對一些沒有交互或者交互比較簡單容易說明的區(qū)域;也可以做成關(guān)閉按鈕。占位符在保真比較高的產(chǎn)品原型中作用不大。

l? 圓角矩形

這個個人認為是因為圓角矩形應(yīng)用廣泛,所以單獨拿出來作為元件給使用者,免去了對矩形的設(shè)置。

l? 動態(tài)面板

非常重要的axure元件,必須要學(xué)會使用的元件,動態(tài)面板的顯示、隱藏、多狀態(tài)等,都是非常有用的。在這里不過多介紹,詳細介紹請參考:小樓axure圖文教程(五)動態(tài)面板的使用。

l? 水平線

就是一條水平的線,可以作為表示頁面一些區(qū)域分割時使用,比如在兩塊不同區(qū)域之間添加一條水平線,來明顯的區(qū)分。水平線可以通過設(shè)置元件屬性中的角度Roto變成斜線來使用。

l? 垂直線

沒什么好說的,和水平線一樣的作用。

l? 圖片熱區(qū)

用于點擊圖片中某個區(qū)域產(chǎn)生交互事件時使用,圖片熱區(qū)也是矩形的一種,可以通過設(shè)置矩形無邊框,背景色100%透明度來實現(xiàn)。

l? 文本框(單行)

用于輸入文字的axure元件,用于登錄、標題、密碼框(鼠標右鍵–編輯選項–隱藏文本)等功能。

l? 文本框(多行)

從字面意思就知道了它的功能,用于實現(xiàn)更多文字內(nèi)容輸入的axure元件,用于回復(fù)、評論、微博發(fā)布框這類的功能。

l? 下拉列表(框)

鼠標點擊時展開多個選項的axure元件,主要用來類別選擇或多條件查詢效果時使用。

l? 列表框

一個多選項的列表,帶滾動條效果,個人認為樣子很丑,應(yīng)用不是很多,應(yīng)用場景可以參考word自定義快速訪問工具欄中選擇添加項的效果。

l? 復(fù)選框

復(fù)選框用于同類別內(nèi)容可以同時選擇多個時候使用,比如注冊時候個人興趣的選擇,又比如批量刪除郵件時選擇多個郵件的功能。

l? 單選按鈕

多個選項僅能選擇其一時候使用,比如性別選擇。多個單選按鈕聯(lián)動效果需要同時選中多個需要聯(lián)動的單選按鈕—鼠標右鍵—編輯選項–指定單選按鈕組來實現(xiàn)。不嫌麻煩的話也可以通過設(shè)置每個單選按鈕的onclick事件來實現(xiàn)。

l? 內(nèi)部框架

用于在頁面中嵌入其他頁面的axure元件,可以設(shè)置好大小后雙擊它,指定要嵌入的頁面??蚣芸梢酝ㄟ^編輯選項取消滾動條,應(yīng)用場景多見于網(wǎng)站后臺原型和移動互聯(lián)網(wǎng)產(chǎn)品原型。

l? 表格

表格很常見,就不多做解釋,每個表格都可以設(shè)置單獨的事件,但是axure還不支持單元格的合并。

l? 菜單縱向

主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺。

l? 菜單橫向

主要用于網(wǎng)站導(dǎo)航,多使用于網(wǎng)站前臺。

l? 樹

主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺。

用上述所有axure元件做的示例:【點擊下載】

?102

本文作者:@小樓;轉(zhuǎn)載自:Axure原創(chuàng)教程網(wǎng)

新手入門基礎(chǔ)教程目錄

Axure教程 axure新手入門基礎(chǔ)(1)

Axure教程 axure新手入門基礎(chǔ)(2

Axure教程 axure新手入門基礎(chǔ)(3)

Axure教程 axure新手入門基礎(chǔ)(4)

Axure教程 axure新手入門基礎(chǔ)(5)

Axure教程 關(guān)于Axure rp觸發(fā)事件中IF和ELSE IF的使用說明(6)

Axure教程 axure元件使用思路的補充(7)

Axure教程 動態(tài)面板的用途(8)

Axure教程 帶遮罩層的彈出框(9)

Axure教程 動態(tài)面板滑動效果(10)

更多Axure學(xué)習(xí)技巧:Axure專欄

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝分享 ?? ??

    來自河北 回復(fù)
  2. 鏈接取消了,能不能再共享一下啊大師

    來自江蘇 回復(fù)
  3. 您好。。。我是正在學(xué)習(xí)的新人。。。請問分享的資料還可以下載嗎。。。那個鏈接無效了。。。
    期待您的回復(fù)!

    來自陜西 回復(fù)
  4. 下載不了,樓主。分享已經(jīng)沒了

    來自廣東 回復(fù)
  5. 元件都下載不了了。- –

    來自廣東 回復(fù)
  6. 不錯,不錯 ??

    來自北京 回復(fù)
  7. 網(wǎng)盤鏈接不存在

    來自上海 回復(fù)
  8. ?

    來自河南 回復(fù)
  9. 就一個Tab頁的制作我就不會了,網(wǎng)上說的也沒做出來,Tab與頁面之間一直有條線………….好難過 ?? ? ?? ??

    來自貴州 回復(fù)
  10. 不錯不錯

    來自廣東 回復(fù)
  11. 樓主,線框圖元件哪里有下載?求求求

    來自山東 回復(fù)
  12. 有視頻教程么?

    來自安徽 回復(fù)
  13. 文章中的示例,http://yun.baidu.com/share/link?shareid=3012273590&uk=17791428。 ??

    來自廣東 回復(fù)
  14. 取消分享了嘛 不能下載

    來自廣東 回復(fù)
  15. 挺好的,不讓下載嗎?

    來自北京 回復(fù)
  16. 分享被取消了,嗚嗚,好想下載啊

    來自廣東 回復(fù)
  17. 學(xué)習(xí)了

    來自江蘇 回復(fù)
  18. 不錯,入門極佳

    來自GOOGLE.COM 回復(fù)
专题
15027人已学习12篇文章
自传播是基于一个事件、一个产品或者营销活动自身的吸引力,激发人们自愿转发分享。本专题的文章分享了如何让产品具有自传播性。
专题
14754人已学习13篇文章
在产品的运营过程中,无论是产品、运营还是市场团队,都希望能清晰地了解用户的行为路径,通过用户行为分析,优化用户体验,实现更精准的运营和营销。
专题
13560人已学习12篇文章
本专题的文章分享了B端产品经理的通用工作流程。
专题
12532人已学习15篇文章
互联网医疗是医疗行业与互联网的综合应用,其以互联网及相关技术为载体和支撑,开展线下传统或线上衍生的医疗健康服务。本专题的文章分享了对互联网医疗的分析和见解。
专题
13865人已学习12篇文章
一张逻辑清晰、层次明确的产品架构图,能够给观者讲述一个产品的业务流程、功能框架和设计思路,也是一个产品必不可少的可视化工具。