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