中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、常規(guī)翻頁

1. 需求場景

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

2. 內(nèi)容布局

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

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

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

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

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

當(dāng)頁碼小于10個(gè)時(shí)，不顯示頁碼跳轉(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)焦點(diǎn)時(shí)，顯示頁碼跳轉(zhuǎn)按鈕。

3. 交互行為

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、簡單翻頁

1. 需求場景

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

2. 內(nèi)容布局

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

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

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

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

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

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

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

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

3. 交互行為

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

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

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

三、極簡翻頁

1. 需求場景

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

2. 內(nèi)容布局

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

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

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

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

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

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

3. 交互行為

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

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

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

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

四、總結(jié)

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

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

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