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

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

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

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

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

頁(yè)面展示信息超載

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

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

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

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

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

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

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

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

適用性：
適用于一些多場(chǎng)景的產(chǎn)品，和用戶(hù)場(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ì)方便快捷，適合單手操作，因此廣泛的用于一些出行類(lèi)的app

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

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

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

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

屏幕擴(kuò)展

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

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

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

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

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

浮窗

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

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

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

場(chǎng)景分頁(yè)

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

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

1. 快速告知用戶(hù)信息量

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

3. 便于定位回找

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

5. 

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

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

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

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

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

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

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

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

引發(fā)思考：

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

無(wú)限加載

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

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

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

缺點(diǎn)：

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

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

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

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

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

回到頂部

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

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

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

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

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

向下展開(kāi)按鈕

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

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

（向下展開(kāi)更多的情況還分為兩種，一種是向下展開(kāi)更多選擇，另一種是向下展開(kāi)看到全部?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)站可以通過(guò)用戶(hù)點(diǎn)擊“閱讀更多”按鈕的行為，獲取有效點(diǎn)擊的用戶(hù)數(shù)，精準(zhǔn)收集用戶(hù)閱讀喜好，開(kāi)發(fā)完善用戶(hù)畫(huà)像，便于日后精準(zhǔn)推送某個(gè)作者、某類(lèi)作者、某類(lèi)文章給點(diǎn)擊的用戶(hù)以及相似的用戶(hù)群體，優(yōu)化智能推薦。

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

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

用戶(hù)層面

1. 增加半遮面的神秘感

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

3. 降低閱讀成本

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

適用性：
適用于需要考核的內(nèi)容創(chuàng)造者、需要收集更多用戶(hù)數(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)于頁(yè)面場(chǎng)景化的設(shè)計(jì)，同時(shí)頁(yè)面中的每一個(gè)細(xì)節(jié)設(shè)計(jì)都應(yīng)該做到恰到好處，減少用戶(hù)思考是否需要使用的精力。

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

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

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