Axure是一款功能強(qiáng)大的原型設(shè)計(jì)工具，可以用于制作各種互聯(lián)網(wǎng)產(chǎn)品的交互原型。在本文中，我們將分享一個(gè)使用Axure制作“注冊(cè)用戶名檢驗(yàn)”案例的思路，并提供效果參考。案例效果參考下面是該案例的示意圖：

Axure是一款功能強(qiáng)大的原型設(shè)計(jì)工具，可以用于制作各種互聯(lián)網(wǎng)產(chǎn)品的交互原型。在本文中，我們將分享一個(gè)使用Axure制作“注冊(cè)用戶名檢驗(yàn)”案例的思路，并提供效果參考。

案例效果參考

下面是該案例的示意圖：

1. 當(dāng)輸入為空時(shí)，提示：請(qǐng)輸入用戶名。

2. 當(dāng)輸入已經(jīng)存在的賬號(hào)時(shí)，提示：賬號(hào)已經(jīng)存在。

3. 當(dāng)輸入可用的用戶名時(shí)，顯示勾選圖標(biāo)。

布局和元素準(zhǔn)備

首先，我們需要?jiǎng)?chuàng)建以下元素：

- 兩個(gè)文本標(biāo)簽（分別用于顯示"用戶名"和"提示"）

- 一個(gè)文本框（用于用戶輸入用戶名）

- 一個(gè)勾選圖標(biāo)（表示用戶名可用）

并按照以下布局進(jìn)行排列：

- 隱藏勾選圖標(biāo)和提示。

全局變量設(shè)置

創(chuàng)建一個(gè)全局變量"UserName"，并設(shè)置內(nèi)容為：

- Arthur

- jack

- Alice

- admin

- user

全局變量的設(shè)置如下圖所示：

[圖片]

設(shè)置輸入驗(yàn)證動(dòng)作

下一步是設(shè)置文本輸入框的驗(yàn)證動(dòng)作，需要定義在文本改變時(shí)和失去焦點(diǎn)時(shí)的動(dòng)作。

文本改變時(shí)的動(dòng)作：

條件1：當(dāng)輸入為空或包含"請(qǐng)輸入用戶名..."時(shí)。

- 隱藏勾選圖標(biāo)。

- 隱藏提示。

條件2：當(dāng)輸入為已經(jīng)存在的賬號(hào)時(shí)。

- 隱藏勾選圖標(biāo)。

- 顯示提示，內(nèi)容為"賬號(hào)已經(jīng)存在"。

條件3：其他情況。

- 顯示勾選圖標(biāo)。

- 隱藏提示。

失去焦點(diǎn)時(shí)的動(dòng)作：

條件1：當(dāng)輸入為空或包含"請(qǐng)輸入用戶名..."時(shí)。

- 隱藏勾選圖標(biāo)。

- 隱藏提示。

- 文本輸入框獲得焦點(diǎn)。

- 設(shè)置文本輸入框內(nèi)容為"請(qǐng)輸入用戶名..."。

條件2：當(dāng)輸入為已經(jīng)存在的賬號(hào)時(shí)。

- 文本輸入框獲得焦點(diǎn)。

所有動(dòng)作的設(shè)置如下圖所示：

[圖片]

查看效果

設(shè)置完動(dòng)作后，你可以查看效果了。分別輸入"已有的賬號(hào)"、"不存在的賬號(hào)"以及空賬號(hào)來測(cè)試。

完成上述步驟后，你已經(jīng)成功制作了一個(gè)注冊(cè)用戶名檢驗(yàn)的案例！