转载自:老二牛车教育 » 【产品设计】瀑布流与分页模式比较
在设计资料量比较大的网站或是应用程式时,我们常常会遇到的问题是要采用分页(Pagination),还是移动卷轴(Scrolling)便自动载入、呈现资料。
Facebook 和Twitter 的页面在载入新资讯的时候,都是采用移动卷轴自动载入的方式;Pinterest 开始流行之后,许多网站设计都采用这种被昵称为“瀑布流”的设计。但是我们依然可以看到许多网站,例如搜索引擎巨擘Google、和照片分享平台Flickr,依旧还是使用分页的方式呈现搜索结果。
该选用分页、还是卷轴?
到底这两种呈现资料的方式有什么差别?哪一个又比较好呢?
答案应该是:“It depends……”。
在设计社交类型的网站的时候,所需要呈现的资料是非常即时的,使用者第一个想看到的应该都是最新发生的消息、朋友最新的状态,然后才是逐次的慢慢阅读到他还没看过的讯息。
这种依照时间排序、变动性质非常大的资料,如果采用分页的方式呈现,每一个页码所代表的内容改变性很大,若采用分页可能是比较不好的方法。想像一下,你每次打开一本书、翻到第38页的时候,看到的都是不同的内容,应该是很困扰的一件事。
相对的,Google 和Flickr 所呈现出来的资料是搜索结果,和好友动态讯息比起来相对变化性低。
使用者在每次翻页的时候都会留下使用印象。当使用者在第三页找到资料,而下次又需要这笔资料的时候,他会透过页码大概记得这笔资料的正确位置,而不用使用滚轮来上下卷动来寻找他所需要的资料。
1
2
能把两者结合吗?
若资料的类型是可以被索引(index)的,例如导演的名单可以透过姓氏的字首索引、电影名称可以透过字数索引,那么把索引制作成分页也是一种不错的方法。使用者可以快速的从“J”这个分页中快速的找到魔戒的导演Peter Jackson。
3
也有许多应用程序更进一步的结合了两种呈现方式,在iOS 的“联络资讯”软体上,所呈现的就是采用移动卷动的方式呈现你的通讯录;但是在画面的右手边加上了笔划与英文字母,除了可以快速的透过手指滑动手机屏幕寻找资料,也可以透过这种查找索引的方式快速找到需要的资料。
4
如果网站或应用程序所呈现出来的资料可以选择或编辑,若采用分页的方式,假设使用者在画面上点选了三个选项,然后点选下一页,这时候使用者可能会对于前一页的三个选项是否还在勾选中感到有点困惑。此时采用卷轴呈现资料也许是比较方便的作法。
资料型态,才是设计呈现方式的本质
卷轴式的呈现时,使用者往往会多看个几页,得到的资讯相对比较多;但想想,若设计的是有一、两万笔资料的网站,要让使用者在这一、两万笔资料中滚来滚去找到他想要的东西,可能就有点难度了。
其实资料才是呈现的本质,分页和移动卷轴两者的设计各有优点与缺点。当然,无论是采用哪种,都得根据资料的形态来呈现,才能找到最适合的方法。
转载请注明:老二牛车教育 » 【产品设计】瀑布流与分页模式比较
在设计资料量比较大的网站或是应用程式时,我们常常会遇到的问题是要采用分页(Pagination),还是移动卷轴(Scrolling)便自动载入、呈现资料。
Facebook 和Twitter 的页面在载入新资讯的时候,都是采用移动卷轴自动载入的方式;Pinterest 开始流行之后,许多网站设计都采用这种被昵称为“瀑布流”的设计。但是我们依然可以看到许多网站,例如搜索引擎巨擘Google、和照片分享平台Flickr,依旧还是使用分页的方式呈现搜索结果。
该选用分页、还是卷轴?
到底这两种呈现资料的方式有什么差别?哪一个又比较好呢?
答案应该是:“It depends……”。
在设计社交类型的网站的时候,所需要呈现的资料是非常即时的,使用者第一个想看到的应该都是最新发生的消息、朋友最新的状态,然后才是逐次的慢慢阅读到他还没看过的讯息。
这种依照时间排序、变动性质非常大的资料,如果采用分页的方式呈现,每一个页码所代表的内容改变性很大,若采用分页可能是比较不好的方法。想像一下,你每次打开一本书、翻到第38页的时候,看到的都是不同的内容,应该是很困扰的一件事。
相对的,Google 和Flickr 所呈现出来的资料是搜索结果,和好友动态讯息比起来相对变化性低。
使用者在每次翻页的时候都会留下使用印象。当使用者在第三页找到资料,而下次又需要这笔资料的时候,他会透过页码大概记得这笔资料的正确位置,而不用使用滚轮来上下卷动来寻找他所需要的资料。
1
2
能把两者结合吗?
若资料的类型是可以被索引(index)的,例如导演的名单可以透过姓氏的字首索引、电影名称可以透过字数索引,那么把索引制作成分页也是一种不错的方法。使用者可以快速的从“J”这个分页中快速的找到魔戒的导演Peter Jackson。
3
也有许多应用程序更进一步的结合了两种呈现方式,在iOS 的“联络资讯”软体上,所呈现的就是采用移动卷动的方式呈现你的通讯录;但是在画面的右手边加上了笔划与英文字母,除了可以快速的透过手指滑动手机屏幕寻找资料,也可以透过这种查找索引的方式快速找到需要的资料。
4
如果网站或应用程序所呈现出来的资料可以选择或编辑,若采用分页的方式,假设使用者在画面上点选了三个选项,然后点选下一页,这时候使用者可能会对于前一页的三个选项是否还在勾选中感到有点困惑。此时采用卷轴呈现资料也许是比较方便的作法。
资料型态,才是设计呈现方式的本质
卷轴式的呈现时,使用者往往会多看个几页,得到的资讯相对比较多;但想想,若设计的是有一、两万笔资料的网站,要让使用者在这一、两万笔资料中滚来滚去找到他想要的东西,可能就有点难度了。
其实资料才是呈现的本质,分页和移动卷轴两者的设计各有优点与缺点。当然,无论是采用哪种,都得根据资料的形态来呈现,才能找到最适合的方法。
转载请注明:老二牛车教育 » 【产品设计】瀑布流与分页模式比较
发表评论
-
十年前的各大网站首页是什么样子
2014-09-29 21:40 0转载自:老二牛车教育 » 【产品设计】十年前的各大网站首页是什 ... -
【产品经理】产品违规内容的处理讨论
2014-09-29 21:31 577转载自:老二牛车教育 ... -
【产品经理】App应用产品法则
2014-09-28 19:07 361转载自:老二牛车教育 ... -
【Axure教程】Axure中使用表格的技巧
2014-09-28 18:45 817转载自:老二牛车教育 » 【Axure教程】Axure中使用表 ... -
【产品经理】产品经理使用Axure工具经验谈
2014-09-26 14:54 347转载自:老二牛车教育 » 【产品经理】产品经理使用Axure工 ... -
【产品设计】做出好的产品设计因素
2014-09-26 14:47 389转载自:老二牛车教育 » 【产品设计】做出好的产品设计因素 【 ... -
【产品设计】互联网思维概念
2014-09-25 16:08 419转载自:老二牛车教育 » 【产品设计】互联网思维概念 搜索了 ... -
【产品经理】产品经理之我述
2014-09-25 15:56 401转载自:老二牛车教育 » 【产品经理】产品经理之我述 产品经理 ... -
【产品经理】产品抄袭是非论
2014-09-24 16:36 307转载自:老二牛车教育 ... -
【产品经理】互联网产品与消费者期望
2014-09-24 16:18 259转载自:老二牛车教育 » 【产品经理】互联网产品与消费者期望 ... -
【Axure元件下载】Axure7.0元件库(线框图及流程图)汉化下载地址
2014-09-23 19:56 0转载自:老二牛车教育 » 【Axure元件下载】Axure7. ... -
【Axure下载】Axure7.0的汉化包下载
2014-09-23 19:34 476支持 Axure RP Pro 正式版 当前最新版本 7.0. ... -
【产品经理】产品经理使用Axure工具经验谈
2014-09-22 12:14 500本文借用官网的描述定 ... -
【Axure教程】Axure中使用表格的技巧
2014-09-22 11:37 1005转载自:老二牛车教育 » 【Axure教程】Axure中使用表 ... -
【Axure教程】Axure中使用表格的技巧
2014-09-22 11:33 495转载自:老二牛车教育 » 【Axure教程】Axure中使用表 ...
相关推荐
jQuery实现瀑布流滚动加载分页效果,利用jquery下拉分页,上拉加载,下拉分页
jQuery瀑布流布局带分页效果,实现瀑布流布局主要分为两个部分,实现流体布局,这里我们采用绝对定位的方式实现,而是滚动触发的 Ajax 分页,这里采用 jQuery 的 Ajax 实现。
一个瀑布流分页加载的demo。送给需要的同学
很强大的瀑布流范例,超简洁的封装,易于使用。通俗易懂。
而分页触发瀑布流可以理解为Twitter拉到一页设定的最大条数后继续用瀑布流展示下一页,接下来我们就来详细看看AJAX实现瀑布流触发分页与分页触发瀑布流的方法
图片瀑布流展示,整合lightbox点击看大图,和infinite_scroll无限下拉即加载下一页,资源完全从mysql库中调用,只需导入数据库即可
下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。
vs初级文件流与分页,sasfsafasfasfhgdfhrthrtgwerfwFWEFWEF
DAO模式与分页显示,提供displaytag,pager-taglib 分页查询
android 瀑布流 listview 自带上拉刷新 下拉分页 感觉也很顺畅
jQuery masonry与infinitescroll两款瀑布流插件制作的最流行的瀑布流布局演示效果,可以无限浏览图片或内容无限加载的瀑布流效果。
数据更新与分页数据更新与分页数据更新与分页数据更新与分页数据更新与分页数据更新与分页数据更新与分页数据更新与分页
1、该瀑布流已经封装成组件,直接调用即可使用,方便简单快捷。 2、适用于直播、图片、文章展示等。 3、里面包含:组件、图片效果展示、使用方法。
<上一页>1,2,3,4,5,6,7,8,9<下一页> 这样的分页空间
瀑布流的 demo 图片回收 分页 预加载
1.支持设计时支持和两种分页模式,其中综合分页模式的效果如下: 普通分页模式的效果如下: 2.完善的设计时支持,包括自动套用格式和设计时面板设置: 使用方法: 在aspx页面中: 代码如下: <%@ Page...
html的瀑布分页,可用于web和手机,一站式满足web和移动设备
jsp实现分页技术,dao实现,源代码,和ppt教程,数据库代码
基于存储过程+分页控件+分页类的无敌分页模式