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

交互設計:分頁還是加載 這是一個問題

  本文作者@子木yoyo 發布于其個人博客。無論是在web頁面還是手機應用,信息往往無法在一個頁面全部展示,這就需要用到一些可以擴展頁面信息的交互模式:分頁 (Pagination)和加載(Continuous Scrolling)。分頁和加載都是非常常見的交互模式,我們每天都會遇到,也正是因為太常見,我們甚至感覺不到它們的存在,瀏覽到頁面的底部時,看到分頁就順手點一下,自動加載了就繼續閱讀。

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

  分頁

  分頁可以將大篇幅的內容分成小塊,顯示在單獨的連續頁面上,便于用戶理解和查找。可以讓用戶清楚的知道,自己所要瀏覽的內容到底有多少、已經瀏覽到哪個部分、還剩余多少。分頁可以使用戶對所瀏覽的內容有清楚的預期。

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

交互設計:分頁還是加載 這是一個問題 三聯教程

  再來看看搜索引擎和電商網站,也一定會看到分頁控件。

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

  分頁控件實際上是給網站的內容創造了一個自然的停頓,這個停頓運用得好的話,可以讓產品更有節奏感。但是當用戶瀏覽完一頁的內容時,就必須停下正在進行的閱讀,通過點擊進行跳轉來獲取更多內容。不可否認,這個停頓會在一定程度上打斷用戶的思路。在遇到分頁時,用戶很有可能會去思考,是繼續瀏覽呢?還是離開網站呢?所以遇到分頁時,往往會流失一部分用戶。

  連續加載

  連續加載是一個與分頁相反的交互模式,信息之間沒有明顯的界限或是停頓。當頁面滾動到底部,新的信息就會被自動加載進來。

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

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

  使用分頁控件時,用戶必須通過點擊才能查看到更多的內容,所以說,信息獲取是用戶主動請求的。而使用連續加載時,新的信息是被自動加載進來,用戶是被動的接受。

  折中的方式

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

  如Quora,會在自動加載4次后出現一個“More”按鈕,在連續的信息流之后,給用戶一個停頓,讓他們去主動的獲取更多信息。

  新浪微博也采取了這種折中方式,自動加載兩次后出現分頁。對于大多數用戶,在閑暇時瀏覽微博,加載兩次的內容已經能夠滿足他們,對于需要瀏覽更多信息的用戶,也讓他們知道自己到底瀏覽了多少。

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

  手機客戶端

  在屏幕更小、使用場景更多變的手機端,滑動顯然比精確點擊更簡單更不容易誤操作。手機端產品信息架構相對簡單,用戶瀏覽時長相對較短,使用時注意力也相對分散。所以大多數app都會使用連續加載的方式。而且加載也比分頁控件更省空間。

  但像搜索引擎這樣的產品,還是保留了分頁的設計。

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

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

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 电缆桥架生产厂家_槽式/梯式_热镀锌线槽_广东东莞雷正电气 | 不锈钢水箱厂家,不锈钢保温水箱-山东桑特供水设备 | 国产频谱分析仪-国产网络分析仪-上海坚融实业有限公司 | 不锈钢螺丝,不锈钢螺栓,不锈钢标准件-江苏百德特种合金有限公司 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 鲸鱼视觉 -数字展厅多媒体互动展示制作公司| 24位ADC|8位MCU-芯易德科技有限公司 | 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 淋巴细胞分离液_口腔医疗器材-精欣华医疗器械(无锡)有限公司 | 贵州水玻璃_-贵阳花溪闽兴水玻璃厂 | 北京遮阳网-防尘盖土网-盖土草坪-迷彩网-防尘网生产厂家-京兴科技 | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | 超声波气象站_防爆气象站_空气质量监测站_负氧离子检测仪-风途物联网 | 三价铬_环保铬_环保电镀_东莞共盈新材料贸易有限公司 | 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | 石家庄装修设计_室内家装设计_别墅装饰装修公司-石家庄金舍装饰官网 | 山楂片_雪花_迷你山楂片_山楂条饼厂家-青州市丰源食品厂 | 中式装修设计_室内中式装修_【云臻轩】中式设计机构 | 临朐空调移机_空调维修「空调回收」临朐二手空调 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 外贸资讯网 - 洞悉全球贸易,把握市场先机 | 煤粉取样器-射油器-便携式等速飞灰取样器-连灵动 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 冷水机-工业冷水机-冷水机组-欧科隆品牌保障 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 云南外加剂,云南速凝剂,云南外加剂代加工-普洱澜湄新材料科技有限公司 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 光泽度计_测量显微镜_苏州压力仪_苏州扭力板手维修-苏州日升精密仪器有限公司 | 环保袋,无纺布袋,无纺布打孔袋,保温袋,环保袋定制,环保袋厂家,环雅包装-十七年环保袋定制厂家 | 胀套-锁紧盘-风电锁紧盘-蛇形联轴器「厂家」-瑞安市宝德隆机械配件有限公司 | 胶水,胶粘剂,AB胶,环氧胶,UV胶水,高温胶,快干胶,密封胶,结构胶,电子胶,厌氧胶,高温胶水,电子胶水-东莞聚力-聚厉胶粘 | 别墅图纸超市|别墅设计图纸|农村房屋设计图|农村自建房|别墅设计图纸及效果图大全 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 华溶溶出仪-Memmert稳定箱-上海协烁仪器科技有限公司 | 蔬菜清洗机_环速洗菜机_异物去除清洗机_蔬菜清洗机_商用洗菜机 - 环速科技有限公司 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 菲希尔X射线测厚仪-菲希尔库伦法测厚仪-无锡骏展仪器有限责任公司 |