公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

移動端信息超載設(shè)計

2021-6-28    資深UI設(shè)計者

日常設(shè)計中,常常在解決一些由于信息過多,而需要對用戶瀏覽行為進行設(shè)計的問題,在這里我們將其定義為“頁面信息超載設(shè)計”。

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


從適用場景角度,可將信息超載的設(shè)計類型分為「頁面展示信息超載」「頁面版塊信息超載」,上節(jié)我們聚焦「頁面展示信息超載」進行了展開,本文將對「頁面版塊信息超載」進行展開。



頁面版塊信息超載


在設(shè)計內(nèi)容版塊時,當遇到內(nèi)容放不下的情況,主流的對應(yīng)策略之一是先在當前版塊展示一部分內(nèi)容,剩余內(nèi)容以“查看更多”的方式來隱藏,以保證用戶當前良好的閱讀體驗。但考慮到不同業(yè)務(wù)以及交互層面的使用,不同情況下可以有不同的交互情況。

主要可分為「場景跳轉(zhuǎn)」、「場景刷新」、「場景滑動」和「場景組合」。



場景跳轉(zhuǎn)


作為最常見最普遍的一種場景,承載的功能是二級頁面的入口,用戶通過點擊進入二級頁面查看更多。


優(yōu)勢:

通用性高,可以進行版塊內(nèi)容的全瀏覽,給用戶最大選擇權(quán)。


劣勢:

跳轉(zhuǎn)到二級頁面進行選擇,需要整頁加載,用戶對后續(xù)內(nèi)容沒有預(yù)期易引起壓力;

選擇完成需要返回到上級頁面,增加用戶路徑。


適用性:

適合內(nèi)容體量較大對用戶重要性又較高的版塊(用戶對該版塊內(nèi)容有查看更多需求且頻次較高)


案例展示:


交互細節(jié):

入口的設(shè)計位置和樣式需根據(jù)版塊的用戶瀏覽動線來決定的。常用的入口位置有「標題右側(cè)」、「標題icon」、「版塊底部」。


基于福格行為模型的運用,激發(fā)用戶的跳轉(zhuǎn)行為需要考慮用戶的動機、能力、觸發(fā)


· 標題右側(cè)


M:

多用于橫向滑動展示的模塊,一定程度上契合用戶瀏覽動線的設(shè)計,具備一定的動機,也仍具備跳轉(zhuǎn)本身帶來的劣勢——易對用戶引發(fā)沒有預(yù)期的壓力。

A、T:

標題的右側(cè)導(dǎo)致按鈕設(shè)計的空間從一開始就是被限制,易由于不顯眼、面積不大而導(dǎo)致的觸發(fā)不足、能力受阻。


按鈕的設(shè)計:

只要具備一定的合理性動機,可以通過體驗上的設(shè)計提升用戶的觸發(fā)以及能力。

具體化引導(dǎo)文案讓用戶對后續(xù)內(nèi)容有所預(yù)期(如下方案例:蛋卷基金、嗶哩嗶哩);通過線性或者面型的容器承載文字,讓它看起來更易辨識和易點擊(如下方案例:網(wǎng)易云音樂);加入主色讓它更加醒目(如下方案例:蛋卷基金)。


· 標題icon


M:

幾乎適用任何場景,但動機的產(chǎn)生單純依靠標題以及內(nèi)容的展示

A、T:

信息傳達無學(xué)習(xí)成本,節(jié)省頁面空間,但點擊區(qū)域??;位于頂端,對于內(nèi)容超過一屏的模塊,用戶需要上滑返回才能點擊


· 板塊底部


M:

底部的位置符合用戶垂直向下的視覺動線,更容易被展示內(nèi)容吸引而順理成章的接受引導(dǎo)進入內(nèi)頁;

但仍具備上述提及跳轉(zhuǎn)本身的劣勢。

A、T:

由于底部可設(shè)計的空間較足,查看更多除了文字鏈接的設(shè)計以外,還可以有更多發(fā)揮空間,層級也能得到顯著,進而提高觸發(fā)條件和點擊能力。


按鈕設(shè)計:

豎向的展示設(shè)計,勢必會導(dǎo)致占用更多的頁面空間,因此在頁面模塊較多的情況下,仍應(yīng)該注意不必因強調(diào)“查看更多”而占用過多的頁面空間。



場景刷新


目的實現(xiàn)當前版塊更多內(nèi)容的即時更換。


優(yōu)勢:

大幅降低了新頁面跳轉(zhuǎn)帶來的弊端,用戶不需要承受多鏈路所帶來的短期記憶和整頁的加載成本,也無需返回到原有的瀏覽頁面中。雖然內(nèi)容依舊是缺少預(yù)期的,但是在用戶的接受范圍內(nèi),還有一種抽盲盒的驚喜。


劣勢:

通用性不強,內(nèi)容被局限在一個版塊中,無法實現(xiàn)內(nèi)容的全覽,而且隨機性很強。


適用性:

更適用于類似“猜你喜歡”、“隨便看看”的推薦類版塊。


案例展示:


交互細節(jié):

以上三個例子選用的按鈕位置和“查看更多”常用的位置類似,但可以看到當刷新按鈕結(jié)合具體化的引導(dǎo)文案進行設(shè)計時,更能使用戶在一定預(yù)期內(nèi)得到驚喜(如上方案例:網(wǎng)易云音樂)



場景滑動


自ios11中加入了卡片這個嶄新的容器后,卡片獨立可排列的特征就解鎖了橫向更多的空間。用戶可以通過scroll左右滑動手勢獲取到更多的內(nèi)容。


優(yōu)勢:

卡片滑動方式兼容性很強,可利用更少的頁面空間展示更多的內(nèi)容。


劣勢:

滑動展示有限,一般需要配合跳轉(zhuǎn)需求出現(xiàn)。


適用性:

更適用于類目的快捷展示,便于用戶選擇更感興趣的內(nèi)容;


案例展示:


交互細節(jié):

多用于固定容器為單位的橫向排列側(cè)滑展示更多內(nèi)容,通常板塊底部會有頁面指示器,或露出部分來提示用戶滑動。而這種橫向滑動場景常體現(xiàn)于「卡片式」「金剛區(qū)」


· 卡片式


布局上通過展示卡片的一部分,暗示用戶可以通過側(cè)滑看到更多。設(shè)計上常和跳轉(zhuǎn)場景組合使用,除此之外,也可根據(jù)業(yè)務(wù)上的需要考慮上方案例中且慢app的交互形式,頁面指示器結(jié)合側(cè)滑無限加載展示用戶評論,通過用戶交互成本較低的方式,即解決了用戶觸發(fā)動機弱而導(dǎo)致跳轉(zhuǎn)場景轉(zhuǎn)換率不高的問題,也能達成業(yè)務(wù)上的需求。


· 金剛區(qū)


隨著各大主流app承載的業(yè)務(wù)范圍越來越廣,首頁金剛區(qū)的運用已經(jīng)屢見不鮮,能快速展示所有業(yè)務(wù),便于用戶快速選擇需要的內(nèi)容。



場景組合

為了給用戶提供更多的選擇,也為了能承載更多的信息,常將刷新場景、滑動場景和跳轉(zhuǎn)場景結(jié)合使用。


優(yōu)勢:

彌補了單一交互的不足,用戶可以根據(jù)自己的選擇進行操作。


劣勢:

不同的交互類型的集合,用戶有可能會優(yōu)先選擇交互成本更低的操作,因此跳轉(zhuǎn)場景可能會被弱化。


適用性:

模塊上線初期,可以進行埋點設(shè)計,通過數(shù)據(jù)對比更能知道更貼近用戶的行為。


案例展示:


交互細節(jié):


· 場景滑動+場景跳轉(zhuǎn)


結(jié)合上文中提到的劣勢,如跳轉(zhuǎn)場景的入口設(shè)計太深,用戶的觸發(fā)能力就會不足,如上述案例的淘票票,若其沒有在標題右側(cè)設(shè)計查看全部文字鏈接,則當用戶滑動查看了大量信息仍未感興趣后,點擊更多卡片進入內(nèi)頁的概率也會大大降低。此類情況也經(jīng)常于金剛區(qū)的組合場景出現(xiàn)。


· 場景刷新+場景跳轉(zhuǎn)


當將兩類功能都平級的設(shè)計出現(xiàn),可以通過埋點數(shù)據(jù)分析出此功能區(qū)用戶的真實心理行為。




總結(jié)


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


本文對移動端頁面展示信息超載設(shè)計進行了總結(jié)分析,但不是唯一,也沒有哪一種方案是“絕對的優(yōu)質(zhì)體驗”,最終的落地設(shè)計還需要視場景而定。下篇將對頁面板塊信息超載設(shè)計進行總結(jié)分析~

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

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:陳皮Celia 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://tweetduck.com

存檔

茶陵县| 大关县| 莎车县| 泰和县| 宜州市| 西畴县| 沾益县| 岳普湖县| 宣化县| 台东县| 仙游县| 长顺县| 汽车| 凤凰县| 北流市| 太仓市| 章丘市| 西盟| 比如县| 清新县| 晋宁县| 寿宁县| 汨罗市| 杭州市| 洪江市| 荔波县| 道真| 石阡县| 金堂县| 阿拉善右旗| 平武县| 长子县| 体育| 江都市| 乾安县| 德清县| 绵阳市| 富阳市| 封丘县| 鲁山县| 金华市|