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

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

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

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

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

頁面展示信息超載

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

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

隱藏化設(shè)計(jì)

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

優(yōu)勢(shì)：

1. 滿足用戶不同場(chǎng)景不同需求

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

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

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

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

卡片模態(tài)面板

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

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

2. 具有可伸縮的特性，可適用于一個(gè)頁面的不同場(chǎng)景

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

4. 但是使用時(shí)需要注意，模態(tài)的用途是切換任務(wù)狀態(tài)，不要僅因?yàn)橄矚g它的樣式和動(dòng)效而使用。

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

屏幕擴(kuò)展

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

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

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

使用時(shí)需要最注意的是：

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

浮窗

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

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

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

場(chǎng)景分頁

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

優(yōu)勢(shì)：

1. 快速告知用戶信息量

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

3. 便于定位回找

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

5. 

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

適用性：
移動(dòng)端中可適用于一些對(duì)內(nèi)容的掌控更強(qiáng)的場(chǎng)景，需要用戶更專注，如后臺(tái)表單等，

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

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

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

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

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

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

引發(fā)思考：

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

無限加載

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

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

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

缺點(diǎn)：

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

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

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

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

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

回到頂部

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

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

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

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

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

向下展開按鈕

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

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

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

優(yōu)勢(shì)：
產(chǎn)品運(yùn)營(yíng)層面

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

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

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

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

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

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

用戶層面

1. 增加半遮面的神秘感

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

3. 降低閱讀成本

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

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

總結(jié)

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

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

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

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