UI設(shè)計(jì)中的Feed流設(shè)計(jì)指南

　　拿起你的手機(jī)，看看微博，知乎 ，今日頭條 ，微信朋友圈....... 謀殺我們多少時(shí)間?它們?yōu)槭裁从羞@樣的魔力?讓我們來(lái)一探究竟吧。
 

　　從結(jié)構(gòu)來(lái)看，這些社交和資訊類(lèi)app中，都使用了feed流。feed流是一個(gè)信息出口，想要與他人或資訊建立連接，只需要刷新這一個(gè)動(dòng)作，即可獲得大量所需，并且不斷在更新，可謂殺時(shí)間好手，令人沉溺。想要設(shè)計(jì)好feed流頁(yè)面，對(duì)feed流的概念，模式進(jìn)行了解是十分必要的。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中的Feed流設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說(shuō)明。
 

　　1、Feed流的定義
 

　　什么是Feed流呢?我們可以拆分成2個(gè)詞來(lái)理解：
 

　　Feed：Feed英文翻譯是喂養(yǎng)的意思，用在這里可以理解為：用戶(hù)需要什么，我們就給用戶(hù)提供什么。從技術(shù)層面講就是產(chǎn)品通過(guò)數(shù)據(jù)算法為不同用戶(hù)推薦他們感興趣的內(nèi)容，吸引用戶(hù)無(wú)限下拉。
 

　　流：信息有規(guī)律排版的一種呈現(xiàn)形式。
 

　　簡(jiǎn)單點(diǎn)來(lái)講，F(xiàn)eed流就是將用戶(hù)感興趣的內(nèi)容通過(guò)信息流的形式呈現(xiàn)給用戶(hù)。
 

　　2.Feed流常見(jiàn)樣式
 

　　feed流主要有3中常見(jiàn)形式：文字流、圖片流、視頻流。
 

　　2.1文字性的feed流
 

　　組成：標(biāo)題文字+輔助圖片
 

　　優(yōu)點(diǎn)：一屏之內(nèi)展現(xiàn)的信息數(shù)量多，信息獲取率高。通過(guò)對(duì)標(biāo)題信息的提煉快速告訴用戶(hù)當(dāng)前模塊的核心內(nèi)容。
 

　　缺點(diǎn)：視覺(jué)沖擊力較弱，僅有標(biāo)題信息，內(nèi)容展示不全面。
 

　　常見(jiàn)布局方式：左右布局、上下布局
 

　　多用于新聞資訊類(lèi)產(chǎn)品中，如下圖所示：

 

　　2.2圖片性feed流
 

　　組成：圖片+輔助文字

　　優(yōu)點(diǎn)：視覺(jué)沖擊力強(qiáng)，更容易吸引用戶(hù)注意力。圖片比文字具有更強(qiáng)的感染力，可以在短時(shí)間內(nèi)引發(fā)用戶(hù)的情感共鳴，相對(duì)與文字，圖片的瀏覽速度更快，印象更深刻。
 

　　缺點(diǎn)：圖片占用空間大，展示內(nèi)容少;信息傳達(dá)不如文字明確，對(duì)圖片質(zhì)量要求高。
 

　　常見(jiàn)布局方式：大圖布局、宮格布局、拼圖布局、瀑布流布局
 

　　2.2.1大圖布局
 

　　大圖布局也就是不管用戶(hù)上傳幾張圖片，F(xiàn)eed流中始終以一張大圖形式展現(xiàn)。
 

　　適配方式：一般有兩種，一種是展示圖片固定比例;另一種是隨圖片而變化。
 

　　(1)展示圖片尺寸固定
 

　　不管用戶(hù)上傳的是橫圖還是豎圖，展示圖片的比例始終固定，常用的比例有1:1、3:2、4:3、16:9等。采用該適配方式圖片占用空間小，可提高用戶(hù)的閱讀效率，適合想要提高用戶(hù)閱讀效率的產(chǎn)品。

 

　　(2)隨圖片而變化
 

　　當(dāng)用戶(hù)上傳不同比例的圖片時(shí)，圖片展示寬度為屏幕寬度，展示高度根據(jù)確定的寬度等比例縮放。采用該適配方式能將圖片信息表達(dá)完善，圖片占用空間大。適合圖片質(zhì)量高，用戶(hù)以瀏覽圖片為主的產(chǎn)品。
 

　　需要注意的是，采用該方式需要設(shè)置最大最小閾值，當(dāng)圖片的高度超過(guò)一定數(shù)值，高度就不再增加，當(dāng)圖片的高度小于一定數(shù)值，高度不再減小。

 

　　2.2.2宮格布局
 

　　宮格式布局就是用戶(hù)上傳的圖片會(huì)適配到一個(gè)個(gè)的方格中，宮格布局常見(jiàn)的排版有3宮格、6宮格、9宮格。
 

　　適用場(chǎng)景：多用在社交類(lèi)的APP中或者電商APP的內(nèi)容社區(qū)。如：微博、微信、QQ空間等社交APP;淘寶等電商應(yīng)用的內(nèi)容社區(qū)。

 

　　2.2.3拼圖布局
 

　　這種布局方式是將幾張圖片拼成一個(gè)矩形，樣式新穎類(lèi)似雜志的排版，對(duì)圖片質(zhì)量要求較高。
 

　　適用場(chǎng)景：多應(yīng)用在圖片社交中，如in。

 

　　2.2.4瀑布流式布局
 

　　視覺(jué)表現(xiàn)為參差不齊的多欄布局，瀑布流式布局下，用戶(hù)的視線軌跡以 Z型為主，這樣的軌跡易于閱讀。但由于用戶(hù)采用“就近原則” 閱讀信息，容易產(chǎn)生漏讀現(xiàn)象 。
 

　　適用場(chǎng)景：社區(qū)類(lèi)瀏覽型頁(yè)面中，這樣的頁(yè)面往往信息量大，采用瀑布流式布局瀏覽體驗(yàn)更為流暢。

 

　　2.3視頻性feed流
 

　　組成：短視頻為主(長(zhǎng)視頻占用用戶(hù)時(shí)間長(zhǎng)容易導(dǎo)致用戶(hù)缺乏耐心)+輔助文字
 

　　優(yōu)點(diǎn)：滿(mǎn)足用戶(hù)的在視覺(jué)和聽(tīng)覺(jué)上的感受，沉浸式體驗(yàn)好，更加容易吸引用戶(hù)的注意力。一般情況下會(huì)主動(dòng)且循環(huán)播放，畫(huà)面占滿(mǎn)全屏。例如快手、抖音、微視等。
 

　　缺點(diǎn)：占用空間大，展示內(nèi)容少;需要緩存，對(duì)網(wǎng)絡(luò)質(zhì)量要求高。

 

　　3.總結(jié)
 

　　feed流主要有3中常見(jiàn)形式：文字流、圖片流、視頻流。
 

　　其中圖片流主要有：大圖布局(適配方式：圖片固定比例、尺寸隨圖片而變化) 、宮格布局(三宮格、六宮格、九宮格)、拼圖布局、瀑布流式布局。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。