axure基礎(chǔ)知識交流解析第一頁，共48頁。目錄Axure上手指南3Axure基礎(chǔ)介紹2原型和草圖1Axure實例演示4第二頁，共48頁。什么是原型原型來源于集體無意識““第三頁，共48頁。草圖不是原型從草圖到原型是一個從概念到實現(xiàn)的過程““第四頁，共48頁。設(shè)計過程設(shè)計是一個折中的過程，通過不斷地探索不斷地試錯任何設(shè)計都伴隨著草圖第五頁，共48頁。原型設(shè)計紙上原型是一種原型設(shè)計方法，手繪草圖是一種設(shè)計表現(xiàn)形式。手繪草圖不是低保真原型的一種原型精度是一個多維概念，它包括廣度、深度、表現(xiàn)、感覺、仿真度等多個指標。第六頁，共48頁。動手前建議設(shè)計情境的考慮設(shè)計初期，重要的是體驗過程的真實性，而不是原型、草圖及技術(shù)的真實性，不要被工具限制了你的思維。在熟練使用2B鉛筆前，請不要打開Axure““第七頁，共48頁。Axure上手指南3Axure基礎(chǔ)介紹2原型和草圖1Axure實例演示4目錄第八頁，共48頁。為什么是Axure為什么不是Axure工具只是用來為我們工作的，一個工具用的順手比會用一堆工具更有用。想學(xué)習(xí)難嗎想的話一點都不難，要學(xué)習(xí)還是要多練習(xí)。碼方塊字用中文軟件這么愛國，必須中文漢化版，不過還是建議與國際接軌。從哪兒開始上下載漢化軟件和學(xué)習(xí)所需的材料,現(xiàn)在就開始！第九頁，共48頁。界面介紹第十頁，共48頁。菜單欄新建、打開、保存、視圖設(shè)置、生成html等命令操作，其他所有窗口的操作均能在菜單欄中找到對應(yīng)的選項。工具欄各種快捷操作按鈕，包括部件的背景、邊框設(shè)置，文字字體、字號、顏色設(shè)置、部件的對齊方式，排列方式，層次順序等設(shè)置。①菜單欄和工具欄區(qū)域第十一頁，共48頁。工具欄及右鍵菜單介紹文字編輯組合、順序?qū)R、分布填充、邊框文字分布鎖定控件右鍵菜單表格屬性視圖比例選擇、連線位置大小箭頭形狀線條樣式第十二頁，共48頁。②站點地圖區(qū)域站點地圖是一個頁面導(dǎo)航面板,在這里面可以對所設(shè)計的頁面進行添加、刪除、重命名和組織層級第十三頁，共48頁。③部件區(qū)域所有的部件都是用鼠標單擊選中后拖入到工作區(qū)域，進行交互設(shè)計系統(tǒng)默認提供了“線框圖”和“流程圖”的部件。也可以導(dǎo)入其他已經(jīng)制作好的部件，或自己制作后載入。第十四頁，共48頁。④母版區(qū)域母版的拖放行為三種類型：

任何位置，可以隨意擺放，改動該模板調(diào)用他的模板也做相應(yīng)改變

鎖定母板位置，不可隨意擺放，改動該模板調(diào)用他的模板也做相應(yīng)改變從母板脫離，可以隨意擺放，一個部件而已，修改模板調(diào)用不受改變第十五頁，共48頁。⑤頁面編輯區(qū)域用于編輯頁面的基本內(nèi)容，將部件欄中的部件拖拽到此區(qū)域，組合構(gòu)成網(wǎng)站頁面的基本結(jié)構(gòu)。左側(cè)和上方的標尺單位為像素，用于精確衡量每個模塊的大小以及位置廣闊天地，大有可為““第十六頁，共48頁。⑥頁面屬性區(qū)域頁面注釋：備注頁面的內(nèi)容建議將一些說明直接寫在頁面上頁面交互：設(shè)置頁面載入時觸發(fā)的行為頁面格式：設(shè)置頁面基本樣式頁面層級的觸發(fā)事件：OnPageLoad，在原型載入頁面時觸發(fā)。““第十七頁，共48頁。⑦部件屬性交互區(qū)域標注：編輯部件名稱、備注部件的內(nèi)容交互：設(shè)置部件的交互規(guī)則，例如：超鏈接、頁面跳轉(zhuǎn)等。格式：部件位置、大小尺寸、邊距、對齊方式、填充、邊框等設(shè)置；標簽是讓部件名花有主，方便后續(xù)按照名字找到該部件。““第十八頁，共48頁。⑧動態(tài)面板管理區(qū)域動態(tài)面板管理區(qū)域，主要用于實現(xiàn)動態(tài)面板層級管理、狀態(tài)添加等功能第十九頁，共48頁。部件介紹第二十頁，共48頁。通常用來表示頁面的結(jié)構(gòu)布局，具有多種形狀（如右側(cè)菜單），最常用的有以下三種：矩形：表示頁面的模塊結(jié)構(gòu)；占位符：表示圖片站位；自定義形狀：可以自定義形狀，默認為按鈕，也可與矩形用法一致。矩形部件第二十一頁，共48頁。狀態(tài)一個動態(tài)面板可以用多個狀態(tài)，每個狀態(tài)的都是單獨的一個模版，可以獨立編輯，但是顯示的范圍不能超過動態(tài)面板的大小。同一時間只能展示一個狀態(tài)，并且狀態(tài)時有順序的，動態(tài)面板默認展示排在最前面的一個狀態(tài)，可以通過交互規(guī)則來展示不同的狀態(tài)。每個狀態(tài)都可以獨立的命名，便于后期做交互的效果時進行選擇使用。動態(tài)面板第二十二頁，共48頁?？梢娦燥@示：在屏幕中可以看到當(dāng)前動態(tài)面板的內(nèi)容；隱藏：無法看到動態(tài)面板的內(nèi)容，一般在觸發(fā)了某交互規(guī)則后變?yōu)轱@示，例如：彈出層。隱藏了的動態(tài)面板仍然可以發(fā)生狀態(tài)的變換，在被設(shè)為顯示后，展示其當(dāng)前的狀態(tài)。同時仍然具有層次順序，在其顯示后，圖層順序不發(fā)生改變。瀏覽器固定動態(tài)面板可以相對瀏覽器的位置進行定位，使其在頁面滾動時，保持固定的位置。動態(tài)面板第二十三頁，共48頁。圖片可以通過雙擊已經(jīng)拖拽到頁面編輯區(qū)域的圖片部件來打開需要用的圖片，或直接在屏幕截圖復(fù)制粘貼。圖片可以被調(diào)整大小、裁剪、設(shè)置alt提示等。文本文本框：單獨編輯需要出現(xiàn)文字的內(nèi)容。在圖片、框類組件中也可以直接編輯文本。文本內(nèi)容的字體、字號、顏色、對齊方式等均可以設(shè)置。常用部件第二十四頁，共48頁。選項類部件單選按鈕：可以展示出所有選項，供用戶選擇；復(fù)選框：選擇多個選項內(nèi)容時使用；下拉列表：當(dāng)選項較多時，可以選擇使用下拉列表，更節(jié)省空間，使頁面顯得更簡潔。輸入類部件單行文本框：一般用作少量文本輸入，例如：搜索框、用戶名、密碼等；多行文本框：為大量文字輸入準備，例如：博客文章編輯框、論壇發(fā)帖編輯框。常用部件選取多個按鈕，按下鼠標右鍵，并選擇“編輯單選按鈕->分配單選組”來設(shè)定單選按鈕的群組關(guān)系。就可以實現(xiàn)單選效果了哦第二十五頁，共48頁。按鈕按鈕功能和自定義形狀的按鈕有點重復(fù)，且沒懸浮選中效果，因此用處不大。表格用于展示格式化的信息內(nèi)容，由于Axure中的表格功能較弱，一般可用矩形框來代替實現(xiàn)。分割線用于區(qū)別兩塊級別不同或內(nèi)容不同的信息。箭頭、線條樣式在工具欄調(diào)整常用部件第二十六頁，共48頁。內(nèi)部框架主要用來做嵌套或外部文件調(diào)用，如播放本地文件，功能頁面引用其他頁面等圖片熱區(qū)一個可不見的層，神一般存在的東西。常用部件第二十七頁，共48頁。Axure上手指南3Axure基礎(chǔ)介紹2原型和草圖1Axure實例演示4目錄第二十八頁，共48頁。Axure怎么做原型AxureRP使用主要包括兩個方面：布局：根據(jù)需求戒產(chǎn)品規(guī)劃思路布局頁面，將部件(Widgets)拖進線框圖面板（WireframePane），通過對部件(Widgets)的操作（如移動、改變尺寸、組合、排序、對齊、鎖定等）、編輯風(fēng)格和屬性來完成頁面的布局和排版。交互：在交互面板（InteractionsPane）通過定義線框圖中部件(Widgets)的行為，包括定義簡單的鏈接和復(fù)雜的應(yīng)用行為，所定義的交互都可以在將來生成的原型中迚行操作執(zhí)行。第二十九頁，共48頁。交互的三要素Axure的交互要牢記三要素對部件發(fā)生的“事件、用例、動作”，連貫起來記憶，就是用什么樣的部件、在什么事件下、通過什么用例、完成什么動作最終達到交互的需要第三十頁，共48頁。3種基本的觸發(fā)事件：分別是單擊、鼠標移入、鼠標移出；動態(tài)面板具有多種觸發(fā)事件；頁面加載也可以作為觸發(fā)事件。針對不同的觸發(fā)規(guī)則我們可以設(shè)置交互的動作，當(dāng)觸發(fā)規(guī)則達到時，就會發(fā)生我們設(shè)置好的動作。每個規(guī)則可以觸發(fā)多個動作。交互的觸發(fā)事件第三十一頁，共48頁。交互的用例條件用例：什么事件前提，做什么條件：滿足什么前提下什么事件前提，做什么第三十二頁，共48頁。當(dāng)滿足了交互效果的觸發(fā)條件，就會發(fā)生我們設(shè)置好的動作，這些動作包括：鏈接類動態(tài)面板類部件和變量類雜項類其中鏈接類和動態(tài)面板類最為常用部件和變量為相對比較高級的應(yīng)用交互的動作““第三十三頁，共48頁。鏈接類動作可以在當(dāng)前窗口/新瀏覽器標簽/新窗口打開指定的頁面，這里的頁面可以為當(dāng)前站點地圖內(nèi)的頁面，也可以是指定的URL或文件。在彈出窗口中打開頁面時，可以設(shè)置彈出窗口的大小、位置、是否顯示瀏覽器工具欄等。交互的動作第三十四頁，共48頁。動態(tài)面板類動作動態(tài)面板的動作主要分為4大類：狀態(tài)切換可見性切換（顯示/隱藏）位置移動層次順序切換其中最常用的是狀態(tài)和可見性的切換狀態(tài)切換時可以設(shè)置要切換的面板，切換到的狀態(tài)、以及進入/退出的動畫效果和用時。交互的動作第三十五頁，共48頁。第一個原型-添加部件①選取部件，拖拽到頁面編輯區(qū)②鍵盤輸入部件文字③選取顏色進行填充第三十六頁，共48頁。第一個原型-設(shè)置交互事件①添加快速鏈接事件②選擇鏈接用例③選取用例結(jié)果第三十七頁，共48頁。第一個原型：生成原型第三十八頁，共48頁。原型的生成已經(jīng)生成的html是不可逆的，隨手保存文件是好習(xí)慣?！啊癋8第三十九頁，共48頁。見證奇跡的時刻來了靠，發(fā)生了什么事情？第四十頁，共48頁。原型的觀看internet選項—》彈出窗口—》選擇高級—》允許活動內(nèi)容在我的計算機上的文件中運行”。獵豹的設(shè)置Chrome設(shè)置第四十一頁，共48頁。原型的救命草隨手保存，有備無患才是根本?！啊暗谒氖?，共48頁。Axure上手指南3Axure基礎(chǔ)介紹2原型和草圖1Axure實例演示4目錄第四十三頁，共48頁。二級菜單導(dǎo)航TAB標簽第四十四頁，共48頁。不要太依賴軟件，軟件只是我們的工具；““第四十五頁，共48頁。產(chǎn)品經(jīng)理聚集地(PMLanD)以“求知”“分享”“交友”“互動”為產(chǎn)品經(jīng)理搭建一個交流平臺，并以免費提供產(chǎn)品經(jīng)理常用圖書、工具、Axure教程、各類互聯(lián)網(wǎng)相關(guān)文檔分享與下載為特色；結(jié)合QQ群互動，線下交流等多