手机上的长列表

标签: 全部文章 | 发表时间:2013-03-22 13:42 | 作者:chouyu
出处:http://www.chouyu.com.cn


这个Watch Lists其实很长,有几十项,表现出来是这样:每页只显示5项,可以显示在一屏内,然后翻页。
在PC网页的设计时我们知道:把更多的内容放在一个页面里展示,比跳转页面更好,用户更容易看到。几米长的门户首页就是这么来的。
突如其来的手机应用,可能是让一些设计师有点儿不知所措了,觉得手机屏幕小,单手指操作有特点,等等我也不是很清楚的原因,最后得出了这么个结论:每个页面都不能滚动。这个结论显然有点儿不妥,而且,想要严格的实现,几乎不可能。
不断的下一页下一页,再上一页上一页,每次翻页又都需要载入新页面,显然不好用了,相比之下,“自选股”这样一个长列表会好一些。

要处理一个长列表时,放在一页里上下滚动会比切分成多页更好。嗯,这个结论或许下的有点儿早。

“短列表+翻页”的一个大问题在于每次都要载入页面,使得下一页的显示需要一些时间,不流畅了。对于一个长列表如果滚动的时候不流畅,会卡,当然会让人觉得不爽,那短列表不断翻页,可以看做是一种更大的卡吧,显然更不爽。
那么,如果短列表+翻页,但不卡呢?事先加载好了,只是不用滚屏的形式,每页都是没滚动条的,一页页很流畅的翻,是不是ok?
Feedly就是这样。

每页刚好显示一屏,不滚动,向上滑动翻到后面一页。
如果“短列表+翻页”预先加载好了,那么,“短列表+翻页”与“长列表”两种形式的差别仅仅在于给用户的表现模型不同:一个是盒装纸巾,一张又一张;另一个是成卷的卫生纸。这两种模型都是不难理解的。

不过类似Feedly这种表现形式需要解决一个额外的问题:如果我已经翻到了第12页,此时想返回去看第4页的某个内容,怎么才能快速的到达?
对于一个大页面,当前屏幕只能显示其一部分的时候,如何告诉用户当前显示的是整个大页面的哪个部分;应该提供怎样的功能让用户可以高效的回到页顶,去到页底,或达到页面中某一个特定的位置。这一系列问题,在PC上是由窗口滚动条负责解决的,不用细说了,大家再熟悉不过了。
手机系统中的滚动条退化了,只能显示当然所在位置,而不能提供操作了。android可以使劲儿的滑动一次性滚动更远,IOS可以点列表顶端接缝处快速回到顶端,快速的滚动也能一次滚动更多,但似乎没有android的效果明显。这些都是为了页面内的导航,但还都不如pc上窗口滚动条强大。
Feedly把正整卷卫生纸裁成了一张张的,将原本的页面内导航问题变成了页面间的跳转,于是连手机系统里提供的这一点点页面内导航功能都用不上了。如果我翻到了第12页,想回去看看第4页,就得往回多翻几次了,或者回到第一页,再往后翻三下。哪种方法效率都不太高。
手机因为小,设计上总体的方向是简化,减掉的自然应该是少数用户、少数时候会用到的功能。对于feedly这个手机版阅读器,多数用户每天只是来看看新闻,并不需要经常的精确的去查找某篇文章,甚至可以说,不需要实现从第12页快速回到第4页的功能,但别的产品也许就是比较需要的,比如,有100项的股票列表。
一个使用了feedly这种“短列表+翻页”形式的股票观察列表,或许可以自己单独做些导航功能,为自己的这个裁剪成多段的长列表服务,让各段间的跳转更高效。

既然如此麻烦,那干脆就“自选股”这样,直接就长列表,简单,直白,也省掉了那些麻烦。最朴素的形式是有其简朴的魅力,不过真是个100项的长列表,要从第12屏回到第4屏其实也不很快,也得滚好几下,而且操作不容易很精准,你也估计不出来到底得滚几下。
手机通讯录里有那种通过字母快速到达的导航功能,或许应该广泛应用;或许也需要我们为自己的长列表做些单独的页面内导航,只靠操作系统提供的通用功能并不总够用。

相关 [手机 列表] 推荐:

手机上的长列表

- - 臭鱼的交互设计
这个Watch Lists其实很长,有几十项,表现出来是这样:每页只显示5项,可以显示在一屏内,然后翻页. 在PC网页的设计时我们知道:把更多的内容放在一个页面里展示,比跳转页面更好,用户更容易看到. 突如其来的手机应用,可能是让一些设计师有点儿不知所措了,觉得手机屏幕小,单手指操作有特点,等等我也不是很清楚的原因,最后得出了这么个结论:每个页面都不能滚动.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

推薦書籍列表

- GTC1412 - 研究生2.0
熟知研究生2.0 的讀者大概都知道我有這個壞習慣:部落格分類凌亂,等文章累積到一定程度之後再來寫一篇索引文. 沒錯,由於三不五時就有人希望我推薦書籍,再加上站上書籍散落在各處,乾脆花一次功夫全部整理一次,也方便讀者與我作索引. 當然,我書架上的書不可能只有這麼一些的,還有好多好書我希望跟大家分享的,但是我寫部落格的速度是有目共睹的慢,所以請大家慢慢等吧.

google全系列hosts列表

- 佳 - cooerson的各种聚合
整理了一下Google(含google大部分服务,google+,gmail,地图,gtalk等~)的hosts. 可以通过添加hosts方式,享受谷歌产品,这样读图会快很多,gmail也能随时打开了,不会出现链接不上情况了,更不用番强了. windows下修改hosts文件,添加固定的DNS解析.

免费电子书列表

- willian - Starming星光社最新更新
在StackOverflow上,有人要打算收集个免费电子书的列表,结果很快就有人分享了一个列表. 原帖的地址在http://stackoverflow.com/questions/194812/list-of-freely-available-programming-books(注意:有些连接可能会被墙掉).

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

免费电子书列表

- raphael - 酷壳 - CoolShell.cn
在StackOverflow上,有人要打算收集个免费电子书的列表,结果很快就有人分享了一个列表. 原帖的地址在http://stackoverflow.com/questions/194812/list-of-freely-available-programming-books (注意:有些连接可能会被墙掉).

我的RSS推薦列表

- Vince - AVshare 墙外博客
在推特上分享資源已經有不短的一段時間了,但是始終是不可能跟上AV廠商發片的速度,我也不可能天天宅在家裡,趴在電腦前更新. 正所謂授人以鱼不如授人以渔,分享一下我的Google Reader中的一些RSS資源給大家,雖然不可能緊跟最新潮流,但也相去不遠了. 首先,可能有些同學還不知道神馬叫RSS,根據WIKI描述,RSS(简易资讯聚合)是一种消息来源格式规范,用以发布经常更新资料的网站,例如部落格文章、新闻、音讯或视讯的网摘.

CSS3动画-彩虹列表

- 蛋布丁 - 大猫の意淫筆記
昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.

js Grid - 列表插件

- Bloger - 博客园-首页原创精华区
     js Grid - 列表插件.     1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息.      2)TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.