起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何用Axure畫出Web產品的分頁組件？
編輯導讀：Web產品的分頁組件是畫列表頁必須用到的功能，所以產品經理有必要深入了解它的各種交互和對應的原型畫法。本文作者從自身實踐經驗出發，分享了幾種常見分頁組件的樣式和交互效果，供大家一同參考和學習。
分頁組件提供了總條數、采用分頁的形式分隔長列表，支持跳轉到指定頁碼。它通常和列表組件一起使用。關于列表組件的相關介紹可參考相應文章如何用Axure畫出Web的列表組件：基礎畫法和如何用Axure畫出Web產品的列表組件：高級交互。
本文詳細講解了分頁組件的常見樣式，常見元素、常見狀態、以及每個元素的交互效果。
原型演示地址：https://h9d53o.axshare.com
01 分頁的常見樣式
羅列幾種常見的分頁組件樣式，PM可以根據自己的需要選擇合適的樣式。
02 分頁的常見元素
分頁組件通常包含以下元素，PM可以自由組合其中的部分。
- 總計X條?統計當前列表或者搜索后列表的總條數，以及每頁顯示多少條數據。
- 每頁Y條?通常設置每頁10條或者20條，如果該列表數據特別多也可以讓用戶選擇。
- 數字頁碼?顯示頁碼數字1、2、3、4……，點擊可以跳轉到對應的第N頁并加載列表數據。
- 首頁尾頁?可以采用文字按鈕或者圖標來表示，如上圖樣式5和樣式6。
- 上頁下頁?回到上一頁或者進入下一頁，可以使用圖標“<”表示上一頁，圖標“>”表示下一頁。
- 前往N頁?輸入數字然后按下Enter或者return按鍵即可進入對應的頁面。如果只有一頁，則不顯示“前往N頁”。
03 分頁的常見狀態
- 初始狀態?即分頁的初始狀態。加載列表的時候可能會看到，一閃而過。
- 選中狀態?即分頁的默認狀態，當前頁碼處于選中狀態并且顯示相應的交互效果。
- 懸停狀態?即懸停某個頁碼的時候，顯示的交互效果。
- 點擊狀態?即點擊某個頁碼的時候，顯示的交互效果。一般無需設置。
1. 如何畫出初始狀態
從默認元件庫拖動“矩形1”到畫布合適位置，尺寸修改為25*25，雙擊輸入“1”。復制N份然后修改成對應的數字，相鄰間隔設置為5px。
2. 如何畫出選中狀態
同時選擇這些元件，右鍵點擊“交互樣式”顯示彈窗“交互樣式”，切換到“選中”選項卡，勾選填充顏色并設置為藍色#0000FF，勾選字色并設置為#FFFFF。
點擊第一個元件即頁碼1，右側邊欄切換到“交互”按鈕，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“設置選中”，目標選擇“當前元件”。然后復制該事件到其他頁碼元件上面。
同時選擇這些元件，右鍵點擊“選項組”，然后在彈窗中設置組名稱“頁碼”，點擊“確定”按鈕。
點擊頁碼1元件，右鍵點擊“選中”，這樣查看原型的時候表示默認進入列表的第一頁。
3. 如何畫出懸停狀態
點擊第一個元件即頁碼1，右鍵點擊“交互樣式”顯示彈窗，切換到“鼠標懸停”，勾選字色然后修改為藍色#0000FF，勾選線段顏色并設置為藍色#0000FF，勾選邊框寬度設置為1，點擊確定按鈕。然后復制該交互樣式到其他頁碼元件上面。
4. 如何畫出點擊狀態
效果同選中狀態，詳見上文。
04 分頁的交互效果
分頁組件的交互效果，其實就是畫出每個元素的交互效果。
1. 顯示總計條數效果
1、從默認元件庫拖動“文本標簽”到畫布合適位置，雙擊修改文字“總計x條”，代表了初始值。字色修改為#7F7F7F。
2、點擊頁面空白區域，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發條件“頁面載入時”，添加動作“設置文本”，目標選擇“總計X條”元件，點擊值后面的fx進入彈窗“編輯文本”，點擊下方的“添加局部變量”文字按鈕，然后自動生成變量[LVAR1]，將第二個下拉列表框切換成“元件”，然后第三個下拉列表框去選擇中繼器“列表值”。然后點擊上方輸入框中總計x條的“x”，然后“插入變量或函數”文字按鈕后在下拉框中選擇item.Count即可得到最終的函數，最后點擊“確定”按鈕。
3、點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
2. 調整每頁條數效果
1、從默認元件庫拖動“下拉列表框”到畫布合適位置，尺寸修改為80*25px，雙擊顯示彈窗“編輯下拉列表”，點擊“編輯多項”然后在對應彈窗的的輸入框中輸入多個值，最后點擊“確定”按鈕保存。當然也可以點擊“添加”按鈕一個一個進行添加。
2、點擊該下拉列表框，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發條件“選項改變時”，添加動作“設置每頁項目數量”，目標選擇“列表值”中繼器元件，列表項單選第二個，點擊值后面的fx進入彈窗“編輯文本”，點擊下方的“添加局部變量”文字按鈕，然后自動生成變量[LVAR1]，將第二個下拉列表框切換成“被選項”，然后第三個下拉列表框使用默認的“當前”元件。
然后點擊上方的“插入變量或函數”文字按鈕后在下拉框中選擇substr(start,length)然后自動填充到輸入框，將變量LVAR改成LVAR1，將length改成2代表取前面2個字符，從而得到最終的函數，最后點擊“確定”按鈕。
3、由于切換每頁項目數量的時候列表內容會延長從而擋住相應內容，所以我們需要做一些處理。將列表項中繼器右鍵轉換為動態面板然后命名為“列表”，然后繼續點擊該下拉列表框，在原有的動作前面添加動作“顯示/隱藏”，目標選擇“列表”動態面板，點選“隱藏”，更多選項切換到“拉動元件”，在原有的動作后面添加動作“顯示/隱藏”，目標選擇“列表”動態面板，點選“顯示”，更多選項切換到“推動元件”。
4、點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
3. 點擊指定頁碼效果
在之前的交互樣式基礎上，點擊“+”繼續添加動作“設置當前顯示頁面”，目標選擇“列表值”中繼器，點擊頁碼后面的fx進入彈窗“編輯值”，點擊文字按鈕“添加局部變量”后會自動創建一個獲取當前元件文字的變量，然后點擊文字按鈕“插入變量或函數”然后選擇LVAR1這個函數到輸入框，點擊“確定”按鈕。然后復制該事件到其他頁碼元件上面。
點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
4. 點擊上一頁和下一頁效果
在點擊指定頁碼效果的基礎上，從默認元件庫拖動“矩形1”到頁碼前面位置，尺寸修改為25*25px，雙擊輸入“ <”表示上一頁。復制一份到頁碼后面位置，修改文字為“>”表示下一頁。
點擊“<”元件，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“設置當前顯示頁面”，目標選擇“列表值”中繼器，頁面切換到“上一頁”，點擊“確定”按鈕。
點擊“>”元件，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“設置當前顯示頁面”，目標選擇“列表值”中繼器，頁面切換到“下一頁”，點擊“完成”按鈕。
點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
5. 點擊回首頁和去尾頁效果
從默認元件庫拖動“矩形1”到頁碼前面位置，尺寸修改為25*25px，雙擊輸入“ |<”表示首頁。復制一份到頁碼后面位置，修改文字為“>|”表示尾頁。
點擊“|<”元件，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“設置當前顯示頁面”，目標選擇“列表值”中繼器，頁面保持“值”，頁碼保持“1”，點擊“完成”按鈕。
點擊“>|”元件，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發事件“單擊時”，添加動作“設置當前顯示頁面”，目標選擇“列表值”中繼器，頁面切換到“尾頁”，點擊“完成”按鈕。
點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
6. 前往指定頁碼效果
從默認元件庫拖動“文本框”到前面合適位置，尺寸修改為合適尺寸40*25px，命名為“輸入頁碼”，框內提示文本輸入“頁碼”。然后從默認元件庫拖動“文本標簽”到畫布合適位置，雙擊輸入文字“跳轉”。
點擊“跳轉”按鈕，右側邊欄切換到“交互”，點擊“新建交互”按鈕，點擊“+”繼續添加動作“設置當前顯示頁面”，目標選擇“列表值”中繼器，點擊頁碼后面的fx進入彈窗“編輯值”，點擊文字按鈕“添加局部變量”后會自動創建一個獲取當前元件文字的變量，修改目標元件為“輸入頁碼”文本框，最后點擊“確定”按鈕，再點擊“完成”按鈕。
點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。
#相關閱讀#
#專欄作家#
浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于Axure原型設計和產品規范。
本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
