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


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

*  高度固定——排版整齐,方便对比(工具类,社交类产品)

*  高度不固定——展示完整,布局灵活(内容类,电商类产品)


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


推荐阅读更多精彩内容