![產(chǎn)品原型設計-Axure入門培訓_第1頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/22/402fd7f7-c342-4b1a-af70-e53530366c93/402fd7f7-c342-4b1a-af70-e53530366c931.gif)
![產(chǎn)品原型設計-Axure入門培訓_第2頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/22/402fd7f7-c342-4b1a-af70-e53530366c93/402fd7f7-c342-4b1a-af70-e53530366c932.gif)
![產(chǎn)品原型設計-Axure入門培訓_第3頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/22/402fd7f7-c342-4b1a-af70-e53530366c93/402fd7f7-c342-4b1a-af70-e53530366c933.gif)
![產(chǎn)品原型設計-Axure入門培訓_第4頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/22/402fd7f7-c342-4b1a-af70-e53530366c93/402fd7f7-c342-4b1a-af70-e53530366c934.gif)
![產(chǎn)品原型設計-Axure入門培訓_第5頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/22/402fd7f7-c342-4b1a-af70-e53530366c93/402fd7f7-c342-4b1a-af70-e53530366c935.gif)
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領
文檔簡介
1、產(chǎn)品原型設計Axure入門培訓2認識AxureAxure是一個快速的原型工具,主要是針對負責定義需求、定義規(guī)格、設計功能、設計界面的專家,包括用戶體驗設計師(UX)、交互設計師(UI)、業(yè)務分析師(BA)、信息架構(gòu)師(IA)、可用性專家(UE)和產(chǎn)品經(jīng)理(PM)。Axure能讓你快速的進行原型的設計,讓相關人員對你的設計進行體驗和驗證,向用戶進行演示、溝通交流以確認用戶需求,并能自動生成規(guī)格說明文檔。另外,Axure還能讓團隊成員進行多人協(xié)同設計,并對設計進行方案版本控制管理。Axure使原型設計及和客戶的交流方式發(fā)生了變革:進行更加高效的設計;讓你體驗動態(tài)的原型;更加清晰的交流想法;目前全球
2、有很多大型公司和重要機構(gòu)在使用Axure,國內(nèi)的淘寶、雅虎、騰訊、當當?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。3Axure的工作環(huán)境4Axure的工作環(huán)境站點地圖面板站點地圖面板對所設計的頁面進行添加、刪除、重命名和組織的操作??梢灾苯油蟿禹撁娓淖兤鋵蛹壗Y(jié)構(gòu)。雙擊頁面即可在主工作區(qū)打開頁面進行設計。組件面板組件面板該面板中有線框圖控件和流程圖控件,用這些控件進行頁面框架和流程圖的設計??芍苯油献?、拷貝控件到主工作區(qū)進行移動、改變尺寸操作。雙擊、右鍵點擊控件可針對不同的控件進行編輯風格和屬性的操作。模塊面板模塊面板模塊是一種可以重復使用的特殊頁面,在該面板中可進行模塊的添加、刪除、重命名和組織。如圖示可以針
3、對項目做頁面模塊,比如頁頭、頁尾;也可制作所有項目的公用模板,比如切換標簽樣式或圖形按鈕。5Axure的工作環(huán)境線框圖面板線框圖面板在線框圖面板中可以進行頁面線框圖、流程圖的設計,線框圖面板也就是Axure的主工作區(qū)。在最上方以標簽形式顯示打開的多個頁面。控件交互面板控件交互面板定義控件的交互,如:設定鏈接、彈出、動態(tài)面板的顯示和隱藏等。不同控件有不同的內(nèi)建交互事件,如OnClick(鼠標點擊)、OnMouseEnter(鼠標懸停)等,后面會有詳細介紹。如果需要特殊說明的功能模塊或有交互行為產(chǎn)生的控件一定要填寫標簽,如“個人信息提交按鈕”、“選擇商家等級下拉菜單”等等。6Axure的工作環(huán)境控
4、件注釋面板控件注釋面板對控件進行注釋、定義和功能進行說明。里面的選項可以自定義,比如添加一個“功能說明”的項,并刪除原有的項目。添加注釋的控件在產(chǎn)品原型頁面上會顯示一個黃色便簽的圖標,點擊可查看具體注釋。漢化版的Axure不能修改下拉菜單注釋,請避開此選項或者用其他方式表達??丶⑨屆姘蹇丶⑨屆姘? -自定義字段和視圖自定義字段和視圖點擊注解面板上的“自定義”打開設定自定義字段和視圖的菜單,可以根據(jù)項目需求設定注解項目,如功能說明(文本類型);優(yōu)先級(下拉菜單類型);完成時間(日期類型)等等。自定義視圖是將設定的字段分類放到不同組內(nèi),以方便選擇,比如只有功能說明及優(yōu)先級的字段可以建立功能分組
5、,有功能說明及完成時間的字段可以建立項目控制分組。建立好的分組可以在控件注釋面板頂部的箭頭按鈕點擊選擇。7Axure的工作環(huán)境頁面注釋和頁面交互面板頁面注釋和頁面交互面板添加和管理頁面的注釋和交互事件。頁面注釋和頁面交互面板頁面注釋和頁面交互面板- -管理注釋管理注釋點擊頁面注釋和頁面交互面板頂部的箭頭按鈕,可以打開頁面注釋管理頁面,可以添加不同的頁面注釋字段,如“頁面說明”、“參與部門”等等,添加完成后,可點擊箭頭按鈕為不同的字段添加說明?,F(xiàn)在演示一下Axure的工作環(huán)境。8基本交互設計控件交互面板中可以定義控件的交互,交互由事件(Events)、場景(Cases)和動作(Actions)組
6、成: 用戶操作界面時就會觸發(fā)事件,如鼠標的OnClick、OnMouseEnter和OnMouseOut; 每個事件可以包含多個場景,場景也就是事件觸發(fā)后要滿足的條件; 每個場景可執(zhí)行多個動作,例如:打開鏈接、顯示面板、隱藏面板、移動面板。事件、場景和動作的關系9基本交互設計大多控件只具備常見的三種觸發(fā)事件:OnClick、OnMouseEnter 與OnMouseOut,一些特殊的控件可觸發(fā)的事件有些不同: 按鈕控件只有OnClick 單選按鈕和復選框有OnFocus、OnLostFocus 文本框、文本域、下拉菜單、列表框有OnKeyUp、OnFocus、OnLostFocus 頁面加載或
7、模塊被載入時發(fā)生OnPageLoad目前目前Axure RP 5Axure RP 5支持的事件如下:支持的事件如下: OnClick:鼠標點擊 OnMouseEnter:鼠標的指針移動到對象上 OnMouseOut:鼠標的指針移動出對象外 OnFocus:鼠標的指針進入文字輸入狀態(tài)(獲得焦點) OnLostFocus:鼠標的指針離開文字輸入狀態(tài)(失去焦點) OnPageLoad:頁面或模塊載入 OnKeyUp:實時響應鍵盤輸入10基本交互設計定義鏈接1. 首先,拖拉一個按鈕控件到線框圖中,并選擇這個按鈕;2. 然后,控件交互面板中鼠標雙擊“OnClick”這個事件,這時會出現(xiàn)“交互事件屬性”對
8、話窗,在這個對話框中可以選擇要執(zhí)行的動作;3. 在“第二步”中,勾選“在當前窗口打開鏈接”動作。4. 在“第三步”中,點擊“Link”,在彈出的“鏈接屬性”對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址。11基本交互設計多個場景(條件)一個觸發(fā)事件可以包含有多個場景,根據(jù)條件執(zhí)行流程或互動。比如產(chǎn)品設計階段一個提交按鈕點擊后,需要判斷用戶登錄狀態(tài)顯示不同頁面。例如,可以在一個按鈕的OnClick觸發(fā)事件中加入兩個場景,第一個場景可以加入一個條件說明(“已登錄用戶”)并執(zhí)行第一個動作,打開已登錄用戶頁面;第二個場景則可加入另一個條件說明(“未登錄用戶”)并執(zhí)行第二個動作,打開登錄界面。當在原型頁面中
9、按下提交評論按鈕時,會顯示出這兩個條件說明(“已登錄用戶”和“未登錄用戶”),點選其中一個條件說明,就會執(zhí)行該條件所關聯(lián)的動作,比如選擇未登錄用戶,打開登錄界面,模擬判斷用戶的登錄狀態(tài)轉(zhuǎn)入不同頁面。使用條件說明可以有效操作條件流程,但如果需要建立一個高保真的原型(比如建立前期用戶調(diào)查原型),則必需在條件中定義條件邏輯:根據(jù)控件的值或變量值執(zhí)行動作?,F(xiàn)在演示一下基本交互設計,多個條件提交,并鏈接到不同頁面。12模塊的應用只要拖拉模塊面板中的模塊到線框圖中,就可以在頁面或另外模塊中應用模塊。拖入到線框圖中后,根據(jù)模塊特性,模塊對象會有淡紅或灰色的遮罩,執(zhí)行菜單 “線框圖-標記模塊”可以移除遮罩。模
10、塊預設行為是“正常”,可以在模塊面板中的模塊上點鼠標右鍵,然后利用“行為”子菜單將它的行為修改為“作為背景”或“自定義組件”,修改完成后,模塊的圖標也會發(fā)生改變,以標識當前模塊的作用。正常: 模塊可以被移動與放置在線框圖中的任何地方,對模塊修改后,所做的修改會在該模塊的所有使用實例中反映出來。作為背景: 模塊應用在線框圖中時,會處于線框圖的最底層并被鎖定,所包含控件的位置與在模塊中的位置相同,常用于作為模板、布局、底板。自定義組件: 模塊應用在線框圖中時,模塊中的控件與模塊失去關聯(lián),模塊中的控件可以像一般控件一樣進行編輯,就好像只是進行了復制。常用于創(chuàng)建具有自定義屬性、注釋和交互的自定義控件庫
11、,例如:具有白色文字的藍色按鈕?,F(xiàn)在演示一下定義模塊的不同行為,在線框圖內(nèi)的不同效果。13生成原型文件什么是什么是HTMLHTML原型原型在Axure中設計了帶注釋的線框圖并定義了交互之后,就可以產(chǎn)生一個可以互動的、基于瀏覽器的原型了。Axure原型是一些HTML和JavaScript文件,可以在IE6+瀏覽器中執(zhí)行。配置和生成原型配置和生成原型點擊主菜單“生成-原型(F5)”或工具欄上的“原型”按鈕,可以配置和生成原型,在打開的“配置HTML原型” 對話框中,可以對原型進行配置。除了“常規(guī)”項目中,需要設定生成原型的目錄需要經(jīng)常修改之外,其他項目改動不大。由于Axure HTML原型包含多個
12、文件,最好指定一個單獨文件夾專門存放這個原型。“分發(fā)”項目可以把原型生成為一個單獨的.chm文件。但需要安裝Microsoft HTML Help Workshop。重新生成頁面重新生成頁面當Axure工程會越來越大時,輸出HTML原型的時間也會越來越慢。如果只是調(diào)整其中一個頁面,卻要等待整個原型重新全部輸出,那就太浪費時間了。要重新生成某一個頁面,只打開這個頁面,然后選擇主菜單“生成-將當前頁面重新生成為原型(CTRL+F5)”,回到HTML原型中刷新就可以看到更新的頁面了。14生成原型文件瀏覽和分發(fā)Axure輸出的HTML原型的界面可分成三個區(qū)域:左側(cè): 是一個頁面導航列表,以層級形式展示
13、原型中頁面。底部: 顯示當前頁面的備注說明,即頁面?zhèn)渥?。中間: 顯示線框圖和流程圖,線框圖可以按照所設計的交互進行鼠標和鍵盤的互動。單擊控件旁邊的黃色便利貼小圖標可以閱讀控件注釋。需要注意的是:我們通常會把原型分發(fā)給不同的部門(比如設計部、制作部、技術部),有些帶交互功能的部分是沒有明確提示“這里可以點擊”,黃色便利貼圖標是一個有效的標記,我們在制作原型時,有交互動作的部分一定要加注釋(會在原型上出現(xiàn)便利貼圖標),不但可以為其他部門同事標明這里可以點擊試試,同時也是針對這個交互功能描述,對以后生成的文檔有幫助。分發(fā)原型的方式有很多種:1、發(fā)布到web服務器將HTML原型上傳到Web服務器上,只
14、要將網(wǎng)址告訴客戶、工作伙伴或其他人,他們就可以在瀏覽器上瀏覽原型。2、 壓縮成ZIP壓縮包將原型壓縮成ZIP壓縮包,然后將ZIP壓縮包傳遞給相關的人。其它人將ZIP包解壓縮后,便可以直接在自己的計算機上瀏覽HTML原型。3、 發(fā)布為CHM文檔將原型發(fā)布為一個單獨的文檔,不需安裝任何軟件就可以訪問。15流程圖在建立原型文件時可以建立流程圖,流程圖其實也是頁面,只要修改頁面類型為流程圖即可。在頁面上點擊右鍵,選擇“圖表類型-流程圖”,這時在頁面前圖標會變?yōu)橐粋€ 圖標。注意:要創(chuàng)建流程圖并不是一定強制要將頁面指定為流程圖,指定為流程圖只是方便識別。在控件面板中的頂部工具欄上點擊“流程圖”按鈕可以找到
15、流程控件。Axure里面由于不涉及到具體的程序流程,所以有些標準的圖形并沒有提供,但可以支持基本的流程圖,特殊的形狀可以添加圖片表示。要添加連接線,可以點擊主工具欄上的“連接線模式(F11)”按鈕,這時線框圖面板會從指針狀態(tài)切換到連接狀態(tài),再點擊“指針選擇模式(F9)”可以切換回到指針狀態(tài)。在連接狀態(tài)時,在流程圖中點擊和拖動就可以繪制和添加連接線。例如,要連接兩個流程控件,將鼠標放在一個流程控件的連接點上,點擊和拖拉,然后鼠標在另一個目標流程控件的連接點上松開,就可以完成連接。點擊和拖動連接線的尾部端點可進行重新連接。選擇流程連接線,然后點擊工具欄中的“線條樣式”和“箭頭樣式” 按鈕可以修改連
16、接線的形狀和樣式,如箭頭、虛線。16流程圖與線框圖控件相似,你可以拖拉流程圖控件到線框面板中,可以通過工具欄和右鍵菜單來修改流程圖形狀的風格和屬性。另外,已經(jīng)繪制好的流程形狀可以通過控件右鍵菜單中的“編輯流程形狀”的子菜單進行流程圖形狀的轉(zhuǎn)變。可以在流程圖控件上分配一個引用頁面,如果流程圖控件引用了一個頁面,控件上的文本會變成頁面的名稱,修改頁面的名稱時流程圖相應頁面的名稱也會變化。在原型中點擊引用了頁面的流程控件可以自動鏈接到頁面中。在頁面導航面板中拖拉頁面到線框圖或流程圖中,將會創(chuàng)建一個引用了頁面的流程圖控件。流程圖控件上所引用的頁面可以通過在控件上的右鍵菜單 “編輯流程圖形狀”進行編輯和
17、清除。引用頁面后,控件左上角會有一個“頁面”圖標進行標識。也可以根據(jù)頁面導航面板中的頁面層級關系自動產(chǎn)生流程圖(在頁面上點擊右鍵,選擇“生成流程圖”),但所生成的流程圖只是根據(jù)你所選擇的頁面和子頁面的層級關系,并且會自動引用對應的頁面。一些沒有頁面的流程需要手動添加。現(xiàn)在演示一下流程圖做法,并且在流程圖內(nèi)引用現(xiàn)有頁面、拖拉頁面進流程圖。17高級交互設計動態(tài)面板動態(tài)面板是我們經(jīng)常使用到的動態(tài)效果展示控件,可以讓你的原型中實現(xiàn)高級的動態(tài)交互功能。動態(tài)面板包含有多個狀態(tài)(states),每個狀態(tài)可包含一系列控件。任何時候都只有一個狀態(tài)是可見的,或這整個動態(tài)面板可以被隱藏。結(jié)合交互動作,可以讓動態(tài)面板
18、的狀態(tài)進行隱藏、顯示和改變。像其它控件一樣,可以在控件面板中拖拉動態(tài)面板控件,將動態(tài)面板控件添加到線框圖中。在線框圖中,雙擊動態(tài)面板可以打開一個“動態(tài)面板狀態(tài)管理”對話框,在對話框中你可以創(chuàng)建、重命名、重新排序、刪除和編輯動態(tài)面板的狀態(tài)。第一個狀態(tài)是動態(tài)面板的默認狀態(tài)。在對話框中選中一個狀態(tài),然后點擊“編輯狀態(tài)”按鈕,就可以中打開一個狀態(tài)線框圖進行狀態(tài)設計。狀態(tài)設計和線框圖設計是一樣的,狀態(tài)線框圖中的藍色虛線外框表示動態(tài)面板的范圍邊界。18高級交互設計動態(tài)面板可以設置動態(tài)面板在默認是隱藏狀態(tài),比如鼠標懸停在某一區(qū)域時,才顯示此區(qū)域的詳細內(nèi)容,詳細內(nèi)容可以使用動態(tài)面板編輯,只有鼠標懸停在某一控件
19、上時才觸發(fā)顯示,平時為隱藏狀態(tài)。只要選擇動態(tài)面板,右鍵菜單選擇“編輯動態(tài)面板-設為隱藏”即可。這將會隱藏面板內(nèi)容,動態(tài)面板的遮罩會由藍色變?yōu)辄S色。交互動作可以引發(fā)動態(tài)面板的交互。在“交互事件屬性”對話框中包含了以下可以引發(fā)動態(tài)面板交互的動作:選擇其中一個動作后就可以和動態(tài)面板進行交互,并且可以在對話框下部的“編輯操作描述”選擇一個要鏈接的狀態(tài)。在控件注釋和交互面板中,一定要在“標簽”輸入框中對動態(tài)面板進行標識,以后就可以引用這個動態(tài)面板。如果沒有為動態(tài)面板指定標簽名稱,動態(tài)面板會被標識為“Unlabeled”。不光動態(tài)面板,所有會產(chǎn)生交互的控件都需要指定“標簽”名稱,以方便我們進行交互引用。1
20、9高級交互設計動態(tài)面板現(xiàn)在我們演示一下使用動態(tài)面板實現(xiàn)如下效果:現(xiàn)在我們演示一下使用動態(tài)面板實現(xiàn)如下效果:1、點擊某一控件,顯示一個動態(tài)面板。動態(tài)面板設關閉按鈕,點擊后,關閉(隱藏)動態(tài)面板。2、鼠標懸停某一控件,顯示一個動態(tài)面板。鼠標移出此控件后,動態(tài)面板自動關閉(隱藏)。3、三則標簽分別顯示不同的內(nèi)容,點擊相應的標簽顯示相應內(nèi)容,當前激活的標簽加亮狀態(tài),未激活標簽暗色狀態(tài)。4、某浮動窗的收起、展開狀態(tài)切換。5、鼠標懸停某一動態(tài)面板,切換顯示另外一種狀態(tài)。20高級交互設計圖片翻轉(zhuǎn)剛才我們演示了“鼠標懸停某一動態(tài)面板,切換顯示另外一種狀態(tài)?!边@是使用OnMouseEnter、 OnMouseO
21、ut事件加動態(tài)面板實現(xiàn)的。不使用OnMouseEnter, OnMouseOut和動態(tài)面板,也可實現(xiàn)圖片翻轉(zhuǎn)、按鈕樣式翻轉(zhuǎn)。拖入圖像控件到線框圖中,右鍵菜單選擇“編輯圖片-導入輪換圖片”,然后選擇一張鼠標懸停后的圖片。導入成功后,圖片左上角會多一個“黑白”小方框 。用鼠標移入到 “黑白”小方框上進行效果預覽?;拘Ч?輪換效果矩形、占位符控件同樣具備翻轉(zhuǎn)樣式的設定,把矩形控件拖到線框圖中,右鍵菜單選擇“編輯按鈕形狀-編輯輪換樣式”,在設置翻轉(zhuǎn)樣式對話框中可以修改翻轉(zhuǎn)的樣式,比如字體、字色、填充樣式等。應用樣式后,在線框圖中用鼠標移入到線框圖中按鈕左上角的“黑白”小方框上進行效果預覽?,F(xiàn)在演示一
22、下圖片形式的輪換效果和矩形控件的輪換樣式。21高級交互設計菜單菜單控件用于創(chuàng)建簡單的彈出菜單。菜單控件分為垂直菜單和水平菜單,可以通過控件面板中拖拉菜單控件到線框圖面板中創(chuàng)建菜單,默認情況下菜單帶有3個菜單項。雙擊菜單項可以編輯菜單文本,通過工具欄可以對菜單加底色、字體和其它樣式。右鍵單擊選擇編輯菜單,在彈出的菜單邊距編輯器對話框中可設置邊距。還可以增加、刪減下級子菜單的操作。菜單的設計比較簡單,需要注意的是,菜單也可以編輯輪換樣式,不光針對菜單全局,還可以針對某一系列子菜單項設計單獨的輪換樣式?,F(xiàn)在演示一下菜單的創(chuàng)建,以及在一級菜單、二級菜單內(nèi)使用不同的翻轉(zhuǎn)效果。22高級功能邏輯條件什么是邏
23、輯條件:什么是邏輯條件:如果我們需要更強大、更高保真度的原型,就需要條件邏輯。可以在你設計的任何交互中添加條件邏輯,條件可以是基于原型中控件輸入的值,如:復選框的選擇值、文本框中的文本等;另外,條件也可以是基于變量值。要添加條件,首先要在交互面板中為某個事件添加一個場景。在交互事件屬性對話框中的第一步中點擊“添加條件”。23高級功能邏輯條件這時會打開一個條件設置對話框,該對話框用于創(chuàng)建邏輯條件。在條件設置對話框中,可以添加多行條件。點擊“+”按鈕可以增加一行條件,點擊“-”按鈕可以刪除一行條件。如果要求所有條件都需要滿足,則在滿足下拉列表框中選擇“所有”,即各個條件行之間是“And”關系;如果
24、滿足下拉列表框中選擇為“任意”,則只要滿足其中一個條件,即各個條件行之間是“or”關系。在一個條件語句中,有以下6種類型的值可以使用,不同值對應的條件也不同,大家可以慢慢去摸索。在條件設置對話框中點擊確定按鈕,回到交互事件屬性對話框,這時就可以選擇當條件滿足時要執(zhí)行的動作了。邏輯條件還有很多高級應用,主要是將原型做到更高保真度,有興趣的話可以繼續(xù)研究,這里只介紹到基本的應用,后面會結(jié)合其他高級功能一起做范例應用。24高級功能 OnChange事件什么是什么是OnChangeOnChange事件:事件:OnChange事件可用于下拉列表和列表框控件。OnChange事件是在下拉列表或列表框的選項
25、選擇時發(fā)生。這在原型中以下拉框進行導航非常有用,即當選擇下拉列表的某個選項時跳轉(zhuǎn)到相應的頁面上或顯示相應的內(nèi)容。在OnChange事件中的場景上也可以添加條件。在交互事件屬性對話框中的第一步中點擊“添加條件”,然后在條件設置對話框中設置條件。在OnChange事件的場景中,可以用“選擇下屬內(nèi)容的屬性”條件語句,進行下拉菜單或列表框中的值。演示1:使用下拉菜單模擬多個網(wǎng)頁面跳轉(zhuǎn)。演示2:當下拉菜單的選項變化時,在矩形區(qū)域顯示不同的內(nèi)容。25高級功能 OnKeyUp事件什么什么OnKeyUpOnKeyUp事件:事件:OnKeyUp事件可用在輸入框和輸入域控件上,當用戶在控件中進行輸入、松開鍵盤按鍵
26、時發(fā)生,常用于打字時的對鍵盤輸入內(nèi)容的響應。OnKeyUp事件常用于用戶在表單中進行輸入的實時校驗。例如,驗證輸入的字符長度、用戶名是否已經(jīng)存在、驗證碼是否正確等,并在界面上進行動態(tài)信息提示。圖例中對輸入內(nèi)容的字符數(shù)進行校驗,達到18個字符數(shù)時提示正確信息,超出18個字符時提示錯誤信息。下圖是在原型中的此事件的表現(xiàn)(身份證號碼驗證)。現(xiàn)在演示一下根據(jù)輸入框輸入的字符長度顯示提示信息。26高級功能OnFocus和OnLostFocus事件什么是什么是OnFocus OnFocus 和和OnLostFocusOnLostFocus事件:事件:OnFocus和OnLostFocus事件可用于輸入框,
27、輸入域,下拉列表,列表框,復選框和單選按鈕控件上。OnFocus事件是當是當鼠標點擊控件或用鍵盤tab鍵讓控件獲得焦點時發(fā)生;而OnLostFocus事件正好相反,是當控件失去焦點時發(fā)生。使用場合:使用場合:OnFocus 和 OnLostFocus常用于顯示、隱藏與表單中控件相關的動態(tài)信息。OnLostFocus也常用于當控件失去焦點時,觸發(fā)對控件中輸入的數(shù)據(jù)的驗證。其他高級功能:其他高級功能:Axure還有很多高級功能,如變量、OnPageLoad事件、控制模塊中控件、模塊自定義事件,這些高級功能都可以輔助我們把原型做得更高保真。有興趣的話可以繼續(xù)研究。Axure還提供了多人協(xié)助共享工程、
28、版本管理的功能,在做一些大型項目時、尤其是參與人數(shù)較多時我們可以使用這個功能。現(xiàn)在演示一下根據(jù)當光標焦點進入、離開文本輸入框時提示不同的信息。27生成Word文檔設計完線框圖后,就可以輸出Word格式的需求書或功能性規(guī)格文件。默認的規(guī)格書生成器是Word 2007 (.docx文件),需要安裝Word 2007以生成和閱讀.docx文件(也可以設置Word2000作為規(guī)格書生成器,后面會講到)。如果沒有安裝Word 2007,可以安裝Microsoft Office Compatibility Pack兼容包,然后就可以讓Office2000/XP/2003打開、創(chuàng)建、編輯、保存2007文件格
29、式了。如果你未安裝2007或兼容包,它會和Axure一起安裝。在設計線框圖時,如果把需求說明或規(guī)格描述寫在了頁面?zhèn)渥⒒蚩丶⑨屩?,生成?guī)格文件時,Axure會自動匯總這些文字和插圖,按照順序出現(xiàn)在Word文檔中。打開“生成-定義(F6)”可以生成和配置生成的Word文檔。28生成Word文檔注意事項1、頁面:選擇生成哪部份頁面,針對不同部門生成不同的文檔時,可以選擇不同的頁面生成??梢允謩釉O置“章節(jié)標題”和“站點地圖標題”的內(nèi)容,比如把章節(jié)標題的“Pages”換成“頁面”;把站點地圖標題的“Page Tree”換成“頁面樹”,在生成的文檔中,這部分的標題名稱就會變成相應的中文。2、模塊:如果是
30、大型項目,針對模塊(比如頁頭頁尾或一些公用模塊)說明時,可生成此部分。與“頁面” 部分類似。3、注釋:如果針對頁面設定了多個注釋的話,建議選擇“顯示注釋名”,這樣生成的文檔會把注釋類型和具體內(nèi)容都顯示出來,比如設定了“頁面說明”、“完成時間”2個注釋的話,文檔上顯示的就是“頁面說明:xxxxx”、“完成時間:2008-12-19”,如不選擇“顯示注釋名”,在生成的文檔上只顯示“xxxxx。 2008-12-19”4、屏幕截圖:此設定是將原型中的頁面、動態(tài)層抓圖,建議選擇。建議把章節(jié)標題的“User Interface”換成“效果圖”。并選擇“不要縮放屏幕截圖中的腳注”,這樣會把腳注編號顯示得更
31、清楚,對應每個編號對應的功能說明。“為截圖加上邊框”這個選項也可以選擇,并后期美化,讓屏幕截圖更顯眼。5、注解:重要選項,建議把對象表格里章節(jié)標題的“Object Table”換成“功能說明”。把“Footnote”、“Label(功能點的標簽)”、“說明(定義的注釋名稱)”打上勾。腳注列標題的“Footnote”換成“編號”;標簽列標題的“Label”換成“功能點”。如果想在多個表格表現(xiàn)不同的內(nèi)容,可以新增多個表格選擇不同的項目生成,比如,第一個對象表格的章節(jié)標題命名為“功能列表”選擇“Footnote”、“Label”,第二個對象表格的章節(jié)標題命名為“功能描述”選擇“Label”、 “說明
32、”,就會在文檔里生成2個表格,第一個是編號和功能點標簽,第二個表格是功能點標簽和詳細注解??筛鶕?jù)項目的需求進行設定。29生成Word文檔注意事項6、組件:如果頁面中有動態(tài)面板的效果出現(xiàn)時,“包括動態(tài)面板”和“在每個動態(tài)面板狀態(tài)截圖下放顯示動態(tài)面板狀態(tài)注解表”兩個選項一定要選擇,會把動態(tài)面板作為獨立的頁面展示在文檔里。其他選項可根據(jù)具體情況設定,比如,如果在原型內(nèi)有下拉菜單,并且也設定好了下拉菜單的內(nèi)容時,可將“包括下拉列表選項”打勾,這樣文檔內(nèi)會把下拉菜單的內(nèi)容羅列出來,不需要在文檔內(nèi)單獨寫明,并把章節(jié)標題的“Droplists”換成“下拉菜單”7、word模板:可以在生成文檔前設定好word
33、模板(標題、正文的字體、字號、縮進等等),也可以把常用的文檔格式存為默認模板,在生成好的文檔內(nèi)選擇、修改。8、更多生成器和配置:打開“生成-更多生成器和配置(F8)”,可以生成Word 2000和Csv文件(Excel)的文件報告。30小技巧中文輸入法問題:中文輸入法問題:目前Axure對中文的一些輸入法支持得不好,大部分輸入法都沒有辦法在矩形和占位符控件內(nèi)直接輸入中文,搜狗和QQ輸入法都是必須用其他皮膚才沒有問題,用默認皮膚都不行。穿透控件選取下層的控件:穿透控件選取下層的控件:以鼠標左鍵在對象上按住停留1秒鐘以上,放開鼠標左鍵再單擊下面的對象,可以穿透上層對象,選取到位于下層的對象 。單選
34、按鈕群組:單選按鈕群組:您可以一次選取多個按鈕,按下鼠標右鍵,并選擇“編輯單選按鈕-分配單選組”來設定單選按鈕的群組關系。當這些單選按鈕輸出為原型時,就會形成真正的單選用戶接口。比如把單選按鈕1、2、3設為群組,在原型中點擊這三個單選按鈕,會實現(xiàn)真正的3個選項的單選,而不是每個都能選中。建議設為群組關系的單選按鈕再組合成為一個組件,避免混亂。建立、共享模塊庫:建立、共享模塊庫:我們可以把一些常用的控件組合做成模塊,比如多則切換標簽、特殊樣式按鈕等等,在做其他項目時,直接應用,提升我們的工作效率。不同的部門可以根據(jù)自己部門的特性,定期整理匯總。半透明效果:半透明效果:在做一些Ajax效果時會用到半透明的黑色遮罩效果,請去菜單欄的填充顏色工具里面找。條條大路通羅馬
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 廣西西林縣苗族民歌之分析研究
- 公司紙巾采購合同范本
- 會議合同范本1
- 公司買賣車合同范本
- 農(nóng)村個人購房合同范本
- 2025年度智慧城市照明系統(tǒng)建設項目分包合同模板
- 作品授權(quán)合同范本
- 修車廠招工合同范例
- 圓模三角帶行業(yè)深度研究報告
- 勞務合同范本超齡
- 農(nóng)用拖拉機考試題庫
- GJB438C模板-軟件開發(fā)計劃(已按標準公文格式校準)
- 2023年政府采購評審專家考試真題及答案
- 云端數(shù)據(jù)加密與密鑰管理解決方案
- 毒麻藥品試題答案
- 《公路橋涵養(yǎng)護規(guī)范》(5120-2021)【可編輯】
- 醫(yī)療器械專業(yè)知識培訓課件
- 傳統(tǒng)體育養(yǎng)生學
- DB4401∕T 33-2019 電梯托管標準化管理規(guī)范
- 醫(yī)院物業(yè)(保潔)技術服務投標方案
- 松原市人民政府關于印發(fā)松原市招商引資服務公司組建工作實施方案的通知
評論
0/150
提交評論