編輯導(dǎo)讀：Web產(chǎn)品的分頁組件是畫列表頁必須用到的功能，所以產(chǎn)品經(jīng)理有必要深入了解它的各種交互和對(duì)應(yīng)的原型畫法。本文作者從自身實(shí)踐經(jīng)驗(yàn)出發(fā)，分享了幾種常見分頁組件的樣式和交互效果，供大家一同參考和學(xué)習(xí)。

分頁組件提供了總條數(shù)、采用分頁的形式分隔長列表，支持跳轉(zhuǎn)到指定頁碼。它通常和列表組件一起使用。關(guān)于列表組件的相關(guān)介紹可參考相應(yīng)文章如何用Axure畫出Web的列表組件：基礎(chǔ)畫法和如何用Axure畫出Web產(chǎn)品的列表組件：高級(jí)交互。

本文詳細(xì)講解了分頁組件的常見樣式，常見元素、常見狀態(tài)、以及每個(gè)元素的交互效果。

原型演示地址：https://h9d53o.axshare.com

01 分頁的常見樣式

羅列幾種常見的分頁組件樣式，PM可以根據(jù)自己的需要選擇合適的樣式。

02 分頁的常見元素

分頁組件通常包含以下元素，PM可以自由組合其中的部分。

• 總計(jì)X條?統(tǒng)計(jì)當(dāng)前列表或者搜索后列表的總條數(shù)，以及每頁顯示多少條數(shù)據(jù)。
• 每頁Y條?通常設(shè)置每頁10條或者20條，如果該列表數(shù)據(jù)特別多也可以讓用戶選擇。
• 數(shù)字頁碼?顯示頁碼數(shù)字1、2、3、4……，點(diǎn)擊可以跳轉(zhuǎn)到對(duì)應(yīng)的第N頁并加載列表數(shù)據(jù)。
• 首頁尾頁?可以采用文字按鈕或者圖標(biāo)來表示，如上圖樣式5和樣式6。
• 上頁下頁?回到上一頁或者進(jìn)入下一頁，可以使用圖標(biāo)“<”表示上一頁，圖標(biāo)“>”表示下一頁。
• 前往N頁?輸入數(shù)字然后按下Enter或者return按鍵即可進(jìn)入對(duì)應(yīng)的頁面。如果只有一頁，則不顯示“前往N頁”。

03 分頁的常見狀態(tài)

• 初始狀態(tài)?即分頁的初始狀態(tài)。加載列表的時(shí)候可能會(huì)看到，一閃而過。
• 選中狀態(tài)?即分頁的默認(rèn)狀態(tài)，當(dāng)前頁碼處于選中狀態(tài)并且顯示相應(yīng)的交互效果。
• 懸停狀態(tài)?即懸停某個(gè)頁碼的時(shí)候，顯示的交互效果。
• 點(diǎn)擊狀態(tài)?即點(diǎn)擊某個(gè)頁碼的時(shí)候，顯示的交互效果。一般無需設(shè)置。

1. 如何畫出初始狀態(tài)

從默認(rèn)元件庫拖動(dòng)“矩形1”到畫布合適位置，尺寸修改為25*25，雙擊輸入“1”。復(fù)制N份然后修改成對(duì)應(yīng)的數(shù)字，相鄰間隔設(shè)置為5px。

2. 如何畫出選中狀態(tài)

同時(shí)選擇這些元件，右鍵點(diǎn)擊“交互樣式”顯示彈窗“交互樣式”，切換到“選中”選項(xiàng)卡，勾選填充顏色并設(shè)置為藍(lán)色#0000FF，勾選字色并設(shè)置為#FFFFF。

點(diǎn)擊第一個(gè)元件即頁碼1，右側(cè)邊欄切換到“交互”按鈕，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“設(shè)置選中”，目標(biāo)選擇“當(dāng)前元件”。然后復(fù)制該事件到其他頁碼元件上面。

同時(shí)選擇這些元件，右鍵點(diǎn)擊“選項(xiàng)組”，然后在彈窗中設(shè)置組名稱“頁碼”，點(diǎn)擊“確定”按鈕。

點(diǎn)擊頁碼1元件，右鍵點(diǎn)擊“選中”，這樣查看原型的時(shí)候表示默認(rèn)進(jìn)入列表的第一頁。

3. 如何畫出懸停狀態(tài)

點(diǎn)擊第一個(gè)元件即頁碼1，右鍵點(diǎn)擊“交互樣式”顯示彈窗，切換到“鼠標(biāo)懸?！?，勾選字色然后修改為藍(lán)色#0000FF，勾選線段顏色并設(shè)置為藍(lán)色#0000FF，勾選邊框?qū)挾仍O(shè)置為1，點(diǎn)擊確定按鈕。然后復(fù)制該交互樣式到其他頁碼元件上面。

4. 如何畫出點(diǎn)擊狀態(tài)

效果同選中狀態(tài)，詳見上文。

04 分頁的交互效果

分頁組件的交互效果，其實(shí)就是畫出每個(gè)元素的交互效果。

1. 顯示總計(jì)條數(shù)效果

1、從默認(rèn)元件庫拖動(dòng)“文本標(biāo)簽”到畫布合適位置，雙擊修改文字“總計(jì)x條”，代表了初始值。字色修改為#7F7F7F。

2、點(diǎn)擊頁面空白區(qū)域，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)條件“頁面載入時(shí)”，添加動(dòng)作“設(shè)置文本”，目標(biāo)選擇“總計(jì)X條”元件，點(diǎn)擊值后面的fx進(jìn)入彈窗“編輯文本”，點(diǎn)擊下方的“添加局部變量”文字按鈕，然后自動(dòng)生成變量[LVAR1]，將第二個(gè)下拉列表框切換成“元件”，然后第三個(gè)下拉列表框去選擇中繼器“列表值”。然后點(diǎn)擊上方輸入框中總計(jì)x條的“x”，然后“插入變量或函數(shù)”文字按鈕后在下拉框中選擇item.Count即可得到最終的函數(shù)，最后點(diǎn)擊“確定”按鈕。

3、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

2. 調(diào)整每頁條數(shù)效果

1、從默認(rèn)元件庫拖動(dòng)“下拉列表框”到畫布合適位置，尺寸修改為80*25px，雙擊顯示彈窗“編輯下拉列表”，點(diǎn)擊“編輯多項(xiàng)”然后在對(duì)應(yīng)彈窗的的輸入框中輸入多個(gè)值，最后點(diǎn)擊“確定”按鈕保存。當(dāng)然也可以點(diǎn)擊“添加”按鈕一個(gè)一個(gè)進(jìn)行添加。

2、點(diǎn)擊該下拉列表框，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)條件“選項(xiàng)改變時(shí)”，添加動(dòng)作“設(shè)置每頁項(xiàng)目數(shù)量”，目標(biāo)選擇“列表值”中繼器元件，列表項(xiàng)單選第二個(gè)，點(diǎn)擊值后面的fx進(jìn)入彈窗“編輯文本”，點(diǎn)擊下方的“添加局部變量”文字按鈕，然后自動(dòng)生成變量[LVAR1]，將第二個(gè)下拉列表框切換成“被選項(xiàng)”，然后第三個(gè)下拉列表框使用默認(rèn)的“當(dāng)前”元件。

然后點(diǎn)擊上方的“插入變量或函數(shù)”文字按鈕后在下拉框中選擇substr(start,length)然后自動(dòng)填充到輸入框，將變量LVAR改成LVAR1，將length改成2代表取前面2個(gè)字符，從而得到最終的函數(shù)，最后點(diǎn)擊“確定”按鈕。

3、由于切換每頁項(xiàng)目數(shù)量的時(shí)候列表內(nèi)容會(huì)延長從而擋住相應(yīng)內(nèi)容，所以我們需要做一些處理。將列表項(xiàng)中繼器右鍵轉(zhuǎn)換為動(dòng)態(tài)面板然后命名為“列表”，然后繼續(xù)點(diǎn)擊該下拉列表框，在原有的動(dòng)作前面添加動(dòng)作“顯示/隱藏”，目標(biāo)選擇“列表”動(dòng)態(tài)面板，點(diǎn)選“隱藏”，更多選項(xiàng)切換到“拉動(dòng)元件”，在原有的動(dòng)作后面添加動(dòng)作“顯示/隱藏”，目標(biāo)選擇“列表”動(dòng)態(tài)面板，點(diǎn)選“顯示”，更多選項(xiàng)切換到“推動(dòng)元件”。

4、點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

3. 點(diǎn)擊指定頁碼效果

在之前的交互樣式基礎(chǔ)上，點(diǎn)擊“+”繼續(xù)添加動(dòng)作“設(shè)置當(dāng)前顯示頁面”，目標(biāo)選擇“列表值”中繼器，點(diǎn)擊頁碼后面的fx進(jìn)入彈窗“編輯值”，點(diǎn)擊文字按鈕“添加局部變量”后會(huì)自動(dòng)創(chuàng)建一個(gè)獲取當(dāng)前元件文字的變量，然后點(diǎn)擊文字按鈕“插入變量或函數(shù)”然后選擇LVAR1這個(gè)函數(shù)到輸入框，點(diǎn)擊“確定”按鈕。然后復(fù)制該事件到其他頁碼元件上面。

點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

4. 點(diǎn)擊上一頁和下一頁效果

在點(diǎn)擊指定頁碼效果的基礎(chǔ)上，從默認(rèn)元件庫拖動(dòng)“矩形1”到頁碼前面位置，尺寸修改為25*25px，雙擊輸入“ <”表示上一頁。復(fù)制一份到頁碼后面位置，修改文字為“>”表示下一頁。

點(diǎn)擊“<”元件，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“設(shè)置當(dāng)前顯示頁面”，目標(biāo)選擇“列表值”中繼器，頁面切換到“上一頁”，點(diǎn)擊“確定”按鈕。

點(diǎn)擊“>”元件，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“設(shè)置當(dāng)前顯示頁面”，目標(biāo)選擇“列表值”中繼器，頁面切換到“下一頁”，點(diǎn)擊“完成”按鈕。

點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

5. 點(diǎn)擊回首頁和去尾頁效果

從默認(rèn)元件庫拖動(dòng)“矩形1”到頁碼前面位置，尺寸修改為25*25px，雙擊輸入“ |<”表示首頁。復(fù)制一份到頁碼后面位置，修改文字為“>|”表示尾頁。

點(diǎn)擊“|<”元件，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“設(shè)置當(dāng)前顯示頁面”，目標(biāo)選擇“列表值”中繼器，頁面保持“值”，頁碼保持“1”，點(diǎn)擊“完成”按鈕。

點(diǎn)擊“>|”元件，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時(shí)”，添加動(dòng)作“設(shè)置當(dāng)前顯示頁面”，目標(biāo)選擇“列表值”中繼器，頁面切換到“尾頁”，點(diǎn)擊“完成”按鈕。

點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

6. 前往指定頁碼效果

從默認(rèn)元件庫拖動(dòng)“文本框”到前面合適位置，尺寸修改為合適尺寸40*25px，命名為“輸入頁碼”，框內(nèi)提示文本輸入“頁碼”。然后從默認(rèn)元件庫拖動(dòng)“文本標(biāo)簽”到畫布合適位置，雙擊輸入文字“跳轉(zhuǎn)”。

點(diǎn)擊“跳轉(zhuǎn)”按鈕，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，點(diǎn)擊“+”繼續(xù)添加動(dòng)作“設(shè)置當(dāng)前顯示頁面”，目標(biāo)選擇“列表值”中繼器，點(diǎn)擊頁碼后面的fx進(jìn)入彈窗“編輯值”，點(diǎn)擊文字按鈕“添加局部變量”后會(huì)自動(dòng)創(chuàng)建一個(gè)獲取當(dāng)前元件文字的變量，修改目標(biāo)元件為“輸入頁碼”文本框，最后點(diǎn)擊“確定”按鈕，再點(diǎn)擊“完成”按鈕。

點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

#相關(guān)閱讀#

如何用Axure畫出Web的列表組件：基礎(chǔ)畫法

如何用Axure畫出Web產(chǎn)品的列表組件：高級(jí)交互

#專欄作家#

浪子，個(gè)人微信langzipm，公眾號(hào)：浪子畫原型(langzisay)。專注于Axure原型設(shè)計(jì)和產(chǎn)品規(guī)范。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。