在移動應用原型設計中，聊天界面因其動態、交互性強的特點，常常是設計的重點與難點。Axure RP作為一款強大的原型設計工具，其內置的“中繼器”組件是模擬動態數據的利器。本文將手把手教你如何巧妙地運用中繼器，高效、逼真地模擬出App的聊天界面。

一、 核心思路：理解中繼器與聊天界面的映射關系

聊天界面的核心是不斷更新的消息列表。每一條消息都包含幾個關鍵屬性：發送者（自己或對方）、消息內容、時間、頭像等。在Axure中，我們可以將中繼器的每一行數據視為一條消息，而每一列則對應消息的一個屬性（例如：Column0=發送者類型，Column1=消息內容，Column2=頭像URL）。通過動態加載中繼器數據并配合條件判斷，即可實現左右分列的聊天氣泡效果。

二、 基礎搭建：創建靜態框架

1. 布局準備：在畫布上放置一個矩形作為聊天窗口背景。在其內部，拖入一個中繼器組件，將其命名為“ChatRepeater”。這是所有動態消息的容器。
2. 設計消息項：雙擊進入中繼器內部。這里你需要設計單條消息的展示樣式。通常需要：

• 一個用于顯示頭像的圖片組件。

• 一個用于顯示消息內容的多行文本或矩形（作為氣泡背景）。

• 一個用于顯示時間的文本標簽。

• 將這些組件組合起來，形成一條完整的消息項模板。

三、 核心配置：讓中繼器“活”起來

1. 設置中繼器數據列：選中中繼器，在右側樣式面板中點擊“中繼器數據集”。添加必要的列，例如：

• sender (文本類型)：用于標識發送者，如“me”代表自己，“other”代表對方。

• content (文本類型)：消息正文。

• avatar (文本類型)：存放頭像圖片的路徑或URL。

• time (文本類型)：發送時間。

2. 填充初始數據：在數據集表格中，預先添加幾行數據，用于預覽效果。例如：
| sender | content | avatar | time |
| :--- | :--- | :--- | :--- |
| other | 嗨，你好！在忙嗎？ | /img/avatarother.png | 14:30 |
| me | 剛開完會，有什么事？ | /img/avatarme.png | 14:32 |

四、 關鍵交互：實現左右布局與數據綁定

這是最核心的一步，需要為“每項加載時”添加交互。

1. 設置頭像與內容：

• 設置文本：將中繼器內content文本組件的內容設置為 [[Item.content]]。

• 設置圖片：將頭像圖片的默認圖片設置為 [[Item.avatar]]。

1. 實現左右氣泡布局（條件判斷）：

• 添加“條件”判斷 [[Item.sender]] == "me"。

• 如果為真（自己發送）：

• 將消息氣泡背景（矩形）置于右側，并設置填充色（如綠色）。

• 將頭像置于右側。

• 可以調整文本顏色為白色。

• 如果為假（對方發送）：

• 將消息氣泡背景置于左側，并設置填充色（如灰色）。

• 將頭像置于左側。

• 注意：同時需要調整消息項內各個組件的相對位置，確保布局美觀。

1. 設置時間：將時間標簽的文本設置為 [[Item.time]]。

五、 動態交互：模擬發送新消息

一個完整的聊天界面需要能夠輸入并發送新消息。

1. 在聊天窗口底部添加一個文本框（用于輸入）和一個按鈕（作為發送按鈕）。
2. 為發送按鈕添加“單擊時”交互：

• 添加行到中繼器“ChatRepeater”。

• 設置新增行的數據：sender="me", content=文本框的文本值，time=當前時間（可用局部變量LVAR1獲取系統時間或固定格式），avatar為你的頭像路徑。

• 清空輸入文本框的內容。

• （可選）添加“滾動到”中繼器底部的交互，使界面自動跳轉到最新消息。

六、 優化與進階

• 時間格式化：可以通過更多的條件判斷，將時間顯示優化為“今天”、“昨天”或具體日期。
• 消息狀態：可以在數據集中增加status列（如sending, sent, read），并在消息項中通過不同圖標（如對勾）來模擬消息發送狀態。
• 豐富消息類型：通過增加type列（如text, image, voice），并配合條件判斷顯示不同的組件（圖片控件、語音波形圖），來模擬圖片消息和語音消息。
• 交互細節：為消息氣泡添加“鼠標單擊”或“長按”交互，模擬消息的復制、撤回、刪除等操作菜單。

###

通過以上步驟，你已經成功利用Axure中繼器構建了一個功能完整、交互真實的App聊天界面原型。中繼器的強大之處在于數據與樣式的分離，一旦模板和交互邏輯搭建完畢，你只需維護和更新背后的數據集，即可輕松生成任意數量的聊天記錄。多加練習，你便能舉一反三，用中繼器模擬出列表、商品卡片、時間線等各類動態界面，讓你的原型設計能力更上一層樓。