列表流、瀑布流、卡片流、Feed流 傻傻分不清?

Recommand
北京/UI设计师/4年前/16125浏览
列表流、瀑布流、卡片流、Feed流 傻傻分不清?Recommand
非佛系

hello,我是非佛系——未来设计界中最会摊煎饼的👩‍🔧

这是我2021的第一篇文章

这篇文章帮大家整理了一下四种「流」的相关知识点

希望能够帮助到大家🦷





01.列表流


(1)列表流是什么?


 一种以文字信息为主导的功能布局形式,主要以文字+图片、文字+图标形式出现的



(2)列表流特点?


列表流常见于以文字信息为主导的页面中,如新闻资讯类app、消息列表等

 特点是——排版整齐、重点突出、对比方便、浏览速度快



(3)列表流进阶知识


列表流还可以细分为「左图右文式」「左图右文式」


左图右文式——

根据尼尔森F型视觉,人们的视线通常是由左即右,由上即下。

因此这种排版适合图片的优先级大于文字的功能页面(但总体还是以文字信息为主导)。



左图右文式——

右边放图片,左边放文字。

这种排版适合文字的优先级大于图片的功能页面(图不是必要,而是点缀元素)




02.瀑布流


(1)瀑布流是什么?


 瀑布流是“瀑布流式布局”的简称,因滑动时会像瀑布一样“飞流直下”“源源不断”,故而得名。是一种以图片信息为主导的页面布局形式,主要以图片+文字形式出现



(2)瀑布流的特点? 


瀑布流常见于以图片信息为主导的页面中,如电商app、花瓣等

特点是——趣味性、图片聚焦


(3)瀑布表流进阶知识


瀑布流还可以细分为「固定式」「交错式」


固定式——

图片区的大小高度保持不变,统一的高度会使整个界面看起来比较整齐



交错式——

图片区的高度参差不齐,这样在一定程度上能营造热闹的氛围,可以在里面穿插其他组件,缓解用户的疲劳



另外,文字区域还可以分为「有标签」和「无标签」,具体使用哪种要根据「功能导向」来决定

举个🌰:如果产品主要用于图片收集,那增加标签反而会干扰用户使用;如果产品主要用购物,则可以通过增加标签来强化利益点






03.卡片流


(1)卡片流是什么?


卡片流是信息以卡片形式呈现的一种页面布局形式


(2)卡片流的特点?


卡片流 列表流的升级版,形式多样

 特点——多变、聚焦

  

(3)卡片表流进阶知识


最近很流行的「兜底加载」形式(又称骨架图),就是以卡片流为基础制作的






04.Feed流


(1)Feed流是什么


 Feed流一种通过大数据计算,推荐给用户ta最可能感兴趣内容的一种设计形式,主要用于社交类、新闻类app,其形式主要包括「图片流」「信息流」


(2)Feed流的特点?


 feed流最大的特点就是「千人千面」,根据每个人的兴趣爱好、购物习惯、使用习惯等来推荐内容


举个🌰:下图为我与同事的淘宝【推荐】区域。显而易见,虽然都属于【推荐】,但呈现的内容完全不一样









139
Report
|
286
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
经验
经验
经验
经验
作品收藏夹
干货总结
干货总结
干货总结
干货总结
作品收藏夹
UI设计规范
UI设计规范
UI设计规范
UI设计规范
作品收藏夹
学习
学习
学习
学习
作品收藏夹
UI
UI
UI
UI
作品收藏夹
理论
理论
理论
理论
作品收藏夹
大家都在看
Log in