IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

不一样的交互组件(下)

Taobao.com UED Team 2010-04-14 13:44:04 累计浏览 3,500 次
本机暂存

四、翻页的创新 【替代法】

    原图已失效

    传统的翻页方式是“上一页+页码+下一页”,大家最熟悉的设计。

    原图已失效

    Bing图片搜索

    Google reader

    看图购

    而近年兴起的这种“无尽滚动翻页”的翻页方式,即滚动条拖动到最底部后开始加载后面的内容,而不再有“上一页+页码+下一页”这样的链接。

    原图已失效

    相对而言twitter、Iphone app store这样的“递进式翻页”则没那么激进,保留了一个翻页按钮,是介于传统翻页与无尽滚动翻页的一种折中方式。

    原图已失效

    上图是Google book search一个巧妙的翻页设计,鼠标悬停在文档底部一个局部区域(高度约50px)时,出现一个半透明的层,点击这个层开始翻页。这个巨大的辅助翻页按钮,大大提升了翻页的便利性,且对界面影响很小。

    这里讲到的翻页组件创新,是用新的翻页方式替代传统翻页组件。从信息的结构来看,传统翻页是将信息分段,而“无尽滚动翻页”属于信息滚动。这两种方式对应现实生活中的原型是:书籍和电影胶片,书籍把信息拆分到每页里去翻动,电影胶片的信息则一帧帧的滚动而过。

    原图已失效

    从信息流动速度和翻页便利性来看,“信息滚动”远远大于“信息分段”。这两种翻页方式如何选择?我想这应该取决于用户对后面内容的需求强度,像google搜索结果页这种越往后信息质量越低的场景,用户对翻页需求并不那么强烈。Google reader这样信息不是按质量排序的场景,提供高速的翻页方式是个相对必要的做法。

    信息流动速度对信息接受者心态有很大影响,流动速度越快信息吸收量相对越小,所以阅读pdf文档比阅读纸质书籍心情急躁,忍不住去翻页,是在“扫描”而不是“阅读”(个人主观感受,如有雷同纯属必然)

    由此也延伸出一点,交互设计师的工作职责除了架构信息,还应该控制信息的流动速度和供给量。

    原图已失效

    最后,以一张图片总结交互组件创新的四种方式,一家之言希望对大家有所启发。创新无定法,必然存在更多创新方式,欢迎交流补充: pigtwo#gmail.com

    本期碳酸饮料会完整PPT下载>>

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,761)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  8. 什么是全栈工程师? (累计阅读 14,038)
  9. 使用python/casperjs编写终极爬虫-客户端App的抓取 (累计阅读 12,961)
  10. YSLOW法则中,为什么yahoo推荐用GET代替POST? (累计阅读 11,837)