02-图片流设计细节拆分

什么是图片流：
多个物品按照特定规律 依次排列，这种呈现方式称为流

图片流的关键在于规律排布 和图片展示（展示图片为主，文字标签适当弱化处理）

图片流的使用场景有哪些?

适用于侧重图片展示的应用。 社交，电商类产品较常用；  工具类产品较少用

图片流的布局模式

根据产品特性 选择布局模

（1）水平单图

        1、图片主导性强

        2、页面焦点集中

*  多用于内容类页面，引导用户沉淀式 阅读（eg：马蜂窝     知乎     爱彼迎）

（2）水平双图

        1、展示内容更多

        2、方便对比

*  多用于电商及工具类 页面，便于用户做判断 （eg：淘宝     盒马鲜生     花瓣）

图片流的组成要素

（1）搜索栏

        1、上下间距统一（eg：间距20px）

        2、图片和文字统一（eg：高度：30px     颜色：#999）

知识拓展：热搜词（提示型，推广型，热门型......）

来自热搜榜，反应实时搜索热度，增加点击率，提升商业价值。

（2）筛选栏

        1、添加子选项（eg：24px     常规：#999）

        2、突出当前项（eg:24px     加粗     #333     筛选条   4px）

        3、调整间距（eg：四周20px     选项间60px）

知识拓展：复杂筛选栏

1、下拉子选择项（电商APP中常用复杂筛选栏进行组合查询）

2、排序选择项

3、筛选——侧滑或全页子选项（复杂选项，繁杂）

（3）图片流

       3-1  图片质量（1、图片清晰     2、主体明确     3、色彩鲜明——可靠近品牌色系）        

       3-2  文字层级          

                主标题——24px     加粗     #333

                注释文字——20px     常规     #333

                采用字号（最小公倍数4）和字重区分层级

        3-3  图标及头像（图片流类的图标和头像视觉上弱化）

                图标——20*20px     #bebebe     2px线粗

                头像——36*36px     圆形（头像图形轮廓更明确，背景更干净些，注意头像区域和成像的呼吸感）

        3-4  间距把控（最小公倍数法，等分五分原则）——UI设计规范总结色块法

                1级间距——20px

                2级间距——10px

知识拓展：图片流高度固定与不固定

*  高度固定——排版整齐，方便对比（工具类，社交类产品）

*  高度不固定——展示完整，布局灵活（内容类，电商类产品）

总结：图片流组成——导航栏功能；图片；标签；用户头像；卡片化小功能；微投影