编辑指南:版面设计经常会出现内容放不下的情况。主流的策略是先显示当前版块的部分内容，其余的通过多看来隐藏。但同时也要考虑业务和交互的使用。作者以主流应用为例，分析了它们在不同场景下的应用，并与大家分享。

我们在设计一个版块的时候，总会遇到内容放不下的情况。相应的主流策略之一就是先把当前版块的部分内容展示出来，剩下的通过多看来隐藏，以保证用户当前良好的阅读体验。

但是不能不考虑业务和交互的使用，就把所有的场景直接放在标题的右边。接下来我结合一些主流的应用来总结它在不同场景下的应用，同时也会涉及到我之前文章中提到的理论。希望这个策略能对你有所启发和帮助。

首先，跳跃场景

这应该是我们最常见最普通的场景。此时查看更多承载者的功能是二级页面的入口，用户点击进入二级页面查看更多信息。这种场景通常有三个位置。

1.标题右侧

放置在版块标题最右侧的表单已经渗透到用户的头脑中，这是最常见的做法。在这里以文案或文案+方向图标的形式向用户传达可点性。而且通常会被字体大小、粗细、轻重削弱。

放在标题右侧的好处是可以更有效的利用右侧的空空间，为其他内容节省更多的高度。而且容易扩展，可以和下面提到的几种形式结合使用。

但它的缺点是容易被用户忽略，点击感弱。结合我之前讲的福格行为模型(敲黑板！)，一个人的行为需要具备三个条件:触发条件、能力条件、动机条件。

然而，标题右侧的弱化方式不能很好地满足这些条件:

用户对跳转后加载的新页面内容是没有预期的，他们不知道新页面展示的数量、内容是否值得我花时间跳转，而这些这些不确定性和认知压力很容易产生负面影响。因此它会削弱动机，导致点击欲望不足。查看更多入口通常是被弱化存在的，所以用户总是被引导着注意那些更显眼的标题和内容，这就导致了触发不足。查看更多是以文本链接的形式存在，即便增加点击域，我们潜意识中的点击目标依然是这条小面积文本，根据费茨定律也意味着难以高效得点击。另外新页面跳转的整页加载形式相当于增加一条链路——将用户从A点转移到B点。导致增加短期记忆的成本、loading时间成本。而后续的返回也增加了交互步骤。这些要求都导致了能力的不足。

总体来说，在用户动机不够强烈的前提下，点击行为的概率很低。(如果想了解福格行为模型，可以参考我之前的百日挑战文章，非常详细~)

然而，我们仍然可以尝试其他方法来减轻这些负面影响。比如挂钩通过添加主色使其更加显眼，网易云音乐通过添加形状容器使其成为二级按钮。所有这些做法都可以通过提高水平和降低成本来增强触发性和能力。豆瓣通过加数字的方式让用户期待数量，弱化了不确定性的负面影响。

标题右侧的方式适用于单线水平滑动部分和网格类型的布局部分，网格通常在两行以内，如上面的例子。这些板块的特点是它们的高度空足够小(在一个屏幕内)，方便用户快速定位到当前位置“多看”。

为什么不适用于列表？

因为列表的一个特点是占用大量高度空，不方便快速定位“多看”，而且列表属于尼尔森神父提出的垂直向下的F型扫描线，所以标题右侧的方式更容易被忽略。

列表处理一般有四种(放心我后面会讲):

作为一整页排序，类似商品列表那样的信息流；作为多版块中的一个独立版块，置于页面底部，充分利用列表本身可无限加载的优势；以展开交互进行分段式增量加载；将查看更多放置在版块底部，并且控制好一屏内的高度。这也是下面所要讲的方式——

2.该部分的底部

在该部分的底部，更多的条目将被查看并从标题的右侧转移到该部分的末尾。相比标题右侧的表单，版块底部可以更好的提升点击量。

为什么这么说？

因为在风格上，它的优点恰恰弥补了标题正确形式在触发和能力上的不足。

底部富裕的空间让”查看更多“由原本被弱化的文字链接可以强化为更显眼的次按钮，按钮文字可以通过字号、字重、明度甚至颜色进行强化。另外也可以通过线性或者面型的容器承载文字，让它看起来更易辨识和易点。这些方式让”查看更多“的层级得到了显著的提升，我们很难不去注意到它。所以点击行为的触发条件够足。点击域面积的大量扩增很好得提升了点击感，便于进行高效点击行为。点击能力要求得到降低。

这两个条件的充分性导致即使用户最初的动机很弱，也有可能执行点击行为。

在位置上，底部的位置与用户的垂直视觉移动线一致，更容易被注意到。

但段末的缺点还是新跳页本身的缺点，内存短，加载负担重，用户对后续内容缺乏期待，容易造成压力。然而，airbnb对这些问题采取了更明智的方法。Airbnb和豆瓣一样，在“多展示”后增加了数字提示，让用户对后续内容的量有所期待，一定程度上减少了不确定性和认知压力带来的负面情绪。

另外，由于位置原因，不能用于单线滑动段，但列表和方块都可以考虑。当然要根据情况具体问题具体分析。

3.金刚区

金刚区是第一张图横幅下的功能和服务的聚集区，通过宫殿布局中的图标承载功能和服务的入口。当服务过多时，往往会添加一个表示“更多”的图标来承载那些非高频服务，引导用户点击查看更多。

放在这里的好处是，它可以通过新页面承载相当多的业务内容，宫殿的布局也让它更容易被注意到。缺点还是上面提到的新页面跳转带来的各种问题。

二、水平滑动场景

由于ios11增加了全新的卡容器，卡可以独立排列的特性可以水平解锁更多空。用户可以通过左右滚动手势获得更多内容。而这个互动场景就是我们经常使用的横向滑动场景。

1.卡片类型

布局显示了卡的一部分，这意味着用户可以通过滑动看到更多。

卡滑模式兼容性强。可以单独使用，完全取代了新页面跳转的形式，避免了跳转带来的负担。

也可以与标题右侧或章节底部的“查看更多”结合使用，以覆盖后续内容过多的情况。而且可以在幻灯片末尾添加一张“多看”卡作为另一个入口，可以提高点击感，增加二级页面的曝光度，具有足够的面积优势。

比如美团酒店推荐列表就是将标题右侧与滑卡结合，同时在末尾添加“查看更多”卡作为入口，用两种措施引导用户点击。

喜马拉雅的直播版块和淘宝电影即将上映的版块都属于单独滑卡，还增加了“多看”卡推广点击。其中淘宝电影和airbnb一样，通过添加数字提示，给用户后续内容的期待。

2.金刚区

通过水平滑动显示更多业务类别。为了让用户有水平滑动的意识，一般会使用类似转盘指示器的进度条来指示当前位置。

它完全避免了跳转到新页面带来的各种负担，通过在当前页面上滑动手势来帮助用户查看所有内容。缺点是不能承载更多的服务。

第三，立即刷新场景

这里的即时刷新是我们常见的“换一批”功能。通过单击“更改批次”，用户可以立即更改当前部分的更多内容。

这种交互大大减少了新页面跳转带来的弊端，用户不需要承担多链接带来的短期内存和整个页面加载成本，也不需要返回。

位置类似于新页面跳转中的“多看”，可以放在标题右侧，也可以放在版块底部，优缺点基本相同。

不幸的是，这种互动场景并不普遍。因为这种方式的内容局限在一个版块，不能完全观看，随机性很强，所以更适合猜测自己喜欢什么，随便看什么之类的推荐版块，相对有限。

第四，扩大场景

展开场景有点类似手风琴组件的下拉折叠功能，用户通过点击直接展开当前章节的更多内容。

应该注意的是，扩展内容的数量通常是增量加载的。比如评论区有更多的扩展内容，一屏显示10条评论。当用户点击“更多”时，大约5条评论将被再次下载。再点击一次就能加载五次。

这种场景的优势在于，与即时刷新场景相比，可以更全面地浏览和选择信息，减少新的页面跳转带来的负面影响。

缺点是大大增加了页面长度，增加了滚动交互的负担。所以需要尽可能远的位于后面，甚至是末端。

这种部署场景通常有另外两种衍生场景，即上拉加载和自动加载。也就是我前面提到的前两种处理列表的方式。它们仅适用于底部列表信息部分，如提要流和瀑布流，因为它们具有无限的加载特性。这部分不在讨论范围内。在这里挖个洞，以后再填上。

动词 （verb的缩写）总结

以上是“多看”在不同场景下的应用研究，以及各自的优缺点和应用。当然这里只做一个大概的总结，我们的设计师需要在日常项目中尽可能根据用户场景和业务需求灵活运用！