什么是圖片流：
多個物品按照特定規(guī)律?依次排列，這種呈現(xiàn)方式稱為流

圖片流的關(guān)鍵在于規(guī)律排布?和圖片展示（展示圖片為主，文字標簽適當弱化處理）

圖片流的使用場景有哪些?

適用于側(cè)重圖片展示的應(yīng)用。 社交，電商類產(chǎn)品較常用；? 工具類產(chǎn)品較少用

圖片流的布局模式

根據(jù)產(chǎn)品特性 選擇布局模

（1）水平單圖

? ? ? ? 1、圖片主導性強

? ? ? ? 2、頁面焦點集中

*? 多用于內(nèi)容類頁面，引導用戶沉淀式 閱讀（eg：馬蜂窩? ? ?知乎? ? ?愛彼迎）

（2）水平雙圖

? ? ? ? 1、展示內(nèi)容更多

? ? ? ? 2、方便對比

*? 多用于電商及工具類 頁面，便于用戶做判斷 （eg：淘寶? ? ?盒馬鮮生? ? ?花瓣）

圖片流的組成要素

（1）搜索欄

? ? ????1、上下間距統(tǒng)一（eg：間距20px）

? ? ? ? 2、圖片和文字統(tǒng)一（eg：高度：30px? ? ?顏色：#999）

知識拓展：熱搜詞（提示型，推廣型，熱門型......）

來自熱搜榜，反應(yīng)實時搜索熱度，增加點擊率，提升商業(yè)價值。

（2）篩選欄

? ? ? ? 1、添加子選項（eg：24px? ? ?常規(guī)：#999）

? ? ? ? 2、突出當前項（eg:24px? ? ?加粗? ? ?#333? ? ?篩選條? ?4px）

? ? ? ? 3、調(diào)整間距（eg：四周20px? ? ?選項間60px）

知識拓展：復(fù)雜篩選欄

1、下拉子選擇項（電商APP中常用復(fù)雜篩選欄進行組合查詢）

2、排序選擇項

3、篩選——側(cè)滑或全頁子選項（復(fù)雜選項，繁雜）

（3）圖片流

? ? ? ?3-1? 圖片質(zhì)量（1、圖片清晰? ? ?2、主體明確? ? ?3、色彩鮮明——可靠近品牌色系）? ? ? ??

? ? ? ?3-2? 文字層級? ? ? ? ??

? ? ? ? ? ? ? ? 主標題——24px? ? ?加粗? ? ?#333

? ? ? ? ? ? ? ? 注釋文字——20px? ? ?常規(guī)? ? ?#333

? ? ? ? ? ? ? ? 采用字號（最小公倍數(shù)4）和字重區(qū)分層級

????????3-3? 圖標及頭像（圖片流類的圖標和頭像視覺上弱化）

? ? ? ? ? ? ? ? 圖標——20*20px? ? ?#bebebe? ? ?2px線粗

? ? ? ? ? ? ? ? 頭像——36*36px? ? ?圓形（頭像圖形輪廓更明確，背景更干凈些，注意頭像區(qū)域和成像的呼吸感）

????????3-4? 間距把控（最小公倍數(shù)法，等分五分原則）——UI設(shè)計規(guī)范總結(jié)色塊法

? ? ? ? ? ? ? ? 1級間距——20px

? ? ? ? ? ? ? ? 2級間距——10px

知識拓展：圖片流高度固定與不固定

*? 高度固定——排版整齊，方便對比（工具類，社交類產(chǎn)品）

*? 高度不固定——展示完整，布局靈活（內(nèi)容類，電商類產(chǎn)品）

總結(jié)：圖片流組成——導航欄功能；圖片；標簽；用戶頭像；卡片化小功能；微投影