在我们浏览网页或者使用APP时，“展开”和“收起”功能其实是一个非常常见的功能（不同产品的叫法可能不一样，但功能基本是一致的）。这个功能的出现我的理解是：

1、展示篇幅有限，全部展示会占用页面过多的面积

2、每个人的兴趣点不一样，想浏览的内容千差万别，如果把内容全盘展示出来，会影响大家的阅读体验，增加阅读负担（看到自己不感兴趣的内容滑鼠标滚轮会滑倒手抽筋有木有）

下面我们就来具体谈一谈。

1、LOFTER

在LOFTER里有两种方式可以达到展开全部能容得效果。一个是点击图片，一个点击内容下方的展开标签。

后一种方式是很常用的一种方式，用户也很好理解。第一种方式虽然便捷，但是个人还是觉得有点混乱。点击图片主流的心理预期是查看大图,但是在LOFTER里面却是展开全部内容，在图前面文字较多的情况下，还需要向下滚动鼠标滚轮才能看到图片。当点击图片展开了全部内容后，再次点击图片，这次该是查看大图了吧。但是内容却收起了。这和用户的心理预期形成了很大的落差。新浪微博在这方面做的不错，请继续往下看。

2、新浪微博

微博文字内容有字数限制，“展开”和“收起”功能主要体现在图片和评论里。

首先，说说图片的“展开”和“收起“。这项功能应用在图片上其实就是图片的放大和缩小。在新浪微博里显示的都是 缩略图，当鼠标移入图中时，鼠标的指示箭头就变成了一个有加号的放大镜，这很形象的说明了它的作用，点击图片则被放大。

当图被放大时，鼠标则又变成了带减号的放大镜，同时这也很形象的说明了它的作用，点击图片则被缩小。这个小小的心理暗示，很容易关联到用户的心理预期，用户一看就明白了它的功能。

再来说说评论里的“展开”和“收起”。当评论达到一定的数量以后，要全部显示就比较困难了。新浪微博的做法是在评论后显示”后面还有XX条评论，点击查看“。点击后页面会跳转到新页面，这做的好处是当评论数量特别大的时候，不会在原页面展开非常多的下拉内容，用户可以随时停止浏览评论，继续回来原页面浏览后面的内容。但是我发现，跳转到新页面后，原页面即被覆盖，看完评论当用户后退到原来页面的时候，又回到了微博的顶部，没有保留开始浏览的位置。用户又要从头浏览一遍开始已经浏览过的内容。这真是太糟糕了，用户又要重复操作一遍。相比起来豆瓣这一点做的很好，当用户查看了一项具体内容后退到原来页面时，浏览进度被保存下来了，用户可以继续浏览接下来的被容，浏览体验并没有被打断。

3、知乎

知乎在这方面有点像是LOFTER和新浪微博的混合体。知乎有三种方式 可以展开全部内容，一是像LOFTER一样，点击图片（这里知乎在展开内容的同时也执行了打开大图操作）；二是点击文字区域；三是点击内容下方的“显示全部”标签。点击图片同时查看大图和展开全部内容很惊艳，这样既和用户点击图片查看大图的心理预期吻合，同时给用户带来了惊喜，关闭大图后发现内容已经被打开，可以说这是一个无缝的操作。

在文字区域点击同样会展开全部内容，我个人觉得这是知乎做的贴心的地方，这与点击图片展开全部内容不一样，点击文字展开全部内容更符合用户心理预期。当展开内容后知乎采用的是像新浪微博那样点击图片查看大图的方式，形式也跟新浪微博一致，有带加减号的放大镜的暗示。

同时知乎有个小细节做的很好，不管你采用的是何种展开方式，都会马上内容右上方出现一个收起按钮。

4、当当、亚马逊、京东的购书页面

a、当当

当当的书籍详细介绍展开按钮，离主要要视觉区较远，当网页上下充斥着大量内容时很难发现，按钮离主要内容比较原始，也增加了移动鼠标操作的。相对来说，展开按钮在内容正下方以特殊方式显示更易被察觉。

b、亚马逊

亚马逊想查看书籍描述详情时，展开标签在内容正下方，容易察觉也容易操作。但是当点击后却不是出现下拉内容，而是跳转到了新页面，而且新页面与旧页面并无区别，只是把需要查看的更多内容显示出来了。这种跳转到新页面的方式其实耗费了更长的时间，特别是当用户网络环境不佳的时候，无疑是个非常糟糕的体验。

c、京东

京东查看书籍详细信息的展开标签和亚马逊一样在内容下方，而且做了特殊效果显示。当点击展开标签时，内容很快便伴随着一个动态交互效果下拉显示出来了。整个过程很连贯流畅，同时又动态交互效果反馈，整体体验感觉很好。

三者比起来，京东的体验效果是最好的，从用户体验度，和操作效果上来说又要优于亚马逊和当当。

5、UC浏览器收藏夹功能

浏览器的收藏夹功能是用户常用的功能之一，它的目的是为用户收集整理常用的网站，并且在用户需要的时候能够快速的被访问到。纵观眼下主流的浏览器收藏夹的显示都是密密麻麻的站点名堆积起来的文字。特别是当收藏的网站数量较多的时候，用户要找到当下想要访问的网站是需要花一些时间搜寻的。眼下，在我使用过的浏览器里，UC浏览器PC版针对收藏夹的改进是最令人满意的。它抛弃了传统的纯文字显示，有点类似于Win8的Metro风格，在大色块里显示站点的名字，图形和文字结合着运用，更方面用户查找。贴心的是，UC还提供了收藏夹显示模式切换功能，可以从现在的视图模式切换到传统的列表模式，充分考虑到了用户的使用习惯。

6、微信朋友圈

在微信朋友圈里当文字数量较多的时候只会显示部分文字，然后文字下方会有个全文展开标签，点击就可以浏览全文了。但是，现在问题来了，需要展开标签的标准是什么，是文字数量达到了多少？于是乎，我脑残的数了数两个在我朋友圈里需要点击“全文”的朋友圈字数，一个是126字，一个是101字，都没有达到140字啊（原谅我自动与新浪微博进行了对比） 。而且当你点击“全文”后，发现就只还有一两行的内容，只有那么少的内容被隐藏，为什么还要我点击一下，直接显示完全不是更方便吗？

7、虾米音乐和网易云音乐

虾米音乐的专辑介绍页面，专辑介绍展开后，专辑内歌曲信息就被下移到底部，而且专辑信息相当冗长，展开速度很快，没有交互动画过渡，显示歌曲信息被移到了哪里。当用户展开专辑详细信息后，要一边查看着冗长的专辑信息，一遍寻找歌曲信息到底在哪。在我个人开来音乐播放器的核心功能还是播放歌曲，因此不要有让用户迷失的操作。

相对来说，网易云音乐做的要用心的很多。网易云音乐并没有采用这种“展开”的形式，而是采用了水平tab的方式，有歌曲信息，评论，专辑详情三个tab可切换。并且专辑详情信息，简明扼要，没有多读冗长的信息。这种水平tab的方式，各个tab下的信息都是独立的，三类独立信息不会混在一起，分类明确，切换起来也非常方便。

8、总结

“展开”和“收起”功能并不是只要内容多就可以使用。

使用时应该考虑到具体的内容和具体的环境，内容是否有必要使用这一功能？如果有必要应该使用何种形式？下拉显示，还是跳转到新页面，或者保留原页面新建跳转页面，这些都是需要考虑的问题。除此之外用户的具体需求，以及心理预期也不容忽视。

在这里我提几点关于“展开”和“收起”功能的建议：

a、“展开”标签应该采用离内容最近原则，不宜远离用户的主要视觉关注点。

b、视内容的多少确定“展开”的形式，如果展开的内容特别多，则可以考虑新建页面，而不是下拉显示。例如如新浪微博的评论。

c、视情况使用动态交互效果过渡，向用户展示其他内容的去向，起到提示的作用。

d、关注用户的使用习惯及心理预期。

---------------------------------------------------------------------------------------------------

以上都是我个人的一些粗浅看法，虽然都是很细节的问题，但是还是或多或少影响了用户体验。有不同的观点欢迎交流，希望可以借此引发大家对用户体验的思考。