Axure制作手機APP通訊錄搜索交互原型教程；
首先，我們使用repeater來制作人員信息列表。復讀機的西面放置壹個白底矩形、壹個圖片元素(對應人物頭像)和壹個文字標簽(對應人物姓名)。
在repeater表中，我們插入兩個對應的列，分別是name(對應人名)和picture(對應人頭)。我們在repeater表中填入姓名，並導入相應的頭像:
當repeater加載每壹項時，設置交互，用文本的交互將表格中name列的值設置為文本標簽，然後用圖片的交互將表格中圖片中的圖片設置為圖片元素。
二、模糊搜索效果的制作我們需要壹個輸入框、壹個搜索按鈕、壹個取消按鈕、壹個背景矩形和壹個搜索背景矩形:
因為移動端壹般不需要點擊搜索按鈕，所以我們在文字發生變化時，在輸入框中寫入過濾後的交互，我們通過添加過濾後的交互來過濾重復者。這裏，我們需要使用indexof函數，Target Item。姓名。Index of (this.text)，查看當前文本框中輸入的值是否包含在repeater表的name列的值中。如果是，結果會大於-1，所以我們過濾。
這是最基本的模糊搜索。如果需要考慮大小寫關系，比如名字叫cat，就不能用上面的方式輸入進行搜索。如果您希望搜索時不考慮大小寫，toUpperCase函數可以將所有對應的值轉換為大寫。我們可以使用該函數將Name列中的值和輸入框中的值轉換為大寫，這樣就可以進行不區分大小寫的模糊搜索交互。
考慮到這裏沒有搜索效果，我們在repeater的第壹行添加壹個文本標簽(無文本)。至於底層，只是被中繼器屏蔽了。如果沒有結果行，您將看到以下提示文本。如果有數據，數據就會屏蔽。
如果搜索框想要頂級效果，我們就把repeater和上面的提示文字變成動態面板，然後調出垂直滾動條，或者把搜索區域的元素變成左上角固定的動態面板。
之後我們把所有的組件變成壹個動態面板，狀態命名為搜索頁面，然後我們在上面加壹個狀態，命名為通訊錄，我們在上面做字母定位的效果。
因此，當單擊“取消”按鈕時，我們將取消搜索過濾。這裏我們可以通過設置文本交互將輸入框的值設置為空，然後通過設置面板狀態交互將動態面板設置為通訊錄狀態。
三、通訊錄頁面的設置主要是錨矩形和重復項，搜索圖標和A-Z和#的文字放置:
上面的通訊錄、搜索圖片、背景矩形可以變成動態面板，固定在左上角。
用鼠標點擊搜索按鈕，我們設置整個動態面板以設置面板狀態的交互跳轉到搜索頁面，就是上面的內容。
下面的部分，我們需要先用壹個長方形作為ABCD的錨點，然後可以復制前面做的復讀機，按照內容分開放置在對應的錨點下面。
把它們壹壹放到相應的位置後，我們加上A-Z和#把它們變成動態面板，固定在右邊相應的位置。
當鼠標點擊字母A時，我們利用滾動到組件的交互，在矩形A中設置錨點，增加線性動畫效果。
當鼠標點擊字母B時，我們利用滾動到組件的交互，在矩形B中設置錨點，增加線性動畫效果。
當鼠標點擊字母C時，我們利用滾動到組件的交互，在矩形C中設置錨點，增加了線性動畫效果。
當鼠標點擊字母Z時，我們通過滾動到組件的交互，在矩形Z中設置錨點，添加線性動畫效果。
當鼠標點擊#時，我們利用滾動到組件的交互，在矩形#中設置錨點，添加線性動畫效果。
我們將完成字母定位的效果。
以上是關於“Axure如何做壹個手機APP通訊錄搜索的交互原型？”精彩內容我都分享了，希望對妳有幫助！了解更多關於Axure原型的技能。為什麽不多看壹些關於Axure的文章？其實學習Axure很簡單，用方法論就能快速掌握它的原理！加油，跟老師學Axure，保證能快速上手~