UI设计中标题太长怎样合理处理？

讨论一个比较常见的问题。

读者：呆呆，这个图的卡片列表里，标题用省略号合适吗？

（因为原图涉及读者项目隐私，所以重画了个草图。）

啊！又是没有业务背景的问题。不过这个问题比较简单，可以展开来说一下。

通常，我们会在各类产品里面见到诸如「标题超出部分用省略号显示」这样的设计，譬如上面这图。

于是，许多人在自家产品的设计过程中，遇到此类情况，被开发问到时，也会搪塞一句：文案要是超出就「…」显示吧。

大多数遇到这种情况的，都是因为之前没考虑好，才临时想了这个解决办法。

而很多时候，一些产品之所以用「…」显示，并不是因为单纯地文案溢出，可能是专门设计过的。

所以，如果简单地认为「…」就是解决溢出而使用的方法，那就有问题了。

下面举几个例子。

有些产品，我们几乎看不到列表视图里的标题是有省略号的。

因为这类产品的目的就是让用户读到完整的标题信息，对眼前的内容好做判断，从而考虑是否点进去看详情。

所以在设定的时候，界面中标题字数的规定，与界面样式就已经提前规划好了，可能在后台设置就限定死字数，要求运营人员上新时要统一界面的展示形式。

这种情况下，一般就不会再有省略号的问题，譬如一些知识付费类产品。

比较典型的还有 TED 演讲视频的标题，在《设计体系》这本书里专门提到了这个案例。

对于 TED 来说，演讲标题的信息优先级是最高的，所以他们宁可保留所有标题文案，也不对文案做截断用「…」显示。

因为对标题做截断是很容易的，而难的是把一个演讲主题提炼成一句简短句子，所以他们为了展示更清晰的标题，宁可在界面上保留长标题，甚至为长标题的显示而专门设计相符合的展示形式。

反过来，他们也因为这一点而确定了界面上标题字数的上限，确保文案不会超过界面显示的最大临界值。

包括一些资讯类产品，在标题上也会做限制，以满足最大化呈现且不使用省略号。意思是：假设界面上文案范围定了 30 个字符，那么配置的时候就必须 30 个字符以内把内容表达清楚，且必须完全显示在界面上。

所以经常看到一些 UGC 产品之所以会限制标题字数，原因除了常见的标题不能过长之外，还有一点是为了在列表页就能显示完整。

各位在设计这类产品功能时，也要注意到这一点，而不是随意说一个「字符不能超过 50 吧」。

而有些产品的内容列表，之所以频繁使用省略号，它的目的是为了引导用户点击用的。

这类形式一般出现在营销号发的文章里，多是营销人员自己为了文章点击率而做的。很少会有一款产品的所有内容都是这样的，除非是一些内容产品，运营方是企业自己，为了让产品上的内容有更多人点击而这样去设计，当中可能涵盖了广告，以此赚取广告费。

不过这类内容的设计已经让用户开始反感，所以如果不是特殊情况，最好少这样去做。

当然，还有同类型的，一般出现在页面面积小且需要展示更多信息的集合类视图，比如：

这种形式的设计，就是因为页面上想展示的信息太多，以至于通过这类合集来展示某个模块里的内容，营造出一种很丰富的感觉。

也就是利用「…」引导用户点击，表示信息没有展示全，如果要看，就点开详情，进二级页面。

还有一些产品的省略号，纯粹就是大家理解的，溢出就省略号显示。

比如同样是资讯或内容类，以文字为主的产品，虽然标题超出范围用了省略号，但用户基本也已经知道是什么内容（上面那个集合类视图也是一种），且还有摘要引读。

比如下图：

这种标题字符限制在了两行以内，多余字符用「…」展示，基本上已经是一句完整的话，能让人大致了解这条信息的意思。并且还有部分摘要，已经足够用户判断是否对它有兴趣，如果没兴趣，直接刷走也无所谓。

包括一些电商类产品，用户多以商品图片为主要决策因素，商品标题作为辅助信息，优先级不高，所以标题溢出是否省略号显示也无所谓。

这其中有一个特殊情况，就是有些产品的标题即不展示全，同时又没有省略号，比如淘宝的商品搜索结果页面。

因为这类列表实质是一个产品卖点集合的浓缩词，不是完整的一句话，多余字符展示或者不展示，都不会有太大影响，所以也不重要。

当中我比较反感的还要数农药了。好友邀请的列表视图里，常常看不全昵称，因为好友会有游戏昵称，微信备注会展示在游戏昵称后面，以至于要点到游戏关系里先看全昵称，再到匹配界面邀请好友。既然已经区分了微信好友与游戏好友，为什么昵称上面不也加以区分呢？当然，经常玩的好友可能没这个必要，毕竟头像或昵称都可以很快识别出来，但是偶尔一起玩的好友通过这样的识别方式就比较难了。这里就是简单提一句。

通过上面提到的一些例子，以及不同场景下标题省略号的处理方式，相信大家对这块的理解会比之前更深。

同样，对于开篇读者提到的问题，更符合的情况可能类似于知乎这种，有完整句子，所以标题是否省略号处理也就没太大影响。

但具体的还是要结合业务详情仔细考量。

而标题内容的展示是否要用省略号处理，优先要看这条信息的业务权重，以及是否会影响用户决策。

所以各位在设计这类内容标题是否要用「…」显示时，也要注意判断自己的产品特性符合哪种类型，而不是随意一句话，说「超出就省略号显示好了」。

（文章来源于微信公众号@呆呆有理，作者：呆呆本人）