什么是圖片流：
多個物品按照特定規(guī)律?依次排列，這種呈現(xiàn)方式稱為流
圖片流的關(guān)鍵在于規(guī)律排布?和圖片展示（展示圖片為主芦缰，文字標(biāo)簽適當(dāng)弱化處理）
圖片流的使用場景有哪些?
適用于側(cè)重圖片展示的應(yīng)用。 社交价捧，電商類產(chǎn)品較常用每辟；? 工具類產(chǎn)品較少用
圖片流的布局模式
根據(jù)產(chǎn)品特性 選擇布局模
（1）水平單圖
? ? ? ? 1、圖片主導(dǎo)性強
? ? ? ? 2干旧、頁面焦點集中
*? 多用于內(nèi)容類頁面渠欺，引導(dǎo)用戶沉淀式 閱讀（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、突出當(dāng)前項（eg:24px? ? ?加粗? ? ?#333? ? ?篩選條? ?4px）
? ? ? ? 3粘勒、調(diào)整間距（eg：四周20px? ? ?選項間60px）
知識拓展：復(fù)雜篩選欄
1竞端、下拉子選擇項（電商APP中常用復(fù)雜篩選欄進(jìn)行組合查詢）
2、排序選擇項
3庙睡、篩選——側(cè)滑或全頁子選項（復(fù)雜選項事富，繁雜）
（3）圖片流
? ? ? ?3-1? 圖片質(zhì)量（1、圖片清晰? ? ?2乘陪、主體明確? ? ?3统台、色彩鮮明——可靠近品牌色系）? ? ? ??
? ? ? ?3-2? 文字層級? ? ? ? ??
? ? ? ? ? ? ? ? 主標(biāo)題——24px? ? ?加粗? ? ?#333
? ? ? ? ? ? ? ? 注釋文字——20px? ? ?常規(guī)? ? ?#333
? ? ? ? ? ? ? ? 采用字號（最小公倍數(shù)4）和字重區(qū)分層級
????????3-3? 圖標(biāo)及頭像（圖片流類的圖標(biāo)和頭像視覺上弱化）
? ? ? ? ? ? ? ? 圖標(biāo)——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é)：圖片流組成——導(dǎo)航欄功能森缠；圖片；標(biāo)簽仪缸；用戶頭像贵涵；卡片化小功能；微投影
