第四課 頁面框架制作軟件AXURE5

1、1在日常工作當(dāng)中，一些常規(guī)性、比較簡單的專題我們可以自己搭建。但當(dāng)需要為某一大型活動設(shè)計一個專題時，我們就可能需要向設(shè)計和制作下單，先自行勾畫出一個框架草圖，然后再交與相應(yīng)的同事，進(jìn)行版面設(shè)計和框架構(gòu)建。對于一般的員工來說，大多數(shù)人會在一張紙上隨意勾畫各種框架，又或者使用WORD，通過插入多個表格來制作一個框架，雖然簡單可行，但所表達(dá)的信息其實十分有限，也不容易明白，結(jié)果就是需要花費(fèi)更多的時間在溝通層面上，效果也不盡如人意。23以上是一張從美工手上掃描出來的一張設(shè)計圖。從草圖上看，你能看出什么？如果你是一名美工或者制作，你是否理解該編輯對專題有什么要求？是什么主題？框架尺寸是多少？框架中文字鏈

2、有多少條？有沒有特殊功能需求？如果你是一名美工或者制作，相信你一定會找那位編輯去詳細(xì)詢問版面的設(shè)計排版問題，因為草圖的信息內(nèi)容在少之又少。4實際上，在各個大型網(wǎng)絡(luò)公司內(nèi)部，都會有一個專門做版面設(shè)計的部門，通常我們會叫交互設(shè)計師（UI）、可用性專家（UE），他們的職責(zé)就是專門研究網(wǎng)站版面的互動性、用戶體驗、瀏覽速度、信息查找、SEO優(yōu)化等內(nèi)容。一個網(wǎng)站是否能體驗人性化，很大程度取決于這個部門的實力，而當(dāng)前，包括新浪、網(wǎng)易、搜狐、太平洋電腦網(wǎng)等大型網(wǎng)站都對該部門投入大量資源，每次頁面有任何改動都必須經(jīng)過該部門的同意方可進(jìn)行，而騰訊在進(jìn)行產(chǎn)品經(jīng)理招聘時，首要筆試題目就是UE設(shè)計，可見版面設(shè)計對一個網(wǎng)

3、站來說是何等的重要56產(chǎn)品原型設(shè)計軟件AXUREAxure是一個快速的原型工具，主要是針對負(fù)責(zé)定義需求、定義規(guī)格、設(shè)計功能、設(shè)計界面的專家，包括用戶體驗設(shè)計師（UX）、交互設(shè)計師（UI）、業(yè)務(wù)分析師（BA）、信息架構(gòu)師（IA）、可用性專家（UE）和產(chǎn)品經(jīng)理（PM）。Axure能讓你快速的進(jìn)行原型的設(shè)計，讓相關(guān)人員對你的設(shè)計進(jìn)行體驗和驗證，向用戶進(jìn)行演示、溝通交流以確認(rèn)用戶需求，并能自動生成規(guī)格說明文檔。另外，Axure還能讓團(tuán)隊成員進(jìn)行多人協(xié)同設(shè)計，并對設(shè)計進(jìn)行方案版本控制管理。Axure使原型設(shè)計及和客戶的交流方式發(fā)生了變革：進(jìn)行更加高效的設(shè)計；讓你體驗動態(tài)的原型；更加清晰的交流想法；目前全

4、球有很多大型公司和重要機(jī)構(gòu)在使用Axure，國內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。67Axure的工作環(huán)境78Axure的工作環(huán)境站點地圖面板對所設(shè)計的頁面進(jìn)行添加、刪除、重命名和組織的操作?？梢灾苯油蟿禹撁娓淖兤鋵蛹壗Y(jié)構(gòu)。雙擊頁面即可在主工作區(qū)打開頁面進(jìn)行設(shè)計。組件面板該面板中有線框圖控件和流程圖控件，用這些控件進(jìn)行頁面框架和流程圖的設(shè)計。可直接拖拽、拷貝控件到主工作區(qū)進(jìn)行移動、改變尺寸操作。雙擊、右鍵點擊控件可針對不同的控件進(jìn)行編輯風(fēng)格和屬性的操作。模塊面板模塊是一種可以重復(fù)使用的特殊頁面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織。如圖示可以針對項目做頁面模塊，比如

5、頁頭、頁尾；也可制作所有項目的公用模板，比如切換標(biāo)簽樣式或圖形按鈕。89Axure的工作環(huán)境線框圖面板在線框圖面板中可以進(jìn)行頁面線框圖、流程圖的設(shè)計，線框圖面板也就是Axure的主工作區(qū)。在最上方以標(biāo)簽形式顯示打開的多個頁面?？丶换ッ姘宥x控件的交互，如：設(shè)定鏈接、彈出、動態(tài)面板的顯示和隱藏等。不同控件有不同的內(nèi)建交互事件，如OnClick（鼠標(biāo)點擊）、OnMouseEnter（鼠標(biāo)懸停）等，后面會有詳細(xì)介紹。如果需要特殊說明的功能模塊或有交互行為產(chǎn)生的控件一定要填寫標(biāo)簽，如“個人信息提交按鈕”、“選擇商家等級下拉菜單”等等。910Axure的工作環(huán)境控件注釋面板對控件進(jìn)行注釋、定義和功能進(jìn)

6、行說明。里面的選項可以自定義，比如添加一個“功能說明”的項，并刪除原有的項目。添加注釋的控件在產(chǎn)品原型頁面上會顯示一個黃色便簽的圖標(biāo)，點擊可查看具體注釋。漢化版的Axure不能修改下拉菜單注釋，請避開此選項或者用其他方式表達(dá)?？丶⑨屆姘?自定義字段和視圖點擊注解面板上的“自定義”打開設(shè)定自定義字段和視圖的菜單，可以根據(jù)項目需求設(shè)定注解項目，如功能說明（文本類型）；優(yōu)先級（下拉菜單類型）；完成時間（日期類型）等等。自定義視圖是將設(shè)定的字段分類放到不同組內(nèi)，以方便選擇，比如只有功能說明及優(yōu)先級的字段可以建立功能分組，有功能說明及完成時間的字段可以建立項目控制分組。建立好的分組可以在控件注釋面板頂

7、部的箭頭按鈕點擊選擇。1011Axure的工作環(huán)境頁面注釋和頁面交互面板添加和管理頁面的注釋和交互事件。頁面注釋和頁面交互面板-管理注釋點擊頁面注釋和頁面交互面板頂部的箭頭按鈕，可以打開頁面注釋管理頁面，可以添加不同的頁面注釋字段，如“頁面說明”、“參與部門”等等，添加完成后，可點擊箭頭按鈕為不同的字段添加說明?，F(xiàn)在演示一下Axure的工作環(huán)境。11AXURE的簡單頁面排版AXURE的使用實際上是非常傻瓜化，基本上常用的頁面排版按鈕都齊全，只要你按著你的思路去把不同的組件像堆積木一樣堆砌起來就能簡單地構(gòu)建出一個頁面12勾畫圖片框架1314同理，其他構(gòu)建的使用方法跟圖片組件的使用方法相同，這里不

8、多敘述，這里只教授一些常用的快捷命令排列命令排列命令實際上跟PS里面的排列一樣，是控制各組件之間的位置關(guān)系，如我們要構(gòu)建一個文字鏈列表的話就需要用到這個命令15不斷復(fù)制使用文本框把最下面一行拖動到適當(dāng)位置16點擊左對齊點擊垂直等距分散17組合命令以剛才的文字鏈排布為例，當(dāng)我們把7個文字鏈排列整齊之后，實際上，該排列仍然為7個相同的組件所構(gòu)成，彼此獨立，如果要移動該排列的話就必須框選7個組件然后拖動，既麻煩又容易出錯，因此，我們常用組合命令把獨立的組件整合起來形成一個新的組件。只要點擊 則自動整合為一個新的組件，在拖動時會整體移動。18層疊關(guān)系當(dāng)組件越來越多的時候，就有可能發(fā)生組件互相重疊而導(dǎo)致

9、部分組件被遮蓋現(xiàn)象，這時我們就需要用到層疊按鈕 ，其原理跟PPT里面的一樣，根據(jù)需要把需要顯示的組件置于上層即可1920基本交互設(shè)計控件交互面板中可以定義控件的交互，交互由事件（Events）、場景（Cases）和動作（Actions）組成： 用戶操作界面時就會觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut； 每個事件可以包含多個場景，場景也就是事件觸發(fā)后要滿足的條件； 每個場景可執(zhí)行多個動作，例如：打開鏈接、顯示面板、隱藏面板、移動面板。事件、場景和動作的關(guān)系2021基本交互設(shè)計大多控件只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter 與O

10、nMouseOut，一些特殊的控件可觸發(fā)的事件有些不同： 按鈕控件只有OnClick 單選按鈕和復(fù)選框有OnFocus、OnLostFocus 文本框、文本域、下拉菜單、列表框有OnKeyUp、OnFocus、OnLostFocus 頁面加載或模塊被載入時發(fā)生OnPageLoad目前Axure RP 5支持的事件如下： OnClick：鼠標(biāo)點擊 OnMouseEnter：鼠標(biāo)的指針移動到對象上 OnMouseOut：鼠標(biāo)的指針移動出對象外 OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點） OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài)（失去焦點） OnPageLoad：頁面或模塊載入

11、 OnKeyUp：實時響應(yīng)鍵盤輸入2122基本交互設(shè)計定義鏈接1. 首先，拖拉一個按鈕控件到線框圖中，并選擇這個按鈕；2. 然后，控件交互面板中鼠標(biāo)雙擊“OnClick”這個事件，這時會出現(xiàn)“交互事件屬性”對話窗，在這個對話框中可以選擇要執(zhí)行的動作；3. 在“第二步”中，勾選“在當(dāng)前窗口打開鏈接”動作。4. 在“第三步”中，點擊“Link”，在彈出的“鏈接屬性”對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址。22選擇頁面打開方式點擊連接選項選擇跳轉(zhuǎn)頁面23重點1：組件名字組件的名字十分重要，無論如何，每一個組件都必須有一個名字！首先，任何事件動作當(dāng)中，軟件都是根據(jù)組件名字來去標(biāo)識排列，如果沒有自定

12、義的話，軟件就會自動添加序號，當(dāng)組件多起來的時候，根本不知道序號所代表的是什么組件第二，在生成技術(shù)文檔的時候，組件名字也會標(biāo)識出來，因此要定義好24標(biāo)簽選項就是填寫組件名稱的地方，最好每個組件都有一個獨立的名字，以方便日后維護(hù)2526重點2：高級交互設(shè)計動態(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)面板的狀態(tài)進(jìn)行隱藏、顯示和改變。像其它控件一樣，可以在控件面板中拖拉動態(tài)面板控件，將動態(tài)面板控件添加到線

13、框圖中。在線框圖中，雙擊動態(tài)面板可以打開一個“動態(tài)面板狀態(tài)管理”對話框，在對話框中你可以創(chuàng)建、重命名、重新排序、刪除和編輯動態(tài)面板的狀態(tài)。第一個狀態(tài)是動態(tài)面板的默認(rèn)狀態(tài)。在對話框中選中一個狀態(tài)，然后點擊“編輯狀態(tài)”按鈕，就可以中打開一個狀態(tài)線框圖進(jìn)行狀態(tài)設(shè)計。狀態(tài)設(shè)計和線框圖設(shè)計是一樣的，狀態(tài)線框圖中的藍(lán)色虛線外框表示動態(tài)面板的范圍邊界。2627高級交互設(shè)計動態(tài)面板可以設(shè)置動態(tài)面板在默認(rèn)是隱藏狀態(tài)，比如鼠標(biāo)懸停在某一區(qū)域時，才顯示此區(qū)域的詳細(xì)內(nèi)容，詳細(xì)內(nèi)容可以使用動態(tài)面板編輯，只有鼠標(biāo)懸停在某一控件上時才觸發(fā)顯示，平時為隱藏狀態(tài)。只要選擇動態(tài)面板，右鍵菜單選擇“編輯動態(tài)面板-設(shè)為隱藏”即可。這

14、將會隱藏面板內(nèi)容，動態(tài)面板的遮罩會由藍(lán)色變?yōu)辄S色。交互動作可以引發(fā)動態(tài)面板的交互。在“交互事件屬性”對話框中包含了以下可以引發(fā)動態(tài)面板交互的動作：選擇其中一個動作后就可以和動態(tài)面板進(jìn)行交互，并且可以在對話框下部的“編輯操作描述”選擇一個要鏈接的狀態(tài)。在控件注釋和交互面板中，一定要在“標(biāo)簽”輸入框中對動態(tài)面板進(jìn)行標(biāo)識，以后就可以引用這個動態(tài)面板。如果沒有為動態(tài)面板指定標(biāo)簽名稱，動態(tài)面板會被標(biāo)識為“Unlabeled”。不光動態(tài)面板，所有會產(chǎn)生交互的控件都需要指定“標(biāo)簽”名稱，以方便我們進(jìn)行交互引用。27實例1：當(dāng)鼠標(biāo)停留在一張圖片上時，指定區(qū)域會顯示另一張圖片實例2：鼠標(biāo)停留在不同的標(biāo)簽上時，會

15、切換顯示不同的內(nèi)容實例演示如何使用動態(tài)面板及要注意的問題28實例演示如何使用動態(tài)面板實例演示如何使用動態(tài)面板及要注意的問題把動態(tài)面板拖進(jìn)主面板中必須為每個組件填寫名字名字一一對應(yīng)雙擊該區(qū)域調(diào)出屬性面板一個動態(tài)面板里面可包含許多層，每一個層都是獨立的，都是為實現(xiàn)不同功能而存在雙擊State1層進(jìn)入該層編輯面板29把一張圖片拖進(jìn)該層中返回主頁面，此時動態(tài)面板中就顯示了state中的內(nèi)容添加另一張圖片，當(dāng)鼠標(biāo)停留在此圖片上時，就會顯示左邊的動態(tài)面板內(nèi)容在此圖片上選擇第二個事件“鼠標(biāo)進(jìn)入某區(qū)域”30選擇SHOW PANEL，意思為顯示動態(tài)面板點擊下面的PANEL，選擇動態(tài)面板1，之所以說組件名稱重要，

16、原因就在這里，當(dāng)組件越來越多時，我們只能靠名字去選擇何時的組件把動態(tài)面板設(shè)定為隱藏，因為一開始該內(nèi)容應(yīng)該不顯示31所有被隱藏的動態(tài)面板都顯示為黃色區(qū)域?qū)嶋H頁面顯示當(dāng)中，當(dāng)鼠標(biāo)進(jìn)入右邊圖片的區(qū)域時，左邊的圖片就會顯示出來32區(qū)別：動態(tài)面板Panel跟層State有何區(qū)別動態(tài)面板Panel實際上只是為顯示某些內(nèi)容而劃分出來的區(qū)域，它只是一個舞臺而已，并不具備實際功能，同一個Panel上所有層State的內(nèi)容永遠(yuǎn)只能在該P(yáng)anel所劃定的區(qū)域內(nèi)顯示，不能超出該界限State是具體內(nèi)容的載體，就是舞臺上不同的演員，根據(jù)需要可安排多個演員（State），在不同的事件下使用上不同的演員（State）來演出

17、，因此，一個舞臺（Panel）上可擁有多個演員（State），可獨立演出，也可根據(jù)需要同時演出，但重要的是，每個演員必須要有自己的名字以區(qū)分開來33實例2：鼠標(biāo)停留在不同的標(biāo)簽上時，會切換顯示不同的內(nèi)容當(dāng)鼠標(biāo)停留在不同的標(biāo)簽上時則會自動切換不同的內(nèi)容來顯示34用矩形工具畫出3個框架，并寫上名字為每個組件填寫名字35運(yùn)用動態(tài)面板勾畫出顯示區(qū)域?qū)懮辖M件名字36雙擊動態(tài)面板，進(jìn)入屬性面板添加3個層面板雙擊動態(tài)1，進(jìn)入動態(tài)1的編輯區(qū)域37在動態(tài)1中添加圖片，并返回到HOME頁面在HOME頁面中，已經(jīng)顯示動態(tài)1的內(nèi)容，接下來將繼續(xù)做動態(tài)2和動態(tài)338動態(tài)2面板動態(tài)3面板39單擊標(biāo)簽1，在雙擊右面交互事件

18、中on mouse enter(鼠標(biāo)進(jìn)入?yún)^(qū)域)按鈕，調(diào)出屬性面板在屬性面板中，勾選set panel state to state，意思是在各層之間切換繼續(xù)單擊選項40由于現(xiàn)在只創(chuàng)建了1個動態(tài)面板，因此這里并沒有其他選項，但要注意的是，每個組件均必須填寫名字，方便識別前面創(chuàng)建了3個層，因此這里有3項可選，這里先選擇動態(tài)1，之后的標(biāo)簽2與標(biāo)簽3均在這里選擇動態(tài)2與動態(tài)3與之對應(yīng)41標(biāo)簽2中選擇動態(tài)2標(biāo)簽3中選擇動態(tài)342標(biāo)簽1標(biāo)簽2標(biāo)簽343技術(shù)文檔的生成AXURE之所以被各大公司所采用，除了因為他操作簡便，快速上手之外，更重要的是他能夠生成一份針對任何技術(shù)人員、產(chǎn)品經(jīng)理的技術(shù)文檔，只要關(guān)鍵字填

19、寫得當(dāng)，無論文檔交付何人手中，其條目都是十分清晰，無需花費(fèi)額外時間進(jìn)行交流44一.頁面中的技術(shù)文檔實際上在保存工程文件時，軟件會自動生成兩份文檔，一份是頁面簡單說明文檔，另一份是包含詳細(xì)目錄的技術(shù)文檔，首先介紹一下頁面說明文檔45頁面注釋頁面注釋是為各種相關(guān)人員所編寫的注釋說明，如美工、制作、技術(shù)、產(chǎn)品經(jīng)理等，可以自行添加多個注釋，該注釋會在頁面說明文檔以及技術(shù)說明文檔中顯示，而在技術(shù)說明文檔中，更可以因應(yīng)需要選擇顯示哪些注釋，加強(qiáng)針對性。頁面注釋瀏覽器底部將會顯示注釋內(nèi)容46注釋版面可以為每一個組件生成一個注釋說明，默認(rèn)情況下為做圖內(nèi)容，通常我們會根據(jù)需要自行修改，只需要點擊一下任意一個組件

20、，然后再點擊“自定義”，把原有的項目刪除后再寫上新的項目則可根據(jù)需要寫上新的項目。不過要注意的是，這個注釋面板是為整個文件服務(wù)，是通用的，所用組件的注釋項目都會相同47注釋字段的類型1.文本類型 文本類型可填寫任意內(nèi)容，是最為通用的類型2. 數(shù)字類型 數(shù)字類型只能填寫數(shù)字3.日期類型 只能選擇日期填空4.選擇列表 也是常用類型之一，如果當(dāng)中的內(nèi)容相對固定的話，一般會選用“選擇列表”，如這里的制作部門，其對象只有新聞中心，房源以及商業(yè)三個部門，對象相對固定，因此選用選擇列表較為方便48當(dāng)填寫好注釋項目后，我們只需要為需要添加注釋的組件填寫相應(yīng)的欄目即可，填寫完后保存就能馬上看到效果49有注釋的組

21、件在頁面顯示中右上角會有一個標(biāo)簽顯示，而沒有注釋的組件則沒有這個標(biāo)簽點擊后就會出現(xiàn)相應(yīng)的注釋502.技術(shù)說明文檔技術(shù)說明文檔是AXURE RP的最重要部分，軟件會根據(jù)你所做的設(shè)置對頁面框架分門別類地列出所有規(guī)格和注釋，十分專業(yè)5152生成Word文檔設(shè)計完線框圖后，就可以輸出Word格式的需求書或功能性規(guī)格文件。默認(rèn)的規(guī)格書生成器是Word 2007 (.docx文件)，需要安裝Word 2007以生成和閱讀.docx文件（也可以設(shè)置Word2000作為規(guī)格書生成器，后面會講到）。如果沒有安裝Word 2007，可以安裝Microsoft Office Compatibility Pack兼容

22、包，然后就可以讓Office2000/XP/2003打開、創(chuàng)建、編輯、保存2007文件格式了。如果你未安裝2007或兼容包，它會和Axure一起安裝。在設(shè)計線框圖時，如果把需求說明或規(guī)格描述寫在了頁面?zhèn)渥⒒蚩丶⑨屩?，生成?guī)格文件時，Axure會自動匯總這些文字和插圖，按照順序出現(xiàn)在Word文檔中。打開“生成-定義(F6)”可以生成和配置生成的Word文檔。521、頁面：選擇生成哪部份頁面，針對不同部門生成不同的文檔時，可以選擇不同的頁面生成。可以手動設(shè)置“章節(jié)標(biāo)題”和“站點地圖標(biāo)題”的內(nèi)容，比如把章節(jié)標(biāo)題的“Pages”換成“頁面”；把站點地圖標(biāo)題的“Page Tree”換成“頁面樹”，在生

23、成的文檔中，這部分的標(biāo)題名稱就會變成相應(yīng)的中文。生成Word文檔注意事項532、模塊：如果是大型項目，針對模塊（比如頁頭頁尾或一些公用模塊）說明時，可生成此部分。與“頁面” 部分類似。生成Word文檔注意事項543、注釋：如果針對頁面設(shè)定了多個注釋的話，建議選擇“顯示注釋名”，這樣生成的文檔會把注釋類型和具體內(nèi)容都顯示出來，比如設(shè)定了“頁面說明”、“完成時間”2個注釋的話，文檔上顯示的就是“頁面說明：xxxxx”、“完成時間：2008-12-19”，如不選擇“顯示注釋名”，在生成的文檔上只顯示“xxxxx。 2008-12-19”生成Word文檔注意事項554、屏幕截圖：此設(shè)定是將原型中的頁面

24、、動態(tài)層抓圖，建議選擇。建議把章節(jié)標(biāo)題的“User Interface”換成“效果圖”。并選擇“不要縮放屏幕截圖中的腳注”，這樣會把腳注編號顯示得更清楚，對應(yīng)每個編號對應(yīng)的功能說明?！盀榻貓D加上邊框”這個選項也可以選擇，并后期美化，讓屏幕截圖更顯眼。生成Word文檔注意事項565、注解：重要選項，建議把對象表格里章節(jié)標(biāo)題的“Object Table”換成“功能說明”。把“Footnote”、“Label（功能點的標(biāo)簽）”、“說明（定義的注釋名稱）”打上勾。腳注列標(biāo)題的“Footnote”換成“編號”；標(biāo)簽列標(biāo)題的“Label”換成“功能點”。如果想在多個表格表現(xiàn)不同的內(nèi)容，可以新增多個表格選擇不同的項目生成，比如，第一個對象表格的章節(jié)標(biāo)題命名為“功能列表”選擇“Footnote”、“Label”，第二個對象表格的章節(jié)標(biāo)題命名為“功能描述”選擇“Label”、 “說明”，就會在文檔里生成2個表格，第一個是編號和功能點標(biāo)簽，第二