03-feed流细节详细解析

图片流和feed流的区别：

    图片流——以图片为主体

    feed流——以内容为主体

    feed英文有喂养的意思，feed流即持续更新 并呈现给用户内容的信息流

一般什么情况下会使用feed流？（使用场景）

    社交类；新闻资讯类；内容阅读类

feed流设计规范

1、多字段（文字规范）

2、等级标签（标签设计）

3、配图把控

一、文字规范

1-1

字色：

    01——#333     适用于：标题，主文案

    02——#666     适用于：层级较弱的内容文字

    03——#999     适用于：辅助性，说明性文字

字号：（好的文字层级大于4px-最小公倍数）

    01——40px    标题     #333

    02——32px     内容     #333

    03——28px     次级内容     #666

    04——24px     辅助说明     #999

T——文字层级如何体现？

字重；字号；颜色

1-2、间距

  竖：

    01——40px     标题与内容区

    02——30px     内容区与评论区（同意模块，不同区域）

    03——20px     头像信息与内容（同区域，不同元素）

    04——10px     文字内容与图片内容（同区域，不同元素）

横：

    01——20px     不同元素之间

    02——10px     相同元素之间

小结：五分原则，等分原则

竖：

不同板块——40px / 30px

相同板块——20px

相同内容——10px

横：

不同元素——20px

相同元素——10px

二、等级标签

作用——增加用户粘性（eg：升级的意愿及成就感）

等级图标的绘制：

    1、背景增加同色渐变效果

    2、使用基础图形“五角星”绘制皇冠（或使用布尔运算法）

    3、绘制挖空图形

三、配图

高质量配图标准：

背景干净 + 主体突出 + 细节清晰

常见图片比例：

头像——1:1

feed流——9:6 / 3:2

如何优化图片

    1、调整饱和度（色相饱和度，色彩平衡，配合选区和蒙版进行局部调整）

    2、调整明度

    3、锐化图片，增加细节（高反差保留，柔光/叠加）

、

图片的统一性：

    1、角度一致

    2、比例一致

    3、色彩倾向一致

总结：

细节板块拆解：

多文字排版； 标签； 配图

必有字段：

导航栏功能； 搜索； 筛选； feed流小功能； tab栏