UI設計中的Feed流設計指南

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

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

　　1、Feed流的定義
 

　　什么是Feed流呢?我們可以拆分成2個詞來理解：
 

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

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

　　簡單點來講，F(xiàn)eed流就是將用戶感興趣的內容通過信息流的形式呈現(xiàn)給用戶。
 

　　2.Feed流常見樣式
 

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

　　2.1文字性的feed流
 

　　組成：標題文字+輔助圖片
 

　　優(yōu)點：一屏之內展現(xiàn)的信息數(shù)量多，信息獲取率高。通過對標題信息的提煉快速告訴用戶當前模塊的核心內容。
 

　　缺點：視覺沖擊力較弱，僅有標題信息，內容展示不全面。
 

　　常見布局方式：左右布局、上下布局
 

　　多用于新聞資訊類產品中，如下圖所示：

 

　　2.2圖片性feed流
 

　　組成：圖片+輔助文字

　　優(yōu)點：視覺沖擊力強，更容易吸引用戶注意力。圖片比文字具有更強的感染力，可以在短時間內引發(fā)用戶的情感共鳴，相對與文字，圖片的瀏覽速度更快，印象更深刻。
 

　　缺點：圖片占用空間大，展示內容少;信息傳達不如文字明確，對圖片質量要求高。
 

　　常見布局方式：大圖布局、宮格布局、拼圖布局、瀑布流布局
 

　　2.2.1大圖布局
 

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

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

　　(1)展示圖片尺寸固定
 

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

 

　　(2)隨圖片而變化
 

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

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

 

　　2.2.2宮格布局
 

　　宮格式布局就是用戶上傳的圖片會適配到一個個的方格中，宮格布局常見的排版有3宮格、6宮格、9宮格。
 

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

 

　　2.2.3拼圖布局
 

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

　　適用場景：多應用在圖片社交中，如in。

 

　　2.2.4瀑布流式布局
 

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

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

 

　　2.3視頻性feed流
 

　　組成：短視頻為主(長視頻占用用戶時間長容易導致用戶缺乏耐心)+輔助文字
 

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

　　缺點：占用空間大，展示內容少;需要緩存，對網(wǎng)絡質量要求高。

 

　　3.總結
 

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

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

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