互聯(lián)網(wǎng)產品交互設計 課件 第6章+Axure交互設計進階

-------202X------匯報人：AiPPT時間：20XX.XXPOWERPOINTAxure交互設計進階POWERPOINTDESIGN202X目錄CONTENTS05Axure中繼器應用06綜合案例與實踐01Axure交互設計基礎02鏈接與元件顯示隱藏03動態(tài)面板進階應用04元件復雜交互設計POWERPOINTDESIGN202XDESIGN01POWERPOINTAxure交互設計基礎01媒介與場景媒介是產品展現(xiàn)的形式，如手機中的導航App；場景是使用環(huán)境，如行走或駕駛時使用導航。設計時需考慮媒介特性與場景需求，如導航App需在移動中快速響應。03交互設計原則遵循可視、反饋、一致、易讀、易取等原則，確保設計符合用戶直覺，提供良好反饋，保持界面一致性和易用性。這些原則有助于減少用戶學習成本，提高操作效率和滿意度。02用戶、行為與目的用戶是設計核心，需深入了解其需求；行為是用戶與產品交互方式；目的是用戶使用產品的目標。以用戶為中心設計，滿足行為習慣，達成使用目的，提升用戶體驗。交互設計五要素動作與交互樣式動作是用例中具體行為，如改變文本、跳轉頁面；交互樣式描述元件樣式變化，如字體、顏色、線型。結合動作和交互樣式，可讓元件在交互中呈現(xiàn)不同視覺效果，增強交互表現(xiàn)力。元件交互入門案例以“提交”按鈕為例，設置“鼠標單擊時”事件，添加“設置文本”動作，實現(xiàn)點擊按鈕改變文字效果。操作包括選中按鈕、添加用例、選擇動作、配置動作，最后預覽查看效果。事件與用例事件是對外界操作的響應，如點擊、選中；用例是動作組合，定義事件響應，如顯示隱藏元件、設置變量。通過合理設置事件和用例，可實現(xiàn)豐富交互效果，如點擊按鈕切換界面。Axure元件基礎交互POWERPOINTDESIGN202XDESIGN02POWERPOINT鏈接與元件顯示隱藏鏈接交互分多種類型，如當前窗口、新窗口、彈窗窗口、父級窗口、內聯(lián)框架、錨點鏈接等。不同類型適用于不同場景，如新窗口適合打開外部鏈接，內聯(lián)框架適合頁面局部刷新。鏈接交互分類01制作鏈接需添加用例、插入動作、配置動作，如選擇“當前窗口”打開指定頁面或外部URL。通過鏈接交互可實現(xiàn)頁面間跳轉，滿足用戶瀏覽不同內容的需求。鏈接制作流程02以頁面導航為例，設置導航欄中各菜單項鏈接，實現(xiàn)點擊跳轉到對應頁面，方便用戶快速獲取信息。操作包括選中菜單項、添加用例、選擇鏈接類型、配置目標頁面或URL。鏈接交互案例03Axure鏈接交互設計顯示隱藏類型元件顯示隱藏有三種類型：僅顯示、僅隱藏、切換可見性，可實現(xiàn)彈窗、二級菜單等交互效果。設置時需選擇目標元件，選擇顯示隱藏方式，并可設置切換時間和方式。顯示隱藏設置設置顯示隱藏需選中元件，勾選“可見性”，選擇顯示隱藏或切換，還可設置推動拉動元件。通過顯示隱藏可控制元件在不同狀態(tài)下的呈現(xiàn)，實現(xiàn)復雜交互邏輯。顯示隱藏案例以彈窗為例，設置彈窗初始隱藏，點擊按鈕觸發(fā)顯示切換動作，實現(xiàn)點擊按鈕彈出彈窗效果。操作包括添加彈窗、設置隱藏、添加觸發(fā)按鈕、設置切換動作，最后預覽查看效果。Axure元件顯示與隱藏POWERPOINTDESIGN202XDESIGN03POWERPOINT動態(tài)面板進階應用動態(tài)面板用于多界面場景切換，如導航、排行榜、登錄注冊切換，每個狀態(tài)是獨立頁面，可自由編輯。動態(tài)面板比普通元件更靈活，可實現(xiàn)復雜界面切換和布局變化。動態(tài)面板概念創(chuàng)建動態(tài)面板有兩種方式：選中元件轉化為動態(tài)面板，或直接從元件庫拖拽動態(tài)面板元件。創(chuàng)建后可添加多個子狀態(tài)，每個狀態(tài)可獨立設置元件和布局，實現(xiàn)不同界面內容。動態(tài)面板創(chuàng)建編輯動態(tài)面板需雙擊面板進入狀態(tài)管理界面，添加狀態(tài)并命名，雙擊子狀態(tài)進入編輯界面。編輯時可添加元件、設置布局和交互，如添加登錄注冊界面的輸入框和按鈕。動態(tài)面板編輯Axure動態(tài)面板基礎動態(tài)面板切換動態(tài)面板切換需設置交互事件，選擇觸發(fā)動態(tài)面板的按鈕，添加動作設置切換目標狀態(tài)。設置后點擊按鈕可實現(xiàn)動態(tài)面板在不同狀態(tài)間切換，如點擊“登錄”按鈕切換到注冊狀態(tài)。動態(tài)面板條件交互可為動態(tài)面板設置交互條件，如判斷復選框是否勾選，根據(jù)條件執(zhí)行不同動作。通過條件交互可實現(xiàn)更復雜邏輯，如用戶未勾選協(xié)議時提示，勾選后跳轉頁面。動態(tài)面板案例以登錄注冊切換為例，設置動態(tài)面板包含登錄和注冊兩個狀態(tài)，通過按鈕點擊實現(xiàn)狀態(tài)切換。操作包括添加動態(tài)面板、設置狀態(tài)、編輯各狀態(tài)界面、設置按鈕交互，實現(xiàn)流暢切換效果。動態(tài)面板交互設置POWERPOINTDESIGN202XDESIGN04POWERPOINT元件復雜交互設計設立條件需選中元件，雙擊事件添加動作，點擊“添加條件”，設置元件屬性、關系和值。例如，判斷復選框是否勾選，選擇“選中狀態(tài)”屬性，設置關系為“==”，值為“true”。以注冊協(xié)議為例，設置用戶未勾選協(xié)議時提示，勾選后跳轉頁面，通過條件判斷實現(xiàn)不同操作。操作包括選擇按鈕、添加動作、設置條件、配置滿足條件和不滿足條件的動作。條件設立步驟條件設立案例交互條件用于判斷特定情況是否滿足，如復選框是否勾選、文本框是否輸入內容。條件由元件、屬性、關系、值等組成，通過合理設置可實現(xiàn)復雜交互邏輯。條件設立概念交互條件設立全局變量可用于跨頁面數(shù)據(jù)傳遞，如登錄狀態(tài)、用戶名等，實現(xiàn)頁面間數(shù)據(jù)共享。例如，登錄成功后將用戶名存儲到全局變量，在個人中心頁面讀取顯示。全局變量應用局部變量可用于局部事件處理，如表單驗證、數(shù)據(jù)計算等，簡化交互邏輯。例如，在表單提交時，使用局部變量獲取輸入值，進行驗證和處理。局部變量應用變量概念全局變量可在整個原型中存儲和傳遞數(shù)據(jù)，局部變量僅在特定區(qū)域或事件中使用。變量可用于存儲用戶輸入、頁面狀態(tài)等信息，實現(xiàn)數(shù)據(jù)共享和交互邏輯控制。全局變量與局部變量登錄狀態(tài)管理設置全局變量存儲登錄狀態(tài)，登錄成功時設置為“已登錄”，在其他頁面根據(jù)狀態(tài)顯示不同內容。操作包括設置全局變量、在登錄頁面設置變量值、在其他頁面讀取變量值并設置顯示內容。表單驗證使用局部變量獲取表單輸入值，進行驗證，如判斷是否為空、格式是否正確，根據(jù)結果設置提示信息。操作包括設置局部變量、獲取輸入值、設置驗證條件和動作，實現(xiàn)表單驗證邏輯。全局變量與局部變量案例POWERPOINTDESIGN202XDESIGN05POWERPOINTAxure中繼器應用中繼器是Axure中用于動態(tài)存儲和管理數(shù)據(jù)的元件，可模擬數(shù)據(jù)庫操作，實現(xiàn)數(shù)據(jù)的增刪改查。中繼器由數(shù)據(jù)集和項組成，數(shù)據(jù)集類似數(shù)據(jù)庫表，項是數(shù)據(jù)展示模板，可重復使用。中繼器概念創(chuàng)建中繼器從Default元件庫拖拽到頁面編輯區(qū)，雙擊中繼器進入項編輯界面，設置項布局和數(shù)據(jù)綁定。可在中繼器數(shù)據(jù)表中添加數(shù)據(jù)列和數(shù)據(jù)行，設置列名為數(shù)據(jù)字段，如姓名、手機號、地址。中繼器創(chuàng)建編輯中繼器需在項編輯界面添加元件，設置元件數(shù)據(jù)綁定，如將文本框綁定到數(shù)據(jù)列，實現(xiàn)數(shù)據(jù)動態(tài)展示?？赏ㄟ^添加行、刪除行、上移下移行等操作管理數(shù)據(jù)集，實現(xiàn)數(shù)據(jù)動態(tài)更新。中繼器編輯中繼器基礎中繼器可實現(xiàn)數(shù)據(jù)增加、刪除、修改、查詢等操作，通過設置交互動作實現(xiàn)數(shù)據(jù)動態(tài)管理。例如，點擊“添加”按鈕向中繼器數(shù)據(jù)集添加新行，點擊“刪除”按鈕刪除選中行。中繼器數(shù)據(jù)操作中繼器可結合系統(tǒng)變量實現(xiàn)復雜交互，如使用局部變量獲取用戶輸入，設置中繼器數(shù)據(jù)項。例如，在表單提交時，使用局部變量獲取輸入值，設置中繼器數(shù)據(jù)項，實現(xiàn)數(shù)據(jù)動態(tài)添加。中繼器與系統(tǒng)變量以通訊錄為例，設置中繼器包含姓名、手機號、地址等數(shù)據(jù)列，通過表單輸入添加聯(lián)系人，動態(tài)展示聯(lián)系人列表。操作包括創(chuàng)建中繼器、設置數(shù)據(jù)列、編輯項布局、設置數(shù)據(jù)綁定、添加表單輸入和提交按鈕、設置交互動作。中繼器案例中繼器交互設計POWERPOINTDESIGN202XDESIGN06P