由于移動端頁面尺寸較小的特性，常常無法像PC端那樣在一個頁面中展現(xiàn)出多信息多任務(wù)，因此在面對多級的信息架構(gòu)設(shè)計時，最常規(guī)且傳統(tǒng)的做法是將某一場景/任務(wù)下的信息，通過設(shè)計頁面的跳轉(zhuǎn)/或增加頁面的長度來實(shí)現(xiàn)。
從適用場景角度，可將信息超載的設(shè)計類型分為「頁面展示信息超載」和「頁面版塊信息超載」，上節(jié)我們聚焦「頁面展示信息超載」進(jìn)行了展開，本文將對「頁面版塊信息超載」進(jìn)行展開。
頁面版塊信息超載
在設(shè)計內(nèi)容版塊時，當(dāng)遇到內(nèi)容放不下的情況，主流的對應(yīng)策略之一是先在當(dāng)前版塊展示一部分內(nèi)容，剩余內(nèi)容以“查看更多”的方式來隱藏，以保證用戶當(dāng)前良好的閱讀體驗(yàn)。但考慮到不同業(yè)務(wù)以及交互層面的使用，不同情況下可以有不同的交互情況。
主要可分為「場景跳轉(zhuǎn)」、「場景刷新」、「場景滑動」和「場景組合」。
場景跳轉(zhuǎn)
作為最常見最普遍的一種場景，承載的功能是二級頁面的入口，用戶通過點(diǎn)擊進(jìn)入二級頁面查看更多。
優(yōu)勢：
通用性高，可以進(jìn)行版塊內(nèi)容的全瀏覽，給用戶最大選擇權(quán)。
劣勢：
跳轉(zhuǎn)到二級頁面進(jìn)行選擇，需要整頁加載，用戶對后續(xù)內(nèi)容沒有預(yù)期易引起壓力；
選擇完成需要返回到上級頁面，增加用戶路徑。
適用性：
適合內(nèi)容體量較大對用戶重要性又較高的版塊（用戶對該版塊內(nèi)容有查看更多需求且頻次較高）
案例展示：
交互細(xì)節(jié)：
入口的設(shè)計位置和樣式需根據(jù)版塊的用戶瀏覽動線來決定的。常用的入口位置有「標(biāo)題右側(cè)」、「標(biāo)題icon」、「版塊底部」。
基于福格行為模型的運(yùn)用，激發(fā)用戶的跳轉(zhuǎn)行為需要考慮用戶的動機(jī)、能力、觸發(fā)：
· 標(biāo)題右側(cè)
M：
多用于橫向滑動展示的模塊，一定程度上契合用戶瀏覽動線的設(shè)計，具備一定的動機(jī)，也仍具備跳轉(zhuǎn)本身帶來的劣勢——易對用戶引發(fā)沒有預(yù)期的壓力。
A、T：
標(biāo)題的右側(cè)導(dǎo)致按鈕設(shè)計的空間從一開始就是被限制，易由于不顯眼、面積不大而導(dǎo)致的觸發(fā)不足、能力受阻。
按鈕的設(shè)計：
只要具備一定的合理性動機(jī)，可以通過體驗(yàn)上的設(shè)計提升用戶的觸發(fā)以及能力。
如具體化引導(dǎo)文案讓用戶對后續(xù)內(nèi)容有所預(yù)期（如下方案例：蛋卷基金、嗶哩嗶哩）；通過線性或者面型的容器承載文字，讓它看起來更易辨識和易點(diǎn)擊（如下方案例：網(wǎng)易云音樂）；加入主色讓它更加醒目（如下方案例：蛋卷基金）。
· 標(biāo)題icon
M：
幾乎適用任何場景，但動機(jī)的產(chǎn)生單純依靠標(biāo)題以及內(nèi)容的展示
A、T：
信息傳達(dá)無學(xué)習(xí)成本，節(jié)省頁面空間，但點(diǎn)擊區(qū)域小；位于頂端，對于內(nèi)容超過一屏的模塊，用戶需要上滑返回才能點(diǎn)擊
· 板塊底部
M：
底部的位置符合用戶垂直向下的視覺動線，更容易被展示內(nèi)容吸引而順理成章的接受引導(dǎo)進(jìn)入內(nèi)頁；
但仍具備上述提及跳轉(zhuǎn)本身的劣勢。
A、T：
由于底部可設(shè)計的空間較足，查看更多除了文字鏈接的設(shè)計以外，還可以有更多發(fā)揮空間，層級也能得到顯著，進(jìn)而提高觸發(fā)條件和點(diǎn)擊能力。
按鈕設(shè)計：
豎向的展示設(shè)計，勢必會導(dǎo)致占用更多的頁面空間，因此在頁面模塊較多的情況下，仍應(yīng)該注意不必因強(qiáng)調(diào)“查看更多”而占用過多的頁面空間。
場景刷新
目的實(shí)現(xiàn)當(dāng)前版塊更多內(nèi)容的即時更換。
優(yōu)勢：
大幅降低了新頁面跳轉(zhuǎn)帶來的弊端，用戶不需要承受多鏈路所帶來的短期記憶和整頁的加載成本，也無需返回到原有的瀏覽頁面中。雖然內(nèi)容依舊是缺少預(yù)期的，但是在用戶的接受范圍內(nèi)，還有一種抽盲盒的驚喜。
劣勢：
通用性不強(qiáng)，內(nèi)容被局限在一個版塊中，無法實(shí)現(xiàn)內(nèi)容的全覽，而且隨機(jī)性很強(qiáng)。
適用性：
更適用于類似“猜你喜歡”、“隨便看看”的推薦類版塊。
案例展示：
交互細(xì)節(jié)：
以上三個例子選用的按鈕位置和“查看更多”常用的位置類似，但可以看到當(dāng)刷新按鈕結(jié)合具體化的引導(dǎo)文案進(jìn)行設(shè)計時，更能使用戶在一定預(yù)期內(nèi)得到驚喜（如上方案例：網(wǎng)易云音樂）
場景滑動
自ios11中加入了卡片這個嶄新的容器后，卡片獨(dú)立可排列的特征就解鎖了橫向更多的空間。用戶可以通過scroll左右滑動手勢獲取到更多的內(nèi)容。
優(yōu)勢：
卡片滑動方式兼容性很強(qiáng)，可利用更少的頁面空間展示更多的內(nèi)容。
劣勢：
滑動展示有限，一般需要配合跳轉(zhuǎn)需求出現(xiàn)。
適用性：
更適用于類目的快捷展示，便于用戶選擇更感興趣的內(nèi)容；
案例展示：
交互細(xì)節(jié)：
多用于固定容器為單位的橫向排列側(cè)滑展示更多內(nèi)容，通常板塊底部會有頁面指示器，或露出部分來提示用戶滑動。而這種橫向滑動場景常體現(xiàn)于「卡片式」和「金剛區(qū)」
· 卡片式
布局上通過展示卡片的一部分，暗示用戶可以通過側(cè)滑看到更多。設(shè)計上常和跳轉(zhuǎn)場景組合使用，除此之外，也可根據(jù)業(yè)務(wù)上的需要考慮上方案例中且慢app的交互形式，頁面指示器結(jié)合側(cè)滑無限加載展示用戶評論，通過用戶交互成本較低的方式，即解決了用戶觸發(fā)動機(jī)弱而導(dǎo)致跳轉(zhuǎn)場景轉(zhuǎn)換率不高的問題，也能達(dá)成業(yè)務(wù)上的需求。
· 金剛區(qū)
隨著各大主流app承載的業(yè)務(wù)范圍越來越廣，首頁金剛區(qū)的運(yùn)用已經(jīng)屢見不鮮，能快速展示所有業(yè)務(wù)，便于用戶快速選擇需要的內(nèi)容。
場景組合
為了給用戶提供更多的選擇，也為了能承載更多的信息，常將刷新場景、滑動場景和跳轉(zhuǎn)場景結(jié)合使用。
優(yōu)勢：
彌補(bǔ)了單一交互的不足，用戶可以根據(jù)自己的選擇進(jìn)行操作。
劣勢：
不同的交互類型的集合，用戶有可能會優(yōu)先選擇交互成本更低的操作，因此跳轉(zhuǎn)場景可能會被弱化。
適用性：
模塊上線初期，可以進(jìn)行埋點(diǎn)設(shè)計，通過數(shù)據(jù)對比更能知道更貼近用戶的行為。
案例展示：
交互細(xì)節(jié)：
· 場景滑動+場景跳轉(zhuǎn)
結(jié)合上文中提到的劣勢，如跳轉(zhuǎn)場景的入口設(shè)計太深，用戶的觸發(fā)能力就會不足，如上述案例的淘票票，若其沒有在標(biāo)題右側(cè)設(shè)計查看全部文字鏈接，則當(dāng)用戶滑動查看了大量信息仍未感興趣后，點(diǎn)擊更多卡片進(jìn)入內(nèi)頁的概率也會大大降低。此類情況也經(jīng)常于金剛區(qū)的組合場景出現(xiàn)。
· 場景刷新+場景跳轉(zhuǎn)
當(dāng)將兩類功能都平級的設(shè)計出現(xiàn)，可以通過埋點(diǎn)數(shù)據(jù)分析出此功能區(qū)用戶的真實(shí)心理行為。
總結(jié)
移動端由于界面空間有限，具有「一個界面一個任務(wù)」的特點(diǎn)，因此當(dāng)面臨產(chǎn)品增加功能時，不能一味在界面中進(jìn)行功能的堆積排列，而應(yīng)該更強(qiáng)調(diào)于頁面場景化的設(shè)計，同時頁面中的每一個細(xì)節(jié)設(shè)計都應(yīng)該做到恰到好處，減少用戶思考是否需要使用的精力。
本文對移動端頁面展示信息超載設(shè)計進(jìn)行了總結(jié)分析，但不是唯一，也沒有哪一種方案是“絕對的優(yōu)質(zhì)體驗(yàn)”，最終的落地設(shè)計還需要視場景而定。下篇將對頁面板塊信息超載設(shè)計進(jìn)行總結(jié)分析～
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)