Axure快速原型設(shè)計

1、AXURE李巍 中睿信息技術(shù)有限公司以用戶為中心的快速原型設(shè)計用戶體驗以用戶為中心去研發(fā)產(chǎn)品User Experience Optimization李巍 用戶看到的20%卻是由那些看不到的80%決定的20%很不幸的消息，其實用戶壓根不關(guān)心我們的東西用戶或者客戶只關(guān)注一個產(chǎn)品的良好用戶體驗的作用用戶體驗是什么？它在項目中的意義？沒有它不行么？為什么需要用戶體驗設(shè)計用戶體驗帶來的很實際的部分o 提高項目研發(fā)成功率o 降低培訓成本o 降低團隊成本、后期維護的工作量o 提高產(chǎn)品的傳播速度o 帶來用戶對產(chǎn)品的良好口碑o 減緩壓力（個人意見）用戶體驗定義o 用戶體驗（User Experience，簡稱U

2、E）是一種純主觀的在用戶使用產(chǎn)品過程中建立起來的感受。o 是用戶對產(chǎn)品的唯一評價o 但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠被設(shè)計的。不要讓用戶思考，并且提供改錯的機制用戶體驗可用性第一定律不要期待用戶會研究你的產(chǎn)品，應該讓他們速度實現(xiàn)自己的目標用戶體驗可用性第二定律點擊多少次都沒關(guān)系，只要每次點擊都是無須思考、明確無誤的選擇。用戶體驗可用性第三定律實際項目中的UEo 以用戶為中心o 用戶體驗的考慮從開發(fā)的最早期就開始進入整個流程，并貫穿始終o 應用程序的用戶體驗主要是來自用戶和人機界面的交互過程o UE的設(shè)計不是盲目的，是考慮成本、技術(shù)等等條件的平衡UE在實際項目的平衡高保

3、真原型的介紹o 根據(jù)功能，為了指導開發(fā)而畫的草圖o 高保真原型也叫做交互式原型n 實現(xiàn)了功能頁面流程跳轉(zhuǎn)n 做到用戶的響應都會有反饋n 和最后開發(fā)出來的產(chǎn)品基本吻合高保真原型的對項目的意義o 團隊了解需求的最佳方式o 程序員開發(fā)的最好參考o 項目開發(fā)和維護中所需標準的最好表現(xiàn)形式o 驗收的依據(jù)高保真原型的制作工具o 紙和筆，白板和油性筆o Axureo UIDesignero PPT什么是Axure？ Axure的完整英文名是Axure RP Pro，可以快速創(chuàng)建應用軟件或Web網(wǎng)站線框圖、原型、規(guī)格說明書等的。Axure會使你以往的工作方式發(fā)生變革：進行更加高效的設(shè)計；體驗到動態(tài)的原型；清晰

4、有效的交流想法；Axure工作環(huán)境介紹主菜單和工具欄站點地圖面板控件面板模塊面板線框圖工作區(qū)頁面注釋和交互控件交互面板控件注釋面板站點地圖面板“添加子頁面”按鈕可以添加一個頁面；“上移”、“下移”、“降級”、 “升級” 按鈕，可以組織頁面的層次和順序;“刪除”按鈕或點擊鼠標右鍵的 “刪除”選項可以刪除一個頁面；“設(shè)計頁面”按鈕，打開該頁面在線框圖區(qū)域中進行線框圖設(shè)計;在頁面上點選右鍵菜單中也可以進行同樣的操作。部件面板(控件面板)控件是用于設(shè)計線框圖的用戶界面元素。在控件面板中包含有常用的控件庫，如按鈕、圖片、文本框等。添加控件 從控件面板中拖動一個控件到線框圖區(qū)域中，就可以添加一個控件?？丶?/p>

5、可以從一個線框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個線框圖中。 操作控件 添加控件后，可在線框圖中選擇該控件進行鼠標拖曳移動該控件和改變控件大小，還可以一次選擇多個控件進行移動和改變大小。另外，還可以組合、排序、對齊、平均間距（Distribute）和鎖定控件。 編輯控件風格和屬性 （有多種方法）l鼠標雙擊：鼠標雙擊某個控件，可以對控件的最常用的屬性進行編輯。例如，雙擊一個圖片控件可以導入一張圖片；雙擊一個下拉列表或列表框控件可以編輯列表項。 l 工具欄：點擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。l 右鍵菜單： 通過在控件上點擊右鍵菜單，編輯控件的一些特定

6、屬性，不同的控件這些屬性也各不相同。查看和搜索控件 控件面板工具欄中，線框圖下拉菜單，可以查看所有控件庫，或只看默認線框圖或流程圖控件庫，或只看已經(jīng)被加載的控件庫。另外，你還可以加載已有控件庫、創(chuàng)建新控件庫、編輯當前控件庫、或更新控件庫?？丶⑨屆姘屙撁孀⑨屆姘鍨榭丶砑幼⑨?，以說明控件的功能 對頁面進行詳細描述和說明Axure基本交互設(shè)計 控件的交互 示范定義一個鏈接 定義行為 定義多個場景（場景說明） 頁面事件: OnPageLoad 控件的交互在控件交互面板中可以定義的控件交互由 事件（Events）、場景（ Cases）和行為（Actions） 組成l用戶操作界面時就會觸發(fā)事件， 如鼠

7、標的OnClick、OnMouseEnter和OnMouseOut；l每個事件可以包含一個或多個場景，場景就是事件觸發(fā)后出現(xiàn)的一種情況，如點擊一個按鈕后可以出現(xiàn)兩種場景：一種是進入頁面1；另一種是進入頁面2；l每個場景中可執(zhí)行多個行為，例如：打開鏈接、顯示面板、隱藏面板、移動面板。示范定義一個鏈接 按鈕控件OnClick事件用例編輯器選擇要鏈接的頁面或其它網(wǎng)頁地址定義行為目前 Axure RP Pro6所支持的行為：鏈接在當前窗口打開一個頁面在 新窗口/新標簽頁 中打開鏈接在彈出的窗口中打開一個頁面 在父窗口中打開一個頁面 關(guān)閉當前窗口 在內(nèi)部框架中打開鏈接 在父框架中打開鏈接部件和變量設(shè)定

8、變量/部件 滾動窗口到圖像熱區(qū)啟用部件禁用部件設(shè)置部件為選中狀態(tài)設(shè)定部件獲取焦點展開樹節(jié)點動態(tài)面板設(shè)置動態(tài)面板狀態(tài)為指定狀態(tài)顯示動態(tài)面板 隱藏動態(tài)面板 切換動態(tài)面板可見性移動動態(tài)面板將動態(tài)面板置于頂層將動態(tài)面板置于底層雜項折疊樹節(jié)點等待時間其他（在彈出窗口中顯示文字描述）定義多個場景（條件判斷）一個事件可以包含有多個場景，以傳達多個不同的流程或交互。例如，可以在一個按鈕的 OnClick事件中加入兩個場景，第一個場景為“如果成功”則執(zhí)行第一個動作；第二個場景為“如果失敗”則執(zhí)行第二個動作。 當在HTML原型中點擊按鈕時，會顯示出這兩個場景說明(“如果成功”和“如果失敗”)，點選其中一個場景說明

9、，就會執(zhí)行這個場景中包含的行為。頁面事件: OnPageLoadAxure支持一個頁面級的觸發(fā)事件：OnPageLoad，這個事件在原型載入頁面時被觸發(fā)。 頁面OnPageLoad 事件在頁面交互面板中定義，為頁面OnPageLoad 事件添加場景的方式與在控件事件中相同。Axure模塊 模塊可用在頁面中或是其他模塊中，只要修改模塊，在所有引用這個模塊的也會相應跟著同步更新，常用于如頁首(Header)、頁尾(Footer)與導航(Navigation)。模塊的概念猶如PowerPoint 中母版、Dreamveawer中模板的概念，熟練掌握模塊可以大大提高原型設(shè)計的效率，并使原型易于管理維護

10、。什么是HTML原型Html原型是指在 Axure中設(shè)計了帶注釋的線框圖并定義了交互之后，就可以產(chǎn)生的一個可以基于瀏覽器的、可互動的原型。Html 原型是一些HTML和 JavaScript 文件，不需要安裝 Axure 或任何播放器就可以直接瀏覽原型，可以在IE6+、Mozilla、Firefox瀏覽器中運行。HTML原型工作環(huán)境介紹配置和生成原型 使用HTML原型發(fā)布原型配置和生成原型 工具 點擊主菜單 生成（G）“常規(guī)生成” 原型（P） 或 直接使用快捷鍵（F5），在打開的對話框，可以對原型進行配置和生成?！案嗌伞?更多的生成器和配置選項（M） 或 直接使用快捷鍵（F8），在打開的對

11、話框中，選擇配置類型，打開對原型進行配置和生成?！吧僧斍绊摗痹谠椭兄匦律僧斍绊撁妫≧） 或 直接使用快捷鍵（Crrl+F5），可以只對當前修改的頁面進行重新生成。 使用HTML原型HTML原型的界面可分成兩個區(qū)域：左側(cè)（站點地圖）: 是一個頁面導航列表，以 層級形式展示原型中的頁面。（頁面注釋）: 顯示當前頁面的注釋。（腳本擴展）: 運行頁面腳本。中間（線框圖）: 顯示線框圖和流程圖，線框圖可以按照所設(shè)計的交互進行鼠標和鍵盤的互動。發(fā)布原型發(fā)布原型的方式有很多種：（發(fā)布到web服務(wù)器）發(fā)布 HTML原型到Web服務(wù)器上，只要將網(wǎng)址告訴客戶、工作伙伴或其他人，他們就可以在瀏覽器上瀏覽原型。

12、（壓縮成ZIP壓縮包） 將HTML原型壓縮成ZIP包，然后將 ZIP壓縮包傳遞給相關(guān)人員。其它人通過ZIP壓縮包便可以直接在自己的計算機上瀏覽 HTML原型。（發(fā)布為 CHM文檔） 發(fā)布為CHM文檔，就像ZIP 壓縮包一樣，這種方式是將原型發(fā)布為一個單獨的文檔，不需安裝任何軟件就可以訪問。想要輸出 CHM原型文檔，請在對話框的 分發(fā) 中，勾選“創(chuàng)建HTML幫助文件(.chm)”選項。如果你未安裝HTML Help Workshop的話，就必須先安裝它才能產(chǎn)生CHM檔。安裝完成HTML Help Workshop 后，所安裝的文件夾中將 會出現(xiàn)一個hhc.exe的文件，單擊”Locate hhc

13、.exe”鏈接到hhc.exe文件的位置。最終產(chǎn)生的CHM原型文檔存放在原型所在的文件夾中。高級交互設(shè)計用于設(shè)計高保真原型所需要的一些復雜的交互行為動態(tài)面板可以讓你實現(xiàn)高級的交互功能，實現(xiàn)原型的高保真度。 動態(tài)面板包含有多個狀態(tài)（states），每個狀態(tài)可包含一系列控件（你可以把一個狀態(tài)理解成一個獨立的頁面）。任何時候都只有一個狀態(tài)（頁面）是可見的，或整個動態(tài)面板可以被隱藏。結(jié)合交互動作，可以讓動態(tài)面板的狀態(tài)進行隱藏、顯示和改變。像添加其它控件一樣，可以在控件面板中拖放動態(tài)面板控件到線框圖中。 實際效果-Tab頁面實際效果-彈出層動態(tài)面板的結(jié)構(gòu)第三層內(nèi)容第二層內(nèi)容第一層內(nèi)容（最上層）o 我們可

14、以把動態(tài)面板看成一個很多層疊在一起o 而每一層都能設(shè)定不同內(nèi)容o 我們只能看到最上層顯示的動態(tài)面板的交互原理o 當我們進行一些操作(譬如點擊按鈕、點擊超鏈接等)o 使動態(tài)面板層的順序改變，譬如第二層顯示在最上層（如右圖）o 這時候我們只能看到第二層了第三層內(nèi)容第一層內(nèi)容第二層內(nèi)容（最上層）理論效果演示第三層內(nèi)容第二層內(nèi)容第一層內(nèi)容（最上層）顯示第二層(按鈕)理論效果演示第三層內(nèi)容第二層內(nèi)容第一層內(nèi)容（最上層）顯示第二層(按鈕)第三層內(nèi)容第一層內(nèi)容第二層內(nèi)容（最上層）編輯動態(tài)面板的狀態(tài)在線框圖中，雙擊動態(tài)面板控件可以打開一個動態(tài)面板狀態(tài)管理器（Dynamic Panel State Manage

15、r）對話框，在對話框中你可以創(chuàng)建、重命名、重新排序、刪除和編輯動態(tài)面板的狀態(tài)。進行狀態(tài)設(shè)計和設(shè)計線框圖是一樣的，要注意的是，狀態(tài)頁面中的藍色虛線外框表示動態(tài)面板的邊界范圍，超過這個邊界范圍外的物體在最終生成原型時將不可見。 隱藏動態(tài)面板 可以設(shè)置動態(tài)面板在默認時隱藏。只要選擇動態(tài)面板，右鍵菜單選擇“編輯動態(tài)面板”“設(shè)置隱藏”即可。這將會隱藏面板內(nèi)容，動態(tài)面板的遮罩會由藍色變?yōu)辄S色。動態(tài)面板的管理 動態(tài)面板管理器(Dynamic Panel Manager)提供了管理頁面中所有動態(tài)面板的功能，可以在主菜單上選擇“視圖”動態(tài)面板管理器“來調(diào)出動態(tài)面板管理器。動態(tài)面板的狀態(tài)可以通過動態(tài)面板管理器進行

16、新增、移除、編輯。 另外，為了更方便的設(shè)計線框圖，動態(tài)面板管理器中還提供了暫時隱藏或顯示動態(tài)面板的功能。用鼠標點擊動態(tài)面板名稱右側(cè)的淡藍色小方塊，可以在隱藏或顯示之間切換?；蛘撸憧梢栽陧敳康捻撁婷Q（如Home） 上點擊鼠標右鍵，選擇右鍵菜單“全部隱藏”或“全部顯示”，可以隱藏或顯示頁面中所有的動態(tài)面板。 動態(tài)面板的交互行為常用在動態(tài)面板上的交互行為：OnMove(移動動態(tài)面板時)OnShow (動態(tài)面板顯示時)OnHide (動態(tài)面板隱藏時)OnPanelStateChange (動態(tài)面板狀態(tài)改變時)OnDragStart (開始拖放動態(tài)面板時)OnDrag (拖動動態(tài)面板時)OnDrag

17、Drop (結(jié)束拖放動態(tài)面板時) 選擇其中一個行為后，然后“用例編輯器”中選擇要進行交互行為在控件交互面板上Label輸入框中，可以對線框圖中選擇的動態(tài)面板進行命名，然后就可以使用這個名稱去引用動態(tài)面板。如果沒有為動態(tài)面板進行命名，動態(tài)面板會被默認命名為“panel”動態(tài)面板的應用舉例Tab頁簽動態(tài)面板可用于創(chuàng)建一個Tab頁簽控件。例如，Tab頁簽控件有3個頁簽，則可以使用一個包含有3個狀態(tài)的動態(tài)面板，每一個動態(tài)面板的狀態(tài)代表一個打開的頁簽狀態(tài)。然后在每個頁簽上設(shè)置一個交互動作（OnClick），當點擊某個頁簽時，切換到動態(tài)面板的對應的某一個狀態(tài)。 頁面動態(tài)初始化 動態(tài)面板可以和頁面的OnPa

18、geLoad事件結(jié)合使用，實現(xiàn)根據(jù)變量的值呈現(xiàn)不同的初始化界面（根據(jù)變量值呈現(xiàn)不同的默認動態(tài)面板的狀態(tài)）。 OnMouseEnterOnMouseOut 在文本類控件、按鈕類控件、超級鏈接控件中有OnMouseEnter和 OnMouseOut事件。OnMouseEnter事件是當鼠標移入到一個控件上時發(fā)生，OnMouseOut事件是當鼠標移出一個控件時發(fā)生。 OnMouseEnter 和 OnMouseOut事件常常和動態(tài)面板一起使用，在原型中實現(xiàn)如菜單彈出、狀態(tài)翻轉(zhuǎn)、自定義提示等功能。 部件樣式大部分控件具有鼠標懸停樣式 ，鼠標按下樣式、鼠標選中樣式，鼠標禁用樣式要設(shè)置對應的樣式(Sele

19、cted Style)則必須配合相應的交互動作菜單菜單控件分為垂直菜單（Vertical Menu）和水平菜單（Horizontal Menu），默認情況下菜單帶有3個菜單項。通過工具欄可以對菜單加底色、字體和其它樣式。在菜單上右鍵單擊可以 增加、刪除菜單項或添加子菜單應用樣式之后，可以將鼠標移到菜單項左上角的黑白小方框 上進行翻轉(zhuǎn)效果預覽。 高級功能 邏輯條件要添加邏輯條件的控件選擇事件（如：OnClick事件）用例編輯器條件創(chuàng)建器需要執(zhí)行的動作OnChange事件OnChange事件可用于下拉框（Droplist）和列表框（List Box）控件。OnChange事件是在下拉框或列表框的選

20、項選擇時發(fā)生。這在原型中以下拉框進行導航非常有用，即當選擇下拉框的某個選項時跳轉(zhuǎn)到相應的頁面上。 如果名稱為droplist下拉框的選項等于名稱為listbox列表框的選項時OnKeyUp事件OnKeyUp事件常用于用戶在表單中進行輸入的實時校驗。例如，驗證輸入的字符長度、用戶名是否已經(jīng)存在、驗證碼是否正確等，并在界面上進行動態(tài)信息提示。下圖是用OnKeyUp事件實現(xiàn)的當輸入的郵編不符合5個字符長度的兩個狀態(tài)：OnFocus事件OnLostFocus事件OnFocus事件是當是當鼠標點擊控件或用鍵盤tab鍵讓控件獲得焦點時發(fā)生；而OnLostFocus事件正好相反， 是當控件失去焦點時發(fā)生。O

21、nFocus和OnLostFocus事件可用于文本框，文本域，下拉列表，單選，多選控件模塊的有效重復使用模塊的重要作用就是重復使用。你可以將設(shè)計中可重用的部分做成模塊，只需要改變模塊中的一個地方，就可以修改所有相關(guān)的地方，使得維護非常方便。 有時，可能需要讓模塊在不同的頁面上有所不同。例如，對于作為導航元素的模塊，在不同頁面上所要突出顯示的“當前導航項”要不同；或者對于作為Header頭部的模塊，在不同頁面上時需要顯示不同的標題文字。雖然這些應用例子也可以通過為每個頁面創(chuàng)建一個額外的模塊或在每個頁面上做一些特別的編輯來實現(xiàn)，但是利用一些特別的功能，使得仍然可以只在一個模塊中進行維護，做到模塊的有效重用。 控制模塊中的控件 模塊中的動態(tài)面板在頁面中可以選擇所需要的