04-发现页设计及层次性梳理

T——什么是发现页？

用来发布和展示UGC（用户产生内容）的板块，用于提高用户互动性 和活跃度

发现页的特点：

布局合理     排版清晰     阅读体验好

阅读体验的关键——合理的强弱层级关系，帮助用户选择重点

发现页的常见板块构成：

    1、分页搜索栏——页面快速分流

    2、话题卡片——产品层面优先级高的话题板块

    3、列表流——feed列表流，信息板块

    4、悬浮按钮（参与icon）——信息发布功能板块

视觉细节拆解：

一、导航栏     二、卡片     三、列表     四、悬浮按钮

导航栏的组成

    1、两边icon大小一致，描边粗细一致

    2、分页tab中，选中项与未选中项的区别点

icon：

    描边粗细：2~3px

    设计尺寸：40px

    切图尺寸：48px

选中状态：

    文字字号：36px

    文字字重：medium

    文字颜色：品牌色

未选中状态：

    文字字号：32px

    文字字重：regular

    文字颜色：#666

三、卡片

1、文字层级

2、彩色背景

3、几何点缀

标题（主文案）——苹方（非不变）     50px     加粗     （视主文案文字多少调整）

副文案——苹方     30px     常规

按钮文案——苹方     20px     常规，标签

微渐变

弥散投影——复制卡片，缩小，高斯模糊

增加投影——叠层几何增加投影，表现光影效果

增加遮罩——底部增加同色遮罩，增加过渡自然感

三、列表组成

1、标签     2、主副文案     3、头像     4、辅助icon

T——如何保证列表的可读性？

信息的呼吸感

        标题文字与内容文字间距

        内容文字与头像之间的间距

保证文字层级呼吸感，不同文案层级直接间距+8px倍数的行间距

四、悬浮按钮

1、图标绘制     2、色块底版     3、弥散投影

总结：

细节板块拆解——导航栏、选项卡、feed流

增分项目——优秀的彩色化卡片，优秀的配图功底