拿起你的手機,看看微博,知乎 ,今日頭條 ,微信朋友圈....... 謀殺我們多少時間?它們?yōu)槭裁从羞@樣的魔力?讓我們來一探究竟吧。
從結(jié)構(gòu)來看,這些社交和資訊類app中,都使用了feed流。feed流是一個信息出口,想要與他人或資訊建立連接,只需要刷新這一個動作,即可獲得大量所需,并且不斷在更新,可謂殺時間好手,令人沉溺。想要設(shè)計好feed流頁面,對feed流的概念,模式進行了解是十分必要的。今天AAA教育郭老師就針對UI設(shè)計中的Feed流設(shè)計指南進行簡單的說明。
1、Feed流的定義
什么是Feed流呢?我們可以拆分成2個詞來理解:
Feed:Feed英文翻譯是喂養(yǎng)的意思,用在這里可以理解為:用戶需要什么,我們就給用戶提供什么。從技術(shù)層面講就是產(chǎn)品通過數(shù)據(jù)算法為不同用戶推薦他們感興趣的內(nèi)容,吸引用戶無限下拉。
流:信息有規(guī)律排版的一種呈現(xiàn)形式。
簡單點來講,F(xiàn)eed流就是將用戶感興趣的內(nèi)容通過信息流的形式呈現(xiàn)給用戶。
feed流主要有3中常見形式:文字流、圖片流、視頻流。
2.1文字性的feed流
組成:標(biāo)題文字+輔助圖片
優(yōu)點:一屏之內(nèi)展現(xiàn)的信息數(shù)量多,信息獲取率高。通過對標(biāo)題信息的提煉快速告訴用戶當(dāng)前模塊的核心內(nèi)容。
缺點:視覺沖擊力較弱,僅有標(biāo)題信息,內(nèi)容展示不全面。
常見布局方式:左右布局、上下布局
多用于新聞資訊類產(chǎn)品中,如下圖所示:
2.2圖片性feed流
組成:圖片+輔助文字
優(yōu)點:視覺沖擊力強,更容易吸引用戶注意力。圖片比文字具有更強的感染力,可以在短時間內(nèi)引發(fā)用戶的情感共鳴,相對與文字,圖片的瀏覽速度更快,印象更深刻。
缺點:圖片占用空間大,展示內(nèi)容少;信息傳達不如文字明確,對圖片質(zhì)量要求高。
常見布局方式:大圖布局、宮格布局、拼圖布局、瀑布流布局
2.2.1大圖布局
大圖布局也就是不管用戶上傳幾張圖片,F(xiàn)eed流中始終以一張大圖形式展現(xiàn)。
適配方式:一般有兩種,一種是展示圖片固定比例;另一種是隨圖片而變化。
(1)展示圖片尺寸固定
不管用戶上傳的是橫圖還是豎圖,展示圖片的比例始終固定,常用的比例有1:1、3:2、4:3、16:9等。采用該適配方式圖片占用空間小,可提高用戶的閱讀效率,適合想要提高用戶閱讀效率的產(chǎn)品。
(2)隨圖片而變化
當(dāng)用戶上傳不同比例的圖片時,圖片展示寬度為屏幕寬度,展示高度根據(jù)確定的寬度等比例縮放。采用該適配方式能將圖片信息表達完善,圖片占用空間大。適合圖片質(zhì)量高,用戶以瀏覽圖片為主的產(chǎn)品。
需要注意的是,采用該方式需要設(shè)置最大最小閾值,當(dāng)圖片的高度超過一定數(shù)值,高度就不再增加,當(dāng)圖片的高度小于一定數(shù)值,高度不再減小。
2.2.2宮格布局
宮格式布局就是用戶上傳的圖片會適配到一個個的方格中,宮格布局常見的排版有3宮格、6宮格、9宮格。
適用場景:多用在社交類的APP中或者電商APP的內(nèi)容社區(qū)。如:微博、微信、QQ空間等社交APP;淘寶等電商應(yīng)用的內(nèi)容社區(qū)。
2.2.3拼圖布局
這種布局方式是將幾張圖片拼成一個矩形,樣式新穎類似雜志的排版,對圖片質(zhì)量要求較高。
適用場景:多應(yīng)用在圖片社交中,如in。
2.2.4瀑布流式布局
視覺表現(xiàn)為參差不齊的多欄布局,瀑布流式布局下,用戶的視線軌跡以 Z型為主,這樣的軌跡易于閱讀。但由于用戶采用“就近原則” 閱讀信息,容易產(chǎn)生漏讀現(xiàn)象 。
適用場景:社區(qū)類瀏覽型頁面中,這樣的頁面往往信息量大,采用瀑布流式布局瀏覽體驗更為流暢。
2.3視頻性feed流
組成:短視頻為主(長視頻占用用戶時間長容易導(dǎo)致用戶缺乏耐心)+輔助文字
優(yōu)點:滿足用戶的在視覺和聽覺上的感受,沉浸式體驗好,更加容易吸引用戶的注意力。一般情況下會主動且循環(huán)播放,畫面占滿全屏。例如快手、抖音、微視等。
缺點:占用空間大,展示內(nèi)容少;需要緩存,對網(wǎng)絡(luò)質(zhì)量要求高。
3.總結(jié)
feed流主要有3中常見形式:文字流、圖片流、視頻流。
其中圖片流主要有:大圖布局(適配方式:圖片固定比例、尺寸隨圖片而變化) 、宮格布局(三宮格、六宮格、九宮格)、拼圖布局、瀑布流式布局。
因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2021/ m.5wd995.cn 北京漫動者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc