從兩個大環(huán)境下看待這個問題，一個是移動端產(chǎn)品，另一個是PC端產(chǎn)品，這里我們主要討論移動端產(chǎn)品。

由于移動端頁面尺寸較小的特性，常常無法像PC端那樣在一個頁面中展現(xiàn)出多信息多任務(wù)，因此在面對多級的信息架構(gòu)設(shè)計時，最常規(guī)且傳統(tǒng)的做法是將某一場景/任務(wù)下的信息，通過設(shè)計頁面的跳轉(zhuǎn)/或增加頁面的長度來實現(xiàn)。

但是一個現(xiàn)實的問題在于，用戶愿不愿意滑動？根據(jù)埋點數(shù)據(jù)顯示，在首屏沒有做好內(nèi)容曝光的前提下，多數(shù)移動端頁面超過首屏的內(nèi)容點擊量會急劇下滑，說明用戶很少主動的查看一屏以外的內(nèi)容。

因此對于移動端產(chǎn)品來說，一些重要的內(nèi)容必須保證用戶在一屏內(nèi)可以看到，而用戶有必要進(jìn)一步閱讀的內(nèi)容也需要做好用戶瀏覽行為的引導(dǎo)。

從適用場景角度，可將信息超載的設(shè)計類型分為「頁面展示信息超載」和「頁面版塊信息超載」，本文將分為上下兩節(jié)針對此將進(jìn)行詳細(xì)的案例分析分享。

頁面展示信息超載

根據(jù)不同的用戶需求以及適用場景，當(dāng)用戶僅限于當(dāng)頁的瀏覽時，如何保證大量的信息能有節(jié)奏、有目的的傳達(dá)給用戶是我們需要考慮的。

在此類型中主要實現(xiàn)手段有隱藏化設(shè)計、場景分頁、無限加載、向下展開按鈕。

隱藏化設(shè)計

在探索更多業(yè)務(wù)場景的同時，APP的迭代不僅僅是優(yōu)化更需要考慮功能的疊加，強調(diào)不同的場景聚焦于不同的核心信息上成為了重中之重，為了向用戶營造一種架構(gòu)全面而使用簡單的用戶體驗，隱藏化設(shè)計的概念可以幫助我們拓展更多交互的可能性。

優(yōu)勢：

1. 滿足用戶不同場景不同需求

2. 產(chǎn)品架構(gòu)更清晰，用戶使用更簡便

劣勢：
沒有提示和線索的隱藏則需要做好新手引導(dǎo)，如早期微信小程序的下滑打開方式等。

適用性：
適用于一些多場景的產(chǎn)品，和用戶場景具有明顯行為特點的產(chǎn)品功能模塊中

交互細(xì)節(jié)：
結(jié)合上面的案例展示，主流app的隱藏化設(shè)計主要體現(xiàn)于卡片模態(tài)面板、屏幕擴(kuò)展、浮窗。

卡片模態(tài)面板

自從19年ios13發(fā)布新設(shè)計特性，卡片模態(tài)面板就陸陸續(xù)續(xù)被運用到各大產(chǎn)品中。

1. 使用熱區(qū)高頻于屏幕的中下方，且手勢方便快捷，適合單手操作，因此廣泛的用于一些出行類的app

2. 具有可伸縮的特性，可適用于一個頁面的不同場景

3. 處理當(dāng)前模態(tài)面板的任務(wù)時，仍然可以看到面板后的界面環(huán)境，并不會讓用戶有太大的抵觸感。

4. 但是使用時需要注意，模態(tài)的用途是切換任務(wù)狀態(tài)，不要僅因為喜歡它的樣式和動效而使用。

5. 不適合用于展示沉浸閱讀內(nèi)容，建議設(shè)計于復(fù)雜度不高的支線任務(wù)。

屏幕擴(kuò)展

如案例展示的系統(tǒng)負(fù)一屏、蝦米音樂）

當(dāng)頁面的功能屬于重要但低頻時，可以考慮使用屏幕擴(kuò)展進(jìn)行設(shè)計。

此類型常見的交互設(shè)計方式有兩種：一種是常見于各大手機(jī)系統(tǒng)主頁以及微信的“負(fù)一屏”設(shè)計；另一種是app首頁的“二樓”設(shè)計，如上面案例展示的“蝦米番你街”，還有淘寶之前推出的“淘寶二樓”。

使用時需要最注意的是：

此形態(tài)的設(shè)計和產(chǎn)品賣點已經(jīng)運營思路是緊密相關(guān)的，需要綜合考慮

浮窗

這個控件的使用可能會和屏幕擴(kuò)展的使用聯(lián)系較為緊密，從微信前期浮窗的使用情況來看，不排除是為了解決當(dāng)使用小程序時無法接受到新消息，但又怕退出后無法找回而產(chǎn)生的焦慮感而誕生的功能。但同樣也是為了解決用戶不同場景的不同任務(wù)需求。

但當(dāng)浮窗中只有一個待看文章時，需要單擊浮窗后再點擊熱區(qū)才能打開內(nèi)容，兩次點擊行為可以考慮是否有優(yōu)化的空間。

除了隱藏化設(shè)計，以下傳統(tǒng)頁面信息過載的處理方式也值得思考：

場景分頁

翻頁場景常伴隨著分頁器的使用，通過上下頁翻閱來進(jìn)行信息瀏覽。

優(yōu)勢：

1. 快速告知用戶信息量

2. 可自主性選擇瀏覽內(nèi)容

3. 便于定位回找

4. 瀏覽信息更有節(jié)奏感

5. 

劣勢：
需要點擊跳轉(zhuǎn)來獲取更多內(nèi)容，如果設(shè)計不符合使用情景，會在一定程度上打斷用戶的思路，很有可能就會導(dǎo)致用戶的流失。

適用性：
移動端中可適用于一些對內(nèi)容的掌控更強的場景，需要用戶更專注，如后臺表單等，

但隨著移動互聯(lián)網(wǎng)的發(fā)展與移動設(shè)備的普及，早期的網(wǎng)頁端社區(qū)類產(chǎn)品和線下書籍的閱讀也開始嘗試轉(zhuǎn)戰(zhàn)移動端，可受限于功能形式和用戶習(xí)慣的使用差異，以至于需要在兩端之間做好平衡，去考慮用戶操作習(xí)慣以及兩端適配的問題。

因此，較為早期的一類互聯(lián)網(wǎng)產(chǎn)品和由線下普及到線上的場景，會采用分頁的方式來綜合用戶在兩者之間的行為習(xí)慣，我們也可以看到像知乎這類普及于移動端的產(chǎn)品都并沒有選用分頁的方式進(jìn)行內(nèi)容的設(shè)計，而是直接設(shè)計貼合用戶移動端行為習(xí)慣的交互方式。

交互細(xì)節(jié)：
在移動端使用分頁器，一般常見為滑動條和動作面板這兩種控件進(jìn)行設(shè)計。

仔細(xì)去體驗了這兩款產(chǎn)品，發(fā)現(xiàn)它們的分頁并不是單純意義上的分頁，而是整合了無限加載與分頁選擇。

類似于無限加載下滑，但是會自動定位到具體頁數(shù)上，比如我滑了 6 次，頁數(shù)就到了第 2 頁了。

從這里看出，移動端出現(xiàn)內(nèi)容加載的情況時，還是以無限加載為主要方式，即使有分頁，也是輔助作用。

引發(fā)思考：

滑動條的選頁方式也考慮在滑動滑塊的過程中頁面展示跟隨滑塊位置而變化，選定內(nèi)容位置后點擊確認(rèn)，否則可以點擊取消回到選擇前原來的位置。

無限加載

即無限滾動加載，通常以 Feed 流/瀑布流的形式出現(xiàn)于產(chǎn)品中，允許用戶通過滾動瀏覽大量內(nèi)容而不刷到頁面最底層的技術(shù)。當(dāng)你向下滾動頁面時，這種技術(shù)將會持續(xù)地刷新頁面。

優(yōu)點：
沉浸式信息瀏覽，不會被打斷，增加用戶參與度，促進(jìn)用戶停留更長時間。

比起小熱區(qū)范圍的點擊行為，滑動對于用戶來說更為簡便更友好，尤其在移動端可以快速瀏覽到感興趣的內(nèi)容

缺點：

1. 無法預(yù)知有多少信息，用戶容易產(chǎn)生迷失感，卻無法回定位內(nèi)容

2. 對頁面性能要求更高，用戶向下滾動頁面越多，頁面上承載的內(nèi)容就越多，會導(dǎo)致頁面性能越來越慢

3. 對設(shè)備資源要求更高，在含有大量內(nèi)容的app中，資源有限的設(shè)備（如iPad）可能由于其已加載的內(nèi)容信息過多而開始降速

適用性：
在移動端更方便使用，適用于快速瀏覽內(nèi)容和發(fā)現(xiàn)內(nèi)容的場景，如休閑娛樂為主的社交型產(chǎn)品/資訊性產(chǎn)品

交互細(xì)節(jié)：
對于這類交互形式，最高頻的用戶需求是回到頂部和資訊內(nèi)容的刷新以快速尋找感興趣的內(nèi)容。

回到頂部

這類需求常規(guī)解決問題的方式是點擊界面頂部回到頂部（ios用戶常用操作），除此之外最常規(guī)的操作是在頁面右下角的回到頂部懸浮按鈕。

還有一種結(jié)合用戶心理認(rèn)知的交互行為設(shè)計——底部欄首頁icon的利用，如上面案例的淘寶和同花順，點擊首頁icon可回到初始位置重新加載，淘寶/同花順過把這一隱藏操作顯性化，并且合理利用用戶回到頂部的需求，當(dāng)用戶不斷下滑頁面時icon變成火箭/刷新的樣子，點擊后立即回到頂部并可進(jìn)行所有資訊的重新瀏覽。

尋找感興趣的內(nèi)容

無限加載最大的優(yōu)勢就是能幫助用戶快速瀏覽以找到感興趣的內(nèi)容，但當(dāng)頁面本身預(yù)加載的內(nèi)容就都不能吸引用戶興趣，就需要考慮如何通過設(shè)計幫助用戶找到真正感興趣的內(nèi)容。

如上面案例的同花順和知乎，當(dāng)瀏覽同花順時，長時間沒有點擊進(jìn)入任何一篇文章時，在瀏覽中部就會出現(xiàn)刷新提醒；當(dāng)在知乎的搜索結(jié)果頁滑動大概3屏后，知乎會分析判斷用戶沒有找到他想要的信息，于是出現(xiàn)“向知友提問”的按鈕，引導(dǎo)用戶直接提問自己想要的（亮點之處在于對用戶行為進(jìn)行潛意識分析，而不是全程展示這個提問按鈕，避免減少用戶實際瀏覽區(qū)域，造成干擾）。

向下展開按鈕

在pc端的網(wǎng)頁中，為了折中分頁和加載的利弊，常常會選用“查看更多”的按鈕，點擊后向下繼續(xù)進(jìn)行加載，同時也能給用戶更多的停頓和節(jié)奏去主動的獲取更多的信息。

而對于不停強調(diào)活躍度的移動端的產(chǎn)品來說，向下展開的“查看更多”按鈕，不僅僅只是折中的思考，還有運營層面的考慮。

（向下展開更多的情況還分為兩種，一種是向下展開更多選擇，另一種是向下展開看到全部內(nèi)容，以下講的更多是后者）

優(yōu)勢：
產(chǎn)品運營層面

1、增加點擊促進(jìn)引流/轉(zhuǎn)化

引導(dǎo)注冊、關(guān)注、付費等的轉(zhuǎn)化

2、為精準(zhǔn)推薦提供更多依據(jù)

網(wǎng)站可以通過用戶點擊“閱讀更多”按鈕的行為，獲取有效點擊的用戶數(shù)，精準(zhǔn)收集用戶閱讀喜好，開發(fā)完善用戶畫像，便于日后精準(zhǔn)推送某個作者、某類作者、某類文章給點擊的用戶以及相似的用戶群體，優(yōu)化智能推薦。

3、判斷文章真實質(zhì)量

通過文章點擊的人數(shù)、點開率等對創(chuàng)作者進(jìn)行管理，便于把控平臺內(nèi)容質(zhì)量，重點支持優(yōu)質(zhì)創(chuàng)作者，從而建立更好的內(nèi)容生態(tài)。

用戶層面

1. 增加半遮面的神秘感

2. 保證穩(wěn)定快速的閱讀體驗，提升加載性能

3. 降低閱讀成本

劣勢：
若不是為了提升轉(zhuǎn)化率或者增加曝光率，僅是展示型文章，就會犧牲掉部分的用戶體驗。

適用性：
適用于需要考核的內(nèi)容創(chuàng)造者、需要收集更多用戶數(shù)據(jù)的產(chǎn)品

總結(jié)

移動端由于界面空間有限，具有「一個界面一個任務(wù)」的特點，因此當(dāng)面臨產(chǎn)品增加功能時，不能一味在界面中進(jìn)行功能的堆積排列，而應(yīng)該更強調(diào)于頁面場景化的設(shè)計，同時頁面中的每一個細(xì)節(jié)設(shè)計都應(yīng)該做到恰到好處，減少用戶思考是否需要使用的精力。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)