Axure使用
（一） Axure rp的界面
1-主菜單工具欄
大部分類似office軟件，不做詳細(xì)解釋，鼠標(biāo)移到按鈕上都有對(duì)應(yīng)的提示。
2-主操作界面
繪制產(chǎn)品原型的操作區(qū)域，所有的用到的元件都拖到該區(qū)域。
3-站點(diǎn)地圖
所有頁面文件都存放在這個(gè)位置，可以在這里增加、刪除、修改、查看頁面，也可以通過鼠標(biāo)拖動(dòng)調(diào)整頁面順序以及頁面之間的關(guān)系。
4-axure元件庫
或者叫axure組件庫、axure部件庫，所有軟件自帶的元件和加載的元件庫都在這里，這里可以執(zhí)行創(chuàng)建、加載、刪除axure元件庫的操作，也可以根據(jù)需求顯示全部元件或某一元件庫的元件。
5-母版管理
這里可以創(chuàng)建、刪除、像頁面頭部、導(dǎo)航欄這種出現(xiàn)在每一個(gè)頁面的元素，可以繪制在母版里面，然后加載到需要顯示的頁面，這樣在制作頁面時(shí)就不用再重復(fù)這些操作。
6-頁面屬性
這里可以設(shè)置當(dāng)前頁面的樣式，添加與該頁面有關(guān)的注釋，以及設(shè)置頁面加載時(shí)觸發(fā)的事件onpageload。
7-元件屬性
這里可以設(shè)置選中元件的標(biāo)簽、樣式，添加與該元件有關(guān)的注釋，以及設(shè)置頁面加載時(shí)觸發(fā)的事件；
A-交互事件：元件屬性區(qū)域閃電樣式的小圖標(biāo)代表交互事件；
B-元件注釋：交互事件左面的圖標(biāo)是用來添加元件注釋的，在這里我們能夠添加一些元件限定條件的注釋，比如：文本框的話，可以添加注釋指出輸入字符長(zhǎng)度不能超過20。
C-元件樣式：交互事件右側(cè)的圖標(biāo)是用來設(shè)置元件樣式的，可以在這里更改原件的字體、尺寸、旋轉(zhuǎn)角度等，當(dāng)然也可以進(jìn)行多個(gè)元件的對(duì)齊、組合等設(shè)置。
8 動(dòng)態(tài)面板
這個(gè)是很重要的區(qū)域，在這里可以添加、刪除動(dòng)態(tài)面板的狀態(tài)，以及狀態(tài)的排序，也可以在這里設(shè)置動(dòng)態(tài)面板的標(biāo)簽；當(dāng)繪制原型動(dòng)態(tài)面板被覆蓋時(shí)，我們可以在這里通過點(diǎn)擊選中相應(yīng)的動(dòng)態(tài)面板，也可以雙擊狀態(tài)進(jìn)入編輯。
如果不小心關(guān)閉了，可以通過主菜單工具欄—視圖—重置視圖來找回。
（二）Axure rp的線框圖元件
l 圖片
圖片元件拖入編輯區(qū)后，可以通過雙擊選擇本地磁盤中的圖片，將圖片載入到編輯區(qū)，axure會(huì)自動(dòng)提示將大圖片進(jìn)行優(yōu)化，以避免原型文件過大；選擇圖片時(shí)可以選擇圖片原始大小，或保持圖片元件的大小。
l 文本
在網(wǎng)頁中文本的名稱是lable，用于頁面中添加說明文字、文字連接，或一些動(dòng)態(tài)的提示。
l 矩形
矩形的應(yīng)用比較廣泛，比如作為頁面的背景、按鈕、以及一些元件的遮蓋等；矩形的形狀可以通過鼠標(biāo)右鍵點(diǎn)擊–編輯選項(xiàng)—改變形狀，來變成我們需要的形狀，比如做選項(xiàng)卡時(shí)候我們需要頂部圓角的矩形，就可以通過改變矩形的形狀來實(shí)現(xiàn)。
l 占位符
制作原型時(shí)，可以用它來代替對(duì)一些沒有交互或者交互比較簡(jiǎn)單容易說明的區(qū)域；也可以做成關(guān)閉按鈕。占位符在保真比較高的產(chǎn)品原型中作用不大。
l 圓角矩形
這個(gè)個(gè)人認(rèn)為是因?yàn)閳A角矩形應(yīng)用廣泛，所以單獨(dú)拿出來作為元件給使用者，免去了對(duì)矩形的設(shè)置。
l 動(dòng)態(tài)面板
非常重要的axure元件，必須要學(xué)會(huì)使用的元件，動(dòng)態(tài)面板的顯示、隱藏、多狀態(tài)等，都是非常有用的。
l 水平線
就是一條水平的線，可以作為表示頁面一些區(qū)域分割時(shí)使用，比如在兩塊不同區(qū)域之間添加一條水平線，來明顯的區(qū)分。水平線可以通過設(shè)置元件屬性中的角度Roto變成斜線來使用。
l 垂直線
沒什么好說的，和水平線一樣的作用。
l 圖片熱區(qū)
用于點(diǎn)擊圖片中某個(gè)區(qū)域產(chǎn)生交互事件時(shí)使用，圖片熱區(qū)也是矩形的一種，可以通過設(shè)置矩形無邊框，背景色100%透明度來實(shí)現(xiàn)。
l 文本框（單行）
用于輸入文字的axure元件，用于登錄、標(biāo)題、密碼框（鼠標(biāo)右鍵–編輯選項(xiàng)–隱藏文本）等功能。
l 文本框（多行）
從字面意思就知道了它的功能，用于實(shí)現(xiàn)更多文字內(nèi)容輸入的axure元件，用于回復(fù)、評(píng)論、微博發(fā)布框這類的功能。
l 下拉列表（框）
鼠標(biāo)點(diǎn)擊時(shí)展開多個(gè)選項(xiàng)的axure元件，主要用來類別選擇或多條件查詢效果時(shí)使用。
l 列表框
一個(gè)多選項(xiàng)的列表，帶滾動(dòng)條效果，個(gè)人認(rèn)為樣子很丑，應(yīng)用不是很多，應(yīng)用場(chǎng)景可以參考word自定義快速訪問工具欄中選擇添加項(xiàng)的效果。
l 復(fù)選框
復(fù)選框用于同類別內(nèi)容可以同時(shí)選擇多個(gè)時(shí)候使用，比如注冊(cè)時(shí)候個(gè)人興趣的選擇，又比如批量刪除郵件時(shí)選擇多個(gè)郵件的功能。
l 單選按鈕
多個(gè)選項(xiàng)僅能選擇其一時(shí)候使用，比如性別選擇。多個(gè)單選按鈕聯(lián)動(dòng)效果需要同時(shí)選中多個(gè)需要聯(lián)動(dòng)的單選按鈕—鼠標(biāo)右鍵—編輯選項(xiàng)–指定單選按鈕組來實(shí)現(xiàn)。不嫌麻煩的話也可以通過設(shè)置每個(gè)單選按鈕的onclick事件來實(shí)現(xiàn)。
l 內(nèi)部框架
用于在頁面中嵌入其他頁面的axure元件，可以設(shè)置好大小后雙擊它，指定要嵌入的頁面。框架可以通過編輯選項(xiàng)取消滾動(dòng)條，應(yīng)用場(chǎng)景多見于網(wǎng)站后臺(tái)原型和移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型。
l 表格
表格很常見，就不多做解釋，每個(gè)表格都可以設(shè)置單獨(dú)的事件，但是axure還不支持單元格的合并。
l 菜單縱向
主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺(tái)。
l 菜單橫向
主要用于網(wǎng)站導(dǎo)航，多使用于網(wǎng)站前臺(tái)。
l 樹
主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺(tái)。
（三）Axure rp元件的觸發(fā)事件
l OnClick（點(diǎn)擊時(shí)）
鼠標(biāo)點(diǎn)擊事件，除了動(dòng)態(tài)面板的所有的其他元件的點(diǎn)擊時(shí)觸發(fā)。比如點(diǎn)擊按鈕。
l OnMouseEnter（鼠標(biāo)移入時(shí)）
鼠標(biāo)進(jìn)入到某個(gè)元件范圍時(shí)觸發(fā)，比如當(dāng)鼠標(biāo)移到某張圖片時(shí)顯示該圖片的介紹。
l OnMouseOut（鼠標(biāo)移出時(shí)）
鼠標(biāo)離開某個(gè)元件范圍時(shí)觸發(fā)。比如鼠標(biāo)離開圖片時(shí)，圖片介紹消失。
l OnKeyUp（按鍵彈起時(shí)）
文本框（單行與多行）編輯時(shí)，鍵盤按下某一個(gè)按鍵松開時(shí)觸發(fā)，不支持其他axure元件。比如統(tǒng)計(jì)文本框輸入的字?jǐn)?shù)。
l OnFocus（獲取焦點(diǎn)時(shí)）
當(dāng)一個(gè)元件通過點(diǎn)擊或切換獲取焦點(diǎn)時(shí)觸發(fā)。比如搜索框編輯時(shí)，清空“請(qǐng)輸入關(guān)鍵字”的提示。
l OnLostFocus（失去焦點(diǎn)時(shí)）
當(dāng)一個(gè)組件失去焦點(diǎn)時(shí)觸發(fā)。比如用戶名、密碼的驗(yàn)證。
l OnChange（選中項(xiàng)改變時(shí)）
下拉列表框或列表框的選中項(xiàng)改變時(shí)觸發(fā)，不支持其他元件。比如選擇地址時(shí)，選擇不同的省份，顯示對(duì)應(yīng)的省內(nèi)城市。
l OnMove（移動(dòng)時(shí)）
當(dāng)動(dòng)態(tài)面板移動(dòng)時(shí)觸發(fā)。是指通過其他事件的觸發(fā)控制面板移動(dòng)時(shí)，比如當(dāng)進(jìn)度條移動(dòng)時(shí)，進(jìn)度比例的變化。
l The OnShow and OnHide events（顯示或隱藏時(shí)）
當(dāng)動(dòng)態(tài)面板隱藏或顯示時(shí)觸發(fā)。比如圖片顯示時(shí)按鈕文字是關(guān)閉圖片，圖片隱藏時(shí)按鈕文字變?yōu)榇蜷_圖片。
l OnPanelStateChange（狀態(tài)改變時(shí)）
當(dāng)動(dòng)態(tài)面板更改面板的狀態(tài)時(shí)觸發(fā)。比如通過改變動(dòng)態(tài)面板狀態(tài)實(shí)現(xiàn)的進(jìn)度條效果，當(dāng)狀態(tài)改變時(shí)改變相應(yīng)的進(jìn)度比例。
l OnDragStart: Occurs when the drag begins（開始拖動(dòng)面板時(shí)）
當(dāng)開始拖動(dòng)動(dòng)態(tài)面板時(shí)觸發(fā)。比如在動(dòng)態(tài)面板拖動(dòng)開始時(shí)，顯示“拖動(dòng)開始”的文字提示。
l OnDrag: Occurs as the panel is dragged（面板拖動(dòng)時(shí)）
動(dòng)態(tài)面板拖動(dòng)時(shí)觸發(fā)，比如拖動(dòng)一塊動(dòng)態(tài)面板另外一塊跟隨移動(dòng)。
l OnDragDrop: Occurs when the panel is dropped（面板拖動(dòng)結(jié)束時(shí)）
當(dāng)拖拽結(jié)束時(shí)觸發(fā)。比如滑動(dòng)解鎖，面板拖動(dòng)結(jié)束時(shí)根據(jù)滑塊的位置設(shè)置相應(yīng)的效果。
（四）條件生成器
在axure原型制作的過程中，很多時(shí)候我們需要觸發(fā)一個(gè)又一個(gè)事件，以交互設(shè)計(jì)效果展示的需求。在這些事件里我們經(jīng)常需要在滿足某一條件時(shí)完成指定的動(dòng)作。比如：文本框文字為空的時(shí)候點(diǎn)擊按鈕無效。或者拖動(dòng)動(dòng)態(tài)面板沒到達(dá)指定位置退回原位等。
這一節(jié)教程我們就講一下，如何使用條件生成器，至于條件的設(shè)置，以后結(jié)合相關(guān)的案例再逐漸深入。
（一）條件邏輯
條件生成器是在我們雙擊某一事件打開用例編輯器后才能打開。如截圖里1的位置，藍(lán)色的“添加條件”點(diǎn)擊后即打開條件生成器。
打開條件生成器后，2的位置有2個(gè)選項(xiàng)，一個(gè)是“全部”一個(gè)是“任何”。
全部：是指事件觸發(fā)后必須同時(shí)滿足條件生成器里設(shè)置的所有條件時(shí)才繼續(xù)下一步動(dòng)作，否則不執(zhí)行任何動(dòng)作。用白話來舉例：如果個(gè)稅滿五年（條件1）并且繳納時(shí)間未間斷（條件2），就能參加搖號(hào)（下一步動(dòng)作）。這個(gè)例子舉得好心酸：（。
任何：是指事件觸發(fā)后只要滿足條件生成器里的任意一個(gè)條件即執(zhí)行下一步動(dòng)作。用白話舉例：如果連續(xù)5年繳納個(gè)稅（條件1）或者連續(xù)60個(gè)月繳納社保（條件2），就可以買房（下一步動(dòng)作）。尼瑪，心更酸了！
（二）可設(shè)置的條件
可設(shè)置的條件是指圖片中3的位置包含的內(nèi)容。
分別是：
l 變量值
軟件內(nèi)自帶了一個(gè)變量“onloadvariable”，也可以添加、刪除、重命名變量，管理變量可以從菜單欄左數(shù)第四個(gè)（漢化版本的“線框圖”）中的第三項(xiàng)“管理變量”進(jìn)行上述操作。當(dāng)然在條件編輯器里選擇變量時(shí)最后一項(xiàng)“新建”也可以完成對(duì)變量的管理。變量值可以是字母、數(shù)字、特殊字符和漢字或者是它們的任意組合。
l 變量長(zhǎng)度
是指變量值的字符個(gè)數(shù)，在axure里一個(gè)漢字的長(zhǎng)度是1。變量長(zhǎng)度的值可以通過axure自帶函數(shù)進(jìn)行獲取。
l 元件文字
是指每個(gè)元件上面可編輯的文字。不包含：動(dòng)態(tài)面板、圖片熱區(qū)、垂直線、水平線、內(nèi)部框架、下拉列表、列表框。
l 元件值長(zhǎng)度
僅包含單行和多行文本框、下拉列表和列表框。
l 選中于
僅適用于單選按鈕和復(fù)選框，選中時(shí)值為“真”，未選中時(shí)值為“假”。
l 選中項(xiàng)于
僅適用于下拉列表和列表框，通過獲取元件當(dāng)前值來確定選中狀態(tài)。
l 動(dòng)態(tài)面板狀態(tài)
動(dòng)態(tài)面板專用，以獲取事件激發(fā)時(shí)動(dòng)態(tài)面板的狀態(tài)作為判斷條件。
l 動(dòng)態(tài)面板可見性
動(dòng)態(tài)面板專用，以動(dòng)態(tài)面板顯示或隱藏作為判斷條件。
l 焦點(diǎn)元件上的文字
即通過鼠標(biāo)點(diǎn)擊或Tab切換被選中的元件上的文字，比如文本框獲取焦點(diǎn)時(shí)，光標(biāo)在文本框內(nèi)閃動(dòng)；按鈕獲取焦點(diǎn)時(shí)四周會(huì)出現(xiàn)虛線。
l 值
可以是字母、數(shù)字、漢字、符號(hào)、函數(shù)、公式；可以直接輸入，或者點(diǎn)擊fx進(jìn)入編輯。可以設(shè)置等于、不等于大于、包含、是、不是等條件。具體使用方法以后結(jié)合案例詳解。
l 拖放光標(biāo)
是指拖動(dòng)動(dòng)態(tài)面板時(shí)光標(biāo)（鼠標(biāo)指針）的位置，以拖放光標(biāo)是否進(jìn)入某個(gè)元件的范圍為條件。
l 元件范圍
是指元件覆蓋的范圍，以是否觸碰到指定元件為條件。
（五）系統(tǒng)函數(shù)與變量
1、變量的種類：
全局變量：可以在整個(gè)原型的任意位置調(diào)用和修改。
局部變量：僅作用于某一事件的某一動(dòng)作內(nèi)。
自定義變量：自行新建的全局變量。
2、axure函數(shù)
特殊變量：特殊變量其實(shí)是軟件自帶的函數(shù)，就像excel中的函數(shù)一樣，可以調(diào)用獲得一些特定的值。
功能：除了運(yùn)算符之外的三個(gè)函數(shù)，可以對(duì)變量進(jìn)行進(jìn)一步操作以獲取需要的值。比如：截取變量字符串中的某一段或者計(jì)算變量字符串的長(zhǎng)度。
3、特殊變量的使用
使用時(shí)我們只需要點(diǎn)擊選擇相應(yīng)的變量或直接輸入[[變量名稱]]，再通過不同的表達(dá)式就能得到我們要的效果。比如我們想在文本框內(nèi)顯示當(dāng)前的日期(yy-mm-dd格式)，就可以通過下面的表達(dá)式實(shí)現(xiàn)：[[Year]]-[[Month]]-[[Day]]
4、函數(shù)的使用
功能中的函數(shù)都是通過“變量名.函數(shù)名（參數(shù)）”來實(shí)現(xiàn)：
例1：截取變量“頁面名稱”中的前三個(gè)字符
[[PageName.substring(0, 3)]]
例2：獲取頁面名稱字符的長(zhǎng)度
[[PageName.length]]
例3：將變量轉(zhuǎn)換成小數(shù)點(diǎn)后保留兩位的數(shù)值
[[自定義變量名.toFixed(2)]]
5、變量的使用情景
1）記錄登錄狀態(tài)；
2）顯示編輯框還能輸入多少漢字；
3）滾動(dòng)條的實(shí)現(xiàn)；
4）根據(jù)不同的變量跳轉(zhuǎn)至不同的頁面
N）……
太多，就不一一列舉了。
簡(jiǎn)單說，變量的使用一般程序：添加變量，修改變量值，判斷變量值，根據(jù)不同的值執(zhí)行不同的動(dòng)作。
值得注意的是，在事件中設(shè)置在當(dāng)前頁打開新窗口時(shí)，如果同時(shí)對(duì)變量有操作，記得把變量操作寫在跳轉(zhuǎn)頁面之前，寫在后面變量會(huì)不起作用。
總結(jié)
- 上一篇： （原）人体姿态识别Light weigh
- 下一篇： CentOS安装rzsz命令