UI設計中標題太長怎樣合理處理？

討論一個比較常見的問題。

讀者：呆呆，這個圖的卡片列表裏，標題用省略號合適嗎？

（因為原圖涉及讀者項目隱私，所以重畫了個草圖。）

啊！又是沒有業務背景的問題。不過這個問題比較簡單，可以展開來說一下。

通常，我們會在各類產品裏麵見到諸如「標題超出部分用省略號顯示」這樣的設計，譬如上麵這圖。

於是，許多人在自家產品的設計過程中，遇到此類情況，被開發問到時，也會搪塞一句：文案要是超出就「…」顯示吧。

大多數遇到這種情況的，都是因為之前沒考慮好，才臨時想了這個解決辦法。

而很多時候，一些產品之所以用「…」顯示，並不是因為單純地文案溢出，可能是專門設計過的。

所以，如果簡單地認為「…」就是解決溢出而使用的方法，那就有問題了。

下麵舉幾個例子。

有些產品，我們幾乎看不到列表視圖裏的標題是有省略號的。

因為這類產品的目的就是讓用戶讀到完整的標題信息，對眼前的內容好做判斷，從而考慮是否點進去看詳情。

所以在設定的時候，界麵中標題字數的規定，與界麵樣式就已經提前規劃好了，可能在後台設置就限定死字數，要求運營人員上新時要統一界麵的展示形式。

這種情況下，一般就不會再有省略號的問題，譬如一些知識付費類產品。

比較典型的還有 TED 演講視頻的標題，在《設計體係》這本書裏專門提到了這個案例。

對於 TED 來說，演講標題的信息優先級是最高的，所以他們寧可保留所有標題文案，也不對文案做截斷用「…」顯示。

因為對標題做截斷是很容易的，而難的是把一個演講主題提煉成一句簡短句子，所以他們為了展示更清晰的標題，寧可在界麵上保留長標題，甚至為長標題的顯示而專門設計相符合的展示形式。

反過來，他們也因為這一點而確定了界麵上標題字數的上限，確保文案不會超過界麵顯示的最大臨界值。

包括一些資訊類產品，在標題上也會做限製，以滿足最大化呈現且不使用省略號。意思是：假設界麵上文案範圍定了 30 個字符，那麼配置的時候就必須 30 個字符以內把內容表達清楚，且必須完全顯示在界麵上。

所以經常看到一些 UGC 產品之所以會限製標題字數，原因除了常見的標題不能過長之外，還有一點是為了在列表頁就能顯示完整。

各位在設計這類產品功能時，也要注意到這一點，而不是隨意說一個「字符不能超過 50 吧」。

而有些產品的內容列表，之所以頻繁使用省略號，它的目的是為了引導用戶點擊用的。

這類形式一般出現在營銷號發的文章裏，多是營銷人員自己為了文章點擊率而做的。很少會有一款產品的所有內容都是這樣的，除非是一些內容產品，運營方是企業自己，為了讓產品上的內容有更多人點擊而這樣去設計，當中可能涵蓋了廣告，以此賺取廣告費。

不過這類內容的設計已經讓用戶開始反感，所以如果不是特殊情況，最好少這樣去做。

當然，還有同類型的，一般出現在頁麵麵積小且需要展示更多信息的集合類視圖，比如：

這種形式的設計，就是因為頁麵上想展示的信息太多，以至於通過這類合集來展示某個模塊裏的內容，營造出一種很豐富的感覺。

也就是利用「…」引導用戶點擊，表示信息沒有展示全，如果要看，就點開詳情，進二級頁麵。

還有一些產品的省略號，純粹就是大家理解的，溢出就省略號顯示。

比如同樣是資訊或內容類，以文字為主的產品，雖然標題超出範圍用了省略號，但用戶基本也已經知道是什麼內容（上麵那個集合類視圖也是一種），且還有摘要引讀。

比如下圖：

這種標題字符限製在了兩行以內，多餘字符用「…」展示，基本上已經是一句完整的話，能讓人大致了解這條信息的意思。並且還有部分摘要，已經足夠用戶判斷是否對它有興趣，如果沒興趣，直接刷走也無所謂。

包括一些電商類產品，用戶多以商品圖片為主要決策因素，商品標題作為輔助信息，優先級不高，所以標題溢出是否省略號顯示也無所謂。

這其中有一個特殊情況，就是有些產品的標題即不展示全，同時又沒有省略號，比如淘寶的商品搜索結果頁麵。

因為這類列表實質是一個產品賣點集合的濃縮詞，不是完整的一句話，多餘字符展示或者不展示，都不會有太大影響，所以也不重要。

當中我比較反感的還要數農藥了。好友邀請的列表視圖裏，常常看不全昵稱，因為好友會有遊戲昵稱，微信備注會展示在遊戲昵稱後麵，以至於要點到遊戲關係裏先看全昵稱，再到匹配界麵邀請好友。既然已經區分了微信好友與遊戲好友，為什麼昵稱上麵不也加以區分呢？當然，經常玩的好友可能沒這個必要，畢竟頭像或昵稱都可以很快識別出來，但是偶爾一起玩的好友通過這樣的識別方式就比較難了。這裏就是簡單提一句。

通過上麵提到的一些例子，以及不同場景下標題省略號的處理方式，相信大家對這塊的理解會比之前更深。

同樣，對於開篇讀者提到的問題，更符合的情況可能類似於知乎這種，有完整句子，所以標題是否省略號處理也就沒太大影響。

但具體的還是要結合業務詳情仔細考量。

而標題內容的展示是否要用省略號處理，優先要看這條信息的業務權重，以及是否會影響用戶決策。

所以各位在設計這類內容標題是否要用「…」顯示時，也要注意判斷自己的產品特性符合哪種類型，而不是隨意一句話，說「超出就省略號顯示好了」。

（文章來源於微信公眾號@呆呆有理，作者：呆呆本人）