天天插天天日天天日,91亚洲欧美福利在线观看,日韩在线日韩在线日韩在线

當(dāng)前位置：

主頁

網(wǎng)站制作資訊

建站行業(yè)資訊

手機網(wǎng)站建設(shè)不可忽略的底部顯示“松開立即加載更多”提示按鈕的重要性

發(fā)布時間：2017-08-04

文章編輯：網(wǎng)站建設(shè) 文章來源：建站行業(yè)資訊瀏覽量：次

在實際的手機網(wǎng)站建設(shè)產(chǎn)品設(shè)計中，我們經(jīng)常會需要設(shè)計加載更多功能。那么在設(shè)計這個功能時，我們應(yīng)該要考慮哪些地方呢？下文是我對這個問題的詳細(xì)分析。

1.功能概述

功能名稱：加載更多

功能描述：點擊“加載更多”按鈕、或上拉列表時，加載更多的內(nèi)容。

1.1、使用場景：

當(dāng)一個頁面有較多的信息要展示給用戶時，為了減少用戶單次請求對服務(wù)器產(chǎn)生的性能壓力和時間損耗，每次只加載固定數(shù)量的少量信息。用戶瀏覽完之后，再向服務(wù)器發(fā)起請求，加載更多內(nèi)容。

常用于內(nèi)容列表，如圖文列表、資訊列表、專題列表、評論列表等。

1.2、常見案例

淘寶搜索結(jié)果頁商品列表、簡書文章列表、網(wǎng)易云音樂精彩評論列表、脈脈匿名八卦的熱門評論、混沌大學(xué)熱文列表等。

2.功能分析

2.1、數(shù)據(jù)流向圖

該功能實現(xiàn)邏輯是：

1. 前端通過接口，向后臺發(fā)起請求；
2. 接口將用戶信息、當(dāng)前頁數(shù)傳到后臺；
3. 后臺接受信息，獲取下一頁數(shù)據(jù)列表；
4. 從數(shù)據(jù)庫中提取下一頁數(shù)據(jù)；
5. 對數(shù)據(jù)進行排序；
6. 后臺通過接口，將數(shù)據(jù)回傳給前端；
7. 前端接收信息，并將信息按既定樣式展示出來。

用數(shù)據(jù)流轉(zhuǎn)圖表示如下：

2.2、觸發(fā)方式

大部分產(chǎn)品都使用以下兩種方式來觸發(fā)“加載更多”功能：

1.上拉列表頁面：在淘寶的商品搜索結(jié)果頁，當(dāng)頁內(nèi)容瀏覽完后，上拉頁面，將自動加載更多商品。

2.點擊“加載更多”按鈕：如人人都是網(wǎng)站建設(shè)高手點擊列表頁面底部的“加載更多”按鈕加載。如下圖：

2.3、需求點描述-交互

以“混沌大學(xué)熱文列表”為例：

1. 頁面滾動到底部時，稍微上拉列表：底部顯示“上拉可以加載更多”提示，向服務(wù)器發(fā)起加載更多內(nèi)容的請求。

2. 上拉列表：底部顯示“松開立即加載更多”提示。

3. 松開：底部顯示“正在加載更多的數(shù)據(jù)”提示和loading動畫，向服務(wù)器發(fā)起加載更多內(nèi)容的請求。

4. 加載完成：loading動畫和提示消失，直接顯示加載的內(nèi)容。

需要說明的是，每次加載的內(nèi)容數(shù)，根據(jù)需要設(shè)定，不建議加載過多，導(dǎo)致請求時間過長。如每條記錄都希望用戶點進去看，最好 10 條以內(nèi)。若每條記錄都只需用戶一掃而過，可適當(dāng)增加數(shù)量。

2.4、需求點描述-異常

1. 無網(wǎng)絡(luò)或服務(wù)器繁忙：請求失敗后，彈出toast提示“網(wǎng)絡(luò)異?！?。

2. 無更多內(nèi)容：當(dāng)內(nèi)容列表中沒有更多內(nèi)容時，彈出toast提示“暫無更多內(nèi)容，請稍后再試”。

2.5、體驗細(xì)節(jié)

在做功能點調(diào)研時，我看到了一些不錯的微交互設(shè)計。

1. 頁面滾動到某個位置時，自動加載更多，不需要用戶可以去拉。如淘寶的商品列表；
2. 頁面滾動到底部時，適當(dāng)上拉，即自動開始發(fā)起加載更多請求，并顯示“正在加載”提示和loading動畫，省略了其他的顯示邏輯。如得到app的專欄文章列表。深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。

當(dāng)前文章鏈接：/construction/jzhyzx/700.html

上一篇：外貿(mào)網(wǎng)站建設(shè)如何看懂google瀏覽統(tǒng)計表下一篇：移動網(wǎng)站建設(shè)頁面設(shè)計怎樣才符合用戶體驗？

返回列表

如果您覺得案例還不錯請幫忙分享：

[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認(rèn)后，會立即刪除，保證您的版權(quán)。

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當(dāng)前位置：

手機網(wǎng)站建設(shè)不可忽略的底部顯示“松開立即加載更多”提示按鈕的重要性

如果您覺得案例還不錯請幫忙分享：

相關(guān)案例推薦

柴老師說留學(xué)

睿達通電氣設(shè)備行業(yè)網(wǎng)站建設(shè)作案例

浙商新金融研院

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索