交互设计：手机上的长列表

这个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屏其实也不很快，也得滚好几下，而且操作不容易很精准，你也估计不出来到底得滚几下。

手机通讯录里有那种通过字母快速到达的导航功能，或许应该广泛应用;或许也需要我们为自己的长列表做些单独的页面内导航，只靠操作系统提供的通用功能并不总够用。

标签： 交互设计 PC网页 网页设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。