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

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

聊天界面的核心是不斷更新的消息列表。每一條消息都包含幾個關(guān)鍵屬性：發(fā)送者（自己或?qū)Ψ剑⑾?nèi)容、時間、頭像等。在Axure中，我們可以將中繼器的每一行數(shù)據(jù)視為一條消息，而每一列則對應(yīng)消息的一個屬性（例如：Column0=發(fā)送者類型，Column1=消息內(nèi)容，Column2=頭像URL）。通過動態(tài)加載中繼器數(shù)據(jù)并配合條件判斷，即可實(shí)現(xiàn)左右分列的聊天氣泡效果。

二、 基礎(chǔ)搭建：創(chuàng)建靜態(tài)框架

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

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

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

• 一個用于顯示時間的文本標(biāo)簽。

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

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

1. 設(shè)置中繼器數(shù)據(jù)列：選中中繼器，在右側(cè)樣式面板中點(diǎn)擊“中繼器數(shù)據(jù)集”。添加必要的列，例如：

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

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

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

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

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

四、 關(guān)鍵交互：實(shí)現(xiàn)左右布局與數(shù)據(jù)綁定

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

1. 設(shè)置頭像與內(nèi)容：

• 設(shè)置文本：將中繼器內(nèi)content文本組件的內(nèi)容設(shè)置為 [[Item.content]]。

• 設(shè)置圖片：將頭像圖片的默認(rèn)圖片設(shè)置為 [[Item.avatar]]。

1. 實(shí)現(xiàn)左右氣泡布局（條件判斷）：

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

• 如果為真（自己發(fā)送）：

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

• 將頭像置于右側(cè)。

• 可以調(diào)整文本顏色為白色。

• 如果為假（對方發(fā)送）：

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

• 將頭像置于左側(cè)。

• 注意：同時需要調(diào)整消息項(xiàng)內(nèi)各個組件的相對位置，確保布局美觀。

1. 設(shè)置時間：將時間標(biāo)簽的文本設(shè)置為 [[Item.time]]。

五、 動態(tài)交互：模擬發(fā)送新消息

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

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

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

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

• 清空輸入文本框的內(nèi)容。

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

六、 優(yōu)化與進(jìn)階

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

###

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