編輯導(dǎo)語：在前一篇文章《B端UI界面交互基礎(chǔ)組件-輸入框（下）》中，一起學(xué)習(xí)了B端“輸入框”組件UI設(shè)計規(guī)范，其中包括“多行文本”、“下拉選擇”；并從輸入框組件的需求場景、內(nèi)容布局以及交互方式等方面對以上組件進行了詳盡的規(guī)范描述；今天我們繼續(xù)介紹了B端“翻頁控制”組件的交互規(guī)范。

一、常規(guī)翻頁

1. 需求場景

需要對數(shù)據(jù)讀取進行跳轉(zhuǎn)。

2. 內(nèi)容布局

1）布局分為：統(tǒng)計信息、翻頁控制。

2）統(tǒng)計信息居右顯示，包含已選擇條目數(shù)量、總共條目數(shù)量、每頁顯示條目數(shù)。

使用場景中如不存在的選擇行為，則不顯示選擇條目數(shù)：

如不允許變更每頁顯示條目數(shù)，則直接顯示條目文本：

3）翻頁控制按鈕，支持同時顯示3個跳轉(zhuǎn)頁碼。

當(dāng)頁碼小于10個時，不顯示頁碼跳轉(zhuǎn)輸入框：

當(dāng)前頁碼用選中狀態(tài)標(biāo)注：

當(dāng)前頁為第一頁：當(dāng)前頁，當(dāng)前頁+1，當(dāng)前頁+2（總頁數(shù)大于等于3）：

當(dāng)前頁為最后一頁：當(dāng)前頁-2（總頁數(shù)大于等于3），當(dāng)前頁-1：

其他：當(dāng)前頁-1，當(dāng)前頁，當(dāng)前頁+1。

4）跳轉(zhuǎn)獲取鼠標(biāo)焦點時，顯示頁碼跳轉(zhuǎn)按鈕。

3. 交互行為

切換每頁顯示條目數(shù)時，自動跳轉(zhuǎn)到第一頁，頁碼同步刷新、跳轉(zhuǎn)到輸入框等操作按照內(nèi)容布局相關(guān)約束執(zhí)行。

頁碼跳轉(zhuǎn)后，對應(yīng)頁碼數(shù)據(jù)同步刷新。

點擊頁碼跳轉(zhuǎn)、或頁碼直接跳轉(zhuǎn)到對應(yīng)頁/點擊頁碼跳轉(zhuǎn)（當(dāng)前頁不支持跳轉(zhuǎn)）。

點擊其他翻頁按鈕跳轉(zhuǎn)，頁碼已顯示至尾頁，禁用下一頁、尾頁跳轉(zhuǎn)按鈕。

4）跳轉(zhuǎn)到文本框獲取焦點后，水印文本消失，頁碼跳轉(zhuǎn)按鈕顯示：

5）輸入頁碼后，敲擊Enter鍵或鼠標(biāo)點擊跳轉(zhuǎn)按鈕，執(zhí)行跳轉(zhuǎn)操作。

6）跳轉(zhuǎn)頁碼不允許輸入非正整數(shù)，輸入不合法數(shù)據(jù)執(zhí)行跳轉(zhuǎn)操作時，不執(zhí)行跳轉(zhuǎn)操作。

7）跳轉(zhuǎn)頁碼輸入為大于允許輸入最大頁碼數(shù)時，自動替換為最大頁碼數(shù)。

8）執(zhí)行跳轉(zhuǎn)操作時，自動清除頁碼跳轉(zhuǎn)輸入框內(nèi)容，并移除光標(biāo)。

9）當(dāng)跳轉(zhuǎn)時，當(dāng)前頁碼返回數(shù)據(jù)為空，則自動刷新翻頁控制區(qū)域，并再次執(zhí)行跳轉(zhuǎn)到最后一頁操作。

10）根據(jù)跳轉(zhuǎn)頁碼，標(biāo)注當(dāng)前頁碼為選中狀態(tài)：

當(dāng)前頁為第一頁、禁用“首頁”、“上一頁”按鈕：

當(dāng)前頁為最后一頁、禁用“尾頁”、“下一頁”按鈕：

僅有一頁時，禁用所有翻頁跳轉(zhuǎn)按鈕：

其他情況翻頁跳轉(zhuǎn)均可用：

二、簡單翻頁

1. 需求場景

• 需要對數(shù)據(jù)讀取進行跳轉(zhuǎn)。
• 一般推薦使用者按順序翻頁。

2. 內(nèi)容布局

1）布局分別為，統(tǒng)計信息、翻頁控制。

2）統(tǒng)計信息居右顯示，包含已選擇條目數(shù)量、總共條目數(shù)量、每頁顯示條目數(shù)。

使用場景中如不存在選擇行為，則不顯示選擇條目數(shù)：

如不允許變更每頁顯示條目數(shù)，則直接顯示條目文本：

3）翻頁控制按鈕，顯示當(dāng)前頁碼。

當(dāng)前頁碼數(shù)小于5時，顯示1~10，上限以最大頁碼為準(zhǔn)：

當(dāng)前頁碼大于5時，頁碼范圍為當(dāng)前頁碼前后4后5（合計10個頁碼）：

當(dāng)前頁碼+5大于總頁碼時，頁碼范圍為總頁碼-9至總頁碼：

3. 交互行為

每頁條目數(shù)變更交互邏輯與常規(guī)翻頁相同。

點擊當(dāng)前頁下拉菜單，出現(xiàn)頁碼跳轉(zhuǎn)，內(nèi)容規(guī)則則參見內(nèi)容布局翻頁控制按鈕說明。

首頁、上一頁、下一頁、尾頁交互邏輯參見常規(guī)翻頁對應(yīng)交互行為說明。

三、極簡翻頁

1. 需求場景

• 需要使用翻頁跳轉(zhuǎn)。
• 顯示空間不足。

2. 內(nèi)容布局

1）布局分為——統(tǒng)計信息、翻頁控制。

2）翻頁控制按鈕，顯示當(dāng)前頁數(shù)據(jù)條目區(qū)間，取件顯示寬度以區(qū)間數(shù)據(jù)自動展示：

3）翻頁區(qū)間跳轉(zhuǎn)記錄中顯示對應(yīng)頁碼數(shù)據(jù)條目區(qū)間，最后一頁區(qū)間以實際區(qū)間數(shù)據(jù)為準(zhǔn)：

當(dāng)前頁碼數(shù)小于5時，顯示1~10頁相應(yīng)記錄區(qū)間，上限以最大頁碼為準(zhǔn)：

當(dāng)前頁碼大于5時，頁碼范圍為當(dāng)前頁碼前4后5（合計10個頁碼）：

當(dāng)前頁碼+5大于總頁碼時，頁碼范圍為總頁碼-9至總頁碼：

3. 交互行為

當(dāng)前頁為第一頁時，上一頁按鈕禁用。

當(dāng)前頁為最后一頁時，下一頁按鈕禁用。

在跳轉(zhuǎn)列表中有第一頁區(qū)間數(shù)據(jù)時，不顯示跳轉(zhuǎn)至第一頁按鈕：

在跳轉(zhuǎn)頁表中有最后一頁區(qū)間數(shù)據(jù)時，不顯示跳轉(zhuǎn)至最后一頁按鈕。

四、總結(jié)

關(guān)于B端基礎(chǔ)交互組件“翻頁控制”的相關(guān)分享就到這里，下一章我們介紹“表格”包括基礎(chǔ)表格、分屏表格、分頁表格的相關(guān)交互規(guī)范。

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

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