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

用户头像
北京/UI设计师/5年前/17577浏览
列表流、瀑布流、卡片流、Feed流 傻傻分不清?
用户头像
非佛系

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流最大的特点就是「千人千面」,根据每个人的兴趣爱好、购物习惯、使用习惯等来推荐内容


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









141
举报
|
292
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】美食icon
【新年UI图标】酒店icon
矢量立体简约UI蓝白图标
【新年UI图标】珠宝icon
我的钱包-UI界面设计-app
柠檬黄主题UI作品集模版
科技医疗透明柜UI界面设计
UI通用设计素材1
UI 登录界面设计模板包
UI界面 组件
高级感金属拟物 UI设计组件库
手表表盘UI系列
UI_3D图标火箭炮<新春促销>
【新年UI图标】美妆icon
【新年UI图标】影音icon
【新年UI图标】30个图标
新拟态风格 UI设计组件库
【新年UI图标】家具icon
钱包ui模板
UI应用平面图标
UI_3D图标炮仗<新春促销>
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
智能家居中心 简约 UI设计组件库
【新年UI图标】游戏/娱乐icon
你可能喜欢
相关收藏夹
大家都在看
登录注册