Inbox分栏式设计的思考

无论是网页端，还是app端，还是其他产品形态，我们都尝试在有限的页面空间上尽可能并且简洁的增加页面的内容容量。但当我们真正开始去设计产品的时候，就要开始考虑这种设计是否符合用户场景，这种设计的交互在这种用户场景下是否是最佳的。往单个页面里增加内容，最简单的做法就是两栏式设计，左侧菜单栏，右侧展示内容。

像收件箱这样子的分栏式设计，在哪种用户场景下更适用？

inbox.jpg

如上图就是传统的收件箱的设计，主体内容模块使用的是两竖栏设计。

从用户场景来说起。在用户收取邮件这个场景下，用户收取到的邮件是有状态区分的。比如未读与有读。在内容有各类型的状态区分的情况下。来看一下传统收件箱设计下用户的操作轨迹。用户点击收件箱后，右侧页面跳出内容列表。在内容列表的上方有状态的区分，点击不同的状态展示不一样的内容。点击某个标题，邮件详细内容页面覆盖右侧的列表页。

这里为什么把内容状态选取按钮放到第二栏？直接放到收件箱的第二级，操作不是更扁平吗？因为在这个用户场景下，红旗邮件、代办邮件的对于用户来说优先级更高。而且与收件箱同级的菜单内容也很多，所以收件箱这里把其他的较为次级的状态放到第二栏。减小左侧的菜单内容，就能增加需要用户关注的内容模块的点击率。毕竟收件箱对于公司来说不仅仅只是收件箱，他需要提供的内容来帮助公司获益，所以新闻中心，文件中心这些额外的、跟收件不相关的才入放到菜单模块。这是从收益上对于产品的考虑。用户场景和收益是做产品时需要平衡的。

但传统的收件箱哪里做得还不好？我觉得是用户回复邮件的操作非常不扁平。从上文的用户的操作轨迹的分析，就可以看到传统的收件箱点击标题弹出的内容会覆盖原先的列表页。如果用户一天在工作当中有很多邮件要回复，那这个用户就必须在回复邮件后再倒退到原先的列表页，再次继续原先的操作流程。这样子的操作就非常不扁平，就非常不便捷。

为了让用户回复邮件场景的操作更加极致，我觉得如此设计是最好的。

u手绘图.jpg

三栏式的设计，把列表页作为一个单独的模块，最右侧的第三栏作为内容回复区。这样子，用户处于回复邮件的场景时，操作就非常便利了。不用再重复点击再后退再点击的蛋疼过程，只有在第二栏的列表页轻轻点击，右侧就能够展示出回复的页面。这酸爽，真任性。

如果想更全的展示内容，还可以提供任意拉伸的功能，用户可以把左侧菜单缩小面积等等。

再来想想三栏式设计在满足简洁的页面效果的同时，还能够做什么？

比如突出主要功能。

分栏.jpg

那双栏式设计有什么优点，在哪种场景比较适合使用？

我觉得双栏式设计比较适合于操作简单的用户场景，用户在左侧点击，右侧直接出现要展现的内容。双栏式设计的优点就是突出主要展示的内容。

而三栏式设计可以满足一种平衡，当操作较多时，三栏式设计能够较好的平衡操作的扁平问题和内容的展现。

关于分栏式设计可应用的场景应该还有很多。分栏式设计是互联网和移动互联网产品当中基本元素。值得我们思考的东西还有很多，只能一步步来，随着体验的产品增多，不断总结，才会逐渐构建起自己的方法论。

PS:允许非商业性转载,转载请注明出处,谢谢.

=================================

这里只求真，没有真理。

个人独立博客：PMFuner.com

微信公众号：PM范儿

记录一个不惧撞南墙的野路子产品经理的故事.

期待分享和交流~