pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

交互設(shè)計(jì):分頁還是加載 這是一個(gè)問題

  本文作者@子木yoyo 發(fā)布于其個(gè)人博客。無論是在web頁面還是手機(jī)應(yīng)用,信息往往無法在一個(gè)頁面全部展示,這就需要用到一些可以擴(kuò)展頁面信息的交互模式:分頁 (Pagination)和加載(Continuous Scrolling)。分頁和加載都是非常常見的交互模式,我們每天都會(huì)遇到,也正是因?yàn)樘R姡覀兩踔粮杏X不到它們的存在,瀏覽到頁面的底部時(shí),看到分頁就順手點(diǎn)一下,自動(dòng)加載了就繼續(xù)閱讀。

  但正是這小小的一點(diǎn),也會(huì)帶給用戶很不同的微妙感受。本文就來聊聊這些小差異帶來的大不同。

  分頁

  分頁可以將大篇幅的內(nèi)容分成小塊,顯示在單獨(dú)的連續(xù)頁面上,便于用戶理解和查找。可以讓用戶清楚的知道,自己所要瀏覽的內(nèi)容到底有多少、已經(jīng)瀏覽到哪個(gè)部分、還剩余多少。分頁可以使用戶對(duì)所瀏覽的內(nèi)容有清楚的預(yù)期。

  篇幅較長的文章是一定會(huì)用到分頁的。一是給用戶內(nèi)容多少的預(yù)期,二是可以給瀏覽者提供一個(gè)停頓。如果用戶看一篇文章已經(jīng)翻了十幾屏,滾動(dòng)條還是停留在瀏覽器中間靠上的位置,那該多絕望。

交互設(shè)計(jì):分頁還是加載 這是一個(gè)問題 三聯(lián)教程

  再來看看搜索引擎和電商網(wǎng)站,也一定會(huì)看到分頁控件。

  在搜索或是查看商品列表時(shí),內(nèi)容的多少根本無法預(yù)期,分頁的第一個(gè)作用自然還是告訴用戶要瀏覽信息的量。第二,分頁可以讓用戶快速的跳過一些不想看的信息,或是快速跳轉(zhuǎn)到首頁或尾頁,自主的選擇想要瀏覽的內(nèi)容。第三,分頁非常便于定位和回找,也許在搜索一條裙子時(shí),我已經(jīng)翻到了第五頁,突然想起第二頁有條好像還不錯(cuò),可以直接跳轉(zhuǎn)快速找到它。

  分頁控件實(shí)際上是給網(wǎng)站的內(nèi)容創(chuàng)造了一個(gè)自然的停頓,這個(gè)停頓運(yùn)用得好的話,可以讓產(chǎn)品更有節(jié)奏感。但是當(dāng)用戶瀏覽完一頁的內(nèi)容時(shí),就必須停下正在進(jìn)行的閱讀,通過點(diǎn)擊進(jìn)行跳轉(zhuǎn)來獲取更多內(nèi)容。不可否認(rèn),這個(gè)停頓會(huì)在一定程度上打斷用戶的思路。在遇到分頁時(shí),用戶很有可能會(huì)去思考,是繼續(xù)瀏覽呢?還是離開網(wǎng)站呢?所以遇到分頁時(shí),往往會(huì)流失一部分用戶。

  連續(xù)加載

  連續(xù)加載是一個(gè)與分頁相反的交互模式,信息之間沒有明顯的界限或是停頓。當(dāng)頁面滾動(dòng)到底部,新的信息就會(huì)被自動(dòng)加載進(jìn)來。

  各種社交網(wǎng)絡(luò)就特別喜歡用這種控件,用戶不會(huì)被打斷,可以順暢的一直瀏覽下去,沉浸其中。

  但是由于信息是自動(dòng)加載的,頁面看起來好像沒有結(jié)束,很難預(yù)測(cè)頁面的內(nèi)容到底有多少。一味的加載會(huì)讓用戶產(chǎn)生迷失感:這一頁的內(nèi)容到底有多少呢?我已經(jīng)瀏覽了多少內(nèi)容?我什么時(shí)候才能讀完這一頁呢?對(duì)于這種沒有停頓的頁面,用戶想要搜尋之前看到過的信息時(shí),也有些困難。但對(duì)于這種以休閑娛樂為主社交型的產(chǎn)品來說,使用不打斷用戶信息流的加載方式,還是非常合適的。

  使用分頁控件時(shí),用戶必須通過點(diǎn)擊才能查看到更多的內(nèi)容,所以說,信息獲取是用戶主動(dòng)請(qǐng)求的。而使用連續(xù)加載時(shí),新的信息是被自動(dòng)加載進(jìn)來,用戶是被動(dòng)的接受。

  折中的方式

  分頁和加載各有利弊,如今的很多網(wǎng)站也會(huì)采取一些折中的方式:分頁加載一起用。

  如Quora,會(huì)在自動(dòng)加載4次后出現(xiàn)一個(gè)“More”按鈕,在連續(xù)的信息流之后,給用戶一個(gè)停頓,讓他們?nèi)ブ鲃?dòng)的獲取更多信息。

  新浪微博也采取了這種折中方式,自動(dòng)加載兩次后出現(xiàn)分頁。對(duì)于大多數(shù)用戶,在閑暇時(shí)瀏覽微博,加載兩次的內(nèi)容已經(jīng)能夠滿足他們,對(duì)于需要瀏覽更多信息的用戶,也讓他們知道自己到底瀏覽了多少。

  為了使用戶可以快速看到更多圖片,Google圖片搜索也采用連續(xù)加載的方式,但在搜索圖片時(shí),用戶也非常需要明確的自己的位置,也很有可能會(huì)回去找剛才看到過的圖片,所以Google在同一頁中也會(huì)標(biāo)出頁碼,便于定位和查找。這也是另一種折中的方式。

  手機(jī)客戶端

  在屏幕更小、使用場(chǎng)景更多變的手機(jī)端,滑動(dòng)顯然比精確點(diǎn)擊更簡單更不容易誤操作。手機(jī)端產(chǎn)品信息架構(gòu)相對(duì)簡單,用戶瀏覽時(shí)長相對(duì)較短,使用時(shí)注意力也相對(duì)分散。所以大多數(shù)app都會(huì)使用連續(xù)加載的方式。而且加載也比分頁控件更省空間。

  但像搜索引擎這樣的產(chǎn)品,還是保留了分頁的設(shè)計(jì)。

  選擇加載還是分頁只是設(shè)計(jì)中一個(gè)很小的點(diǎn),但出色的產(chǎn)品都是由無數(shù)個(gè)這樣的小點(diǎn)組成的。根據(jù)產(chǎn)品的特點(diǎn),選擇最合適它的交互方式,就是交互設(shè)計(jì)師要做的事。

  原文鏈接:http://www.leeyue1007.com/index.php/2012/09/05/pagination/

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章給大家詳細(xì)介紹了HTML頁面跳轉(zhuǎn)及參數(shù)傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實(shí)現(xiàn)照片墻3D效果的示例代碼,可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片實(shí)現(xiàn)改變,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實(shí)現(xiàn)文字過長自動(dòng)隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設(shè)置字體大小) 教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 【北京写字楼出租_写字楼租赁_办公室出租网/出售】-远行地产官网 | 北京律师咨询_知名专业北京律师事务所_免费法律咨询 | 成都思迪机电技术研究所-四川成都思迪编码器 | 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 探伤仪,漆膜厚度测试仪,轮胎花纹深度尺厂家-淄博创宇电子 | nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 浙江美尔凯特智能厨卫股份有限公司 | 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | Duoguan 夺冠集团| 石英砂矿石色选机_履带辣椒色选机_X光异物检测机-合肥幼狮光电科技 | 27PR跨境电商导航 | 专注外贸跨境电商 | 深圳标识制作公司-标识标牌厂家-深圳广告标识制作-玟璟广告-深圳市玟璟广告有限公司 | 济南网站建设|济南建网站|济南网站建设公司【济南腾飞网络】【荐】 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 上海盐水喷雾试验机_两厢式冷热冲击试验箱-巨怡环试 | 月嫂_保姆_育婴_催乳_母婴护理_产后康复_养老护理-吉祥到家家政 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | Duoguan 夺冠集团| 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 工业CT-无锡璟能智能仪器有限公司 | 旗帜网络笔记-免费领取《旗帜网络笔记》电子书| 中视电广_短视频拍摄_短视频推广_短视频代运营_宣传片拍摄_影视广告制作_中视电广 | 手持式浮游菌采样器-全排二级生物安全柜-浙江孚夏医疗科技有限公司 | 企业微信营销_企业微信服务商_私域流量运营_艾客SCRM官网 | LNG鹤管_内浮盘价格,上装鹤管,装车撬厂家-连云港赛威特机械 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | 刚性-柔性防水套管-橡胶伸缩接头-波纹管补偿器-启腾供水材料有限公司 | 道康宁消泡剂-瓦克-大川进口消泡剂供应商 | 合肥礼品公司-合肥礼品定制-商务礼品定制公司-安徽柏榽商贸有限公司 | 液压中心架,数控中心架,自定心中心架-烟台恒阳机电设计有限公司 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 成人纸尿裤,成人尿不湿,成人护理垫-山东康舜日用品有限公司 | 银川美容培训-美睫美甲培训-彩妆纹绣培训-新娘化妆-学化妆-宁夏倍莱妮职业技能培训学校有限公司 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 越南专线物流_东莞国际物流_东南亚专线物流_行通物流 |