本篇文章總結了“查看更多”的應用場景：品類區、信息流、評論區。

一、定義

“查看更多”是頁面內或者頁面之間交互的一種鏈接，是一種獲得更多內容的方式。

廣義的查看更多，以文本、按鈕、icon、頁面指示器、分頁、甚至加載樣式，被廣泛使用于移動端的頁面中，用來提示用戶，點擊可以看到被隱藏的內容。

如下圖：

二、應用場景

1. 品類區

品類區是國內的APP首屏上常見的模塊，對于電商的平臺來講，品類區主要放置的是商品的分類；而提供服務的產品，品類區主要用來展示所提供的業務范圍。

因為移動端首屏空間的珍貴，我們不可能全部羅列展示這些品類；不重要的、使用頻率低的品類就會被隱藏起來。

目前市場上主要有以下三種處理“更多品類”的方式：側滑式、圖標式、折疊式。

1.1側滑式

側滑式的品類區使用屏幕的橫向空間來承載內容。

首屏展示用戶高頻使用的品類，二屏放置非頭部品類；側滑的品類區底部通常會有頁面指示器來提示用戶滑動，比如下圖的淘寶和馬蜂窩。

優點：相對比較靈活，在當前頁面即可查看后續內容，交互成本較低；

缺點：受限于品類區的大小，不能承載太多的信息。

1.2 圖標式

固定放置高頻使用的頭部品類，通常用最后一個品類圖標表示“更多”，適用于分類非常豐富的產品。

比如：攜程、美團，都屬于全品類服務，當用戶想獲得其他服務，就要通過點擊更多打開新頁面，查看全部服務內容。

除此之外，一些產品支持用戶通過“更多”來自定義品類：比如猿題庫，點擊更多后，會跳轉到科目選擇頁；熊貓可以通過“更多”用戶可以根據興趣定義自己的品類。

優點：能夠承載比較豐富的內容。

缺點：用戶沒有對于內容的預知，因此不知道新內容值不值得他們等待一個新頁面，因而會產生猶豫；曝光和點擊率低。

1.3 折疊式

折疊這種形式并不多見，它是在品類區下方顯示“查看更多”的按鈕，比如蘑菇街，采用了一種半透明遮罩+文本的形式，暗示品類區的后續內容。

優點：半透明的遮罩可以讓用戶看到下層的部分信息，點擊前用戶有預知，能夠減少用戶的不確定情緒。

缺點：展開后會推開下方的模塊，前后只節省了半行的空間，并且展開后沒有收回按鈕。

推測是蘑菇街是為了在首屏顯示發現模塊的圖片信息，因此降低了部分品類區的權重。

2. 信息流

APP端的內容通常是由一個個模塊組成，每個模塊區域是固定的，所以通常頁面內的“查看更多”基本為點擊后跳轉到新頁面；或者采用側滑卡片、換一換等衍生形式。

注：信息下沒有其他模塊的，比如頭條、各大app底部的猜你喜歡，通常會以瀑布流的形式，往下滾動時直接加載更多內容。這部分后面會單獨寫，不在本文的討論范圍內。

2.1 標題欄

在模塊標題右側放置“查看更多”是最常見、最普遍的一種展示形式，它已經成為用戶認知里的習慣用法，通常由文字+指示icon、或者單個指示icon組成。

常見為淺灰色弱化展示，重點突出模塊內容，比如掌閱；根據具體產品的需求，如果要突出內容的豐富性/提高頁面跳轉等，也可以文字加大/加重/特殊色展示，比如自如。

但是因為用戶沒有對新內容的預期，點擊欲望比較低。

豆瓣就對此做了優化——增加了數字提示，讓用戶點擊前就能知道頁面內的信息量，消除顧慮。

除此之外，也有一些產品把點擊更多的指示icon直接和標題結合起來，用戶通過點擊標題進行交互。

它適合于和標題關聯性強的內容，同時留出了右側空間，對長標題的模塊比較友好。

優點：已經成為習慣用法，沒有學習成本； 節省頁面空間。

缺點：點擊區域??；位于頂端，對于內容超過一屏的模塊，用戶需要上滑返回才能點擊。

2.2 模塊底部

“查看更多”以按鈕形式存在于模塊底部，因為空間留白和明確了按鈕的表現形式，可點擊性會增加。當我們增加期望后續內容的曝光時，可以采用這種形式。

優點：不會擾亂用戶從上到下的掃描順序；明確可點擊。

缺點：比較浪費頁面空間；會影響用戶對于當前內容的注意力。

2.3 換一換

需要打開新頁面的“查看更多”對于用戶來說無論如何有較高的成本，“換一換”就是因此衍生而來——用戶點擊后，無需跳轉，直接在當前頁對該模塊內容進行刷新。

優點：操作成本低，雖然內容依舊是缺少預期的，但是在用戶的接受范圍內，還有一種抽盲盒的驚喜。

缺點：隨機感，多被用于推薦類模塊，并不適合有秩序的模塊，比如榜單；且其依舊局限于模塊內，用戶需要依靠多次點擊來查看更多，效率比較低。

2.4?組合

很多APP會在模塊內組合使用“查看更多”和“換一換”兩種方式，來彌補單一交互的不足。用戶可以根據自己的需求選擇是換一換，或者新頁面看更多。

常見的樣式是二者作為按鈕放在模塊底部，共用一行空間，比如騰訊動漫，此時二者權重均衡。

當有側重點時，比如QQ音樂的歌單模塊，就通過視覺的大小和空間，突出換一換，弱化更多。

2.5 側滑卡片

因為縱向空間受限，許多產品開始利用橫向來拓展頁面空間。

側滑卡片就是其中代表，它通過顯示部分內容來暗示用戶這里可左右滑動，比如考拉、愛奇藝，滑動n個后會出現查看更多的卡片，引導用戶點擊下一頁。

3. 評論區

3.1 內容

主打UCG的社交、社區類的平臺，核心功能位用戶產出信息、用戶之間的交流，因此有大量的溝通數據，同樣需要“查看更多”來折疊和展開后續內容。

在文字描述上，為了讓用戶有信息量的預期，此處的“查看更多”通常具體化為當前信息條數——查看全部xx條評論。

在視覺上，主打內容的產品，“查看更多”通常弱化處理，比如知乎和ins ，在內容下方用淺灰色的文本顯示“查看更多評論”，我想這也是為什么知乎和ins點贊數都遠高于評論的一個原因了。

（當然，知乎進入全部評論頁后，樓中樓的“查看更多”就是以按鈕形式顯示了）

3.2 互動

而微博在文字上增加了最新評論用戶的ID名，視覺上也用高亮色突出，引導性更強。

如果是知乎是用戶生產內容的社區，那么微博就是在這些頭部內容的基礎上，圍繞他們發酵為話題進行二次討論，用戶間的互動性更強。

三、總結

本文主要總結了”查看更多“分別在品類區、信息流、評論區的幾種應用場景，以及優缺點和適用范圍。

如果還有沒有被總結到的內容，歡迎大家在評論里補充！如果覺得有用，別忘了點贊哦～

本文由 @白露漫談 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議