摘要

本文將為您詳細介紹基于 Axure 的中繼器組件庫中的 9 個獨特組件，這些組件不僅能夠極大地提升您的原型設計效率，還能為您的項目增添令人驚嘆的交互效果和視覺呈現。

引言

在當今快速發展的數字產品設計領域，原型設計工具的革新不斷推動著用戶體驗（UX）和用戶界面（UI）設計的邊界。Axure 作為一款功能強大的原型設計軟件，以其強大的交互功能和高度的可定制性，成為了眾多設計師和產品的首選工具。而在 Axure 的眾多功能中，中繼器（Repeater）組件無疑是一顆璀璨的明珠，它為設計師們提供了無限的設計可能。

1. 組件介紹

本次設計的組件均基于中繼器來實現，通過使用中繼器的排序、篩選、更新行等方法，實現了穿梭框、下拉選擇框、動態表格、導航菜單、樹形結構等組件，讓你可以輕松的熟悉其設計原理，并可輕松根據自己的實際需求進行改造，下面一起來看看吧。

1.1 穿梭框

穿梭框（也稱為穿梭選擇框、雙向選擇框或穿梭組件）是一種在用戶界面設計中常用的交互組件，主要用于在兩個列表之間進行項目選擇和移動。它通過直觀的視覺和交互方式，幫助用戶高效地完成多選、分類、篩選等操作，廣泛應用于各種 Web 和移動應用場景中，如權限設置、標簽分配、分類管理等。

1.1.1 基本結構與功能

穿梭框通常由三個主要部分組成：

• 源列表（Source List）：顯示所有可選擇的選項。用戶可以從這個列表中選擇一個或多個項目，然后將其移動到目標列表中。
• 目標列表（Target List）：顯示用戶已經選擇的選項。用戶可以將選中的項目從源列表移動到這里，也可以將項目從目標列表移回源列表。
• 操作按鈕：用于在兩個列表之間移動選中的項目。通常包括“添加”（>>）、“移除”（<<）。

1.1.2 主要特點

• 雙向選擇：用戶可以在源列表和目標列表之間自由地移動項目，實現雙向選擇和調整。
• 多選支持：通常支持用戶一次性選擇多個項目進行移動，提高操作效率。
• 搜索與篩選：為了方便用戶快速找到目標項目，穿梭框通常集成了搜索和篩選功能。用戶可以通過輸入關鍵詞或選擇篩選條件來過濾列表中的內容。

1.1.3 應用場景

• 權限管理：在用戶權限設置中，穿梭框用于選擇用戶擁有的權限。用戶可以從權限源列表中選擇需要的權限，將其移動到已選權限列表中。
• 標簽分配：在內容管理系統（CMS）或博客平臺中，穿梭框用于為文章或內容添加標簽。用戶可以從標簽源列表中選擇合適的標簽，將其分配給內容。
• 分類管理：在電商平臺或產品管理系統中，穿梭框用于對產品進行分類。用戶可以將產品從一個分類移動到另一個分類，或者創建新的分類。
• 批量操作：在數據處理或批量操作場景中，穿梭框可以用于選擇需要處理的數據項。例如，在郵件營銷中，用戶可以選擇要發送郵件的收件人列表。
  

1.2 下拉框

下拉框也稱為下拉菜單或下拉選擇框，是一種常見的用戶界面（UI）組件，用于在有限的空間內展示多個選項供用戶選擇。它通過點擊觸發一個可展開的列表，用戶可以從列表中選擇一個或多個選項（視具體設計而定）。下拉框廣泛應用于各種數字產品中，如網頁表單、軟件界面、移動應用等，以簡化用戶輸入過程、提高界面整潔度和用戶體驗。

1.2.1 基本結構與功能

下拉框通常由以下幾個部分組成：

• 觸發器（Trigger）：通常是一個按鈕或標簽，顯示當前選中的選項或一個默認的提示文本（如“請選擇”）。用戶點擊觸發器時，下拉列表會展開或收起。
• 下拉列表（Dropdown List）：當用戶點擊觸發器后，會彈出一個包含多個選項的列表。用戶可以通過鼠標或鍵盤導航來選擇其中一個選項。選擇完成后，下拉列表通常會自動收起，觸發器會更新為用戶選擇的選項。
• 選項（Options）：下拉列表中的每一個可選項，通常以文本形式呈現。每個選項可以代表一個不同的值或狀態，用戶的選擇將決定后續的操作或數據輸入。

1.2.2 主要特點

• 節省空間：下拉框能夠在有限的空間內展示大量選項，特別適用于選項數量較多但用戶一次只能選擇一個的場景。相比于單選按鈕（Radio Buttons）等組件，下拉框在界面布局上更加節省空間。
• 簡潔直觀：用戶通過點擊觸發器即可展開選項列表，操作簡單直觀。下拉列表的出現和消失具有明確的視覺提示，使用戶能夠輕松理解其功能和使用方法。
• 可擴展性：下拉框可以容納任意數量的選項，從幾個到幾十個甚至更多。此外，還可以對選項進行分組、添加搜索功能或支持多選（多選下拉框），以滿足不同的需求。
• 可訪問性：現代的下拉框設計通常具有良好的可訪問性，支持鍵盤導航（如使用上下箭頭鍵進行選項導航，使用回車鍵進行選擇）和屏幕閱讀器等輔助技術的集成，方便不同用戶群體的使用。

1.2.3 應用場景

• 表單輸入：在網頁表單或軟件設置界面中，下拉框常用于收集用戶的特定信息，如國家/地區、性別、日期（通過日期選擇器下拉框）、職業等。例如，在用戶注冊表單中，用戶可以通過下拉框選擇自己的國家，而無需手動輸入。
• 導航菜單：一些網站或應用使用下拉框作為導航菜單的一部分。當用戶點擊導航欄中的某個選項時，會彈出一個下拉列表，列出相關的子類別或頁面鏈接，用戶可以從中選擇并跳轉。
• 設置與配置：在軟件或應用的設置界面中，下拉框用于選擇不同的配置選項，如主題、語言、通知偏好等。例如，用戶可以通過下拉框選擇應用的語言版本，以便更方便地使用產品。
  數據過濾與篩選：在數據驅動的應用或儀表盤中，下拉框常用于對數據進行過濾和篩選。例如，在電商網站中，用戶可以通過下拉框選擇不同的商品類別、價格范圍或品牌，以快速找到自己需要的商品。

普通下拉框效果圖如下：

帶復選框的下拉框效果圖如下：

1.3 動態表格

動態表格是一種基于數據驅動的交互式表格組件，廣泛應用于各種數字產品原型設計中。它能夠根據數據源的變化，動態地生成、更新和展示表格內容，并提供豐富的交互功能，如排序、篩選、編輯等。

1.3.1 基本結構與功能

動態表格通常由以下幾個核心部分組成，每個部分承擔著不同的功能：

• 數據源（Data Source）：
  • 數據來源：動態表格的數據來源于其綁定的數據源。數據源可以是 Axure 內置的數據集，也可以是外部導入的 CSV、JSON、Excel 等格式的數據文件，甚至可以通過 API 接口從服務器實時獲取數據。
  • 數據結構：數據源定義了表格中每一行（記錄）的具體字段和內容。例如，一個員工信息表的數據源可能包含“姓名”、“年齡”、“部門”、“職位”等字段。
• 表格容器（Table Container）：
  • 中繼器（Repeater）：在 Axure 中，動態表格通常由中繼器組件實現。中繼器是一個可重復的容器，每個中繼器項代表表格中的一行數據。
  • 行與列：表格由多個行和列組成，每一行對應數據源中的一條記錄，每一列對應數據源中的一個字段。例如，第一列顯示“姓名”，第二列表示“年齡”，以此類推。
• 數據展示（Data Display）：
  • 文本標簽（Text Labels）：用于顯示數據源中的文本數據。例如，一個文本標簽可以綁定到“姓名”字段，用于顯示每行的員工姓名。
  • 輸入框（Input Fields）：用于在表格中編輯數據。例如，一個輸入框可以綁定到“年齡”字段，用戶可以點擊編輯該字段的值。
  • 下拉框（Dropdown Boxes）：用于選擇數據。例如，一個下拉框可以綁定到“部門”字段，用戶可以從預定義的部門列表中選擇一個部門。
• 操作按鈕（Action Buttons）：
  • 編輯按鈕（Edit Button）：用于打開編輯模式，用戶可以在編輯模式下修改表格中的數據。點擊編輯按鈕后，表格行會進入編輯狀態，顯示輸入框或下拉框等編輯控件。
  • 刪除按鈕（Delete Button）：用于刪除表格中的某一行數據。點擊刪除按鈕后，會彈出確認提示，防止用戶誤操作。
  • 添加按鈕（Add Button）：用于向表格中添加新行。用戶點擊添加按鈕后，會在表格底部出現一個空白行，用戶可以在其中輸入新數據。
• 交互功能（Interactive Features）：
  • 排序（Sorting）：用戶可以通過點擊表頭，對表格數據進行升序或降序排序。中繼器支持多列排序，用戶可以先按某一列排序，再按另一列進行二次排序。
  • 篩選（Filtering）：通過添加篩選條件，用戶可以快速過濾出符合特定條件的數據。例如，在員工信息表中，用戶可以篩選出特定部門的員工，或者篩選出年齡大于 30 歲的員工。
  • 分頁（Paging）：對于大量數據的展示，動態表格支持分頁功能。用戶可以通過分頁導航瀏覽不同的數據頁，或者通過滾動條查看超出可視區域的數據。

1.3.2 主要特點

• 數據驅動：
  • 實時更新：動態表格的數據源發生變化時，表格會自動更新。例如，當用戶通過表單提交新數據時，表格會立即顯示新增的行；當數據源中的數據被修改時，表格中對應的單元格內容也會同步更新。
  • 靈活性高：數據源可以是靜態的，也可以是動態的，甚至可以通過 API 接口從服務器獲取數據。這為設計師提供了極大的靈活性，可以根據需求選擇合適的數據源。
• 可重復使用：
  • 組件復用：動態表格作為一個可重復使用的組件，可以在不同的頁面或模塊中多次使用。例如，在用戶管理模塊和訂單管理模塊中，可以使用同一個動態表格組件，只需綁定不同的數據源即可。
  • 樣式統一：通過統一設置動態表格的樣式，可以確保表格在不同地方顯示時具有一致的外觀和風格，提高原型的整體美觀性和專業性。
• 交互性強：
  • 豐富的交互事件：動態表格支持各種交互事件，如點擊、雙擊、懸停、拖拽等。這些事件可以觸發不同的交互行為，如打開編輯表單、顯示詳細信息、排序、篩選等。
  • 用戶友好：動態表格的交互設計通常以用戶為中心，提供直觀的操作方式和及時的反饋。例如，點擊“編輯”按鈕后，表格會高亮顯示當前編輯的行，并提供明確的保存和取消按鈕。
• 可定制性強：
  • 樣式自定義：設計師可以對動態表格的樣式進行全面的自定義，包括字體、顏色、邊框、背景等，以滿足不同的設計需求。
  • 布局調整：可以調整表格的列寬、行高、對齊方式等布局屬性，以及添加分頁、滾動條等元素，以優化表格的展示效果。
• 響應式設計：
  • 適配不同設備：動態表格支持響應式設計，能夠根據不同設備和屏幕尺寸自動調整表格的布局和樣式。例如，在桌面設備上，表格可以顯示較多的列和行；而在移動設備上，表格可以調整為單列顯示，并提供分頁或滾動功能。

1.3.3 應用場景

• 數據展示與管理：
  • 后臺管理系統：在企業后臺管理系統中，動態表格常用于展示和管理各種數據，如用戶信息、訂單信息、產品庫存等。例如，用戶管理模塊可以使用動態表格展示所有用戶的信息，并提供編輯、刪除、禁用等操作。
  • 數據分析工具：在數據分析工具中，動態表格可以用于展示分析結果，如銷售數據、用戶行為數據等。用戶可以通過排序、篩選等功能，對數據進行深入分析。
• 電子商務平臺：
  • 產品列表：電商網站的產品列表頁面可以使用動態表格展示產品信息，如產品名稱、價格、庫存、銷量等。用戶可以通過排序和篩選功能，快速找到自己需要的產品。
  • 購物車：購物車頁面可以使用動態表格展示用戶已添加的商品，包括商品名稱、數量、價格等信息。用戶可以對商品數量進行修改，或刪除不需要的商品。
• 項目管理工具：
  • 任務列表：項目管理工具中，動態表格可以用于展示項目任務列表，包括任務名稱、負責人、狀態、截止日期等信息。團隊成員可以通過表格對任務進行跟蹤和管理。
  • 進度跟蹤：動態表格可以用于展示項目的進度情況，如已完成的任務數、正在進行中的任務數、延期任務數等。通過顏色編碼和圖標標識，可以更直觀地展示項目狀態。
• 表單與配置：
  • 數據錄入表單：在需要批量錄入數據的場景中，動態表格可以提供便捷的輸入方式。例如，在員工信息錄入表單中，用戶可以一次性添加多行員工數據，并進行編輯和刪除操作。
  • 配置管理界面：在軟件配置界面中，動態表格可以用于展示和管理配置項。例如，在網站設置頁面中，管理員可以使用動態表格管理網站的導航菜單、頁面模塊等配置信息。
• 其他應用場景：
  • 報表生成：動態表格可以用于生成各種報表，如財務報表、銷售報表等。用戶可以通過篩選和排序功能，對報表數據進行查看和分析。
  • 日志查看：在日志管理工具中，動態表格可以用于展示系統日志、操作日志等。用戶可以通過時間范圍、關鍵字等條件，對日志進行篩選和查看。

1.4 導航菜單

多級導航菜單是一種常見的用戶界面組件，用于在數字產品中組織和展示多層次的導航結構。它通過層級化的菜單項，幫助用戶快速找到所需的功能、內容或頁面。多級導航菜單廣泛應用于網站、應用程序、后臺管理系統等場景中，尤其適用于具有復雜信息架構的產品。

1.4.1 基本結構與功能

多級導航菜單通常由以下幾個核心部分組成，每個部分承擔著不同的功能：

• 菜單容器（Menu Container）：
  • 導航欄（Navigation Bar）：通常位于頁面的頂部或側邊，作為菜單的容器。導航欄提供了一個固定的位置，方便用戶隨時訪問菜單。
  • 主菜單（Main Menu）：導航欄中的頂級菜單項，通常以水平或垂直的方式排列。每個主菜單項代表一個主要的導航類別，如“首頁”、“產品”、“服務”、“關于我們”等。
• 菜單項（Menu Items）：
  • 頂級菜單項（Top-level Menu Items）：主菜單中的每個項目，代表一個主要的導航類別。例如，在電商網站中，頂級菜單項可能包括“電子產品”、“服裝”、“家居用品”等。
  • 子菜單項（Sub-menu Items）：每個頂級菜單項可以包含一個或多個子菜單項，形成多級菜單結構。例如，“電子產品”頂級菜單項下可以包含“手機”、“電腦”、“相機”等子菜單項。
  • 更深層級（Additional Levels）：根據需要，子菜單項還可以包含更多的子菜單項，形成三級、四級甚至更深層級的菜單結構。例如，“手機”子菜單項下可以包含“智能手機”、“功能手機”等更細分的類別。
• 交互功能（Interactive Features）：
  • 展開與折疊（Expand/Collapse）：用戶可以通過點擊頂級菜單項或子菜單項旁邊的箭頭圖標或觸發區域，來展開或折疊子菜單。例如，點擊“電子產品”頂級菜單項，會展開顯示其子菜單項“手機”、“電腦”、“相機”等。
  • 懸停顯示（Hover Display）：在一些設計中，用戶將鼠標懸停在頂級菜單項上時，會自動顯示其子菜單。這種交互方式提供了一種快速瀏覽菜單的方式，但需要注意的是，在移動設備上無法使用鼠標懸停，因此需要提供其他替代方案。
  • 點擊跳轉（Click to Navigate）：用戶點擊菜單項后，頁面會跳轉到相應的內容頁面或功能頁面。例如，點擊“手機”子菜單項，會跳轉到手機產品列表頁面。
• 視覺反饋（Visual Feedback）：
  • 選中狀態（Selected State）：當前選中的菜單項會顯示不同的樣式，如不同的字體顏色、背景顏色、下劃線等，以明確指示用戶當前所在的位置。
  • 懸停效果（Hover Effect）：當用戶將鼠標懸停在菜單項上時，菜單項會顯示懸停效果，如背景顏色變化、字體顏色變化等，以增強用戶體驗。

1.4.2 主要特點

• 層級化結構：
  • 多級菜單：多級導航菜單可以包含多個層級的菜單項，能夠有效地組織和展示復雜的信息架構。例如，一個大型電商網站可能有三級甚至四級菜單結構，以涵蓋各種產品類別和子類別。
  • 清晰的層級關系：通過使用縮進、圖標、顏色等視覺元素，可以清晰地展示菜單項之間的層級關系，幫助用戶理解菜單的結構和導航路徑。
• 可擴展性強：
  • 動態添加菜單項：多級導航菜單可以根據需要動態添加或刪除菜單項。例如，在后臺管理系統中，管理員可以根據產品線的變化，添加新的產品類別或子類別到菜單中。
  • 適應不同內容：多級導航菜單可以適應不同類型的內容和功能，無論是網站導航、應用程序菜單，還是后臺管理系統的功能菜單，都能靈活應對。
• 交互性強：
  • 用戶友好：多級導航菜單提供了直觀的交互方式，用戶可以通過點擊、懸停等操作，快速找到所需的內容或功能。
  • 及時反饋：菜單項的展開、折疊、選中狀態等都會提供及時的視覺反饋，使用戶能夠清楚地了解當前的操作狀態和導航路徑。
• 可定制性強：
  • 樣式自定義：設計師可以對多級導航菜單的樣式進行全面的自定義，包括字體、顏色、圖標、布局等，以滿足不同的設計需求和品牌風格。
  • 動畫效果：可以添加各種動畫效果，如展開/折疊動畫、懸停動畫等，以增強菜單的視覺吸引力和用戶體驗。

1.4.3 應用場景

• 網站導航：
  • 企業網站：在企業網站中，多級導航菜單用于展示公司的產品、服務、解決方案、關于我們、聯系我們等主要信息。例如，“產品”頂級菜單項下可以包含不同的產品類別，每個類別下又可以包含更細分的子類別。
  • 電子商務網站：在電商網站中，多級導航菜單用于展示各種產品類別和子類別，以及相關的促銷活動、優惠信息等。例如，“服裝”頂級菜單項下可以包含“男裝”、“女裝”、“童裝”等子類別，每個子類別下又可以包含更細分的服裝類型。
• 應用程序菜單：
  • 移動應用：在移動應用中，多級導航菜單通常以折疊的形式顯示，用戶可以通過點擊菜單圖標來展開或折疊菜單。例如，在一款新聞應用中，菜單可能包含“頭條新聞”、“國際新聞”、“國內新聞”、“體育新聞”等頂級菜單項，每個頂級菜單項下又可以包含更細分的新聞類別。
  • 桌面應用：在桌面應用中，多級導航菜單可以提供更復雜的導航結構。例如，在一款圖像編輯軟件中，菜單可能包含“文件”、“編輯”、“圖像”、“視圖”、“幫助”等頂級菜單項，每個頂級菜單項下又可以包含多個子菜單項。
• 后臺管理系統：
  • 功能菜單：在后臺管理系統中，多級導航菜單用于組織和管理各種功能模塊。例如，一個電商后臺管理系統可能包含“商品管理”、“訂單管理”、“用戶管理”、“數據分析”等頂級菜單項，每個頂級菜單項下又可以包含多個子菜單項，如“商品分類”、“商品列表”、“商品屬性”等。
  • 權限控制：多級導航菜單還可以與用戶權限控制結合使用，根據用戶的權限級別，顯示不同的菜單項。例如，普通用戶可能只能看到“商品管理”、“訂單管理”等基本功能，而管理員則可以訪問所有功能模塊。

左側導航菜單效果圖如下：

頂部+左側導航菜單效果圖如下：

1.5 樹形結構

樹形結構是一種層級化的數據展示和組織方式，廣泛應用于各種數字產品中，如文件管理系統、組織架構圖、知識庫、分類目錄等。它通過模擬自然界中樹的結構，以節點（Node）和分支（Branch）的形式展示數據之間的關系，使用戶能夠清晰地理解數據的層次結構和從屬關系。

1.5.1 基本結構與功能

樹形結構通常由以下幾個核心部分組成，每個部分承擔著不同的功能：

• 節點（Node）：
  • 根節點（Root Node）：樹形結構的起點，通常位于最頂層，代表整個樹形結構的頂層分類或主題。例如，在文件管理系統中，根節點可能代表計算機的根目錄（如 “C:”）。
  • 子節點（Child Node）：根節點或任何其他節點的下一級節點，代表對上一級節點的細分或從屬。例如，在組織架構圖中，“部門” 節點下可以有多個 “團隊” 子節點。
  • 葉節點（Leaf Node）：沒有子節點的節點，代表樹形結構的末端。例如，在文件管理系統中，葉節點可能代表具體的文件或空文件夾。
• 分支（Branch）：
  • 父子關系（Parent-Child Relationship）：節點之間通過父子關系連接，形成樹形結構的層級關系。每個節點（除根節點外）都有一個父節點和零個或多個子節點。例如，“部門” 節點是 “團隊” 子節點的父節點，而 “團隊” 子節點是 “部門” 節點的子節點。
  • 層級（Level）：樹形結構中的層級數，從根節點開始計算。例如，根節點位于第 1 層，其子節點位于第 2 層，依此類推。
• 交互功能（Interactive Features）：
  • 展開與折疊（Expand/Collapse）：用戶可以通過點擊節點旁邊的展開/折疊圖標或觸發區域，來展開或折疊子節點。例如，點擊 “部門” 節點，可以展開顯示其所有子節點 “團隊”；再次點擊，可以折疊子節點。
  • 選擇與導航（Select & Navigate）：用戶可以選擇某個節點，并執行相應的操作，如查看詳細信息、導航到相關頁面等。例如，在文件管理系統中，用戶可以選擇一個文件夾節點，并點擊 “打開” 按鈕，進入該文件夾。
• 視覺反饋（Visual Feedback）：
  • 選中狀態（Selected State）：當前選中的節點會顯示不同的樣式，如不同的字體顏色、背景顏色等，以明確指示用戶當前選擇的內容。
  • 懸停效果（Hover Effect）：當用戶將鼠標懸停在節點上時，節點會顯示懸停效果，如背景顏色變化、字體顏色變化等，以增強用戶體驗。
  • 連接線（Connecting Lines）：一些樹形結構會使用連接線來連接父節點和子節點，以更清晰地展示節點之間的關系。

1.5.2 主要特點

• 層級化展示：
  • 清晰的層次關系：樹形結構通過節點和分支的形式，清晰地展示了數據之間的層次關系和從屬關系。例如，在組織架構圖中，可以直觀地看到公司各部門、各團隊之間的層級關系。
  • 易于理解和導航：用戶可以輕松地理解樹形結構的層級關系，并通過展開/折疊節點、選擇節點等方式，快速導航到所需的內容。例如，在文件管理系統中，用戶可以逐級展開文件夾，找到目標文件。
• 可擴展性強：
  • 動態添加節點：樹形結構可以根據需要動態添加或刪除節點。例如，在知識庫系統中，管理員可以隨時添加新的文檔類別或子類別到樹形結構中。
  • 適應不同數據量：樹形結構可以處理各種規模的數據集，從小型數據集到大型數據集，都能有效地進行組織和展示。
• 交互性強：
  • 用戶友好：樹形結構提供了直觀的交互方式，用戶可以通過點擊、懸停、拖拽等操作，與樹形結構進行交互。例如，點擊節點旁邊的 “+” 或 “-” 按鈕，可以展開或折疊子節點。
  • 及時反饋：節點的展開、折疊、選中狀態等都會提供及時的視覺反饋，使用戶能夠清楚地了解當前的操作狀態和導航路徑。

1.5.3 應用場景

• 文件管理系統：
  • 本地文件管理：在計算機操作系統中，樹形結構用于展示文件目錄結構，用戶可以逐級展開文件夾，找到目標文件。
  • 云存儲服務：在云存儲服務（如 Google Drive、Dropbox 等）中，樹形結構用于展示用戶的文件存儲結構，用戶可以通過樹形結構進行文件的上傳、下載、刪除、移動等操作。
• 組織架構圖：
  • 企業組織架構：在企業管理系統中，樹形結構用于展示公司的組織架構，包括各部門、各團隊、各職位之間的關系。例如，可以清晰地看到 CEO 下屬的各個副總裁，以及每個副總裁下屬的各個部門。
  • 項目管理：在項目管理工具中，樹形結構可以用于展示項目的組織結構，包括項目團隊、項目任務、項目里程碑等。
• 知識庫系統：
  • 文檔分類：在知識庫系統中，樹形結構用于對文檔進行分類和整理。例如，可以按照主題、部門、類型等對文檔進行分類，用戶可以通過樹形結構快速找到所需的文檔。
  • 產品文檔：在產品文檔管理系統中，樹形結構可以用于展示產品的不同版本、模塊、功能等，用戶可以通過樹形結構查看產品的詳細信息。
• 分類目錄：
  • 電商網站：在電商網站中，樹形結構用于展示商品分類。例如，可以按照商品類別、品牌、價格區間等對商品進行分類，用戶可以通過樹形結構瀏覽和搜索商品。
  • 在線學習平臺：在在線學習平臺中，樹形結構可以用于展示課程分類。例如，可以按照學科、語言、難度等級等對課程進行分類，用戶可以通過樹形結構查找和注冊課程。

普通樹形結構效果圖如下：

帶復選框的樹形結構效果圖如下：

1.6 城市選擇

城市選擇組件是數字產品中用于選擇城市或地點的交互式界面元素，廣泛應用于各種應用場景，如用戶注冊、電商配送地址設置、天氣預報查詢、旅行規劃等。城市選擇組件通常支持多種分類方式，如按字母分類、按省份分類以及無分類（全部城市）等，以滿足不同用戶的需求。

1.6.1 基本結構與功能

城市選擇組件通常由以下幾個核心部分組成，每個部分承擔著不同的功能：

• 選擇觸發器（Selection Trigger）：
  • 輸入框（Input Field）：用戶可以在輸入框中輸入城市名稱進行搜索，或者點擊輸入框旁邊的下拉箭頭，展開城市選擇列表。例如，在電商平臺中，用戶可以在配送地址輸入框中點擊展開城市選擇列表。
  • 下拉按鈕（Dropdown Button）：通常是一個箭頭圖標或文本（如“請選擇城市”），用戶點擊后可以展開城市選擇列表。
• 城市選擇列表（City Selection List）：
  • 無分類列表（Uncategorized List）：
    • 全部城市（All Cities）：以列表形式展示所有可選擇的城市，按字母順序排列。例如，從“A”開頭的城市到“Z”開頭的城市依次排列。
    • 搜索功能（Search Function）：在無分類列表中，搜索功能尤為重要。用戶可以在搜索框中輸入關鍵詞，組件會實時過濾并顯示匹配的城市。例如，輸入“北京”，列表中會顯示所有包含“北京”的城市選項。
  • 按字母分類（Alphabetical Classification）：
    • 字母索引（Alphabet Index）：在列表的一側或頂部，提供字母索引（A-Z）。用戶可以點擊某個字母，快速跳轉到以該字母開頭的城市列表。例如，點擊“B”，列表會跳轉到以“B”開頭的城市，如“北京”、“上海”、“廣州”等。
    • 分組顯示（Grouped Display）：城市按字母分組顯示，每個字母對應一個分組。例如，A 組包含所有以“A”開頭的城市，B 組包含所有以“B”開頭的城市，以此類推。
  • 按省份分類（Provincial Classification）：
    • 省份列表（Provincial List）：首先展示一個省份列表，用戶可以選擇某個省份。例如，用戶可以選擇“廣東省”。
    • 城市列表（City List）：選擇省份后，展開該省份下的城市列表。例如，選擇“廣東省”后，列表會顯示“廣州”、“深圳”、“東莞”等城市。
    • 多級菜單（Multi-level Menu）：一些城市選擇組件采用多級菜單的形式，先選擇省份，再選擇城市，甚至可以選擇區縣。例如，用戶可以先選擇“廣東省”，然后選擇“廣州市”，最后選擇“越秀區”。

1.6.2 主要 特點

• 多分類方式：
  • 靈活選擇：城市選擇組件支持多種分類方式，用戶可以根據自己的需求選擇合適的分類方式。例如，對于熟悉字母排序的用戶，可以選擇按字母分類；對于熟悉地理位置的用戶，可以選擇按省份分類。
  • 無縫切換：用戶可以在不同的分類方式之間無縫切換。例如，用戶可以先按字母分類瀏覽城市，如果找不到目標城市，可以切換到按省份分類繼續查找。
• 搜索功能：
  • 快速定位：搜索功能使用戶能夠快速定位到特定的城市。例如，用戶可以直接輸入城市名稱或關鍵詞，組件會實時過濾并顯示匹配的城市選項。
  • 智能提示：一些高級的城市選擇組件提供智能提示功能，根據用戶的輸入歷史或熱門搜索，提供相關的城市建議。
• 用戶友好：
  • 直觀易用：城市選擇組件通常采用簡潔直觀的界面設計，用戶可以輕松理解和使用。例如，按字母分類的索引和按省份分類的層級結構，都提供了清晰的導航路徑。
  • 及時反饋：用戶的操作會得到及時的視覺反饋，例如，選中某個城市時，選項會高亮顯示；展開或折疊列表時，會有動畫效果提示。

1.6.3 應用場景

• 用戶注冊與登錄：
  • 地址設置：在用戶注冊或用戶資料設置中，城市選擇組件用于選擇用戶的所在城市。例如，在電商平臺中，用戶需要設置配送地址，城市選擇組件可以幫助用戶快速選擇城市。
  • 個性化推薦：根據用戶選擇的城市，提供個性化的內容推薦。例如，在新聞應用中，根據用戶所在城市，推薦本地新聞。
• 電商平臺：
  • 配送地址：在電商平臺的結算頁面，城市選擇組件用于選擇配送地址的城市。例如，用戶在填寫收貨地址時，可以通過城市選擇組件快速選擇城市。
  • 商品篩選：在商品列表頁面，城市選擇組件可以用于篩選商品。例如，用戶可以選擇某個城市，查看該城市的可用商品。
• 旅行與地圖應用：
  • 目的地選擇：在旅行規劃應用中，城市選擇組件用于選擇旅行目的地。例如，用戶可以搜索并選擇目標城市，查看該城市的旅游景點、住宿信息等。
  • 地圖定位：在地圖應用中，城市選擇組件可以用于快速定位到某個城市。例如，用戶可以輸入城市名稱或選擇按省份分類，快速找到目標城市。
• 天氣預報應用：
  • 城市選擇：在天氣預報應用中，城市選擇組件用于選擇用戶想要查看天氣的城市。例如，用戶可以通過搜索或按字母分類選擇城市，查看該城市的天氣預報。
• 其他應用場景：
  • 招聘網站：在招聘網站中，城市選擇組件用于選擇職位所在的城市。例如，用戶可以搜索并選擇目標城市，查看該城市的招聘信息。
  • 在線教育平臺：在在線教育平臺中，城市選擇組件可以用于選擇課程所在的城市。例如，用戶可以選擇某個城市，查看該城市的線下課程。

2. 實現原理簡介

2.1 導航菜單實現原理

元件示例：

中繼器每項加載時：

點擊展開：

點擊收縮：

2.2 動態表格實現原理

元件示例：

中繼器每項加載時：

日期輸入篩選：

姓名輸入篩選：

分頁數量選擇：

選擇性別時：

3. 總結

使用中繼器實現上述組件的總結

在 Axure 原型設計中，中繼器（Repeater） 是一個功能極其強大的組件，它為設計師提供了一種高效、靈活、可擴展的組件實現方式。通過數據驅動的設計理念，中繼器使得我們能夠輕松構建各種復雜的交互式組件，如動態表格、多級導航菜單、樹形結構和城市選擇組件等。其強大的功能和高度的靈活性，使得我們能夠根據不同的需求和應用場景，定制出符合用戶需求的界面元素。

使用中繼器不僅提高了原型設計的效率，還增強了原型的交互性和真實感。它使得設計師能夠更專注于用戶體驗和功能實現，而無需過多關注底層的實現細節。因此，掌握中繼器的使用技巧，對于每一個 Axure 設計師來說，都是至關重要的。