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栏

推荐阅读更多精彩内容