下载

0下载券

加入VIP
  • 专属下载券
  • 上传内容扩展
  • 资料优先审核
  • 免费资料无限下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 什麼是Axure

什麼是Axure.doc

什麼是Axure

掩饰悲伤的小猫
2017-09-20 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《什麼是Axuredoc》,可适用于综合领域

什麼是AxureAxureRP教學AxureRP教學一認識AxureRP什麼是AxureRPPrototype的效益AxureRP可以幫助哪些人如何學習AxureRP的操作什麼是AxureRPAxure的發音是”Acksure”RP則是”RapidPrototyping”快速原型的縮寫。AxureRPPro是美國AxureSoftwareSolution公司的精心傑作如果你本身是軟體專案經理Web產品經理或網站企劃工作者那麼你不能不知道這套軟體。AxureRP是一個快速繪製Wireframe和Prototyping的工具主要用來定義應用程式的需求與規格以及設計使用者介面與功能使用者包括UserExperienceDesigners、商業分析師、資訊架構師、UsabilityExpert與產品經理等專業人士。在AxureRP中建立Wireframe和Prototype可以幫助您快速且有效地分析需求、驗證設計並傳達給所有參與者以確保在有限的專案時間與資源下開發出有用和可用的應用程式。傳統上製作prototype不但昂貴而且費時讓程式設計師很難在開發過程中搭配合作。商務專家(Businessprofessional)也不斷的在使用簡報與圖示的工具建立prototype和持續對製作過程與結果不滿意之間掙扎著。為了要能有效且快速的建立prototypeAxureRP結合了廣受歡迎的簡報與圖示工具中簡易操作的特性和其他必要的功能。這樣一來商務專家就可以在不需要大量的文件製作下快速的建立prototype而專案成員與專案關係人也可以在不中斷開發的情況下輕鬆完成prototype。AxureRP很容易上手且絕對值回票價的所以當專案成員在第一個專案中使用這個工具時就會發現他們的投資已經得到了顯著的回報。不只省下了在收集與溝通需求上的時間與成本同時也降低了改善需求時的重工。透過prototype可以省下驚人的成本以及預防潛在性的商業損失、機會損失與專案關係人信心喪失等的災難成本。AxureRP教學Prototype的效益“沒有比製作prototype更易取得使用者介面與特殊功能可用性上的一致性了。Prototype不只可確認需求它更可贏得顧客的心。”AlanMDavisandDeanALeffingwellUsingRequirementsManagementtoSpeedDeliv設計Wireframe時重複使用Master來提高規劃的效率。Wireframe窗格:您可以在這個窗格中設計網頁資訊元素編排內容設計介面設計互動特性等等。未來可以將這些設計好的頁面輸出成Prototype或Spec文件。互動設定(Interaction)窗格:互動的範圍很廣從最基本的超連結、popups一直到動態顯示和隱藏widget。您可以在這個窗格中定義Widget的互動。AxureRP教學物件註解(Annotation)窗格:您可以為Widget加上註解來指定功能您可以在這個窗格中增加和自訂Widget的註解。網頁說明及互動(PagesNotesInteractions)窗格:您可以在這個窗格中加入網頁層級的說明與互動效果到設計中。示意圖及註解定義Sitemap以介面物件(Widgets)繪製示意圖(Wireframe)撰寫物件註解(Annotation)撰寫網頁說明(PageNotes)密技(QuickTips)定義Sitemap企劃一個網站或WebAP在動手開始繪製網站頁面的示意圖(Wireframe)或流程圖之前您應該事先思考網站架構並決定資訊內容與層級。當您心中已經有了明確的網站架構接下來就可以利用Sitemap窗格來定義您所設計的網站頁面。Sitemap窗格是用來管理設計中網頁的工具您可以在Sitemap窗格中可以新增、刪除和調整網頁層級。AxureRP教學新增刪除網頁:想要新增網頁的話請點選Sitemap工具列上的【AddChildPage】鈕。在網頁上按滑鼠右鍵然後選擇「RenamePage」或慢慢的在網頁上連續按滑鼠左鍵兩下可編輯網頁名稱。想要刪除網頁的話請點選想要刪除的網頁然後按下Sitemap工具列上的【DeletePage】鈕或是在網頁上按下滑鼠右鍵然後選擇「DeletePage」。調整網頁層級:您可以將網頁從Sitemap中拖曳到目標母網頁中來移動網頁位置您也可以使用Sitemap工具列上的箭頭按鈕來上下移動網頁或改變網頁的階層。開啟網頁:在Sitemap中的任一網頁上連續按滑鼠左鍵兩下網頁會在Wireframe窗格中開啟。以介面物件(Widgets)繪製示意圖(Wireframe)AxureRP教學介面物件(Widget)是用來設計Wireframe的使用者介面元素您可以在Widgets窗格中找到一些常用的WireframeWidget例如:Button、Image和TextPanel。AxureRP各種Widgets呈現效果請參考Widgets效果總覽在Wireframe中新增介面物件(Widget):想在Wireframe中新增物件的話只要從Widgets窗格中將想要新增的物件拖曳(dragdrop)到Wireframe窗格上就可以了。您也可以在Wireframe中利用複製(CtrlC)與貼上(CtrlV)的方式來新增物件。提醒:熟悉PowerPoint操作方式的使用者剛開始可能不太習慣因為AxureRP的操作方式類似Visio選擇圖形的作法是利用拖放(DragDrop)的方式跟PowerPoint是不一樣的。移動物件(Widget)AxureRP教學在Wireframe中新增物件之後您可以拖放Widget來移動的位置拖曳Widget四周的控制點來改變Widget的大小。您也可以一次選取多個物件一次改變所有被選取的物件的位置和大小。除此之外您還可以在選取的Widget上按下滑鼠右鍵使用快顯功能表(contextmenu)來設定Widgets的群組(Grouping)、順序(Order)、對齊(Align)、分散(Distribute)與鎖定(Lock)您也可以利用Object工具列來做這些設定請先利用功能表「View>Toolbars>Object」將Object工具列叫出。編輯物件(Widget)的樣式與屬性編輯Widget的樣式與屬性有下列種方式:a連續按滑鼠左鍵兩下:在Widget上連續按滑鼠左鍵兩下可以讓您變更一些基本的Widget屬性例如:在ImageWidget上連續按滑鼠左鍵兩下可以讓您匯入影像在Droplist或ListBoxWidget上連續按滑鼠左鍵兩下可以讓您編輯選單項目。b工具列:使用工具列可編輯Widget的樣式例如:外框色彩、填滿色彩、字型和字體大小。c快顯功能表(ContextMenu):在Widget上按下滑鼠右鍵會出現快顯功能表您可以透過功能表中的選項來設定Widget的特殊屬性這些選項也會因Widget的類型而有所不同。撰寫物件註解(Annotation)您可以在Wireframe中為任何物件(Widget)加上註解。AxureRP教學新增註解想要幫物件加上註解的話請先選擇Wireframe中的物件如圖箭頭所示被選取的物件呈現綠色框線狀態然後在物件註解窗格(AnnotationsInteractionsPane)的Specification欄位(箭頭)輸入對這個物件的解釋內容您也可以在窗格最上方的「Label」欄位(箭頭)輸入名稱來幫物件命名。自定欄位您可以透過功能表「Wireframe>CustomizeAnnotationFieldsandViews」或是按一下AnnotationsInteractions的標頭來自訂註解欄位。註腳(Footnote)一旦在Widget上加上後Widget右上方會多一個黃色小方塊裡面有一個註腳編號(Footnotenumber)您可以在Widget上按下滑鼠右鍵使用Footnotes次功能表來增加或減少這個編號數字。網頁說明(PageNotes)網頁說明可以用來收集網頁層級的描述或需求。撰寫網頁說明(PageNotes)網頁說明會被保留在Wireframe下方的窗格內。AxureRP教學管理網頁說明類別AxureRP本身預設的網頁說明類別是default您可以透過新增額外的說明類別輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。比如您可以新增TestCase操作說明SD等不同類別的網頁說明。而當您要輸出規格文件時可以個別指定哪些種類的網頁說明要輸出到文件如此一來您就可以輸出專屬於TestCase,操作說明或SD文件了。想要新增編輯網頁說明類別的話請點選功能表「Wireframe>ManagePageNotes」或按一下「PageNotes–Default」右方的向下箭頭並選擇「ManagePageNotes」此時會出現PageNotes對話方塊利用這個對話方塊您可以新增、移除、更名或重新排列說明欄位。想要切換說明類別的話請按一下「PageNotes–Default」右方的向下箭頭來選擇說明類別。密技(QuickTips)密技一超快速挪動畫面:當您設計的網頁畫面變大時為了選取不同位置的物件您必須經常使用垂直與水平的捲軸這會使得選取物件的動作變慢。請試試這招滑鼠游標focus在Wireframe按住鍵盤的空白鍵這麼一來就會切換成Handtool此時滑鼠游標會切換成手狀您可以用來抓著畫面任意滑動而且不會打亂任何物件的位置輕鬆愉快。密技二穿透物件(Widget)選取下層的物件:以滑鼠右鍵慢慢的按一下物件當您放開滑鼠右鍵時可以穿透上層物件選取到位於下層的物件。密技三引用MicrosoftOffice或其他軟體的物件:AxureRP教學您可以利用複製貼上(CoypPaste)的功能將其他應用程式中例如:PowerPoint,Excel,Visio,Photoshop與Illustrator的物件並貼到AxureRP中。一般來說這些貼上的物件會變成Wireframe中的影像物件。反之亦然您也可以複製AxureRP中的物件或畫面貼到其他應用程式。密技四單選群組(收音機按鈕群組RadioButtonGroup):您可以一次選取多個RadioButton按下滑鼠右鍵並選擇「EditRadioButton>AssignRadioGroup」來設定RadioButton的群組關係。如此一來當這些RadioButton輸出到Prototype時就會形成真正的單選使用者介面。AxureRP教學初級互動設計互動(Interaction)定義基本連結動作(Actions)多重條件(MultipleCases)網頁層級的互動:OnPageLoad密技(QuickTips)互動(Interaction)Interactions窗格是用來定義Widget在Wireframe中的行為包含範圍從基本連結到RichInternetApplication(RIA)的複雜行為而這些定義的互動都可以在產生的Prototype中執行。互動是由觸發事件(Event)、條件(Case)與動作(Action)所組成。當使用者對網頁進行某些人機介面的操作時就會對網頁觸發一個事件(Evnt)。目前AxureRP支援的人機介面觸發事件及相對應的觸發事件(Event)名稱如下:以滑鼠點擊OnClick滑鼠的指標移動到物件之上OnMouseEnter滑鼠的指標移動出物件之外OnMouseOut滑鼠的指標進入文字輸入狀態OnFocus滑鼠的指標離開文字輸入狀態OnLostFocus敲鍵盤OnKeyUp瀏覽器載入網頁OnPageLoad大多數的物件只具備最常見的三種觸發事件(Event)OnClick、OnMouseEnter與OnMouseOut。某些特定的Widget的可觸發事件有些不同:Button物件只有OnClick。AxureRP教學RadioButtonCheckBox這種物件則具有OnFocusOnLostFocus觸發事件。TextFieldTextArea這種物件則具備OnKeyUpOnFocusOnLostFocus觸發事件。DroplistListBox這種物件則具備OnChangeOnFocusOnLostFocus觸發事件。網頁載入瀏覽器時則有OnPageLoad觸發事件。(請參考網頁層級的互動:OnPageLoad)您不需要硬背上述的物件及對應的Event在AxureRP的操作介面上您只要點選物件就可以查看Interaction窗格所顯示的對應Event。每一個觸發事件都可以有一或多個條件(Case)例如一個按鈕的OnClick觸發事件可以有兩個條件:其中一個導引至某個網頁另一個則導引至另一個網頁。而每一個條件(Case)又可以執行一或多個動作(Action)舉例來說:「OpenLinkinCurrentWindow」的動作就是一個基本連結。定義基本連結下列步驟說明如何新增一個基本連結到ButtonWidget。加入基本連結最快的方法就是按一下Interactions窗格中的「QuickLink」彈出Sitemap窗格的網頁清單後你可以為選定的物件(Widget)指定連結到哪一個網頁。如果不是透過QuickLink的話那麼請按照下列步驟進行互動的設定。首先再Wireframe中新增一個ButtonWidget並選取它新增條件(AddCase):在Interactions窗格中選擇OnClick並點選「AddCase」(或在OnClick上連續按滑鼠左鍵兩下)以增加一個條件(Case)到按鈕的OnClick觸發事件這時會出現「InteractionCaseProperties」對話窗您可以在此處選擇想要執行的動作。指定動作(AddAction):在InteractionCaseProperties對話窗的StepSelectActions勾選「OpenLinkinCurrentWindow」動作。編輯動作選項:按一下下方的”Link”以選擇動作執行時要開啟的網頁。設定動作(Action)AxureRP教學除了基本連結之外AxureRP還提供了許多的動作這些動作都可以在任何觸發事件的條件中被執行。以下是AxureRP所支援的動作清單:OpenLinkinCurrentWindow:在目前的視窗中開啟一個網頁OpenLinkinPopupWindow:在彈出的視窗中開啟一個網頁OpenLinkinParentWindow:在彈出的視窗中開啟一個網頁到母視窗CloseCurrentWindow:關閉目前的視窗OpenLinkinFrame:在內嵌框架中開啟一個網頁SetPanelstate(s)toState(s):將某個DynamicPanel的State設定為該Panel的顯示狀態ShowPanel(s):顯示(設為visible)一或多個DynamicPanelHidePanel(s):隱藏一或多個DynamicPanelToggleVisibilityforPanel(s):根據目前的顯示狀態來顯示或隱藏DynamicPanelMovePanel(s):移動DynamicPanel可根據絕對座標或相對座標來移動SetVariableandWidgetvalue(s)equaltoValue(s):設定一個或多個變數與Widget的值AxureRP教學OpenLinkinParentFrame:在上層內嵌框架中開啟一個網頁ScrolltoImageMapRegion:捲動畫面到ImageMap所在位置EnableWidget(s):把物件狀態變成可用狀態DisableWidget(s):把物件狀態變成不可用狀態WaitTime(s):等待多少毫秒(ms)後再進行這個動作Other:顯示動作的文字說明例如:”Sendemailtouser”多重條件(MultipleCases)一個觸發事件(Event)可以加入多個條件以進行條件流程或互動。舉例來說您可以在一個按鈕的OnClick觸發事件中加入兩個條件第一個條件可以加入一個說明(“IfYes”)和一個開啟第一頁的動作第二個條件則可加入一個說明(”IfNo”)與一個開啟第二頁的動作。當按紐在Prototype中被按下時會顯示出這兩個條件的說明(”IfYes”與”IfNo”)此時點選其中一個條件的說明就會執行該條件所關連的動作。使用條件說明可以有效溝通條件流程但是如果需要建立一個高親合度的Prototype則必需在條件中定義條件邏輯根據在表單Widget中輸入的值或變數值來執行動作這個主題將會在後面做深入的說明。網頁層級的互動:OnPageLoadAxureRP支援一個網頁層級的觸發事件(Event)OnPageLoad這個觸發事件發生在Prototype載入網頁時。AxureRP教學OnPageLoad互動必須在PageNotes窗格的Interactions窗格中定義加入條件的方式與在Widget中相同。OnPageLoad觸發事件(Event)會在OnPageLoadEvent的介紹中做深入的說明。密技(QuickTips)密技一快速連結(QuickLink)選擇Widget然後按一下Interactions窗格中的「QuickLink」並選擇目標網頁可以快速地在Widget中加入一個基本連結。密技二連結外部網頁在「LinkProperties」對話方塊中指定網頁連結的時候取消勾選「Linktoapageinthisdesign」選項然後在「Hyperlink」欄位指定一個外部網頁的url就可連結外部網頁的連結設定。密技三重複設定類似的互動方式如果你要進行一連串類似的互動設定可以在Interaction窗格上對著某個Case按滑鼠右鍵選擇”Copy”的動作然後到你想加上互動設定的另一個Case以滑鼠右鍵選”Paste”動作然後再修改這個新的互動設定。如此一來就可以更快速的完成物件的互動設定。AxureRP教學使用Master(共用區塊)什麼是Master(共用區塊)套用Master到網頁中應用實例密技(QuickTips)什麼是Master(共用區塊)Master(共用區塊)是一組在設計過程中可以重複使用的Widget一些常用的Master包括了頁首(Header)、頁尾(Footer)與導覽(Navigation)Master可以被放置在網頁或是其他的Master中只要Master做了修改其他使用到這個Master的地方也會跟著修改。我們也可以從其他的軟體程式技術經驗來認識AxureRP的Master。如果您熟悉PowerPoint的母片功能那麼AxureRP的Master功能在”重複使用”的這一點特性上有一點點類似PowerPoint的母片但不完全是。如果您熟悉ASP或PHP程式語言的”Include”語法或DreamWeaver的Template(DWT)那麼AxureRP的Master就是同樣的概念您只要使用Master其他頁面把Master放進來就可以產生共用的特性。若想要提升企劃的速度跟效率讓AxureRP在WebAP規畫專案的效益展現出來那麽Master肯定是您必須要學會並熟練運用的功能。新增、組織與設計MasterMaster要在Masters窗格中管理。想要新增Master的話請按一下Masters窗格工具列上的【AddMaster】鈕或在窗格中按滑鼠右鍵並選擇「AddMaster」。AxureRP教學Masters窗格利用資料夾(Folder)來組織Master然後透過工具列、快顯功能表或是拖拉的方式重新排列Master。在Master上連續按滑鼠左鍵兩下可以開啟Master來進行設計您可以像網頁一樣將Widget拖拉到Wireframe中來設計Master。套用Master到網頁中想要在網頁或其他Master的Wireframe中套用Master只要將Master窗格中的Master拖拉到Wireframe中即可。根據Master的特性Master物件會有淡紅或灰色的遮罩想要移除遮罩的話可以使用主選單中的「Wireframe>MaskMasters」功能。Master預設的行為是Normal您可以在Master上按滑鼠右鍵然後利用「Behavior」子選單將它變更為「PlaceInBackground」或「CustomWidget」。Masters的行為說明如下:Normal:可以被移動與放置在Wireframe上的任何地方對Master的變更會立即反映出來。PlaceinBackground:Master被鎖定在Wireframe的最底層所包含的Widget與Master位在相同的位置通常在製作樣板(Template)時會用到這個功能。CustomWidget:當CustomWidget放到Wireframe上時Widget就會失去與Master的關聯可以像一般Widget一樣被編輯這個功能適合將經常使用到的Widget連同預設定義好的屬性、註釋和互動建立一個樣式庫(UIDesignPatternLibrary)例如:白色文字的藍色按鈕。AxureRP教學應用實例AxureRP能夠快速提高網站企劃的效率除了個人在單一網站專案上應用Master的功能來大量減低重複編輯的工作之外還可以利用Master的CustomWidget自訂物件的功能來建立網站介面元素的介面庫(UIDesignPatternLibrary)。這裡有一篇大陸AxureRP應用於網站介面庫的實際案例利用Axure封裝視覺標準非常值得學習。密技(QuickTips)密技一在建立專案的初期就開始定義Master專案一開始啟動如果可以稍微掌握哪些介面區塊未來將是共用區塊那麼就開始建立Master比如網站的HeaderFooter導覽選單(Navigation)或者廣告版位等等。越早使用越可以節省其他頁面設計的重複工作。至於如何判斷什麼樣的介面區塊適合放在Master,您可以觀察自己會經常把哪些區塊CopyPaste到其他頁面去使用那些經常會被CopyPaste的區塊往往就是網站共用的區塊就適合被設計到Master中。密技二將所有頁面都套用Master(或移除Master)在您想要套用(或移除)的Master名稱上按滑鼠右鍵找到選單”AddtoPages”及”RemoveFromPages”就可以一次把想要套用Master的許多頁面一次加完。反之可以一口氣把不要的共用區塊從許多頁面中快速移除。密技三使用資料夾(Folder)資料夾(Folder)可以幫助您分門別類整理Master尤其是如果您想要建立Masterlibrary的話這個功能絕對讓您事半功倍。您可以在AxureRP的Masters窗格第一個Icon(AddFolder)找到這個功能。密技四建立影像Master在Master中建立常用的影像(例如:icon圖示)有助於重覆使用這些影像您就不需要反覆的複製貼上或不斷的匯入影像檔而且如果您想要更換掉這個影像的話也只需要在一個地方變更就好了。編註:AxureRP的”Master”功能想要以中文精準表達有些困難。在PowerPoint中Master被翻譯成”母片”但是AxureRP如果把Master翻譯成”母片”會失去AxureRP的Master多種功能的涵義。AxureRP教學AxureRP的Master可以是整頁的母片這是一種型態。AxureRP的Master也可以是Header區塊或Footer區塊使用在很多頁面一起共用的時候這是第二種型態。AxureRP的Master還可以當作獨立的Widget來使用用來建立樣式庫Library。因此我們暫時選擇把Master翻譯成”共用區塊”同時也直接將英文”Master”放在教學文章之中如果您認為有更合適的中文翻譯方式歡迎提供建議給我們。謝謝~AxureRP教學輸出網站應用程式原型什麼是網站應用程式原型(HTMLPrototype)輸出網站原型格式設定展示與操作網站原型分享原型檔案給其他人密技(QuickTips)什麼是網站應用程式原型(HTMLPrototype)在Axure中完成有註解的Wireframe和Interaction之後您可以產生可互動且支援多種瀏覽器的WebAP原型(HTMLPrototype)。(注:AP是Application的縮寫通常指的是應用程式)AxureRP網站原型是由HTML和Javascript組成可以在IE(或以上的版本)、Mozilla或Firefox中瀏覽。換句話說觀看網站原型的人僅需要一般瀏覽器不需要安裝AxureRP。如下圖範例所示。解除IE中的ActiveX警告訊息:使用IE開啟在自己電腦裡頭的HTMLPrototype檔案時瀏覽器中可能會出現ActiveX警告訊息想要暫時解除IE中的警告訊息請點選AxureRP教學IE瀏覽器出現的ActiveX警示訊息接著選擇”允許被封鎖的內容”這樣子就可以在IE瀏覽器上看到自己電腦裡頭的HTMLPrototype了。想要永久解除ActiveX警告訊息請參考密技一。輸出網站原型格式設定想要輸出原型或設定(ConfigureHMTLPrototype)輸出格式的話請按下AxureRP軟體上方主功能選單「Generate」功能表選擇「Prototype(F)」。或是按下工具列中的「Prototype」鈕系統會開啟「ConfigureHTMLPrototype」對話方塊並顯示預設的原型輸出格式設定您可透過這個對話方塊來設定輸出原型的格式。格式設定中的選項可分成下面幾區:General:在「DestinationFolder」處輸入網站原型的HTML檔案的存放位置因為AxureRP的網站原型包含許多檔案最好指定一個windows檔案系統內的檔案夾來存放。Notes(網頁說明):選擇和排序想要顯示在網站原型中的網頁層級說明。Annotations(物件註解):選擇和排序想要顯示在網站原型中的註解欄位。Interactions(互動):指定互動的行為例如:指定是否需要預設顯示條件描述(case)或是只在多個條件存在的情形才顯示。Distribution:選擇是否產生CHM檔。Advanced:選擇是否將TextPanel轉成影像這是一個舊版本的功能現在很少有需要這樣處理。AxureRP教學初次輸出原型您可以直接使用預設的設定值除了指定輸出的檔案夾之外不用費心去調整。或者當您完成網站原型輸出格式的設定只要按一下【Generate】鈕就可將這個Prototype輸出了。如果您越來越熟練您可以兩個動作就完成網站原型的輸出了第一個動作是按下【F】接著再按下【Generate】。展示與操作網站原型AxureRP輸出的網站原型(HTMLPrototype)總共可區分成三個框架。左側:Sitemap框架您可以按Sitemap中的網頁列表循序展示網站原型中的任何一個網頁。如果您不需要顯示左側的Sitemap那麼就應該底部:網頁說明(PageNotes)框架這個框架顯示該網頁的文字說明這些文字說明來自於您寫在網頁註解(PageNotes)的文字。中間:主框架主框架包含了Wireframe和流程圖Wireframe是可以互動的舉例來說按一下設定有網頁連結的按鈕那麼就會連結到所設定的網頁。您也可以按一下加有附註的Widget旁邊的黃色便利貼小Icon圖示來檢視註解。AxureRP教學分享原型檔案給其他人因為AxureRP的Prototype是標準的HTML、Javascript和影像檔所以您的同事和客戶不需要安裝AxureRP或任何播放器就可以直接檢視Prototype。發佈Prototype的方式有很多種以下是三種不同的分享方式的介紹。a放到網站伺服器第一種方式是發佈網站原型的HTMLPrototype到WebServer上您只要將網址給客戶或工作夥伴其他人他們在他們的瀏覽器上瀏覽Prototype。b壓縮成Zip檔第二種方式是將包含Prototype檔案的檔案夾壓縮成Zip檔然後將Zip檔寄給相關的人。收到檔案的人將Zip檔解壓縮後便可以直接在自己的電腦瀏覽HTMLPrototype通常是開啟indexhtml或從XXXStarthtml檔開始瀏覽(XXX指的是該RPProject的名稱)。cCHM檔第三種方式是產生包含Prototype的CHM檔就像zip檔一樣這種方式讓您可以檔案的方式發佈Prototype而且不需要安裝任何軟體來檢視。CHM是MicrosoftHTMLHelp檔的格式所以大多數的Windows電腦已經安裝了瀏覽器使用者只要在檔案上連續按兩下滑鼠左鍵就可以檢視它。想要將Prototype輸出成CHM檔的話請在「ConfigureHTMLPrototype」對話方塊中進入「Distribute」區勾選「CreateHTMLHelpFile(chm)」選項。如果您目前已經安裝的Microsoft系統中沒有HTMLHelpWorkshop的話就必須安裝它才能產生CHM檔您可從這裡免費下載一旦完成安裝以後所安裝的資料夾中將會出現一個hhcexe的檔案按一下「Locatehhcexe」來告訴AxureRP這個程式在電腦中的位置。一旦Prototype和chm檔產生之後您將會在存放Prototype的資料夾中找到一個chm檔您現在就可以將chm檔發佈出去讓接收者在HTMLHelp檢視器中檢視。密技(QuickTips)密技一只更新現在開啟的頁面到網站原型:當您設計網站原型的技巧越純熟網站專案會越來越大導致輸出網站原型的時間會隨著專案而變大。萬一您只是調整其中的某一頁卻得等待整個網站重新全部輸出那就太浪費時間了。AxureRP教學想要重新產生某一頁網頁只要在AxureRP打開該頁Wireframe接著按下AxureRP主功能選單「Generate」功能表選擇「RegenerateCurrentPagetoPrototype(CTRLF)」(如下圖)。當您選擇這個動作或者直接按下熱鍵CTRLFAxureRP不會產生任何對話視窗您只會感覺到滑鼠指標閃了一下此時再回到網站原型(HTMLPrototype)上去reload這一頁或click這一頁網頁名稱就會看到已經更新的頁面了。密技二關閉IE中的ActiveX警告訊息:使用IE瀏覽器在自己的電腦上開啟存放於檔案夾中的HTMLPrototype時瀏覽器中可能會出現ActiveX警告訊息想要解除IE中的警告訊息請點選「工具」功能表中的「網際網路選項」切換到「進階」標籤頁中找到「安全性」的設定中勾選第二項「允許主動式內容在我的電腦上的檔案中執行*」選項即可(如圖)。密技三嵌入外部Flash檔案InlineFrameInlineFrameWidget可用來加入AxureRP目前不支援的內容例如:Flash物件只要在InlineFrameWidget上連續滑鼠左鍵兩下就可以讓您指定想要載入到框架的網頁如果您要建立一個包含Flash物件的HTML檔您可以將檔案嵌入到InlineFrame中這樣他就可以在Prototype中呈現了。密技四快速繪製網站架構圖:以”GenerateFlowDiagram”的功能請看快速繪製網站架構圖(Sitemap)教學影片。AxureRP教學輸出規格文件(Word)什麼是規格文件(Specification)輸出規格文件格式設定密技(QuickTips)什麼是規格文件(Specification)在AxureRP中設計完Wireframe之後我們可以輸出MicrosoftWord格式的需求書或功能性規格文件(Specification)。輸出Word格式規格文件之前您的電腦必須事先安裝好MicrosoftWord或更新的版本。如果您在設計Wireframe的同時也把需求說明或規格敘述寫在網頁說明(PageNotes)或Widget的物件註解(Annotations)輸出成規格文件時AxureRP會自動幫您匯整文字資料以及畫面並且按照網頁順序整理在Word檔案裡頭。(如下圖)AxureRP教學輸出規格文件格式設定想要輸出規格文件或設定(ConfigureSpecification)輸出格式的話請按下AxureRP軟體上方主功能選單「Generate」功能表選擇「Specification(F)」。或是按下工具列中的「Specification」鈕系統會開啟「ConfigureWordSpecification」或「ConfigureWordSpecification」對話方塊並顯示預設的規格文件輸出格式您可透過這個對話方塊來設定其他格式。如同輸出網站原型(HTMLPrototype)一樣需求書或規格書也可依不同的用途進行設定比如設定一種格式專門給客戶確認需求及規格設定另一種格式專門產生測試計劃與測試步驟再另外設定一種格式用來介紹操作步驟。如果您不另外指定輸出格式可以直接按下【Generate】來輸出規格書您唯一須留意的是輸出文件名稱(DestinationFile)必須是一個檔案名稱比如Untitleddocx(Word格式)或Untitleddoc(Word格式)不能只給目錄名稱。可以被調整設定的項目包括Pages(網頁)相關Masters(共用區塊)相關Notes(網頁說明)相關Screenshot(畫面)相關Annotations(物件註解)相關Widgets(物件)相關WordTemplate(Word文件樣板)相關。AxureRP教學套用Word文件樣板可以客製化您輸出的規格文件讓文件的呈現更專業您也可以事先設定好前言以及附錄文件比如封面附錄或簽名頁。您可以修改Word範本來配置規格中的文字樣式變更文件的排版或加入頁首或頁尾。一但您設定好規格文件格式請按一下【Generate】鈕來產生這份規格。密技(QuickTips)密技一只要把必要的項目輸出到規格文件中規格文件輸出時如果選擇輸出的項目太細很有可能會產出一份好幾百頁的Word檔案而難以閱讀。因此輸出之前最好透過格式的設定將不需要的項目取消勾選保留有意義的部份。密技二預設規格文件標題改成中文將AxureRP預設格式的文件標題改成中文比如將Pages格式設定的SectionHeader名稱“Pages”改成“網站企劃說明”把“PageTree”改成“網頁列表”或者把Screenshot格式設定的SectionHeader名稱”UserInterface”改成“網頁畫面”。如此一來輸出成規格文件時會更方便閱讀這些段落標題。AxureRP教學四架構圖流程圖四架構圖流程圖click繪製架構圖sitemap》教學影片快速繪製網站架構圖(Sitemap)分秒流程圖連接線》教學影片分秒click繪製架構圖sitemap自動繪製架構圖觀看教學影片自動繪製架構圖每一個網站的規劃少不了要繪製樹狀的網站架構(sitemapdiagram)架構圖能夠以視覺化的方式呈現網頁階層。您在AxureRP的sitemap窗格定義好的網站架構只要oneclick就可以轉成樹狀架構圖。建議您先開啟一個空白頁面命名為”Sitemap”或者其他您覺得有意義的名稱。接下來在sitemap窗格中的最上層頁面(root或home)按滑鼠右鍵選擇「GenerateFlowDiagram」此時會出現「GenerateFlowDiagram」對話方塊尋問您想要產生「Standard」或是「RightHanging」的選項。AxureRP教學接下來AxureRP就會把您所選擇的sitemap架構繪製成樹狀架構在頁面上而且樹狀架構圖中的網頁節點會自動連結到對應網頁。AxureRP輸出的樹狀架構圖的字體節點顏色等可以透過上方的工具列自行調整字體顏色區塊填色線條粗細顏色等等。如果樹狀架構圖過於龐大您也可以從次單元首頁按滑鼠右鍵選擇「GenerateFlowDiagram」選擇輸出選項「RightHanging」來逐步依次輸出每個樹枝的結構再組合成完整的樹狀架構圖。AxureRP教學流程圖連接線流程圖FlowWidget建立流程圖關聯網頁輸出流程圖密技(QuickTips)流程圖流程圖可以用來表達各式各樣的流程包括:UseCase、商業流程與網頁流程在AxureRP中流程圖常被用來提供一個高階視角(highlevelview)來看網頁設計可以達成的工作。在Sitemap窗格中的網頁標示圖案預設為網頁形狀的ICON您可以在Sitemap中的網頁上按滑鼠右鍵並選擇「DiagramType>Flow」將網頁標示圖案設定為流程圖ICON。不過這不是建立流程圖所必要的動作。這個動作與繪製流程圖沒有關聯性只是用來辨識這個頁面放置流程圖或線框圖。FlowWidget按下Widgets窗格工具列上的「Flow」可以找到各種流程Widget。AxureRP教學在Widgets窗格中有各種形狀的Widget可以用來代表不同的流程步驟如果您找不到適合的形狀也可以使用ImageWidget來代替。依慣例在流程圖中不同的形狀的圖形分別代表著特定的意義但是AxureRP並沒有限制這些圖形的使用一般來說只要您的客戶看的懂就是最好的規則。建立流程圖就像WireframeWidget一樣FlowWidget也可以直接從Widgets窗格中拖拉到Wireframe窗格然後透過工具列或快顯功能表(ContextMenu)來編輯樣式與屬性如果要改變流程形狀的話可以按滑鼠右鍵並選擇「EditFlowShape」子選單中的項目。AxureRP教學連接線FlowWidget和WireframeWidget最主要的不同就是FlowWidget具有可以附加連接線的連接點。想要加上連接線的話請先按下工具列上的【ConnectorMode(F)】鈕將Wireframes窗格改變為ConnectorMode若是要將Wireframe窗格切換回PointerMode的話則請按下【PointerMode(F)】鈕。切換到ConnectorMode後在Wireframe窗格中按一下滑鼠左鍵並拖曳就可以畫出一條連接線。若是要連接兩個FlowWidget的請在其中一個Widget上的連接點按住滑鼠左鍵拖拉連接線到另一個Widget上的連接點後放開滑鼠就可以新增一條連接線您也可以利用拖曳連接點的方式將已經建立好的連接線附加到另一個FlowWidget的連接點上。連接線也可以套用線條末端(例如:箭頭)與線條樣式(例如:虛線)只要先選好您要設定的連接線再使用工具列上的LinePattern與LineEnds按鈕即可。AxureRP教學關聯網頁FlowWidget可以關聯到任意指定的一個參考網頁一旦指定了關聯網頁FlowWidget上會顯示這個網頁的名稱而在Prototype中這個FlowWidget與網頁間會自動建立Hyperlink連結。從Sitemap窗格中將任一網頁拖拉到Wireframe窗格中也會建立一個以這個網頁當作關聯網頁的FlowWidget。FlowWidget上的關聯網頁可以透過在Widget上按滑鼠右鍵並選擇「EditFlowShape>EditReferencePage」來編輯或清除。輸出流程圖在AuxreRP繪製的流程圖可以輸出成圖檔或網頁。輸出成圖檔:選擇「File>ExporttoImage」就可以把單獨這頁流程圖轉成圖檔。如果您想把流程圖放到Powerpoint或Word文件可以直接全選整個AxureRP流程圖以CoypPaste的操作方式貼到Powerpoint或Word文件中。輸出成Prototype:是的流程圖可以直接在瀏覽器上觀看。輸出流程圖到HtmlPrototype方式跟輸出其他網頁到Prototype相同請按下AxureRP軟體上方主功能選單「Generate」功能表選擇「Prototype(F)」即可。AxureRP教學密技(QuickTips)密技一固定連接線取消自動繞圖:在預設的情況下連接線會自動繞過中間阻礙的Widget來連接兩個連接點為了避免連接線或Widget移動時連接線不斷的自動改變路徑您可以按滑鼠右鍵並選擇「EditConnector>DoNotAutoreflowConnector」來停止這個功能。AxureRP教學五中級互動設計五中級互動設計學習控制DynamicPanel》教學影片開關DynamicPanel互動設計秒》教學影片分秒OnMouseEnter、OnMouseOut和Rollover效果Menu學習控制DynamicPanelAxureRP實現更豐富的互動設計認識DynamicPanelWidget編輯DynamicPanel的狀態預設DynamicPanel的顯示隱藏示範以Click來開關DynamicPanel教學影片》教學影片開關DynamicPanel互動設計秒》教學影片分秒AxureRP實現更豐富的互動設計網站開發技術越來越豐富了這是我們正在經歷的過程也是未來的趨勢。不管是AJAX或JavaScript甚至是Flash、Silverlight、JavaFX這些都被歸類為RIA(RichInternetApplication)的技術能夠讓網站介面更豐富展現更優質的人機互動。同時這個趨勢也挑戰了傳統的文書軟體或繪圖軟體當這些軟體受限於僅能表現單一畫面與單一狀態的情況下您很難把心目中最友善的互動方式表達清楚並設計出來。AxureRP與其他的wireframe軟體最大的差異在於能夠進行互動設計(InteractionDesign)且可以立即將結果呈現於prototype上而不是只有文字敘述。更棒的一點是學習AxureRP的互動設計您並不需要學習HTML或JavaScript語法只要透過一些設定與操作便可以完成多樣而創新的互動介面設計。在AxureRP設計出來的Prototype中最簡單的互動設計是網頁連結透過滑鼠的click來串起使用者與網站的互動流程。然而真正發揮AxureRP在互動設計上的驚人特AxureRP教學色並不是只有連結這麼簡單的互動您可以藉由學習DynamicPanel(動態面板)物件的操作與控制來做到更豐富更友善的互動介面設計。認識DynamicPanelWidgetDynamicPanel(動態面板)這種物件是專門用在設計Prototype動態功能的WidgetDynamicPanel可以包含一或多個狀態(State)每個狀態本身是一個小頁面藉由控制狀態(State)的順序或隱藏顯示DynamicPanel來達成互動介面的整個表現。就像其他Widget一樣DynamicPanel可以用拖放的方式從Wireframe窗格加入到畫布中。學習DynamicPanel的互動設計之前有個重要的概念必須先認識:()DynamicPanel(動態面板):一種透明的物件本身可以包含很多個狀態(State)而每個狀態都是一個小網頁。被放置在最上層的狀態就是該面板的長相。()State(狀態):每個狀態都是一個小網頁而這個小網頁的邊界與大小與所屬的DynamicPanel大小相同。不同的State可以重疊在同一個DynamicPanel裡頭唯有被控制放在最上層的State才會呈現於Prototype的畫面中。以AxureRP所設計出來的多樣互動介面大多藉由各種觸發事件(Event)來控制DynamicPanel顯示或消失或控制哪個State在最上層來模擬出實際的互動介面。AxureRP教學編輯DynamicPanel的State(狀態)已經擺放到畫布中的DynamicPanel直接在上頭快速點滑鼠左鍵兩下會開啟「DynamicPanelStateManager」對話方塊。在這個對話視窗中您可以新增State、更改State名稱、調整State排序、移除State與編輯State。在「DynamicPanelStateManager」對話方塊中選擇一個PanelState然後按下【EditState】鈕會開啟這個PanelState的Wireframe以供設計。或者您可以選擇【EditAllStates】鈕一口氣把所有的狀態頁面通通開啟。開啟後您就可以像設計其他Wireframe一樣的設計狀態頁面(State)每個狀態頁面的側邊藍色虛線外框就表示DynamicPanel的邊界。預設DynamicPanel的顯示隱藏AxureRP教學DynamicPanel可以預設為隱藏(Hidden)作法是在DynamicPanel物件上按滑鼠右鍵並選擇「EditDynamicPanel>SetHidden」這樣就可以隱藏Panel的內容而且DynamicPanel的遮罩也會從藍色變成黃色。已經預設隱藏的DynamicPanel可以選擇「EditDynamicPanel>SetVisible」來顯示DynamicPanel。DynamicPanel可以藉由接下來所介紹的互動模式動態控制在Prototype中的顯示或隱藏。AxureRP提供互動設計的實現方式都在「InteractionCaseProperties」對話方塊中設定(請參考初級互動設計)。其中有種互動方式(Action)是專門用來控制DynamicPanel的分別是:SetPanelstate(s)toState(s):將某個DynamicPanel的State設定為該Panel的顯示狀態ShowPanel(s):顯示(設為visible)一或多個DynamicPanelHidePanel(s):隱藏一或多個DynamicPanelToggleVisibilityforPanel(s):根據目前的顯示狀態來顯示或隱藏DynamicPanelMovePanel(s):移動DynamicPanel可根據絕對座標或相對座標來移動示範以Click來開關DynamicPanel》下載這個示範rp檔(MyFirstPanelzip,k)》教學影片開關DynamicPanel互動設計秒要了解DynamicPanel的互動控制我們先來模擬一個Click的效果當滑鼠Click頁面上的矩形時會出現一個訊息視窗再Click一次時又把訊息視窗隱藏起來。換句話說我們將藉由滑鼠Click來控制DynamicPanel的顯示與隱藏。首先我們先在畫布上放一個矩形物件。接下來放置一個DynamicPanel並且編輯這個Panel唯一的預設狀態(State)。AxureRP教學在State(狀態)的wireframe上隨意加入一些文字以供辨認。AxureRP教學再把DynamicPanel的顯示狀態設定為隱藏(Hidden)。然後在矩形物件上增加一個OnClick的InteractionCase。先選擇矩形物件接著click兩下“OnClick”彈出「InteractionCaseProperties」互動設計的對話方塊。分別針對這個對話方塊中的Step做互動設計的設定:step:Description預設為Case不用變更。step:SelectActions勾選ToggleVisibilityforPanel(s)此時在step會出現ToggleVisibilityforPanel。如下圖:AxureRP教學接下來…step:EdittheActiondescription(clickanunderlinedvaluetoedit)這句話的意思是去點選有加底線的項目進一步編輯。於是我們接著clickPanel這個單字然後會看到彈出一個「SelectPanels」對話方塊裡頭只有一個叫做”MyFirstPanel”的項目把它勾選起來。此時在step會出現ToggleVisibilityforMyFirstPanel。(如下圖)AxureRP教學如果您曾經給DynamicPanel有意義的名稱就可以在SelectPanel時看到被您命名過的Panel。選擇DynamicPanel時DynamicPanel會以AnnotationsInteractions窗格中所給予的Label做為識別如果沒有指定的話DynamicPanel會預設標示為”Unlabeled”。接下來就可以輸出Prototype了按下F或選擇「Generate>Prototype」將剛剛設計過的簡易互動介面輸出到瀏覽器上進一步檢視當滑鼠click時您所設計的那個DynamicPanel是否會消失出現(如下圖)

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/46

VIP

意见
反馈

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利